@openshift-assisted/ui-lib 2.49.0 → 2.50.0

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

@@ -12,7 +12,10 @@ import { getFieldId } from './utils';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
-const UploadField: React.FC<UploadFieldProps> = ({
+const MAX_FILE_SIZE = 2048;
+const ACCEPTED_FILES = { 'application/x-ssh-key': ['.pub'] };
+
+const UploadField: React.FC<React.PropsWithChildren<UploadFieldProps>> = ({
   label,
   labelIcon,
   helperText,
@@ -41,8 +44,7 @@ const UploadField: React.FC<UploadFieldProps> = ({
     return '';
   };
   const errorMessage = getErrorMessage();
-  const acceptedFiles = { 'application/x-ssh-key': ['.pub'] };
-  const maxFileSize = 2048;
+
   return (
     <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
       {children}
@@ -70,7 +72,6 @@ const UploadField: React.FC<UploadFieldProps> = ({
         onFileInputChange={(_event, file) => {
           setFilename(file.name);
           setTouched(true);
-          setValue(file);
         }}
         onBlur={(e) => {
           const file: File | string = field.value;
@@ -96,8 +97,8 @@ const UploadField: React.FC<UploadFieldProps> = ({
         disabled={isDisabled}
         allowEditingUploadedText={allowEdittingUploadedText}
         dropzoneProps={{
-          accept: acceptedFiles,
-          maxSize: maxFileSize,
+          accept: ACCEPTED_FILES,
+          maxSize: MAX_FILE_SIZE,
         }}
         onClearClick={() => {
           setFilename('');

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

@@ -21,7 +21,7 @@ export { default as PopoverIcon } from './PopoverIcon';
 export { default as WizardNavItem } from './WizardNavItem';
 export { default as Alerts } from './Alerts';
 export { default as ExternalLink } from './ExternalLink';
-export { default as PrismCode, SimpleAIPrismTheme } from './PrismCode';
+export { default as PrismCode } from './PrismCode';
 export { default as GridGap } from './GridGap';
 export { default as EventsList } from './EventsList';
 export { default as ClusterEventsToolbar } from './ClusterEventsToolbar';

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { DASH } from '../constants';
+import { OpenshiftVersionOptionType } from '../../types';
+import { TFunction } from 'i18next';
 
 export const getHumanizedDateTime = (dateTime?: string) => {
   if (!dateTime) return DASH;
@@ -20,3 +22,8 @@ export const isSelectEventChecked = (
   const target = event?.target as { checked?: boolean };
   return !!target?.checked;
 };
+
+export const getVersionLabel = (version: OpenshiftVersionOptionType, t: TFunction) =>
+  version.supportLevel === 'beta'
+    ? version.label + ' - ' + t('ai:Developer preview release')
+    : version.label;

package/lib/common/config/constants.ts

@@ -2,6 +2,7 @@ import { TFunction } from 'i18next';
 import { ValidationsInfo, HostRole } from '../types/hosts';
 import {
   Cluster,
+  ClusterDefaultConfig,
   ClusterValidationId,
   DiskRole,
   Event,
@@ -72,6 +73,7 @@ export const clusterFieldLabels = (t: TFunction): { [key in string]: string } =>
   machineNetworks: t('ai:Machine networks'),
   clusterNetworks: t('ai:Cluster networks'),
   serviceNetworks: t('ai:Service networks'),
+  rendezvousIp: t('ai:Rendezvous IP'),
 });
 
 export const hostValidationGroupLabels = (
@@ -278,9 +280,39 @@ export const CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4 = {
 };
 
 export const CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV6 = {
-  clusterNetworkCidr: '2002:db8::/53',
+  clusterNetworkCidr: 'fd01::/48',
   clusterNetworkHostPrefix: 64,
-  serviceNetworkCidr: '2003:db8::/112',
+  serviceNetworkCidr: 'fd02::/112',
+};
+
+export const CLUSTER_DEFAULT_NETWORK_SETTINGS: Pick<
+  ClusterDefaultConfig,
+  | 'clusterNetworksIpv4'
+  | 'clusterNetworksDualstack'
+  | 'serviceNetworksIpv4'
+  | 'serviceNetworksDualstack'
+> = {
+  clusterNetworksIpv4: [
+    {
+      cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4.clusterNetworkCidr,
+      hostPrefix: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4.clusterNetworkHostPrefix,
+    },
+  ],
+  clusterNetworksDualstack: [
+    {
+      cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4.clusterNetworkCidr,
+      hostPrefix: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4.clusterNetworkHostPrefix,
+    },
+    {
+      cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV6.clusterNetworkCidr,
+      hostPrefix: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV6.clusterNetworkHostPrefix,
+    },
+  ],
+  serviceNetworksIpv4: [{ cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4.serviceNetworkCidr }],
+  serviceNetworksDualstack: [
+    { cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4.serviceNetworkCidr },
+    { cidr: CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV6.serviceNetworkCidr },
+  ],
 };
 
 /**
@@ -354,6 +386,9 @@ export const singleClusterOperators = [
   OPERATOR_NAME_NODE_MAINTENANCE,
   OPERATOR_NAME_FENCE_AGENTS_REMEDIATION,
   OPERATOR_NAME_KUBE_DESCHEDULER,
+  OPERATOR_NAME_CLUSTER_OBSERVABILITY,
+  OPERATOR_NAME_LOKI,
+  OPERATOR_NAME_OPENSHIFT_LOGGING,
 ];
 
 export const singleClusterBundles = ['virtualization'];

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/features/featureGate.tsx

@@ -34,9 +34,11 @@ export const FeatureGateContext = React.createContext<FeatureGateContextType>({
   isFeatureEnabled: () => false,
 });
 
-export const FeatureGateContextProvider: React.FC<{
-  features: FeatureListType;
-}> = ({ features, children }) => {
+export const FeatureGateContextProvider: React.FC<
+  React.PropsWithChildren<{
+    features: FeatureListType;
+  }>
+> = ({ features, children }) => {
   const featuresWithDefaults: FeatureListType = {
     ...features,
   };

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/types/clusters.ts

@@ -45,7 +45,6 @@ export type NetworkConfigurationValues = Pick<
   | 'clusterNetworks'
   | 'serviceNetworks'
 > & {
-  hostSubnet?: string;
   managedNetworkingType: 'userManaged' | 'clusterManaged';
   stackType?: 'singleStack' | 'dualStack';
   apiVip?: string;

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',
         );
       });
     });