CONSOLE-4990: Replace history object navigation with useNavigate hook

frontend/packages/console-app/locales/en/console-app.json

@@ -199,7 +199,6 @@
   "Whether or not the plugin might have violated the Console Content Security Policy.": "Whether or not the plugin might have violated the Console Content Security Policy.",
   "Backend Service": "Backend Service",
   "Proxy Services": "Proxy Services",
-  "Start Job": "Start Job",
   "Add Health Checks": "Add Health Checks",
   "Edit Health Checks": "Edit Health Checks",
   "Add HorizontalPodAutoscaler": "Add HorizontalPodAutoscaler",
@@ -214,6 +213,7 @@
   "Edit tolerations": "Edit tolerations",
   "Edit taints": "Edit taints",
   "Add storage": "Add storage",
+  "Start Job": "Start Job",
   "Edit update strategy": "Edit update strategy",
   "Resume rollouts": "Resume rollouts",
   "Pause rollouts": "Pause rollouts",

frontend/packages/console-app/src/actions/hooks/types.ts

@@ -77,3 +77,7 @@ export enum BuildConfigActionCreator {
   StartBuild = 'StartBuild',
   StartLastRun = 'StartLastRun',
 }
+
+export enum CronJobActionCreator {
+  StartJob = 'StartJob',
+}

frontend/packages/console-app/src/actions/hooks/useCronJobActions.ts

@@ -0,0 +1,126 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom-v5-compat';
+import { Action } from '@console/dynamic-plugin-sdk';
+import { useDeepCompareMemoize } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useDeepCompareMemoize';
+import { resourceObjPath } from '@console/internal/components/utils/resource-link';
+import { JobModel } from '@console/internal/models';
+import {
+  k8sCreate,
+  CronJobKind,
+  JobKind,
+  referenceFor,
+  K8sResourceCommon,
+} from '@console/internal/module/k8s';
+import { CronJobActionCreator } from './types';
+
+const startJob = (obj: CronJobKind): Promise<JobKind> => {
+  const reqPayload = {
+    apiVersion: 'batch/v1',
+    kind: 'Job',
+    metadata: {
+      name: `${obj.metadata?.name}-${Date.now()}`,
+      namespace: obj.metadata?.namespace,
+      annotations: obj.metadata?.annotations,
+      ownerReferences: [
+        {
+          apiVersion: 'batch/v1',
+          controller: true,
+          kind: 'CronJob',
+          name: obj.metadata?.name,
+          uid: obj.metadata?.uid,
+        },
+      ],
+    },
+    spec: {
+      ...obj.spec.jobTemplate.spec,
+    },
+  };
+
+  return k8sCreate(JobModel, reqPayload as K8sResourceCommon);
+};
+
+const startJobAccessReview = (obj: CronJobKind) => ({
+  group: 'batch',
+  resource: 'jobs',
+  name: obj.metadata?.name,
+  namespace: obj.metadata?.namespace,
+  verb: 'create' as const,
+});
+
+const getStartJobPath = (job: JobKind): string | null => {
+  const path = resourceObjPath(job, referenceFor(job));
+  return path || null;
+};
+
+/**
+ * A React hook for retrieving actions related to a CronJob resource.
+ *
+ * @param {CronJobKind} obj - The specific CronJob resource instance for which to generate actions.
+ * @param {CronJobActionCreator[]} [filterActions] - Optional. If provided, the returned `actions` array will contain
+ * only the specified actions. If omitted, it will contain all CronJob actions. Invalid action creators in
+ * `filterActions` are ignored; the reduce logic in `memoizedFilterActions` checks each creator via `factory` and
+ * only includes actions where `typeof fn === 'function'`, so the returned array contains only valid actions.
+ *
+ * This hook is robust to inline arrays/objects for the `filterActions` argument, so you do not need to memoize or define
+ * the array outside your component. The actions will only update if the actual contents of `filterActions` change, not just the reference.
+ *
+ * @returns {Action[]} An array containing the generated action(s).
+ *
+ * @example
+ * // Getting all actions for CronJob resource
+ * const MyCronJobComponent = ({ obj }) => {
+ *   const actions = useCronJobActions(obj);
+ *   return <Kebab actions={actions} />;
+ * };
+ */
+export const useCronJobActions = (
+  obj: CronJobKind,
+  filterActions?: CronJobActionCreator[],
+): Action[] => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const memoizedFilterActions = useDeepCompareMemoize(filterActions);
+
+  const factory = useMemo(
+    () => ({
+      [CronJobActionCreator.StartJob]: () => ({
+        id: 'start-job',
+        label: t('console-app~Start Job'),
+        cta: () => {
+          startJob(obj)
+            .then((job) => {
+              const path = getStartJobPath(job);
+              if (path) {
+                navigate(path);
+              }
+            })
+            .catch((error) => {
+              // TODO: Show error in notification in the follow on tech-debt.
+              // eslint-disable-next-line no-console
+              console.error('Failed to start a Job.', error);
+            });
+        },
+        accessReview: startJobAccessReview(obj),
+      }),
+    }),
+    [obj, navigate, t],
+  );
+
+  // filter and initialize requested actions or construct list of all CronJobActions
+  const actions = useMemo<Action[]>(() => {
+    if (memoizedFilterActions) {
+      return memoizedFilterActions.reduce<Action[]>((acc, creator) => {
+        const fn = factory[creator];
+        if (typeof fn === 'function') {
+          acc.push(fn());
+        }
+        return acc;
+      }, []);
+    }
+    return [factory[CronJobActionCreator.StartJob]()];
+  }, [factory, memoizedFilterActions]);
+
+  return actions;
+};

