Merge branch 'main' into mta-1881

.github/workflows/ci-actions.yml

@@ -4,26 +4,25 @@ on:
   push:
     branches:
       - main
-      - "v[0-9]+.[0-9]+.[0-9]+"
       - "release-*"
   pull_request:
     branches:
       - main
-      - "v[0-9]+.[0-9]+.[0-9]+"
       - "release-*"
 
 jobs:
   unit-test:
     runs-on: ubuntu-latest
     strategy:
       matrix:
+        # Note: This should match the node version(s) used in the base Dockerfile
         node-version: [18.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -43,21 +42,21 @@ jobs:
         run: npm run test -- --coverage --watchAll=false
 
       - name: Upload to codecov (client)
-        uses: codecov/codecov-action@v1
+        uses: codecov/codecov-action@v3
         with:
           flags: client
           directory: ./*/coverage
 
       - name: Upload to codecov (server)
-        uses: codecov/codecov-action@v1
+        uses: codecov/codecov-action@v3
         with:
           flags: server
           directory: ./*/coverage
 
   build-and-upload-for-global-ci:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: save tackle2-ui image
         run: |

client/src/app/Constants.ts

@@ -24,6 +24,12 @@ export const isRWXSupported = ENV.RWX_SUPPORTED === "true";
 
 export const DEFAULT_SELECT_MAX_HEIGHT = 200;
 
+/**
+ * The name of the client generated id field inserted in a object marked with mixin type
+ * `WithUiId`.
+ */
+export const UI_UNIQUE_ID = "_ui_unique_id";
+
 // Colors
 
 // t('colors.red')

client/src/app/api/models.ts

@@ -578,8 +578,14 @@ export interface BaseAnalysisIssueReport extends AnalysisIssuesCommonFields {
   files: number;
 }
 
-// After fetching from the hub, we inject a unique id composed of ruleset+rule for convenience
+/**
+ * Mark an object as having a unique client generated id field.  Use this type if
+ * an objects from hub does not have a single field with a unique key AND the object
+ * is to be used in a table.  Our table handlers assume a single field with a unique
+ * value across all objects in a set to properly handle row selections.
+ */
 export type WithUiId<T> = T & { _ui_unique_id: string };
+
 export type AnalysisRuleReport = WithUiId<BaseAnalysisRuleReport>;
 export type AnalysisIssueReport = WithUiId<BaseAnalysisIssueReport>;
 

client/src/app/hooks/table-controls/DOCS.md

@@ -514,7 +514,9 @@ Table columns are identified by unique keys which are statically inferred from t
 
 #### Item IDs
 
-Item objects must contain some unique identifier which is either a string or number. The property key of this identifier is a required config argument called `idProperty`, which will usually be `"id"`. If no unique identifier is present in the API data, an artificial one can be injected before passing the data into these hooks, which can be done in the useQuery `select` callback (see instances where we have used `"_ui_unique_id"`). Any state which keeps track of something by item (i.e. by row) makes use of `item[idProperty]` as an identifier. Examples of this include selected rows, expanded rows and active rows. Valid `idProperty` values are also enforced by TypeScript generics; if an `idProperty` is provided that is not a property on the `TItem` type, you should get a type error.
+Item objects must contain some unique identifier which is either a string or number. The property key of this identifier is a required config argument called `idProperty`, which will usually be `"id"`. If no unique identifier is present in the API data, an artificial one can be injected before passing the data into these hooks. This can be done in the useQuery `select` callback (see instances where we have used `"_ui_unique_id"`). Another option is to use the query hook `useWithUiId()` on the react-query fetched data. Since `select` modified data is not part of the query cache, it does not matter if transforms are done in react-query, `useWithUiId` hook, or other means.
+
+Any state which keeps track of something by item (i.e. by row) makes use of `item[idProperty]` as an identifier. Examples of this include selected rows, expanded rows and active rows. Valid `idProperty` values are also enforced by TypeScript generics. If an `idProperty` is provided that is not a property on the `TItem` type, you should get a type error.
 
 > ⚠️ TECH DEBT NOTE: Things specific to `useQuery` and `_ui_unique_id` here are Konveyor-specific notes that should be removed after moving this to table-batteries.
 

client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx

@@ -189,7 +189,7 @@ export const ApplicationDetailDrawer: React.FC<
                 isCompact
                 columnModifier={{ default: "1Col" }}
                 horizontalTermWidthModifier={{
-                  default: "14ch",
+                  default: "15ch",
                 }}
               >
                 <DescriptionListGroup>

client/src/app/pages/applications/components/application-review-status/application-review-status.tsx

@@ -16,7 +16,7 @@ export const ApplicationReviewStatus: React.FC<
 > = ({ application }) => {
   const { t } = useTranslation();
 
-  const { archetypes, isFetching } = useFetchArchetypes();
+  const { archetypes, isFetching, error } = useFetchArchetypes();
   const isAppReviewed = !!application.review;
 
   const applicationArchetypes = application.archetypes?.map((archetypeRef) => {
@@ -27,6 +27,10 @@ export const ApplicationReviewStatus: React.FC<
     applicationArchetypes?.filter((archetype) => !!archetype?.review).length ||
     0;
 
+  if (error) {
+    return <EmptyTextMessage message={t("terms.notAvailable")} />;
+  }
+
   if (isFetching) {
     return <Spinner size="md" />;
   }
@@ -43,9 +47,5 @@ export const ApplicationReviewStatus: React.FC<
     statusPreset = "NotStarted";
   }
 
-  if (!applicationArchetypes || applicationArchetypes.length === 0) {
-    return <EmptyTextMessage message={t("terms.notAvailable")} />;
-  }
-
   return <IconedStatus preset={statusPreset} tooltipCount={tooltipCount} />;
 };

client/src/app/pages/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx

@@ -28,6 +28,7 @@ import {
 } from "@tanstack/react-query";
 import { TrashIcon } from "@patternfly/react-icons";
 import useIsArchetype from "@app/hooks/useIsArchetype";
+import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 
 enum AssessmentAction {
   Take = "Take",
@@ -189,6 +190,7 @@ const DynamicAssessmentActionsRow: FunctionComponent<
             assessmentId: assessment.id,
             applicationName: application?.name,
             applicationId: application?.id,
+            archetypeName: archetype?.name,
             archetypeId: archetype?.id,
           }).then(() => {
             createAssessment();
@@ -222,7 +224,7 @@ const DynamicAssessmentActionsRow: FunctionComponent<
               {action}
             </Button>
           ) : (
-            <Spinner role="status" size="md">
+            <Spinner role="status" size="md" className={spacing.mxLg}>
               <span className="sr-only">Loading...</span>
             </Spinner>
           )}
@@ -262,6 +264,7 @@ const DynamicAssessmentActionsRow: FunctionComponent<
                 assessmentId: assessment.id,
                 applicationName: application?.name,
                 applicationId: application?.id,
+                archetypeName: archetype?.name,
                 archetypeId: archetype?.id,
               });
             }}

