@openshift-assisted/ui-lib 2.17.3-cim → 2.17.4-cim

package/lib/ocm/components/clusters/ClusterStatus.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { FileAltIcon } from '@patternfly/react-icons/dist/js/icons/file-alt-icon';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { BanIcon } from '@patternfly/react-icons/dist/js/icons/ban-icon';
-import { clusterStatusLabels, UiIcon, WithTestID } from '../../../common';
+import { clusterStatusLabels, WithTestID } from '../../../common';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { Icon } from '@patternfly/react-core';
 
 type ClusterStatusProps = {
   status: Cluster['status'];
@@ -24,25 +24,47 @@ type ClusterStatusIconProps = {
 export const ClusterStatusIcon: React.FC<ClusterStatusIconProps> = ({ status, ...extraProps }) => {
   switch (status) {
     case 'cancelled':
-      return <UiIcon size="sm" icon={<BanIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm">
+          <BanIcon {...extraProps} />
+        </Icon>
+      );
     case 'insufficient':
     case 'pending-for-input':
     case 'ready':
-      return <UiIcon size="sm" icon={<FileAltIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm">
+          <FileAltIcon {...extraProps} />
+        </Icon>
+      );
     case 'error':
-      return <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm" status="danger">
+          <ExclamationCircleIcon {...extraProps} />
+        </Icon>
+      );
     case 'installed':
-      return <UiIcon size="sm" icon={<CheckCircleIcon color={okColor.value} {...extraProps} />} />;
+      return (
+        <Icon status="success" size="sm">
+          <CheckCircleIcon {...extraProps} />
+        </Icon>
+      );
     case 'installing-pending-user-action':
       return (
-        <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon {...extraProps} />} />
+        <Icon size="sm" status="warning">
+          <ExclamationTriangleIcon {...extraProps} />
+        </Icon>
       );
 
     case 'preparing-for-installation':
     case 'installing':
     case 'finalizing':
     case 'adding-hosts':
-      return <UiIcon size="sm" icon={<InProgressIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm">
+          <InProgressIcon {...extraProps} />
+        </Icon>
+      );
     default:
       return <></>;
   }

package/lib/ocm/components/featureSupportLevels/ReviewClusterFeatureSupportLevels.tsx

@@ -1,9 +1,7 @@
+import React from 'react';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import React from 'react';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { t_global_color_status_info_100 as infoColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_info_100';
-import { Content } from '@patternfly/react-core';
+import { Content, Icon } from '@patternfly/react-core';
 import {
   FeatureId,
   FeatureIdToSupportLevel,
@@ -13,7 +11,7 @@ import {
 import { TECH_SUPPORT_LEVEL_LINK } from '../../../common/config/docs_links';
 import ExternalLink from '../../../common/components/ui/ExternalLink';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { DetailItem, UiIcon } from '../../../common';
+import { DetailItem } from '../../../common';
 import { getLimitedFeatureSupportLevels } from '../../../common/components/newFeatureSupportLevels/utils';
 import { WithErrorBoundary } from '../../../common/components/ErrorHandling/WithErrorBoundary';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -90,13 +88,17 @@ export const LimitedSupportedCluster = ({
   <>
     {showVersionWarning && (
       <Content component="p">
-        <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.var} />} />
+        <Icon status="info" size="sm">
+          <InfoCircleIcon />
+        </Icon>
         &nbsp;The installed OpenShift version is not production-ready
       </Content>
     )}
     {Object.keys(clusterFeatureSupportLevels).length > 0 && (
       <>
-        <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.var} />} />
+        <Icon status="info" size="sm">
+          <InfoCircleIcon />
+        </Icon>
         &nbsp;Your cluster will be subject to support limitations because it includes:
         <Content component="ul">{getPreviewFeatureList(clusterFeatureSupportLevels)}</Content>
       </>
@@ -106,7 +108,9 @@ export const LimitedSupportedCluster = ({
 
 export const FullySupportedCluster = () => (
   <>
-    <CheckCircleIcon color={okColor.value} />
+    <Icon status="success">
+      <CheckCircleIcon />
+    </Icon>
     &nbsp;Your installed cluster will be fully supported
   </>
 );

package/lib/ocm/components/ui/InfoLinkWithModal.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Button,
   ButtonVariant,
+  Icon,
   IconComponentProps,
   Modal,
   ModalBody,
@@ -10,7 +11,6 @@ import {
   ModalProps,
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { UiIcon } from '../../../common';
 
 export interface InfoLinkWithModalProps {
   linkText: string;
@@ -43,7 +43,9 @@ const InfoLinkWithModal = ({
       <Button id={linkId} variant={ButtonVariant.link} onClick={handleLinkClick} isInline>
         {!isInline && (
           <>
-            <UiIcon size={infoCircleSize} icon={<InfoCircleIcon />} />
+            <Icon size={infoCircleSize}>
+              <InfoCircleIcon />
+            </Icon>
             &nbsp;
           </>
         )}

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.17.3-cim",
-    "@openshift-assisted/types": "2.17.3-cim",
+    "@openshift-assisted/locales": "2.17.4-cim",
+    "@openshift-assisted/types": "2.17.4-cim",
     "@openshift-console/dynamic-plugin-sdk": "1.0.0",
     "@patternfly/patternfly": "6.2.3",
     "@patternfly/react-code-editor": "6.2.2",
@@ -140,5 +140,5 @@
       ]
     }
   },
-  "version": "2.17.3-cim"
+  "version": "2.17.4-cim"
 }

package/build/@types/common/components/ui/UiIcon.d.ts

@@ -1,11 +0,0 @@
-import React, { ReactElement } from 'react';
-import { IconComponentProps } from '@patternfly/react-core';
-export type UiIconProps = {
-    size?: IconComponentProps['size'];
-    status?: IconComponentProps['status'] | undefined;
-    icon?: ReactElement;
-    className?: string;
-};
-declare const UiIcon: React.FC<UiIconProps>;
-export default UiIcon;
-//# sourceMappingURL=UiIcon.d.ts.map

package/build/@types/common/components/ui/UiIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UiIcon.d.ts","sourceRoot":"","sources":["../../../../../lib/common/components/ui/UiIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAQ,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAElE,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IAClD,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAQjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/cjs/common/components/ui/UiIcon.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const react_core_1 = require("@patternfly/react-core");
-const UiIcon = (props) => {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_core_1.Icon, { size: props.size ? props.size : 'md', status: props.status, className: props.className }, props.icon)));
-};
-exports.default = UiIcon;
-//# sourceMappingURL=UiIcon.js.map

package/build/cjs/common/components/ui/UiIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UiIcon.js","sourceRoot":"","sources":["../../../../../lib/common/components/ui/UiIcon.tsx"],"names":[],"mappings":";;;AAAA,0DAA4C;AAC5C,uDAAkE;AASlE,MAAM,MAAM,GAA0B,CAAC,KAAK,EAAE,EAAE;IAC9C,OAAO,CACL;QACE,8BAAC,iBAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,IACzF,KAAK,CAAC,IAAI,CACN,CACN,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,MAAM,CAAC"}

package/lib/common/components/ui/UiIcon.tsx

@@ -1,21 +0,0 @@
-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;