Merge pull request #1650 from SanjalKatiyar/upgrade_deps_cve

Upgrade i18next-parser and @patternfly dependencies
red-hat-storage · Nov 4, 2024 · 1295245 · 1295245
2 parents bd167a7 + 63df5d0
commit 1295245
Show file tree

Hide file tree

Showing 39 changed files with 888 additions and 931 deletions.
diff --git a/.ci-operator.yaml b/.ci-operator.yaml
@@ -1,4 +1,4 @@
 build_root_image:
   name: odf-console-ci-runner
   namespace: ci
-  tag: node18
+  tag: node20
diff --git a/.github/workflows/ci-runner-image.yml b/.github/workflows/ci-runner-image.yml
@@ -17,6 +17,6 @@ jobs:
       - name: Login to Quay Registry
         run: echo ${{ secrets.QUAY_SECRET }} | docker login quay.io -u ${{ secrets.QUAY_UNAME }} --password-stdin
       - name: Build the CI runner image
-        run: docker build . --file Dockerfile.ci.runner --tag quay.io/ocs-dev/odf-console-ci:node18
+        run: docker build . --file Dockerfile.ci.runner --tag quay.io/ocs-dev/odf-console-ci-runner:node20
       - name: Push the CI runner image to ocs-dev
-        run: docker push quay.io/ocs-dev/odf-console-ci-runner:node18
+        run: docker push quay.io/ocs-dev/odf-console-ci-runner:node20
diff --git a/.github/workflows/frontend-build.yml b/.github/workflows/frontend-build.yml
@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16, 18.17.1]
+        node-version: [20.16.0, 22]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3

diff --git a/Dockerfile.ci b/Dockerfile.ci
@@ -1,11 +1,11 @@
-FROM docker.io/library/node:18.12.1 AS builder
+FROM docker.io/library/node:20.16.0 AS builder
 WORKDIR /app
 COPY . /app
 RUN yarn install --prod --frozen-lockfile
 RUN NODE_OPTIONS="--max-old-space-size=1024" yarn build
 
 
-FROM docker.io/library/node:18.12.1 AS serverpackage
+FROM docker.io/library/node:20.16.0 AS serverpackage
 RUN yarn global add http-server
 RUN export PATH="$(yarn global bin):$PATH"
 

diff --git a/Dockerfile.ci.runner b/Dockerfile.ci.runner
@@ -3,10 +3,10 @@
 # cypress/browsers: not used as they don't have a published image with our required NODE_VERSION.
 # cypress/included: same as cypress/browser + we don't need cypress preinstalled as we use our devDep. version.
 # cypress/base: used as it contains all the system dependencies required by cypress (but not cypress itself).
-FROM cypress/base:18.12.1
+FROM cypress/base:20.16.0
 
 # Yarn requires the home dir to be writable by any container user.
-ENV HOME /opt/home
+ENV HOME=/opt/home
 RUN mkdir -p ${HOME}
 RUN chmod 777 -R ${HOME}
 

diff --git a/Dockerfile.mco.ci b/Dockerfile.mco.ci
@@ -1,11 +1,11 @@
-FROM docker.io/library/node:18.12.1 AS builder
+FROM docker.io/library/node:20.16.0 AS builder
 WORKDIR /app
 COPY . /app
 RUN yarn install --prod --frozen-lockfile
 RUN NODE_OPTIONS="--max-old-space-size=1024" yarn build-mco
 
 
-FROM docker.io/library/node:18.12.1 AS serverpackage
+FROM docker.io/library/node:20.16.0 AS serverpackage
 RUN yarn global add http-server
 RUN export PATH="$(yarn global bin):$PATH"
 

diff --git a/i18next-parser.config.js b/i18next-parser.config.js
@@ -4,6 +4,10 @@ module.exports = {
   locales: ['en'],
   namespaceSeparator: '~',
   reactNamespace: false,
-  useKeysAsDefaultValue: true,
+  defaultValue: function (_, _, key, _) {
+    // The `useKeysAsDefaultValues` option is deprecated in favor of `defaultValue` option function arguments.
+    // The `key` is used to set default value.
+    return key;
+  },
   defaultNamespace: 'plugin__odf-console',
 };
