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

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,88 +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, values } = useFormikContext<ClusterDetailsValues>();
-  const { t } = useTranslation();
-
-  const platforms = getPlatforms(t);
-  const isSNO = values.controlPlaneCount === 1;
-  const options = Object.entries(platforms)
-    .filter(([key]) => {
-      if (isSNO) {
-        return key === 'none' || key === 'vsphere' || key === 'external';
-      } else {
-        return 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' || values.controlPlaneCount === 1) {
-      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>
-  );
-};

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

@@ -1,278 +0,0 @@
-import React from 'react';
-import {
-  Select,
-  SelectOption,
-  SelectList,
-  SelectOptionProps,
-  MenuToggle,
-  MenuToggleElement,
-  TextInputGroup,
-  TextInputGroupMain,
-  TextInputGroupUtilities,
-  Button,
-  FormGroup,
-  Bullseye,
-  Spinner,
-  FormHelperText,
-  HelperText,
-  HelperTextItem,
-  Divider,
-} from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import { useField } from 'formik';
-import { isEqual } from 'lodash-es';
-import { FieldProps } from './types';
-
-const NO_RESULTS = 'no_results';
-
-const createItemId = (val: string) => `select-multi-typeahead-${val.replace(' ', '-')}`;
-
-const SelectFieldWithSearch = ({
-  name,
-  label,
-  isRequired,
-  selectOptions,
-  filterValue,
-  setFilterValue,
-  isMultiSelect = false,
-  isLoading = false,
-  placeholder,
-  helperText,
-}: {
-  selectOptions: (SelectOptionProps & { showDivider?: boolean })[];
-  filterValue: string;
-  setFilterValue: (value: string) => void;
-  isMultiSelect?: boolean;
-  isLoading?: boolean;
-  placeholder?: string;
-  helperText?: React.ReactNode;
-} & FieldProps) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [{ value }, , { setValue }] = useField<unknown | unknown[]>(name);
-
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>();
-
-  const setActiveAndFocusedItem = (itemIndex: number) => {
-    setFocusedItemIndex(itemIndex);
-    const focusedItem = selectOptions[itemIndex];
-    setActiveItemId(createItemId(focusedItem.value as string));
-  };
-
-  const resetActiveAndFocusedItem = () => {
-    setFocusedItemIndex(null);
-    setActiveItemId(null);
-  };
-
-  const closeMenu = () => {
-    setIsOpen(false);
-    resetActiveAndFocusedItem();
-  };
-
-  const onInputClick = () => {
-    if (!isOpen) {
-      setIsOpen(true);
-    } else if (!filterValue) {
-      closeMenu();
-    }
-  };
-
-  const handleMenuArrowKeys = (key: string) => {
-    let indexToFocus = 0;
-
-    if (!isOpen) {
-      setIsOpen(true);
-    }
-
-    if (selectOptions.every((option) => option.isDisabled)) {
-      return;
-    }
-
-    if (key === 'ArrowUp') {
-      // When no index is set or at the first index, focus to the last, otherwise decrement focus index
-      if (focusedItemIndex === null || focusedItemIndex === 0) {
-        indexToFocus = selectOptions.length - 1;
-      } else {
-        indexToFocus = focusedItemIndex - 1;
-      }
-
-      // Skip disabled options
-      while (selectOptions[indexToFocus].isDisabled) {
-        indexToFocus--;
-        if (indexToFocus === -1) {
-          indexToFocus = selectOptions.length - 1;
-        }
-      }
-    }
-
-    if (key === 'ArrowDown') {
-      // When no index is set or at the last index, focus to the first, otherwise increment focus index
-      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
-        indexToFocus = 0;
-      } else {
-        indexToFocus = focusedItemIndex + 1;
-      }
-
-      // Skip disabled options
-      while (selectOptions[indexToFocus].isDisabled) {
-        indexToFocus++;
-        if (indexToFocus === selectOptions.length) {
-          indexToFocus = 0;
-        }
-      }
-    }
-
-    setActiveAndFocusedItem(indexToFocus);
-  };
-
-  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
-
-    switch (event.key) {
-      case 'Enter':
-        if (
-          isOpen &&
-          focusedItem &&
-          focusedItem.value !== NO_RESULTS &&
-          !focusedItem.isAriaDisabled
-        ) {
-          onSelect(focusedItem.value as string);
-        }
-
-        if (!isOpen) {
-          setIsOpen(true);
-        }
-
-        break;
-      case 'ArrowUp':
-      case 'ArrowDown':
-        event.preventDefault();
-        handleMenuArrowKeys(event.key);
-        break;
-    }
-  };
-
-  const onToggleClick = () => {
-    setIsOpen(!isOpen);
-    textInputRef?.current?.focus();
-  };
-
-  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setFilterValue(value);
-    resetActiveAndFocusedItem();
-  };
-
-  const onSelect = React.useCallback(
-    (val) => {
-      if (val && val !== NO_RESULTS) {
-        if (isMultiSelect && Array.isArray(value)) {
-          setValue(
-            value.some((v) => isEqual(v, val))
-              ? value.filter((v) => !isEqual(v, val))
-              : [...(value as unknown[]), val],
-          );
-        } else {
-          setValue(val);
-          setFilterValue(selectOptions.find((option) => option.value === val)?.children as string);
-        }
-      }
-
-      textInputRef.current?.focus();
-    },
-    [isMultiSelect, setValue, setFilterValue, selectOptions, value],
-  );
-
-  const onClearButtonClick = () => {
-    setFilterValue('');
-    resetActiveAndFocusedItem();
-    textInputRef?.current?.focus();
-  };
-
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle
-      variant="typeahead"
-      aria-label="Multi typeahead checkbox menu toggle"
-      onClick={onToggleClick}
-      innerRef={toggleRef}
-      isExpanded={isOpen}
-      isFullWidth
-    >
-      <TextInputGroup isPlain>
-        <TextInputGroupMain
-          isExpanded={isOpen}
-          value={filterValue}
-          placeholder={placeholder}
-          onClick={onInputClick}
-          onChange={onTextInputChange}
-          onKeyDown={onInputKeyDown}
-          innerRef={textInputRef}
-          autoComplete="off"
-          role="combobox"
-          id="typeahead-select-input"
-          aria-controls="typeahead-select-listbox"
-          {...(activeItemId && { 'aria-activedescendant': activeItemId })}
-        />
-        <TextInputGroupUtilities {...(!filterValue ? { style: { display: 'none' } } : {})}>
-          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
-            <TimesIcon aria-hidden />
-          </Button>
-        </TextInputGroupUtilities>
-      </TextInputGroup>
-    </MenuToggle>
-  );
-
-  return (
-    <FormGroup label={label} isRequired={isRequired}>
-      <Select
-        role="menu"
-        id="typeahead-select"
-        isOpen={isOpen}
-        selected={value}
-        onSelect={(_event, selection) => onSelect(selection as string)}
-        onOpenChange={(isOpen) => {
-          !isOpen && closeMenu();
-        }}
-        toggle={toggle}
-        isScrollable
-      >
-        <SelectList isAriaMultiselectable id="select-typeahead-listbox">
-          {isLoading ? (
-            <SelectOption key={'loader'}>
-              <Bullseye>
-                <Spinner size="lg" />
-              </Bullseye>
-            </SelectOption>
-          ) : (
-            selectOptions.map((option, index) => (
-              <>
-                {option.showDivider && <Divider component="li" key={`divider-${index}`} />}
-                <SelectOption
-                  hasCheckbox={isMultiSelect && !option.isAriaDisabled}
-                  isSelected={
-                    isMultiSelect && Array.isArray(value)
-                      ? value.some((v) => isEqual(v, option.value))
-                      : value === option.value
-                  }
-                  key={`option-${index}`}
-                  isFocused={focusedItemIndex === index}
-                  ref={null}
-                  {...option}
-                />
-              </>
-            ))
-          )}
-        </SelectList>
-      </Select>
-      {helperText && (
-        <FormHelperText>
-          <HelperText>
-            <HelperTextItem>{helperText}</HelperTextItem>
-          </HelperText>
-        </FormHelperText>
-      )}
-    </FormGroup>
-  );
-};
-
-export default SelectFieldWithSearch;

