@openshift-assisted/ui-lib 5.0.0-cim → 5.0.2-cim

package/lib/ocm/components/clusterWizard/disconnected/BasicStep.tsx

@@ -1,68 +1,47 @@
 import * as React from 'react';
-import {
-  ClusterWizardStep,
-  TechnologyPreview,
-  ExternalLink,
-  OCP_RELEASES_PAGE,
-  StaticTextField,
-  useTranslation,
-} from '../../../../common';
+import { ClusterWizardStep, TechnologyPreview, StaticTextField } from '../../../../common';
 import { Flex, Grid, GridItem, Form, Content } from '@patternfly/react-core';
-import OcmOpenShiftVersion from '../../clusterConfiguration/OcmOpenShiftVersion';
 import { useClusterWizardContext } from '../ClusterWizardContext';
 import ClusterWizardFooter from '../ClusterWizardFooter';
 import ClusterWizardNavigation from '../ClusterWizardNavigation';
 import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
 import InstallDisconnectedSwitch from './InstallDisconnectedSwitch';
-import { Formik } from 'formik';
+
+export const DISCONNECTED_OPENSHIFT_VERSION = '4.21';
 
 const BasicStep = () => {
-  const { t } = useTranslation();
   const { moveNext } = useClusterWizardContext();
 
   return (
-    <Formik
-      initialValues={{}}
-      onSubmit={() => {
-        // nothing to do
-      }}
+    <ClusterWizardStep
+      navigation={<ClusterWizardNavigation />}
+      footer={<ClusterWizardFooter onNext={moveNext} />}
     >
-      <ClusterWizardStep
-        navigation={<ClusterWizardNavigation />}
-        footer={<ClusterWizardFooter onNext={moveNext} />}
-      >
-        <WithErrorBoundary title="Failed to load Basic step">
-          <Grid hasGutter>
-            <GridItem>
-              <Content component="h2">Basic information</Content>
-            </GridItem>
-            <GridItem>
-              <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
-                <TechnologyPreview />
-                <InstallDisconnectedSwitch />
-                <span>
-                  {t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
-                </span>
-              </Flex>
-            </GridItem>
-            <GridItem>
-              <Form id="wizard-cluster-basic-info__form">
-                <OcmOpenShiftVersion openshiftVersion="4.20" withPreviewText withMultiText>
-                  <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
-                    <span data-ouia-id="openshift-releases-link">
-                      {t('ai:Learn more about OpenShift releases')}
-                    </span>
-                  </ExternalLink>
-                </OcmOpenShiftVersion>
-                <StaticTextField name="cpuArchitecture" label="CPU architecture" isRequired>
-                  x86_64
-                </StaticTextField>
-              </Form>
-            </GridItem>
-          </Grid>
-        </WithErrorBoundary>
-      </ClusterWizardStep>
-    </Formik>
+      <WithErrorBoundary title="Failed to load Basic step">
+        <Grid hasGutter>
+          <GridItem>
+            <Content component="h2">Basic information</Content>
+          </GridItem>
+          <GridItem>
+            <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
+              <TechnologyPreview />
+              <InstallDisconnectedSwitch />
+              <span>I'm installing on a disconnected/air-gapped/secured environment</span>
+            </Flex>
+          </GridItem>
+          <GridItem>
+            <Form id="wizard-cluster-basic-info__form">
+              <StaticTextField name="openshiftVersion" label="OpenShift version">
+                {DISCONNECTED_OPENSHIFT_VERSION}
+              </StaticTextField>
+              <StaticTextField name="cpuArchitecture" label="CPU architecture">
+                x86_64
+              </StaticTextField>
+            </Form>
+          </GridItem>
+        </Grid>
+      </WithErrorBoundary>
+    </ClusterWizardStep>
   );
 };
 

package/lib/ocm/components/clusterWizard/disconnected/OptionalConfigurationsStep.tsx

@@ -0,0 +1,173 @@
+import * as React from 'react';
+import { Formik, useFormikContext } from 'formik';
+import * as Yup from 'yup';
+import { AlertVariant } from '@patternfly/react-core';
+import { Form, Grid, GridItem, Content } from '@patternfly/react-core';
+import {
+  ClusterWizardStep,
+  PullSecret,
+  UploadSSH,
+  handleApiError,
+  getApiErrorMessage,
+  isInOcm,
+  pullSecretValidationSchema,
+  sshPublicKeyValidationSchema,
+  useAlerts,
+  useTranslation,
+} from '../../../../common';
+import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
+import { useClusterWizardContext } from '../ClusterWizardContext';
+import ClusterWizardFooter from '../ClusterWizardFooter';
+import ClusterWizardNavigation from '../ClusterWizardNavigation';
+import { InfraEnvsAPI, ClustersAPI } from '../../../services/apis';
+import { ImageType } from '@openshift-assisted/types/assisted-installer-service';
+import usePullSecret from '../../../hooks/usePullSecret';
+import { DISCONNECTED_OPENSHIFT_VERSION } from './BasicStep';
+
+const DISCONNECTED_IMAGE_TYPE: ImageType = 'disconnected-iso';
+const DISCONNECTED_CLUSTER_NAME = 'disconnected-cluster';
+
+type OptionalConfigurationsValues = {
+  sshPublicKey: string;
+  pullSecret: string;
+};
+
+type OptionalConfigurationsFormProps = {
+  defaultPullSecret?: string;
+  isSubmitting: boolean;
+};
+
+const OptionalConfigurationsForm: React.FC<OptionalConfigurationsFormProps> = ({
+  defaultPullSecret,
+  isSubmitting,
+}) => {
+  const { moveBack } = useClusterWizardContext();
+  const { isValid, submitForm } = useFormikContext<OptionalConfigurationsValues>();
+
+  return (
+    <ClusterWizardStep
+      navigation={<ClusterWizardNavigation />}
+      footer={
+        <ClusterWizardFooter
+          onNext={() => void submitForm()}
+          onBack={moveBack}
+          isSubmitting={isSubmitting}
+          isNextDisabled={!isValid}
+        />
+      }
+    >
+      <WithErrorBoundary title="Failed to load Optional configurations step">
+        <Grid hasGutter>
+          <GridItem>
+            <Content component="h2">Optional configurations</Content>
+          </GridItem>
+          <GridItem>
+            <Form id="wizard-cluster-optional-config__form">
+              <UploadSSH />
+              {!isInOcm && <PullSecret isOcm={false} defaultPullSecret={defaultPullSecret} />}
+            </Form>
+          </GridItem>
+        </Grid>
+      </WithErrorBoundary>
+    </ClusterWizardStep>
+  );
+};
+
+const OptionalConfigurationsStep = () => {
+  const { t } = useTranslation();
+  const {
+    moveNext,
+    disconnectedCluster,
+    setDisconnectedCluster,
+    disconnectedInfraEnv,
+    setDisconnectedInfraEnv,
+  } = useClusterWizardContext();
+  const { addAlert, clearAlerts } = useAlerts();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const defaultPullSecret = usePullSecret();
+
+  const validationSchema = React.useMemo(
+    () =>
+      Yup.object({
+        sshPublicKey: sshPublicKeyValidationSchema(t),
+        pullSecret: isInOcm ? Yup.string() : pullSecretValidationSchema(t),
+      }),
+    [t],
+  );
+
+  const initialValues: OptionalConfigurationsValues = {
+    sshPublicKey: disconnectedInfraEnv?.sshAuthorizedKey ?? '',
+    pullSecret: defaultPullSecret ?? '',
+  };
+
+  const handleNext = React.useCallback(
+    async (values: OptionalConfigurationsValues) => {
+      clearAlerts();
+      setIsSubmitting(true);
+      try {
+        const pullSecretToUse = isInOcm ? defaultPullSecret ?? '' : values.pullSecret;
+
+        if (disconnectedCluster?.id && disconnectedInfraEnv?.id) {
+          const { data: updatedInfraEnv } = await InfraEnvsAPI.update(disconnectedInfraEnv.id, {
+            sshAuthorizedKey: values.sshPublicKey,
+          });
+          setDisconnectedInfraEnv(updatedInfraEnv);
+        } else {
+          const { data: cluster } = await ClustersAPI.registerDisconnected({
+            name: DISCONNECTED_CLUSTER_NAME,
+            openshiftVersion: DISCONNECTED_OPENSHIFT_VERSION,
+          });
+          setDisconnectedCluster(cluster);
+
+          const { data: createdInfraEnv } = await InfraEnvsAPI.register({
+            name: 'disconnected-infra-env',
+            pullSecret: pullSecretToUse,
+            clusterId: cluster.id,
+            imageType: DISCONNECTED_IMAGE_TYPE,
+            openshiftVersion: DISCONNECTED_OPENSHIFT_VERSION,
+            sshAuthorizedKey: values.sshPublicKey || undefined,
+          });
+          setDisconnectedInfraEnv(createdInfraEnv);
+        }
+
+        moveNext();
+      } catch (error) {
+        handleApiError(error, () => {
+          addAlert({
+            title: 'Failed to save optional configurations',
+            message: getApiErrorMessage(error),
+            variant: AlertVariant.danger,
+          });
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [
+      clearAlerts,
+      defaultPullSecret,
+      disconnectedCluster,
+      disconnectedInfraEnv,
+      setDisconnectedCluster,
+      setDisconnectedInfraEnv,
+      addAlert,
+      moveNext,
+    ],
+  );
+
+  return (
+    <Formik<OptionalConfigurationsValues>
+      initialValues={initialValues}
+      enableReinitialize
+      validationSchema={validationSchema}
+      onSubmit={(values) => void handleNext(values)}
+    >
+      <OptionalConfigurationsForm
+        defaultPullSecret={defaultPullSecret}
+        isSubmitting={isSubmitting}
+      />
+    </Formik>
+  );
+};
+
+export default OptionalConfigurationsStep;

package/lib/ocm/components/clusterWizard/disconnected/ReviewStep.tsx

@@ -26,15 +26,13 @@ import {
 } from '@patternfly/react-core';
 import { Formik } from 'formik';
 import { saveAs } from 'file-saver';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router';
 
 import { getOperatorSpecs } from '../../../../common/components/operators/operatorSpecs';
-
-const downloadUrl =
-  'https://mirror.openshift.com/pub/cgw/assisted-installer-disconnected/latest/agent-ove.x86_64.iso';
+import { DISCONNECTED_OPENSHIFT_VERSION } from './BasicStep';
 
 const ReviewStep = () => {
-  const { moveBack } = useClusterWizardContext();
+  const { moveBack, disconnectedInfraEnv } = useClusterWizardContext();
   const opSpecs = getOperatorSpecs(() => undefined);
   const navigate = useNavigate();
 
@@ -50,8 +48,8 @@ const ReviewStep = () => {
         footer={
           <ClusterWizardFooter
             onNext={() => {
-              downloadUrl && saveAs(downloadUrl);
-              navigate('/cluster-list');
+              saveAs(disconnectedInfraEnv?.downloadUrl ?? '');
+              void navigate('/cluster-list');
             }}
             onBack={moveBack}
             nextButtonText="Download ISO"
@@ -98,11 +96,15 @@ const ReviewStep = () => {
             <DescriptionList isHorizontal>
               <DescriptionListGroup>
                 <DescriptionListTerm>OpenShift version</DescriptionListTerm>
-                <DescriptionListDescription>4.20</DescriptionListDescription>
+                <DescriptionListDescription>
+                  {disconnectedInfraEnv?.openshiftVersion ?? DISCONNECTED_OPENSHIFT_VERSION}
+                </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>CPU architecture</DescriptionListTerm>
-                <DescriptionListDescription>x86_64</DescriptionListDescription>
+                <DescriptionListDescription>
+                  {disconnectedInfraEnv?.cpuArchitecture ?? 'x86_64'}
+                </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>ISO size</DescriptionListTerm>

package/lib/ocm/components/clusterWizard/wizardTransition.ts

@@ -1,5 +1,10 @@
 import {
-  findValidationStep,
+  Cluster,
+  ClusterValidationId,
+  Host,
+  HostValidationId,
+} from '@openshift-assisted/types/assisted-installer-service';
+import {
   getAllClusterWizardSoftValidationIds,
   getWizardStepClusterStatus,
   WizardStepsValidationMap,
@@ -12,11 +17,9 @@ import {
   Validation as HostValidation,
 } from '../../../common/types/hosts';
 import { getKeys, stringToJSON } from '../../../common/utils';
-import {
-  Cluster,
-  Host,
-  HostValidationId,
-} from '@openshift-assisted/types/assisted-installer-service';
+import { Validation, ValidationsInfo } from '../../../common';
+
+type ValidationId = ClusterValidationId | HostValidationId;
 
 export type ClusterWizardStepsType =
   | 'cluster-details'
@@ -31,6 +34,7 @@ export type ClusterWizardStepsType =
   | 'custom-manifests'
   | 'credentials-download'
   | 'disconnected-basic'
+  | 'disconnected-optional-configurations'
   | 'disconnected-review';
 
 const wizardStepsOrder: ClusterWizardStepsType[] = [
@@ -49,22 +53,13 @@ const wizardStepsOrder: ClusterWizardStepsType[] = [
 
 export const disconnectedSteps: ClusterWizardStepsType[] = [
   'disconnected-basic',
+  'disconnected-optional-configurations',
   'disconnected-review',
 ];
 
 export const ClusterWizardFlowStateNew = 'new';
 export type ClusterWizardFlowStateType = Cluster['status'] | typeof ClusterWizardFlowStateNew;
 
-export const getLastStepForWizard = (
-  customManifestsStepNeedsToBeFilled: boolean,
-): ClusterWizardStepsType => {
-  if (customManifestsStepNeedsToBeFilled) {
-    return 'custom-manifests';
-  } else {
-    return 'review';
-  }
-};
-
 export const isStepAfter = (stepA: ClusterWizardStepsType, stepB: ClusterWizardStepsType) => {
   const indexA = wizardStepsOrder.findIndex((step) => step === stepA);
   const indexB = wizardStepsOrder.findIndex((step) => step === stepB);
@@ -79,8 +74,7 @@ export const getClusterWizardFirstStep = (
   locationState: ClusterWizardFlowStateType | undefined,
   staticIpInfo: StaticIpInfo | undefined,
   state?: ClusterWizardFlowStateType,
-  hosts?: Host[] | undefined,
-  customManifestsStepNeedsToBeFilled?: boolean,
+  cluster?: Cluster,
 ): ClusterWizardStepsType => {
   // Just for the first time when the cluster is created
   if (locationState === ClusterWizardFlowStateNew && !staticIpInfo) {
@@ -96,40 +90,42 @@ export const getClusterWizardFirstStep = (
 
   switch (state) {
     case 'ready':
-      return getLastStepForWizard(customManifestsStepNeedsToBeFilled || false);
+      return 'review';
     case 'pending-for-input':
     case 'adding-hosts':
     case 'insufficient':
-      if (customManifestsStepNeedsToBeFilled) {
-        return 'custom-manifests';
-      }
-      return getStepForFailingHostValidations(hosts);
+      return getStepForFailingValidations(cluster);
     default:
       return 'cluster-details';
   }
 };
 
-const getStepForFailingHostValidations = (hosts: Host[] | undefined) => {
-  const failingValidations: HostValidationId[] = getHostFailingValidationIds(hosts);
-  const minimumStep = 'host-discovery';
+const MINIMUM_STEP = 'host-discovery';
+const getStepForFailingValidations = (cluster?: Cluster) => {
+  // test host validations first, then cluster validations
+  const failingValidations: Set<ValidationId> = new Set<ValidationId>([
+    ...getHostFailingValidationIds(cluster?.hosts),
+    ...getClusterFailingValidationIds(cluster),
+  ]);
+
   let step;
   for (const failingValidationId of failingValidations) {
-    step = findValidationStep<string>(failingValidationId, wizardStepsValidationsMap, minimumStep);
+    step = findValidationStep(failingValidationId, wizardStepsValidationsMap);
     if (step !== undefined) {
       break;
     }
   }
-  return (step || minimumStep) as ClusterWizardStepsType;
+  return step || MINIMUM_STEP;
 };
 
-const getHostFailingValidationIds = (hosts: Host[] | undefined) => {
-  const failingValidations: HostValidationId[] = [];
+const getHostFailingValidationIds = (hosts?: Host[]): Set<ValidationId> => {
+  const failingValidations = new Set<HostValidationId>();
   hosts?.forEach((host) => {
     const validationsInfo = stringToJSON<HostValidationsInfo>(host.validationsInfo) || {};
     getKeys(validationsInfo).forEach((group) => {
       const f: (validation: HostValidation) => void = (validation) => {
         if (validation.status === 'failure') {
-          failingValidations.push(validation.id);
+          failingValidations.add(validation.id);
         }
       };
       const validationGroup = validationsInfo[group] as HostValidation[];
@@ -139,6 +135,47 @@ const getHostFailingValidationIds = (hosts: Host[] | undefined) => {
   return failingValidations;
 };
 
+const getClusterFailingValidationIds = (cluster?: Cluster): Set<ValidationId> => {
+  const failingValidations = new Set<ValidationId>();
+  const validationsInfo = stringToJSON<ValidationsInfo>(cluster?.validationsInfo) || {};
+
+  getKeys(validationsInfo).forEach((group) => {
+    const f: (validation: Validation) => void = (validation) => {
+      if (validation.status === 'failure') {
+        failingValidations.add(validation.id);
+      }
+    };
+    const validationGroup = validationsInfo[group] as Validation[];
+    validationGroup.forEach(f);
+  });
+  return failingValidations;
+};
+
+const findValidationStep = (
+  validationId: ValidationId,
+  wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType>,
+): ClusterWizardStepsType | undefined => {
+  let isBeforeMinimumStep = true;
+
+  return wizardStepsOrder.find((wizardStepId) => {
+    if (wizardStepId === MINIMUM_STEP) {
+      isBeforeMinimumStep = false;
+    }
+    if (isBeforeMinimumStep) {
+      return false;
+    }
+
+    // find first matching validation-map name, ignoring steps before minimumStep
+    const { host: hostValidationMap, cluster: clusterValidationMap } =
+      wizardStepsValidationsMap[wizardStepId];
+
+    return (
+      hostValidationMap.validationIds.includes(validationId as HostValidationId) ||
+      clusterValidationMap.validationIds.includes(validationId as ClusterValidationId)
+    );
+  });
+};
+
 type TransitionProps = { cluster: Cluster };
 
 const buildEmptyValidationsMap = (): WizardStepValidationMap => ({
@@ -190,6 +227,7 @@ const hostDiscoveryStepValidationsMap: WizardStepValidationMap = {
     groups: ['hardware'],
     validationIds: [
       'connected',
+      'hostname-valid',
       'media-connected',
       'lso-requirements-satisfied',
       'odf-requirements-satisfied',
@@ -206,6 +244,7 @@ const hostDiscoveryStepValidationsMap: WizardStepValidationMap = {
     'no-skip-missing-disk',
     'compatible-agent',
     'openshift-ai-gpu-requirements-satisfied',
+    'inventory-not-partially-truncated',
   ],
 };
 
@@ -224,18 +263,24 @@ const storageStepValidationsMap: WizardStepValidationMap = {
       'no-skip-missing-disk',
     ],
   },
-  softValidationIds: [],
+  softValidationIds: ['inventory-not-partially-truncated'],
 };
 
 const networkingStepValidationsMap: WizardStepValidationMap = {
   cluster: {
     groups: ['network'],
-    validationIds: [],
+    validationIds: [
+      'api-vips-defined',
+      'machine-cidr-defined',
+      'cluster-cidr-defined',
+      'service-cidr-defined',
+      'all-hosts-are-ready-to-install',
+    ],
   },
   host: {
     allowedStatuses: ['known', 'disabled'],
     groups: ['network'],
-    validationIds: [],
+    validationIds: ['apps-domain-name-resolved-correctly'],
   },
   // TODO(jtomasek): container-images-available validation is currently not running on the backend, it stays in pending.
   // marking it as soft validation is the easy way to prevent it from blocking the progress.
@@ -250,6 +295,19 @@ const networkingStepValidationsMap: WizardStepValidationMap = {
   ],
 };
 
+const customManifestsValidationsMap: WizardStepValidationMap = {
+  cluster: {
+    groups: ['network'],
+    validationIds: ['platform-requirements-satisfied', 'custom-manifests-requirements-satisfied'],
+  },
+  host: {
+    allowedStatuses: ['known', 'disabled'],
+    groups: ['network'],
+    validationIds: [],
+  },
+  softValidationIds: ['ntp-synced', 'container-images-available', 'mtu-valid'],
+};
+
 const reviewStepValidationsMap: WizardStepValidationMap = {
   cluster: {
     groups: [],
@@ -265,24 +323,25 @@ const reviewStepValidationsMap: WizardStepValidationMap = {
 
 const credentialsValidationMap = buildEmptyValidationsMap();
 
-const customManifestsValidationsMap = buildEmptyValidationsMap();
 const disconnectedReviewValidationsMap = buildEmptyValidationsMap();
 const disconnectedBasicValidationsMap = buildEmptyValidationsMap();
+const disconnectedOptionalConfigurationsValidationsMap = buildEmptyValidationsMap();
 
 export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType> = {
   'cluster-details': clusterDetailsStepValidationsMap,
   'static-ip-yaml-view': staticIpValidationsMap,
   'static-ip-network-wide-configurations': staticIpValidationsMap,
   'static-ip-host-configurations': staticIpValidationsMap,
-  'custom-manifests': customManifestsValidationsMap,
   operators: operatorsStepValidationsMap,
   'host-discovery': hostDiscoveryStepValidationsMap,
   storage: storageStepValidationsMap,
   networking: networkingStepValidationsMap,
-  review: reviewStepValidationsMap,
+  'custom-manifests': customManifestsValidationsMap,
   'credentials-download': credentialsValidationMap,
+  review: reviewStepValidationsMap,
   'disconnected-review': disconnectedReviewValidationsMap,
   'disconnected-basic': disconnectedBasicValidationsMap,
+  'disconnected-optional-configurations': disconnectedOptionalConfigurationsValidationsMap,
 };
 
 export const allClusterWizardSoftValidationIds =

package/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Breadcrumb, BreadcrumbItem, PageSection } from '@patternfly/react-core';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import { isInOcm } from '../../../common/api';
 
 const ClusterBreadcrumbs = ({ clusterName }: { clusterName?: string }) => {

package/lib/ocm/components/clusters/ClusterPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useParams, Navigate } from 'react-router-dom-v5-compat';
+import { useParams, Navigate } from 'react-router';
 import { useDispatch } from 'react-redux';
 import { PageSection, Content } from '@patternfly/react-core';
 import {

package/lib/ocm/components/clusters/Clusters.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router';
 import { Button, ButtonVariant, Content, PageSection } from '@patternfly/react-core';
 import { AddCircleOIcon } from '@patternfly/react-icons/dist/js/icons/add-circle-o-icon';
 import {
@@ -85,7 +85,7 @@ const Clusters = () => {
             primaryAction={
               <Button
                 variant={ButtonVariant.primary}
-                onClick={() => navigate(`~new`)}
+                onClick={() => void navigate(`~new`)}
                 id="empty-state-new-cluster-button"
                 data-ouia-id="button-create-new-cluster"
               >

package/lib/ocm/components/clusters/ClustersListToolbar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router';
 import {
   Toolbar,
   ToolbarItem,
@@ -8,7 +8,6 @@ import {
   TextInput,
   ToolbarProps,
   ToolbarFilterProps,
-  TextInputProps,
   ButtonVariant,
   Spinner,
   ToolbarGroup,
@@ -39,7 +38,7 @@ export type ClusterFiltersType = {
 
 type ClustersListToolbarProps = {
   searchString: string;
-  setSearchString: TextInputProps['onChange'];
+  setSearchString: (value: string) => void;
   filters: ClusterFiltersType;
   setFilters: (filters: ClusterFiltersType) => void;
 };
@@ -63,10 +62,9 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
     setFilters({
       status: [],
     });
+    setSearchString('');
   };
 
-  const onSearchNameChanged: TextInputProps['onChange'] = setSearchString;
-
   const onSelect = (type: string, isChecked: boolean, value: Cluster['status']) => {
     setFilters({
       ...filters,
@@ -126,7 +124,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
                 id="search-string"
                 type="search"
                 aria-label="string to be searched in cluster names or ids"
-                onChange={onSearchNameChanged}
+                onChange={(_event, value) => setSearchString(value)}
                 value={searchString}
                 placeholder="Filter by Name, ID or Base domain"
                 title="Filter by Name, ID or Base domain"
@@ -174,7 +172,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
         </CustomToolbarFilter>
         <ToolbarButton
           variant={ButtonVariant.primary}
-          onClick={() => navigate(`~new`)}
+          onClick={() => void navigate(`~new`)}
           id="button-create-new-cluster"
           data-ouia-id="button-create-new-cluster"
         >