From 06d6551cc1f9cab5ec3288e1930a9c03eb341316 Mon Sep 17 00:00:00 2001
From: Scott Dickerson <sdickers@redhat.com>
Date: Wed, 15 Nov 2023 15:51:13 -0500
Subject: [PATCH] :sparkles: Regroup the dependencies table on name only,
 version/sha shown in details (#1536)

Resolves: #1338
Resolves: https://issues.redhat.com/browse/MTA-1585

Depends on hub change https://github.com/konveyor/tackle2-hub/issues/557
/ https://github.com/konveyor/tackle2-hub/pull/558.

Summary of changes:
  - The dependency table will show a single row for every named
    dependency.
  - Multiple versions will be aggregated as a single row.
  - Details about multiple versions will be available in the details
    drawer.
  - The details view application table will show the application +
    version, allowing for all versions used to be listed.

---------

Signed-off-by: Scott J Dickerson <sdickers@redhat.com>
---
 client/src/app/api/models.ts                  |  13 +-
 .../app/pages/dependencies/dependencies.tsx   | 125 ++++++------------
 .../dependencies/dependency-apps-table.tsx    |   2 -
 3 files changed, 49 insertions(+), 91 deletions(-)

diff --git a/client/src/app/api/models.ts b/client/src/app/api/models.ts
index 5191e8aa8e..09a2e85683 100644
--- a/client/src/app/api/models.ts
+++ b/client/src/app/api/models.ts
@@ -503,13 +503,10 @@ export interface TrackerProjectIssuetype {
 }
 
 export interface AnalysisDependency {
-  createTime: string;
-  name: string;
   provider: string;
-  version: string;
-  sha: string;
-  applications: number;
+  name: string;
   labels: string[];
+  applications: number;
 }
 
 export interface AnalysisAppDependency {
@@ -519,12 +516,12 @@ export interface AnalysisAppDependency {
   businessService: string;
   dependency: {
     id: number;
+    provider: string;
     name: string;
     version: string;
-    provider: string;
+    sha: string;
     indirect: boolean;
-    //TODO: Glean from labels somehow
-    // management?: string;
+    labels: string[];
   };
 }
 
diff --git a/client/src/app/pages/dependencies/dependencies.tsx b/client/src/app/pages/dependencies/dependencies.tsx
index 648397c7a5..c61e145fd0 100644
--- a/client/src/app/pages/dependencies/dependencies.tsx
+++ b/client/src/app/pages/dependencies/dependencies.tsx
@@ -79,31 +79,10 @@ export const Dependencies: React.FC = () => {
           }) + "...",
         getServerFilterValue: (value) => (value ? [`*${value[0]}*`] : []),
       },
-      {
-        key: "version",
-        title: t("terms.version"),
-        type: FilterType.search,
-        filterGroup: "Dependency",
-        placeholderText:
-          t("actions.filterBy", {
-            what: t("terms.label").toLowerCase(),
-          }) + "...",
-        getServerFilterValue: (value) => (value ? [`*${value[0]}*`] : []),
-      },
-      {
-        key: "sha",
-        title: "SHA",
-        type: FilterType.search,
-        filterGroup: "Dependency",
-        placeholderText:
-          t("actions.filterBy", {
-            what: t("terms.name").toLowerCase(),
-          }) + "...",
-        getServerFilterValue: (value) => (value ? [`*${value[0]}*`] : []),
-      },
     ],
     initialItemsPerPage: 10,
   });