diff --git a/jest/config.js b/jest/config.js
@@ -13,9 +13,10 @@ const config = {
   testEnvironment: 'jsdom',
   transform: {
     '\\.[jt]sx?$': '@swc/jest',
+    '\\.[m]js?$': '@swc/jest',
   },
   transformIgnorePatterns: [
-    '<rootDir>/node_modules/(?!(@openshift-console|@patternfly/react-core/dist|@patternfly/react-icons/dist|@patternfly/react-topology/dist|d3|delaunator|internmap|robust-predicates))',
+    '<rootDir>/node_modules/(?!(@openshift-console|@patternfly/react-core/dist|@patternfly/react-icons/dist|@patternfly/react-topology/dist|@patternfly/react-styles|d3|delaunator|internmap|robust-predicates))',
   ],
   testPathIgnorePatterns: ['/node_modules/', '/build/'],
   testRegex: '.*\\.spec\\.tsx?$',

diff --git a/jest/setup.ts b/jest/setup.ts
@@ -49,16 +49,17 @@ jest.mock('@openshift-console/dynamic-plugin-sdk/lib/api/common-types', () => ({
   SilenceStates: SilenceStates,
 }));
 
-// @TODO: delete this warning suppression once @patternfly/react-topology address this.
+// @TODO: delete this warning suppression once @patternfly/react-topology & @patternfly/react-table address this.
 const originalConsole = global.console;
 global.console = {
   ...global.console,
   warn: (...args) => {
     if (
       typeof args[0] === 'string' &&
-      args[0].includes(
+      (args[0].includes(
         '[mobx-react-lite] importing batchingForReactDom is no longer needed'
-      )
+      ) ||
+        args[0].includes('Th: Table headers must have an accessible name.'))
     ) {
       return true;
     }

diff --git a/locales/en/plugin__odf-console.json b/locales/en/plugin__odf-console.json
@@ -376,7 +376,7 @@
   "Enroll application": "Enroll application",
   "Application already enrolled in disaster recovery": "Application already enrolled in disaster recovery",
   "No assigned disaster recovery policy found": "No assigned disaster recovery policy found",
-  "<0>This managed application namespace is already DR protected. You may have protected this namespace while enrolling discovered applications.</0><1>To see disaster recovery information for your applications, go to <1>Protected applications</1> under&nbsp;<3>Disaster Recovery</3>.</1>": "<0>This managed application namespace is already DR protected. You may have protected this namespace while enrolling discovered applications.</0><1>To see disaster recovery information for your applications, go to <1>Protected applications</1> under&nbsp;<3>Disaster Recovery</3>.</1>",
+  "<0>This managed application namespace is already DR protected. You may have protected this namespace while enrolling discovered applications.</0><1>To see disaster recovery information for your applications, go to <1>Protected applications</1> under <3>Disaster Recovery</3>.</1>": "<0>This managed application namespace is already DR protected. You may have protected this namespace while enrolling discovered applications.</0><1>To see disaster recovery information for your applications, go to <1>Protected applications</1> under <3>Disaster Recovery</3>.</1>",
   "You have not enrolled this application yet. To protect your application,": "You have not enrolled this application yet. To protect your application,",
   "Disaster recovery policy details": "Disaster recovery policy details",
   "Name: {{name}} ({{status}})": "Name: {{name}} ({{status}})",
@@ -1539,6 +1539,8 @@
   "Subscriptions": "Subscriptions",
   "Project": "Project",
   "Composable table": "Composable table",
+  "Selectable table": "Selectable table",
+  "Select all": "Select all",
   "Show password": "Show password",
   "Enter node": "Enter node",
   "Deployment details": "Deployment details",

diff --git a/package.json b/package.json
@@ -66,13 +66,13 @@
     "@openshift-console/dynamic-plugin-sdk-internal": "1.0.0",
     "@openshift-console/dynamic-plugin-sdk-webpack": "1.1.1",
     "@openshift-console/plugin-shared": "^0.0.1",
-    "@patternfly/patternfly": "5.0.2",
-    "@patternfly/react-charts": "7.1.0",
-    "@patternfly/react-core": "5.1.0",
-    "@patternfly/react-icons": "5.0.1",
-    "@patternfly/react-table": "5.1.0",
-    "@patternfly/react-tokens": "5.1.0",
-    "@patternfly/react-topology": "5.0.0",
+    "@patternfly/patternfly": "5.4.2",
+    "@patternfly/react-charts": "7.4.5",
+    "@patternfly/react-core": "5.4.2",
+    "@patternfly/react-icons": "5.4.0",
+    "@patternfly/react-table": "5.4.8",
+    "@patternfly/react-tokens": "5.4.1",
+    "@patternfly/react-topology": "5.4.0",
     "@types/lodash-es": "^4.17.4",
     "@types/react-dnd-html5-backend": "^3.0.2",
     "buffer": "^6.0.3",
@@ -165,7 +165,7 @@
     "eventsource": "^1.1.1",
     "http-server": "0.12.x",
     "husky": "^7.0.0",
-    "i18next-parser": "^6.5.0",
+    "i18next-parser": "9.0.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "29.2.2",
     "jest-environment-jsdom": "^29.7.0",
@@ -192,7 +192,7 @@
     "tough-cookie": "^4.1.3"
   },
   "engines": {
-    "node": ">=14.17.0"
+    "node": ">=20.x"
   },
   "lint-staged": {
     "*.{ts,tsx,mts}": "eslint --cache --fix -c ./.eslintrc.js",

diff --git a/packages/ibm/system-connection-details.tsx b/packages/ibm/system-connection-details.tsx
@@ -132,7 +132,7 @@ export const FlashSystemConnectionDetails: React.FC<
           fieldId: 'password-input',
         }}
         render={({ onChange, onBlur }) => (
-          <InputGroup translate={undefined}>
+          <InputGroup>
             <InputGroupItem isFill>
               <TextInput
                 id="password-input"

diff --git a/packages/mco/components/create-dr-policy/select-cluster-list.tsx b/packages/mco/components/create-dr-policy/select-cluster-list.tsx
@@ -56,13 +56,11 @@ const ClusterRow: React.FC<RowComponentType<ManagedClusterInfoType>> = ({
   return (
     <>
       <Td
-        translate={null}
         dataLabel={getColumnHelper(COLUMN_NAMES.ManagedCluster, t).columnName}
       >
         <Text>{getName(cluster)}</Text>
       </Td>
       <Td
-        translate={null}
         dataLabel={
           getColumnHelper(COLUMN_NAMES.AvailabilityStatus, t).columnName
         }
@@ -80,25 +78,20 @@ const ClusterRow: React.FC<RowComponentType<ManagedClusterInfoType>> = ({
         )}
       </Td>
       <Td
-        translate={null}
         dataLabel={getColumnHelper(COLUMN_NAMES.DataFoundation, t).columnName}
       >
         <Text className={cn({ 'text-muted': !odfVersion })}>
           {odfVersion || t('Not Installed')}
         </Text>
       </Td>
       <Td
-        translate={null}
         dataLabel={getColumnHelper(COLUMN_NAMES.StorageClients, t).columnName}
       >
         <Text className={cn({ 'text-muted': !clientName })}>
           {clientName ? clientName : t('Unavailable')}
         </Text>
       </Td>
-      <Td
-        translate={null}
-        dataLabel={getColumnHelper(COLUMN_NAMES.Region, t).columnName}
-      >
+      <Td dataLabel={getColumnHelper(COLUMN_NAMES.Region, t).columnName}>
         <Text className={cn({ 'text-muted': !region })}>
           {region || t('Unavailable')}
         </Text>

diff --git a/.../components/discovered-application-wizard/wizard-steps/namespace-step/namesapce-table.tsx b/.../components/discovered-application-wizard/wizard-steps/namespace-step/namesapce-table.tsx
@@ -84,7 +84,7 @@ const TableRow: React.FC<RowComponentType<K8sResourceCommon>> = ({
 }) => {
   const { t } = useCustomTranslation();
   return (
-    <Td translate={null} dataLabel={getColumns(t)[0].columnName}>
+    <Td dataLabel={getColumns(t)[0].columnName}>
       <ResourceIcon resourceModel={NamespaceModel} />
       {getName(namespaceObj)}
     </Td>

diff --git a/packages/mco/components/modals/app-data-policies-status/subscriptions/dr-status-table.tsx b/packages/mco/components/modals/app-data-policies-status/subscriptions/dr-status-table.tsx
@@ -36,10 +36,6 @@ import {
 } from '../../../../utils';
 import './dr-status-table.scss';
 
-const reactPropFix = {
-  translate: 'yes',
-};
-
 const getLastDataSyncTime = (drpcList: DRPlacementControlKind[]): string =>
   getLatestDate(drpcList?.map((drpc) => drpc?.status?.lastGroupSyncTime));
 
@@ -167,53 +163,37 @@ export const DRPoliciesStatusTable: React.FC<DRPoliciesStatusTableProps> = ({
       </FlexItem>
       <FlexItem className="mco-dr-subs-status-table__box">
         <Table
-          {...reactPropFix}
           variant="compact"
           aria-label={t('Application list')}
           borders={false}
           gridBreakPoint=""
           isStickyHeader
         >
-          <Thead {...reactPropFix}>
-            <Tr {...reactPropFix}>
-              <Th
-                {...reactPropFix}
-                sort={getSortParams(0)}
-                data-test="policy-name-column"
-              >
+          <Thead>
+            <Tr>
+              <Th sort={getSortParams(0)} data-test="policy-name-column">
                 {t('Policy name')}
               </Th>
-              <Th
-                {...reactPropFix}
-                sort={getSortParams(1)}
-                data-test="last-sync-column"
-              >
+              <Th sort={getSortParams(1)} data-test="last-sync-column">
                 {t('Last sync')}
               </Th>
-              <Th
-                {...reactPropFix}
-                sort={getSortParams(2)}
-                data-test="activity-status-column"
-              >
+              <Th sort={getSortParams(2)} data-test="activity-status-column">
                 {t('Activity status')}
               </Th>
             </Tr>
           </Thead>
-          <Tbody {...reactPropFix}>
+          <Tbody>
             {sortedDRStatus?.map((drstatus, rowIndex) => (
-              <Tr {...reactPropFix} key={rowIndex}>
-                <Td {...reactPropFix} data-test={`policy-name-row-${rowIndex}`}>
+              <Tr key={rowIndex}>
+                <Td data-test={`policy-name-row-${rowIndex}`}>
                   {drstatus?.drPolicyName}
                 </Td>
-                <Td {...reactPropFix} data-test={`last-sync-row-${rowIndex}`}>
+                <Td data-test={`last-sync-row-${rowIndex}`}>
                   <Tooltip content={drstatus?.lastSync?.toolTip}>
                     <StatusIconAndText title={drstatus?.lastSync?.text} />
                   </Tooltip>
                 </Td>
-                <Td
-                  {...reactPropFix}
-                  data-test={`activity-status-row-${rowIndex}`}
-                >
+                <Td data-test={`activity-status-row-${rowIndex}`}>
                   <Tooltip content={drstatus?.currentStatus?.toolTip}>
                     <StatusIconAndText
                       title={drstatus?.currentStatus?.text}

diff --git a/packages/mco/components/protected-applications/list-page.tsx b/packages/mco/components/protected-applications/list-page.tsx
@@ -120,10 +120,9 @@ const ProtectedAppsTableRow: React.FC<
 
   return (
     <>
-      <Tr translate={null}>
+      <Tr>
         <Td
           data-test="expand-button"
-          translate={null}
           expand={{
             rowIndex,
             isExpanded: isExpanded,
@@ -134,14 +133,14 @@ const ProtectedAppsTableRow: React.FC<
             expandId: 'expandable-table',
           }}
         />
-        <Td translate={null} dataLabel={columnNames[1]}>
+        <Td dataLabel={columnNames[1]}>
           <ResourceLink
             resourceModel={DRPlacementControlModel}
             resourceName={appName}
             link={drpcDetailsPageRoute(application)}
           />
         </Td>
-        <Td translate={null} dataLabel={columnNames[2]}>
+        <Td dataLabel={columnNames[2]}>
           <SelectExpandable
             title={
               <div>
@@ -182,7 +181,7 @@ const ProtectedAppsTableRow: React.FC<
             />
           )}
         </Td>
-        <Td translate={null} dataLabel={columnNames[3]}>
+        <Td dataLabel={columnNames[3]}>
           <SelectExpandable
             title={
               <div>
@@ -199,27 +198,26 @@ const ProtectedAppsTableRow: React.FC<
             })}
           />
         </Td>
-        <Td translate={null} dataLabel={columnNames[4]}>
+        <Td dataLabel={columnNames[4]}>
           <Link
             to={`${DR_BASE_ROUTE}/policies?name=${drPolicyName}`}
             data-test={`link-${drPolicyName}`}
           >
             {drPolicyName}
           </Link>
         </Td>
-        <Td translate={null} dataLabel={columnNames[5]}>
+        <Td dataLabel={columnNames[5]}>
           {getLastAppDeploymentClusterName(application) || DASH}
         </Td>
-        <Td translate={null} isActionCell>
+        <Td isActionCell>
           <ActionsColumn
             items={getRowActions(t, launcher, navigate, application)}
-            translate={null}
           />
         </Td>
       </Tr>
       {isExpanded && (
-        <Tr translate={null}>
-          <Td translate={null} colSpan={Object.keys(columnNames).length + 1}>
+        <Tr>
+          <Td colSpan={Object.keys(columnNames).length + 1}>
             <ExpandableComponent
               application={application}
               syncStatusInfo={syncStatusInfo}

diff --git a/packages/ocs/dashboards/common/capacity-card/capacity-card.scss b/packages/ocs/dashboards/common/capacity-card/capacity-card.scss
@@ -11,8 +11,10 @@
     padding-top: var(--pf-v5-global--spacer--md);
   }
   &__chart {
-    flex-grow: 0.5;
+    flex-grow: 0.12;
     max-height: 180px;
+    margin-bottom: 1rem;
+    margin-right: 1rem;
   }
   &--error {
     margin-top: var(--pf-v5-global--spacer--xs);

diff --git a/packages/odf/components/bucket-class/time-duration-dropdown.tsx b/packages/odf/components/bucket-class/time-duration-dropdown.tsx
@@ -32,7 +32,7 @@ export const TimeDurationDropdown: React.FC<TimeDurationDropdownProps> = ({
   };
 
   return (
-    <InputGroup translate={undefined}>
+    <InputGroup>
       <InputGroupItem isFill>
         <TextInput
           className={classNames('pf-v5-c-form-control', inputClassName)}