package/lib/ocm/components/clusterConfiguration/networkConfiguration/UserManagedNetworkingTextContent.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { List, ListItem, Text, TextContent } from '@patternfly/react-core';
-import { ExternalLink } from '../../../../common/components/ui';
-import { getOpenShiftNetworkingDocsLink } from '../../../../common/config/docs_links';
-
-export interface UserManagedNetworkingTextContentProps {
-  shouldDisplayLoadBalancersBullet?: boolean;
-}
-
-export const UserManagedNetworkingTextContent = ({
-  shouldDisplayLoadBalancersBullet = false,
-}: UserManagedNetworkingTextContentProps) => {
-  return (
-    <TextContent>
-      <Text component={'p'}>
-        Please refer to the{' '}
-        <ExternalLink href={getOpenShiftNetworkingDocsLink()}>
-          OpenShift networking documentation
-        </ExternalLink>{' '}
-        to configure your cluster's networking, including:{' '}
-      </Text>
-      <List>
-        <ListItem>DHCP or static IP Addresses</ListItem>
-        {shouldDisplayLoadBalancersBullet && <ListItem>Load balancers</ListItem>}
-        <ListItem>Network ports</ListItem>
-        <ListItem>DNS</ListItem>
-      </List>
-    </TextContent>
-  );
-};

