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

package/lib/common/components/storage/DisksTable.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { Content, ContentVariants, Popover, Alert, AlertVariant } from '@patternfly/react-core';
+import {
+  Content,
+  ContentVariants,
+  Popover,
+  Alert,
+  AlertVariant,
+  Icon,
+} from '@patternfly/react-core';
 import { TableVariant, Thead, Tbody, Table, Th, Tr, Td } from '@patternfly/react-table';
 import type { Disk, Host } from '@openshift-assisted/types/assisted-installer-service';
 import type { WithTestID } from '../../types/index';
@@ -12,7 +19,7 @@ import FormatDiskCheckbox, {
   isInDiskSkipFormattingList,
 } from '../hosts/FormatDiskCheckbox';
 import { fileSize } from '../../utils';
-import { PopoverIcon, UiIcon } from '../ui';
+import { PopoverIcon } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 
@@ -100,7 +107,9 @@ const DiskName = ({
       {isIndented && <span style={{ width: '1rem', display: 'inline-block' }} />}
       {isInDiskSkipFormattingList(host, disk.id) && (
         <Popover bodyContent={<SkipFormattingDisk />} minWidth="20rem" maxWidth="30rem">
-          <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+          <Icon size="sm" status="warning">
+            <ExclamationTriangleIcon />
+          </Icon>
         </Popover>
       )}
       {'   '}
@@ -115,7 +124,9 @@ const DiskName = ({
             maxWidth="30rem"
             data-testid="disk-limitations-popover"
           >
-            <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+            <Icon size="sm" status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
           </Popover>
         </>
       )}

package/lib/common/components/storage/StorageUtils.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { TFunction } from 'i18next';
-import { getHostRole, getInventory, RoleCell, UiIcon } from '../../index';
-import { TableRow } from '../hosts/AITable';
-import { Popover, Content, ContentVariants } from '@patternfly/react-core';
+import { Popover, Content, ContentVariants, Icon } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { getHostRole, getInventory, RoleCell } from '../../index';
+import { TableRow } from '../hosts/AITable';
 
 const SkipFormattingDisks = () => (
   <Content component={ContentVariants.p}>Some bootable disks will skip formatting</Content>
@@ -49,7 +49,9 @@ export const numberOfDisksColumn: TableRow<Host> = {
           {'   '}
           {host.skipFormattingDisks && (
             <Popover bodyContent={<SkipFormattingDisks />} minWidth="20rem" maxWidth="30rem">
-              <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+              <Icon size="sm" status="warning">
+                <ExclamationTriangleIcon />
+              </Icon>
             </Popover>
           )}
         </>

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

@@ -1,7 +1,6 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
-import { WizardNavItem, WizardNavItemProps } from '@patternfly/react-core';
+import { Icon, WizardNavItem, WizardNavItemProps } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import UiIcon from './UiIcon';
 
 const getNavItemContent = (
   content: ReactNode,
@@ -13,11 +12,9 @@ const getNavItemContent = (
     return (
       <>
         {content}
-        <UiIcon
-          status="danger"
-          className="wizard-nav-item-warning-icon"
-          icon={<ExclamationCircleIcon />}
-        />
+        <Icon status="danger" className="wizard-nav-item-warning-icon">
+          <ExclamationCircleIcon />
+        </Icon>
       </>
     );
   }

package/lib/common/components/ui/formik/RemovableField.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Button, ButtonVariant, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Button, ButtonVariant, Icon, 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';
+
+import './RemovableField.css';
 
 interface RemovableFieldProps {
   onRemove: VoidFunction;
@@ -30,7 +30,11 @@ const RemovableField: React.FC<RemovableFieldProps & Omit<TooltipProps, 'content
       distance={0}
       content={
         <Button
-          icon={<UiIcon size="sm" icon={<MinusCircleIcon />} />}
+          icon={
+            <Icon size="sm">
+              <MinusCircleIcon />
+            </Icon>
+          }
           variant={ButtonVariant.plain}
           onClick={onRemove}
           data-testid={removeButtonDataTestId}

package/lib/common/components/ui/formik/RichInputField.tsx

@@ -15,15 +15,13 @@ import {
   FormHelperText,
   HelperText,
   ButtonVariant,
+  Icon,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { CheckIcon } from '@patternfly/react-icons/dist/js/icons/check-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { TimesIcon } from '@patternfly/react-icons/dist/js/icons/times-icon';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
 
 import { InputFieldProps as BaseInputProps } from './types';
 import { getFieldId } from './utils';
@@ -164,11 +162,17 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
               <Button
                 icon={
                   !isValid ? (
-                    <ExclamationCircleIcon color={dangerColor.value} />
+                    <Icon status="danger">
+                      <ExclamationCircleIcon />
+                    </Icon>
                   ) : value ? (
-                    <CheckCircleIcon color={okColor.value} />
+                    <Icon status="success">
+                      <CheckCircleIcon />
+                    </Icon>
                   ) : (
-                    <InfoCircleIcon color={blueInfoColor.value} />
+                    <Icon status="info">
+                      <InfoCircleIcon />
+                    </Icon>
                   )
                 }
                 variant={ButtonVariant.control}

package/lib/common/components/ui/formik/index.tsx

@@ -21,6 +21,4 @@ export { default as SelectFieldWithSearch } from './SelectFieldWithSearch';
 
 export * from './utils';
 export * from './PullSecretField';
-export * from './validationSchemas';
 export * from './LabelField';
-export * from './constants';

package/lib/common/components/ui/index.ts

@@ -28,5 +28,3 @@ 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';

package/lib/common/config/docs_links.ts

@@ -1,6 +1,6 @@
 import { isMajorMinorVersionEqualOrGreater } from '../utils';
 
-const LATEST_OPENSHIFT_DOCS_VERSION = '4.19';
+const LATEST_OPENSHIFT_DOCS_VERSION = '4.21';
 const MIN_OPENSHIFT_DOCS_VERSION = '4.14';
 
 const getDocsOpenshiftVersion = (ocpVersion?: string): string => {

package/lib/common/index.ts

@@ -7,4 +7,6 @@ export * from './reducers';
 export * from './selectors';
 export * from './hooks';
 export * from './utils';
+export * from './validationSchemas';
+
 export { ResourceUIState } from './types/resource-ui-state';

package/lib/common/utils.ts

@@ -2,13 +2,12 @@ import filesize from 'filesize.js';
 import camelCase from 'lodash-es/camelCase.js';
 import isString from 'lodash-es/isString.js';
 import { loadAll } from 'js-yaml';
+import { TFunction } from 'i18next';
 import { MAX_FILE_SIZE_BYTES, MAX_FILE_SIZE_OFFSET_FACTOR } from './configurations';
 
 export const FILENAME_REGEX = /^[^\/]*\.(json|ya?ml(\.patch_?[a-zA-Z0-9_]*)?)$/;
 
 export const FILE_TYPE_MESSAGE = 'Unsupported file type. Please provide a valid YAML file.';
-export const INCORRECT_TYPE_FILE_MESSAGE =
-  'File type is not supported. File type must be yaml, yml ,json , yaml.patch. or yml.patch.';
 
 export const getErrorMessage = (error: unknown): string => {
   if (error instanceof Error) {
@@ -60,11 +59,10 @@ export const fileSize: typeof filesize = (...args) =>
     .toUpperCase()
     .replace(/I/, 'i');
 
-export const getMaxFileSizeMessage = `File size is too big. The file size must be less than ${fileSize(
-  MAX_FILE_SIZE_BYTES,
-  0,
-  'si',
-)}.`;
+export const getMaxFileSizeMessage = (t: TFunction) =>
+  t('ai:File size is too big. The file size must be less than {{value}}.', {
+    value: fileSize(MAX_FILE_SIZE_BYTES, 0, 'si'),
+  });
 
 export const validateFileName = (fileName: string) => {
   return new RegExp(FILENAME_REGEX).test(fileName || '');

package/lib/common/{components/ui/formik → validationSchemas}/_validationSchemas.test.ts

@@ -10,7 +10,7 @@ import {
   nameValidationSchema,
   noProxyValidationSchema,
   pullSecretValidationSchema,
-} from './validationSchemas';
+} from './..';
 import { TFunction } from 'react-i18next';
 import { CLUSTER_NAME_MAX_LENGTH } from './constants';
 
@@ -32,7 +32,7 @@ describe('validationSchemas', () => {
 
     await Promise.all(
       valid.map((value) =>
-        noProxyValidationSchema
+        noProxyValidationSchema(t)
           .validate(value)
           .catch(() => expect(value).toBe('was rejected but is valid')),
       ),
@@ -45,10 +45,12 @@ describe('validationSchemas', () => {
     let counter = 0;
     await Promise.all(
       invalid.map((value) =>
-        noProxyValidationSchema.validate(value).then(
-          () => expect(value).toBe('should be rejected since it is invalid'),
-          () => counter++,
-        ),
+        noProxyValidationSchema(t)
+          .validate(value)
+          .then(
+            () => expect(value).toBe('should be rejected since it is invalid'),
+            () => counter++,
+          ),
       ),
     );
 
@@ -106,7 +108,7 @@ describe('validationSchemas', () => {
 
     await Promise.all(
       valid.map((value) =>
-        pullSecretValidationSchema
+        pullSecretValidationSchema(t)
           .validate(value)
           .catch((msg: string) => expect(value).toBe(`was rejected but is valid: ${msg}`)),
       ),
@@ -115,10 +117,12 @@ describe('validationSchemas', () => {
     let counter = 0;
     await Promise.all(
       invalid.map((value) =>
-        pullSecretValidationSchema.validate(value).then(
-          () => expect(value).toBe('should be rejected since it is invalid'),
-          () => counter++,
-        ),
+        pullSecretValidationSchema(t)
+          .validate(value)
+          .then(
+            () => expect(value).toBe('should be rejected since it is invalid'),
+            () => counter++,
+          ),
       ),
     );
 
@@ -147,7 +151,7 @@ describe('validationSchemas', () => {
 
     await Promise.all(
       valid.map((value) =>
-        ipValidationSchema
+        ipValidationSchema(t)
           .validate(value)
           .catch((msg: string) => expect(value).toBe(`was rejected but is valid: ${msg}`)),
       ),
@@ -156,10 +160,12 @@ describe('validationSchemas', () => {
     let counter = 0;
     await Promise.all(
       invalid.map((value) =>
-        ipValidationSchema.validate(value).then(
-          () => expect(value).toBe('should be rejected since it is invalid'),
-          () => counter++,
-        ),
+        ipValidationSchema(t)
+          .validate(value)
+          .then(
+            () => expect(value).toBe('should be rejected since it is invalid'),
+            () => counter++,
+          ),
       ),
     );
 
@@ -182,7 +188,7 @@ describe('validationSchemas', () => {
 
     await Promise.all(
       valid.map((value) =>
-        macAddressValidationSchema
+        macAddressValidationSchema(t)
           .validate(value)
           .catch((msg: string) => expect(value).toBe(`was rejected but is valid: ${msg}`)),
       ),
@@ -191,10 +197,12 @@ describe('validationSchemas', () => {
     let counter = 0;
     await Promise.all(
       invalid.map((value) =>
-        macAddressValidationSchema.validate(value).then(
-          () => expect(value).toBe('should be rejected since it is invalid'),
-          () => counter++,
-        ),
+        macAddressValidationSchema(t)
+          .validate(value)
+          .then(
+            () => expect(value).toBe('should be rejected since it is invalid'),
+            () => counter++,
+          ),
       ),
     );
 
@@ -211,7 +219,7 @@ describe('validationSchemas', () => {
       '192.0.0.0/8' /* Overlap */,
     ];
 
-    const validationSchema = ipBlockValidationSchema(['192.168.1.0']);
+    const validationSchema = ipBlockValidationSchema(['192.168.1.0'], t);
     await Promise.all(
       valid.map((value) =>
         validationSchema
@@ -249,7 +257,7 @@ describe('validationSchemas', () => {
 
     await Promise.all(
       valid.map((value) =>
-        dnsNameValidationSchema
+        dnsNameValidationSchema(t)
           .validate(value)
           .catch((msg: string) => expect(value).toBe(`was rejected but is valid: ${msg}`)),
       ),
@@ -258,10 +266,12 @@ describe('validationSchemas', () => {
     let counter = 0;
     await Promise.all(
       invalid.map((value) =>
-        dnsNameValidationSchema.validate(value).then(
-          () => expect(value).toBe('should be rejected since it is invalid'),
-          () => counter++,
-        ),
+        dnsNameValidationSchema(t)
+          .validate(value)
+          .then(
+            () => expect(value).toBe('should be rejected since it is invalid'),
+            () => counter++,
+          ),
       ),
     );
 
@@ -272,7 +282,7 @@ describe('validationSchemas', () => {
     const valid = [16, 25];
     const invalid = ['', 'a', 0, 1, 33, 15, 26];
 
-    const validationSchema = hostPrefixValidationSchema('192.168.0.0/16');
+    const validationSchema = hostPrefixValidationSchema('192.168.0.0/16', t);
     await Promise.all(
       valid.map((value) =>
         validationSchema
@@ -298,7 +308,7 @@ describe('validationSchemas', () => {
     const valid = [8, 32, 128];
     const invalid = ['', 'a', 0, 1, 7, 129];
 
-    const validationSchema = hostPrefixValidationSchema('2002::1234:abcd:ffff:c0a8:101/64');
+    const validationSchema = hostPrefixValidationSchema('2002::1234:abcd:ffff:c0a8:101/64', t);
     await Promise.all(
       valid.map((value) =>
         validationSchema
@@ -330,7 +340,7 @@ describe('validationSchemas', () => {
 
     await Promise.all(
       valid.map((value) =>
-        baseDomainValidationSchema
+        baseDomainValidationSchema(t)
           .validate(value)
           .catch(() => expect(value).toBe(`was rejected but is valid`)),
       ),
@@ -339,10 +349,12 @@ describe('validationSchemas', () => {
     let counter = 0;
     await Promise.all(
       invalid.map((value) =>
-        baseDomainValidationSchema.validate(value).then(
-          () => expect(value).toBe('should be rejected since it is invalid'),
-          () => counter++,
-        ),
+        baseDomainValidationSchema(t)
+          .validate(value)
+          .then(
+            () => expect(value).toBe('should be rejected since it is invalid'),
+            () => counter++,
+          ),
       ),
     );
 
@@ -351,7 +363,7 @@ describe('validationSchemas', () => {
 
   describe('dualStackValidationSchema', () => {
     describe('OCP < 4.12 (legacy behavior)', () => {
-      const schema = dualStackValidationSchema('machine networks', '4.11');
+      const schema = dualStackValidationSchema('machine networks', t, '4.11');
 
       test('validates IPv4 as primary and IPv6 as secondary', async () => {
         const validValues = [[{ cidr: '192.168.1.0/24' }, { cidr: '2001:db8::/64' }]];
@@ -373,7 +385,7 @@ describe('validationSchemas', () => {
     });
 
     describe('OCP >= 4.12 (new behavior)', () => {
-      const schema = dualStackValidationSchema('machine networks', '4.12');
+      const schema = dualStackValidationSchema('machine networks', t, '4.12');
 
       test('validates IPv4 as primary and IPv6 as secondary', async () => {
         const validValues = [[{ cidr: '192.168.1.0/24' }, { cidr: '2001:db8::/64' }]];
@@ -393,7 +405,7 @@ describe('validationSchemas', () => {
     });
 
     describe('no version specified (defaults to legacy behavior)', () => {
-      const schema = dualStackValidationSchema('machine networks');
+      const schema = dualStackValidationSchema('machine networks', t);
 
       test('validates IPv4 as primary and IPv6 as secondary', async () => {
         const validValues = [[{ cidr: '192.168.1.0/24' }, { cidr: '2001:db8::/64' }]];
@@ -416,7 +428,7 @@ describe('validationSchemas', () => {
 
     describe('edge cases', () => {
       test('validates maximum 2 networks', async () => {
-        const schema = dualStackValidationSchema('machine networks', '4.12');
+        const schema = dualStackValidationSchema('machine networks', t, '4.12');
         const invalidValue = [
           { cidr: '192.168.1.0/24' },
           { cidr: '2001:db8::/64' },
@@ -424,7 +436,7 @@ describe('validationSchemas', () => {
         ];
 
         await expect(schema.validate(invalidValue)).rejects.toThrow(
-          'Maximum number of machine networks subnets in dual stack is 2',
+          'ai:Maximum number of {{field}} subnets in dual stack is 2',
         );
       });
     });