Rename component and refactor to use child components

konveyor · Sep 25, 2023 · 096fa6f · 096fa6f
1 parent 8ae3892
commit 096fa6f
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 40 deletions.
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
@@ -9,7 +9,6 @@ import {
   EmptyStateBody,
   EmptyStateIcon,
   List,
-  ListItem,
   MenuToggle,
   MenuToggleElement,
   Modal,
@@ -48,16 +47,15 @@ import { ConditionalTooltip } from "@app/components/ConditionalTooltip";
 import { useLocalTableControls } from "@app/hooks/table-controls";
 import { NotificationsContext } from "@app/components/NotificationsContext";
 import { formatPath, getAxiosErrorMessage } from "@app/utils/utils";
-import { Questionnaire, Thresholds } from "@app/api/models";
+import { Questionnaire } from "@app/api/models";
 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 utc from "dayjs/plugin/utc";
-
-dayjs.extend(utc);
+import { QuestionnaireQuestionsColumn } from "./components/questionnaire-questions-column";
+import { QuestionnaireThresholdsColumn } from "./components/questionnaire-thresholds-column";
 
 const AssessmentSettings: React.FC = () => {
   const { t } = useTranslation();
@@ -159,29 +157,6 @@ const AssessmentSettings: React.FC = () => {
   // TODO: Check RBAC access
   const rbacWriteAccess = true; // checkAccess(userScopes, questionnaireWriteScopes);
 
-  const calculateTotalQuestions = (obj: Questionnaire) => {
-    const totalQuestions = (obj.sections || []).reduce((total, section) => {
-      return total + (section.questions ? section.questions.length : 0);
-    }, 0);
-
-    return totalQuestions.toString();
-  };
-
-  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 (
     <>
       <PageSection variant={PageSectionVariants.light}>
@@ -318,14 +293,18 @@ const AssessmentSettings: React.FC = () => {
                             width={10}
                             {...getTdProps({ columnKey: "questions" })}
                           >
-                            {calculateTotalQuestions(questionnaire)}
+                            <QuestionnaireQuestionsColumn
+                              questionnaire={questionnaire}
+                            />
                           </Td>
                           <Td
                             width={15}
                             {...getTdProps({ columnKey: "rating" })}
                           >
                             <List isPlain>
-                              {thresholdsToListItems(questionnaire.thresholds)}
+                              <QuestionnaireThresholdsColumn
+                                questionnaire={questionnaire}
+                              />
                             </List>
                           </Td>
                           <Td

diff --git a/...tings/ExportQuestionnaireDropdownItem.tsx → ...ts/export-questionnaire-dropdown-item.tsx b/...tings/ExportQuestionnaireDropdownItem.tsx → ...ts/export-questionnaire-dropdown-item.tsx
diff --git a/...s/assessment-management/assessment-settings/components/questionnaire-questions-column.tsx b/...s/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/.../assessment-management/assessment-settings/components/questionnaire-thresholds-column.tsx b/.../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
@@ -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
@@ -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
@@ -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) => {