Upgrade to Patternfly 5 and SDK 1.1.0

.github/workflows/on_pull_request.yaml

@@ -72,7 +72,7 @@ jobs:
       - name: Cypress run
         uses: cypress-io/[email protected]
         with:
-          start: yarn dev, yarn start-console
+          start: yarn serve-build, yarn start-console
           wait-on: "http://localhost:9001"
           browser: chrome
           headed: false

cypress/e2e/NewPolicy.spec.cy.ts

@@ -1,6 +1,6 @@
 const deletePolicyFromDetailsPage = (policyName: string) => {
   cy.contains('button', 'Actions', { matchCase: false }).click();
-  cy.contains('a', 'Delete').click();
+  cy.contains('button', 'Delete').click();
 
   cy.contains('button[disabled]', 'Delete');
 
@@ -57,8 +57,7 @@ describe('Create new policy with form', () => {
 
     cy.contains('button', 'Add another interface to the policy', { matchCase: false }).click();
 
-    cy.get('button#policy-interface-type-0').click();
-    cy.contains('button', 'Bonding').click();
+    cy.get('#policy-interface-type-0').select('bond');
 
     cy.get('input#policy-interface-port-0').type('eth1');
 

cypress/e2e/StatusList.spec.cy.ts

@@ -19,7 +19,7 @@ describe('NodeNetworkState list', () => {
 
     cy.wait(['@getStatuses'], { timeout: 40000 });
 
-    cy.get('.pf-c-empty-state').should('contain', 'No NodeNetworkStates found');
+    cy.get('.pf-v5-c-empty-state').should('contain', 'No NodeNetworkStates found');
   });
 
   it('with one VID instace ', () => {

cypress/support/commands.ts

@@ -43,7 +43,7 @@ Cypress.Commands.add('login', (provider, username, password) => {
 
     const idp = provider || KUBEADMIN_IDP;
 
-    cy.get('.pf-c-login__main-body').should('be.visible');
+    cy.get('.pf-v5-c-login__main-body').should('be.visible');
 
     cy.get('body').then(($body) => {
       if ($body.text().includes(idp)) {

package.json

@@ -8,6 +8,7 @@
   "scripts": {
     "clean": "rm -rf dist",
     "build": "yarn clean && NODE_ENV=production yarn webpack",
+    "serve-build": "yarn build && npx http-server -p 9001 dist",
     "dev": "yarn webpack serve",
     "start-console": "./scripts/start-console.sh",
     "create-cluster": "./scripts/deploy-cluster.sh",
@@ -26,12 +27,12 @@
   },
   "devDependencies": {
     "@kubevirt-ui/kubevirt-api": "^0.0.47",
-    "@openshift-console/dynamic-plugin-sdk": "0.0.20",
-    "@openshift-console/dynamic-plugin-sdk-webpack": "0.0.8",
+    "@openshift-console/dynamic-plugin-sdk": "1.1.0",
+    "@openshift-console/dynamic-plugin-sdk-webpack": "1.0.1",
     "@openshift/dynamic-plugin-sdk": "~1.0.0",
     "@openshift/dynamic-plugin-sdk-webpack": "~1.0.0",
-    "@patternfly/react-core": "4.175.4",
-    "@patternfly/react-table": "^4.93.1",
+    "@patternfly/react-core": "5.1.1",
+    "@patternfly/react-table": "^5.1.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -55,6 +56,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-testing-library": "^5.6.0",
+    "http-server": "^14.1.1",
     "i18next-parser": "^6.5.0",
     "immer": "^9.0.16",
     "jest": "^28.1.3",
@@ -63,10 +65,10 @@
     "prettier": "^2.7.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-i18next": "^11.8.11",
-    "react-query": "^3.39.2",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-i18next": "^11.7.3",
+    "react-router": "5.3.x",
+    "react-router-dom": "5.3.x",
+    "react-router-dom-v5-compat": "^6.22.3",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1",
@@ -76,8 +78,8 @@
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typescript": "^4.9.4",
     "use-immer": "^0.8.1",
-    "webpack": "^5.68.0",
-    "webpack-cli": "^4.9.2",
+    "webpack": "5.90.3",
+    "webpack-cli": "4.10.x",
     "webpack-dev-server": "^4.7.4"
   },
   "resolutions": {

src/utils/components/ActionDropdownItem/ActionDropdownItem.tsx

@@ -0,0 +1,37 @@
+import React, { Dispatch, FC, SetStateAction } from 'react';
+
+import { Action, useAccessReview } from '@openshift-console/dynamic-plugin-sdk';
+import { DropdownItem } from '@patternfly/react-core';
+
+import './action-dropdown-item.scss';
+
+type ActionDropdownItemProps = {
+  action: Action;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+const ActionDropdownItem: FC<ActionDropdownItemProps> = ({ action, setIsOpen }) => {
+  const [actionAllowed] = useAccessReview(action?.accessReview);
+
+  const handleClick = () => {
+    if (typeof action?.cta === 'function') {
+      action?.cta();
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <DropdownItem
+      data-test-id={`${action?.id}`}
+      description={action?.description}
+      isDisabled={action?.disabled || !actionAllowed}
+      key={action?.id}
+      onClick={handleClick}
+    >
+      {action?.label}
+      {action?.icon && <span className="text-muted">{action.icon}</span>}
+    </DropdownItem>
+  );
+};
+
+export default ActionDropdownItem;

src/utils/components/ActionDropdownItem/action-dropdown-item.scss

@@ -0,0 +1,6 @@
+.ActionDropdownItem {
+  &__disabled {
+    cursor: unset;
+    color: var(--pf-global--disabled-color--100);
+  }
+}

src/utils/components/ActionsDropdown/ActionsDropdown.tsx

@@ -0,0 +1,63 @@
+import React, { FC, memo, useState } from 'react';
+
+import { Action } from '@openshift-console/dynamic-plugin-sdk';
+import { Dropdown, DropdownList } from '@patternfly/react-core';
+import DropdownToggle from '@utils/components/Toggles/DropdownToggle';
+import KebabToggle from '@utils/components/Toggles/KebabToggle';
+import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
+
+import ActionDropdownItem from '../ActionDropdownItem/ActionDropdownItem';
+
+type ActionsDropdownProps = {
+  actions: Action[];
+  className?: string;
+  id?: string;
+  isKebabToggle?: boolean;
+  onLazyClick?: () => void;
+};
+
+const ActionsDropdown: FC<ActionsDropdownProps> = ({
+  actions = [],
+  className,
+  id,
+  isKebabToggle,
+  onLazyClick,
+}) => {
+  const { t } = useNMStateTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onToggle = () => {
+    setIsOpen((prevIsOpen) => {
+      if (onLazyClick && !prevIsOpen) onLazyClick();
+
+      return !prevIsOpen;
+    });
+  };
+
+  const Toggle = isKebabToggle
+    ? KebabToggle({ isExpanded: isOpen, onClick: onToggle })
+    : DropdownToggle({
+        children: t('Actions'),
+        isExpanded: isOpen,
+        onClick: onToggle,
+      });
+
+  return (
+    <Dropdown
+      className={className}
+      data-test-id={id}
+      isOpen={isOpen}
+      onOpenChange={(open: boolean) => setIsOpen(open)}
+      popperProps={{ enableFlip: true, position: 'right' }}
+      toggle={Toggle}
+    >
+      <DropdownList>
+        {actions?.map((action) => (
+          <ActionDropdownItem action={action} key={action?.id} setIsOpen={setIsOpen} />
+        ))}
+      </DropdownList>
+    </Dropdown>
+  );
+};
+
+export default memo(ActionsDropdown);

src/utils/components/NodeSelectorModal/NodeSelectorModal.tsx

@@ -140,7 +140,7 @@ const NodeSelectorModal: FC<NodeSelectorModalProps> = ({ policy, isOpen, onClose
           </Alert>
         )}
 
-        <ActionGroup className="pf-c-form">
+        <ActionGroup className="pf-v5-c-form">
           <Button type={ButtonType.submit} variant={ButtonVariant.primary} onClick={onSave}>
             {t('Save')}
           </Button>

src/utils/components/NodeSelectorModal/components/LabelRow.tsx

@@ -25,7 +25,7 @@ const LabelRow: FC<LabelRowProps> = ({ label, onChange, onDelete }) => {
             isRequired
             type="text"
             value={key}
-            onChange={(newKey) => onChange({ ...label, key: newKey })}
+            onChange={(_, newKey) => onChange({ ...label, key: newKey })}
             aria-label={t('selector key')}
           />
         </FormGroup>
@@ -38,7 +38,7 @@ const LabelRow: FC<LabelRowProps> = ({ label, onChange, onDelete }) => {
             isRequired
             type="text"
             value={value}
-            onChange={(newValue) => onChange({ ...label, value: newValue })}
+            onChange={(_, newValue) => onChange({ ...label, value: newValue })}
             aria-label={t('selector value')}
           />
         </FormGroup>

src/utils/components/PolicyForm/BondOptions.tsx

@@ -20,9 +20,7 @@ const BondOptions: FC<BondOptionsProps> = ({ id, onInterfaceChange, policyInterf
   const { t } = useNMStateTranslation();
   const options = policyInterface?.['link-aggregation']?.options || {};
 
-  const selectableOptions = BOND_OPTIONS_KEYS.filter(
-    (optionKey) => !Object.hasOwn(options, optionKey),
-  );
+  const selectableOptions = BOND_OPTIONS_KEYS.filter((optionKey) => !(optionKey in options));
 
   const onKeyChange = (oldKey, newKey) => {
     onInterfaceChange((draftInterface) => {

src/utils/components/PolicyForm/PolicyForm.tsx

@@ -79,7 +79,7 @@ const PolicyForm: FC<PolicyFormProps> = ({ policy, setPolicy, createForm = false
           <FormGroup fieldId="apply-selector">
             <ApplySelectorCheckbox
               isChecked={!!policy?.spec.nodeSelector}
-              onChange={(checked) => {
+              onChange={(_, checked) => {
                 if (checked) setModalOpen(true);
                 else
                   setPolicy((draftPolicy) => {
@@ -98,7 +98,7 @@ const PolicyForm: FC<PolicyFormProps> = ({ policy, setPolicy, createForm = false
           name="policy-name"
           value={policy?.metadata?.name}
           isDisabled={!createForm}
-          onChange={(newName) =>
+          onChange={(_, newName) =>
             setPolicy((draftPolicy) => {
               draftPolicy.metadata.name = newName;
             })
@@ -111,7 +111,7 @@ const PolicyForm: FC<PolicyFormProps> = ({ policy, setPolicy, createForm = false
           id="policy-description"
           name="policy-description"
           value={policy?.metadata?.annotations?.description}
-          onChange={onDescriptionChange}
+          onChange={(_, newValue) => onDescriptionChange(newValue)}
         />
       </FormGroup>
       <div>