chore(deps): Update @patternfly/* dependencies

Updates: * `"@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",` Notice that `@patternfly/react-code-editor` stayed at `5.1.0` since there's an ongoing issue breaking the `YAML` autocompletion support. The `@patternfly/react-topology` is being updated to `5.2.0` since is required to draw squared containers in the canvas. Unfortunately, there's an issue with a missing `pf-v5-u-screen-reader` class definition which forces the Canvas' buttons to show their label. Relates to: #767
KaotoIO · Feb 5, 2024 · 6caef10 · 6caef10
1 parent 550296b
commit 6caef10
Show file tree

Hide file tree

Showing 14 changed files with 197 additions and 546 deletions.
diff --git a/package.json b/package.json
@@ -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",
+    "@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",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -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",

diff --git a/packages/ui/src/components/ErrorBoundary/ErrorBoundary.tsx b/packages/ui/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -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}
           >

diff --git a/packages/ui/src/components/Form/ExpandableDetails.tsx b/packages/ui/src/components/Form/ExpandableDetails.tsx
@@ -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"
         onToggle={onToggle}
         isExpanded={isExpanded}
       >

diff --git a/packages/ui/src/components/Form/customField/DisabledField.test.tsx b/packages/ui/src/components/Form/customField/DisabledField.test.tsx
@@ -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();
   });

diff --git a/packages/ui/src/components/Form/customField/__snapshots__/DisabledField.test.tsx.snap b/packages/ui/src/components/Form/customField/__snapshots__/DisabledField.test.tsx.snap
@@ -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"
@@ -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
@@ -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"
 }

diff --git a/packages/ui/src/components/Form/properties/PropertiesField.tsx b/packages/ui/src/components/Form/properties/PropertiesField.tsx
@@ -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}

diff --git a/packages/ui/src/components/SourceCode/SourceCode.tsx b/packages/ui/src/components/SourceCode/SourceCode.tsx
@@ -1,7 +1,7 @@
-import { CodeEditor, CodeEditorProps, Language } from '@patternfly/react-code-editor';
-import { setDiagnosticsOptions } from 'monaco-yaml';
+import { CodeEditor, CodeEditorProps, EditorDidMount, Language } from '@patternfly/react-code-editor';
+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';
@@ -22,7 +22,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,

diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
@@ -5,6 +5,7 @@ import {
   Model,
   SELECTION_EVENT,
   TopologyControlBar,
+  TopologyControlButton,
   TopologyView,
   VisualizationProvider,
   VisualizationSurface,
@@ -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',

diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"

diff --git a/packages/ui/src/components/Visualization/ContextToolbar/FlowType/FlowTypeSelector.test.tsx b/packages/ui/src/components/Visualization/ContextToolbar/FlowType/FlowTypeSelector.test.tsx
@@ -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 });

diff --git a/packages/ui/src/components/Visualization/Visualization.scss b/packages/ui/src/components/Visualization/Visualization.scss
@@ -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;
+}
diff --git a/packages/ui/src/multiplying-architecture/KaotoEditor.scss b/packages/ui/src/multiplying-architecture/KaotoEditor.scss
@@ -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;
-}