From 4ab5428823a97bb8ae3b558c81053d73b0f04db0 Mon Sep 17 00:00:00 2001
From: Mike Turley <mike.turley@alum.cs.umass.edu>
Date: Mon, 25 Sep 2023 13:41:30 -0400
Subject: [PATCH 1/6] :bug: Fix inconsistent styles between app inventory
 tables, fix wrong drawer component being used on analysis table, remove stray
 character (#1397)

* Fixes the difference in cell spacing between the two tabs of the
application inventory page - one was using a `<Tbody>` and one was not.
* Removes `style={{ cursor: "pointer" }}` inline styles from these
tables as they seem to have no effect with the `getClickableTrProps`
being used
* Restores the use of the `ApplicationDetailDrawerAnalysis` component on
the analysis table instead of the `ApplicationDetailDrawerAssessment`
* Removes a `;` character that snuck into the drawer

Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu>
---
 .../applications-table-analyze.tsx            |  11 +-
 .../applications-table-assessment.tsx         | 220 +++++++++---------
 .../application-risk.tsx                      |   2 +-
 3 files changed, 120 insertions(+), 113 deletions(-)

diff --git a/client/src/app/pages/applications/applications-table-analyze/applications-table-analyze.tsx b/client/src/app/pages/applications/applications-table-analyze/applications-table-analyze.tsx
index eaa2b03bd1..ab51251729 100644
--- a/client/src/app/pages/applications/applications-table-analyze/applications-table-analyze.tsx
+++ b/client/src/app/pages/applications/applications-table-analyze/applications-table-analyze.tsx
@@ -74,7 +74,7 @@ import { useFetchTagCategories } from "@app/queries/tags";
 
 // Relative components
 import { ApplicationBusinessService } from "../components/application-business-service";
-import { ApplicationDetailDrawerAssessment } from "../components/application-detail-drawer";
+import { ApplicationDetailDrawerAnalysis } from "../components/application-detail-drawer";
 import { ApplicationForm } from "../components/application-form";
 import { ApplicationIdentityForm } from "../components/application-identity-form/application-identity-form";
 import { ImportApplicationsForm } from "../components/import-applications-form";
@@ -550,7 +550,7 @@ export const ApplicationsTableAnalyze: React.FC = () => {
 
             <ToolbarItem {...paginationToolbarItemProps}>
               <SimplePagination
-                idPrefix="s-table"
+                idPrefix="app-analysis-table"
                 isTop
                 paginationProps={paginationProps}
               />
@@ -585,7 +585,7 @@ export const ApplicationsTableAnalyze: React.FC = () => {
             }
             numRenderedColumns={numRenderedColumns}
           >
-            <Tbody style={{ cursor: "pointer" }}>
+            <Tbody>
               {currentPageItems.map((application, rowIndex) => (
                 <Tr
                   key={application.id}
@@ -748,12 +748,13 @@ export const ApplicationsTableAnalyze: React.FC = () => {
           </ConditionalTableBody>
         </Table>
         <SimplePagination
-          idPrefix="app-assessments-table"
+          idPrefix="app-analysis-table"
           isTop={false}
           paginationProps={paginationProps}
         />
-        <ApplicationDetailDrawerAssessment
+        <ApplicationDetailDrawerAnalysis
           application={activeRowItem}
+          applications={applications}
           onCloseClick={clearActiveRow}
           task={activeRowItem ? getTask(activeRowItem) : null}
         />
diff --git a/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx b/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx
index f641c5ee29..f82438efba 100644
--- a/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx
+++ b/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx
@@ -26,6 +26,7 @@ import {
   Th,
   Td,
   ActionsColumn,
+  Tbody,
 } from "@patternfly/react-table";
 
 // @app components and utilities
@@ -575,7 +576,7 @@ export const ApplicationsTable: React.FC = () => {
 
             <ToolbarItem {...paginationToolbarItemProps}>
               <SimplePagination
-                idPrefix="s-table"
+                idPrefix="app-assessments-table"
                 isTop
                 paginationProps={paginationProps}
               />
@@ -611,115 +612,120 @@ export const ApplicationsTable: React.FC = () => {
             }
             numRenderedColumns={numRenderedColumns}
           >
-            {currentPageItems?.map((application, rowIndex) => {
-              return (
-                <Tr
-                  style={{ cursor: "pointer" }}
-                  key={application.name}
-                  {...getClickableTrProps({ item: application })}
-                >
-                  <TableRowContentWithControls
-                    {...tableControls}
-                    item={application}
-                    rowIndex={rowIndex}
+            <Tbody>
+              {currentPageItems?.map((application, rowIndex) => {
+                return (
+                  <Tr
+                    key={application.name}
+                    {...getClickableTrProps({ item: application })}
                   >
-                    <Td
-                      width={20}
-                      {...getTdProps({ columnKey: "name" })}
-                      modifier="truncate"
-                    >
-                      {application.name}
-                    </Td>
-                    <Td
-                      width={25}
-                      {...getTdProps({ columnKey: "description" })}
-                      modifier="truncate"
-                    >
-                      {application.description}
-                    </Td>
-                    <Td
-                      width={10}
-                      modifier="truncate"
-                      {...getTdProps({ columnKey: "businessService" })}
+                    <TableRowContentWithControls
+                      {...tableControls}
+                      item={application}
+                      rowIndex={rowIndex}
                     >
-                      {application.businessService && (
-                        <ApplicationBusinessService
-                          id={application.businessService.id}
+                      <Td
+                        width={20}
+                        {...getTdProps({ columnKey: "name" })}
+                        modifier="truncate"
+                      >
+                        {application.name}
+                      </Td>
+                      <Td
+                        width={25}
+                        {...getTdProps({ columnKey: "description" })}
+                        modifier="truncate"
+                      >
+                        {application.description}
+                      </Td>
+                      <Td
+                        width={10}
+                        modifier="truncate"
+                        {...getTdProps({ columnKey: "businessService" })}
+                      >
+                        {application.businessService && (
+                          <ApplicationBusinessService
+                            id={application.businessService.id}
+                          />
+                        )}
+                      </Td>
+                      <Td
+                        width={10}
+                        modifier="truncate"
+                        {...getTdProps({ columnKey: "assessment" })}
+                      >
+                        <ApplicationAssessmentStatus
+                          assessments={application.assessments}
                         />
-                      )}
-                    </Td>
-                    <Td
-                      width={10}
-                      modifier="truncate"
-                      {...getTdProps({ columnKey: "assessment" })}
-                    >
-                      <ApplicationAssessmentStatus
-                        assessments={application.assessments}
-                      />
-                    </Td>
-                    <Td
-                      width={10}
-                      modifier="truncate"
-                      {...getTdProps({ columnKey: "review" })}
-                    >
-                      <IconedStatus
-                        preset={application.review ? "Completed" : "NotStarted"}
-                      />
-                    </Td>
-                    <Td
-                      width={10}
-                      modifier="truncate"
-                      {...getTdProps({ columnKey: "tags" })}
-                    >
-                      <TagIcon />
-                      {application.tags ? application.tags.length : 0}
-                    </Td>
-                    <Td isActionCell id="pencil-action">
-                      <Button
-                        variant="plain"
-                        icon={<PencilAltIcon />}
-                        onClick={() =>
-                          setSaveApplicationModalState(application)
-                        }
-                      />
-                    </Td>
-                    <Td isActionCell id="row-actions">
-                      <ActionsColumn
-                        items={[
-                          {
-                            title: t("actions.assess"),
-                            onClick: () => assessSelectedApp(application),
-                          },
-                          {
-                            title: t("actions.review"),
-                            onClick: () => reviewSelectedApp(application),
-                          },
-                          ...(application?.review
-                            ? [
-                                {
-                                  title: t("actions.discardAssessment"),
-                                  onClick: () =>
-                                    setAssessmentOrReviewToDiscard(application),
-                                },
-                              ]
-                            : []),
-                          {
-                            title: t("actions.delete"),
-                            onClick: () =>
-                              setApplicationsToDelete([application]),
-                          },
-                          {
-                            title: t("actions.manageDependencies"),
-                            onClick: () =>
-                              setApplicationDependenciesToManage(application),
-                          },
-                        ]}
-                      />
-                    </Td>
-                  </TableRowContentWithControls>
-                </Tr>
-              );
-            })}
+                      </Td>
+                      <Td
+                        width={10}
+                        modifier="truncate"
+                        {...getTdProps({ columnKey: "review" })}
+                      >
+                        <IconedStatus
+                          preset={
+                            application.review ? "Completed" : "NotStarted"
+                          }
+                        />
+                      </Td>
+                      <Td
+                        width={10}
+                        modifier="truncate"
+                        {...getTdProps({ columnKey: "tags" })}
+                      >
+                        <TagIcon />
+                        {application.tags ? application.tags.length : 0}
+                      </Td>
+                      <Td isActionCell id="pencil-action">
+                        <Button
+                          variant="plain"
+                          icon={<PencilAltIcon />}
+                          onClick={() =>
+                            setSaveApplicationModalState(application)
+                          }
+                        />
+                      </Td>
+                      <Td isActionCell id="row-actions">
+                        <ActionsColumn
+                          items={[
+                            {
+                              title: t("actions.assess"),
+                              onClick: () => assessSelectedApp(application),
+                            },
+                            {
+                              title: t("actions.review"),
+                              onClick: () => reviewSelectedApp(application),
+                            },
+                            ...(application?.review
+                              ? [
+                                  {
+                                    title: t("actions.discardAssessment"),
+                                    onClick: () =>
+                                      setAssessmentOrReviewToDiscard(
+                                        application
+                                      ),
+                                  },
+                                ]
+                              : []),
+                            {
+                              title: t("actions.delete"),
+                              onClick: () =>
+                                setApplicationsToDelete([application]),
+                            },
+                            {
+                              title: t("actions.manageDependencies"),
+                              onClick: () =>
+                                setApplicationDependenciesToManage(application),
+                            },
+                          ]}
+                        />
+                      </Td>
+                    </TableRowContentWithControls>
+                  </Tr>
+                );
+              })}
+            </Tbody>
           </ConditionalTableBody>
         </Table>
         <SimplePagination
diff --git a/client/src/app/pages/applications/components/application-detail-drawer/application-risk.tsx b/client/src/app/pages/applications/components/application-detail-drawer/application-risk.tsx
index 3a24bfe28c..ac75cc7560 100644
--- a/client/src/app/pages/applications/components/application-detail-drawer/application-risk.tsx
+++ b/client/src/app/pages/applications/components/application-detail-drawer/application-risk.tsx
@@ -30,7 +30,7 @@ export const ApplicationRisk: React.FC<IApplicationRiskProps> = ({
   if (!assessments || assessments.length === 0) {
     return (
       <>
-        <RiskLabel risk={"unknown"} />;
+        <RiskLabel risk={"unknown"} />
         {isFetchingAssessmentsById && <Spinner />}
       </>
     );

From de9b20dc02837c4a3c0ca74e70f23ef34e9b1869 Mon Sep 17 00:00:00 2001
From: Mike Turley <mike.turley@alum.cs.umass.edu>
Date: Mon, 25 Sep 2023 14:11:34 -0400
Subject: [PATCH 2/6] :bug: Fix broken rendering of migration waves table rows,
 properly pass isExpandable prop in useTableControlProps (#1398)

In #1345, we changed the structure of the expandable rows in the
Migration Waves table and caused the `isExpanded` prop to be present on
all rows (which should only be on the expanded content rows), which
caused all rows to be hidden because it was false. This PR restores the
intended structure: Each row is wrapped in a `<Tbody>` with the
`isExpanded` prop, which contains two `<Tr>`s: one for the row itself
and one for the expanded content.

Also removes the `cursor: "pointer"` inline style on the `Tbody` which
was causing the whole row to appear clickable even though only the
expandable cells are clickable.

Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu>
---
 .../table-controls/useTableControlProps.ts    |   3 +-
 .../pages/migration-waves/migration-waves.tsx | 340 +++++++++---------
 2 files changed, 170 insertions(+), 173 deletions(-)

diff --git a/client/src/app/hooks/table-controls/useTableControlProps.ts b/client/src/app/hooks/table-controls/useTableControlProps.ts
index 872dff81b4..bd0c05cba5 100644
--- a/client/src/app/hooks/table-controls/useTableControlProps.ts
+++ b/client/src/app/hooks/table-controls/useTableControlProps.ts
@@ -17,7 +17,7 @@ export const useTableControlProps = <
   TItem,
   TColumnKey extends string,
   TSortableColumnKey extends TColumnKey,
-  TFilterCategoryKey extends string = string
+  TFilterCategoryKey extends string = string,
 >(
   args: IUseTableControlPropsArgs<
     TItem,
@@ -102,6 +102,7 @@ export const useTableControlProps = <
 
   const tableProps: Omit<TableProps, "ref"> = {
     variant,
+    isExpandable: !!expandableVariant,
   };
 
   const getThProps = ({
diff --git a/client/src/app/pages/migration-waves/migration-waves.tsx b/client/src/app/pages/migration-waves/migration-waves.tsx
index 09a17ffda5..d2ebd9e260 100644
--- a/client/src/app/pages/migration-waves/migration-waves.tsx
+++ b/client/src/app/pages/migration-waves/migration-waves.tsx
@@ -363,198 +363,194 @@ export const MigrationWaves: React.FC = () => {
                 }
                 numRenderedColumns={numRenderedColumns}
               >
-                <Tbody style={{ cursor: "pointer" }}>
-                  {currentPageItems?.map((migrationWave, rowIndex) => (
-                    <>
-                      <Tr
-                        key={migrationWave.id}
-                        isExpanded={isCellExpanded(migrationWave)}
+                {currentPageItems?.map((migrationWave, rowIndex) => (
+                  <Tbody
+                    key={migrationWave.id}
+                    isExpanded={isCellExpanded(migrationWave)}
+                  >
+                    <Tr>
+                      <TableRowContentWithControls
+                        {...tableControls}
+                        item={migrationWave}
+                        rowIndex={rowIndex}
                       >
-                        <TableRowContentWithControls
-                          {...tableControls}
-                          item={migrationWave}
-                          rowIndex={rowIndex}
+                        <Td width={25} {...getTdProps({ columnKey: "name" })}>
+                          {migrationWave.name}
+                        </Td>
+                        <Td
+                          width={10}
+                          {...getTdProps({ columnKey: "startDate" })}
                         >
-                          <Td width={25} {...getTdProps({ columnKey: "name" })}>
-                            {migrationWave.name}
-                          </Td>
-                          <Td
-                            width={10}
-                            {...getTdProps({ columnKey: "startDate" })}
-                          >
-                            {dayjs(migrationWave.startDate)
-                              .tz(currentTimezone)
-                              .format("MM/DD/YYYY")}
-                          </Td>
-                          <Td
-                            width={10}
-                            {...getTdProps({ columnKey: "endDate" })}
-                          >
-                            {dayjs(migrationWave.endDate)
-                              .tz(currentTimezone)
-                              .format("MM/DD/YYYY")}
-                          </Td>
-                          <Td
-                            width={10}
-                            {...getCompoundExpandTdProps({
-                              item: migrationWave,
-                              rowIndex,
-                              columnKey: "applications",
-                            })}
-                          >
-                            {migrationWave?.applications?.length.toString()}
-                          </Td>
-                          <Td
-                            width={10}
-                            {...getCompoundExpandTdProps({
+                          {dayjs(migrationWave.startDate)
+                            .tz(currentTimezone)
+                            .format("MM/DD/YYYY")}
+                        </Td>
+                        <Td
+                          width={10}
+                          {...getTdProps({ columnKey: "endDate" })}
+                        >
+                          {dayjs(migrationWave.endDate)
+                            .tz(currentTimezone)
+                            .format("MM/DD/YYYY")}
+                        </Td>
+                        <Td
+                          width={10}
+                          {...getCompoundExpandTdProps({
+                            item: migrationWave,
+                            rowIndex,
+                            columnKey: "applications",
+                          })}
+                        >
+                          {migrationWave?.applications?.length.toString()}
+                        </Td>
+                        <Td
+                          width={10}
+                          {...getCompoundExpandTdProps({
+                            item: migrationWave,
+                            rowIndex,
+                            columnKey: "stakeholders",
+                          })}
+                        >
+                          {migrationWave.allStakeholders.length}
+                        </Td>
+                        <Td
+                          width={20}
+                          {...((!!migrationWave.applications.length ||
+                            migrationWave.status === "No Issues") &&
+                            getCompoundExpandTdProps({
                               item: migrationWave,
                               rowIndex,
-                              columnKey: "stakeholders",
-                            })}
-                          >
-                            {migrationWave.allStakeholders.length}
-                          </Td>
-                          <Td
-                            width={20}
-                            {...((!!migrationWave.applications.length ||
-                              migrationWave.status === "No Issues") &&
-                              getCompoundExpandTdProps({
-                                item: migrationWave,
-                                rowIndex,
-                                columnKey: "status",
-                              }))}
+                              columnKey: "status",
+                            }))}
+                        >
+                          {migrationWave.applications.length
+                            ? migrationWave.status
+                            : "N/A"}
+                        </Td>
+                        <Td isActionCell id="row-actions">
+                          <Dropdown
+                            isOpen={isRowDropdownOpen === migrationWave.id}
+                            onSelect={() => setIsRowDropdownOpen(null)}
+                            onOpenChange={(_isOpen) =>
+                              setIsRowDropdownOpen(null)
+                            }
+                            popperProps={{ position: "right" }}
+                            toggle={(
+                              toggleRef: React.Ref<MenuToggleElement>
+                            ) => (
+                              <MenuToggle
+                                ref={toggleRef}
+                                aria-label="row actions dropdown toggle"
+                                variant="plain"
+                                onClick={() => {
+                                  isRowDropdownOpen
+                                    ? setIsRowDropdownOpen(null)
+                                    : setIsRowDropdownOpen(migrationWave.id);
+                                }}
+                                isExpanded={isRowDropdownOpen === rowIndex}
+                              >
+                                <EllipsisVIcon />
+                              </MenuToggle>
+                            )}
+                            shouldFocusToggleOnSelect
                           >
-                            {migrationWave.applications.length
-                              ? migrationWave.status
-                              : "N/A"}
-                          </Td>
-                          <Td isActionCell id="row-actions">
-                            <Dropdown
-                              isOpen={isRowDropdownOpen === migrationWave.id}
-                              onSelect={() => setIsRowDropdownOpen(null)}
-                              onOpenChange={(_isOpen) =>
-                                setIsRowDropdownOpen(null)
+                            <DropdownItem
+                              key="edit"
+                              component="button"
+                              onClick={() => setWaveModalState(migrationWave)}
+                            >
+                              {t("actions.edit")}
+                            </DropdownItem>
+                            <ConditionalTooltip
+                              key="manage-app"
+                              isTooltipEnabled={applications.length === 0}
+                              content={
+                                "No applications are available for assignment."
                               }
-                              popperProps={{ position: "right" }}
-                              toggle={(
-                                toggleRef: React.Ref<MenuToggleElement>
-                              ) => (
-                                <MenuToggle
-                                  ref={toggleRef}
-                                  aria-label="row actions dropdown toggle"
-                                  variant="plain"
-                                  onClick={() => {
-                                    isRowDropdownOpen
-                                      ? setIsRowDropdownOpen(null)
-                                      : setIsRowDropdownOpen(migrationWave.id);
-                                  }}
-                                  isExpanded={isRowDropdownOpen === rowIndex}
-                                >
-                                  <EllipsisVIcon />
-                                </MenuToggle>
-                              )}
-                              shouldFocusToggleOnSelect
                             >
                               <DropdownItem
-                                key="edit"
-                                component="button"
-                                onClick={() => setWaveModalState(migrationWave)}
-                              >
-                                {t("actions.edit")}
-                              </DropdownItem>
-                              <ConditionalTooltip
                                 key="manage-app"
-                                isTooltipEnabled={applications.length === 0}
-                                content={
-                                  "No applications are available for assignment."
-                                }
+                                isAriaDisabled={applications.length === 0}
+                                onClick={() => {
+                                  setWaveToManageModalState(migrationWave);
+                                }}
                               >
-                                <DropdownItem
-                                  key="manage-app"
-                                  isAriaDisabled={applications.length === 0}
-                                  onClick={() => {
-                                    setWaveToManageModalState(migrationWave);
-                                  }}
-                                >
-                                  {t("composed.manage", {
-                                    what: t("terms.applications").toLowerCase(),
-                                  })}
-                                </DropdownItem>
-                              </ConditionalTooltip>
-                              <ConditionalTooltip
+                                {t("composed.manage", {
+                                  what: t("terms.applications").toLowerCase(),
+                                })}
+                              </DropdownItem>
+                            </ConditionalTooltip>
+                            <ConditionalTooltip
+                              key="export-to-issue-manager"
+                              isTooltipEnabled={
+                                migrationWave.applications?.length < 1
+                              }
+                              content={
+                                "There are no applications assigned to this migration wave to export."
+                              }
+                            >
+                              <DropdownItem
                                 key="export-to-issue-manager"
-                                isTooltipEnabled={
+                                isDisabled={
                                   migrationWave.applications?.length < 1
                                 }
-                                content={
-                                  "There are no applications assigned to this migration wave to export."
-                                }
-                              >
-                                <DropdownItem
-                                  key="export-to-issue-manager"
-                                  isDisabled={
-                                    migrationWave.applications?.length < 1
-                                  }
-                                  onClick={() =>
-                                    setApplicationsToExport(
-                                      migrationWave.fullApplications
-                                    )
-                                  }
-                                >
-                                  {t("terms.exportToIssue")}
-                                </DropdownItem>
-                              </ConditionalTooltip>
-                              <DropdownItem
-                                key="delete"
                                 onClick={() =>
-                                  setMigrationWaveToDelete({
-                                    id: migrationWave.id,
-                                    name: migrationWave.name,
-                                  })
+                                  setApplicationsToExport(
+                                    migrationWave.fullApplications
+                                  )
                                 }
                               >
-                                {t("actions.delete")}
+                                {t("terms.exportToIssue")}
                               </DropdownItem>
-                            </Dropdown>
-                          </Td>
-                        </TableRowContentWithControls>
-                      </Tr>
-                      {isCellExpanded(migrationWave) ? (
-                        <Tr isExpanded>
-                          <Td
-                            {...getExpandedContentTdProps({
-                              item: migrationWave,
-                            })}
-                          >
-                            <ExpandableRowContent>
-                              {isCellExpanded(migrationWave, "applications") &&
-                              !!migrationWave.applications.length ? (
-                                <WaveApplicationsTable
+                            </ConditionalTooltip>
+                            <DropdownItem
+                              key="delete"
+                              onClick={() =>
+                                setMigrationWaveToDelete({
+                                  id: migrationWave.id,
+                                  name: migrationWave.name,
+                                })
+                              }
+                            >
+                              {t("actions.delete")}
+                            </DropdownItem>
+                          </Dropdown>
+                        </Td>
+                      </TableRowContentWithControls>
+                    </Tr>
+                    {isCellExpanded(migrationWave) ? (
+                      <Tr isExpanded>
+                        <Td
+                          {...getExpandedContentTdProps({
+                            item: migrationWave,
+                          })}
+                        >
+                          <ExpandableRowContent>
+                            {isCellExpanded(migrationWave, "applications") &&
+                            !!migrationWave.applications.length ? (
+                              <WaveApplicationsTable
+                                migrationWave={migrationWave}
+                                removeApplication={removeApplication}
+                              />
+                            ) : isCellExpanded(migrationWave, "stakeholders") &&
+                              !!migrationWave.allStakeholders.length ? (
+                              <WaveStakeholdersTable
+                                migrationWave={migrationWave}
+                              />
+                            ) : (
+                              isCellExpanded(migrationWave, "status") && (
+                                <WaveStatusTable
                                   migrationWave={migrationWave}
                                   removeApplication={removeApplication}
                                 />
-                              ) : isCellExpanded(
-                                  migrationWave,
-                                  "stakeholders"
-                                ) && !!migrationWave.allStakeholders.length ? (
-                                <WaveStakeholdersTable
-                                  migrationWave={migrationWave}
-                                />
-                              ) : (
-                                isCellExpanded(migrationWave, "status") && (
-                                  <WaveStatusTable
-                                    migrationWave={migrationWave}
-                                    removeApplication={removeApplication}
-                                  />
-                                )
-                              )}
-                            </ExpandableRowContent>
-                          </Td>
-                        </Tr>
-                      ) : null}
-                    </>
-                  ))}
-                </Tbody>
+                              )
+                            )}
+                          </ExpandableRowContent>
+                        </Td>
+                      </Tr>
+                    ) : null}
+                  </Tbody>
+                ))}
               </ConditionalTableBody>
             </Table>
             <SimplePagination

From a89c4e53cbc7ba61e3de811bad99373e5450c7ee Mon Sep 17 00:00:00 2001
From: Scott Dickerson <sdickers@redhat.com>
Date: Mon, 25 Sep 2023 14:49:38 -0400
Subject: [PATCH 3/6] :sparkles: Reports - Current Landscape update risk
 handling (#1395)

# Summary
Custom assessments changes risk and confidence to be accessed from
`Assessment` and not `Application`. The reports page in general, and the
`Landscape` component in specific need to be updated to use risk values
from `Assessment`.

## Changes
`Reports`
- Fetch `Questionnaires` and `Assessments` to allow easy use in the
Questionnaire select menu
- Adjust the `Card`s to be clickable and selectable when we provide
custom actions (to avoid a console warning)

`Landscape`
- Use data from props instead of fetching any additional data. The
containing component is now responsible for controlling the source data.
- Aggregate risk data into buckets matching `Risk` options - Setup
responsive layout so the donut charts wrap nicely when the view becomes
narrow

`Donut`
  - Force `id` to be provided
  - Set the width to `200px`
  - Make sure content lines up centered in its container

Deprecated `useFetchRisks()`

## Screenshots
All questionnaires:

![image](https://github.com/konveyor/tackle2-ui/assets/3985964/9711a2b9-aa7d-4d00-b1fc-22402e97f727)

Single questionnaire:

![image](https://github.com/konveyor/tackle2-ui/assets/3985964/30cb1134-c368-4843-9534-d532db2b320a)


## References
Enhancement:
https://github.com/konveyor/enhancements/blob/90b827b68cc367284a66bf66f087d5c263487e05/enhancements/assessment-module/README.md#changes-in-the-application-reports-view
Part Of: #1305
Follow Up: #1374

Signed-off-by: Scott J Dickerson <sdickers@redhat.com>
Co-authored-by: Ian Bolton <ibolton@redhat.com>
---
 client/public/locales/en/translation.json     |   4 +-
 client/public/locales/es/translation.json     |   2 -
 .../reports/components/landscape/donut.tsx    |  46 ++--
 .../components/landscape/landscape.tsx        | 151 ++++++-------
 client/src/app/pages/reports/reports.tsx      | 199 ++++++++++--------
 client/src/app/queries/risks.ts               |  14 +-
 6 files changed, 223 insertions(+), 193 deletions(-)

diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
index fc6872bb39..fa98976fa6 100644
--- a/client/public/locales/en/translation.json
+++ b/client/public/locales/en/translation.json
@@ -87,8 +87,8 @@
     "noDataStateBody": "Create a new {{what}} to start seeing data here.",
     "noDataStateTitle": "No {{what}} available",
     "Nquestions": "{{n}} questions",
-    "ofTotalApplications": "Of {{count}} application",
-    "ofTotalApplications_plural": "Of {{count}} applications",
+    "ofTotalAssessments": "Of {{count}} assessment",
+    "ofTotalAssessments_plural": "Of {{count}} assessments",
     "selectMany": "Select {{what}}",
     "selectOne": "Select a {{what}}",
     "selectAn": "Select an {{what}}",
diff --git a/client/public/locales/es/translation.json b/client/public/locales/es/translation.json
index 12f96255f9..2304a0cccb 100644
--- a/client/public/locales/es/translation.json
+++ b/client/public/locales/es/translation.json
@@ -68,8 +68,6 @@
     "noDataStateBody": "Cree un(a) nuevo(a) {{what}} para empezar a ver datos acá.",
     "noDataStateTitle": "No existen {{what}} disponibles",
     "Nquestions": "{{n}} preguntas",
-    "ofTotalApplications": "De {{count}} aplicación",
-    "ofTotalApplications_plural": "De {{count}} aplicaciones",
     "selectMany": "Seleccione {{what}}",
     "selectOne": "Seleccione un {{what}}",
     "selectAn": "Seleccione una {{what}}",
diff --git a/client/src/app/pages/reports/components/landscape/donut.tsx b/client/src/app/pages/reports/components/landscape/donut.tsx
index 5c0f4bacce..6d40bada99 100644
--- a/client/src/app/pages/reports/components/landscape/donut.tsx
+++ b/client/src/app/pages/reports/components/landscape/donut.tsx
@@ -4,9 +4,16 @@ import { useTranslation } from "react-i18next";
 import { ChartDonut } from "@patternfly/react-charts";
 import { global_palette_black_300 as black } from "@patternfly/react-tokens";
 
-import { Stack, StackItem, Text, TextContent } from "@patternfly/react-core";
+import {
+  Bullseye,
+  Stack,
+  StackItem,
+  Text,
+  TextContent,
+} from "@patternfly/react-core";
 
 export interface IDonutProps {
+  id: string;
   value: number;
   total: number;
   color: string;
@@ -15,6 +22,7 @@ export interface IDonutProps {
 }
 
 export const Donut: React.FC<IDonutProps> = ({
+  id,
   value,
   total,
   color,
@@ -24,24 +32,26 @@ export const Donut: React.FC<IDonutProps> = ({
   const { t } = useTranslation();
 
   return (
-    <Stack>
-      <StackItem style={{ height: "200px", width: "200px" }}>
-        <ChartDonut
-          ariaDesc="risk-donut-chart"
-          title={value.toString()}
-          subTitle={t("composed.ofTotalApplications", {
-            count: total,
-          }).toLocaleLowerCase()}
-          constrainToVisibleArea={true}
-          data={[
-            { x: riskLabel, y: value },
-            { x: t("terms.other"), y: total - value },
-          ]}
-          labels={({ datum }) => `${datum.x}: ${datum.y}`}
-          colorScale={[color, black.value]}
-        />
+    <Stack id={id} style={{ width: "200px" }}>
+      <StackItem style={{ height: "200px", width: "100%" }}>
+        <Bullseye>
+          <ChartDonut
+            ariaDesc="risk-donut-chart"
+            title={value.toString()}
+            subTitle={t("composed.ofTotalAssessments", {
+              count: total,
+            }).toLocaleLowerCase()}
+            constrainToVisibleArea={true}
+            data={[
+              { x: riskLabel, y: value },
+              { x: t("terms.other"), y: total - value },
+            ]}
+            labels={({ datum }) => `${datum.x}: ${datum.y}`}
+            colorScale={[color, black.value]}
+          />
+        </Bullseye>
       </StackItem>
-      <StackItem>
+      <StackItem style={{ width: "100%" }}>
         <TextContent className="pf-v5-u-text-align-center">
           <Text component="h3">{riskLabel}</Text>
           <Text component="small">{riskDescription}</Text>
diff --git a/client/src/app/pages/reports/components/landscape/landscape.tsx b/client/src/app/pages/reports/components/landscape/landscape.tsx
index 7c500cd922..2e5e5709c0 100644
--- a/client/src/app/pages/reports/components/landscape/landscape.tsx
+++ b/client/src/app/pages/reports/components/landscape/landscape.tsx
@@ -1,37 +1,29 @@
-import React, { useContext, useMemo } from "react";
+import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-
-import { Skeleton, Split, SplitItem } from "@patternfly/react-core";
-
-import { ConditionalRender } from "@app/components/ConditionalRender";
-import { StateError } from "@app/components/StateError";
+import { Flex, FlexItem, Skeleton } from "@patternfly/react-core";
 
 import { RISK_LIST } from "@app/Constants";
-import { Assessment, AssessmentRisk } from "@app/api/models";
-
-import { ApplicationSelectionContext } from "../../application-selection-context";
-import { NoApplicationSelectedEmptyState } from "../no-application-selected-empty-state";
+import { Assessment, Questionnaire } from "@app/api/models";
+import { ConditionalRender } from "@app/components/ConditionalRender";
 import { Donut } from "./donut";
-import { useFetchRisks } from "@app/queries/risks";
 
-interface ILandscapeData {
-  low: number;
-  medium: number;
-  high: number;
+interface IAggregateRiskData {
+  green: number;
+  yellow: number;
+  red: number;
+  unknown: number;
   unassessed: number;
+  assessmentCount: number;
 }
 
-const extractLandscapeData = (
-  totalApps: number,
-  data: AssessmentRisk[]
-): ILandscapeData => {
+const aggregateRiskData = (assessments: Assessment[]): IAggregateRiskData => {
   let low = 0;
   let medium = 0;
   let high = 0;
-  let unassessed = 0;
+  let unknown = 0;
 
-  data.forEach((elem) => {
-    switch (elem.risk) {
+  assessments?.forEach((assessment) => {
+    switch (assessment.risk) {
       case "green":
         low++;
         break;
@@ -41,48 +33,49 @@ const extractLandscapeData = (
       case "red":
         high++;
         break;
+      case "unknown":
+        unknown++;
+        break;
     }
   });
 
-  unassessed = totalApps - low - medium - high;
-  return { low, medium, high, unassessed };
+  return {
+    green: low,
+    yellow: medium,
+    red: high,
+    unknown,
+    unassessed: assessments.length - low - medium - high,
+    assessmentCount: assessments.length,
+  };
 };
 
 interface ILandscapeProps {
+  /**
+   * The selected questionnaire or `null` if _all questionnaires_ is selected.
+   */
+  questionnaire: Questionnaire | null;
+
+  /**
+   * The set of assessments for the selected questionnaire.  Risk values will be
+   * aggregated from the individual assessment risks.
+   */
   assessments: Assessment[];
 }
 
-export const Landscape: React.FC<ILandscapeProps> = ({ assessments }) => {
+export const Landscape: React.FC<ILandscapeProps> = ({
+  questionnaire,
+  assessments,
+}) => {
   const { t } = useTranslation();
 
-  // Context
-  const { allItems: applications } = useContext(ApplicationSelectionContext);
-
-  const {
-    risks: assessmentRisks,
-    isFetching,
-    error: fetchError,
-  } = useFetchRisks(applications.map((app) => app.id!));
-
-  const landscapeData = useMemo(() => {
-    if (applications.length > 0 && assessmentRisks) {
-      return extractLandscapeData(applications.length, assessmentRisks);
-    } else {
-      return undefined;
-    }
-  }, [applications, assessmentRisks]);
-
-  if (fetchError) {
-    return <StateError />;
-  }
-
-  if (!isFetching && !landscapeData) {
-    return <NoApplicationSelectedEmptyState />;
-  }
+  const landscapeData = useMemo(
+    () => aggregateRiskData(assessments),
+    [assessments]
+  );
 
   return (
     <ConditionalRender
-      when={isFetching}
+      when={!questionnaire && !assessments}
       then={
         <div style={{ height: 200, width: 400 }}>
           <Skeleton height="75%" width="100%" />
@@ -90,44 +83,52 @@ export const Landscape: React.FC<ILandscapeProps> = ({ assessments }) => {
       }
     >
       {landscapeData && (
-        <Split hasGutter>
-          <SplitItem>
+        <Flex
+          justifyContent={{ default: "justifyContentSpaceAround" }}
+          spaceItems={{ default: "spaceItemsNone" }}
+          gap={{ default: "gapMd" }}
+        >
+          <FlexItem>
             <Donut
-              value={landscapeData.high}
-              total={applications.length}
-              color={RISK_LIST["red"].hexColor}
+              id="landscape-donut-red"
+              value={landscapeData.red}
+              total={landscapeData.assessmentCount}
+              color={RISK_LIST.red.hexColor}
               riskLabel={t("colors.red")}
-              // riskDescription={}
+              riskDescription={questionnaire?.riskMessages?.red ?? ""}
             />
-          </SplitItem>
-          <SplitItem>
+          </FlexItem>
+          <FlexItem>
             <Donut
-              value={landscapeData.medium}
-              total={applications.length}
-              color={RISK_LIST["yellow"].hexColor}
+              id="landscape-donut-yellow"
+              value={landscapeData.yellow}
+              total={landscapeData.assessmentCount}
+              color={RISK_LIST.yellow.hexColor}
               riskLabel={t("colors.yellow")}
-              // riskDescription={}
+              riskDescription={questionnaire?.riskMessages?.yellow ?? ""}
             />
-          </SplitItem>
-          <SplitItem>
+          </FlexItem>
+          <FlexItem>
             <Donut
-              value={landscapeData.high}
-              total={applications.length}
-              color={RISK_LIST["green"].hexColor}
+              id="landscape-donut-green"
+              value={landscapeData.green}
+              total={landscapeData.assessmentCount}
+              color={RISK_LIST.green.hexColor}
               riskLabel={t("colors.green")}
-              // riskDescription={}
+              riskDescription={questionnaire?.riskMessages?.green ?? ""}
             />
-          </SplitItem>
-          <SplitItem>
+          </FlexItem>
+          <FlexItem>
             <Donut
+              id="landscape-donut-unassessed"
               value={landscapeData.unassessed}
-              total={applications.length}
-              color={RISK_LIST["unknown"].hexColor}
+              total={landscapeData.assessmentCount}
+              color={RISK_LIST.unknown.hexColor}
               riskLabel={`${t("terms.unassessed")}/${t("terms.unknown")}`}
-              // riskDescription={}
+              riskDescription={questionnaire?.riskMessages?.unknown ?? ""}
             />
-          </SplitItem>
-        </Split>
+          </FlexItem>
+        </Flex>
       )}
     </ConditionalRender>
   );
diff --git a/client/src/app/pages/reports/reports.tsx b/client/src/app/pages/reports/reports.tsx
index 3a085a639d..dcc23d17a3 100644
--- a/client/src/app/pages/reports/reports.tsx
+++ b/client/src/app/pages/reports/reports.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Bullseye,
@@ -9,10 +9,7 @@ import {
   CardExpandableContent,
   CardHeader,
   CardTitle,
-  Flex,
-  FlexItem,
   MenuToggle,
-  MenuToggleElement,
   PageSection,
   PageSectionVariants,
   Popover,
@@ -29,46 +26,65 @@ import {
 } from "@patternfly/react-core";
 import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon";
 
+import { Questionnaire } from "@app/api/models";
+import { useFetchApplications } from "@app/queries/applications";
+import { useFetchAssessments } from "@app/queries/assessments";
+import { useFetchQuestionnaires } from "@app/queries/questionnaires";
+
 import { AppPlaceholder } from "@app/components/AppPlaceholder";
 import { ConditionalRender } from "@app/components/ConditionalRender";
 import { StateError } from "@app/components/StateError";
+
 import { ApplicationSelectionContextProvider } from "./application-selection-context";
 import { Landscape } from "./components/landscape";
 import { AdoptionPlan } from "./components/adoption-plan";
 import { IdentifiedRisksTable } from "./components/identified-risks-table";
-import { useFetchApplications } from "@app/queries/applications";
-import { useFetchAssessments } from "@app/queries/assessments";
-import { Ref } from "@app/api/models";
 
-const ALL_QUESTIONNAIRES = "All questionnaires";
+const ALL_QUESTIONNAIRES = -1;
 
 export const Reports: React.FC = () => {
-  // i18
   const { t } = useTranslation();
 
-  const [isQuestionnaireSelectOpen, setIsQuestionnaireSelectOpen] =
-    React.useState<boolean>(false);
-
-  const [selectedQuestionnaire, setSelectedQuestionnaire] =
-    React.useState<string>("All questionnaires");
-
   const {
     assessments,
     isFetching: isAssessmentsFetching,
     fetchError: assessmentsFetchError,
   } = useFetchAssessments();
 
-  // Cards
+  const {
+    questionnaires,
+    isFetching: isQuestionnairesFetching,
+    fetchError: questionnairesFetchError,
+  } = useFetchQuestionnaires();
+
+  const questionnairesById = useMemo(
+    () =>
+      questionnaires.reduce<Record<number, Questionnaire>>((byId, q) => {
+        byId[q.id] = q;
+        return byId;
+      }, {}),
+    [questionnaires]
+  );
+
+  const {
+    data: applications,
+    isFetching: isApplicationsFetching,
+    error: applicationsFetchError,
+  } = useFetchApplications();
+
+  const [isQuestionnaireSelectOpen, setIsQuestionnaireSelectOpen] =
+    React.useState<boolean>(false);
+
+  const [selectedQuestionnaireId, setSelectedQuestionnaireId] =
+    React.useState<number>(ALL_QUESTIONNAIRES);
+
   const [isAdoptionCandidateTable, setIsAdoptionCandidateTable] =
     useState(true);
+
   const [isAdoptionPlanOpen, setAdoptionPlanOpen] = useState(false);
+
   const [isRiskCardOpen, setIsRiskCardOpen] = useState(false);
 
-  const {
-    data: applications,
-    isFetching,
-    error: fetchError,
-  } = useFetchApplications();
   const pageHeaderSection = (
     <PageSection variant={PageSectionVariants.light}>
       <TextContent>
@@ -77,7 +93,11 @@ export const Reports: React.FC = () => {
     </PageSection>
   );
 
-  if (fetchError) {
+  if (
+    applicationsFetchError ||
+    assessmentsFetchError ||
+    questionnairesFetchError
+  ) {
     return (
       <>
         {pageHeaderSection}
@@ -88,116 +108,117 @@ export const Reports: React.FC = () => {
     );
   }
 
-  const toggleQuestionnaire = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle
-      ref={toggleRef}
-      aria-label="kebab dropdown toggle"
-      onClick={() => {
-        setIsQuestionnaireSelectOpen(!isQuestionnaireSelectOpen);
-      }}
-      isExpanded={isQuestionnaireSelectOpen}
-    >
-      {selectedQuestionnaire}
-    </MenuToggle>
-  );
-
   const onSelectQuestionnaire = (
     _event: React.MouseEvent<Element, MouseEvent> | undefined,
     value: string | number | undefined
   ) => {
-    setSelectedQuestionnaire(value as string);
+    setSelectedQuestionnaireId(value as number);
     setIsQuestionnaireSelectOpen(false);
   };
 
-  const answeredQuestionnaires: Ref[] =
-    isAssessmentsFetching || assessmentsFetchError
+  const answeredQuestionnaires: Questionnaire[] =
+    isAssessmentsFetching || isQuestionnairesFetching
       ? []
       : assessments
-          .reduce((questionnaires: Ref[], assessment) => {
-            if (
-              !questionnaires
-                .map((ref) => ref.id)
-                .includes(assessment.questionnaire.id)
-            ) {
-              assessment.questionnaire &&
-                questionnaires.push(assessment.questionnaire);
-            }
-            return questionnaires;
-          }, [])
-          .sort((a, b) => {
-            if (a.name > b.name) return 1;
-            if (b.name > a.name) return -1;
-            return 0;
-          });
+          .map<number>((assessment) => assessment?.questionnaire?.id ?? -1)
+          .filter((id, index, ids) => id > 0 && ids.indexOf(id) !== -1)
+          .map<Questionnaire>((id) => questionnairesById[id])
+          .sort((a, b) => a.name.localeCompare(b.name));
 
   return (
     <>
       {pageHeaderSection}
       <PageSection>
-        <ConditionalRender when={isFetching} then={<AppPlaceholder />}>
+        <ConditionalRender
+          when={
+            isApplicationsFetching ||
+            isAssessmentsFetching ||
+            isQuestionnairesFetching
+          }
+          then={<AppPlaceholder />}
+        >
           <ApplicationSelectionContextProvider
             applications={applications || []}
           >
             <Stack hasGutter>
               <StackItem>
-                <Card>
-                  <CardHeader>
-                    <Flex>
-                      <FlexItem>
-                        <TextContent>
-                          <Text component="h3">
-                            {t("terms.currentLandscape")}
-                          </Text>
-                        </TextContent>
-                      </FlexItem>
-                      <FlexItem>
+                <Card isClickable isSelectable>
+                  <CardHeader
+                    actions={{
+                      hasNoOffset: false,
+                      actions: (
                         <Select
                           id="select-questionnaires"
                           isOpen={isQuestionnaireSelectOpen}
-                          selected={selectedQuestionnaire}
+                          selected={selectedQuestionnaireId}
                           onSelect={onSelectQuestionnaire}
                           onOpenChange={(_isOpen) =>
                             setIsQuestionnaireSelectOpen(false)
                           }
-                          toggle={toggleQuestionnaire}
+                          toggle={(toggleRef) => (
+                            <MenuToggle
+                              ref={toggleRef}
+                              aria-label="select questionnaires dropdown toggle"
+                              onClick={() => {
+                                setIsQuestionnaireSelectOpen(
+                                  !isQuestionnaireSelectOpen
+                                );
+                              }}
+                              isExpanded={isQuestionnaireSelectOpen}
+                            >
+                              {selectedQuestionnaireId === ALL_QUESTIONNAIRES
+                                ? "All questionnaires"
+                                : questionnairesById[selectedQuestionnaireId]
+                                    ?.name}
+                            </MenuToggle>
+                          )}
                           shouldFocusToggleOnSelect
                         >
-                          <SelectOption key={0} value={ALL_QUESTIONNAIRES}>
+                          <SelectOption
+                            key={ALL_QUESTIONNAIRES}
+                            value={ALL_QUESTIONNAIRES}
+                          >
                             All questionnaires
                           </SelectOption>
-                          {answeredQuestionnaires.map(
-                            (answeredQuestionnaire, index) => (
+                          {...answeredQuestionnaires.map(
+                            (answeredQuestionnaire) => (
                               <SelectOption
-                                key={index}
-                                value={answeredQuestionnaire.name}
+                                key={answeredQuestionnaire.id}
+                                value={answeredQuestionnaire.id}
                               >
                                 {answeredQuestionnaire.name}
                               </SelectOption>
                             )
                           )}
                         </Select>
-                      </FlexItem>
-                    </Flex>
+                      ),
+                    }}
+                  >
+                    <TextContent>
+                      <Text component="h3">{t("terms.currentLandscape")}</Text>
+                    </TextContent>
                   </CardHeader>
                   <CardBody>
-                    <Bullseye>
-                      <Landscape
-                        assessments={
-                          selectedQuestionnaire === "All questionnaires"
-                            ? assessments
-                            : assessments.filter(
-                                (assessment) =>
-                                  assessment.questionnaire.name ===
-                                  selectedQuestionnaire
-                              )
-                        }
-                      />
-                    </Bullseye>
+                    <Landscape
+                      questionnaire={
+                        selectedQuestionnaireId === ALL_QUESTIONNAIRES
+                          ? null
+                          : questionnairesById[selectedQuestionnaireId]
+                      }
+                      assessments={
+                        selectedQuestionnaireId === ALL_QUESTIONNAIRES
+                          ? assessments
+                          : assessments.filter(
+                              ({ questionnaire }) =>
+                                questionnaire.id === selectedQuestionnaireId
+                            )
+                      }
+                    />
                   </CardBody>
                 </Card>
               </StackItem>
               <StackItem>
-                <Card>
+                <Card isClickable isSelectable>
                   <CardHeader
                     actions={{
                       actions: (
diff --git a/client/src/app/queries/risks.ts b/client/src/app/queries/risks.ts
index 583a25bc41..cc5b8bc9e3 100644
--- a/client/src/app/queries/risks.ts
+++ b/client/src/app/queries/risks.ts
@@ -3,20 +3,20 @@ import { AssessmentRisk } from "@app/api/models";
 
 export const RisksQueryKey = "risks";
 
+/** @deprecated Risk is attached to assessments now. */
 export const useFetchRisks = (applicationIDs: number[]) => {
-  const { data, refetch, isFetching, error } = useQuery<AssessmentRisk[]>(
-    ["assessmentrisks", applicationIDs],
-    async () => {
+  const { data, refetch, isFetching, error } = useQuery<AssessmentRisk[]>({
+    queryKey: ["assessmentrisks", applicationIDs],
+    queryFn: async () => {
       if (applicationIDs.length > 0)
         // return (await getAssessmentLandscape(applicationIDs)).data;
         //TODO see if we still need this
         return [];
       else return [];
     },
-    {
-      onError: (error) => console.log("error, ", error),
-    }
-  );
+    onError: (error) => console.log("error, ", error),
+  });
+
   return {
     risks: data || [],
     isFetching,

From e893ec86262bdbda0b05a5bef834772ba4b8fa24 Mon Sep 17 00:00:00 2001
From: Dallas <dallas.nicol@gmail.com>
Date: Mon, 25 Sep 2023 14:29:12 -0500
Subject: [PATCH 4/6] :seedling: replace deprecated wizard analysis wizard
 (#1394)

effort towards #1244 (one of a few wizards)

---------

Signed-off-by: gitdallas <dallas.nicol@gmail.com>
---
 .../analysis-wizard/analysis-wizard.tsx       | 189 ++++++++++--------
 1 file changed, 107 insertions(+), 82 deletions(-)

diff --git a/client/src/app/pages/applications/analysis-wizard/analysis-wizard.tsx b/client/src/app/pages/applications/analysis-wizard/analysis-wizard.tsx
index 8f3294da6f..dd85595c0a 100644
--- a/client/src/app/pages/applications/analysis-wizard/analysis-wizard.tsx
+++ b/client/src/app/pages/applications/analysis-wizard/analysis-wizard.tsx
@@ -1,11 +1,15 @@
 import * as React from "react";
 import { useIsMutating } from "@tanstack/react-query";
 import { FormProvider, useForm } from "react-hook-form";
-import { Truncate } from "@patternfly/react-core";
 import {
+  Modal,
+  ModalVariant,
   Wizard,
-  WizardStepFunctionType,
-} from "@patternfly/react-core/deprecated";
+  WizardStep,
+  WizardStepType,
+  WizardHeader,
+  Truncate,
+} from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 
 import {
@@ -297,10 +301,8 @@ export const AnalysisWizard: React.FC<IAnalysisWizard> = ({
     onClose();
   };
 
-  const onMove: WizardStepFunctionType = (
-    { id, name },
-    { prevId, prevName }
-  ) => {
+  const onMove = (current: WizardStepType) => {
+    const id = current.id;
     if (id && stepIdReached < (id as number)) setStepIdReached(id as number);
     if (id === StepId.SetTargets) {
       if (!taskGroup) {
@@ -311,93 +313,116 @@ export const AnalysisWizard: React.FC<IAnalysisWizard> = ({
 
   const analyzableApplications = useAnalyzableApplications(applications, mode);
 
-  const getStepNavProps = (stepId: StepId, forceBlock = false) => ({
-    enableNext:
-      !forceBlock &&
-      stepIdReached >= stepId &&
-      (firstInvalidStep === null || firstInvalidStep >= stepId + 1),
-    canJumpTo:
-      !forceBlock &&
-      stepIdReached >= stepId &&
-      (firstInvalidStep === null || firstInvalidStep >= stepId),
-  });
+  const isStepEnabled = (stepId: StepId) => {
+    return (
+      stepIdReached + 1 >= stepId &&
+      (firstInvalidStep === null || firstInvalidStep >= stepId)
+    );
+  };
 
   const steps = [
-    {
-      name: t("wizard.terms.configureAnalysis"),
-      steps: [
-        {
-          id: StepId.AnalysisMode,
-          name: t("wizard.terms.analysisMode"),
-          component: (
+    <WizardStep
+      name={t("wizard.terms.configureAnalysis")}
+      id="wizard-configureAnalysis"
+      steps={[
+        <WizardStep
+          id={StepId.AnalysisMode}
+          name={t("wizard.terms.analysisMode")}
+          isDisabled={!isStepEnabled(StepId.AnalysisMode)}
+          footer={{
+            isNextDisabled:
+              !isMutating && !isStepEnabled(StepId.AnalysisMode + 1),
+          }}
+        >
+          <>
             <SetMode
               isSingleApp={applications.length === 1 ? true : false}
               isModeValid={isModeValid}
             />
-          ),
-          ...getStepNavProps(StepId.AnalysisMode, !!isMutating),
-        },
-        {
-          id: StepId.SetTargets,
-          name: t("wizard.terms.setTargets"),
-          component: <SetTargets />,
-          ...getStepNavProps(StepId.SetTargets),
-        },
-        {
-          id: StepId.Scope,
-          name: t("wizard.terms.scope"),
-          component: <SetScope />,
-          ...getStepNavProps(StepId.Scope),
-        },
-      ],
-    },
-    {
-      name: t("wizard.terms.advanced"),
-      steps: [
-        {
-          id: StepId.CustomRules,
-          name: t("wizard.terms.customRules"),
-          component: <CustomRules />,
-          ...getStepNavProps(StepId.CustomRules),
-        },
-        {
-          id: StepId.Options,
-          name: t("wizard.terms.options"),
-          component: <SetOptions />,
-          ...getStepNavProps(StepId.Options),
-        },
-      ],
-    },
-    {
-      id: StepId.Review,
-      name: t("wizard.terms.review"),
-      component: <Review applications={applications} mode={mode} />,
-      nextButtonText: "Run",
-      ...getStepNavProps(StepId.Review),
-    },
+          </>
+        </WizardStep>,
+        <WizardStep
+          id={StepId.SetTargets}
+          name={t("wizard.terms.setTargets")}
+          isDisabled={!isStepEnabled(StepId.SetTargets)}
+          footer={{ isNextDisabled: !isStepEnabled(StepId.SetTargets + 1) }}
+        >
+          <SetTargets />
+        </WizardStep>,
+        <WizardStep
+          id={StepId.Scope}
+          name={t("wizard.terms.scope")}
+          isDisabled={!isStepEnabled(StepId.Scope)}
+          footer={{ isNextDisabled: !isStepEnabled(StepId.Scope + 1) }}
+        >
+          <SetScope />
+        </WizardStep>,
+      ]}
+    ></WizardStep>,
+    <WizardStep
+      name={t("wizard.terms.advanced")}
+      id="wizard-advanced"
+      steps={[
+        <WizardStep
+          id={StepId.CustomRules}
+          name={t("wizard.terms.customRules")}
+          isDisabled={!isStepEnabled(StepId.CustomRules)}
+          footer={{ isNextDisabled: !isStepEnabled(StepId.CustomRules + 1) }}
+        >
+          <CustomRules />
+        </WizardStep>,
+        <WizardStep
+          id={StepId.Options}
+          name={t("wizard.terms.options")}
+          isDisabled={!isStepEnabled(StepId.Options)}
+          footer={{ isNextDisabled: !isStepEnabled(StepId.Options + 1) }}
+        >
+          <SetOptions />
+        </WizardStep>,
+      ]}
+    ></WizardStep>,
+    <WizardStep
+      name={t("wizard.terms.review")}
+      id={StepId.Review}
+      isDisabled={!isStepEnabled(StepId.Review)}
+    >
+      <Review applications={applications} mode={mode} />
+    </WizardStep>,
   ];
+
   return (
     <>
       {isOpen && (
         <FormProvider {...methods}>
-          <Wizard
+          <Modal
             isOpen={isOpen}
-            title="Application analysis"
-            description={
-              <Truncate
-                content={applications.map((app) => app.name).join(", ")}
-              />
-            }
-            navAriaLabel={`${title} steps`}
-            mainAriaLabel={`${title} content`}
-            steps={steps}
-            onNext={onMove}
-            onBack={onMove}
-            onSave={handleSubmit(onSubmit)}
-            onClose={() => {
-              handleCancel();
-            }}
-          />
+            showClose={false}
+            aria-label="Application analysis wizard modal"
+            hasNoBodyWrapper
+            onEscapePress={handleCancel}
+            variant={ModalVariant.large}
+          >
+            <Wizard
+              onClose={handleCancel}
+              onSave={handleSubmit(onSubmit)}
+              onStepChange={(_event, currentStep: WizardStepType) =>
+                onMove(currentStep)
+              }
+              header={
+                <WizardHeader
+                  onClose={handleCancel}
+                  title="Application analysis"
+                  description={
+                    <Truncate
+                      content={applications.map((app) => app.name).join(", ")}
+                    />
+                  }
+                />
+              }
+            >
+              {steps}
+            </Wizard>
+          </Modal>
         </FormProvider>
       )}
     </>

From fbd5e3d7fd667ac485d7a1e7d6d4398358cacc6c Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Mon, 25 Sep 2023 17:11:00 -0400
Subject: [PATCH 5/6] :bug: Assessment settings table columns empty (#1391)

Closes https://issues.redhat.com/browse/MTA-1317
<img width="1903" alt="Screenshot 2023-09-22 at 1 25 39 PM"
src="https://github.com/konveyor/tackle2-ui/assets/11218376/c994020a-7915-4710-bfdb-c6cc2c96d261">

This pull request addresses the issue of empty columns in the Assessment
settings table by making the following changes:

Updated Models: Modified the Questionnaire model in
client/src/app/api/models.ts to include the createTime field, which is
now used for the "Date imported" column in the Assessment settings
table.

Date Formatting: Utilized the dayjs library to format the date from the
createTime field into a human-readable format ("YYYY-MM-DD HH:mm:ss")
for display in the table.

Thresholds Display: Modified the rendering of thresholds in the "Rating"
column to display each color and its percentage.

These changes should resolve the issue of empty columns and ensure that
the table displays the relevant data correctly.

Signed-off-by: ibolton336 <ibolton@redhat.com>
---
 client/src/app/api/models.ts                  | 10 +++---
 .../assessment-settings-page.tsx              | 32 +++++++++++++------
 .../export-questionnaire-dropdown-item.tsx}   |  0
 .../questionnaire-questions-column.tsx        | 15 +++++++++
 .../questionnaire-thresholds-column.tsx       | 27 ++++++++++++++++
 .../components/migration-wave-form.tsx        |  4 ---
 .../pages/migration-waves/migration-waves.tsx |  5 ---
 client/src/index.tsx                          |  8 +++++
 .../mocks/stub-new-work/questionnaireData.ts  |  6 ++--
 9 files changed, 82 insertions(+), 25 deletions(-)
 rename client/src/app/pages/assessment-management/assessment-settings/{ExportQuestionnaireDropdownItem.tsx => components/export-questionnaire-dropdown-item.tsx} (100%)
 create mode 100644 client/src/app/pages/assessment-management/assessment-settings/components/questionnaire-questions-column.tsx
 create mode 100644 client/src/app/pages/assessment-management/assessment-settings/components/questionnaire-thresholds-column.tsx

diff --git a/client/src/app/api/models.ts b/client/src/app/api/models.ts
index 968e9b678a..1fd51790c0 100644
--- a/client/src/app/api/models.ts
+++ b/client/src/app/api/models.ts
@@ -646,7 +646,7 @@ export interface Questionnaire {
   revision: number;
   questions: number;
   rating: string;
-  dateImported: string;
+  createTime: string;
   required: boolean;
   system: boolean;
   sections: Section[];
@@ -687,10 +687,12 @@ export interface Answer {
   selected?: boolean;
 }
 export interface Thresholds {
-  red: number;
-  unknown: number;
-  yellow: number;
+  red?: number;
+  unknown?: number;
+  yellow?: number;
+  green?: number;
 }
+
 export type AssessmentStatus = "empty" | "started" | "complete";
 export type Risk = "green" | "yellow" | "red" | "unknown";
 
diff --git a/client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx b/client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx
index dbc8a1fa36..3462a66b72 100644
--- a/client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx
+++ b/client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx
@@ -8,6 +8,7 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
+  List,
   MenuToggle,
   MenuToggleElement,
   Modal,
@@ -51,7 +52,10 @@ import { useHistory } from "react-router-dom";
 import { Paths } from "@app/Paths";
 import { ImportQuestionnaireForm } from "@app/pages/assessment-management/import-questionnaire-form/import-questionnaire-form";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog/ConfirmDeleteDialog";
-import { ExportQuestionnaireDropdownItem } from "./ExportQuestionnaireDropdownItem";
+import { ExportQuestionnaireDropdownItem } from "./components/export-questionnaire-dropdown-item";
+import dayjs from "dayjs";
+import { QuestionnaireQuestionsColumn } from "./components/questionnaire-questions-column";
+import { QuestionnaireThresholdsColumn } from "./components/questionnaire-thresholds-column";
 
 const AssessmentSettings: React.FC = () => {
   const { t } = useTranslation();
@@ -108,7 +112,7 @@ const AssessmentSettings: React.FC = () => {
       name: "Name",
       questions: "Questions",
       rating: "Rating",
-      dateImported: "Date imported",
+      createTime: "Date imported",
     },
     isSelectable: false,
     expandableVariant: null,
@@ -127,10 +131,10 @@ const AssessmentSettings: React.FC = () => {
         },
       },
     ],
-    sortableColumns: ["name", "dateImported"],
+    sortableColumns: ["name", "createTime"],
     getSortValues: (questionnaire) => ({
       name: questionnaire.name || "",
-      dateImported: questionnaire.dateImported || "",
+      createTime: questionnaire.createTime || "",
     }),
     initialSort: { columnKey: "name", direction: "asc" },
     hasPagination: true,
@@ -225,7 +229,7 @@ const AssessmentSettings: React.FC = () => {
                     <Th {...getThProps({ columnKey: "name" })} />
                     <Th {...getThProps({ columnKey: "questions" })} />
                     <Th {...getThProps({ columnKey: "rating" })} />
-                    <Th {...getThProps({ columnKey: "dateImported" })} />
+                    <Th {...getThProps({ columnKey: "createTime" })} />
                   </TableHeaderContentWithControls>
                 </Tr>
               </Thead>
@@ -247,6 +251,10 @@ const AssessmentSettings: React.FC = () => {
                 numRenderedColumns={numRenderedColumns}
               >
                 {currentPageItems?.map((questionnaire, rowIndex) => {
+                  const formattedDate = dayjs(questionnaire.createTime)
+                    .utc()
+                    .format("YYYY-MM-DD HH:mm:ss");
+
                   return (
                     <Tbody key={questionnaire.id}>
                       <Tr>
@@ -283,19 +291,25 @@ const AssessmentSettings: React.FC = () => {
                             width={10}
                             {...getTdProps({ columnKey: "questions" })}
                           >
-                            {questionnaire.questions}
+                            <QuestionnaireQuestionsColumn
+                              questionnaire={questionnaire}
+                            />
                           </Td>
                           <Td
                             width={15}
                             {...getTdProps({ columnKey: "rating" })}
                           >
-                            {questionnaire.rating}
+                            <List isPlain>
+                              <QuestionnaireThresholdsColumn
+                                questionnaire={questionnaire}
+                              />
+                            </List>
                           </Td>
                           <Td
                             width={25}
-                            {...getTdProps({ columnKey: "dateImported" })}
+                            {...getTdProps({ columnKey: "createTime" })}
                           >
-                            {questionnaire.dateImported}
+                            {formattedDate}
                           </Td>
                           <Td width={10}>
                             <Dropdown
diff --git a/client/src/app/pages/assessment-management/assessment-settings/ExportQuestionnaireDropdownItem.tsx b/client/src/app/pages/assessment-management/assessment-settings/components/export-questionnaire-dropdown-item.tsx
similarity index 100%
rename from client/src/app/pages/assessment-management/assessment-settings/ExportQuestionnaireDropdownItem.tsx
rename to client/src/app/pages/assessment-management/assessment-settings/components/export-questionnaire-dropdown-item.tsx
diff --git a/client/src/app/pages/assessment-management/assessment-settings/components/questionnaire-questions-column.tsx b/client/src/app/pages/assessment-management/assessment-settings/components/questionnaire-questions-column.tsx
new file mode 100644
index 0000000000..62bafb65f3
--- /dev/null
+++ b/client/src/app/pages/assessment-management/assessment-settings/components/questionnaire-questions-column.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Text } from "@patternfly/react-core";
+import { Questionnaire } from "@app/api/models";
+
+export const QuestionnaireQuestionsColumn: React.FC<{
+  questionnaire: Questionnaire;
+}> = ({ questionnaire }) => {
+  const totalQuestions = (questionnaire.sections || []).reduce(
+    (total, section) => {
+      return total + (section.questions ? section.questions.length : 0);
+    },
+    0
+  );
+  return <Text>{totalQuestions}</Text>;
+};
diff --git a/client/src/app/pages/assessment-management/assessment-settings/components/questionnaire-thresholds-column.tsx b/client/src/app/pages/assessment-management/assessment-settings/components/questionnaire-thresholds-column.tsx
new file mode 100644
index 0000000000..b639a948ad
--- /dev/null
+++ b/client/src/app/pages/assessment-management/assessment-settings/components/questionnaire-thresholds-column.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { ListItem } from "@patternfly/react-core";
+import { Questionnaire, Thresholds } from "@app/api/models";
+
+export const QuestionnaireThresholdsColumn: React.FC<{
+  questionnaire: Questionnaire;
+}> = ({ questionnaire }) => {
+  const thresholdsToListItems = (thresholds: Thresholds) => {
+    const thresholdKeys: (keyof Thresholds)[] = Object.keys(
+      thresholds
+    ) as (keyof Thresholds)[];
+
+    return (
+      <>
+        {thresholdKeys.map((color) => {
+          const percentage: number = thresholds[color] || 0;
+          return (
+            <ListItem key={color}>
+              {color} {percentage}%
+            </ListItem>
+          );
+        })}
+      </>
+    );
+  };
+  return thresholdsToListItems(questionnaire.thresholds || {});
+};
diff --git a/client/src/app/pages/migration-waves/components/migration-wave-form.tsx b/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
index 51aec5403a..d9d8a50293 100644
--- a/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
+++ b/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
@@ -22,8 +22,6 @@ import {
   useUpdateMigrationWaveMutation,
 } from "@app/queries/migration-waves";
 import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-import customParseFormat from "dayjs/plugin/customParseFormat";
 import {
   Stakeholder,
   StakeholderGroup,
@@ -37,8 +35,6 @@ import {
 import { OptionWithValue, SimpleSelect } from "@app/components/SimpleSelect";
 import { NotificationsContext } from "@app/components/NotificationsContext";
 import { DEFAULT_SELECT_MAX_HEIGHT } from "@app/Constants";
-dayjs.extend(utc);
-dayjs.extend(customParseFormat);
 
 const stakeholderGroupToOption = (
   value: StakeholderGroup
diff --git a/client/src/app/pages/migration-waves/migration-waves.tsx b/client/src/app/pages/migration-waves/migration-waves.tsx
index d2ebd9e260..e71c81e4e7 100644
--- a/client/src/app/pages/migration-waves/migration-waves.tsx
+++ b/client/src/app/pages/migration-waves/migration-waves.tsx
@@ -33,8 +33,6 @@ import {
 import { useTranslation } from "react-i18next";
 import { AxiosError, AxiosResponse } from "axios";
 import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-import timezone from "dayjs/plugin/timezone";
 import CubesIcon from "@patternfly/react-icons/dist/esm/icons/cubes-icon";
 import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";
 
@@ -70,9 +68,6 @@ import { AppPlaceholder } from "@app/components/AppPlaceholder";
 import { ToolbarBulkSelector } from "@app/components/ToolbarBulkSelector";
 import { ConfirmDialog } from "@app/components/ConfirmDialog";
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
 export const MigrationWaves: React.FC = () => {
   const { t } = useTranslation();
   const { pushNotification } = React.useContext(NotificationsContext);
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 0cc1915b8b..a645470ac5 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -6,6 +6,14 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import App from "@app/App";
 import reportWebVitals from "@app/reportWebVitals";
 import { KeycloakProvider } from "@app/components/KeycloakProvider";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
 
 if (process.env.NODE_ENV === "development") {
   import("./mocks/browser").then((browserMocks) => {
diff --git a/client/src/mocks/stub-new-work/questionnaireData.ts b/client/src/mocks/stub-new-work/questionnaireData.ts
index 0986f99e46..36560b9147 100644
--- a/client/src/mocks/stub-new-work/questionnaireData.ts
+++ b/client/src/mocks/stub-new-work/questionnaireData.ts
@@ -10,7 +10,7 @@ const questionnaireData: Record<number, Questionnaire> = {
     revision: 1,
     questions: 42,
     rating: "5% Red, 25% Yellow",
-    dateImported: "8 Aug. 2023, 10:20 AM EST",
+    createTime: "8 Aug. 2023, 10:20 AM EST",
     required: false,
     system: true,
     sections: [
@@ -189,7 +189,7 @@ const questionnaireData: Record<number, Questionnaire> = {
     revision: 1,
     questions: 24,
     rating: "15% Red, 35% Yellow",
-    dateImported: "9 Aug. 2023, 03:32 PM EST",
+    createTime: "9 Aug. 2023, 03:32 PM EST",
     required: true,
     system: false,
     sections: [
@@ -369,7 +369,7 @@ const questionnaireData: Record<number, Questionnaire> = {
     revision: 1,
     questions: 34,
     rating: "7% Red, 25% Yellow",
-    dateImported: "10 Aug. 2023, 11:23 PM EST",
+    createTime: "10 Aug. 2023, 11:23 PM EST",
     required: true,
     system: false,
     sections: [

From 5fbe7b602ccefaece6eac31f93ebe3b35444d161 Mon Sep 17 00:00:00 2001
From: Dallas <dallas.nicol@gmail.com>
Date: Tue, 26 Sep 2023 09:13:04 -0500
Subject: [PATCH 6/6] :seedling: 1241 replace deprecated pf dropdown (#1375)

removed all instances of deprecated dropdown related imports (dropdown,
dropdownItem, dropdownGroup, dropdownToggle, etc)

closes #1241

---------

Signed-off-by: gitdallas <dallas.nicol@gmail.com>
---
 .../FilterToolbar/FilterToolbar.tsx           |  68 ++++++------
 client/src/app/components/KebabDropdown.tsx   |  36 +++++--
 client/src/app/components/MenuActions.tsx     |  39 +++----
 client/src/app/components/TargetCard.tsx      |   2 +-
 .../app/components/ToolbarBulkSelector.tsx    |  60 ++++++-----
 .../__snapshots__/MenuActions.test.tsx.snap   | 100 ++++++++++--------
 .../__snapshots__/PageHeader.test.tsx.snap    | 100 ++++++++++--------
 .../app/layout/HeaderApp/MobileDropdown.tsx   |  29 +----
 client/src/app/layout/HeaderApp/SSOMenu.tsx   |  27 ++---
 .../__snapshots__/HeaderApp.test.tsx.snap     |  74 ++++---------
 .../manage-imports/manage-imports.tsx         |  12 +--
 11 files changed, 266 insertions(+), 281 deletions(-)

diff --git a/client/src/app/components/FilterToolbar/FilterToolbar.tsx b/client/src/app/components/FilterToolbar/FilterToolbar.tsx
index 40985d504b..dc3f17f6c8 100644
--- a/client/src/app/components/FilterToolbar/FilterToolbar.tsx
+++ b/client/src/app/components/FilterToolbar/FilterToolbar.tsx
@@ -1,15 +1,14 @@
 import * as React from "react";
 import {
+  Dropdown,
+  DropdownItem,
+  DropdownGroup,
+  DropdownList,
+  MenuToggle,
   SelectOptionProps,
   ToolbarToggleGroup,
   ToolbarItem,
 } from "@patternfly/react-core";
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownGroup,
-  DropdownToggle,
-} from "@patternfly/react-core/deprecated";
 import FilterIcon from "@patternfly/react-icons/dist/esm/icons/filter-icon";
 
 import { FilterControl } from "./FilterControl";
@@ -29,7 +28,7 @@ export interface OptionPropsWithKey extends SelectOptionProps {
 
 export interface IBasicFilterCategory<
   TItem, // The actual API objects we're filtering
-  TFilterCategoryKey extends string // Unique identifiers for each filter category (inferred from key properties if possible)
+  TFilterCategoryKey extends string, // Unique identifiers for each filter category (inferred from key properties if possible)
 > {
   key: TFilterCategoryKey; // For use in the filterValues state object. Must be unique per category.
   title: string;
@@ -42,7 +41,7 @@ export interface IBasicFilterCategory<
 
 export interface IMultiselectFilterCategory<
   TItem,
-  TFilterCategoryKey extends string
+  TFilterCategoryKey extends string,
 > extends IBasicFilterCategory<TItem, TFilterCategoryKey> {
   selectOptions: OptionPropsWithKey[];
   placeholderText?: string;
@@ -70,7 +69,7 @@ export type IFilterValues<TFilterCategoryKey extends string> = Partial<
 
 export const getFilterLogicOperator = <
   TItem,
-  TFilterCategoryKey extends string
+  TFilterCategoryKey extends string,
 >(
   filterCategory?: FilterCategory<TItem, TFilterCategoryKey>,
   defaultOperator: "AND" | "OR" = "OR"
@@ -131,24 +130,26 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
   );
 
   const renderDropdownItems = () => {
-    if (!!filterGroups.length) {
+    if (filterGroups.length) {
       return filterGroups.map((filterGroup) => (
         <DropdownGroup label={filterGroup} key={filterGroup}>
-          {filterCategories
-            .filter(
-              (filterCategory) => filterCategory.filterGroup === filterGroup
-            )
-            .map((filterCategory) => {
-              return (
-                <DropdownItem
-                  id={`filter-category-${filterCategory.key}`}
-                  key={filterCategory.key}
-                  onClick={() => onCategorySelect(filterCategory)}
-                >
-                  {filterCategory.title}
-                </DropdownItem>
-              );
-            })}
+          <DropdownList>
+            {filterCategories
+              .filter(
+                (filterCategory) => filterCategory.filterGroup === filterGroup
+              )
+              .map((filterCategory) => {
+                return (
+                  <DropdownItem
+                    id={`filter-category-${filterCategory.key}`}
+                    key={filterCategory.key}
+                    onClick={() => onCategorySelect(filterCategory)}
+                  >
+                    {filterCategory.title}
+                  </DropdownItem>
+                );
+              })}
+          </DropdownList>
         </DropdownGroup>
       ));
     } else {
@@ -177,21 +178,22 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
         {!showFiltersSideBySide && (
           <ToolbarItem>
             <Dropdown
-              isGrouped={!!filterGroups.length}
-              toggle={
-                <DropdownToggle
+              toggle={(toggleRef) => (
+                <MenuToggle
                   id="filtered-by"
-                  onToggle={() =>
+                  ref={toggleRef}
+                  onClick={() =>
                     setIsCategoryDropdownOpen(!isCategoryDropdownOpen)
                   }
                   isDisabled={isDisabled}
                 >
                   <FilterIcon /> {currentFilterCategory?.title}
-                </DropdownToggle>
-              }
+                </MenuToggle>
+              )}
               isOpen={isCategoryDropdownOpen}
-              dropdownItems={renderDropdownItems()}
-            />
+            >
+              {renderDropdownItems()}
+            </Dropdown>
           </ToolbarItem>
         )}
 
diff --git a/client/src/app/components/KebabDropdown.tsx b/client/src/app/components/KebabDropdown.tsx
index faa97fa18a..3224c6fe06 100644
--- a/client/src/app/components/KebabDropdown.tsx
+++ b/client/src/app/components/KebabDropdown.tsx
@@ -1,27 +1,43 @@
 import React, { useState } from "react";
 
-import { Dropdown, KebabToggle } from "@patternfly/react-core/deprecated";
+import {
+  Dropdown,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+} from "@patternfly/react-core";
+import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";
 
 export interface IKebabDropdownProps {
   dropdownItems?: React.ReactNode[];
+  ariaLabel?: string;
 }
 
 export const KebabDropdown: React.FC<IKebabDropdownProps> = ({
   dropdownItems,
+  ariaLabel,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const onKebabToggle = (isOpen: boolean) => {
-    setIsOpen(isOpen);
-  };
-
   return (
     <Dropdown
-      toggle={<KebabToggle onToggle={(_, isOpen) => onKebabToggle(isOpen)} />}
+      popperProps={{ position: "right" }}
       isOpen={isOpen}
-      isPlain
-      position="right"
-      dropdownItems={dropdownItems}
-    />
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          isExpanded={isOpen}
+          onClick={() => setIsOpen(!isOpen)}
+          variant="plain"
+          aria-label={ariaLabel || "Table toolbar actions kebab toggle"}
+          isDisabled={!dropdownItems || dropdownItems.length === 0}
+        >
+          <EllipsisVIcon aria-hidden="true" />
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>{dropdownItems}</DropdownList>
+    </Dropdown>
   );
 };
diff --git a/client/src/app/components/MenuActions.tsx b/client/src/app/components/MenuActions.tsx
index fc7da90f53..3a40c86f9e 100644
--- a/client/src/app/components/MenuActions.tsx
+++ b/client/src/app/components/MenuActions.tsx
@@ -2,9 +2,9 @@ import React, { useState } from "react";
 import {
   Dropdown,
   DropdownItem,
-  DropdownToggle,
-} from "@patternfly/react-core/deprecated";
-import CaretDownIcon from "@patternfly/react-icons/dist/esm/icons/caret-down-icon";
+  DropdownList,
+  MenuToggle,
+} from "@patternfly/react-core";
 
 export interface MenuActionsProps {
   actions: { label: string; callback: () => void }[];
@@ -17,23 +17,26 @@ export const MenuActions: React.FC<MenuActionsProps> = ({ actions }) => {
     <Dropdown
       isOpen={isOpen}
       onSelect={() => {
-        setIsOpen(!isOpen);
+        setIsOpen(false);
       }}
-      toggle={
-        <DropdownToggle
-          onToggle={(_, isOpen) => {
-            setIsOpen(isOpen);
-          }}
-          toggleIndicator={CaretDownIcon}
+      toggle={(toggleRef) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={() => setIsOpen(!isOpen)}
+          isExpanded={isOpen}
         >
           Actions
-        </DropdownToggle>
-      }
-      dropdownItems={actions.map((element, index) => (
-        <DropdownItem key={index} component="button" onClick={element.callback}>
-          {element.label}
-        </DropdownItem>
-      ))}
-    />
+        </MenuToggle>
+      )}
+      shouldFocusToggleOnSelect
+    >
+      <DropdownList>
+        {actions.map((item, index) => (
+          <DropdownItem key={index} onClick={item.callback}>
+            {item.label}
+          </DropdownItem>
+        ))}
+      </DropdownList>
+    </Dropdown>
   );
 };
diff --git a/client/src/app/components/TargetCard.tsx b/client/src/app/components/TargetCard.tsx
index ce4d82570b..5044d0af22 100644
--- a/client/src/app/components/TargetCard.tsx
+++ b/client/src/app/components/TargetCard.tsx
@@ -6,6 +6,7 @@ import {
   EmptyStateVariant,
   Card,
   CardBody,
+  DropdownItem,
   Text,
   Flex,
   FlexItem,
@@ -17,7 +18,6 @@ import {
   PanelMainBody,
   Panel,
 } from "@patternfly/react-core";
-import { DropdownItem } from "@patternfly/react-core/deprecated";
 import {
   Select,
   SelectOption,
diff --git a/client/src/app/components/ToolbarBulkSelector.tsx b/client/src/app/components/ToolbarBulkSelector.tsx
index bd1822d2fe..ed3712f726 100644
--- a/client/src/app/components/ToolbarBulkSelector.tsx
+++ b/client/src/app/components/ToolbarBulkSelector.tsx
@@ -1,12 +1,15 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, PaginationProps, ToolbarItem } from "@patternfly/react-core";
 import {
+  Button,
   Dropdown,
   DropdownItem,
-  DropdownToggle,
-  DropdownToggleCheckbox,
-} from "@patternfly/react-core/deprecated";
+  DropdownList,
+  MenuToggle,
+  MenuToggleCheckbox,
+  PaginationProps,
+  ToolbarItem,
+} from "@patternfly/react-core";
 
 import AngleDownIcon from "@patternfly/react-icons/dist/esm/icons/angle-down-icon";
 import AngleRightIcon from "@patternfly/react-icons/dist/esm/icons/angle-right-icon";
@@ -67,7 +70,6 @@ export const ToolbarBulkSelector = <T,>({
     }
     return state;
   };
-  const [bulkSelectOpen, setBulkSelectOpen] = React.useState(false);
   const handleSelectAll = (checked: boolean) => {
     onSelectAll(!!checked);
   };
@@ -113,31 +115,33 @@ export const ToolbarBulkSelector = <T,>({
       {isExpandable && <ToolbarItem>{collapseAllBtn()}</ToolbarItem>}
       <ToolbarItem>
         <Dropdown
-          toggle={
-            <DropdownToggle
-              splitButtonItems={[
-                <DropdownToggleCheckbox
-                  id="bulk-selected-items-checkbox"
-                  key="bulk-select-checkbox"
-                  aria-label="Select all"
-                  onChange={() => {
-                    if (getBulkSelectState() !== false) {
-                      onSelectAll(false);
-                    } else {
-                      onSelectAll(true);
-                    }
-                  }}
-                  isChecked={getBulkSelectState()}
-                />,
-              ]}
-              onToggle={(_, isOpen) => {
-                setBulkSelectOpen(isOpen);
+          isOpen={isOpen}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={() => setIsOpen(!isOpen)}
+              splitButtonOptions={{
+                items: [
+                  <MenuToggleCheckbox
+                    id="bulk-selected-items-checkbox"
+                    key="bulk-select-checkbox"
+                    aria-label="Select all"
+                    onChange={() => {
+                      if (getBulkSelectState() !== false) {
+                        onSelectAll(false);
+                      } else {
+                        onSelectAll(true);
+                      }
+                    }}
+                    isChecked={getBulkSelectState()}
+                  />,
+                ],
               }}
             />
-          }
-          isOpen={bulkSelectOpen}
-          dropdownItems={dropdownItems}
-        ></Dropdown>
+          )}
+        >
+          <DropdownList>{dropdownItems}</DropdownList>
+        </Dropdown>
       </ToolbarItem>
     </>
   );
diff --git a/client/src/app/components/tests/__snapshots__/MenuActions.test.tsx.snap b/client/src/app/components/tests/__snapshots__/MenuActions.test.tsx.snap
index 5fe62dc4a8..13f8df57e7 100644
--- a/client/src/app/components/tests/__snapshots__/MenuActions.test.tsx.snap
+++ b/client/src/app/components/tests/__snapshots__/MenuActions.test.tsx.snap
@@ -5,65 +5,73 @@ exports[`MenuActions Renders without crashing 1`] = `
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <div
-        class="pf-v5-c-dropdown"
-        data-ouia-component-id="OUIA-Generated-Dropdown-1"
-        data-ouia-component-type="PF5/Dropdown"
-        data-ouia-safe="true"
-      >
-        <button
-          aria-expanded="false"
-          aria-haspopup="true"
-          class="pf-v5-c-dropdown__toggle"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-          data-ouia-component-type="PF5/DropdownToggle"
-          data-ouia-safe="true"
-          id="pf-dropdown-toggle-id-0"
-          type="button"
-        >
-          <span
-            class="pf-v5-c-dropdown__toggle-text"
-          >
-            Actions
-          </span>
-          <span
-            class="pf-v5-c-dropdown__toggle-icon"
-          >
-            <test-file-stub />
-          </span>
-        </button>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="pf-v5-c-dropdown"
-      data-ouia-component-id="OUIA-Generated-Dropdown-1"
-      data-ouia-component-type="PF5/Dropdown"
-      data-ouia-safe="true"
-    >
       <button
         aria-expanded="false"
-        aria-haspopup="true"
-        class="pf-v5-c-dropdown__toggle"
-        data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-        data-ouia-component-type="PF5/DropdownToggle"
-        data-ouia-safe="true"
-        id="pf-dropdown-toggle-id-0"
+        class="pf-v5-c-menu-toggle"
         type="button"
       >
         <span
-          class="pf-v5-c-dropdown__toggle-text"
+          class="pf-v5-c-menu-toggle__text"
         >
           Actions
         </span>
         <span
-          class="pf-v5-c-dropdown__toggle-icon"
+          class="pf-v5-c-menu-toggle__controls"
         >
-          <test-file-stub />
+          <span
+            class="pf-v5-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 320 512"
+              width="1em"
+            >
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
+          </span>
         </span>
       </button>
     </div>
+  </body>,
+  "container": <div>
+    <button
+      aria-expanded="false"
+      class="pf-v5-c-menu-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        Actions
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
+      >
+        <span
+          class="pf-v5-c-menu-toggle__toggle-icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 320 512"
+            width="1em"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+        </span>
+      </span>
+    </button>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
diff --git a/client/src/app/components/tests/__snapshots__/PageHeader.test.tsx.snap b/client/src/app/components/tests/__snapshots__/PageHeader.test.tsx.snap
index 9ed3bc61e1..b5efda83a8 100644
--- a/client/src/app/components/tests/__snapshots__/PageHeader.test.tsx.snap
+++ b/client/src/app/components/tests/__snapshots__/PageHeader.test.tsx.snap
@@ -97,34 +97,38 @@ exports[`PageHeader Renders without crashing 1`] = `
             <div
               class="pf-v5-l-split__item"
             >
-              <div
-                class="pf-v5-c-dropdown"
-                data-ouia-component-id="OUIA-Generated-Dropdown-1"
-                data-ouia-component-type="PF5/Dropdown"
-                data-ouia-safe="true"
+              <button
+                aria-expanded="false"
+                class="pf-v5-c-menu-toggle"
+                type="button"
               >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="pf-v5-c-dropdown__toggle"
-                  data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-                  data-ouia-component-type="PF5/DropdownToggle"
-                  data-ouia-safe="true"
-                  id="pf-dropdown-toggle-id-0"
-                  type="button"
+                <span
+                  class="pf-v5-c-menu-toggle__text"
+                >
+                  Actions
+                </span>
+                <span
+                  class="pf-v5-c-menu-toggle__controls"
                 >
                   <span
-                    class="pf-v5-c-dropdown__toggle-text"
-                  >
-                    Actions
-                  </span>
-                  <span
-                    class="pf-v5-c-dropdown__toggle-icon"
+                    class="pf-v5-c-menu-toggle__toggle-icon"
                   >
-                    <test-file-stub />
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v5-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 320 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                      />
+                    </svg>
                   </span>
-                </button>
-              </div>
+                </span>
+              </button>
             </div>
           </div>
         </div>
@@ -290,34 +294,38 @@ exports[`PageHeader Renders without crashing 1`] = `
           <div
             class="pf-v5-l-split__item"
           >
-            <div
-              class="pf-v5-c-dropdown"
-              data-ouia-component-id="OUIA-Generated-Dropdown-1"
-              data-ouia-component-type="PF5/Dropdown"
-              data-ouia-safe="true"
+            <button
+              aria-expanded="false"
+              class="pf-v5-c-menu-toggle"
+              type="button"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                class="pf-v5-c-dropdown__toggle"
-                data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-                data-ouia-component-type="PF5/DropdownToggle"
-                data-ouia-safe="true"
-                id="pf-dropdown-toggle-id-0"
-                type="button"
+              <span
+                class="pf-v5-c-menu-toggle__text"
+              >
+                Actions
+              </span>
+              <span
+                class="pf-v5-c-menu-toggle__controls"
               >
                 <span
-                  class="pf-v5-c-dropdown__toggle-text"
-                >
-                  Actions
-                </span>
-                <span
-                  class="pf-v5-c-dropdown__toggle-icon"
+                  class="pf-v5-c-menu-toggle__toggle-icon"
                 >
-                  <test-file-stub />
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 320 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                    />
+                  </svg>
                 </span>
-              </button>
-            </div>
+              </span>
+            </button>
           </div>
         </div>
       </div>
diff --git a/client/src/app/layout/HeaderApp/MobileDropdown.tsx b/client/src/app/layout/HeaderApp/MobileDropdown.tsx
index 715b382181..acf6f77421 100644
--- a/client/src/app/layout/HeaderApp/MobileDropdown.tsx
+++ b/client/src/app/layout/HeaderApp/MobileDropdown.tsx
@@ -1,39 +1,20 @@
 import React, { useState } from "react";
-import {
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
-} from "@patternfly/react-core/deprecated";
+import { DropdownItem } from "@patternfly/react-core";
 import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon";
-import { AppAboutModal } from "../AppAboutModal";
+import { KebabDropdown } from "@app/components/KebabDropdown";
+import { AppAboutModal } from "@app/layout/AppAboutModal";
 
 export const MobileDropdown: React.FC = () => {
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
   const [isAboutModalOpen, setAboutModalOpen] = useState(false);
 
-  const onKebabDropdownToggle = (isOpen: boolean) =>
-    setIsKebabDropdownOpen(isOpen);
-
-  const onKebabDropdownSelect = () => {
-    setIsKebabDropdownOpen((current) => !current);
-  };
-
   const toggleAboutModal = () => {
     setAboutModalOpen((current) => !current);
   };
 
   return (
     <>
-      <Dropdown
-        isPlain
-        position="right"
-        onSelect={onKebabDropdownSelect}
-        toggle={
-          <KebabToggle
-            onToggle={(_, isOpen) => onKebabDropdownToggle(isOpen)}
-          />
-        }
-        isOpen={isKebabDropdownOpen}
+      <KebabDropdown
+        ariaLabel="mobile dropdown"
         dropdownItems={[
           <DropdownItem key="about" onClick={toggleAboutModal}>
             <HelpIcon />
diff --git a/client/src/app/layout/HeaderApp/SSOMenu.tsx b/client/src/app/layout/HeaderApp/SSOMenu.tsx
index d43b08d970..27f352c8d8 100644
--- a/client/src/app/layout/HeaderApp/SSOMenu.tsx
+++ b/client/src/app/layout/HeaderApp/SSOMenu.tsx
@@ -2,11 +2,13 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useKeycloak } from "@react-keycloak/web";
 import {
+  Dropdown,
+  MenuToggle,
   DropdownGroup,
   DropdownItem,
+  DropdownList,
   ToolbarItem,
 } from "@patternfly/react-core";
-import { Dropdown, DropdownToggle } from "@patternfly/react-core/deprecated";
 import { isAuthRequired, LocalStorageKey } from "@app/Constants";
 import { useHistory } from "react-router-dom";
 
@@ -35,19 +37,20 @@ export const SSOMenu: React.FC = () => {
         >
           <Dropdown
             isPlain
-            position="right"
             onSelect={onDropdownSelect}
             isOpen={isDropdownOpen}
-            toggle={
-              <DropdownToggle
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
                 id="sso-actions-toggle"
-                onToggle={(_, isOpen) => onDropdownToggle(isOpen)}
+                onClick={() => onDropdownToggle(!isDropdownOpen)}
               >
                 {(keycloak?.idTokenParsed as any)["preferred_username"]}
-              </DropdownToggle>
-            }
-            dropdownItems={[
-              <DropdownGroup key="sso">
+              </MenuToggle>
+            )}
+          >
+            <DropdownGroup key="sso">
+              <DropdownList>
                 <DropdownItem
                   id="manage-account"
                   key="sso_user_management"
@@ -79,9 +82,9 @@ export const SSOMenu: React.FC = () => {
                 >
                   {t("actions.logout")}
                 </DropdownItem>
-              </DropdownGroup>,
-            ]}
-          />
+              </DropdownList>
+            </DropdownGroup>
+          </Dropdown>
         </ToolbarItem>
       )}
     </>
diff --git a/client/src/app/layout/HeaderApp/tests/__snapshots__/HeaderApp.test.tsx.snap b/client/src/app/layout/HeaderApp/tests/__snapshots__/HeaderApp.test.tsx.snap
index 77df778eaf..880956053b 100644
--- a/client/src/app/layout/HeaderApp/tests/__snapshots__/HeaderApp.test.tsx.snap
+++ b/client/src/app/layout/HeaderApp/tests/__snapshots__/HeaderApp.test.tsx.snap
@@ -93,35 +93,16 @@ exports[`Test snapshot 1`] = `
                   <div
                     class="pf-v5-c-toolbar__item pf-m-hidden-on-lg"
                   >
-                    <div
-                      class="pf-v5-c-dropdown pf-m-align-right"
-                      data-ouia-component-id="OUIA-Generated-Dropdown-1"
-                      data-ouia-component-type="PF5/Dropdown"
-                      data-ouia-safe="true"
+                    <button
+                      aria-expanded="false"
+                      aria-label="mobile dropdown"
+                      class="pf-v5-c-menu-toggle pf-m-plain"
+                      type="button"
                     >
-                      <button
-                        aria-expanded="false"
-                        aria-haspopup="true"
-                        aria-label="Actions"
-                        class="pf-v5-c-dropdown__toggle pf-m-plain"
-                        id="pf-dropdown-toggle-id-0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="pf-v5-svg"
-                          fill="currentColor"
-                          height="1em"
-                          role="img"
-                          viewBox="0 0 192 512"
-                          width="1em"
-                        >
-                          <path
-                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
+                      <test-file-stub
+                        aria-hidden="true"
+                      />
+                    </button>
                   </div>
                 </div>
               </div>
@@ -236,35 +217,16 @@ exports[`Test snapshot 1`] = `
                 <div
                   class="pf-v5-c-toolbar__item pf-m-hidden-on-lg"
                 >
-                  <div
-                    class="pf-v5-c-dropdown pf-m-align-right"
-                    data-ouia-component-id="OUIA-Generated-Dropdown-1"
-                    data-ouia-component-type="PF5/Dropdown"
-                    data-ouia-safe="true"
+                  <button
+                    aria-expanded="false"
+                    aria-label="mobile dropdown"
+                    class="pf-v5-c-menu-toggle pf-m-plain"
+                    type="button"
                   >
-                    <button
-                      aria-expanded="false"
-                      aria-haspopup="true"
-                      aria-label="Actions"
-                      class="pf-v5-c-dropdown__toggle pf-m-plain"
-                      id="pf-dropdown-toggle-id-0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 192 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
+                    <test-file-stub
+                      aria-hidden="true"
+                    />
+                  </button>
                 </div>
               </div>
             </div>
diff --git a/client/src/app/pages/applications/manage-imports/manage-imports.tsx b/client/src/app/pages/applications/manage-imports/manage-imports.tsx
index 0f88325529..69a89f3dcd 100644
--- a/client/src/app/pages/applications/manage-imports/manage-imports.tsx
+++ b/client/src/app/pages/applications/manage-imports/manage-imports.tsx
@@ -4,13 +4,13 @@ import { useTranslation } from "react-i18next";
 import {
   Button,
   ButtonVariant,
+  DropdownItem,
   Modal,
   PageSection,
   Popover,
   ToolbarGroup,
   ToolbarItem,
 } from "@patternfly/react-core";
-import { DropdownItem } from "@patternfly/react-core/deprecated";
 import {
   cellWidth,
   IAction,
@@ -350,12 +350,10 @@ export const ManageImports: React.FC = () => {
                       dropdownItems={[
                         <DropdownItem
                           key="download-csv-template"
-                          component={
-                            <a href="/template_application_import.csv" download>
-                              {t("actions.downloadCsvTemplate")}
-                            </a>
-                          }
-                        />,
+                          to="/template_application_import.csv"
+                        >
+                          {t("actions.downloadCsvTemplate")}
+                        </DropdownItem>,
                       ]}
                     />
                   </ToolbarItem>