fix: auto adjust min height of xblock previews [FC-0083] (#1813)

Sets minimum height of library block previews based on its render
location and block type.

Author: navinkarkera

src/editors/AdvancedEditor.tsx

@@ -55,6 +55,7 @@ const AdvancedEditor = ({ usageKey, onClose }: AdvancedEditorProps) => {
             usageKey={usageKey}
             view="studio_view"
             scrolling="yes"
+            minHeight="70vh"
           />
         </IframeProvider>
       </EditorModalWrapper>

src/library-authoring/LibraryBlock/LibraryBlock.tsx

@@ -15,6 +15,7 @@ interface LibraryBlockProps {
   version?: VersionSpec;
   view?: string;
   scrolling?: string;
+  minHeight?: string;
 }
 /**
  * React component that displays an XBlock in a sandboxed IFrame.
@@ -30,6 +31,7 @@ export const LibraryBlock = ({
   usageKey,
   version,
   view,
+  minHeight,
   scrolling = 'no',
 }: LibraryBlockProps) => {
   const { iframeRef, setIframeRef } = useIframe();
@@ -61,7 +63,7 @@ export const LibraryBlock = ({
       loading="lazy"
       referrerPolicy="origin"
       style={{
-        width: '100%', height: iframeHeight, pointerEvents: 'auto', minHeight: '700px',
+        width: '100%', height: iframeHeight, pointerEvents: 'auto', minHeight,
       }}
       allow={IFRAME_FEATURE_POLICY}
       allowFullScreen

src/library-authoring/component-comparison/CompareChangesWidget.tsx

@@ -29,14 +29,22 @@ const CompareChangesWidget = ({ usageKey, oldVersion = 'published', newVersion =
         <Tab eventKey="old" title={intl.formatMessage(messages.oldVersionTitle)}>
           <div className="p-2 bg-white">
             <IframeProvider>
-              <LibraryBlock usageKey={usageKey} version={oldVersion} />
+              <LibraryBlock
+                usageKey={usageKey}
+                version={oldVersion}
+                minHeight="50vh"
+              />
             </IframeProvider>
           </div>
         </Tab>
         <Tab eventKey="new" title={intl.formatMessage(messages.newVersionTitle)}>
           <div className="p-2 bg-white">
             <IframeProvider>
-              <LibraryBlock usageKey={usageKey} version={newVersion} />
+              <LibraryBlock
+                usageKey={usageKey}
+                version={newVersion}
+                minHeight="50vh"
+              />
             </IframeProvider>
           </div>
         </Tab>

src/library-authoring/component-info/ComponentPreview.tsx

@@ -31,6 +31,7 @@ const ModalComponentPreview = ({ isOpen, close, usageKey }: ModalComponentPrevie
       <LibraryBlock
         usageKey={usageKey}
         version={showOnlyPublished ? 'published' : undefined}
+        minHeight="60vh"
       />
     </StandardModal>
   );
@@ -71,6 +72,7 @@ const ComponentPreview = () => {
                 usageKey={usageKey}
                 key={componentMetadata.modified}
                 version={showOnlyPublished ? 'published' : undefined}
+                minHeight="60vh"
               />
             )
             : null

src/library-authoring/units/LibraryUnitBlocks.tsx

@@ -12,6 +12,7 @@ import DraggableList, { SortableItem } from '../../editors/sharedComponents/Drag
 
 import ErrorAlert from '../../generic/alert-error';
 import { getItemIcon } from '../../generic/block-type-utils';
+import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
 import { IframeProvider } from '../../generic/hooks/context/iFrameContext';
 import Loading from '../../generic/Loading';
 import TagCount from '../../generic/tag-count';
@@ -24,6 +25,15 @@ import { useLibraryRoutes } from '../routes';
 import messages from './messages';
 import { useSidebarContext } from '../common/context/SidebarContext';
 
+/** Components that need large min height in preview */
+const LARGE_COMPONENTS = [
+  COMPONENT_TYPES.advanced,
+  COMPONENT_TYPES.dragAndDrop,
+  COMPONENT_TYPES.discussion,
+  'lti',
+  'lti_consumer',
+];
+
 export const LibraryUnitBlocks = () => {
   const intl = useIntl();
   const [orderedBlocks, setOrderedBlocks] = useState<LibraryBlockMetadata[]>([]);
@@ -79,6 +89,14 @@ export const LibraryUnitBlocks = () => {
     navigateTo({ componentId: block.id });
   };
 
+  /* istanbul ignore next */
+  const calculateMinHeight = (block: LibraryBlockMetadata) => {
+    if (LARGE_COMPONENTS.includes(block.blockType)) {
+      return '700px';
+    }
+    return '200px';
+  };
+
   const renderedBlocks = orderedBlocks?.map((block) => (
     <IframeProvider key={block.id}>
       <SortableItem
@@ -124,6 +142,7 @@ export const LibraryUnitBlocks = () => {
           <LibraryBlock
             usageKey={block.id}
             version={showOnlyPublished ? 'published' : undefined}
+            minHeight={calculateMinHeight(block)}
           />
         </div>
       </SortableItem>