@openshift-assisted/ui-lib 2.48.6 → 2.50.0

package/lib/cim/components/modals/CimConfiguration/CimConfigurationForm.tsx

@@ -1,290 +0,0 @@
-import * as React from 'react';
-import { Trans } from 'react-i18next';
-import {
-  Flex,
-  FlexItem,
-  Form,
-  FormGroup,
-  Popover,
-  Checkbox,
-  TextInput,
-  FormHelperText,
-  HelperText,
-  HelperTextItem,
-  Icon,
-} from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { HelpIcon } from '@patternfly/react-icons/dist/js/icons/help-icon';
-
-import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
-import { CimConfigurationFormProps } from './types';
-
-import './CimConfigurationForm.css';
-
-export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
-  docConfigUrl,
-  docConfigAwsUrl,
-  isEdit,
-  isInProgressPeriod,
-  dbVolSize,
-  dbVolSizeValidation,
-  setDbVolSize,
-  fsVolSize,
-  fsVolSizeValidation,
-  setFsVolSize,
-  imgVolSize,
-  imgVolSizeValidation,
-  setImgVolSize,
-  configureLoadBalancer,
-  configureLoadBalancerInitial,
-  setConfigureLoadBalancer,
-}) => {
-  const { t } = useTranslation();
-
-  const getNumber = (v: string, min: number): number => {
-    const p = parseFloat(v);
-    if (isNaN(p)) {
-      // Do not check for minimum here - keep it on validation
-      return min;
-    }
-    return p;
-  };
-
-  const awsHelp = (
-    <Popover
-      bodyContent={t(
-        "ai:If you're running your hub cluster of Amazon Web Services and want to enable the CIM service, we recommend you to configure your load balancer if it is not already configured. Learn more about enabling CIM on AWS.",
-      )}
-      footerContent={
-        <a href={docConfigAwsUrl} target="_blank" rel="noreferrer">
-          <Trans t={t}>
-            ai:Learn more about enabling CIM on AWS <ExternalLinkAltIcon />
-          </Trans>
-        </a>
-      }
-    >
-      <button
-        type="button"
-        aria-label={t('ai:More info for load balancer on Amazon web services')}
-        aria-describedby="cim-config-form-aws-title"
-        onClick={(e) => e.preventDefault()}
-        className="pf-v6-c-form__group-label-help"
-      >
-        <Icon>
-          <HelpIcon />
-        </Icon>
-      </button>
-    </Popover>
-  );
-
-  return (
-    <Form>
-      <FormGroup
-        fieldId="cim-config-form-storage-title"
-        label={t('ai:Storage sizes')}
-        className="cim-config-form-title"
-        labelHelp={
-          <Popover
-            bodyContent={t(
-              'ai:The storage sizes will be used to store different files and data for cluster creation.',
-            )}
-            footerContent={
-              <a href={docConfigUrl} target="_blank" rel="noreferrer">
-                <Trans t={t}>
-                  ai:Learn more about storage sizes. <ExternalLinkAltIcon />
-                </Trans>
-              </a>
-            }
-          >
-            <button
-              type="button"
-              aria-label={t('ai:More info for configure storage sizes')}
-              aria-describedby="cim-config-form-storage-title"
-              onClick={(e) => e.preventDefault()}
-              className="pf-v6-c-form__group-label-help"
-            >
-              <Icon>
-                <HelpIcon />
-              </Icon>
-            </button>
-          </Popover>
-        }
-      >
-        {t('ai:If there are many clusters, use higher values for the storage fields.')}
-      </FormGroup>
-      <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
-        <FlexItem>
-          <FormGroup
-            label={t('ai:Database storage')}
-            fieldId="cim-config-form-storage-db"
-            labelHelp={
-              <Popover
-                bodyContent={t(
-                  'ai:Specify how much storage is allocated for storing files such as database tables and database views for the clusters. Recommended is 10Gi or more. The value can not be updated later.',
-                )}
-              >
-                <button
-                  type="button"
-                  aria-label={t('ai:More info for database storage')}
-                  aria-describedby="cim-config-form-storage-db"
-                  onClick={(e) => e.preventDefault()}
-                  className="pf-v6-c-form__group-label-help"
-                >
-                  <Icon>
-                    <HelpIcon />
-                  </Icon>
-                </button>
-              </Popover>
-            }
-            isRequired
-          >
-            <span className="cim-config-form-volume">
-              <TextInput
-                validated={dbVolSizeValidation ? 'error' : 'default'}
-                isRequired
-                isDisabled={isEdit /* Not supported by backend */}
-                type="number"
-                id="cim-config-form-storage-db"
-                name="cim-config-form-storage-db"
-                value={dbVolSize}
-                onChange={(_event, v: string) => setDbVolSize(getNumber(v, 1))}
-                min={0 /* Do the validation elsewhere */}
-              />{' '}
-              Gi
-            </span>
-            {dbVolSizeValidation !== undefined && (
-              <FormHelperText>
-                <HelperText>
-                  <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
-                    {dbVolSizeValidation}
-                  </HelperTextItem>
-                </HelperText>
-              </FormHelperText>
-            )}
-          </FormGroup>
-        </FlexItem>
-        <FlexItem>
-          <FormGroup
-            label={t('ai:System storage')}
-            fieldId="cim-config-form-storage-sys"
-            labelHelp={
-              <Popover
-                bodyContent={t(
-                  'ai:Specify how much storage is allocated for storing logs, manifests and "kubeconfig" files for the clusters. Recommended is 100Gi or more. The value can not be updated later.',
-                )}
-              >
-                <button
-                  type="button"
-                  aria-label={t('ai:More info for system storage')}
-                  aria-describedby="cim-config-form-storage-sys"
-                  onClick={(e) => e.preventDefault()}
-                  className="pf-v6-c-form__group-label-help"
-                >
-                  <Icon>
-                    <HelpIcon />
-                  </Icon>
-                </button>
-              </Popover>
-            }
-            isRequired
-          >
-            <span className="cim-config-form-volume">
-              <TextInput
-                validated={fsVolSizeValidation ? 'error' : 'default'}
-                isRequired
-                isDisabled={isEdit /* Not supported by backend */}
-                type="number"
-                id="cim-config-form-storage-sys"
-                name="cim-config-form-storage-sys"
-                value={fsVolSize}
-                onChange={(_event, v: string) => setFsVolSize(getNumber(v, 1))}
-                min={0}
-              />{' '}
-              Gi
-            </span>
-            {fsVolSizeValidation !== undefined && (
-              <FormHelperText>
-                <HelperText>
-                  <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
-                    {fsVolSizeValidation}
-                  </HelperTextItem>
-                </HelperText>
-              </FormHelperText>
-            )}
-          </FormGroup>
-        </FlexItem>
-        <FlexItem>
-          <FormGroup
-            label={t('ai:Image storage')}
-            fieldId="cim-config-form-storage-img"
-            labelHelp={
-              <Popover
-                bodyContent={t(
-                  'ai:Specify how much storage to allocate for the images of the clusters. There must be 1G of image storage for each instance of Red Hat Enterprise Linux CoreOS that is running. Recommended is 50Gi or more. The value can not be updated later.',
-                )}
-              >
-                <button
-                  type="button"
-                  aria-label={t('ai:More info for image storage')}
-                  aria-describedby="cim-config-form-storage-img"
-                  onClick={(e) => e.preventDefault()}
-                  className="pf-v6-c-form__group-label-help"
-                >
-                  <Icon>
-                    <HelpIcon />
-                  </Icon>
-                </button>
-              </Popover>
-            }
-            isRequired
-          >
-            <span className="cim-config-form-volume">
-              <TextInput
-                validated={imgVolSizeValidation ? 'error' : 'default'}
-                isRequired
-                isDisabled={isEdit /* Not supported by backend */}
-                type="number"
-                id="cim-config-form-storage-img"
-                name="cim-config-form-storage-img"
-                value={imgVolSize}
-                onChange={(_event, v: string) => setImgVolSize(getNumber(v, 10))}
-                min={0}
-              />{' '}
-              Gi
-            </span>
-            {imgVolSizeValidation !== undefined && (
-              <FormHelperText>
-                <HelperText>
-                  <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
-                    {imgVolSizeValidation}
-                  </HelperTextItem>
-                </HelperText>
-              </FormHelperText>
-            )}
-          </FormGroup>
-        </FlexItem>
-      </Flex>
-      <Checkbox
-        label={
-          <span className="cim-config-form-aws-label">
-            {t('ai:Configure load balancer on Amazon Web Services for me.')}
-            &nbsp;
-            {awsHelp}
-          </span>
-        }
-        id="cim-config-form-aws"
-        className="cim-config-form-aws"
-        // isRequired
-        name="aws-loadbalancer-checkbox"
-        isChecked={configureLoadBalancer}
-        isDisabled={
-          isInProgressPeriod ||
-          (isEdit &&
-            configureLoadBalancerInitial) /* For edit flow, only No to Yes transition is possible */
-        }
-        onChange={(_event, value) => setConfigureLoadBalancer(value)}
-      />
-    </Form>
-  );
-};

