Upgrade Console SDK to 4.22 and fix review issues from PR #8

- SDK 4.22: React 17→18, react-router v5→v7, react-i18next v11→v16,
  PatternFly 6.2→6.4, i18next 23→25
- Fix useHistory→useNavigate (runtime crash on OCP 5.0)
- Fix react-router-dom→react-router imports
- Fix getRiskColor case-insensitive matching (CRD serves capitalized)
- Remove exact from console-extensions.json (react-router v7 default)
- Add trailing newline to locale JSON
- Update consolePlugin dependency to >=4.22.0-0

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: jhadvig

console-extensions.json

@@ -2,7 +2,6 @@
   {
     "type": "console.page/route",
     "properties": {
-      "exact": true,
       "path": "/administration/cluster-update",
       "component": { "$codeRef": "ClusterUpdatePage" }
     }

locales/en/plugin__cluster-update-console-plugin.json

@@ -70,4 +70,4 @@
   "View pod logs": "View pod logs",
   "Yes": "Yes",
   "z-stream": "z-stream"
-}
+}

package.json

@@ -28,15 +28,14 @@
     "@babel/core": "^7.29.0",
     "@babel/preset-env": "^7.29.0",
     "@cypress/webpack-preprocessor": "^7.0.2",
-    "@openshift-console/dynamic-plugin-sdk": "4.21-latest",
-    "@openshift-console/dynamic-plugin-sdk-webpack": "4.21-latest",
-    "@patternfly/react-core": "^6.2.2",
-    "@patternfly/react-icons": "^6.2.2",
-    "@patternfly/react-table": "^6.2.2",
+    "@openshift-console/dynamic-plugin-sdk": "4.22-latest",
+    "@openshift-console/dynamic-plugin-sdk-webpack": "4.22-latest",
+    "@patternfly/react-core": "^6.4.3",
+    "@patternfly/react-icons": "^6.4.0",
+    "@patternfly/react-table": "^6.4.3",
     "@types/jest": "^30.0.0",
     "@types/node": "^22.0.0",
-    "@types/react": "^17.0.37",
-    "@types/react-router-dom": "^5.3.3",
+    "@types/react": "^18.3.28",
     "babel-loader": "^10.1.0",
     "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.1.4",
@@ -49,7 +48,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "^17.4.0",
-    "i18next": "^23.11.5",
+    "i18next": "^25.8.18",
     "i18next-parser": "^9.4.0",
     "jest": "^30.3.0",
     "mocha": "^11.7.5",
@@ -59,12 +58,10 @@
     "pluralize": "^8.0.0",
     "prettier": "^3.8.1",
     "prettier-stylelint": "^0.4.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-i18next": "^11.7.3",
-    "react-router": "5.3.x",
-    "react-router-dom": "5.3.x",
-    "react-router-dom-v5-compat": "^6.11.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "~16.5.8",
+    "react-router": "~7.13.1",
     "style-loader": "^4.0.0",
     "stylelint": "^17.4.0",
     "stylelint-config-standard": "^40.0.0",
@@ -91,7 +88,7 @@
       "ClusterUpdatePage": "./components/ClusterUpdatePage"
     },
     "dependencies": {
-      "@console/pluginAPI": "^4.21.0"
+      "@console/pluginAPI": ">=4.22.0-0"
     }
   },
   "packageManager": "yarn@4.14.1"

src/components/active-plans/ActivePlansTab.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
 import { EmptyState, EmptyStateBody } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';

src/components/update-plan/DecisionActions.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { k8sPatch } from '@openshift-console/dynamic-plugin-sdk';
 import {
   Alert,
@@ -30,7 +30,7 @@ const CONFIRM_TIMEOUT_MS = 5000;
 
 const DecisionActions: React.FC<DecisionActionsProps> = ({ proposal, clusterVersion }) => {
   const { t } = useTranslation(I18N_NAMESPACE);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   // Find the ProposalApproval matching this proposal (same name/namespace)
   const [approvals] = useProposalApprovals();
@@ -97,7 +97,7 @@ const DecisionActions: React.FC<DecisionActionsProps> = ({ proposal, clusterVers
           model: ClusterVersionModel,
           resource: clusterVersion,
         });
-        history.push('/settings/cluster');
+        navigate('/settings/cluster');
       } catch (err) {
         setUpgradeError(getErrorMessage(err));
       }
@@ -109,7 +109,7 @@ const DecisionActions: React.FC<DecisionActionsProps> = ({ proposal, clusterVers
         setConfirmingApprove(false);
       }, CONFIRM_TIMEOUT_MS);
     }
-  }, [confirmingApprove, approveStage, proposal, clusterVersion, history, t]);
+  }, [confirmingApprove, approveStage, proposal, clusterVersion, navigate, t]);
 
   const handleDenyClick = React.useCallback(async () => {
     if (confirmingDeny) {

src/models/proposal.ts

@@ -183,7 +183,7 @@ export const getPhaseDisplay = (phase?: ProposalPhase | string): PhaseDisplay =>
 };
 
 export const getRiskColor = (risk?: string): 'green' | 'orange' | 'red' | 'grey' => {
-  switch (risk) {
+  switch (risk?.toLowerCase()) {
     case 'low':
       return 'green';
     case 'medium':