frontend/packages/console-app/src/actions/providers/cronjob-provider.ts

@@ -1,18 +1,21 @@
 import { useMemo } from 'react';
 import { CronJobKind, referenceFor } from '@console/internal/module/k8s';
 import { useK8sModel } from '@console/shared/src/hooks/useK8sModel';
-import { CronJobActionFactory } from '../creators/cronjob-factory';
 import { useCommonResourceActions } from '../hooks/useCommonResourceActions';
+import { useCronJobActions } from '../hooks/useCronJobActions';
 import { usePDBActions } from '../hooks/usePDBActions';
 
 export const useCronJobActionsProvider = (resource: CronJobKind) => {
   const [kindObj, inFlight] = useK8sModel(referenceFor(resource));
   const [pdbActions] = usePDBActions(kindObj, resource);
+  const cronJobActions = useCronJobActions(resource);
   const commonActions = useCommonResourceActions(kindObj, resource);
-  const actions = useMemo(
-    () => [CronJobActionFactory.StartJob(kindObj, resource), ...pdbActions, ...commonActions],
-    [kindObj, pdbActions, resource, commonActions],
-  );
+
+  const actions = useMemo(() => [...cronJobActions, ...pdbActions, ...commonActions], [
+    cronJobActions,
+    pdbActions,
+    commonActions,
+  ]);
 
   return [actions, !inFlight, undefined];
 };

frontend/packages/console-app/src/components/cluster-configuration/ClusterConfigurationPage.tsx

