Merge pull request #7 from jeff-phillips-18/release-update

Update to latest patternfly-react topology (4.91.40)
patternfly · Apr 5, 2023 · 2418be1 · 2418be1
2 parents 6167bb9 + b2c8e87
commit 2418be1
Show file tree

Hide file tree

Showing 66 changed files with 3,571 additions and 1,337 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 This package provides Topology View components based on [PatternFly 4][patternfly-4]
 
+Based from https://github.com/patternfly/patternfly-react version 4.91.40
+
 ### Prerequisites
 
 #### Node Environment

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@patternfly/react-topology-root",
   "private": true,
   "version": "0.0.0",
-  "description": "This library provides patternfly extensions",
+  "description": "This library provides the patternfly react topology extension",
   "license": "MIT",
   "workspaces": [
     "packages/*"
@@ -22,8 +22,20 @@
     "serve:a11y": "yarn workspace @patternfly/react-topology serve:a11y"
   },
   "devDependencies": {
-    "react": "^18",
-    "react-dom": "^18",
+    "@babel/core": "^7.19.6",
+    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-flow": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.21.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@testing-library/react":"^13.4.0",
+    "@testing-library/user-event": "14.4.3",
+    "@testing-library/jest-dom":"5.16.5",
+    "@testing-library/dom": "9.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
+    "babel-jest": "^29.2.2",
     "concurrently": "^5.3.0",
     "eslint": "8.22.0",
     "eslint-plugin-import": "^2.25.2",
@@ -36,23 +48,11 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-patternfly-react": "^4.80.4",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
-    "prettier": "2.7.1",
     "jest": "^29.2.2",
-    "babel-jest": "^29.2.2",
-    "@babel/core": "^7.19.6",
-    "@babel/preset-env": "^7.19.4",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-flow": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.21.0",
-    "@babel/plugin-proposal-class-properties": "^7.18.6", 
-    "@testing-library/react":"^13.4.0",
-    "@testing-library/user-event": "14.4.3",
-    "@testing-library/jest-dom":"5.16.5",
-    "@testing-library/dom": "9.0.0",
     "jest-environment-jsdom": "^29.2.2",
+    "prettier": "2.7.1",
+    "react": "^18",
+    "react-dom": "^18",
     "serve": "^14.1.2",
     "typedoc": "0.23"
   },

diff --git a/...es/demo-app-ts/src/demos/TopologyDemo.css → packages/demo-app-ts/src/Demo.css b/...es/demo-app-ts/src/demos/TopologyDemo.css → packages/demo-app-ts/src/Demo.css
@@ -5,6 +5,11 @@
   overflow: hidden;
 }
 