+
   const {
     result: { data: currentPageItems, total: totalItemCount },
     isFetching,
@@ -179,8 +158,6 @@ export const Dependencies: React.FC = () => {
                   <Th {...getThProps({ columnKey: "foundIn" })} />
                   <Th {...getThProps({ columnKey: "provider" })} />
                   <Th {...getThProps({ columnKey: "labels" })} />
-                  <Th {...getThProps({ columnKey: "version" })} />
-                  <Th {...getThProps({ columnKey: "sha" })} />
                 </TableHeaderContentWithControls>
               </Tr>
             </Thead>
@@ -190,63 +167,49 @@ export const Dependencies: React.FC = () => {
               isNoData={totalItemCount === 0}
               numRenderedColumns={numRenderedColumns}
             >
-              {currentPageItems?.map((dependency, rowIndex) => {
-                return (
-                  <Tbody key={dependency.name + rowIndex}>
-                    <Tr {...getTrProps({ item: dependency })}>
-                      <TableRowContentWithControls
-                        {...tableControls}
-                        item={dependency}
-                        rowIndex={rowIndex}
-                      >
-                        <Td width={25} {...getTdProps({ columnKey: "name" })}>
-                          {dependency.name}
-                        </Td>
-                        <Td
-                          width={10}
-                          {...getTdProps({ columnKey: "foundIn" })}
-                        >
-                          <Button
-                            className={spacing.pl_0}
-                            variant="link"
-                            onClick={(_) => {
-                              if (activeItem && activeItem === dependency) {
-                                clearActiveItem();
-                              } else {
-                                setActiveItem(dependency);
-                              }
-                            }}
-                          >
-                            {`${dependency.applications} application(s)`}
-                          </Button>
-                        </Td>
-                        <Td
-                          width={10}
-                          {...getTdProps({ columnKey: "provider" })}
-                        >
-                          {dependency.provider}
-                        </Td>
-                        <Td width={10} {...getTdProps({ columnKey: "labels" })}>
-                          <LabelGroup>
-                            {dependency?.labels?.map((label) => {
-                              return <Label>{label}</Label>;
-                            })}
-                          </LabelGroup>
-                        </Td>
-                        <Td
-                          width={10}
-                          {...getTdProps({ columnKey: "version" })}
+              <Tbody>
+                {currentPageItems?.map((dependency, rowIndex) => (
+                  <Tr
+                    key={dependency.name + rowIndex}
+                    {...getTrProps({ item: dependency })}
+                  >
+                    <TableRowContentWithControls
+                      {...tableControls}
+                      item={dependency}
+                      rowIndex={rowIndex}
+                    >
+                      <Td width={25} {...getTdProps({ columnKey: "name" })}>
+                        {dependency.name}
+                      </Td>
+                      <Td width={10} {...getTdProps({ columnKey: "foundIn" })}>
+                        <Button
+                          className={spacing.pl_0}
+                          variant="link"
+                          onClick={(_) => {
+                            if (activeItem && activeItem === dependency) {
+                              clearActiveItem();
+                            } else {
+                              setActiveItem(dependency);
+                            }
+                          }}
                         >
-                          {dependency.version}
-                        </Td>
-                        <Td width={10} {...getTdProps({ columnKey: "sha" })}>
-                          {dependency.sha}
-                        </Td>
-                      </TableRowContentWithControls>
-                    </Tr>
-                  </Tbody>
-                );
-              })}
+                          {`${dependency.applications} application(s)`}
+                        </Button>
+                      </Td>
+                      <Td width={10} {...getTdProps({ columnKey: "provider" })}>
+                        {dependency.provider}
+                      </Td>
+                      <Td width={10} {...getTdProps({ columnKey: "labels" })}>
+                        <LabelGroup>
+                          {dependency?.labels?.map((label, index) => (
+                            <Label key={index}>{label}</Label>
+                          ))}
+                        </LabelGroup>
+                      </Td>
+                    </TableRowContentWithControls>
+                  </Tr>
+                ))}
+              </Tbody>
             </ConditionalTableBody>
           </Table>
           <SimplePagination
@@ -259,7 +222,7 @@ export const Dependencies: React.FC = () => {
       <DependencyAppsDetailDrawer
         dependency={activeItem || null}
         onCloseClick={() => setActiveItem(null)}
-      ></DependencyAppsDetailDrawer>
+      />
     </>
   );
 };
diff --git a/client/src/app/pages/dependencies/dependency-apps-table.tsx b/client/src/app/pages/dependencies/dependency-apps-table.tsx
index 2107ca18eb..0e58a97e4c 100644
--- a/client/src/app/pages/dependencies/dependency-apps-table.tsx
+++ b/client/src/app/pages/dependencies/dependency-apps-table.tsx
@@ -106,8 +106,6 @@ export const DependencyAppsTable: React.FC<IDependencyAppsTableProps> = ({
       },
       implicitFilters: [
         { field: "dep.name", operator: "=", value: dependency.name },
-        { field: "dep.version", operator: "=", value: dependency.version },
-        { field: "dep.sha", operator: "=", value: dependency.sha },
       ],
     })
   );