feat: hide preview tab in sidebar in unit page

Author: navinkarkera

src/library-authoring/common/context/SidebarContext.tsx

@@ -65,6 +65,8 @@ export type SidebarContextData = {
   setSidebarTab: (tab: SidebarInfoTab) => void;
   defaultTab: ComponentInfoTab;
   setDefaultTab: (tab: ComponentInfoTab) => void;
+  disabledTabs: ComponentInfoTab[];
+  setDisabledTabs: (tabs: ComponentInfoTab[]) => void;
 };
 
 /**
@@ -93,6 +95,7 @@ export const SidebarProvider = ({
   );
 
   const [defaultTab, setDefaultTab] = useState<ComponentInfoTab>(COMPONENT_INFO_TABS.Preview);
+  const [disabledTabs, setDisabledTabs] = useState<ComponentInfoTab[]>([]);
 
   const [sidebarTab, setSidebarTab] = useStateWithUrlSearchParam<SidebarInfoTab>(
     defaultTab,
@@ -161,6 +164,8 @@ export const SidebarProvider = ({
       setSidebarTab,
       defaultTab,
       setDefaultTab,
+      disabledTabs,
+      setDisabledTabs,
     };
 
     return contextValue;
@@ -179,6 +184,8 @@ export const SidebarProvider = ({
     setSidebarTab,
     defaultTab,
     setDefaultTab,
+    disabledTabs,
+    setDisabledTabs,
   ]);
 
   return (
@@ -207,6 +214,8 @@ export function useSidebarContext(): SidebarContextData {
       sidebarComponentInfo: undefined,
       defaultTab: COMPONENT_INFO_TABS.Preview,
       setDefaultTab: () => {},
+      disabledTabs: [],
+      setDisabledTabs: () => {},
     };
   }
   return ctx;

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

@@ -31,6 +31,7 @@ import { getBlockType } from '../../generic/key-utils';
 import { useLibraryBlockMetadata, usePublishComponent } from '../data/apiHooks';
 import { ToastContext } from '../../generic/toast-context';
 import PublishConfirmationModal from '../components/PublishConfirmationModal';
+import { title } from '../../schedule-and-details/__mocks__/courseDetails';
 
 const AddComponentWidget = () => {
   const intl = useIntl();
@@ -109,6 +110,7 @@ const ComponentInfo = () => {
     sidebarComponentInfo,
     sidebarAction,
     defaultTab,
+    disabledTabs,
   } = useSidebarContext();
   const [
     isPublishConfirmationOpen,
@@ -155,6 +157,18 @@ const ComponentInfo = () => {
       });
   }, [publishComponent, showToast, intl]);
 
+  const renderTab = React.useCallback((tab: ComponentInfoTab, component: React.ReactNode, title: string) => {
+    if (disabledTabs.includes(tab)) {
+      // For some reason, returning anything other than empty list breaks the tab style
+      return [];
+    }
+    return (
+      <Tab eventKey={tab} title={title}>
+        {component}
+      </Tab>
+    );
+  }, [disabledTabs, defaultTab]);
+
   return (
     <>
       <Stack>
@@ -186,15 +200,9 @@ const ComponentInfo = () => {
           activeKey={tab}
           onSelect={setSidebarTab}
         >
-          <Tab eventKey={COMPONENT_INFO_TABS.Preview} title={intl.formatMessage(messages.previewTabTitle)}>
-            <ComponentPreview />
-          </Tab>
-          <Tab eventKey={COMPONENT_INFO_TABS.Manage} title={intl.formatMessage(messages.manageTabTitle)}>
-            <ComponentManagement />
-          </Tab>
-          <Tab eventKey={COMPONENT_INFO_TABS.Details} title={intl.formatMessage(messages.detailsTabTitle)}>
-            <ComponentDetails />
-          </Tab>
+          {renderTab(COMPONENT_INFO_TABS.Preview, <ComponentPreview />, intl.formatMessage(messages.previewTabTitle))}
+          {renderTab(COMPONENT_INFO_TABS.Manage, <ComponentManagement />, intl.formatMessage(messages.manageTabTitle))}
+          {renderTab(COMPONENT_INFO_TABS.Details, <ComponentDetails />, intl.formatMessage(messages.detailsTabTitle))}
         </Tabs>
       </Stack>
       <PublishConfirmationModal

src/library-authoring/units/LibraryUnitPage.tsx

@@ -173,8 +173,21 @@ export const LibraryUnitPage = () => {
     unitId,
     componentId,
   } = useLibraryContext();
-  const { sidebarComponentInfo, openInfoSidebar, setDefaultTab } = useSidebarContext();
-  setDefaultTab(COMPONENT_INFO_TABS.Manage);
+  const {
+    sidebarComponentInfo,
+    openInfoSidebar,
+    setDefaultTab,
+    setDisabledTabs,
+  } = useSidebarContext();
+
+  useEffect(() => {
+    setDefaultTab(COMPONENT_INFO_TABS.Manage);
+    setDisabledTabs([COMPONENT_INFO_TABS.Preview]);
+    return () => {
+      setDefaultTab(COMPONENT_INFO_TABS.Preview);
+      setDisabledTabs([])
+    };
+  }, [setDefaultTab, setDisabledTabs]);
 
   useEffect(() => {
     openInfoSidebar(componentId);