Update count to reflect apps inheriting assessments from archetypes

Port over initial filter values change Properly serialize & deserialize filters to match server side implementation Signed-off-by: ibolton336 <[email protected]>
konveyor · Nov 27, 2023 · 7a6667b · 7a6667b
1 parent 9bbc35e
commit 7a6667b
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 27 deletions.
diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
@@ -138,8 +138,6 @@ export const MultiselectFilterControl = <TItem,>({
     const input = textInput?.toLowerCase();
 
     return renderSelectOptions((optionProps, groupName) => {
-      if (!input) return false;
-
       // TODO: Checking for a filter match against the key or the value may not be desirable.
       return (
         groupName?.toLowerCase().includes(input) ||

diff --git a/client/src/app/hooks/table-controls/filtering/useFilterState.ts b/client/src/app/hooks/table-controls/filtering/useFilterState.ts
@@ -44,6 +44,7 @@ export type IFilterStateArgs<
      * Definitions of the filters to be used (must include `getItemValue` functions for each category when performing filtering locally)
      */
     filterCategories: FilterCategory<TItem, TFilterCategoryKey>[];
+    initialFilterValues?: IFilterValues<TFilterCategoryKey>;
   }
 >;
 
@@ -62,6 +63,8 @@ export const useFilterState = <
     IFeaturePersistenceArgs<TPersistenceKeyPrefix>
 ): IFilterState<TFilterCategoryKey> => {
   const { isFilterEnabled, persistTo = "state", persistenceKeyPrefix } = args;
+  const initialFilterValues: IFilterValues<TFilterCategoryKey> =
+    (isFilterEnabled && args.initialFilterValues) || {};
 
   // We won't need to pass the latter two type params here if TS adds support for partial inference.
   // See https://github.com/konveyor/tackle2-ui/issues/1456
@@ -71,7 +74,7 @@ export const useFilterState = <
     "filters"
   >({
     isEnabled: !!isFilterEnabled,
-    defaultValue: {},
+    defaultValue: initialFilterValues,
     persistenceKeyPrefix,
     // Note: For the discriminated union here to work without TypeScript getting confused
     //       (e.g. require the urlParams-specific options when persistTo === "urlParams"),

diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -67,8 +67,11 @@ import { checkAccess } from "@app/utils/rbac-utils";
 import WarningTriangleIcon from "@patternfly/react-icons/dist/esm/icons/warning-triangle-icon";
 
 // Hooks
-import { useQueryClient } from "@tanstack/react-query";
-import { useLocalTableControls } from "@app/hooks/table-controls";
+import { useIsFetching, useQueryClient } from "@tanstack/react-query";
+import {
+  deserializeFilterUrlParams,
+  useLocalTableControls,
+} from "@app/hooks/table-controls";
 
 // Queries
 import { Application, Assessment, Ref, Task } from "@app/api/models";
@@ -111,6 +114,8 @@ export const ApplicationsTable: React.FC = () => {
   const history = useHistory();
   const token = keycloak.tokenParsed;
 
+  const isFetching = useIsFetching();
+
   const { pushNotification } = React.useContext(NotificationsContext);
 
   const { identities } = useFetchIdentities();
@@ -303,6 +308,11 @@ export const ApplicationsTable: React.FC = () => {
     }
   };
 
+  const urlParams = new URLSearchParams(window.location.search);
+  const filters = urlParams.get("filters");
+
+  const deserializedFilterValues = deserializeFilterUrlParams({ filters });
+
   const tableControls = useLocalTableControls({
     idProperty: "id",
     items: applications || [],
@@ -321,6 +331,7 @@ export const ApplicationsTable: React.FC = () => {
     isActiveItemEnabled: true,
     sortableColumns: ["name", "businessService", "tags", "effort"],
     initialSort: { columnKey: "name", direction: "asc" },
+    initialFilterValues: deserializedFilterValues,
     getSortValues: (app) => ({
       name: app.name,
       businessService: app.businessService?.name || "",
@@ -331,12 +342,17 @@ export const ApplicationsTable: React.FC = () => {
       {
         key: "name",
         title: t("terms.name"),
-        type: FilterType.search,
+        type: FilterType.multiselect,
         placeholderText:
           t("actions.filterBy", {
             what: t("terms.name").toLowerCase(),
           }) + "...",
         getItemValue: (item) => item?.name || "",
+        selectOptions: [
+          ...new Set(
+            applications.map((application) => application.name).filter(Boolean)
+          ),
+        ].map((name) => ({ key: name, value: name })),
       },
       {
         key: "archetypes",
@@ -690,7 +706,7 @@ export const ApplicationsTable: React.FC = () => {
 
   return (
     <ConditionalRender
-      when={isFetchingApplications && !(applications || applicationsFetchError)}
+      when={!!isFetching && !(applications || applicationsFetchError)}
       then={<AppPlaceholder />}
     >
       <div

diff --git a/client/src/app/pages/reports/components/identified-risks-table/identified-risks-table.tsx b/client/src/app/pages/reports/components/identified-risks-table/identified-risks-table.tsx
@@ -9,9 +9,14 @@ import {
   ConditionalTableBody,
   TableRowContentWithControls,
 } from "@app/components/TableControls";
-import { useLocalTableControls } from "@app/hooks/table-controls";
+import {
+  serializeFilterUrlParams,
+  useLocalTableControls,
+} from "@app/hooks/table-controls";
 import { SimplePagination } from "@app/components/SimplePagination";
 import { Toolbar, ToolbarContent, ToolbarItem } from "@patternfly/react-core";
+import { Link } from "react-router-dom";
+import { Paths } from "@app/Paths";
 
 export interface IIdentifiedRisksTableProps {}
 
@@ -47,7 +52,6 @@ export const IdentifiedRisksTable: React.FC<
     const uniqueApplications = combinedApplications.reduce(
       (acc: Ref[], current) => {
         if (!acc.find((item) => item?.id === current.id)) {
-          // Assuming 'id' is the unique identifier
           acc.push(current);
         }
         return acc;
@@ -85,9 +89,7 @@ export const IdentifiedRisksTable: React.FC<
                 section: section.name,
                 question: question.text,
                 answer: answer.text,
-                applications: assessment.application
-                  ? [assessment.application]
-                  : [],
+                applications: uniqueApplications ? uniqueApplications : [],
                 assessmentName: assessment.questionnaire.name,
                 questionId: itemId,
               });
@@ -200,7 +202,13 @@ export const IdentifiedRisksTable: React.FC<
                       {item.answer ?? "N/A"}
                     </Td>
                     <Td {...getTdProps({ columnKey: "applications" })}>
-                      {item?.applications.length ?? "N/A"}
+                      {item?.applications.length ? (
+                        <Link to={getApplicationsUrl(item?.applications)}>
+                          {item.applications.length}
+                        </Link>
+                      ) : (
+                        "N/A"
+                      )}
                     </Td>
                   </TableRowContentWithControls>
                 </Tr>
@@ -212,3 +220,16 @@ export const IdentifiedRisksTable: React.FC<
     </>
   );
 };
+
+const getApplicationsUrl = (applications: Ref[]) => {
+  const filterValues = {
+    name: applications.map((app) => app.name),
+  };
+
+  const serializedParams = serializeFilterUrlParams(filterValues);
+
+  const queryString = serializedParams.filters
+    ? `filters=${serializedParams.filters}`
+    : "";
+  return `${Paths.applications}?${queryString}`;
+};
diff --git a/client/src/app/queries/assessments.ts b/client/src/app/queries/assessments.ts
@@ -19,7 +19,6 @@ import { AxiosError } from "axios";
 import {
   Assessment,
   AssessmentWithSectionOrder,
-  AssessmentWithArchetypeApplications,
   InitialAssessment,
 } from "@app/api/models";
 import { QuestionnairesQueryKey } from "./questionnaires";
@@ -234,20 +233,25 @@ export const useFetchAssessmentsWithArchetypeApplications = () => {
   });
 
   const isArchetypesLoading = archetypeQueries.some((query) => query.isLoading);
-  const archetypesData = archetypeQueries
-    .map((query) => query.data)
-    .filter(Boolean);
 
-  const assessmentsWithArchetypeApplications: AssessmentWithArchetypeApplications[] =
-    assessments.map((assessment, index) => {
-      const archetypeInfo = archetypesData[index];
-      return {
-        ...assessment,
-        archetypeApplications: archetypeInfo.applications
-          ? archetypeInfo.applications
-          : [],
-      };
-    });
+  const archetypeApplicationsMap = new Map();
+  archetypeQueries.forEach((query, index) => {
+    if (query.data && assessments[index].archetype?.id) {
+      archetypeApplicationsMap.set(
+        assessments[index]?.archetype?.id,
+        query.data.applications
+      );
+    }
+  });
+
+  const assessmentsWithArchetypeApplications = assessments.map(
+    (assessment) => ({
+      ...assessment,
+      archetypeApplications: assessment.archetype?.id
+        ? archetypeApplicationsMap.get(assessment.archetype.id) || []
+        : [],
+    })
+  );
 
   return {
     assessmentsWithArchetypeApplications,