Skip to content
This repository has been archived by the owner on Nov 28, 2024. It is now read-only.

Commit

Permalink
Patternfly 5
Browse files Browse the repository at this point in the history
  • Loading branch information
upalatucci committed Mar 20, 2024
1 parent 96b1471 commit ec67fb0
Show file tree
Hide file tree
Showing 38 changed files with 2,606 additions and 2,657 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/on_pull_request.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/StatusList.spec.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 ', () => {
Expand Down
2 changes: 1 addition & 1 deletion cypress/support/commands.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down
22 changes: 12 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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": {
Expand Down
37 changes: 37 additions & 0 deletions src/utils/components/ActionDropdownItem/ActionDropdownItem.tsx
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.ActionDropdownItem {
&__disabled {
cursor: unset;
color: var(--pf-global--disabled-color--100);
}
}
63 changes: 63 additions & 0 deletions src/utils/components/ActionsDropdown/ActionsDropdown.tsx
Original file line number Diff line number Diff line change
@@ -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);
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 1 addition & 3 deletions src/utils/components/PolicyForm/BondOptions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
6 changes: 3 additions & 3 deletions src/utils/components/PolicyForm/PolicyForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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;
})
Expand All @@ -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>
Expand Down
Loading

0 comments on commit ec67fb0

Please sign in to comment.