@openshift-assisted/ui-lib 2.55.2 → 2.56.1

package/lib/ocm/components/wizard/steps/staticIp/components/StaticIpHostsArray.tsx

@@ -0,0 +1,288 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import cloneDeep from 'lodash-es/cloneDeep.js';
+import { FieldArray, FieldArrayRenderProps, useField } from 'formik';
+import {
+  Button,
+  ButtonVariant,
+  Checkbox,
+  Divider,
+  ExpandableSection,
+  ExpandableSectionToggle,
+  Flex,
+  FlexItem,
+  Grid,
+} from '@patternfly/react-core';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
+import { HostStaticNetworkConfig } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  getFormikArrayItemFieldName,
+  LoadingState,
+  ConfirmationModal,
+} from '../../../../../../common';
+import {
+  selectCurrentClusterPermissionsState,
+  selectIsCurrentClusterSNO,
+} from '../../../../../store';
+
+const fieldName = 'hosts';
+
+export type HostComponentProps = {
+  fieldName: string;
+  hostIdx: number;
+  isDisabled: boolean;
+};
+
+export type HostArrayProps<HostFieldType> = {
+  emptyHostData: HostFieldType;
+  enableCopyAboveConfiguration?: boolean;
+  CollapsedHostComponent: React.FC<HostComponentProps>;
+  ExpandedHostComponent: React.FC<HostComponentProps>;
+};
+
+type HostsProps<HostFieldType> = HostArrayProps<HostFieldType> & FieldArrayRenderProps;
+
+type SingleHostProps<HostFieldType> = {
+  hostIdx: number;
+  onRemove: () => void;
+  onToggleExpand: (isExpanded: boolean) => void;
+  isExpanded: boolean;
+  isDisabled: boolean;
+  emptyHostData: HostFieldType;
+  CollapsedHostComponent: React.FC<HostComponentProps>;
+  ExpandedHostComponent: React.FC<HostComponentProps>;
+  fieldName: string;
+  enableRemoveHost: boolean;
+};
+
+export const RemoveItemButton: React.FC<{
+  onRemove: () => void;
+  showRemoveButton: boolean;
+  dataTestId: string;
+}> = ({ onRemove, showRemoveButton, dataTestId }) => (
+  //use css visibility instead of conditional rendering to avoid button jumping when hovering
+  <Button
+    icon={<MinusCircleIcon onClick={onRemove} data-testid={dataTestId} />}
+    aria-label="remove host"
+    style={{ visibility: showRemoveButton ? 'visible' : 'hidden' }}
+    variant="plain"
+  />
+);
+
+const getHostName = (hostIdx: number) => `Host ${hostIdx + 1}`;
+
+const SingleHost = <HostFieldType,>({
+  fieldName,
+  hostIdx,
+  onRemove,
+  onToggleExpand,
+  isExpanded,
+  isDisabled,
+  CollapsedHostComponent,
+  ExpandedHostComponent,
+  enableRemoveHost,
+}: SingleHostProps<HostFieldType>) => {
+  //TODO: fix RemovableField reusable component to support this use case
+  const [showRemoveButton, setShowRemoveButton] = React.useState(false);
+  const updateShowRemoveButton = (value: boolean) => {
+    if (isDisabled) {
+      return;
+    }
+    if (!enableRemoveHost) {
+      setShowRemoveButton(false);
+    } else {
+      setShowRemoveButton(value);
+    }
+  };
+  const hostFieldName = getFormikArrayItemFieldName(fieldName, hostIdx);
+  return (
+    <Grid
+      onMouseEnter={() => updateShowRemoveButton(true)}
+      onMouseLeave={() => updateShowRemoveButton(false)}
+      hasGutter
+    >
+      <Flex>
+        <FlexItem>
+          <ExpandableSectionToggle
+            isExpanded={isExpanded}
+            onToggle={onToggleExpand}
+            direction="down"
+            data-testid={`toggle-host-${hostIdx}`}
+          >
+            {getHostName(hostIdx)}
+          </ExpandableSectionToggle>
+        </FlexItem>
+        {!isDisabled && enableRemoveHost && (
+          <FlexItem align={{ default: 'alignRight' }}>
+            <RemoveItemButton
+              onRemove={onRemove}
+              showRemoveButton={showRemoveButton}
+              dataTestId={`remove-host-${hostIdx}`}
+            />
+          </FlexItem>
+        )}
+      </Flex>
+
+      {isExpanded ? (
+        <ExpandableSection isDetached key={hostIdx} isExpanded>
+          <ExpandedHostComponent
+            fieldName={hostFieldName}
+            hostIdx={hostIdx}
+            isDisabled={isDisabled}
+          />
+        </ExpandableSection>
+      ) : (
+        <CollapsedHostComponent
+          fieldName={hostFieldName}
+          hostIdx={hostIdx}
+          isDisabled={isDisabled}
+        />
+      )}
+    </Grid>
+  );
+};
+
+type ExpandedHosts = { [hostIdx: number]: boolean };
+
+const getExpandedHostsInitialValue = (numHosts: number): ExpandedHosts => {
+  const ret: Record<number, boolean> = {};
+  for (let i = 0; i < numHosts; ++i) {
+    ret[i] = false;
+  }
+  return ret;
+};
+
+const getExpandedHostsDefaultValue = (numHosts: number): ExpandedHosts => {
+  const ret = getExpandedHostsInitialValue(numHosts);
+  if (numHosts === 1) {
+    ret[0] = true;
+  }
+  return ret;
+};
+
+const Hosts = <HostFieldType,>({
+  push,
+  remove,
+  enableCopyAboveConfiguration = false,
+  emptyHostData,
+  ...props
+}: HostsProps<HostFieldType>) => {
+  const [field, { error }] = useField<HostFieldType[]>({
+    name: fieldName,
+  });
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+  const canAddHosts = !useSelector(selectIsCurrentClusterSNO) && !isViewerMode;
+  const [expandedHosts, setExpandedHosts] = React.useState<ExpandedHosts>(
+    getExpandedHostsDefaultValue(field.value.length),
+  );
+  const [copyConfiguration, setCopyConfiguration] = React.useState<boolean>(
+    enableCopyAboveConfiguration,
+  );
+  const [hostIdxToRemove, setHostIdxToRemove] = React.useState<number | null>(null);
+
+  if (field.value === undefined) {
+    return <LoadingState />;
+  }
+
+  const onAddHost = () => {
+    const newHostData = cloneDeep(emptyHostData);
+    if (copyConfiguration) {
+      (newHostData as HostStaticNetworkConfig).networkYaml = cloneDeep(
+        (field.value[field.value.length - 1] as HostStaticNetworkConfig).networkYaml,
+      );
+    }
+    const newExpandedHosts = getExpandedHostsInitialValue(field.value.length + 1);
+    newExpandedHosts[field.value.length] = true;
+    setExpandedHosts(newExpandedHosts);
+    push(newHostData);
+  };
+
+  return (
+    <>
+      {field.value.map((_data, hostIdx) => {
+        const onToggleExpand = (isExpanded: boolean) => {
+          const newExpandedHosts = cloneDeep(expandedHosts);
+          newExpandedHosts[hostIdx] = isExpanded;
+          setExpandedHosts(newExpandedHosts);
+        };
+        return (
+          <React.Fragment key={hostIdx}>
+            <SingleHost
+              hostIdx={hostIdx}
+              onToggleExpand={onToggleExpand}
+              isExpanded={expandedHosts[hostIdx]}
+              isDisabled={isViewerMode}
+              onRemove={() => setHostIdxToRemove(hostIdx)}
+              fieldName={fieldName}
+              emptyHostData={emptyHostData}
+              enableRemoveHost={field.value.length > 1}
+              {...props}
+            />
+
+            <Divider />
+          </React.Fragment>
+        );
+      })}
+
+      {canAddHosts && (
+        <Flex>
+          <FlexItem>
+            <Button
+              variant="secondary"
+              onClick={onAddHost}
+              data-testid="add-host"
+              isDisabled={!!error}
+            >
+              Add another host configuration
+            </Button>
+          </FlexItem>
+          {enableCopyAboveConfiguration && (
+            <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
+              <Checkbox
+                label="Copy the YAML content"
+                isChecked={copyConfiguration}
+                onChange={(_event, val) => setCopyConfiguration(val)}
+                aria-label="copy host configuration"
+                name="copy-host-configuration"
+                id="copy-host-configuration"
+                data-testid="copy-host-configuration"
+              />
+            </FlexItem>
+          )}
+        </Flex>
+      )}
+
+      {hostIdxToRemove !== null && (
+        <ConfirmationModal
+          title={`Delete ${getHostName(hostIdxToRemove)}?`}
+          titleIconVariant="warning"
+          confirmationButtonText="Delete"
+          confirmationButtonVariant={ButtonVariant.danger}
+          content={
+            <>
+              <p>{`All the network configurations of ${getHostName(
+                hostIdxToRemove,
+              )} will be lost`}</p>
+            </>
+          }
+          onClose={() => setHostIdxToRemove(null)}
+          onConfirm={() => {
+            remove(hostIdxToRemove);
+            setHostIdxToRemove(null);
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export const StaticIpHostsArray = <HostFieldType,>({ ...props }: HostArrayProps<HostFieldType>) => {
+  const renderHosts = React.useCallback(
+    (arrayRenderProps: FieldArrayRenderProps) => (
+      <Hosts {...Object.assign(props, arrayRenderProps)} />
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+  return <FieldArray name={fieldName} render={renderHosts} />;
+};

package/lib/ocm/components/wizard/steps/staticIp/components/StaticIpPage.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import {
+  Content,
+  ContentVariants,
+  Alert,
+  AlertVariant,
+  Grid,
+  GridItem,
+} from '@patternfly/react-core';
+import { useFeature } from '../../../../../hooks';
+import { ClusterWizardStepHeader } from '../../../../../../common';
+import { useClusterWizardContext } from '../../../clusterWizardContext';
+import { StaticIpInfo, StaticIpView, getStaticIpInfo, getStaticNetworkConfig } from '../data';
+import { YamlView } from './YamlView';
+import { FormViewHosts } from './FormViewHosts';
+import { FormViewNetworkWide } from './FormViewNetworkWide';
+import { StaticIpViewRadioGroup } from './StaticIpViewRadioGroup';
+import { StaticIpFormState, StaticIpPageProps, StaticIpViewProps } from './propTypes';
+
+import './staticIp.css';
+
+const isoRegenerationAlert = (
+  <Alert
+    variant={AlertVariant.warning}
+    isInline={true}
+    data-testid="regenerate-iso-alert"
+    title="To add new hosts that will use the new or edited configurations, you'll need to regenerate the
+  Discovery ISO in the 'Host discovery' step and boot your new hosts from it."
+  />
+);
+
+export const StaticIpPage: React.FC<StaticIpPageProps> = ({
+  infraEnv,
+  updateInfraEnv,
+  onFormStateChange: onFormStateChangeParent,
+}) => {
+  const clusterWizardContext = useClusterWizardContext();
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const prefillFromInfraEnv = isSingleClusterFeatureEnabled && !!getStaticNetworkConfig(infraEnv);
+  const [confirmOnChangeView, setConfirmOnChangeView] = React.useState<boolean>(false);
+  const [viewChanged, setViewChanged] = React.useState<boolean>(false);
+
+  const onChangeView = React.useCallback(
+    (view: StaticIpView) => {
+      clusterWizardContext.onUpdateStaticIpView(view);
+      setViewChanged(true);
+    },
+    [clusterWizardContext],
+  );
+
+  const initialStaticIpInfo = React.useMemo<StaticIpInfo | undefined>(
+    () => getStaticIpInfo(infraEnv),
+    [infraEnv],
+  );
+
+  const onFormStateChange = React.useCallback(
+    (formState: StaticIpFormState) => {
+      const hasFilledData =
+        clusterWizardContext.currentStepId === 'static-ip-host-configurations' ||
+        !formState.isEmpty;
+      setConfirmOnChangeView(hasFilledData);
+      onFormStateChangeParent(formState);
+    },
+    [clusterWizardContext.currentStepId, onFormStateChangeParent],
+  );
+
+  const viewProps: StaticIpViewProps = {
+    onFormStateChange,
+    infraEnv,
+    updateInfraEnv,
+    showEmptyValues: viewChanged && !prefillFromInfraEnv,
+  };
+
+  const content = (() => {
+    switch (clusterWizardContext.currentStepId) {
+      case 'static-ip-yaml-view':
+        return <YamlView {...viewProps} />;
+      case 'static-ip-network-wide-configurations':
+        return <FormViewNetworkWide {...viewProps} />;
+      case 'static-ip-host-configurations':
+        return <FormViewHosts {...viewProps} />;
+      default:
+        throw new Error(
+          `Unexpected wizard step id ${clusterWizardContext.currentStepId} when entering static ip page`,
+        );
+    }
+  })();
+
+  if (!initialStaticIpInfo) {
+    return null;
+  }
+
+  return (
+    <Grid hasGutter>
+      <GridItem>
+        <ClusterWizardStepHeader>Static network configurations</ClusterWizardStepHeader>
+        <Content component={ContentVariants.small}>
+          Network configuration can be done using either the form view or YAML view. Configurations
+          done in this step are for discovering hosts.
+        </Content>
+      </GridItem>
+
+      {(clusterWizardContext.currentStepId === 'static-ip-network-wide-configurations' ||
+        clusterWizardContext.currentStepId === 'static-ip-yaml-view') && (
+        <StaticIpViewRadioGroup
+          initialView={initialStaticIpInfo.view}
+          confirmOnChangeView={confirmOnChangeView}
+          onChangeView={onChangeView}
+        />
+      )}
+      {initialStaticIpInfo.isDataComplete && isoRegenerationAlert}
+      {content}
+    </Grid>
+  );
+};

package/lib/ocm/components/wizard/steps/staticIp/components/StaticIpViewRadioGroup.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Alert, AlertVariant, ButtonVariant, Form, FormGroup } from '@patternfly/react-core';
+import { useAlerts, getFieldId, ConfirmationModal } from '../../../../../../common';
+import { OcmRadio } from '../../../../ui';
+import { StaticIpView } from '../data';
+
+export type StaticIpViewRadioGroupProps = {
+  initialView: StaticIpView;
+  confirmOnChangeView: boolean;
+  onChangeView(view: StaticIpView): void;
+};
+
+export const StaticIpViewRadioGroup = ({
+  initialView,
+  confirmOnChangeView,
+  onChangeView,
+}: StaticIpViewRadioGroupProps) => {
+  const { clearAlerts } = useAlerts();
+  const GROUP_NAME = 'select-static-ip-view';
+  const [confirmView, setConfirmView] = React.useState<StaticIpView>();
+  const [view, setView] = React.useState<StaticIpView>(initialView);
+  const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const selectedView = event.currentTarget.value as StaticIpView;
+    if (confirmOnChangeView) {
+      setConfirmView(selectedView);
+    } else {
+      setView(selectedView);
+      onChangeView(selectedView);
+    }
+  };
+
+  const onConfirm = (selectedView: StaticIpView) => {
+    clearAlerts();
+    setView(selectedView);
+    setConfirmView(undefined);
+    onChangeView(selectedView);
+  };
+
+  const onCancel = () => {
+    setConfirmView(undefined);
+  };
+
+  const getCurrentViewText = () => {
+    return view === StaticIpView.YAML ? 'YAML' : 'form';
+  };
+
+  const isFormViewSelected = view === StaticIpView.FORM;
+
+  return (
+    <>
+      <Form isHorizontal>
+        <FormGroup
+          fieldId={getFieldId(GROUP_NAME, 'radio')}
+          isInline
+          label="Configure via :"
+          className="static-config-type-label"
+        >
+          <OcmRadio
+            label="Form view"
+            name={GROUP_NAME}
+            data-testid="select-form-view"
+            id="select-form-view"
+            value={StaticIpView.FORM}
+            isChecked={isFormViewSelected}
+            onChange={handleChange}
+          />
+          <OcmRadio
+            label="YAML view"
+            name={GROUP_NAME}
+            data-testid="select-yaml-view"
+            id="select-yaml-view"
+            value={StaticIpView.YAML}
+            isChecked={!isFormViewSelected}
+            onChange={handleChange}
+          />
+        </FormGroup>
+      </Form>
+      {isFormViewSelected && (
+        <Alert
+          variant={AlertVariant.info}
+          isInline
+          title={
+            'Form view supports basic configurations. Select YAML view for advanced configurations.'
+          }
+        />
+      )}
+      {confirmView && (
+        <ConfirmationModal
+          title={'Change configuration option?'}
+          titleIconVariant={'warning'}
+          confirmationButtonText={'Change'}
+          confirmationButtonVariant={ButtonVariant.primary}
+          content={
+            <>
+              <p>{`All data and configuration done in ${getCurrentViewText()} view will be lost.`}</p>
+            </>
+          }
+          onClose={onCancel}
+          onConfirm={() => onConfirm(confirmView)}
+        />
+      )}
+    </>
+  );
+};

package/lib/ocm/components/wizard/steps/staticIp/components/YamlView/MacIpMapping.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { ArrayHelpers, FieldArray } from 'formik';
+import { GridItem, Grid, Button } from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { MacInterfaceMap } from '@openshift-assisted/types/assisted-installer-service';
+import { getFormikArrayItemFieldName, RemovableField } from '../../../../../../../common';
+import { selectCurrentClusterPermissionsState } from '../../../../../../store';
+import { OcmInputField } from '../../../../../ui/OcmFormFields';
+
+const AddMapping: React.FC<{
+  onPush: ArrayHelpers['push'];
+}> = ({ onPush }) => {
+  return (
+    <Button
+      icon={<PlusCircleIcon />}
+      isInline
+      onClick={() => onPush({ macAddress: '', logicalNicName: '' })}
+      data-testid="add-mapping"
+      variant="link"
+    >
+      Add another MAC to interface name mapping
+    </Button>
+  );
+};
+
+const MacMappingItem = ({
+  fieldName,
+  onRemove,
+  mapIdx,
+  enableRemove,
+  hostIdx,
+}: {
+  fieldName: string;
+  onRemove: () => void;
+  mapIdx: number;
+  hostIdx: number;
+  enableRemove: boolean;
+}) => {
+  return (
+    <RemovableField hideRemoveButton={!enableRemove} onRemove={onRemove}>
+      <Grid hasGutter>
+        <GridItem span={6}>
+          <OcmInputField
+            label="MAC address"
+            isRequired
+            name={`${fieldName}.macAddress`}
+            data-testid={`mac-address-${hostIdx}-${mapIdx}`}
+          />
+        </GridItem>
+        <GridItem span={6}>
+          <OcmInputField
+            label="Interface name"
+            isRequired
+            name={`${fieldName}.logicalNicName`}
+            data-testid={`interface-name-${hostIdx}-${mapIdx}`}
+          />
+        </GridItem>
+      </Grid>
+    </RemovableField>
+  );
+};
+
+export const MacIpMapping = ({
+  fieldName,
+  macInterfaceMap,
+  hostIdx,
+}: {
+  fieldName: string;
+  macInterfaceMap: MacInterfaceMap;
+  hostIdx: number;
+}) => {
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+
+  return (
+    <Grid className="mac-ip-mapping">
+      <FieldArray
+        name={fieldName}
+        validateOnChange={false}
+        render={({ push, remove }) => (
+          <Grid hasGutter>
+            <GridItem span={6}>
+              {macInterfaceMap.map((_, idx) => (
+                <MacMappingItem
+                  key={getFormikArrayItemFieldName(fieldName, idx)}
+                  fieldName={getFormikArrayItemFieldName(fieldName, idx)}
+                  onRemove={() => remove(idx)}
+                  mapIdx={idx}
+                  enableRemove={!isViewerMode && idx > 0}
+                  hostIdx={hostIdx}
+                />
+              ))}
+            </GridItem>
+            <GridItem>{!isViewerMode && <AddMapping onPush={push} />}</GridItem>
+          </Grid>
+        )}
+      />
+    </Grid>
+  );
+};

package/lib/ocm/components/wizard/steps/staticIp/components/YamlView/YamlView.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
+import { StaticIpForm } from '../StaticIpForm';
+import { useTranslation } from '../../../../../../../common';
+import { StaticIpFormProps, StaticIpViewProps } from '../propTypes';
+import { getEmptyYamlValues, getYamlViewValues, YamlViewValues } from '../../data';
+import { yamlViewValidationSchema } from './yamlViewValidationSchema';
+import { YamlViewFields } from './YamlViewFields';
+
+export const YamlView: React.FC<StaticIpViewProps> = ({ ...props }) => {
+  const { t } = useTranslation();
+
+  const formProps: StaticIpFormProps<YamlViewValues> = {
+    ...props,
+    validationSchema: yamlViewValidationSchema(t),
+    getInitialValues: (infraEnv: InfraEnv) => {
+      return getYamlViewValues(infraEnv);
+    },
+    getUpdateParams: (currentInfraEnv: InfraEnv, values: YamlViewValues) => values.hosts,
+    getEmptyValues: () => getEmptyYamlValues(),
+  };
+
+  return (
+    <StaticIpForm<YamlViewValues> {...formProps}>
+      <YamlViewFields />
+    </StaticIpForm>
+  );
+};