+.pf-ri__topology-demo .pf-topology-visualization-surface {
+  margin-top: var(--pf-global--spacer--md);
+  border: 1px solid var(--pf-global--BorderColor--100);
+}
+
 .pf-ri__topology-demo .pf-c-tab-content {
   display: flex;
   flex-direction: column;

diff --git a/packages/demo-app-ts/src/Demos.ts b/packages/demo-app-ts/src/Demos.ts
@@ -1,7 +1,18 @@
-import { TopologyDemo } from './demos/TopologyDemo';
 import { TopologyPipelineDemo } from './demos/TopologyPipelineDemo';
 import { Basics } from './demos/Basics';
+import { StyleEdges, StyleGroups, StyleLabels, StyleNodes } from './demos/Styles';
+import { Selection } from './demos/Selection';
+import { PanZoom } from './demos/PanZoom';
+import { Layouts } from './demos/Layouts';
+import { Connectors } from './demos/Connectors';
+import { DragAndDrop } from './demos/DragDrop';
+import { Shapes } from './demos/Shapes';
+import { ContextMenus } from './demos/ContextMenus';
+import { TopologyPackage } from './demos/TopologyPackage';
+import { ComplexGroup } from './demos/Groups';
+import { CollapsibleGroups } from './demos/CollapsibleGroups';
 
+import './Demo.css';
 
 interface DemoInterface {
   /** ID for the demo, it will be used to help generate general ids to help with testing */
@@ -18,25 +29,90 @@ interface DemoInterface {
 /** Add the name of the demo and it's component here to have them show up in the demo app */
 export const Demos: DemoInterface[] = [
   {
-    id: 'topology-demo',
-    name: 'Topology Demo',
-    componentType: TopologyDemo
+    id: 'topology-package',
+    name: 'Topology Package',
+    componentType: TopologyPackage,
   },
   {
-    id: 'topology-demos',
-    name: 'Topology Demos',
+    id: 'topology-pipelines-demo',
+    name: 'Topology Pipelines',
+    componentType: TopologyPipelineDemo
+  },
+  {
+    id: 'basic',
+    name: 'Basic',
+    componentType: Basics,
+  },
+  {
+    id: 'styles',
+    name: 'Styles',
     demos: [
       {
-        id: 'basic',
-        name: 'Basic',
-        componentType: Basics,
-      }
+        id: 'nodes',
+        name: 'Nodes',
+        componentType: StyleNodes,
+      },
+      {
+        id: 'labels',
+        name: 'Labels',
+        componentType: StyleLabels,
+      },
+      {
+        id: 'groups',
+        name: 'Groups',
+        componentType: StyleGroups,
+      },
+      {
+        id: 'edges',
+        name: 'Edges',
+        componentType: StyleEdges,
+      },
     ]
   },
   {
-    id: 'topology-pipelines-demo',
-    name: 'Topology Pipelines Demo',
-    componentType: TopologyPipelineDemo
+    id: 'selection',
+    name: 'Selection',
+    componentType: Selection,
+  },
+  {
+    id: 'pan-zoom',
+    name: 'Pan Zoom',
+    componentType: PanZoom,
+  },
+  {
+    id: 'layout',
+    name: 'Layout',
+    componentType: Layouts,
+  },
+  {
+    id: 'connectors',
+    name: 'Connectors',
+    componentType: Connectors,
+  },
+  {
+    id: 'drag-and-drop',
+    name: 'Drag and Drop',
+    componentType: DragAndDrop,
+  },
+  {
+    id: 'shapes',
+    name: 'Shapes',
+    componentType: Shapes,
+  },
+  {
+    id: 'context-menus',
+    name: 'Context Menus',
+    componentType: ContextMenus,
+  },
+  {
+    id: 'complex-group',
+    name: 'Complex Group',
+    componentType: ComplexGroup,
+  },
+  {
+    id: 'collapsible-groups',
+    name: 'Collapsible Groups',
+    componentType: CollapsibleGroups,
   },
 ];
 

diff --git a/packages/demo-app-ts/src/demos/Connectors.tsx b/packages/demo-app-ts/src/demos/Connectors.tsx
@@ -31,6 +31,7 @@ import DefaultEdge from '../components/DefaultEdge';
 import DemoDefaultNode from '../components/DemoDefaultNode';
 import withTopologySetup from '../utils/withTopologySetup';
 import NodeRect from '../components/NodeRect';
+import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 
 interface NodeProps {
   element: Node;
@@ -356,3 +357,27 @@ export const Anchors = withTopologySetup(() => {
   );
   return null;
 });
+
+export const Connectors: React.FunctionComponent = () => {
+  const [activeKey, setActiveKey] = React.useState<number>(0);
+
+  const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: number) => {
+    setActiveKey(tabIndex);
+  };
+
+  return (
+    <div className="pf-ri__topology-demo">
+      <Tabs unmountOnExit activeKey={activeKey} onSelect={handleTabClick}>
+        <Tab eventKey={0} title={<TabTitleText>Reconnect</TabTitleText>}>
+          <Reconnect />
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Create Connector</TabTitleText>}>
+          <CreateConnector />
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Anchors</TabTitleText>}>
+          <Anchors />
+        </Tab>
+      </Tabs>
+    </div>
+  );
+};
diff --git a/packages/demo-app-ts/src/demos/ContextMenus.tsx b/packages/demo-app-ts/src/demos/ContextMenus.tsx
@@ -16,6 +16,7 @@ import {
 import defaultComponentFactory from '../components/defaultComponentFactory';
 import DemoDefaultNode from '../components/DemoDefaultNode';
 import withTopologySetup from '../utils/withTopologySetup';
+import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 
 const contextMenuItem = (label: string, i: number): React.ReactElement => {
   if (label === '-') {
@@ -90,3 +91,27 @@ export const ContextMenuOnNode = withTopologySetup(() => {
   );
   return null;
 });
+
+export const ContextMenus: React.FunctionComponent = () => {
+  const [activeKey, setActiveKey] = React.useState<number>(0);
+
+  const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: number) => {
+    setActiveKey(tabIndex);
+  };
+
+  return (
+    <div className="pf-ri__topology-demo">
+      <Tabs unmountOnExit activeKey={activeKey} onSelect={handleTabClick}>
+        <Tab eventKey={0} title={<TabTitleText>Controlled Context Menu</TabTitleText>}>
+          <ControlledContextMenu />
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Uncontrolled Context Menu</TabTitleText>}>
+          <UncontrolledContextMenu />
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Context Menu on Node</TabTitleText>}>
+          <ContextMenuOnNode />
+        </Tab>
+      </Tabs>
+    </div>
+  );
+};
diff --git a/packages/demo-app-ts/src/demos/DragDrop.tsx b/packages/demo-app-ts/src/demos/DragDrop.tsx
@@ -18,6 +18,7 @@ import defaultComponentFactory from '../components/defaultComponentFactory';
 import DemoDefaultNode from '../components/DemoDefaultNode';
 import GroupHull from '../components/GroupHull';
 import withTopologySetup from '../utils/withTopologySetup';
