🐛 Refactor Dependencies details drawer layout and unique row handling

Changes: - Refactor the header and layout of tabs for the dependencies detail drawer following the changes in konveyor#1542. - Show the dependency name and provider in the header since those two fields together are the row unique key - Update the filter for the dependency applications to include both the name and the provider to match the row unique key Signed-off-by: Scott J Dickerson <sdickers@redhat.com>
sjd78 · Nov 16, 2023 · 099fd76 · 099fd76
1 parent 4445104
commit 099fd76
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 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
@@ -1,8 +1,6 @@
 import * as React from "react";
-import {
-  IPageDrawerContentProps,
-  PageDrawerContent,
-} from "@app/components/PageDrawerContext";
+import { useTranslation } from "react-i18next";
+
 import {
   TextContent,
   Text,
@@ -12,7 +10,12 @@ import {
   Tab,
 } from "@patternfly/react-core";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
+
 import { AnalysisDependency } from "@app/api/models";
+import {
+  IPageDrawerContentProps,
+  PageDrawerContent,
+} from "@app/components/PageDrawerContext";
 import { StateNoData } from "@app/components/StateNoData";
 import { DependencyAppsTable } from "./dependency-apps-table";
 
@@ -28,6 +31,8 @@ enum TabKey {
 export const DependencyAppsDetailDrawer: React.FC<
   IDependencyAppsDetailDrawerProps
 > = ({ dependency, onCloseClick }) => {
+  const { t } = useTranslation();
+
   const [activeTabKey, setActiveTabKey] = React.useState<TabKey>(
     TabKey.Applications
   );
@@ -39,23 +44,25 @@ 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 / Language
+          </Text>
+          <Title headingLevel="h2" size="lg" className={spacing.mtXs}>
+            {dependency?.name || ""} /{" "}
+            {dependency?.provider || t("terms.none").toLocaleLowerCase()}
+          </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 +73,7 @@ export const DependencyAppsDetailDrawer: React.FC<
               ) : null}
             </Tab>
           </Tabs>
-        </>
+        </div>
       )}
     </PageDrawerContent>
   );

diff --git a/client/src/app/pages/dependencies/dependency-apps-table.tsx b/client/src/app/pages/dependencies/dependency-apps-table.tsx
@@ -115,6 +115,7 @@ export const DependencyAppsTable: React.FC<IDependencyAppsTableProps> = ({
       },
       implicitFilters: [
         { field: "dep.name", operator: "=", value: dependency.name },
+        { field: "dep.provider", operator: "=", value: dependency.provider },
       ],
     })
   );