MGMT-17013: Solving problems with icon's color that are incorrect in …

…Review&Create page (#2508) * Solving problems with icons color * Create our own Icon component * Using color property inside icon prop in UiIcon
openshift-assisted · Mar 1, 2024 · 3c90502 · 3c90502
1 parent 7c9bea1
commit 3c90502
Show file tree

Hide file tree

Showing 22 changed files with 105 additions and 168 deletions.
diff --git a/libs/ui-lib-tests/cypress/views/storagePage.ts b/libs/ui-lib-tests/cypress/views/storagePage.ts
@@ -52,7 +52,9 @@ export const storagePage = {
     //If a disk is skip formatting validate that warning icon is shown
     cy.get(`[data-testid="disk-row-${diskId}"] [data-testid="disk-name"]`).within(
       (/* $diskRow */) => {
-        cy.get('[role="img"]').should('have.attr', 'color', '#f0ab00');
+        cy.get('[role="img"]')
+          .parent()
+          .should('have.attr', 'class', 'pf-v5-c-icon__content pf-m-warning');
       },
     );
   },

diff --git a/libs/ui-lib/lib/cim/components/Agent/MinimalHWRequirements.tsx b/libs/ui-lib/lib/cim/components/Agent/MinimalHWRequirements.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { Button, ButtonVariant, Icon, Modal, ModalVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 
 import { ConfigMapK8sResource } from '../../types';
 import HostRequirements, {
   HostRequirementsListProps,
 } from '../../../common/components/hosts/HostRequirements';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { UiIcon } from '../../../common';
 
 type HostData = {
   cpu_cores: number;
@@ -77,9 +78,7 @@ const MinimalHWRequirements: React.FC<MinimalHWRequirementsProps> = ({
         isInline
         className="host-requirements-link"
       >
-        <Icon size="sm" status="warning">
-          <InfoCircleIcon />
-        </Icon>
+        <UiIcon size="sm" status="warning" icon={<InfoCircleIcon />} />
         &nbsp;{t('ai:Minimum hardware requirements')}
       </Button>
       <MinimalHWRequirementsModal

diff --git a/libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/ConditionsTable.tsx b/libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/ConditionsTable.tsx
@@ -1,4 +1,4 @@
-import { Flex, FlexItem, Icon } from '@patternfly/react-core';
+import { Flex, FlexItem } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
@@ -10,6 +10,7 @@ import * as React from 'react';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 
 import './ConditionsTable.css';
+import { UiIcon } from '../../../../common';
 
 const ignoredConditions = ['Progressing'];
 const reversedConditions = ['Degraded'];
@@ -56,9 +57,7 @@ const ConditionsTable = ({ conditions, isDone }: ConditionsTableProps) => {
                 icon = <CheckCircleIcon color={okColor.value} />;
               } else if (c.status === nokStatus) {
                 icon = isDone ? (
-                  <Icon size="sm" status="danger">
-                    <ExclamationCircleIcon />
-                  </Icon>
+                  <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
                 ) : (
                   <InProgressIcon />
                 );

diff --git a/libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/HostedClusterProgress.tsx b/libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/HostedClusterProgress.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   ExpandableSectionToggle,
-  Icon,
   ProgressStep,
   Spinner,
   Stack,
@@ -13,7 +12,7 @@ import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-cir
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { HostedClusterK8sResource } from '../types';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
-import { ExternalLink } from '../../../../common';
+import { ExternalLink, UiIcon } from '../../../../common';
 import ConditionsTable from './ConditionsTable';
 
 type HostedClusterProgressProps = {
@@ -37,9 +36,7 @@ const HostedClusterProgress = ({ hostedCluster, launchToOCP }: HostedClusterProg
       availableCondtion?.status === 'True' ? (
         <CheckCircleIcon color={okColor.value} />
       ) : (
-        <Icon size="sm" status="danger">
-          <ExclamationCircleIcon />
-        </Icon>
+        <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
       );
   }
 

diff --git a/libs/ui-lib/lib/common/components/clusterConfiguration/DiscoveryTroubleshootingModal.tsx b/libs/ui-lib/lib/common/components/clusterConfiguration/DiscoveryTroubleshootingModal.tsx
@@ -12,10 +12,9 @@ import {
   OrderType,
   HelperText,
   HelperTextItem,
-  Icon,
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { PrismCode, SimpleAIPrismTheme } from '../ui';
+import { PrismCode, SimpleAIPrismTheme, UiIcon } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 import { saveAs } from 'file-saver';
@@ -209,9 +208,7 @@ export const HostsNotShowingLink = ({
     <Button variant={ButtonVariant.link} onClick={() => setDiscoveryHintModalOpen(true)} isInline>
       {!isInline && (
         <>
-          <Icon size="sm">
-            <InfoCircleIcon />
-          </Icon>
+          <UiIcon size="sm" icon={<InfoCircleIcon />} />
           &nbsp;
         </>
       )}

diff --git a/libs/ui-lib/lib/common/components/clusterConfiguration/OpenShiftVersionSelect.tsx b/libs/ui-lib/lib/common/components/clusterConfiguration/OpenShiftVersionSelect.tsx
@@ -5,10 +5,9 @@ import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/exter
 
 import { OPENSHIFT_LIFE_CYCLE_DATES_LINK } from '../../config';
 import { OpenshiftVersionOptionType } from '../../types';
-import { SelectField } from '../ui';
+import { SelectField, UiIcon } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { SelectFieldProps } from '../ui/formik/types';
-import { Icon } from '@patternfly/react-core';
 
 const OpenShiftLifeCycleDatesLink = () => {
   const { t } = useTranslation();
@@ -26,9 +25,7 @@ const getOpenshiftVersionHelperText =
     if (!versions.length) {
       return (
         <>
-          <Icon size="sm" status="danger">
-            <ExclamationCircleIcon />
-          </Icon>
+          <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
           &nbsp; {t('ai:No release image is available.')}
         </>
       );
@@ -41,9 +38,7 @@ const getOpenshiftVersionHelperText =
     if (selectedVersion.supportLevel !== 'production') {
       return (
         <>
-          <Icon size="sm" status="warning">
-            <ExclamationTriangleIcon />
-          </Icon>
+          <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
           &nbsp;{t('ai:Please note that this version is not production-ready.')}&nbsp;
           <OpenShiftLifeCycleDatesLink />
         </>

diff --git a/libs/ui-lib/lib/common/components/clusterWizard/ReviewValidations.tsx b/libs/ui-lib/lib/common/components/clusterWizard/ReviewValidations.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import lodashValues from 'lodash-es/values.js';
-import { Button, ButtonVariant, Icon } from '@patternfly/react-core';
+import { Button, ButtonVariant } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
@@ -30,6 +30,7 @@ import {
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 import { getKeys, stringToJSON } from '../../utils';
+import { UiIcon } from '../ui';
 
 const AllValidationsPassed = () => {
   const { t } = useTranslation();
@@ -120,17 +121,9 @@ const FailingValidation = <S extends string>({
 
   let icon;
   if (severity === 'warning') {
-    icon = (
-      <Icon status="warning">
-        <ExclamationTriangleIcon />
-      </Icon>
-    );
+    icon = <UiIcon status="warning" icon={<ExclamationTriangleIcon />} />;
   } else {
-    icon = (
-      <Icon size="sm" status="danger">
-        <ExclamationCircleIcon />
-      </Icon>
-    );
+    icon = <UiIcon status="danger" icon={<ExclamationCircleIcon />} />;
   }
 
   return (

diff --git a/libs/ui-lib/lib/common/components/hosts/VMRebootConfigurationInfo.tsx b/libs/ui-lib/lib/common/components/hosts/VMRebootConfigurationInfo.tsx
@@ -2,15 +2,14 @@ import React from 'react';
 import {
   Button,
   ButtonVariant,
-  Icon,
   Popover,
   Text,
   TextContent,
   TextVariants,
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Trans } from 'react-i18next';
-import { PrismCode } from '../../../common/components/ui';
+import { PrismCode, UiIcon } from '../../../common/components/ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 export const VMRebootConfigurationContent = () => {
@@ -51,9 +50,7 @@ const VMRebootConfigurationInfo = () => {
       <Popover bodyContent={<VMRebootConfigurationContent />} minWidth="35rem">
         <Button variant={ButtonVariant.link} isInline>
           <>
-            <Icon size="sm">
-              <InfoCircleIcon />
-            </Icon>
+            <UiIcon size="sm" icon={<InfoCircleIcon />} />
             &nbsp;
           </>
           {t('ai:Check your VM reboot configuration')}

diff --git a/libs/ui-lib/lib/common/components/storage/DisksTable.tsx b/libs/ui-lib/lib/common/components/storage/DisksTable.tsx
@@ -6,7 +6,6 @@ import {
   Popover,
   Alert,
   AlertVariant,
-  Icon,
 } from '@patternfly/react-core';
 import { TableVariant, RowWrapperProps, RowWrapper, IRow } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
@@ -22,10 +21,9 @@ import FormatDiskCheckbox, {
   isInDiskSkipFormattingList,
 } from '../hosts/FormatDiskCheckbox';
 import { fileSize } from '../../utils';
-import { PopoverIcon } from '../ui';
+import { PopoverIcon, UiIcon } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 
 interface DisksTableProps extends WithTestID {
   canEditDisks?: (host: Host) => boolean;
@@ -117,9 +115,7 @@ const DiskName = ({
       {isIndented && <span style={{ width: '1rem', display: 'inline-block' }} />}
       {isInDiskSkipFormattingList(host, disk.id) && (
         <Popover bodyContent={<SkipFormattingDisk />} minWidth="20rem" maxWidth="30rem">
-          <Icon size="sm" status="warning">
-            <ExclamationTriangleIcon color={warningColor.value} />
-          </Icon>
+          <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
         </Popover>
       )}
       {'   '}
@@ -134,9 +130,7 @@ const DiskName = ({
             maxWidth="30rem"
             data-testid="disk-limitations-popover"
           >
-            <Icon size="sm" status="warning">
-              <ExclamationTriangleIcon color={warningColor.value} />
-            </Icon>
+            <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
           </Popover>
         </>
       )}

diff --git a/libs/ui-lib/lib/common/components/storage/StorageUtils.tsx b/libs/ui-lib/lib/common/components/storage/StorageUtils.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react';
 import { sortable } from '@patternfly/react-table';
 import { TFunction } from 'i18next';
-import { getHostRole, getInventory, RoleCell } from '../../index';
+import { getHostRole, getInventory, RoleCell, UiIcon } from '../../index';
 import { TableRow } from '../hosts/AITable';
-import { Icon, Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
-
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 
 const SkipFormattingDisks = () => (
@@ -54,9 +52,7 @@ export const numberOfDisksColumn: TableRow<Host> = {
           {'   '}
           {host.skipFormattingDisks && (
             <Popover bodyContent={<SkipFormattingDisks />} minWidth="20rem" maxWidth="30rem">
-              <Icon size="sm" status="warning">
-                <ExclamationTriangleIcon color={warningColor.value} />
-              </Icon>
+              <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
             </Popover>
           )}
         </>

diff --git a/libs/ui-lib/lib/common/components/ui/UiIcon.tsx b/libs/ui-lib/lib/common/components/ui/UiIcon.tsx
@@ -0,0 +1,21 @@
+import React, { ReactElement } from 'react';
+import { Icon, IconComponentProps } from '@patternfly/react-core';
+
+export type UiIconProps = {
+  size?: IconComponentProps['size'];
+  status?: IconComponentProps['status'] | undefined;
+  icon?: ReactElement;
+  className?: string;
+};
+
+const UiIcon: React.FC<UiIconProps> = (props) => {
+  return (
+    <>
+      <Icon size={props.size ? props.size : 'md'} status={props.status} className={props.className}>
+        {props.icon}
+      </Icon>
+    </>
+  );
+};
+
+export default UiIcon;
diff --git a/libs/ui-lib/lib/common/components/ui/WizardNavItem.tsx b/libs/ui-lib/lib/common/components/ui/WizardNavItem.tsx
@@ -1,8 +1,7 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { WizardNavItem, WizardNavItemProps } from '@patternfly/react-core/deprecated';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-
-import { Icon } from '@patternfly/react-core';
+import UiIcon from './UiIcon';
 
 const getNavItemContent = (
   content: ReactNode,
@@ -14,9 +13,11 @@ const getNavItemContent = (
     return (
       <>
         {content}
-        <Icon size="sm" status="danger" className="wizard-nav-item-warning-icon">
-          <ExclamationCircleIcon />
-        </Icon>
+        <UiIcon
+          status="danger"
+          className="wizard-nav-item-warning-icon"
+          icon={<ExclamationCircleIcon />}
+        />
       </>
     );
   }

diff --git a/libs/ui-lib/lib/common/components/ui/formik/RemovableField.tsx b/libs/ui-lib/lib/common/components/ui/formik/RemovableField.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { Button, ButtonVariant, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Button, ButtonVariant, Tooltip, TooltipProps } from '@patternfly/react-core';
 import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
 import './RemovableField.css';
 import classnames from 'classnames';
+import UiIcon from '../UiIcon';
 
 interface RemovableFieldProps {
   onRemove: VoidFunction;
@@ -33,9 +34,7 @@ const RemovableField: React.FC<RemovableFieldProps & Omit<TooltipProps, 'content
           onClick={onRemove}
           data-testid={removeButtonDataTestId}
         >
-          <Icon size="sm">
-            <MinusCircleIcon />
-          </Icon>
+          <UiIcon size="sm" icon={<MinusCircleIcon />} />
         </Button>
       }
       className={classnames('ai-remove-button__tooltip ', className)}

diff --git a/libs/ui-lib/lib/common/components/ui/index.ts b/libs/ui-lib/lib/common/components/ui/index.ts
@@ -25,3 +25,5 @@ export { default as ClusterEventsToolbar } from './ClusterEventsToolbar';
 export { default as ModalProgress } from './ModalProgress';
 export { default as ConfirmationModal } from './ConfirmationModal';
 export { default as NoPermissionsError } from './NoPermissionsError';
+
+export { default as UiIcon } from './UiIcon';
diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmOpenShiftVersionSelect.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmOpenShiftVersionSelect.tsx
@@ -5,9 +5,12 @@ import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/exter
 import { TFunction } from 'i18next';
 import { OpenShiftVersionDropdown } from '../../../common/components/ui/OpenShiftVersionDropdown';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { OPENSHIFT_LIFE_CYCLE_DATES_LINK, OpenshiftVersionOptionType } from '../../../common';
+import {
+  OPENSHIFT_LIFE_CYCLE_DATES_LINK,
+  UiIcon,
+  OpenshiftVersionOptionType,
+} from '../../../common';
 import { isInOcm } from '../../../common/api';
-import { Icon } from '@patternfly/react-core';
 
 const OpenShiftLifeCycleDatesLink = () => {
   const { t } = useTranslation();
@@ -26,10 +29,8 @@ const getOpenshiftVersionHelperText = (
   if (!versions.length) {
     return (
       <>
-        <Icon size="sm" status="danger">
-          <ExclamationCircleIcon />
-        </Icon>
-        &nbsp; {t('ai:No release image is available.')}
+        <UiIcon status="danger" size="sm" icon={<ExclamationCircleIcon />} />; &nbsp;{' '}
+        {t('ai:No release image is available.')}
       </>
     );
   }
@@ -42,10 +43,8 @@ const getOpenshiftVersionHelperText = (
   if (selectedVersion.supportLevel !== 'production') {
     return (
       <>
-        <Icon size="sm" status="warning">
-          <ExclamationTriangleIcon />
-        </Icon>
-        &nbsp;{t('ai:Please note that this version is not production-ready.')}&nbsp;
+        <UiIcon status="warning" icon={<ExclamationTriangleIcon />} />; &nbsp;
+        {t('ai:Please note that this version is not production-ready.')}&nbsp;
         <OpenShiftLifeCycleDatesLink />
       </>
     );