package/lib/cim/components/modals/CimConfiguration/CimConfigurationModal.css

@@ -1,3 +0,0 @@
-.cim-config-modal .pf-v6-c-alert {
-  margin-bottom: var(--pf-v6-global--spacer--md);
-}

package/lib/cim/types/resources.ts

@@ -1,50 +0,0 @@
-import { K8sResourceCommon } from '@openshift-console/dynamic-plugin-sdk';
-
-// To conform ACM
-type ResourceType = {
-  // status?: any;
-  apiVersion: string;
-  kind: string;
-  metadata?: {
-    name?: string;
-    namespace?: string;
-    resourceVersion?: string;
-    creationTimestamp?: string;
-    uid?: string;
-    annotations?: Record<string, string>;
-    labels?: Record<string, string>;
-    generateName?: string;
-    deletionTimestamp?: string;
-    selfLink?: string;
-    finalizers?: string[];
-    ownerReferences?: {
-      apiVersion: string;
-      blockOwnerDeletion?: boolean;
-      controller?: boolean;
-      kind: string;
-      name: string;
-      uid?: string;
-    }[];
-    // managedFields?: any[];
-  };
-};
-
-export type CreateResourceFuncType = (resource: ResourceType) => Promise<ResourceType>;
-export type DeleteResourceFuncType = (resource: ResourceType) => Promise<void>;
-export type GetResourceFuncType = (resource: ResourceType) => Promise<ResourceType>;
-export type ListResourcesFuncType = (
-  resource: { apiVersion: string; kind: string; metadata?: { namespace?: string } },
-  labels?: string[],
-  query?: Record<string, string>,
-) => Promise<ResourceType[]>;
-export type ResourcePatch = { op: 'replace' | 'add'; path: string; value: unknown };
-export type PatchResourceFuncType = (
-  resource: ResourceType,
-  patches: ResourcePatch[],
-) => Promise<ResourceType>;
-
-export const convertOCPtoCIMResourceHeader = (res: K8sResourceCommon): ResourceType => ({
-  apiVersion: res.apiVersion || '',
-  kind: res.kind || '',
-  metadata: res.metadata,
-});

