#334 disable help tabs with no videos

pkpdapp-team · Jan 15, 2024 · 09be8d2 · 09be8d2
1 parent f80cdb5
commit 09be8d2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/frontend-v2/src/components/DynamicTabs.tsx b/frontend-v2/src/components/DynamicTabs.tsx
@@ -21,6 +21,7 @@ export const TabContext = React.createContext<TabContextProps>({
 
 interface DynamicTabsProps {
   tabNames: SubPageName[];
+  disabledTabs?: SubPageName[];
   tabErrors?: { [key: string]: string };
   isOtherSpeciesSelected?: boolean;
 }
@@ -40,6 +41,7 @@ export const TabPanel: React.FC<PropsWithChildren<TabPanelProps>> = ({
 
 export const DynamicTabs: React.FC<PropsWithChildren<DynamicTabsProps>> = ({
   tabNames,
+  disabledTabs,
   tabErrors,
   isOtherSpeciesSelected,
   children,
@@ -96,6 +98,7 @@ export const DynamicTabs: React.FC<PropsWithChildren<DynamicTabsProps>> = ({
                 label={name}
                 icon={name in errors ? errors[name] : undefined}
                 iconPosition="end"
+                disabled={disabledTabs?.includes(name)}
               />
             ))}
           </Tabs>

diff --git a/frontend-v2/src/features/help/Help.tsx b/frontend-v2/src/features/help/Help.tsx
@@ -78,17 +78,20 @@ const Help: React.FC = () => {
     tutorialVideos.filter((video) => video.type === "Trial Design"),
     tutorialVideos.filter((video) => video.type === "Simulation"),
   ];
+  const tabNames = [
+    SubPageName.TUTORIALS,
+    SubPageName.PROJECTS,
+    SubPageName.DRUG,
+    SubPageName.MODEL,
+    SubPageName.TRAILDESIGN,
+    SubPageName.SIMULATION,
+  ];
+  const disabledTabs = tabNames.filter((name, index) => tutorials[index].length === 0);
 
   return (
     <DynamicTabs
-      tabNames={[
-        SubPageName.TUTORIALS,
-        SubPageName.PROJECTS,
-        SubPageName.DRUG,
-        SubPageName.MODEL,
-        SubPageName.TRAILDESIGN,
-        SubPageName.SIMULATION,
-      ]}
+      tabNames={tabNames}
+      disabledTabs={disabledTabs}
     >
       {questions.map((question, index) => (
         <TabPanel key={index}>