@@ -15,8 +15,7 @@ import {
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { LockIcon } from '@patternfly/react-icons/dist/esm/icons/lock-icon';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom-v5-compat';
-import { history } from '@console/internal/components/utils/router';
+import { useParams, useNavigate } from 'react-router-dom-v5-compat';
 import { LoadingBox } from '@console/internal/components/utils/status-box';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
 import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
@@ -32,6 +31,7 @@ import './ClusterConfigurationPage.scss';
 const ClusterConfigurationPage: FC = () => {
   const { t } = useTranslation();
   const params = useParams();
+  const navigate = useNavigate();
 
   const initialGroupId = params.group || 'general';
   const [activeTabId, setActiveTabId] = useState<string>(initialGroupId);
@@ -42,7 +42,7 @@ const ClusterConfigurationPage: FC = () => {
     event.preventDefault();
     setActiveTabId(newGroupId);
     const path = `/cluster-configuration/${newGroupId}`;
-    history.replace(path);
+    navigate(path, { replace: true });
   };
 
   const [

frontend/packages/console-app/src/components/file-upload/file-upload-context.ts

@@ -2,6 +2,7 @@ import { createContext, useState, useMemo, useCallback } from 'react';
 import { AlertVariant } from '@patternfly/react-core';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { FileUpload, isFileUpload, useResolvedExtensions } from '@console/dynamic-plugin-sdk';
 import { useToast } from '@console/shared/src/components/toast';
 import { useActiveNamespace } from '@console/shared/src/hooks/useActiveNamespace';
@@ -26,6 +27,7 @@ export const useValuesFileUploadContext = (): FileUploadContextType => {
   const [fileUploadExtensions, resolved] = useResolvedExtensions<FileUpload>(isFileUpload);
   const toastContext = useToast();
   const [namespace] = useActiveNamespace();
+  const navigate = useNavigate();
   const [file, setFile] = useState<File>(undefined);
   const fileExtensions = useMemo(
     () =>
@@ -45,7 +47,10 @@ export const useValuesFileUploadContext = (): FileUploadContextType => {
         const requiredFileExtension = getRequiredFileUploadExtension(fileUploadExtensions, f.name);
         if (requiredFileExtension) {
           setFile(f);
-          requiredFileExtension.properties.handler(f, namespace);
+          const path = requiredFileExtension.properties.handler(f, namespace);
+          if (path) {
+            navigate(path);
+          }
         } else {
           toastContext.addToast({
             variant: AlertVariant.warning,
@@ -63,7 +68,7 @@ export const useValuesFileUploadContext = (): FileUploadContextType => {
         }
       }
     },
-    [setFile, fileExtensions, t, namespace, toastContext, fileUploadExtensions],
+    [setFile, fileExtensions, t, namespace, toastContext, fileUploadExtensions, navigate],
   );
 
   return {

frontend/packages/console-app/src/components/lightspeed/Lightspeed.tsx

@@ -12,9 +12,9 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { useHideLightspeed } from '@console/app/src/components/user-preferences/lightspeed/useHideLightspeed';
 import { k8sGetResource } from '@console/dynamic-plugin-sdk/src/utils/k8s';
-import { history } from '@console/internal/components/utils/router';
 import { ConsolePluginModel } from '@console/internal/models';
 import { FLAGS } from '@console/shared/src/constants/common';
 import { useFlag } from '@console/shared/src/hooks/flag';
@@ -42,6 +42,7 @@ export const lightspeedOperatorURL =
 
 const Lightspeed: FC = () => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const [hideLightspeed] = useHideLightspeed();
   const [isReady, setIsReady] = useState(false);
   const [lightspeedIsInstalled, setLightspeedIsInstalled] = useState(false);
@@ -67,12 +68,12 @@ const Lightspeed: FC = () => {
   };
   const onInstallClick = () => {
     setIsOpen(false);
-    history.push(lightspeedOperatorURL);
+    navigate(lightspeedOperatorURL);
     fireTelemetryEvent('Console capability LightspeedButton Get started button clicked');
   };
   const onDismissClick = () => {
     setIsOpen(false);
-    history.push(
+    navigate(
       '/user-preferences/general?spotlight=[data-test="console.hideLightspeedButton%20field"]',
     );
   };

frontend/packages/console-app/src/components/pdb/PDBForm.tsx

@@ -27,11 +27,11 @@ import {
 import i18next from 'i18next';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { MatchLabels } from '@console/dynamic-plugin-sdk/src/api/common-types';
 import { ButtonBar } from '@console/internal/components/utils/button-bar';
 import { FieldLevelHelp } from '@console/internal/components/utils/field-level-help';
 import { resourcePathFromModel } from '@console/internal/components/utils/resource-link';
-import { history } from '@console/internal/components/utils/router';
 import { SelectorInput } from '@console/internal/components/utils/selector-input';
 import { k8sCreate } from '@console/internal/module/k8s';
 import PaneBody from '@console/shared/src/components/layout/PaneBody';
@@ -70,6 +70,8 @@ const PDBForm: FC<PodDisruptionBudgetFormProps> = ({
   replicasCount,
 }) => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
+  const handleCancel = useCallback(() => navigate(-1), [navigate]);
   const initialFormValues = initialValuesFromK8sResource(formData);
   const [formValues, setFormValues] = useState(initialFormValues);
   const [error, setError] = useState('');
@@ -150,8 +152,9 @@ const PDBForm: FC<PodDisruptionBudgetFormProps> = ({
     return response
       .then(() => {
         setInProgress(false);
-        history.push(
+        navigate(
           resourcePathFromModel(PodDisruptionBudgetModel, formValues.name, formValues.namespace),
+          { replace: true },
         );
       })
       .catch((err) => {
@@ -301,7 +304,7 @@ const PDBForm: FC<PodDisruptionBudgetFormProps> = ({
                 >
                   {existingResource ? t('console-app~Save') : t('console-app~Create')}
                 </Button>
-                <Button onClick={history.goBack} id="cancel" variant="secondary">
+                <Button onClick={handleCancel} id="cancel" variant="secondary">
                   {t('console-app~Cancel')}
                 </Button>
               </ActionGroup>