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 f099a5bfb..fb6f974dd 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 @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { useHistory } from "react-router-dom"; import { AxiosError } from "axios"; import { useTranslation, Trans } from "react-i18next"; - +import { IconedStatus } from "@app/shared/components"; import { Button, ButtonVariant, @@ -32,7 +32,6 @@ import { AppTableWithControls, ConditionalRender, NoDataEmptyState, - StatusIcon, KebabDropdown, ToolbarBulkSelector, ConfirmDialog, @@ -313,10 +312,8 @@ export const ApplicationsTable: React.FC = () => { ), }, { - title: item.review ? ( - - ) : ( - + title: ( + ), }, { diff --git a/client/src/app/pages/applications/components/application-analysis-status.tsx b/client/src/app/pages/applications/components/application-analysis-status.tsx index ec6f8bb2f..0ca60e583 100644 --- a/client/src/app/pages/applications/components/application-analysis-status.tsx +++ b/client/src/app/pages/applications/components/application-analysis-status.tsx @@ -1,7 +1,7 @@ import React from "react"; import { TaskState } from "@app/api/models"; -import { StatusIcon } from "@app/shared/components"; +import { IconedStatus } from "@app/shared/components"; export interface ApplicationAnalysisStatusProps { state: TaskState; @@ -39,5 +39,5 @@ export const ApplicationAnalysisStatus: React.FC< return "NotStarted"; }; - return ; + return ; }; diff --git a/client/src/app/pages/applications/components/application-assessment-status/application-assessment-status.tsx b/client/src/app/pages/applications/components/application-assessment-status/application-assessment-status.tsx index 13eff6403..58be4ea18 100644 --- a/client/src/app/pages/applications/components/application-assessment-status/application-assessment-status.tsx +++ b/client/src/app/pages/applications/components/application-assessment-status/application-assessment-status.tsx @@ -4,8 +4,8 @@ import { useTranslation } from "react-i18next"; import { EmptyTextMessage, - StatusIcon, - StatusIconType, + IconedStatus, + IconedStatusPreset, } from "@app/shared/components"; import { Assessment } from "@app/api/models"; import { Spinner } from "@patternfly/react-core"; @@ -16,7 +16,7 @@ export interface ApplicationAssessmentStatusProps { fetchError?: AxiosError; } -const getStatusIconFrom = (assessment: Assessment): StatusIconType => { +const getStatusIconFrom = (assessment: Assessment): IconedStatusPreset => { switch (assessment.status) { case "EMPTY": return "NotStarted"; @@ -42,8 +42,8 @@ export const ApplicationAssessmentStatus: React.FC< } return assessment ? ( - + ) : ( - + ); }; diff --git a/client/src/app/pages/applications/components/bulk-copy-assessment-review-form/bulk-copy-assessment-review-form.tsx b/client/src/app/pages/applications/components/bulk-copy-assessment-review-form/bulk-copy-assessment-review-form.tsx index 03da3097f..79f1800a2 100644 --- a/client/src/app/pages/applications/components/bulk-copy-assessment-review-form/bulk-copy-assessment-review-form.tsx +++ b/client/src/app/pages/applications/components/bulk-copy-assessment-review-form/bulk-copy-assessment-review-form.tsx @@ -24,7 +24,7 @@ import { global_palette_gold_400 as gold } from "@patternfly/react-tokens"; import { AppTableWithControls, - StatusIcon, + IconedStatus, ToolbarBulkSelector, } from "@app/shared/components"; @@ -252,9 +252,9 @@ export const BulkCopyAssessmentReviewForm: React.FC< }, { title: app.review ? ( - + ) : ( - + ), }, ], 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 ff9194851..ad1eecd57 100644 --- a/client/src/app/pages/applications/manage-imports/manage-imports.tsx +++ b/client/src/app/pages/applications/manage-imports/manage-imports.tsx @@ -1,12 +1,10 @@ import React, { useState } from "react"; import { useHistory } from "react-router-dom"; import { useTranslation } from "react-i18next"; -import { StatusIcon } from "@app/shared/components"; +import { IconedStatus } from "@app/shared/components"; import { Button, ButtonVariant, - Flex, - FlexItem, Modal, PageSection, Popover, @@ -24,8 +22,6 @@ import { sortable, truncate, } from "@patternfly/react-table"; -import InProgressIcon from "@patternfly/react-icons/dist/esm/icons/in-progress-icon"; - import { AppPlaceholder, AppTableWithControls, @@ -37,11 +33,10 @@ import { import { formatPath, Paths } from "@app/Paths"; import { ApplicationImportSummary } from "@app/api/models"; -import { formatDate, getAxiosErrorMessage } from "@app/utils/utils"; +import { formatDate } from "@app/utils/utils"; import { ImportApplicationsForm } from "../components/import-applications-form"; import { useLegacyPaginationState } from "@app/shared/hooks/useLegacyPaginationState"; -import { AxiosError } from "axios"; import { useDeleteImportSummaryMutation, useFetchImportSummaries, @@ -187,25 +182,13 @@ export const ManageImports: React.FC = () => { currentPageItems.forEach((item) => { let status; if (item.importStatus === "Completed") { - status = ; + status = ; } else if (item.importStatus === "In Progress") { - status = ( - - - - - {t("terms.inProgress")} - - ); + status = ; } else { status = ( - { return ( <> - ; +}; + +export interface IIconedStatusProps { + preset?: IconedStatusPreset; + status?: IconedStatusStatusType; + icon?: React.ReactNode; + className?: string; + label?: React.ReactNode | string; +} + +export const IconedStatus: React.FC = ({ + preset, + status, + icon, + className = "", + label, +}: IIconedStatusProps) => { + const { t } = useTranslation(); + const presets: IconedStatusPresetType = { + Canceled: { + icon: , + status: "info", + label: t("terms.canceled"), + }, + Completed: { + icon: , + status: "success", + label: t("terms.completed"), + }, + Error: { + icon: , + status: "danger", + label: t("terms.error"), + }, + Failed: { + icon: , + status: "danger", + label: t("terms.failed"), + }, + InProgress: { + icon: , + status: "info", + label: t("terms.inProgress"), + }, + NotStarted: { + icon: , + label: t("terms.notStarted"), + }, + Ok: { + icon: , + status: "success", + }, + Scheduled: { + icon: , + status: "info", + label: t("terms.scheduled"), + }, + Unknown: { + icon: , + }, + }; + const presetProps = preset && presets[preset]; + + return ( + + + + {icon || presetProps?.icon || } + + + {label || presetProps?.label} + + ); +}; diff --git a/client/src/app/shared/components/iconed-status/index.ts b/client/src/app/shared/components/iconed-status/index.ts new file mode 100644 index 000000000..8b4eb03ba --- /dev/null +++ b/client/src/app/shared/components/iconed-status/index.ts @@ -0,0 +1 @@ +export * from "./iconed-status"; diff --git a/client/src/app/shared/components/status-icon/tests/__snapshots__/status-icon.test.tsx.snap b/client/src/app/shared/components/iconed-status/tests/__snapshots__/status-icon.test.tsx.snap similarity index 72% rename from client/src/app/shared/components/status-icon/tests/__snapshots__/status-icon.test.tsx.snap rename to client/src/app/shared/components/iconed-status/tests/__snapshots__/status-icon.test.tsx.snap index f05f1e085..4a5443690 100644 --- a/client/src/app/shared/components/status-icon/tests/__snapshots__/status-icon.test.tsx.snap +++ b/client/src/app/shared/components/iconed-status/tests/__snapshots__/status-icon.test.tsx.snap @@ -6,29 +6,51 @@ exports[`StatusIcon Renders without crashing 1`] = ` "baseElement":
- - - terms.notStarted +
+ + + + + +
+
+ terms.notStarted +
, "container":
- - - terms.notStarted +
+ + + + + +
+
+ terms.notStarted +
, "debug": [Function], diff --git a/client/src/app/shared/components/status-icon/tests/status-icon.test.tsx b/client/src/app/shared/components/iconed-status/tests/status-icon.test.tsx similarity index 63% rename from client/src/app/shared/components/status-icon/tests/status-icon.test.tsx rename to client/src/app/shared/components/iconed-status/tests/status-icon.test.tsx index 615454683..d96a227bb 100644 --- a/client/src/app/shared/components/status-icon/tests/status-icon.test.tsx +++ b/client/src/app/shared/components/iconed-status/tests/status-icon.test.tsx @@ -1,10 +1,10 @@ import { render } from "@app/test-config/test-utils"; import React from "react"; -import { StatusIcon } from "../status-icon"; +import { IconedStatus } from "../iconed-status"; describe("StatusIcon", () => { it("Renders without crashing", () => { - const wrapper = render(); + const wrapper = render(); expect(wrapper).toMatchSnapshot(); }); }); diff --git a/client/src/app/shared/components/index.ts b/client/src/app/shared/components/index.ts index 85f34137f..3adc16e64 100644 --- a/client/src/app/shared/components/index.ts +++ b/client/src/app/shared/components/index.ts @@ -13,5 +13,5 @@ export { ProposedActionLabel } from "./proposed-action-label"; export { RiskLabel } from "./risk-label"; export { SimpleEmptyState } from "./simple-empty-state"; export * from "./simple-select"; -export * from "./status-icon"; +export * from "./iconed-status"; export { ToolbarBulkSelector } from "./toolbar-bulk-selector"; diff --git a/client/src/app/shared/components/status-icon/index.ts b/client/src/app/shared/components/status-icon/index.ts deleted file mode 100644 index 1f89f164e..000000000 --- a/client/src/app/shared/components/status-icon/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./status-icon"; diff --git a/client/src/app/shared/components/status-icon/status-icon.tsx b/client/src/app/shared/components/status-icon/status-icon.tsx deleted file mode 100644 index d2955ff20..000000000 --- a/client/src/app/shared/components/status-icon/status-icon.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import React from "react"; -import { useTranslation } from "react-i18next"; -import { - Flex, - FlexItem, - SpinnerProps, - TextContent, -} from "@patternfly/react-core"; -import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon"; -import TimesCircleIcon from "@patternfly/react-icons/dist/esm/icons/times-circle-icon"; -import InProgressIcon from "@patternfly/react-icons/dist/esm/icons/in-progress-icon"; -import { SVGIconProps } from "@patternfly/react-icons/dist/js/createIcon"; -import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon"; -import UnknownIcon from "@patternfly/react-icons/dist/esm/icons/unknown-icon"; -import { - global_disabled_color_200 as disabledColor, - global_success_color_100 as successColor, - global_Color_dark_200 as unknownColor, - global_info_color_200 as loadingColor, - global_danger_color_100 as errorColor, - global_info_color_100 as infoColor, -} from "@patternfly/react-tokens"; - -export type StatusIconType = - | "Canceled" - | "Completed" - | "Error" - | "Failed" - | "InProgress" - | "NotStarted" - | "Ok" - | "Scheduled" - | "Unknown"; - -type IconListType = { - [key in StatusIconType]: { - Icon: React.ComponentClass | React.FC; - color: { name: string; value: string; var: string }; - }; -}; -const iconList: IconListType = { - Canceled: { - Icon: TimesCircleIcon, - color: infoColor, - }, - Completed: { - Icon: CheckCircleIcon, - color: successColor, - }, - Error: { - Icon: ExclamationCircleIcon, - color: errorColor, - }, - Failed: { - Icon: ExclamationCircleIcon, - color: errorColor, - }, - InProgress: { - Icon: InProgressIcon, - color: loadingColor, - }, - NotStarted: { - Icon: TimesCircleIcon, - color: unknownColor, - }, - Ok: { - Icon: CheckCircleIcon, - color: successColor, - }, - Scheduled: { - Icon: InProgressIcon, - color: infoColor, - }, - Unknown: { - Icon: UnknownIcon, - color: unknownColor, - }, -}; - -export interface IStatusIconProps { - status: StatusIconType; - isDisabled?: boolean; - className?: string; - label?: React.ReactNode | string; -} - -export const StatusIcon: React.FC = ({ - status, - isDisabled = false, - className = "", - label, -}: IStatusIconProps) => { - const { t } = useTranslation(); - - const Icon = iconList[status].Icon; - const icon = ( - - ); - - if (!label) { - switch (status) { - case "Canceled": - label = t("terms.canceled"); - break; - case "Completed": - label = t("terms.completed"); - break; - case "Error": - label = t("terms.error"); - break; - case "Failed": - label = t("terms.failed"); - break; - case "InProgress": - label = t("terms.inProgress"); - break; - case "NotStarted": - label = t("terms.notStarted"); - break; - case "Scheduled": - label = t("terms.scheduled"); - break; - default: - label = t("terms.unknown"); - break; - } - } - - return ( - - {icon} {label} - - ); -};