package/lib/ocm/hooks/_use-feature-detection.test.tsx

@@ -1,115 +0,0 @@
-import type { Account, Organization } from '@openshift-assisted/types/accounts-management-service';
-import { describe, it, vi, expect } from 'vitest';
-import * as React from 'react';
-import { Provider } from 'react-redux';
-import { act } from 'react-dom/test-utils';
-import { featureFlagsActions } from '../store/slices/feature-flags/slice';
-import { storeDay1 } from '../store/store-day1';
-import { useFeatureDetection } from './use-feature-detection';
-import { CurrentAccountApi } from '../../common/api/accounts-management-service/current-account-api';
-import { OrganizationsApi } from '../../common/api/accounts-management-service/organizations-api';
-import { getMockContainer } from '../../_test-helpers/mock-container';
-
-vi.spyOn(featureFlagsActions, 'setFeatureFlag');
-vi.spyOn(CurrentAccountApi, 'getCurrentAccount').mockImplementation(() => {
-  return Promise.resolve({
-    username: 'jdoe',
-  } as Account);
-});
-
-const makeSpyOn$OrganizationsApi$getOrganization = (mockResponse: Organization) =>
-  vi.spyOn(OrganizationsApi, 'getOrganization').mockImplementation(() => {
-    return Promise.resolve(mockResponse);
-  });
-
-describe('use-feature-detection.ts', () => {
-  it('Sets only external features when no overrides are provided', async () => {
-    const DummyComponent: React.FC = () => {
-      useFeatureDetection();
-      return null;
-    };
-    makeSpyOn$OrganizationsApi$getOrganization({
-      capabilities: [
-        {
-          name: 'capability.organization.bare_metal_installer_platform_oci',
-          value: 'true',
-          inherited: true,
-        },
-      ],
-    });
-
-    const mockContainer = getMockContainer();
-
-    if (mockContainer) {
-      await act(() =>
-        Promise.resolve(
-          mockContainer.render(
-            <Provider store={storeDay1}>
-              <DummyComponent />
-            </Provider>,
-          ),
-        ),
-      );
-    }
-  });
-
-  it('Internal features override external features', async () => {
-    const DummyComponent: React.FC = () => {
-      return null;
-    };
-    makeSpyOn$OrganizationsApi$getOrganization({
-      capabilities: [
-        {
-          name: 'capability.organization.bare_metal_installer_platform_oci',
-          value: 'false',
-          inherited: true,
-        },
-      ],
-    });
-
-    const mockContainer = getMockContainer();
-
-    if (mockContainer) {
-      await act(() =>
-        Promise.resolve(
-          mockContainer.render(
-            <Provider store={storeDay1}>
-              <DummyComponent />
-            </Provider>,
-          ),
-        ),
-      );
-    }
-  });
-
-  it('Processes only features prefixed with ASSISTED_INSTALLER', async () => {
-    const featuresOverride = { NON_ASSISTED_INSTALLER_FEATURE: true };
-    const DummyComponent: React.FC = () => {
-      useFeatureDetection(featuresOverride);
-      return null;
-    };
-
-    const mockContainer = getMockContainer();
-
-    if (mockContainer) {
-      await act(() =>
-        Promise.resolve(
-          mockContainer.render(
-            <Provider store={storeDay1}>
-              <DummyComponent />
-            </Provider>,
-          ),
-        ),
-      );
-    }
-    /* Here we don't mock the call to the user organization API, therefore the
-     * capabilities in the currentUser slice should remain undefined, since the list
-     * of featuresOverride should get filtered out of features not prefixed with
-     * "ASSISTED_INSTALLER" there should be no call to setFeatureFlag.
-     */
-    expect(featureFlagsActions.setFeatureFlag).not.toHaveBeenCalled();
-    expect(
-      storeDay1.getState().featureFlags.data['NON_ASSISTED_INSTALLER_FEATURE'],
-    ).not.toBeDefined();
-  });
-});