package/lib/common/components/ui/formik/LabelField.css

@@ -1,43 +0,0 @@
-.label-field__value {
-  margin: 0 var(--pf-v6-global--spacer--sm) 0 0;
-}
-
-.label-field__input {
-  border: 1px solid transparent;
-  outline: none;
-  width: 100%;
-  background-color: initial;
-}
-
-.label-field__input::placeholder {
-  color: var(--pf-v6-c-form-control--m-placeholder--Color);
-}
-
-.label-field .react-autosuggest__suggestions-list {
-  margin-left: var(--pf-v6-global--spacer-xs);
-  margin-right: var(--pf-v6-global--spacer-xs);
-  box-shadow: var(--pf-v6-global--BoxShadow--lg);
-
-  max-height: 10rem;
-  overflow: auto;
-  list-style-type: none;
-}
-
-.label-field .react-autosuggest__suggestion {
-  cursor: pointer;
-}
-
-.label-field .react-autosuggest__suggestion--highlighted {
-  /* TODO(mlibra): maybe a lighter color would be better */
-  background-color: var(--pf-v6-global--primary-color--light-100);
-}
-
-.label-field .react-autosuggest__section-title {
-  padding: 10px 0 0 10px;
-  font-size: var(--pf-v6-global--FontSize--sm);
-  color: var(--pf-v6-global--Color--200);
-}
-
-.label-field .react-tagsinput {
-  width: 100%;
-}