🐛 Refactor layout of Dependencies details drawer

Refactor the header and layout of tabs for the dependencies detail drawer following the changes in konveyor#1542. Signed-off-by: Scott J Dickerson <sdickers@redhat.com>
sjd78 · Nov 16, 2023 · daf5b4f · daf5b4f
1 parent 4445104
commit daf5b4f
Showing 1 changed file with 12 additions and 11 deletions.
diff --git a/client/src/app/pages/dependencies/dependency-apps-detail-drawer.tsx b/client/src/app/pages/dependencies/dependency-apps-detail-drawer.tsx
@@ -39,23 +39,24 @@ export const DependencyAppsDetailDrawer: React.FC<
       focusKey={dependency?.name}
       pageKey="analysis-app-dependencies"
       drawerPanelContentProps={{ defaultSize: "600px" }}
+      header={
+        <TextContent>
+          <Text component="small" className={spacing.mb_0}>
+            Dependency
+          </Text>
+          <Title headingLevel="h2" size="lg" className={spacing.mtXs}>
+            {dependency?.name || ""} ({dependency?.provider || "none"})
+          </Title>
+        </TextContent>
+      }
     >
       {!dependency ? (
         <StateNoData />
       ) : (
-        <>
-          <TextContent>
-            <Text component="small" className={spacing.mb_0}>
-              Dependencies
-            </Text>
-            <Title headingLevel="h2" size="lg" className={spacing.mtXs}>
-              {dependency?.name || ""}
-            </Title>
-          </TextContent>
+        <div>
           <Tabs
             activeKey={activeTabKey}
             onSelect={(_event, tabKey) => setActiveTabKey(tabKey as TabKey)}
-            className={spacing.mtLg}
           >
             <Tab
               eventKey={TabKey.Applications}
@@ -66,7 +67,7 @@ export const DependencyAppsDetailDrawer: React.FC<
               ) : null}
             </Tab>
           </Tabs>
-        </>
+        </div>
       )}
     </PageDrawerContent>
   );