Initial PF5 update

Signed-off-by: yaacov <kobi.zamir@gmail.com>
kubev2v · Sep 24, 2024 · e5d6926 · e5d6926
1 parent d695b4a
commit e5d6926
Show file tree

Hide file tree

Showing 164 changed files with 14,777 additions and 17,194 deletions.
diff --git a/build/Containerfile b/build/Containerfile
@@ -7,7 +7,7 @@ FROM registry.access.redhat.com/ubi9/nodejs-18 AS build
 #      -t quay.io/kubev2v/forklift-console-plugin \
 #      -f ./build/Containerfile \
 #      --build-arg VERSION=1.2.3 .
-ARG VERSION=2.6.4
+ARG VERSION=2.7.0
 ENV VERSION=${VERSION}
 
 # Copy app source

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,23 +11,20 @@
     "packages/common",
     "packages/forklift-console-plugin"
   ],
-  "config": {
-    "libs": "-w @kubev2v/webpack -w @kubev2v/common"
-  },
   "scripts": {
     "clean": "rm -rf ./dist ./coverage && npm run clean -ws --if-present",
     "clean:all": "npm run clean && npm run clean:all -ws --if-present && rm -rf ./node_modules ./tmp ",
-    "build": "NODE_ENV=production npm run build $npm_package_config_libs && NODE_ENV=production npm run build -w @kubev2v/forklift-console-plugin",
-    "build:dev": "npm run build $npm_package_config_libs && npm run build:dev -w @kubev2v/forklift-console-plugin",
+    "build": "NODE_ENV=production npm run build -w @kubev2v/common && NODE_ENV=production npm run build -w @kubev2v/forklift-console-plugin",
+    "build:dev": "npm run build -w @kubev2v/common && npm run build:dev -w @kubev2v/forklift-console-plugin",
     "start": "npm run start -w @kubev2v/forklift-console-plugin",
-    "start:overlay-proxy": "npm run build $npm_package_config_libs && npm run start -w @kubev2v/forklift-console-plugin -- -c webpack.proxy.config.ts",
+    "start:overlay-proxy": "npm run build -w @kubev2v/common && npm run start -w @kubev2v/forklift-console-plugin -- -c webpack.proxy.config.ts",
     "i18n": "npm run i18n -w @kubev2v/forklift-console-plugin",
     "lint": "npm run lint -ws --if-present",
     "lint:fix": "npm run lint:fix -ws --if-present",
     "test:i18n": "bash ./ci/test-i18n.sh",
-    "test": "npm run build $npm_package_config_libs && npm run test -ws --if-present",
-    "test:coverage": "npm run build $npm_package_config_libs && npm run test:coverage -ws --if-present",
-    "test:updateSnapshot": "npm run build $npm_package_config_libs && npm run test:updateSnapshot -ws --if-present",
+    "test": "npm run build -w @kubev2v/common && npm run test -ws --if-present",
+    "test:coverage": "npm run build -w @kubev2v/common && npm run test:coverage -ws --if-present",
+    "test:updateSnapshot": "npm run build -w @kubev2v/common && npm run test:updateSnapshot -ws --if-present",
     "test:e2e": "cypress run --config-file cypress/cypress.config.cjs --browser chrome --headed",
     "console": "bash ./ci/start-console.sh",
     "console:oauth": "bash ./ci/start-console.sh --auth",
@@ -51,15 +48,12 @@
     "@rollup/plugin-typescript": "^11.0.0",
     "@rollup/plugin-url": "^8.0.2",
     "@rollup/pluginutils": "^5.0.2",
-    "@testing-library/cypress": "^9.0.0",
+    "@testing-library/cypress": "^10.0.2",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/node": "^20.1.0",
+    "@types/node": "^20.16.6",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
     "@typescript-eslint/parser": "^5.29.0",
-    "cypress": "^12.8.1",
+    "cypress": "^13.14.2",
     "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.1.0",
@@ -69,18 +63,18 @@
     "eslint-plugin-testing-library": "^5.6.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "i18next-parser": "^6.5.0",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest": "^27.4.5",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "^2.7.1",
     "prettier-stylelint": "^0.4.2",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-import-css": "^3.1.0",
     "stylelint": "^14.9.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^26.0.0",
-    "ts-jest": "^28.0.7",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.7.4",
-    "webpack": "^5.79.0"
+    "ts-jest": "^27.1.1",
+    "ts-loader": "9.x",
+    "ts-node": "10.x",
+    "typescript": "^4.5.5"
   }
 }
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -29,37 +29,38 @@
     "storybook:build": "storybook build"
   },
   "peerDependencies": {
-    "@openshift-console/dynamic-plugin-sdk": "0.0.21",
-    "@patternfly/react-core": "4.276.6",
-    "@patternfly/react-table": "4.112.39",
-    "@patternfly/react-icons": "5.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-i18next": "^11.7.3",
-    "react-query": "^3.39.2",
-    "react-router": "5.3.x",
-    "react-router-dom": "5.3.x",
+    "@openshift-console/dynamic-plugin-sdk": "1.6.0",
+    "@patternfly/react-core": "^5.4.0",
+    "@patternfly/react-icons": "^5.4.0",
+    "@patternfly/react-table": "^5.4.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^15.0.2",
+    "react-query": "^3.39.3",
+    "react-router": "^6.26.2",
+    "react-router-dom": "^6.26.2",
     "jsonpath": "^1.1.1",
     "jsrsasign": "11.1.0",
-    "luxon": "^3.3.0"
+    "luxon": "^3.5.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.5.0",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-interactions": "^8.1.5",
-    "@storybook/addon-links": "^8.1.5",
-    "@storybook/addon-storysource": "^8.1.5",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.3",
-    "@storybook/blocks": "^8.1.5",
+    "@chromatic-com/storybook": "^2.0.2",
+    "@storybook/addon-essentials": "^8.3.2",
+    "@storybook/addon-interactions": "^8.3.2",
+    "@storybook/addon-links": "^8.3.2",
+    "@storybook/addon-storysource": "^8.3.2",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "^8.3.2",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^8.1.5",
-    "@storybook/react-webpack5": "^8.1.5",
-    "@storybook/test": "^8.1.5",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.1",
+    "@storybook/react": "^8.3.2",
+    "@storybook/react-webpack5": "^8.3.2",
+    "@storybook/test": "^8.3.2",
+    "@testing-library/react": "^16.0.1",
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "^18.3.0",
     "eslint-plugin-storybook": "^0.8.0",
     "prop-types": "^15.8.1",
-    "sass": "^1.63.3",
-    "storybook": "^8.1.5"
+    "sass": "^1.79.3",
+    "storybook": "^8.3.2"
   }
 }
