OCPBUGS-65887: Update a lot of deps

Bumps minimum OCP version to 4.19.0

.eslintrc.yml

@@ -10,7 +10,7 @@ parser: '@typescript-eslint/parser'
 parserOptions:
   ecmaFeatures:
     jsx: true
-  ecmaVersion: 2016
+  ecmaVersion: 2021
   sourceType: module
 plugins:
   - prettier
@@ -19,6 +19,8 @@ plugins:
 rules:
   prettier/prettier:
     - error
+  react/react-in-jsx-scope: # Not required with React 17+
+    - off
 settings:
   react:
     version: detect

integration-tests/tests/example-page.cy.ts

@@ -68,6 +68,6 @@ describe('Console plugin template test', () => {
     cy.get('[data-quickstart-id="qs-nav-home"]').click();
     cy.get('[data-test="nav"]').contains('Plugin Example').click();
     cy.url().should('include', '/example');
-    cy.get('[data-test="example-page-title"]').should('contain', 'Hello, Plugin!');
+    cy.get('title').should('contain', 'Hello, Plugin!');
   });
 });

package.json

@@ -24,21 +24,20 @@
     "webpack": "node -r ts-node/register ./node_modules/.bin/webpack"
   },
   "devDependencies": {
-    "@cypress/webpack-preprocessor": "^5.15.5",
-    "@openshift-console/dynamic-plugin-sdk": "1.4.0",
-    "@openshift-console/dynamic-plugin-sdk-webpack": "1.1.1",
+    "@cypress/webpack-preprocessor": "^7.0.2",
+    "@openshift-console/dynamic-plugin-sdk": "4.19.1",
+    "@openshift-console/dynamic-plugin-sdk-webpack": "4.19.0",
     "@patternfly/react-core": "^6.2.2",
     "@patternfly/react-icons": "^6.2.2",
     "@patternfly/react-table": "^6.2.2",
     "@types/node": "^18.0.0",
     "@types/react": "^17.0.37",
-    "@types/react-helmet": "^6.1.4",
-    "@types/react-router-dom": "^5.3.2",
-    "@typescript-eslint/eslint-plugin": "^5.14.0",
-    "@typescript-eslint/parser": "^5.14.0",
-    "copy-webpack-plugin": "^6.4.1",
+    "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "copy-webpack-plugin": "^13.0.1",
     "css-loader": "^6.7.1",
-    "cypress": "^12.17.4",
+    "cypress": "^14.2.1",
     "cypress-multi-reporters": "^1.6.2",
     "eslint": "^8.10.0",
     "eslint-config-prettier": "^8.5.0",
@@ -46,27 +45,26 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.1",
     "i18next-parser": "^3.11.0",
-    "mocha-junit-reporter": "^2.2.0",
-    "mochawesome": "^7.1.3",
+    "mocha-junit-reporter": "^2.2.1",
+    "mochawesome": "^7.1.4",
     "mochawesome-merge": "^4.3.0",
     "pluralize": "^8.0.0",
     "prettier": "^2.7.1",
     "prettier-stylelint": "^0.4.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-helmet": "^6.1.0",
     "react-i18next": "^11.7.3",
     "react-router": "5.3.x",
-    "react-router-dom": "5.3.x",
+    "react-router-dom-v5-compat": "^6.11.2",
     "style-loader": "^3.3.1",
     "stylelint": "^15.3.0",
     "stylelint-config-standard": "^31.0.0",
     "ts-loader": "^9.3.1",
-    "ts-node": "^10.8.1",
-    "typescript": "^4.7.4",
-    "webpack": "5.75.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
   },
   "consolePlugin": {
     "name": "console-plugin-template",
@@ -77,7 +75,7 @@
       "ExamplePage": "./components/ExamplePage"
     },
     "dependencies": {
-      "@console/pluginAPI": "*"
+      "@console/pluginAPI": "^4.19.0"
     }
   },
   "peerDependencies": {

src/components/ExamplePage.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import Helmet from 'react-helmet';
+import { DocumentTitle, ListPageHeader } from '@openshift-console/dynamic-plugin-sdk';
 import { useTranslation } from 'react-i18next';
-import { Content, PageSection, Title } from '@patternfly/react-core';
+import { Content, PageSection } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons';
 import './example.css';
 
@@ -10,12 +9,8 @@ export default function ExamplePage() {
 
   return (
     <>
-      <Helmet>
-        <title data-test="example-page-title">{t('Hello, Plugin!')}</title>
-      </Helmet>
-      <PageSection>
-        <Title headingLevel="h1">{t('Hello, Plugin!')}</Title>
-      </PageSection>
+      <DocumentTitle>{t('Hello, Plugin!')}</DocumentTitle>
+      <ListPageHeader title={t('Hello, Plugin!')} />
       <PageSection>
         <Content component="p">
           <span className="console-plugin-template__nice">

src/components/example.css

@@ -1,7 +1,7 @@
 /* Prefixing your CSS classes with your plugin name is a best practice to avoid
  * collisions with other plugin styles. */
 .console-plugin-template__nice {
-  /* Use PF global vars for colors to support dark mode in OpenShift 4.11.
-   * https://patternfly-react-main.surge.sh/developer-resources/global-css-variables */
-  color: var(--pf-global--palette--blue-400);
+  /* Use PatternFly semantic tokens for colors to support theming.
+   * https://www.patternfly.org/tokens/all-patternfly-tokens */
+  color: var(--pf-t--global--color--brand--default);
 }

tsconfig.json

@@ -3,11 +3,11 @@
     "baseUrl": ".",
     "module": "esnext",
     "moduleResolution": "node",
-    "target": "es2020",
+    "target": "es2021",
     "sourceMap": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "allowJs": true,
-    "strict": false,
+    "strict": true,
     "noUnusedLocals": true
   },
   "include": ["src"],