Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(deps): Update @patternfly/* dependencies #791

Merged
merged 1 commit into from
Feb 6, 2024
Merged

chore(deps): Update @patternfly/* dependencies #791

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
"packages/*"
],
"resolutions": {
"@patternfly/patternfly": "^5.0.0",
"@patternfly/react-code-editor": "^5.0.0",
"@patternfly/react-core": "^5.0.0",
"@patternfly/react-icons": "^5.0.0",
"@patternfly/react-table": "^5.0.0",
"@patternfly/react-topology": "^5.0.0",
"@patternfly/patternfly": "5.2.0",
"@patternfly/react-code-editor": "5.1.0",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At the moment we can't upgrade @patternfly/react-code-editor due to an issue affecting how we load schemas.

"@patternfly/react-core": "5.2.0",
"@patternfly/react-icons": "5.2.0",
"@patternfly/react-table": "5.2.0",
"@patternfly/react-topology": "5.2.0",
"axios": "1.6.7",
"react": "18.2.0",
"react-dom": "18.2.0",
Expand Down
6 changes: 1 addition & 5 deletions packages/ui-tests/cypress/support/next-commands/design.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,7 @@ Cypress.Commands.add('selectPrependNode', (nodeName: string, nodeIndex?: number)

Cypress.Commands.add('performNodeAction', (nodeName: string, action: ActionType, nodeIndex?: number) => {
nodeIndex = nodeIndex ?? 0;
cy.get(`[data-nodelabel="${nodeName}"]`)
.parent()
.eq(nodeIndex)
.find('g.pf-topology__node__action-icon > rect')
.click({ force: true });
cy.get(`[data-nodelabel="${nodeName}"]`).parent().eq(nodeIndex).rightclick({ force: true });
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tplevko, I need to change this functionality from getting the parent of the node to search for the three dots menu to right-click on the node because of a structural change in @patternfly/react-topology that moves the selected node label to another layer, so we can't continue going to the parent and search for the menu there.

cy.get(`[data-testid="context-menu-item-${action}"]`).click();
});

Expand Down
22 changes: 11 additions & 11 deletions packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
"start": "vite",
"build": "tsc && vite build --config vite.config.js",
"build:lib": "yarn rimraf ./lib && yarn copy-catalog && yarn build:esm && yarn build:cjs",
"build:esm": "tsc --project tsconfig.esm.json && copyfiles -u 1 ./src/**/*.scss ./src/assets/** ./lib/esm",
"build:cjs": "tsc --project tsconfig.cjs.json && copyfiles -u 1 ./src/**/*.scss ./src/assets/** ./lib/cjs",
"build:esm": "tsc --project tsconfig.esm.json && copyfiles -u 1 './src/**/*.scss' './src/assets/**' ./lib/esm",
"build:cjs": "tsc --project tsconfig.cjs.json && copyfiles -u 1 './src/**/*.scss' './src/assets/**' ./lib/cjs",
Comment on lines +33 to +34
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is needed for executing commands in PowerShell, without the quotes, the ** gets expanded creating an error since the resulting line is too long

"copy-catalog": "node ./scripts/copy-camel-catalog-files.js ./lib/camel-catalog",
"preview": "vite preview",
"test": "jest",
Expand All @@ -45,24 +45,24 @@
"@kaoto-next/uniforms-patternfly": "^0.6.3",
"@kie-tools-core/editor": "0.32.0",
"@kie-tools-core/notifications": "0.32.0",
"@patternfly/patternfly": "^5.0.0",
"@patternfly/react-code-editor": "^5.0.0",
"@patternfly/react-core": "^5.0.0",
"@patternfly/react-icons": "^5.0.0",
"@patternfly/react-table": "^5.0.0",
"@patternfly/react-topology": "^5.0.0",
"@patternfly/patternfly": "5.2.0",
"@patternfly/react-code-editor": "5.1.0",
"@patternfly/react-core": "5.2.0",
"@patternfly/react-icons": "5.2.0",
"@patternfly/react-table": "5.2.0",
"@patternfly/react-topology": "5.2.0",
"@types/uuid": "^9.0.2",
"ajv": "^8.12.0",
"ajv-formats": "^2.1.1",
"clsx": "^2.1.0",
"html-to-image": "^1.11.11",
"lodash.get": "^4.4.2",
"lodash.set": "^4.3.2",
"monaco-editor": "^0.34.1",
"monaco-yaml": "^4.0.0",
"monaco-editor": "^0.45.0",
"monaco-yaml": "^5.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-monaco-editor": "^0.51.0",
"react-monaco-editor": "^0.55.0",
"react-router-dom": "^6.14.1",
"simple-zustand-devtools": "^1.1.0",
"uniforms": "4.0.0-alpha.5",
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/src/components/ErrorBoundary/ErrorBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
{this.props.fallback}
<ExpandableSection
toggleText={this.state.isExpanded ? 'Show less' : 'Show more'}
toggleId="expandable-section-toggle"
contentId="expandable-section-content"
onToggle={this.onToggle}
isExpanded={this.state.isExpanded}
>
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/src/components/Form/ExpandableDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ export const ExpandableDetails: FunctionComponent<PropsWithChildren<ExpandableDe

<ExpandableSection
toggleText={isExpanded ? 'Hide properties' : 'Show properties'}
toggleId="expandable-section-toggle"
contentId="expandable-section-content"
Comment on lines +21 to +22
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is necessary because without both properties set, the id gets generated by a timestamp, breaking the snapshot tests on every run.

onToggle={onToggle}
isExpanded={isExpanded}
>
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/Form/customField/DisabledField.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ jest.mock('uniforms', () => {
import { render } from '@testing-library/react';
import { DisabledField } from './DisabledField';

describe('DisabledStep', () => {
describe('DisabledField', () => {
it('should render', () => {
const { container } = render(<DisabledField name="test" label="Disabled field label" />);
const { container } = render(<DisabledField id="disabled-field-id" name="test" label="Disabled field label" />);

expect(container).toMatchSnapshot();
});
Expand Down
9 changes: 7 additions & 2 deletions packages/ui/src/components/Form/customField/__snapshots__/DisabledField.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`DisabledStep should render 1`] = `
exports[`DisabledField should render 1`] = `
<div>
<div
class="pf-v5-c-card"
Expand Down Expand Up @@ -28,8 +28,10 @@ exports[`DisabledStep should render 1`] = `
class="pf-v5-c-expandable-section"
>
<button
aria-controls="expandable-section-content"
aria-expanded="false"
class="pf-v5-c-expandable-section__toggle"
id="expandable-section-toggle"
type="button"
>
<span
Expand All @@ -56,13 +58,16 @@ exports[`DisabledStep should render 1`] = `
</span>
</button>
<div
aria-labelledby="expandable-section-toggle"
class="pf-v5-c-expandable-section__content"
hidden=""
id=""
id="expandable-section-content"
role="region"
>
<code>
<pre>
{
"id": "disabled-field-id",
"name": "test",
"label": "Disabled field label"
}
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/src/components/Form/properties/PropertiesField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,8 @@ const PropertiesFieldComponent = (props: PropertiesFieldProps) => {
<Badge isRead>{Object.keys(propertiesModel).length}</Badge>
</>
}
toggleId="expandable-section-toggle"
contentId="expandable-section-content"
onToggle={(_event, isExpanded) => setFieldExpanded(isExpanded)}
isExpanded={isFieldExpanded}
data-testid={'expandable-section-' + props.name}
Expand Down
13 changes: 7 additions & 6 deletions packages/ui/src/components/SourceCode/SourceCode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { CodeEditor, CodeEditorProps, Language } from '@patternfly/react-code-editor';
import { setDiagnosticsOptions } from 'monaco-yaml';
import * as monaco from 'monaco-editor';
import { configureMonacoYaml } from 'monaco-yaml';
import { FunctionComponent, Ref, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
import { EditorDidMount } from 'react-monaco-editor';
import './SourceCode.scss';
import './workers/enable-workers';
import { sourceSchemaConfig, SourceSchemaType } from '../../models/camel';
import { SourceSchemaType, sourceSchemaConfig } from '../../models/camel';
import { EntitiesContext } from '../../providers/entities.provider';
import { UndoButton } from './UndoButton';
import { RedoButton } from './RedoButton';
import './SourceCode.scss';
import { UndoButton } from './UndoButton';
import './workers/enable-workers';

interface SourceCodeProps {
code: string;
Expand All @@ -22,7 +23,7 @@ export const SourceCode: FunctionComponent<SourceCodeProps> = (props) => {
const schemaType: SourceSchemaType = entityContext?.currentSchemaType ?? SourceSchemaType.Route;
const currentSchema = sourceSchemaConfig.config[schemaType].schema;
if (currentSchema) {
setDiagnosticsOptions({
configureMonacoYaml(monaco, {
enableSchemaRequest: true,
hover: true,
completion: true,
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/components/Visualization/Canvas/Canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
Model,
SELECTION_EVENT,
TopologyControlBar,
TopologyControlButton,
TopologyView,
VisualizationProvider,
VisualizationSurface,
Expand Down Expand Up @@ -59,7 +60,7 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = (props)
}, [props.entities.length, visibleFlows]);

const controlButtons = useMemo(() => {
const customButtons = catalogModalContext
const customButtons: TopologyControlButton[] = catalogModalContext
? [
{
id: 'topology-control-bar-h_layout-button',
Expand Down
40 changes: 0 additions & 40 deletions packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,14 +245,6 @@ exports[`Canvas Empty state should render empty state when there is no visible f
</div>
</div>
</div>
<div
class="pf-v5-c-toolbar__expandable-content"
id="pf-topology-control-bar-4-expandable-content-9"
>
<div
class="pf-v5-c-toolbar__group"
/>
</div>
</div>
<div
class="pf-v5-c-toolbar__content pf-m-hidden"
Expand Down Expand Up @@ -582,14 +574,6 @@ exports[`Canvas Empty state should render empty state when there is no visual en
</div>
</div>
</div>
<div
class="pf-v5-c-toolbar__expandable-content"
id="pf-topology-control-bar-3-expandable-content-7"
>
<div
class="pf-v5-c-toolbar__group"
/>
</div>
</div>
<div
class="pf-v5-c-toolbar__content pf-m-hidden"
Expand Down Expand Up @@ -1100,14 +1084,6 @@ exports[`Canvas should render correctly 1`] = `
</div>
</div>
</div>
<div
class="pf-v5-c-toolbar__expandable-content"
id="pf-topology-control-bar-0-expandable-content-1"
>
<div
class="pf-v5-c-toolbar__group"
/>
</div>
</div>
<div
class="pf-v5-c-toolbar__content pf-m-hidden"
Expand Down Expand Up @@ -1618,14 +1594,6 @@ exports[`Canvas should render correctly with more routes 1`] = `
</div>
</div>
</div>
<div
class="pf-v5-c-toolbar__expandable-content"
id="pf-topology-control-bar-1-expandable-content-3"
>
<div
class="pf-v5-c-toolbar__group"
/>
</div>
</div>
<div
class="pf-v5-c-toolbar__content pf-m-hidden"
Expand Down Expand Up @@ -2240,14 +2208,6 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
</div>
</div>
</div>
<div
class="pf-v5-c-toolbar__expandable-content"
id="pf-topology-control-bar-2-expandable-content-5"
>
<div
class="pf-v5-c-toolbar__group"
/>
</div>
</div>
<div
class="pf-v5-c-toolbar__content pf-m-hidden"
Expand Down
5 changes: 4 additions & 1 deletion packages/ui/src/components/Visualization/ContextToolbar/FlowType/FlowTypeSelector.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,10 @@ describe('FlowTypeSelector.tsx', () => {
fireEvent.keyDown(menu, { key: 'Escape', code: 'Escape', charCode: 27 });
});

expect(menu).not.toBeInTheDocument();
waitFor(() => {
/** The close panel is an async process */
expect(menu).not.toBeInTheDocument();
});

waitFor(() => {
const element = wrapper.queryByRole('option', { selected: true });
Expand Down
12 changes: 12 additions & 0 deletions packages/ui/src/components/Visualization/Visualization.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,15 @@
.pf-v5-u-m-sm {
margin: var(--pf-v5-global--spacer--sm);
}

// Provide a screen reader class to hide elements
// This is a workaround since this class should be provided by the @patternfly/react-core package
.pf-v5-u-screen-reader {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
12 changes: 0 additions & 12 deletions packages/ui/src/multiplying-architecture/KaotoEditor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,3 @@
overflow: scroll;
}
}

// Provide a screen reader class to hide elements
// This is a workaround since this class should be provided by the @patternfly/react-core package
.pf-v5-u-screen-reader {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
Loading
Loading