Take/retake flow for assessments

Share questions and answers tables Hide answer key in assessment review screen Nav back to assessment actions after assessment Signed-off-by: ibolton336 <ibolton@redhat.com>
konveyor · Sep 5, 2023 · dd8b2f4 · dd8b2f4
1 parent c3fbffc
commit dd8b2f4
Show file tree

Hide file tree

Showing 21 changed files with 945 additions and 119 deletions.
diff --git a/client/src/app/Paths.ts b/client/src/app/Paths.ts
@@ -20,6 +20,7 @@ export enum Paths {
   applicationsImportsDetails = "/applications/application-imports/:importId",
   applicationsAssessment = "/applications/assessment/:assessmentId",
   assessmentActions = "/applications/assessment-actions/:applicationId",
+  assessmentSummary = "/applications/assessment-summary/:assessmentId",
   applicationsReview = "/applications/application/:applicationId/review",
   applicationsAnalysis = "/applications/analysis",
   archetypes = "/archetypes",
@@ -50,7 +51,7 @@ export enum Paths {
   proxies = "/proxies",
   migrationTargets = "/migration-targets",
   assessment = "/assessment",
-  questionnaire = "/questionnaire",
+  questionnaire = "/questionnaire/:questionnaireId",
   jira = "/jira",
 }
 

diff --git a/client/src/app/Routes.tsx b/client/src/app/Routes.tsx
@@ -40,15 +40,23 @@ const AssessmentSettings = lazy(
       "./pages/assessment-management/assessment-settings/assessment-settings-page"
     )
 );
+
 const Questionnaire = lazy(
   () => import("./pages/assessment-management/questionnaire/questionnaire-page")
 );
+
 const AssessmentActions = lazy(
   () =>
     import("./pages/applications/assessment-actions/assessment-actions-page")
 );
 const Archetypes = lazy(() => import("./pages/archetypes/archetypes-page"));
 