client/src/app/pages/assessment/components/assessment-wizard/assessment-wizard.tsx

@@ -447,6 +447,7 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
             assessmentId: assessment.id,
             applicationName: assessment.application?.name,
             applicationId: assessment.application?.id,
+            archetypeName: assessment.archetype?.name,
             archetypeId: assessment.archetype?.id,
           });
       } else {
@@ -455,6 +456,7 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
             assessmentId: assessment.id,
             applicationName: assessment.application?.name,
             applicationId: assessment.application?.id,
+            archetypeName: assessment.archetype?.name,
             archetypeId: assessment.archetype?.id,
           });
       }

client/src/app/pages/assessment/components/view-archetypes/components/view-archetypes-table.tsx

@@ -24,6 +24,24 @@ const ViewArchetypesTable: React.FC<ViewArchetypesTableProps> = ({
   const archivedQuestionnaires = questionnaires.filter(
     (questionnaire) => !questionnaire.required
   );
+
+  const nonRequiredQuestionnaireIds = questionnaires
+    .filter((q) => !q.required)
+    .map((q) => q.id);
+
+  const relevantAssessmentIds = (archetype?.assessments || []).map((a) => a.id);
+
+  const filteredArchivedAssessments = assessments.filter(
+    (assessment) =>
+      nonRequiredQuestionnaireIds.includes(assessment.questionnaire.id) &&
+      relevantAssessmentIds.includes(assessment.id)
+  );
+  const filteredArchivedQuestionnaires = archivedQuestionnaires.filter(
+    (questionnaire) =>
+      filteredArchivedAssessments.some(
+        (assessment) => assessment.questionnaire.id === questionnaire.id
+      )
+  );
   return (
     <>
       <QuestionnairesTable
@@ -34,15 +52,16 @@ const ViewArchetypesTable: React.FC<ViewArchetypesTableProps> = ({
         isFetching={isFetchingQuestionnaires || isFetchingAssessmentsById}
         tableName="Required questionnaires"
       />
-
-      <QuestionnairesTable
-        isReadonly
-        archetype={archetype}
-        questionnaires={archivedQuestionnaires}
-        assessments={assessments}
-        isFetching={isFetchingQuestionnaires || isFetchingAssessmentsById}
-        tableName="Archived questionnaires"
-      />
+      {filteredArchivedAssessments.length === 0 ? null : (
+        <QuestionnairesTable
+          archetype={archetype}
+          isReadonly
+          questionnaires={filteredArchivedQuestionnaires}
+          assessments={filteredArchivedAssessments}
+          isFetching={isFetchingQuestionnaires || isFetchingAssessmentsById}
+          tableName="Archived questionnaires"
+        />
+      )}
     </>
   );
 };

client/src/app/pages/dependencies/dependencies.tsx

@@ -18,7 +18,7 @@ import {
   useTableControlProps,
   getHubRequestParams,
 } from "@app/hooks/table-controls";
-import { TablePersistenceKeyPrefix } from "@app/Constants";
+import { TablePersistenceKeyPrefix, UI_UNIQUE_ID } from "@app/Constants";
 import { SimplePagination } from "@app/components/SimplePagination";
 import {
   ConditionalTableBody,
@@ -97,7 +97,7 @@ export const Dependencies: React.FC = () => {
 
   const tableControls = useTableControlProps({
     ...tableControlState, // Includes filterState, sortState and paginationState
-    idProperty: "_ui_unique_id",
+    idProperty: UI_UNIQUE_ID,
     currentPageItems,
     totalItemCount,
     isLoading: isFetching,

client/src/app/pages/issues/issues-table.tsx

@@ -33,7 +33,7 @@ import { useSelectionState } from "@migtools/lib-ui";
 
 import { AppPlaceholder } from "@app/components/AppPlaceholder";
 import { OptionWithValue, SimpleSelect } from "@app/components/SimpleSelect";
-import { TablePersistenceKeyPrefix } from "@app/Constants";
+import { TablePersistenceKeyPrefix, UI_UNIQUE_ID } from "@app/Constants";
 import { useFetchIssueReports, useFetchRuleReports } from "@app/queries/issues";
 import {
   FilterType,
@@ -226,7 +226,7 @@ export const IssuesTable: React.FC<IIssuesTableProps> = ({ mode }) => {
 
   const tableControls = useTableControlProps({
     ...tableControlState, // Includes filterState, sortState and paginationState
-    idProperty: "_ui_unique_id",
+    idProperty: UI_UNIQUE_ID,
     currentPageItems: currentPageReports,
     totalItemCount: totalReportCount,
     isLoading,

client/src/app/pages/reports/components/donut/donut.tsx

@@ -10,6 +10,7 @@ import {
   StackItem,
   Text,
   TextContent,
+  TextVariants,
 } from "@patternfly/react-core";
 
 export interface IDonutProps {
@@ -31,6 +32,7 @@ export const Donut: React.FC<IDonutProps> = ({
   riskLabel,
   isAssessment,
   riskTitle,
+  riskDescription,
 }) => {
   const { t } = useTranslation();
 
@@ -63,6 +65,12 @@ export const Donut: React.FC<IDonutProps> = ({
       <StackItem style={{ width: "100%" }}>
         <TextContent className="pf-v5-u-text-align-center">
           <Text component="h3">{riskLabel}</Text>
+          <Text
+            component={TextVariants.small}
+            className="pf-v5-u-color-200 pf-v5-u-font-weight-light"
+          >
+            {riskDescription}
+          </Text>
         </TextContent>
       </StackItem>
     </Stack>

client/src/app/queries/assessments.ts

@@ -107,7 +107,7 @@ export const useUpdateAssessmentMutation = (
 };
 
 export const useDeleteAssessmentMutation = (
-  onSuccess?: (applicationName: string) => void,
+  onSuccess?: (name: string) => void,
   onError?: (err: AxiosError) => void
 ) => {
   const queryClient = useQueryClient();
@@ -117,6 +117,7 @@ export const useDeleteAssessmentMutation = (
       assessmentId: number;
       applicationName?: string;
       applicationId?: number;
+      archetypeName?: string;
       archetypeId?: number;
     }) => {
       const deletedAssessment = deleteAssessment(args.assessmentId);
@@ -138,7 +139,8 @@ export const useDeleteAssessmentMutation = (
       return deletedAssessment;
     },
     onSuccess: (_, args) => {
-      onSuccess && onSuccess(args?.applicationName || "Unknown");
+      onSuccess &&
+        onSuccess(args?.applicationName || args?.archetypeName || "Unknown");
     },
     onError: onError,
   });