Merge pull request #1001 from anwesha-palit-redhat/feat/SRVKP-11123

SRVKP-11123: Upgrade dependencies and resolve TypeScript, i18n and CI job issues

Author: openshift-merge-bot[bot]

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+.yarn/cache
+.git

Dockerfile

@@ -14,7 +14,8 @@ ADD . /usr/src/app
 WORKDIR /usr/src/app
 
 # Install dependencies & build
-RUN yarn install && yarn build
+RUN yarn install --immutable && \
+    yarn build
 
 # Stage 2: Serve with Nginx
 FROM $RUNTIME

locales/en/plugin__pipelines-console-plugin.json

@@ -1,25 +1,18 @@
 {
   "{{assignees}} Assigned": "{{assignees}} Assigned",
-  "{{count}} annotation": "{{count}} annotation",
-  "{{count}} annotation_plural": "{{count}} annotation",
-  "{{count}} day": "{{count}} day",
-  "{{count}} day_plural": "{{count}} day",
-  "{{count}} event exist, but none match the current filter": "{{count}} event exist, but none match the current filter",
-  "{{count}} event exist, but none match the current filter_plural": "{{count}} event exist, but none match the current filter",
-  "{{count}} hour": "{{count}} hour",
-  "{{count}} hour_plural": "{{count}} hour",
-  "{{count}} minute": "{{count}} minute",
-  "{{count}} minute_plural": "{{count}} minute",
-  "{{count}} second": "{{count}} second",
-  "{{count}} second_plural": "{{count}} second",
-  "{{count}}+ event exist, but none match the current filter": "{{count}}+ event exist, but none match the current filter",
-  "{{count}}+ event exist, but none match the current filter_plural": "{{count}}+ event exist, but none match the current filter",
   "{{hr}}h": "{{hr}}h",
   "{{min}}m": "{{min}}m",
   "{{resourceName}} results": "{{resourceName}} results",
   "{{sec}}s": "{{sec}}s",
   "{{taskLabel}} details": "{{taskLabel}} details",
   "{{taskRunLabel}} details": "{{taskRunLabel}} details",
+  "{{value}} annotation": "{{value}} annotation",
+  "{{value}} day": "{{value}} day",
+  "{{value}} event exist, but none match the current filter": "{{value}} event exist, but none match the current filter",
+  "{{value}} hour": "{{value}} hour",
+  "{{value}} minute": "{{value}} minute",
+  "{{value}} second": "{{value}} second",
+  "{{value}}+ event exist, but none match the current filter": "{{value}}+ event exist, but none match the current filter",
   "{{version}} (latest)": "{{version}} (latest)",
   "<0>{{eventCount}} times in the last <3></3></0>": "<0>{{eventCount}} times in the last <3></3></0>",
   "<0>{{eventCount}} times</0>": "<0>{{eventCount}} times</0>",
@@ -512,10 +505,8 @@
   "Show variables": "Show variables",
   "Show VolumeClaimTemplate options": "Show VolumeClaimTemplate options",
   "Show YAML": "Show YAML",
-  "Showing {{count}} event": "Showing {{count}} event",
-  "Showing {{count}} event_plural": "Showing {{count}} event",
-  "Showing most recent {{count}} event": "Showing most recent {{count}} event",
-  "Showing most recent {{count}} event_plural": "Showing most recent {{count}} event",
+  "Showing {{value}} event": "Showing {{value}} event",
+  "Showing most recent {{value}} event": "Showing most recent {{value}} event",
   "Signed": "Signed",
   "Single user (RWO)": "Single user (RWO)",
   "Size": "Size",

package.json

@@ -11,8 +11,8 @@
   "scripts": {
     "clean": "rm -rf dist",
     "webpack": "yarn exec webpack",
-    "build": "yarn clean && NODE_ENV=production NODE_OPTIONS=--max-old-space-size=6144 yarn webpack",
-    "build-dev": "yarn clean && NODE_OPTIONS=--max-old-space-size=6144 yarn webpack",
+    "build": "yarn clean && NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 yarn webpack",
+    "build-dev": "yarn clean && NODE_OPTIONS=--max-old-space-size=4096 yarn webpack",
     "start": "yarn webpack serve",
     "start-console": "./start-console.sh",
     "i18n": "./i18n-scripts/build-i18n.sh && node ./i18n-scripts/set-english-defaults.js",
@@ -36,14 +36,15 @@
     "@openshift-console/dynamic-plugin-sdk": "4.22.0-prerelease.1",
     "@openshift-console/dynamic-plugin-sdk-internal": "4.22.0-prerelease.1",
     "@openshift-console/dynamic-plugin-sdk-webpack": "4.22.0-prerelease.1",
-    "@openshift/dynamic-plugin-sdk": "^4.0.0",
-    "@openshift/dynamic-plugin-sdk-extensions": "^1.3.0",
-    "@openshift/dynamic-plugin-sdk-utils": "^4.1.0",
+    "@openshift/dynamic-plugin-sdk": "^8.1.0",
+    "@openshift/dynamic-plugin-sdk-extensions": "^1.4.0",
+    "@openshift/dynamic-plugin-sdk-utils": "^5.0.1",
     "@patternfly/react-charts": "^8.0.0",
     "@patternfly/react-component-groups": "^6.0.0",
     "@patternfly/react-core": "^6.4.0",
     "@patternfly/react-icons": "^6.4.0",
     "@patternfly/react-log-viewer": "^6.0.0",
+    "@patternfly/react-styles": "~6.4.0",
     "@patternfly/react-table": "^6.4.0",
     "@patternfly/react-tokens": "^6.4.0",
     "@patternfly/react-topology": "^6.0.0",
@@ -73,12 +74,12 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.1",
-    "eslint-plugin-react-hooks": "4.1.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "file-saver": "1.3.x",
-    "formik": "2.0.3",
+    "formik": "^2.1.5",
     "fuzzysearch": "1.0.x",
     "gitlab": "10.0.1",
-    "i18next-parser": "^3.11.0",
+    "i18next-parser": "^9.3.0",
     "jest": "^30.2.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-cli": "^30.2.0",
@@ -102,6 +103,7 @@
     "react-monaco-editor": "0.46.x",
     "react-redux": "8.1.3",
     "react-rnd": "^10.3.4",
+    "react-router": "5.3.x",
     "react-router-dom": "5.3.x",
     "react-router-dom-v5-compat": "^6.11.2",
     "react-transition-group": "2.3.x",
@@ -111,7 +113,7 @@
     "sass-loader": "^16.0.5",
     "style-loader": "^3.3.1",
     "stylelint": "16.12.0",
-    "stylelint-config-standard": "^31.0.0",
+    "stylelint-config-standard": "^36.0.0",
     "thread-loader": "^3.0.4",
     "ts-jest": "^29.3.1",
     "ts-loader": "^9.3.1",

src/components/details-page/details-page.tsx

@@ -134,13 +134,13 @@ export const ResourceSummary: FC<ResourceSummaryProps> = ({
               onClick={annotationsModalLauncher}
               variant="link"
             >
-              {t('{{count}} annotation', {
-                count: _.size(metadata.annotations),
+              {t('{{value}} annotation', {
+                value: _.size(metadata.annotations),
               })}
             </Button>
           ) : (
-            t('{{count}} annotation', {
-              count: _.size(metadata.annotations),
+            t('{{value}} annotation', {
+              value: _.size(metadata.annotations),
             })
           )}
         </DetailsItem>

src/components/pipeline-builder/switch-to-form-validation-utils.ts

@@ -35,7 +35,7 @@ const taskValidationYAMLSchema = (formData: PipelineBuilderFormValues) => {
     yup.lazy((taskObject) =>
       yup
         .object({
-          name: nameValidationSchema((tKey) => t(tKey)),
+          name: nameValidationSchema(t),
           taskRef: yup
             .object({
               name: yup.string(),

src/components/pipeline-builder/validation-utils.ts

@@ -1,4 +1,4 @@
-import { TFunction } from 'i18next';
+import { TFunction, TOptions } from 'i18next';
 import * as _ from 'lodash';
 import * as yup from 'yup';
 import {
@@ -19,7 +19,10 @@ import {
 import { findTaskFromFormikData, getTaskParameters } from './utils';
 
 export const nameRegex = /^[a-z]([a-z0-9]-?)*[a-z0-9]$/;
-export const nameValidationSchema = (t: TFunction, maxLength = 263) =>
+export const nameValidationSchema = (
+  t: (key: string, options?: TOptions) => string,
+  maxLength = 263,
+) =>
   yup
     .string()
     .matches(nameRegex, {
@@ -317,7 +320,7 @@ const pipelineBuilderFormSchema = (
   t: TFunction,
 ) => {
   return yup.object({
-    name: nameValidationSchema((tKey) => t(tKey)).required(t('Required')),
+    name: nameValidationSchema(t).required(t('Required')),
     params: yup.array().of(
       yup.object({
         name: yup.string().required(t('Required')),

src/components/pipelines-overview/dateTime.ts

@@ -272,19 +272,19 @@ export const getDuration = (seconds: number, long?: boolean): string => {
   }
   if (hr > 0) {
     duration += long
-      ? t('{{count}} hour', { count: hr })
+      ? t('{{value}} hour', { value: hr })
       : t('{{hr}}h', { hr });
     duration += ' ';
   }
   if (min > 0) {
     duration += long
-      ? t('{{count}} minute', { count: min })
+      ? t('{{value}} minute', { value: min })
       : t('{{min}}m', { min });
     duration += ' ';
   }
   if (sec > 0) {
     duration += long
-      ? t('{{count}} second', { count: sec })
+      ? t('{{value}} second', { value: sec })
       : t('{{sec}}s', { sec });
   }
 
@@ -334,12 +334,12 @@ export const fromNow = (
 
   if (options?.omitSuffix) {
     if (days) {
-      return t('{{count}} day', { count: days });
+      return t('{{value}} day', { value: days });
     }
     if (hours) {
-      return t('{{count}} hour', { count: hours });
+      return t('{{value}} hour', { value: hours });
     }
-    return t('{{count}} minute', { count: minutes });
+    return t('{{value}} minute', { value: minutes });
   }
 
   // Fallback to normal date/time formatting if Intl.RelativeTimeFormat is not

src/components/pipelines-overview/utils.ts

@@ -86,15 +86,15 @@ export const IntervalOptions = () => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
   return {
     [OFF_KEY]: t('Refresh off'),
-    '15s': t('{{count}} second', { count: 15 }),
-    '30s': t('{{count}} second', { count: 30 }),
-    '1m': t('{{count}} minute', { count: 1 }),
-    '5m': t('{{count}} minute', { count: 5 }),
-    '15m': t('{{count}} minute', { count: 15 }),
-    '30m': t('{{count}} minute', { count: 30 }),
-    '1h': t('{{count}} hour', { count: 1 }),
-    '2h': t('{{count}} hour', { count: 2 }),
-    '1d': t('{{count}} day', { count: 1 }),
+    '15s': t('{{value}} second', { value: 15 }),
+    '30s': t('{{value}} second', { value: 30 }),
+    '1m': t('{{value}} minute', { value: 1 }),
+    '5m': t('{{value}} minute', { value: 5 }),
+    '15m': t('{{value}} minute', { value: 15 }),
+    '30m': t('{{value}} minute', { value: 30 }),
+    '1h': t('{{value}} hour', { value: 1 }),
+    '2h': t('{{value}} hour', { value: 2 }),
+    '1d': t('{{value}} day', { value: 1 }),
   };
 };
 

src/components/pipelines-tasks/tasks-details-pages/events/events.jsx

@@ -199,11 +199,11 @@ export const NoMatchingEvents = ({ allCount }) => {
       <div className="cos-status-box__title">{t('No matching events')}</div>
       <div className="cp-text-align-center cos-status-box__detail">
         {allCount >= maxMessages
-          ? t('{{count}}+ event exist, but none match the current filter', {
-              count: maxMessages,
+          ? t('{{value}}+ event exist, but none match the current filter', {
+              value: maxMessages,
             })
-          : t('{{count}} event exist, but none match the current filter', {
-              count: allCount,
+          : t('{{value}} event exist, but none match the current filter', {
+              value: allCount,
             })}
       </div>
     </Box>
@@ -374,8 +374,8 @@ const EventStream = ({
   });
   const messageCount =
     count < maxMessages
-      ? t('Showing {{count}} event', { count })
-      : t('Showing most recent {{count}} event', { count });
+      ? t('Showing {{value}} event', { value: count })
+      : t('Showing most recent {{value}} event', { value: count });
 
   return (
     <PageSection hasBodyWrapper={false} isFilled >