+import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 
 interface ElementProps {
   element: Node;
@@ -250,3 +251,24 @@ export const DndShiftRegroup = withTopologySetup(() => {
   );
   return null;
 });
+
+export const DragAndDrop: React.FunctionComponent = () => {
+  const [activeKey, setActiveKey] = React.useState<number>(0);
+
+  const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: number) => {
+    setActiveKey(tabIndex);
+  };
+
+  return (
+    <div className="pf-ri__topology-demo">
+      <Tabs unmountOnExit activeKey={activeKey} onSelect={handleTabClick}>
+        <Tab eventKey={0} title={<TabTitleText>Dnd</TabTitleText>}>
+          <Dnd />
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Dnd Shift Regroup</TabTitleText>}>
+          <DndShiftRegroup />
+        </Tab>
+      </Tabs>
+    </div>
+  );
+};
diff --git a/packages/demo-app-ts/src/demos/Layouts.tsx b/packages/demo-app-ts/src/demos/Layouts.tsx
@@ -18,6 +18,7 @@ import DemoDefaultNode from '../components/DemoDefaultNode';
 import withTopologySetup from '../utils/withTopologySetup';
 import { generateDataModel } from '../data/generator';
 import stylesComponentFactory from '../components/stylesComponentFactory';
+import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 
 const getModel = (layout: string): Model => {
   // create nodes from data
@@ -61,3 +62,27 @@ const layoutStory = (model: Model): React.FunctionComponent => () => {
 export const Force = withTopologySetup(layoutStory(getModel('Force')));
 export const Dagre = withTopologySetup(layoutStory(getModel('Dagre')));
 export const Cola = withTopologySetup(layoutStory(getModel('Cola')));
+
+export const Layouts: React.FunctionComponent = () => {
+  const [activeKey, setActiveKey] = React.useState<number>(0);
+
+  const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: number) => {
+    setActiveKey(tabIndex);
+  };
+
+  return (
+    <div className="pf-ri__topology-demo">
+      <Tabs unmountOnExit activeKey={activeKey} onSelect={handleTabClick}>
+        <Tab eventKey={0} title={<TabTitleText>Force</TabTitleText>}>
+          <Force />
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Dagre</TabTitleText>}>
+          <Dagre />
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Cola</TabTitleText>}>
+          <Cola />
+        </Tab>
+      </Tabs>
+    </div>
+  );
+};
diff --git a/packages/demo-app-ts/src/demos/Selection.tsx b/packages/demo-app-ts/src/demos/Selection.tsx
@@ -15,6 +15,7 @@ import {
 } from '@patternfly/react-topology';
 import defaultComponentFactory from '../components/defaultComponentFactory';
 import withTopologySetup from '../utils/withTopologySetup';
+import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 
 const twoNodeModel: Model = {
   graph: {
@@ -159,3 +160,30 @@ export const Performance: React.FunctionComponent = withTopologySetup(() => {
   return null;
 });
 Performance.displayName = 'Performance';
+
+export const Selection: React.FunctionComponent = () => {
+  const [activeKey, setActiveKey] = React.useState<number>(0);
+
+  const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: number) => {
+    setActiveKey(tabIndex);
+  };
+
+  return (
+    <div className="pf-ri__topology-demo">
+      <Tabs unmountOnExit activeKey={activeKey} onSelect={handleTabClick}>
+        <Tab eventKey={0} title={<TabTitleText>Uncontrolled</TabTitleText>}>
+          <UncontrolledSelection/>
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Controlled</TabTitleText>}>
+          <ControlledSelection/>
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Multi Select</TabTitleText>}>
+          <MultiSelect/>
+        </Tab>
+        <Tab eventKey={3} title={<TabTitleText>Performance</TabTitleText>}>
+          <Performance/>
+        </Tab>
+      </Tabs>
+    </div>
+  );
+};