refactor: rename disabledTabs to hiddenTabs

Author: navinkarkera

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

@@ -84,8 +84,8 @@ export type SidebarContextData = {
   setSidebarTab: (tab: SidebarInfoTab) => void;
   defaultTab: DefaultTabs;
   setDefaultTab: (tabs: DefaultTabs) => void;
-  disabledTabs: Array<SidebarInfoTab>;
-  setDisabledTabs: (tabs: ComponentInfoTab[]) => void;
+  hiddenTabs: Array<SidebarInfoTab>;
+  setHiddenTabs: (tabs: ComponentInfoTab[]) => void;
 };
 
 /**
@@ -118,7 +118,7 @@ export const SidebarProvider = ({
     unit: UNIT_INFO_TABS.Preview,
     collection: COLLECTION_INFO_TABS.Manage,
   });
-  const [disabledTabs, setDisabledTabs] = useState<Array<SidebarInfoTab>>([]);
+  const [hiddenTabs, setHiddenTabs] = useState<Array<SidebarInfoTab>>([]);
 
   const [sidebarTab, setSidebarTab] = useStateWithUrlSearchParam<SidebarInfoTab>(
     defaultTab.component,
@@ -197,8 +197,8 @@ export const SidebarProvider = ({
       setSidebarTab,
       defaultTab,
       setDefaultTab,
-      disabledTabs,
-      setDisabledTabs,
+      hiddenTabs,
+      setHiddenTabs,
     };
 
     return contextValue;
@@ -218,8 +218,8 @@ export const SidebarProvider = ({
     setSidebarTab,
     defaultTab,
     setDefaultTab,
-    disabledTabs,
-    setDisabledTabs,
+    hiddenTabs,
+    setHiddenTabs,
   ]);
 
   return (
@@ -253,8 +253,8 @@ export function useSidebarContext(): SidebarContextData {
         collection: COLLECTION_INFO_TABS.Manage,
       },
       setDefaultTab: () => {},
-      disabledTabs: [],
-      setDisabledTabs: () => {},
+      hiddenTabs: [],
+      setHiddenTabs: () => {},
     };
   }
   return ctx;

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

@@ -109,7 +109,7 @@ const ComponentInfo = () => {
     sidebarComponentInfo,
     sidebarAction,
     defaultTab,
-    disabledTabs,
+    hiddenTabs,
   } = useSidebarContext();
   const [
     isPublishConfirmationOpen,
@@ -156,8 +156,9 @@ const ComponentInfo = () => {
       });
   }, [publishComponent, showToast, intl]);
 
+  // TODO: refactor sidebar Tabs to handle rendering and disabledTabs in one place.
   const renderTab = React.useCallback((infoTab: ComponentInfoTab, component: React.ReactNode, title: string) => {
-    if (disabledTabs.includes(infoTab)) {
+    if (hiddenTabs.includes(infoTab)) {
       // For some reason, returning anything other than empty list breaks the tab style
       return [];
     }
@@ -166,7 +167,7 @@ const ComponentInfo = () => {
         {component}
       </Tab>
     );
-  }, [disabledTabs, defaultTab.component]);
+  }, [hiddenTabs, defaultTab.component]);
 
   return (
     <>

src/library-authoring/containers/UnitInfo.tsx

@@ -26,7 +26,7 @@ const UnitInfo = () => {
   const { setUnitId } = useLibraryContext();
   const { componentPickerMode } = useComponentPickerContext();
   const {
-    defaultTab, disabledTabs, sidebarComponentInfo, sidebarTab, setSidebarTab,
+    defaultTab, hiddenTabs, sidebarComponentInfo, sidebarTab, setSidebarTab,
   } = useSidebarContext();
   const { insideUnit, navigateTo } = useLibraryRoutes();
 
@@ -51,7 +51,7 @@ const UnitInfo = () => {
   const showOpenUnitButton = !insideUnit || componentPickerMode;
 
   const renderTab = useCallback((infoTab: UnitInfoTab, component: React.ReactNode, title: string) => {
-    if (disabledTabs.includes(infoTab)) {
+    if (hiddenTabs.includes(infoTab)) {
       // For some reason, returning anything other than empty list breaks the tab style
       return [];
     }
@@ -60,7 +60,7 @@ const UnitInfo = () => {
         {component}
       </Tab>
     );
-  }, [disabledTabs, defaultTab.unit, unitId]);
+  }, [hiddenTabs, defaultTab.unit, unitId]);
 
   return (
     <Stack>

src/library-authoring/units/LibraryUnitPage.tsx

@@ -84,7 +84,7 @@ export const LibraryUnitPage = () => {
     sidebarComponentInfo,
     openInfoSidebar,
     setDefaultTab,
-    setDisabledTabs,
+    setHiddenTabs,
   } = useSidebarContext();
 
   useEffect(() => {
@@ -93,16 +93,16 @@ export const LibraryUnitPage = () => {
       component: COMPONENT_INFO_TABS.Manage,
       unit: UNIT_INFO_TABS.Organize,
     });
-    setDisabledTabs([COMPONENT_INFO_TABS.Preview, UNIT_INFO_TABS.Preview]);
+    setHiddenTabs([COMPONENT_INFO_TABS.Preview, UNIT_INFO_TABS.Preview]);
     return () => {
       setDefaultTab({
         component: COMPONENT_INFO_TABS.Preview,
         unit: UNIT_INFO_TABS.Preview,
         collection: COLLECTION_INFO_TABS.Manage,
       });
-      setDisabledTabs([]);
+      setHiddenTabs([]);
     };
-  }, [setDefaultTab, setDisabledTabs]);
+  }, [setDefaultTab, setHiddenTabs]);
 
   useEffect(() => {
     openInfoSidebar(componentId, collectionId, unitId);