@openshift-assisted/ui-lib 2.16.2-cim → 2.16.4-cim

package/lib/cim/components/ClusterDeployment/customManifests/ConfigMapForm.tsx

@@ -1,247 +0,0 @@
-import React from 'react';
-import Fuse from 'fuse.js';
-import { FieldArray, useFormikContext } from 'formik';
-import {
-  Stack,
-  StackItem,
-  Grid,
-  WizardFooter,
-  useWizardContext,
-  useWizardFooter,
-  SelectOptionProps,
-  GridItem,
-  AlertVariant,
-  Alert,
-} from '@patternfly/react-core';
-import { Alerts, SelectFieldWithSearch, useAlerts, useTranslation } from '../../../../common';
-import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
-import { ValidationSection } from '../components/ValidationSection';
-import { ConfigMapDetail } from './ConfigMapDetail';
-import { useConfigMaps } from '../../../hooks';
-
-const NO_RESULTS = 'no_results';
-
-export type CustomManifestFormType = {
-  configMaps: {
-    name: string;
-    valid: boolean;
-    manifestNames?: string[];
-  }[];
-};
-
-export const ConfigMapForm = ({ namespace }: { namespace: string }) => {
-  const { t } = useTranslation();
-  const { syncError } = React.useContext(ClusterDeploymentWizardContext);
-  const { alerts, addAlert, clearAlerts } = useAlerts();
-  const [isSubmitting, setSubmitting] = React.useState(false);
-  const { activeStep, goToPrevStep, goToNextStep, close } = useWizardContext();
-
-  const { values, errors, isValid, setFieldValue, submitForm } =
-    useFormikContext<CustomManifestFormType>();
-  const [filter, setFilter] = React.useState<string>('');
-  const [configMaps, setConfigMaps] = React.useState<SelectOptionProps[]>([]);
-  const [data, loaded, isError] = useConfigMaps({
-    namespace,
-    isList: true,
-  });
-
-  React.useEffect(() => {
-    if (data && loaded && !isError) {
-      setConfigMaps(
-        data.map((configMap) => ({
-          value: {
-            name: configMap.metadata?.name as string,
-            valid: true,
-            manifestNames: Object.keys(configMap.data || {}),
-          },
-          children: configMap.metadata?.name as string,
-        })),
-      );
-    }
-  }, [data, isError, loaded]);
-
-  React.useEffect(() => {
-    if (loaded && !isError) {
-      const newConfigMaps = values.configMaps.map((configMap) => {
-        const map = data.find((item) => item.metadata?.name === configMap.name);
-        if (map) {
-          return { ...configMap, valid: true, manifestNames: Object.keys(map.data || {}) };
-        }
-        return { ...configMap, valid: false, manifestNames: [] };
-      });
-
-      setFieldValue('configMaps', newConfigMaps);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, isError, loaded, setFieldValue]);
-
-  const placeholder = React.useMemo(() => {
-    if (values.configMaps.length > 0) {
-      return `${values.configMaps.length} config map${
-        values.configMaps.length !== 1 ? 's' : ''
-      } selected`;
-    }
-
-    return 'No config map selected';
-  }, [values.configMaps]);
-
-  const fuse = React.useMemo(
-    () =>
-      new Fuse(Object.values(configMaps), {
-        includeScore: true,
-        ignoreLocation: true,
-        threshold: 0.3,
-        keys: ['value.name'],
-      }),
-    [configMaps],
-  );
-
-  const selectOptions = React.useMemo(() => {
-    if (filter) {
-      const newSelectOptions = fuse
-        .search(filter)
-        .sort((a, b) => (a.score || 0) - (b.score || 0))
-        .map(({ item }) => item);
-
-      if (!newSelectOptions.length) {
-        return [
-          {
-            isAriaDisabled: true,
-            children: t('ai:No results found for {{filter}}', { filter }),
-            value: NO_RESULTS,
-            hasCheckbox: false,
-          },
-        ];
-      }
-      return newSelectOptions;
-    }
-    return configMaps;
-  }, [filter, configMaps, fuse, t]);
-
-  const submittingText = React.useMemo(() => {
-    if (isSubmitting) {
-      return t('ai:Saving changes...');
-    }
-    return undefined;
-  }, [isSubmitting, t]);
-
-  const onNext = React.useCallback(async () => {
-    try {
-      clearAlerts();
-      setSubmitting(true);
-
-      await submitForm();
-      await goToNextStep();
-    } catch (error) {
-      addAlert({
-        title: t('ai:Failed to save ClusterDeployment'),
-        message: error instanceof Error ? error.message : undefined,
-      });
-    } finally {
-      setSubmitting(false);
-    }
-  }, [addAlert, clearAlerts, goToNextStep, submitForm, t]);
-
-  const footer = React.useMemo(
-    () => (
-      <WizardFooter
-        activeStep={activeStep}
-        onNext={onNext}
-        nextButtonProps={{ isLoading: !!submittingText }}
-        nextButtonText={submittingText || t('ai:Next')}
-        isNextDisabled={!isValid || !loaded}
-        onBack={goToPrevStep}
-        onClose={close}
-      />
-    ),
-    [activeStep, onNext, submittingText, t, isValid, loaded, goToPrevStep, close],
-  );
-
-  useWizardFooter(footer);
-
-  const errorAlert =
-    typeof errors.configMaps === 'string' ? (
-      <GridItem>
-        <Alert variant={AlertVariant.danger} title={errors.configMaps} isInline />
-      </GridItem>
-    ) : (
-      <GridItem>
-        <Alert
-          variant={AlertVariant.danger}
-          title={t('ai:Some config map items are invalid')}
-          isInline
-        />
-      </GridItem>
-    );
-
-  return (
-    <Grid hasGutter>
-      <GridItem>
-        <Stack hasGutter>
-          <StackItem>
-            <SelectFieldWithSearch
-              name={'configMaps'}
-              label={t('ai:Config maps')}
-              isMultiSelect
-              isRequired
-              isLoading={!loaded}
-              selectOptions={selectOptions}
-              filterValue={filter}
-              setFilterValue={setFilter}
-              placeholder={placeholder}
-              helperText={t(
-                'ai:Select config maps from the list or use the type ahead to narrow down the list.',
-              )}
-            />
-          </StackItem>
-          <StackItem>
-            <Grid hasGutter>
-              <FieldArray name="configMaps">
-                {({ remove }) =>
-                  values.configMaps.map((configMap, index) => (
-                    <ConfigMapDetail
-                      index={index}
-                      key={configMap.name}
-                      configMapName={configMap.name}
-                      configMap={data.find((item) => item.metadata?.name === configMap.name)}
-                      onRemove={() => remove(index)}
-                      isLoading={!loaded}
-                    />
-                  ))
-                }
-              </FieldArray>
-            </Grid>
-          </StackItem>
-        </Stack>
-      </GridItem>
-
-      {!isValid && errorAlert}
-
-      {isError && (
-        <GridItem>
-          <Alert
-            variant={AlertVariant.danger}
-            title={t('ai:An error occurred while fetching config maps')}
-            isInline
-          />
-        </GridItem>
-      )}
-
-      {!!alerts.length && (
-        <GridItem>
-          <Alerts />
-        </GridItem>
-      )}
-
-      {syncError && (
-        <GridItem>
-          <ValidationSection currentStepId={'custom-manifests'} hosts={[]}>
-            <Alert variant={AlertVariant.danger} title={t('ai:An error occurred')} isInline>
-              {syncError}
-            </Alert>
-          </ValidationSection>
-        </GridItem>
-      )}
-    </Grid>
-  );
-};

package/lib/cim/components/ClusterDeployment/customManifests/index.tsx

@@ -1 +0,0 @@
-export * from './ClusterDeploymentCustomManifestsStep';

package/lib/cim/components/ClusterDeployment/hostDiscovery/index.tsx

@@ -1 +0,0 @@
-export * from './ClusterDeploymentHostsDiscoveryStep';

package/lib/cim/components/ClusterDeployment/hostSelection/index.tsx

@@ -1,2 +0,0 @@
-export * from './ClusterDeploymentHostSelectionStep';
-export * from './ClusterDeploymentHostsSelectionAdvanced';

package/lib/cim/components/ClusterDeployment/networking/index.tsx

@@ -1 +0,0 @@
-export * from './ClusterDeploymentNetworkingStep';

package/lib/cim/components/ClusterDeployment/review/ReviewConfigMapsTable.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import { useConfigMaps } from '../../../hooks';
-import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
-import { genericTableRowKey, LoadingState } from '../../../../common';
-import { AgentClusterInstallK8sResource } from '../../../types';
-
-export const ReviewConfigMapsTable = ({
-  agentClusterInstall,
-}: {
-  agentClusterInstall: AgentClusterInstallK8sResource;
-}) => {
-  const [configMaps, loaded] = useConfigMaps({
-    namespace: agentClusterInstall.metadata?.namespace,
-    isList: true,
-  });
-
-  const customManifests = React.useMemo(() => {
-    const maps = configMaps.filter((configMap) =>
-      agentClusterInstall.spec?.manifestsConfigMapRefs
-        ?.flatMap((ref) => ref.name)
-        .includes(configMap.metadata?.name || ''),
-    );
-
-    return maps
-      .map((map, index) => [
-        {
-          rowId: `config-map-${index}`,
-          cells: [{ title: map.metadata?.name as string, isExpanded: true, level: 1, posInset: 1 }],
-        },
-        ...Object.keys(map.data || {}).map((key) => ({
-          rowId: `config-map-${index}-${key}`,
-          cells: [
-            {
-              title: (
-                <>
-                  <span style={{ width: '1rem', display: 'inline-block' }} />
-                  {key}
-                </>
-              ),
-              posInset: 2,
-              level: 2,
-            },
-          ],
-        })),
-      ])
-      .flat();
-  }, [agentClusterInstall.spec?.manifestsConfigMapRefs, configMaps]);
-
-  return loaded ? (
-    <Table
-      variant={TableVariant.compact}
-      borders={false}
-      data-testid="review-custom-manifests-table"
-    >
-      <Tbody>
-        {customManifests.map((row, i) => (
-          <Tr key={genericTableRowKey(row.rowId)}>
-            {row.cells.map(({ title, ...props }, j) => (
-              <Td key={`cell-${i}-${j}`} {...props}>
-                {title}
-              </Td>
-            ))}
-          </Tr>
-        ))}
-      </Tbody>
-    </Table>
-  ) : (
-    <LoadingState />
-  );
-};

package/lib/cim/components/ClusterDeployment/review/index.tsx

@@ -1 +0,0 @@
-export * from './ClusterDeploymentReviewStep';

package/lib/cim/hooks/index.tsx

@@ -1 +0,0 @@
-export * from './useConfigMaps';

package/lib/cim/hooks/types.tsx

@@ -1,8 +0,0 @@
-import { WatchK8sResource } from '@openshift-console/dynamic-plugin-sdk';
-
-export type K8sWatchHookListProps = Omit<
-  WatchK8sResource,
-  'groupVersionKind' | 'name' | 'isList'
-> | null;
-
-export type K8sWatchHookProps = Pick<WatchK8sResource, 'name' | 'namespace' | 'isList'> | null;

package/lib/cim/hooks/useConfigMaps.tsx

@@ -1,14 +0,0 @@
-import { useK8sWatchResource } from './useK8sWatchResource';
-import { ConfigMapK8sResource } from '../types';
-import { K8sWatchHookProps } from './types';
-
-export const useConfigMaps = (props: K8sWatchHookProps) =>
-  useK8sWatchResource<ConfigMapK8sResource[]>(
-    {
-      groupVersionKind: {
-        kind: 'ConfigMap',
-        version: 'v1',
-      },
-    },
-    props,
-  );

package/lib/cim/hooks/useK8sWatchResource.tsx

@@ -1,27 +0,0 @@
-import {
-  useK8sWatchResource as consoleWatch,
-  K8sResourceCommon,
-  WatchK8sResource,
-} from '@openshift-console/dynamic-plugin-sdk';
-
-export type WatchK8sResult<R extends K8sResourceCommon | K8sResourceCommon[]> = [
-  R,
-  boolean,
-  unknown,
-];
-
-export const useK8sWatchResource = <R extends K8sResourceCommon | K8sResourceCommon[]>(
-  resource: Pick<WatchK8sResource, 'groupVersionKind'>,
-  props?: Omit<WatchK8sResource, 'groupVersionKind'> | null,
-): WatchK8sResult<R> => {
-  // eslint-disable-next-line
-  const [data, loaded, error] = consoleWatch<R>(
-    props !== null
-      ? {
-          ...resource,
-          ...(props || {}),
-        }
-      : null,
-  );
-  return [data, error ? true : loaded, error as unknown];
-};

package/lib/cim/types/models.tsx

@@ -1,12 +0,0 @@
-import { K8sModel } from '@openshift-console/dynamic-plugin-sdk/lib/api/common-types';
-
-export const AgentClusterInstallModel: K8sModel = {
-  label: 'AgentClusterInstall',
-  apiVersion: 'v1beta1',
-  plural: 'agentclusterinstalls',
-  abbr: 'ACI',
-  namespaced: true,
-  kind: 'AgentClusterInstall',
-  labelPlural: 'AgentClusterInstalls',
-  apiGroup: 'extensions.hive.openshift.io',
-};

package/lib/common/components/clusterConfiguration/ExternalPlatformsDropdown.tsx

@@ -1,82 +0,0 @@
-import * as React from 'react';
-import { StaticField } from '../ui';
-import { useTranslation } from '../../hooks';
-import { TFunction } from 'i18next';
-import { PlatformType } from '@openshift-assisted/types/assisted-installer-service';
-import { Dropdown, DropdownItem, FormGroup, MenuToggle } from '@patternfly/react-core';
-import { useField, useFormikContext } from 'formik';
-import { ClusterDetailsValues } from '../clusterWizard';
-
-export const getPlatforms = (t: TFunction): { [key in PlatformType]: string } => ({
-  none: t('ai:No platform integration'),
-  baremetal: t('ai:No platform integration'),
-  nutanix: t('ai:Nutanix'),
-  vsphere: t('ai:vSphere'),
-  external: t('ai:External cloud provider'),
-});
-
-export const ExternalPlatformsDropdown = ({ isDisabled }: { isDisabled: boolean }) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [{ value }, , { setValue }] = useField<PlatformType>('platform');
-  const { setFieldValue } = useFormikContext<ClusterDetailsValues>();
-  const { t } = useTranslation();
-
-  const platforms = getPlatforms(t);
-
-  const options = Object.entries(platforms)
-    .filter(([key]) => key !== 'none')
-    .map(([platform, label]) => (
-      <DropdownItem
-        key={platform}
-        id={platform}
-        value={platform}
-        selected={platform === value}
-        onClick={(e: React.MouseEvent) => e.preventDefault()}
-      >
-        {label}
-      </DropdownItem>
-    ));
-
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    value: string | number | undefined,
-  ) => {
-    setValue(value as PlatformType);
-    setIsOpen(false);
-
-    if (value === 'external') {
-      setFieldValue('userManagedNetworking', true);
-    } else {
-      setFieldValue('userManagedNetworking', false);
-    }
-  };
-
-  return isDisabled ? (
-    <StaticField
-      name={'platform'}
-      label={t('ai:Integrate with external partner platforms')}
-      isRequired
-    >
-      {platforms[value]}
-    </StaticField>
-  ) : (
-    <FormGroup
-      isInline
-      label={t('ai:Integrate with external partner platforms')}
-      isRequired
-      name={'platform'}
-    >
-      <Dropdown
-        isOpen={isOpen}
-        toggle={(toggleRef) => (
-          <MenuToggle ref={toggleRef} className="pf-v5-u-w-100" onClick={() => setIsOpen(!isOpen)}>
-            {value ? platforms[value] : t('ai:Integrate with external partner platforms')}
-          </MenuToggle>
-        )}
-        onSelect={onSelect}
-      >
-        {options}
-      </Dropdown>
-    </FormGroup>
-  );
-};