+const AssessmentSummary = lazy(
+  () =>
+    import(
+      "./pages/applications/application-assessment/components/assessment-summary/assessment-summary-page"
+    )
+);
 export interface IRoute {
   path: string;
   comp: React.ComponentType<any>;
@@ -77,7 +85,11 @@ export const devRoutes: IRoute[] = [
     comp: AssessmentActions,
     exact: false,
   },
-
+  {
+    path: Paths.assessmentSummary,
+    comp: AssessmentSummary,
+    exact: false,
+  },
   {
     path: Paths.applicationsReview,
     comp: Reviews,

diff --git a/client/src/app/api/models.ts b/client/src/app/api/models.ts
@@ -122,6 +122,7 @@ export interface Application {
   binary?: string;
   migrationWave: Ref | null;
   assessments?: Ref[];
+  assessed?: boolean;
 }
 
 export interface Review {

diff --git a/client/src/app/api/rest.ts b/client/src/app/api/rest.ts
@@ -237,6 +237,14 @@ export const getAssessments = (filters: {
     .then((response) => response.data);
 };
 
+export const getAssessmentsByAppId = (
+  applicationId?: number
+): Promise<Assessment[]> => {
+  return axios
+    .get(`${APPLICATIONS}/${applicationId}/assessments`)
+    .then((response) => response.data);
+};
+
 export const createAssessment = (
   obj: InitialAssessment
 ): Promise<Assessment> => {

diff --git a/...questionnaire/components/answer-table.tsx → .../components/answer-table/answer-table.tsx b/...questionnaire/components/answer-table.tsx → .../components/answer-table/answer-table.tsx
@@ -15,16 +15,23 @@ import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 import { IconedStatus } from "@app/components/IconedStatus";
 import { TimesCircleIcon } from "@patternfly/react-icons";
 import { WarningTriangleIcon } from "@patternfly/react-icons";
+
 export interface IAnswerTableProps {
   answers: Answer[];
+  hideAnswerKey?: boolean;
 }
 
-const AnswerTable: React.FC<IAnswerTableProps> = ({ answers }) => {
+const AnswerTable: React.FC<IAnswerTableProps> = ({
+  answers,
+  hideAnswerKey,
+}) => {
   const { t } = useTranslation();
 
   const tableControls = useLocalTableControls({
     idProperty: "text",
-    items: answers,
+    items: hideAnswerKey
+      ? answers.filter((answer) => answer.selected)
+      : answers,
     columnNames: {
       choice: "Answer choice",
       weight: "Weight",
@@ -99,10 +106,10 @@ const AnswerTable: React.FC<IAnswerTableProps> = ({ answers }) => {
                         >
                           Tags to be applied:
                         </Text>
-                        {answer?.autoAnswerFor?.map((tag: any) => {
+                        {answer?.autoAnswerFor?.map((tag, index) => {
                           return (
-                            <div style={{ flex: "0 0 6em" }}>
-                              <Label color="grey">{tag.tag}</Label>
+                            <div key={index} style={{ flex: "0 0 6em" }}>
+                              <Label color="grey">{tag.tag.name}</Label>
                             </div>
                           );
                         })}

diff --git a/...stionnaire/components/questions-table.tsx → ...nents/questions-table/questions-table.tsx b/...stionnaire/components/questions-table.tsx → ...nents/questions-table/questions-table.tsx
@@ -15,24 +15,26 @@ import {
 } from "@app/components/TableControls";
 import { useTranslation } from "react-i18next";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
-import { Assessment, Question } from "@app/api/models";
+import { Assessment, Question, Questionnaire } from "@app/api/models";
 import { useLocalTableControls } from "@app/hooks/table-controls";
 import { Label } from "@patternfly/react-core";
-import AnswerTable from "./answer-table";
 import { NoDataEmptyState } from "@app/components/NoDataEmptyState";
+import AnswerTable from "@app/components/answer-table/answer-table";
 
 const QuestionsTable: React.FC<{
   fetchError?: Error;
   questions?: Question[];
   isSearching?: boolean;
-  assessmentData?: Assessment | null;
+  data?: Assessment | Questionnaire | null;
   isAllQuestionsTab?: boolean;
+  hideAnswerKey?: boolean;
 }> = ({
   fetchError,
   questions,
   isSearching = false,
-  assessmentData,
+  data,
   isAllQuestionsTab = false,
+  hideAnswerKey,
 }) => {
   const tableControls = useLocalTableControls({
     idProperty: "text",
@@ -90,7 +92,7 @@ const QuestionsTable: React.FC<{
         <Tbody>
           {currentPageItems?.map((question, rowIndex) => {
             const sectionName =
-              assessmentData?.sections.find((section) =>
+              data?.sections.find((section) =>
                 section.questions.includes(question)
               )?.name || "";
             return (
@@ -127,7 +129,10 @@ const QuestionsTable: React.FC<{
                     >
                       <ExpandableRowContent>
                         {question.explanation}
-                        <AnswerTable answers={question.answers} />
+                        <AnswerTable
+                          hideAnswerKey={hideAnswerKey}
+                          answers={question.answers}
+                        />
                       </ExpandableRowContent>
                     </Td>
                   </Tr>

diff --git a/client/src/app/pages/applications/application-assessment/application-assessment.tsx b/client/src/app/pages/applications/application-assessment/application-assessment.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { AxiosError } from "axios";
@@ -8,25 +8,21 @@ import {
   Bullseye,
 } from "@patternfly/react-core";
 import BanIcon from "@patternfly/react-icons/dist/esm/icons/ban-icon";
-import yaml from "js-yaml";
-
 import { AssessmentRoute } from "@app/Paths";
-import { Assessment } from "@app/api/models";
-import { getAssessmentById } from "@app/api/rest";
 import { getAxiosErrorMessage } from "@app/utils/utils";
 import { ApplicationAssessmentPage } from "./components/application-assessment-page";
 import { ApplicationAssessmentWizard } from "./components/application-assessment-wizard";
 import { SimpleEmptyState } from "@app/components/SimpleEmptyState";
 import { ConditionalRender } from "@app/components/ConditionalRender";
 import { AppPlaceholder } from "@app/components/AppPlaceholder";
-import { useFetchAssessmentByID } from "@app/queries/assessments";
+import { useFetchAssessmentById } from "@app/queries/assessments";
 
 export const ApplicationAssessment: React.FC = () => {
   const { t } = useTranslation();
 
   const { assessmentId } = useParams<AssessmentRoute>();
   const { assessment, isFetching, fetchError } =
-    useFetchAssessmentByID(assessmentId);
+    useFetchAssessmentById(assessmentId);
 
   const [saveError, setSaveError] = useState<AxiosError>();
 

diff --git a/...ion-assessment/components/application-assessment-wizard/application-assessment-wizard.tsx b/...ion-assessment/components/application-assessment-wizard/application-assessment-wizard.tsx
@@ -229,7 +229,12 @@ export const ApplicationAssessmentWizard: React.FC<
       .then(() => {
         switch (saveAction) {
           case SAVE_ACTION_VALUE.SAVE:
-            history.push(Paths.applications);
+            history.push(
+              formatPath(Paths.assessmentActions, {
+                applicationId: assessment?.application?.id,
+              })
+            );
+
             break;
           case SAVE_ACTION_VALUE.SAVE_AND_REVIEW:
             assessment?.application?.id &&

diff --git a/...ications/application-assessment/components/assessment-summary/assessment-summary-page.css b/...ications/application-assessment/components/assessment-summary/assessment-summary-page.css
@@ -0,0 +1,11 @@
+.tabs-vertical-container {
+  display: flex;
+}
+
+.tabs-vertical-container .pf-v5-c-tabs {
+  width: 20%;
+}
+
+.tabs-vertical-container .pf-v5-c-tab-content {
+  width: 80%;
+}