add reset button to disconnected assisted installer ui

Signed-off-by: Elay Aharoni <elayaha@gmail.com>

Author: ElayAharoni

apps/assisted-disconnected-ui/src/components/ClusterPage.tsx

@@ -1,9 +1,10 @@
 import { SingleClusterPage } from '@openshift-assisted/ui-lib/ocm';
 import { useParams } from 'react-router-dom-v5-compat';
+import ResetSingleClusterModal from './ResetSingleClusterModal';
 
 const ClusterPage = () => {
   const { clusterId } = useParams() as { clusterId: string };
-  return <SingleClusterPage clusterId={clusterId} />;
+  return <SingleClusterPage clusterId={clusterId} resetModal={<ResetSingleClusterModal />} />;
 };
 
 export default ClusterPage;

apps/assisted-disconnected-ui/src/components/CreateClusterWizard.tsx

@@ -6,9 +6,11 @@ import {
   OpenShiftVersionsContextProvider,
   NewFeatureSupportLevelProvider,
   NewClusterWizard,
+  ModalDialogsContextProvider,
 } from '@openshift-assisted/ui-lib/ocm';
 import { Alert, PageSection, PageSectionVariants } from '@patternfly/react-core';
 import { useNavigate } from 'react-router-dom-v5-compat';
+import ResetSingleClusterModal from './ResetSingleClusterModal';
 
 const CreateClusterWizard = () => {
   const [clusterId, isLoading, error] = useCluster();
@@ -32,11 +34,14 @@ const CreateClusterWizard = () => {
   return (
     <AlertsContextProvider>
       <ClusterWizardContextProvider>
-        <OpenShiftVersionsContextProvider>
-          <NewFeatureSupportLevelProvider loadingUi={<ClusterLoading />}>
-            <NewClusterWizard />
-          </NewFeatureSupportLevelProvider>
-        </OpenShiftVersionsContextProvider>
+        <ModalDialogsContextProvider>
+          <OpenShiftVersionsContextProvider>
+            <NewFeatureSupportLevelProvider loadingUi={<ClusterLoading />}>
+              <NewClusterWizard />
+              <ResetSingleClusterModal />
+            </NewFeatureSupportLevelProvider>
+          </OpenShiftVersionsContextProvider>
+        </ModalDialogsContextProvider>
       </ClusterWizardContextProvider>
     </AlertsContextProvider>
   );

apps/assisted-disconnected-ui/src/components/ResetSingleClusterModal.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import {
+  Button,
+  Modal,
+  ModalVariant,
+  ButtonVariant,
+  Text,
+  TextContent,
+  Stack,
+  StackItem,
+  Alert,
+} from '@patternfly/react-core';
+import { useModalDialogsContext, ClustersService } from '@openshift-assisted/ui-lib/ocm';
+import {
+  getApiErrorMessage,
+  handleApiError,
+  LoadingState,
+  useTranslation,
+} from '@openshift-assisted/ui-lib/common';
+import { useNavigate } from 'react-router-dom-v5-compat';
+
+const ResetSingleClusterModal: React.FC = () => {
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState<{ title: string; message: string }>();
+  const { resetSingleClusterDialog } = useModalDialogsContext();
+  const { data, isOpen, close: onClose } = resetSingleClusterDialog;
+  const cluster = data?.cluster;
+  const { t } = useTranslation();
+
+  if (!cluster) {
+    return null;
+  }
+
+  const handleClose = () => {
+    setError(undefined);
+    onClose();
+  };
+
+  const handleResetAsync = async () => {
+    try {
+      setError(undefined);
+      setIsLoading(true);
+      await ClustersService.remove(cluster.id);
+      navigate(`/`);
+    } catch (e) {
+      handleApiError(e, () => {
+        setError({
+          title: t('ai:Failed to reset cluster installation'),
+          message: getApiErrorMessage(e),
+        });
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const getModalContent = () => {
+    if (isLoading) {
+      return <LoadingState content={t('ai:Resetting cluster installation...')} />;
+    }
+
+    return (
+      <Stack hasGutter>
+        <StackItem>
+          <TextContent>
+            <Text component="p">
+              {t('ai:This will remove all current configurations and will revert to the defaults.')}
+            </Text>
+
+            <Text component="p">{t('ai:Are you sure you want to reset the cluster?')}</Text>
+          </TextContent>
+        </StackItem>
+        {error && (
+          <StackItem>
+            <Alert isInline variant="danger" title={error.title}>
+              {error.message}
+            </Alert>
+            ;
+          </StackItem>
+        )}
+      </Stack>
+    );
+  };
+
+  const actions = [
+    <Button
+      key="reset"
+      variant={ButtonVariant.danger}
+      onClick={() => void handleResetAsync()}
+      isDisabled={isLoading}
+    >
+      {t('ai:Reset')}
+    </Button>,
+    <Button key="cancel" variant={ButtonVariant.link} onClick={handleClose} isDisabled={isLoading}>
+      {t('ai:Cancel')}
+    </Button>,
+  ];
+
+  return (
+    <Modal
+      title={t('ai:Reset cluster')}
+      titleIconVariant="warning"
+      isOpen={isOpen}
+      variant={ModalVariant.small}
+      actions={actions}
+      onClose={handleClose}
+    >
+      {getModalContent()}
+    </Modal>
+  );
+};
+
+export default ResetSingleClusterModal;

libs/locales/.i18next-parser.config.cjs

@@ -1,7 +1,7 @@
 const defaultNS = process.env.TRANSLATION_NAMESPACE || 'translation';
 
 module.exports = {
-  input: '../ui-lib/lib/**/*.{js,jsx,ts,tsx}',
+  input: ['../ui-lib/lib/**/*.{js,jsx,ts,tsx}', '../../apps/**/**/*.{js,jsx,ts,tsx}'],
   contextSeparator: '_',
   createOldCatalogs: false,
   keySeparator: false,

libs/locales/lib/en/translation.json

@@ -102,6 +102,7 @@
   "ai:Approve host to join infrastructure environment": "Approve host to join infrastructure environment",
   "ai:Approve hosts dialog": "Approve hosts dialog",
   "ai:Approve hosts to join infrastructure environment": "Approve hosts to join infrastructure environment",
+  "ai:Are you sure you want to reset the cluster?": "Are you sure you want to reset the cluster?",
   "ai:arm64": "arm64",
   "ai:arm64 is not supported in this OpenShift version": "arm64 is not supported in this OpenShift version",
   "ai:At least 3 hosts are required, capable of functioning as control plane nodes.": "At least 3 hosts are required that are capable of functioning as control plane nodes.",
@@ -327,6 +328,7 @@
   "ai:Failed to fetch cluster credentials.": "Failed to fetch cluster credentials.",
   "ai:Failed to get Provisioning Configuration": "Failed to get Provisioning Configuration",
   "ai:Failed to patch assisted-image-service route for new domain.": "Failed to patch assisted-image-service route for new domain.",
+  "ai:Failed to reset cluster installation": "Failed to reset cluster installation",
   "ai:Failed to save ClusterDeployment": "Failed to save ClusterDeployment",
   "ai:Failed to save configuration": "Failed to save configuration",
   "ai:Failed to save host selection.": "Failed to save host selection.",
@@ -706,8 +708,11 @@
   "ai:Report a bug": "Report a bug",
   "ai:Required field": "Required field",
   "ai:Required.": "Required.",
+  "ai:Reset": "Reset",
+  "ai:Reset cluster": "Reset cluster",
   "ai:Reset host": "Reset host",
   "ai:Resetting": "Resetting",
+  "ai:Resetting cluster installation...": "Resetting cluster installation...",
   "ai:Returning to the infrastructure environment": "Returning to the infrastructure environment",
   "ai:Review and create": "Review and create",
   "ai:Role": "Role",
@@ -846,6 +851,7 @@
   "ai:This stage may take a while to finish. To view detailed information, click the events log link below.": "This stage might take a while to finish. To view detailed information, click the events log link.",
   "ai:This subnet range is not available on all hosts": "This subnet range is not available on all hosts",
   "ai:This will determine for the infrastructure environment which kind of hosts would be able to be added. If the hosts that you want to add are using DHCP server, select this option, else, select the static IP.": "This will determine for the infrastructure environment which kind of hosts would be able to be added. If the hosts that you want to add are using DHCP server, select this option. If not, select the static IP.",
+  "ai:This will remove all current configurations and will revert to the defaults.": "This will remove all current configurations and will revert to the defaults.",
   "ai:Time": "Time",
   "ai:Time synced between host and service": "Time synced between host and service",
   "ai:to add a number.": "to add a number.",
@@ -930,5 +936,7 @@
   "ai:You have opted out of formatting bootable disks on some hosts. To ensure the hosts reboot into the expected installation disk, manual user intervention may be required during OpenShift installation.": "You have opted out of formatting bootable disks on some hosts. To ensure the hosts reboot into the expected installation disk, manual user intervention might be required during OpenShift installation.",
   "ai:You'll first need to have a storage operator in order to create the storage class. If you don't have one installed, we recommend OpenShift Data Foundation operator, but you may use any.": "You need a storage operator installed, such as OpenShift Data Foundation, to create the storage class.",
   "ai:Your libvirt virtual machines should be configured to restart automatically after a reboot. You can check this by running:": "Your libvirt virtual machines should be configured to restart automatically after a reboot. You can check this by running:",
-  "ai:Your own NTP (Network Time Protocol) sources": "Your own NTP (Network Time Protocol) sources"
+  "ai:Your own NTP (Network Time Protocol) sources": "Your own NTP (Network Time Protocol) sources",
+  "hostsNetworkConfigurationType": "hostsNetworkConfigurationType",
+  "machineNetworks": "machineNetworks"
 }

libs/ui-lib/lib/common/components/ui/WizardFooter.tsx

@@ -20,6 +20,7 @@ export type WizardFooterGenericProps = {
   onNext?: () => void;
   onBack?: () => void;
   onCancel?: () => void;
+  onReset?: () => void;
   isNextDisabled?: boolean;
   isBackDisabled?: boolean;
   isSubmitting?: boolean;
@@ -41,6 +42,7 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
   onNext,
   onBack,
   onCancel,
+  onReset,
   isNextDisabled,
   isBackDisabled,
   leftExtraActions,
@@ -95,6 +97,18 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
               </Button>
             </ActionListItem>
           )}
+          {onReset && cluster && (
+            <ActionListItem>
+              <Button
+                variant={ButtonVariant.link}
+                name="reset"
+                onClick={onReset}
+                isDisabled={isSubmitting}
+              >
+                {t('ai:Reset')}
+              </Button>
+            </ActionListItem>
+          )}
           {isSubmitting && (
             <ActionListItem>
               <Text component={TextVariants.small}>

libs/ui-lib/lib/common/hooks/index.ts

@@ -1,2 +1,3 @@
 export { default as useStateSafely } from './useStateSafely';
 export { default as useDeepCompareMemoize } from './useDeepCompareMemoize';
+export { useTranslation } from './use-translation-wrapper';

libs/ui-lib/lib/common/index.ts

@@ -9,4 +9,5 @@ export * from './config';
 export * from './features';
 export * from './reducers';
 export * from './selectors';
+export * from './hooks';
 export { ResourceUIState } from './types/resource-ui-state';

libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardFooter.tsx

@@ -16,6 +16,7 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { onFetchEvents } from '../fetching/fetchEvents';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { useFeature } from '../../hooks/use-feature';
+import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
 
 type ClusterValidationSectionProps = {
   cluster?: Cluster;
@@ -84,9 +85,15 @@ const ClusterWizardFooter = ({
   const { alerts } = useAlerts();
   const navigate = useNavigate();
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const { currentStepId } = useClusterWizardContext();
+  const { resetSingleClusterDialog } = useModalDialogsContext();
 
   const handleCancel = React.useCallback(() => navigate('/cluster-list'), [navigate]);
 
+  const handleReset = React.useCallback(() => {
+    resetSingleClusterDialog.open({ cluster });
+  }, [resetSingleClusterDialog, cluster]);
+
   const alertsSection = alerts.length ? <Alerts /> : undefined;
 
   const errorsSection = (
@@ -103,6 +110,11 @@ const ClusterWizardFooter = ({
       alerts={alertsSection}
       errors={errorsSection}
       onCancel={isSingleClusterFeatureEnabled ? undefined : onCancel || handleCancel}
+      onReset={
+        isSingleClusterFeatureEnabled && currentStepId !== 'cluster-details'
+          ? handleReset
+          : undefined
+      }
       leftExtraActions={additionalActions}
       cluster={cluster}
       onFetchEvents={onFetchEvents}

libs/ui-lib/lib/ocm/components/clusters/ClusterPage.tsx

@@ -38,9 +38,11 @@ import { OpenShiftVersionsContextProvider } from '../clusterWizard/OpenShiftVers
 const ClusterPageGeneric = ({
   clusterId,
   showBreadcrumbs = false,
+  resetModal,
 }: {
   clusterId: string;
   showBreadcrumbs?: boolean;
+  resetModal?: React.ReactNode;
 }) => {
   const fetchCluster = useFetchCluster(clusterId);
   const dispatch = useDispatch();
@@ -183,6 +185,7 @@ const ClusterPageGeneric = ({
                     {uiState === ResourceUIState.UPDATE_ERROR && <ClusterUpdateErrorModal />}
                     <CancelInstallationModal />
                     <ResetClusterModal />
+                    {resetModal}
                     <DiscoveryImageModal />
                   </NewFeatureSupportLevelProvider>
                 </OpenShiftVersionsContextProvider>
@@ -197,9 +200,15 @@ const ClusterPageGeneric = ({
   return <Navigate to="/clusters" />;
 };
 
-export const SingleClusterPage = ({ clusterId }: { clusterId: string }) => (
+export const SingleClusterPage = ({
+  clusterId,
+  resetModal,
+}: {
+  clusterId: string;
+  resetModal: React.ReactNode;
+}) => (
   <AlertsContextProvider>
-    <ClusterPageGeneric clusterId={clusterId} />
+    <ClusterPageGeneric clusterId={clusterId} resetModal={resetModal} />
   </AlertsContextProvider>
 );
 

libs/ui-lib/lib/ocm/components/hosts/ModalDialogsContext.tsx

@@ -40,6 +40,10 @@ type MassDeleteHostDialogProps = {
   reloadCluster: VoidFunction;
 };
 
+type ResetSingleClusterDialogProps = {
+  cluster?: Cluster;
+};
+
 type ModalDialogsDataTypes = {
   eventsDialog: HostIdAndHostname;
   editHostDialog: EditHostProps;
@@ -53,6 +57,7 @@ type ModalDialogsDataTypes = {
   UpdateDay2ApiVipDialog: void;
   massUpdateHostnameDialog: MassUpdateHostnameDialogProps;
   massDeleteHostDialog: MassDeleteHostDialogProps;
+  resetSingleClusterDialog: ResetSingleClusterDialogProps;
 };
 
 type DialogId =
@@ -67,7 +72,8 @@ type DialogId =
   | 'day2DiscoveryImageDialog'
   | 'UpdateDay2ApiVipDialog'
   | 'massUpdateHostnameDialog'
-  | 'massDeleteHostDialog';
+  | 'massDeleteHostDialog'
+  | 'resetSingleClusterDialog';
 
 export type ModalDialogsContextType = {
   [key in DialogId]: {
@@ -91,6 +97,7 @@ const dialogIds: DialogId[] = [
   'UpdateDay2ApiVipDialog',
   'massUpdateHostnameDialog',
   'massDeleteHostDialog',
+  'resetSingleClusterDialog',
 ];
 
 const ModalDialogsContext = React.createContext<ModalDialogsContextType | undefined>(undefined);