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

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'
@@ -55,16 +58,6 @@ export const disconnectedSteps: ClusterWizardStepsType[] = [
 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 +72,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 +88,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 +133,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 +225,7 @@ const hostDiscoveryStepValidationsMap: WizardStepValidationMap = {
     groups: ['hardware'],
     validationIds: [
       'connected',
+      'hostname-valid',
       'media-connected',
       'lso-requirements-satisfied',
       'odf-requirements-satisfied',
@@ -206,6 +242,7 @@ const hostDiscoveryStepValidationsMap: WizardStepValidationMap = {
     'no-skip-missing-disk',
     'compatible-agent',
     'openshift-ai-gpu-requirements-satisfied',
+    'inventory-not-partially-truncated',
   ],
 };
 
@@ -224,18 +261,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 +293,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,7 +321,6 @@ const reviewStepValidationsMap: WizardStepValidationMap = {
 
 const credentialsValidationMap = buildEmptyValidationsMap();
 
-const customManifestsValidationsMap = buildEmptyValidationsMap();
 const disconnectedReviewValidationsMap = buildEmptyValidationsMap();
 const disconnectedBasicValidationsMap = buildEmptyValidationsMap();
 
@@ -274,13 +329,13 @@ export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardSt
   '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,
 };

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"
         >

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

@@ -25,6 +25,7 @@ import {
   ClusterTableRows,
   HumanizedSortable,
   rowSorter,
+  EmptyState,
 } from '../../../common';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import DeleteClusterModal from './DeleteClusterModal';
@@ -151,64 +152,73 @@ const ClustersTable = ({ rows, deleteCluster }: ClustersTableProps) => {
     closeModal();
   };
 
+  const hasActiveFilters = searchString.length > 0 || filters.status.length > 0;
+
   return (
     <>
       <ClustersListToolbar
         searchString={searchString}
-        setSearchString={(_event, value) => setSearchString(value)}
+        setSearchString={setSearchString}
         filters={filters}
         setFilters={setFilters}
       />
-      <Table aria-label="Clusters table" data-testid={'clusters-table'}>
-        <Thead>
-          <Tr>
-            {columns.map((col, i) => (
-              <Th
-                key={`col-${i}`}
-                width={col.cellWidth as BaseCellProps['width']}
-                sort={getSortParams(i)}
-              >
-                <TableText>{col.title}</TableText>
-              </Th>
-            ))}
-            <Th key="col-action" />
-          </Tr>
-        </Thead>
-        <Tbody>
-          {sortedRows.map((row, i) => (
-            <Tr {...getRowProps(row.props as ClusterRowDataProps)} key={`row-${i}`}>
-              {row.cells?.map((cell, j) => {
-                const humanized = cell as HumanizedSortable;
-                return (
-                  <Td dataLabel={columns[j].title} key={`cell-${i}-${j}`} {...humanized.props}>
-                    <TableText wrapModifier="breakWord">{humanized?.title}</TableText>
-                  </Td>
-                );
-              })}
-              <Td isActionCell>
-                <ActionsColumn
-                  items={[
-                    {
-                      title: 'Delete',
-                      id: `button-delete-${(row.props as ClusterRowDataProps).name}`,
-                      isDisabled:
-                        getClusterTableStatusCell(row).sortableValue ===
-                        clusterStatusLabels(t).installing,
-                      onClick: () => {
-                        setDeleteClusterID({
-                          id: (row.props as ClusterRowDataProps).id,
-                          name: (row.props as ClusterRowDataProps).name,
-                        });
-                        setDeleteModalOpen(true);
-                      },
-                    },
-                  ]}
-                />
-              </Td>
+      {sortedRows.length === 0 && hasActiveFilters ? (
+        <EmptyState
+          title="No matching clusters"
+          content="No clusters match the current filter criteria. Try adjusting your filters."
+        />
+      ) : (
+        <Table aria-label="Clusters table" data-testid={'clusters-table'}>
+          <Thead>
+            <Tr>
+              {columns.map((col, i) => (
+                <Th
+                  key={`col-${i}`}
+                  width={col.cellWidth as BaseCellProps['width']}
+                  sort={getSortParams(i)}
+                >
+                  <TableText>{col.title}</TableText>
+                </Th>
+              ))}
+              <Th key="col-action" />
             </Tr>
-          ))}
-        </Tbody>
-      </Table>
+          </Thead>
+          <Tbody>
+            {sortedRows.map((row, i) => (
+              <Tr {...getRowProps(row.props as ClusterRowDataProps)} key={`row-${i}`}>
+                {row.cells?.map((cell, j) => {
+                  const humanized = cell as HumanizedSortable;
+                  return (
+                    <Td dataLabel={columns[j].title} key={`cell-${i}-${j}`} {...humanized.props}>
+                      <TableText wrapModifier="breakWord">{humanized?.title}</TableText>
+                    </Td>
+                  );
+                })}
+                <Td isActionCell>
+                  <ActionsColumn
+                    items={[
+                      {
+                        title: 'Delete',
+                        id: `button-delete-${(row.props as ClusterRowDataProps).name}`,
+                        isDisabled:
+                          getClusterTableStatusCell(row).sortableValue ===
+                          clusterStatusLabels(t).installing,
+                        onClick: () => {
+                          setDeleteClusterID({
+                            id: (row.props as ClusterRowDataProps).id,
+                            name: (row.props as ClusterRowDataProps).name,
+                          });
+                          setDeleteModalOpen(true);
+                        },
+                      },
+                    ]}
+                  />
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      )}
       <DeleteClusterModal
         name={deleteClusterID?.name || ''}
         onClose={closeModal}

package/lib/ocm/components/featureSupportLevels/featureStateUtils.ts

@@ -229,7 +229,7 @@ export const getNewFeatureDisabledReason = (
     }
     case 'USER_MANAGED_NETWORKING': {
       if (!isSupported) {
-        return `User-Managed networking is not supported when using ${
+        return `User-managed networking is not supported when using ${
           platformType ? ExternalPlatformLabels[platformType] : ''
         }`;
       }

package/lib/ocm/components/ui/Buttons/BackButton.tsx

@@ -1,4 +1,4 @@
-import { Link, LinkProps } from 'react-router-dom-v5-compat';
+import { Link, LinkProps } from 'react-router';
 import type { ButtonProps } from '@patternfly/react-core';
 import { Button } from '@patternfly/react-core';
 import React from 'react';

package/lib/ocm/hooks/useInfraEnvId.ts

@@ -55,12 +55,12 @@ export default function useInfraEnvId(
   ]);
 
   React.useEffect(() => {
-    if (!clusterId) {
+    if (!clusterId && !isSingleClusterFeatureEnabled) {
       setError('Missing clusterId to load infrastructure environment');
     } else if (!infraEnvId) {
       void findInfraEnvId();
     }
-  }, [clusterId, findInfraEnvId, infraEnvId]);
+  }, [clusterId, findInfraEnvId, infraEnvId, isSingleClusterFeatureEnabled]);
 
   return { infraEnvId, error };
 }

package/lib/ocm/hooks/useLateBinding.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { CpuArchitecture, useAlerts } from '../../common';
 import useInfraEnvHosts from './useInfraEnvHosts';
@@ -6,10 +6,15 @@ import HostsService from '../services/HostsService';
 import { getErrorMessage } from '../../common/utils';
 import { useFeature } from './use-feature';
 
+const MAX_BIND_RETRY_ATTEMPTS = 3;
+
 const useLateBinding = (cluster: Cluster): boolean => {
   const [isBinding, setIsBinding] = useState(false);
   const { addAlert, removeAlert, alerts } = useAlerts();
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const bindFailureCounts = useRef<Map<string, number>>(new Map());
+  const alertsRef = useRef(alerts);
+  alertsRef.current = alerts;
 
   const {
     hosts: infraEnvHosts,
@@ -25,38 +30,54 @@ const useLateBinding = (cluster: Cluster): boolean => {
     cluster.openshiftVersion,
   );
 
-  const bindHosts = useCallback(async () => {
-    if (infraEnvHosts && !infraEnvError && !infraEnvLoading && isSingleClusterFeatureEnabled) {
-      for (const host of infraEnvHosts) {
-        if (host.clusterId !== cluster.id) {
-          setIsBinding(true);
-          try {
-            const alertKey = alerts.find((alert) => alert.key === host.id)?.key;
-            if (alertKey) {
-              removeAlert(alertKey);
-            }
-            await HostsService.bind(host, cluster.id);
-          } catch (error) {
-            addAlert({
-              title: `Failed to bind host ${host.requestedHostname || ''}`,
-              message: getErrorMessage(error),
-              key: host.id,
-            });
-          } finally {
-            setIsBinding(false);
-          }
+  const bindSingleHost = useCallback(
+    async (host: NonNullable<typeof infraEnvHosts>[number]) => {
+      setIsBinding(true);
+      try {
+        await HostsService.bind(host, cluster.id);
+        // Binding succeeded: reset the failure counter and clear any alert that
+        // was shown after previous exhausted retries.
+        bindFailureCounts.current.delete(host.id);
+        const alertKey = alertsRef.current.find((alert) => alert.key === host.id)?.key;
+        if (alertKey) {
+          removeAlert(alertKey);
         }
+      } catch (error) {
+        const failureCount = (bindFailureCounts.current.get(host.id) ?? 0) + 1;
+        bindFailureCounts.current.set(host.id, failureCount);
+
+        // Suppress transient errors (e.g. 5xx during self-healing) and only
+        // surface the alert once silent retries have been exhausted.
+        if (failureCount >= MAX_BIND_RETRY_ATTEMPTS) {
+          addAlert({
+            title: `Failed to bind host ${host.requestedHostname || ''}`,
+            message: getErrorMessage(error),
+            key: host.id,
+          });
+        }
+      } finally {
+        setIsBinding(false);
+      }
+    },
+    [cluster.id, addAlert, removeAlert],
+  );
+
+  const bindHosts = useCallback(async () => {
+    if (!infraEnvHosts || infraEnvError || infraEnvLoading || !isSingleClusterFeatureEnabled) {
+      return;
+    }
+    for (const host of infraEnvHosts) {
+      if (host.clusterId !== cluster.id) {
+        await bindSingleHost(host);
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     infraEnvHosts,
     infraEnvError,
     infraEnvLoading,
     isSingleClusterFeatureEnabled,
     cluster.id,
-    addAlert,
-    removeAlert,
+    bindSingleHost,
   ]);
 
   useEffect(() => {

package/lib/ocm/hooks/usePullSecret.ts

@@ -4,8 +4,8 @@ import { useAlerts } from '../../common';
 import { AccessTokenAPI } from '../../common/api/accounts-management-service/access-token-api';
 
 /**
- * Standalone / disconnected UI: bridge serves GET /pull-secret from a mounted manifest
- * (see assisted-disconnected-ui proxy).
+ * Standalone / disconnected UI: proxy serves GET /api/pull-secret with pull-secret JSON
+ * `{ "auths": … }` extracted from the mounted Secret manifest (see assisted-disconnected-ui proxy).
  */
 async function fetchPullSecretFromBridge(): Promise<string | undefined> {
   const res = await fetch('/api/pull-secret', { credentials: 'same-origin' });

package/lib/ocm/services/InfraEnvsService.ts

@@ -21,7 +21,10 @@ const InfraEnvsService = {
       const { data: infraEnvs } = await InfraEnvsAPI.list(
         !isSingleClusterFeatureEnabled ? clusterId : '',
       );
-      if (infraEnvs.length > 0) {
+      if (isSingleClusterFeatureEnabled) {
+        return infraEnvs[0].id;
+      }
+      if (infraEnvs.length > 0 && clusterId) {
         InfraEnvCache.updateInfraEnvs(clusterId, infraEnvs);
         infraEnvId = InfraEnvCache.getInfraEnvId(clusterId, cpuArchitecture);
       }

package/lib/ocm/store/slices/clusters/selectors.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { createSelector } from '@reduxjs/toolkit';
+import type { Selector } from 'reselect';
 import type { IRow, IRowData } from '@patternfly/react-table';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import type { TFunction } from 'i18next';
 import {
   DASH,
@@ -22,7 +23,7 @@ const selectClusters = (state: RootStateDay1) =>
   state.clusters.data.filter((c) => c.kind !== 'DisconnectedCluster');
 const clustersUIState = (state: RootStateDay1) => state.clusters.uiState;
 
-export const selectClustersUIState = createSelector(
+export const selectClustersUIState: (state: RootStateDay1) => ResourceUIState = createSelector(
   [selectClusters, clustersUIState],
   (clusters, uiState): ResourceUIState => {
     const { LOADED, EMPTY } = ResourceUIState;
@@ -95,13 +96,14 @@ const clusterToClusterTableRow = (cluster: Cluster, t: TFunction): IRow => {
 export const getClusterTableStatusCell = (rowData: IRowData) =>
   rowData?.cells?.[3] as HumanizedSortable;
 
-export const selectClusterTableRows = (t: TFunction) => {
+export const selectClusterTableRows = (t: TFunction): Selector<RootStateDay1, ClusterTableRows> => {
   return createSelector(
     selectClusters,
     (clusters): ClusterTableRows => clusters.map((c) => clusterToClusterTableRow(c, t)),
   );
 };
 
-export const selectClusterNames = createSelector(selectClusters, (clusters) =>
-  clusters.map((c) => c.name),
+export const selectClusterNames: Selector<RootStateDay1, (string | undefined)[]> = createSelector(
+  selectClusters,
+  (clusters) => clusters.map((c) => c.name),
 );