diff --git a/packages/common/src/components/ActionServiceDropdown/ActionServiceDropdown.tsx b/packages/common/src/components/ActionServiceDropdown/ActionServiceDropdown.tsx
@@ -1,8 +1,13 @@
 import React, { useMemo, useState } from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
 
 import { ActionService, ActionServiceProvider } from '@openshift-console/dynamic-plugin-sdk';
-import { Dropdown, DropdownItem, DropdownToggle, KebabToggle } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  KebabToggle,
+} from '@patternfly/react-core/deprecated';
 
 import { ToggleEventType } from '../../utils';
 
@@ -66,7 +71,7 @@ const ActionsAsDropdown = ({
   ignoreList = [],
 }: ActionService &
   Pick<ActionServiceDropdownProps<object>, 'variant' | 'dropdownToggleText' | 'ignoreList'>) => {
-  const history = useHistory();
+  const history = useNavigate();
   const [isActionMenuOpen, setIsActionMenuOpen] = useState(false);
   const isPlain = variant === 'kebab';
 
@@ -76,9 +81,9 @@ const ActionsAsDropdown = ({
 
   const toggle =
     variant === 'kebab' ? (
-      <KebabToggle onToggle={onToggle} />
+      <KebabToggle onToggle={(e, v) => onToggle(v, e)} />
     ) : (
-      <DropdownToggle onToggle={onToggle}>{dropdownToggleText}</DropdownToggle>
+      <DropdownToggle onToggle={(e, v) => onToggle(v, e)}>{dropdownToggleText}</DropdownToggle>
     );
 
   return (
@@ -93,7 +98,7 @@ const ActionsAsDropdown = ({
         .map(({ id, label, cta, disabled, disabledTooltip, tooltip }) => (
           <DropdownItem
             key={id}
-            onClick={typeof cta === 'function' ? cta : () => cta.href && history.push(cta.href)}
+            onClick={typeof cta === 'function' ? cta : () => cta.href && history(cta.href)}
             isAriaDisabled={disabled}
             tooltip={disabled ? disabledTooltip : tooltip}
           >

diff --git a/packages/common/src/components/Filter/AutocompleteFilter.tsx b/packages/common/src/components/Filter/AutocompleteFilter.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
 
+import { ToolbarChip, ToolbarFilter } from '@patternfly/react-core';
 import {
   Select,
   SelectOption,
   SelectOptionObject,
   SelectVariant,
-  ToolbarChip,
-  ToolbarFilter,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 import { SelectEventType, SelectValueType, ToggleEventType } from '../../utils';
 
@@ -108,7 +107,7 @@ export const AutocompleteFilter = ({
         selections={[]}
         placeholderText={placeholderLabel}
         isOpen={isExpanded}
-        onToggle={onToggle}
+        onToggle={(e, v) => onToggle(v, e)}
         onFilter={onFilter}
         shouldResetOnSelect={true}
       >

diff --git a/packages/common/src/components/Filter/EnumFilter.tsx b/packages/common/src/components/Filter/EnumFilter.tsx
@@ -1,13 +1,12 @@
 import React, { useMemo, useState } from 'react';
 
+import { ToolbarChip, ToolbarFilter } from '@patternfly/react-core';
 import {
   Select,
   SelectOption,
   SelectOptionObject,
   SelectVariant,
-  ToolbarChip,
-  ToolbarFilter,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 import { localeCompare, SelectEventType, SelectValueType, ToggleEventType } from '../../utils';
 
@@ -185,7 +184,7 @@ export const EnumFilter = ({
         selections={selectedUniqueEnumLabels}
         placeholderText={placeholderLabel}
         isOpen={isExpanded}
-        onToggle={onToggle}
+        onToggle={(e, v) => onToggle(v, e)}
         hasInlineFilter={hasInlineFilter}
         onFilter={onFilter}
       >

diff --git a/packages/common/src/components/Filter/GroupedEnumFilter.tsx b/packages/common/src/components/Filter/GroupedEnumFilter.tsx
@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 
+import { ToolbarFilter } from '@patternfly/react-core';
 import {
   Select,
   SelectGroup,
   SelectOption,
   SelectOptionObject,
   SelectVariant,
-  ToolbarFilter,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 import { EnumValue, SelectEventType, SelectValueType, ToggleEventType } from '../../utils';
 
@@ -166,7 +166,7 @@ export const GroupedEnumFilter = ({
             .map(toSelectOption)}
           placeholderText={placeholderLabel}
           isOpen={isExpanded}
-          onToggle={onToggle}
+          onToggle={(e, v) => onToggle(v, e)}
           hasInlineFilter={hasInlineFilter}
           onFilter={onFilter}
         >

diff --git a/packages/common/src/components/Filter/SwitchFilter.tsx b/packages/common/src/components/Filter/SwitchFilter.tsx
@@ -31,7 +31,7 @@ export const SwitchFilter = ({
       <Switch
         label={placeholderLabel}
         isChecked={selectedFilters.length === 1 && selectedFilters[0] === 'true'}
-        onChange={onChange}
+        onChange={(e, v) => onChange(v, e)}
       />
     </ToolbarItem>
   );

diff --git a/packages/common/src/components/Filter/__tests__/useUnique.test.tsx b/packages/common/src/components/Filter/__tests__/useUnique.test.tsx
@@ -1,4 +1,4 @@
-import { cleanup, renderHook } from '@testing-library/react-hooks';
+import { cleanup, renderHook } from '@testing-library/react';
 
 import { useUnique } from '../EnumFilter';
 

diff --git a/packages/common/src/components/FilterGroup/AttributeValueFilter.tsx b/packages/common/src/components/FilterGroup/AttributeValueFilter.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
 
+import { ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
 import {
   Select,
   SelectOption,
   SelectOptionObject,
   SelectVariant,
-  ToolbarGroup,
-  ToolbarItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 import { SelectEventType, SelectValueType, ToggleEventType } from '../../utils';
 
@@ -66,7 +65,7 @@ export const AttributeValueFilter = ({
       <ToolbarItem>
         <Select
           onSelect={onFilterTypeSelect}
-          onToggle={onToggle}
+          onToggle={(e, v) => onToggle(v, e)}
           isOpen={expanded}
           variant={SelectVariant.single}
           aria-label={'Select Filter'}

diff --git a/packages/common/src/components/FilterGroup/__tests__/useUrlFilters.test.tsx b/packages/common/src/components/FilterGroup/__tests__/useUrlFilters.test.tsx
@@ -1,4 +1,6 @@
-import { act, cleanup, renderHook } from '@testing-library/react-hooks';
+import { act } from 'react';
+
+import { cleanup, renderHook } from '@testing-library/react';
 
 import { NAME } from '../../../utils';
 import { useUrlFilters } from '../useUrlFilters';

diff --git a/packages/common/src/components/FormGroupWithHelpText/FormGroupWithHelpText.tsx b/packages/common/src/components/FormGroupWithHelpText/FormGroupWithHelpText.tsx
@@ -68,7 +68,7 @@ export const FormGroupWithHelpText: React.FC<FormGroupWithHelpTextProps> = ({
       role={role}
     >
       {children}
-      <FormHelperText isHidden={false}>
+      <FormHelperText hidden={false}>
         <HelperText>
           <HelperTextItem variant={variant}>{helperTextMsg}</HelperTextItem>
         </HelperText>

diff --git a/packages/common/src/components/Page/PageStates.tsx b/packages/common/src/components/Page/PageStates.tsx
@@ -3,9 +3,11 @@ import React, { ComponentType } from 'react';
 import {
   Button,
   EmptyState,
+  EmptyStateActions,
   EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
   EmptyStateIcon,
-  EmptyStatePrimary,
   Spinner,
   Title,
 } from '@patternfly/react-core';
@@ -20,8 +22,8 @@ import { ExclamationCircleIcon, SearchIcon } from '@patternfly/react-icons';
 export const BaseState = ({
   title,
   Icon,
-  color,
   Component,
+  color,
 }: {
   title?: string;
   Icon?: ComponentType;
@@ -30,15 +32,14 @@ export const BaseState = ({
 }) => {
   return (
     <EmptyState>
-      <EmptyStateIcon
-        component={Component}
-        icon={Icon}
-        color={color}
-        variant={Component ? 'container' : 'icon'}
+      <EmptyStateHeader
+        titleText={title}
+        headingLevel="h4"
+        icon={<EmptyStateIcon icon={Icon} color={color} />}
       />
-      <Title headingLevel="h4" size="lg">
-        {title}
-      </Title>
+      <EmptyStateBody>
+        <Component />
+      </EmptyStateBody>
     </EmptyState>
   );
 };
@@ -79,11 +80,13 @@ export const NoResultsMatchFilter = ({
         {title}
       </Title>
       <EmptyStateBody>{description}</EmptyStateBody>
-      <EmptyStatePrimary>
-        <Button variant="link" onClick={clearAllFilters}>
-          {clearAllLabel}
-        </Button>
-      </EmptyStatePrimary>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button variant="link" onClick={clearAllFilters}>
+            {clearAllLabel}
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
     </EmptyState>
   );
 };
diff --git a/packages/common/src/components/Page/__tests__/useFields.test.tsx b/packages/common/src/components/Page/__tests__/useFields.test.tsx
@@ -1,4 +1,6 @@
-import { act, cleanup, renderHook } from '@testing-library/react-hooks';
+import { act } from 'react';
+
+import { cleanup, renderHook } from '@testing-library/react';
 
 import { NAME, NAMESPACE } from '../../../utils';
 import { useFields } from '../useFields';