diff --git a/README.md b/README.md index 8093bd8d2fd..0fc7347030e 100644 --- a/README.md +++ b/README.md @@ -26,17 +26,16 @@ Using PatternFly 3? Take a look at the [PatternFly 3 React component informatio |   [@patternfly/react-icons](./packages/react-icons/README.md) | Icon components | |   [@patternfly/react-styles](./packages/react-styles/README.md) | PatternFly CSS styles | |   [@patternfly/react-tokens](./packages/react-tokens/README.md) | PatternFly CSS variable tokens | -| **:yellow_heart: Extension packages** *UXD supported* | +| **:yellow_heart: Extension packages** | |   [@patternfly/react-log-viewer](https://github.com/patternfly/react-log-viewer/README.md) | Virtualized log viewer component | +|   [@patternfly/react-catalog-view-extension](https://github.com/patternfly/react-catalog-view/README.md) | Catalog view extension | +|   [@patternfly/react-topology](https://github.com/patternfly/react-topology/README.md) | Topology components | | **:open_file_folder: Supporting packages** | |   [@patternfly/react-docs](./packages/react-docs/README.md) | Gatsby documentation site for components | |   [@patternfly/react-integration](./packages/react-integration/README.md) | Cypress integration tests | -| **:family: Extension packages** *community supported* | -|   [@patternfly/react-catalog-view-extension](./packages/react-catalog-view-extension/README.md) | Catalog view extension | -|   [@patternfly/react-virtualized-extension](./packages/react-virtualized-extension/README.md) | Table and list row virtualization extension | -|   [@patternfly/react-topology](./packages/react-topology/README.md) | Topology components | | **:x: Deprecated packages** | |   [@patternfly/react-inline-edit-extension](./packages/react-inline-edit-extension/README.md) | Table inline edit extension | +|   [@patternfly/react-virtualized-extension](https://github.com/patternfly/react-virtualized-extension/README.md) | Table and list row virtualization extension | ### Setup diff --git a/packages/react-charts/src/components/ChartBoxPlot/examples/ChartBoxPlot.md b/packages/react-charts/src/components/ChartBoxPlot/examples/ChartBoxPlot.md index 126dcf717e7..fe4d4194141 100644 --- a/packages/react-charts/src/components/ChartBoxPlot/examples/ChartBoxPlot.md +++ b/packages/react-charts/src/components/ChartBoxPlot/examples/ChartBoxPlot.md @@ -13,7 +13,7 @@ hideDarkMode: true beta: true --- -import { Chart, ChartAxis, ChartBoxPlot, ChartBoxPlotTooltip, ChartCursorFlyout, ChartCursorTooltip, ChartLegendTooltip, ChartThemeColor, ChartThreshold, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartBoxPlot, ChartCursorFlyout, ChartCursorTooltip, ChartLegendTooltip, ChartThemeColor, ChartThreshold, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts'; import { VictoryZoomContainer } from 'victory-zoom-container'; import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx index b460cc88dc6..e4177241a7f 100644 --- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx +++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx @@ -6,7 +6,7 @@ export const ProgressStepperCompact: React.FunctionComponent = () => { const [isCenterAligned, setIsCenterAligned] = React.useState(false); return ( - + - + Must be at least 14 characters diff --git a/packages/react-docs/patternfly-docs/patternfly-docs.css.js b/packages/react-docs/patternfly-docs/patternfly-docs.css.js index cc9a28b5ff7..642562cc07e 100644 --- a/packages/react-docs/patternfly-docs/patternfly-docs.css.js +++ b/packages/react-docs/patternfly-docs/patternfly-docs.css.js @@ -1,10 +1,5 @@ // React-specific CSS import '@patternfly/react-styles/src/css/components/Table/inline-edit.css'; // inline-edit extension styles -import '@patternfly/react-styles/src/css/components/Topology/topology-controlbar.css'; -import '@patternfly/react-styles/src/css/components/Topology/topology-side-bar.css'; -import '@patternfly/react-styles/src/css/components/Topology/topology-view.css'; -import '@patternfly/react-styles/src/css/components/Topology/topology-components.css'; -import '@patternfly/react-styles/src/css/components/Topology/topology-pipelines.css'; import '@patternfly/react-styles/src/css/layouts/Toolbar/toolbar.css'; import '@patternfly/react-styles/src/css/components/Popper/Popper.css'; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DemoTaskGroupEdge.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DemoTaskGroupEdge.tsx deleted file mode 100644 index 680ae07955f..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DemoTaskGroupEdge.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import { observer } from 'mobx-react'; -import { Edge, TaskEdge } from '@patternfly/react-topology'; - -export const GROUPED_PIPELINE_NODE_SEPARATION_HORIZONTAL = 200; - -interface DemoTaskEdgeProps { - element: Edge; -} - -const DemoTaskGroupEdge: React.FunctionComponent = props => ( - -); - -export default observer(DemoTaskGroupEdge); diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/useDemoPipelineNodes.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/useDemoPipelineNodes.tsx deleted file mode 100644 index 1766b2ab8aa..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/useDemoPipelineNodes.tsx +++ /dev/null @@ -1,213 +0,0 @@ -import * as React from 'react'; -import { - DEFAULT_FINALLY_NODE_TYPE, - DEFAULT_TASK_NODE_TYPE, - DEFAULT_WHEN_OFFSET, - DEFAULT_WHEN_SIZE, - PipelineNodeModel, - RunStatus, - WhenStatus -} from '@patternfly/react-topology'; -import '@patternfly/react-styles/css/components/Topology/topology-components.css'; -import { logos } from './utils/logos'; - -export const NODE_PADDING_VERTICAL = 45; -export const NODE_PADDING_HORIZONTAL = 15; - -export const ROW_HEIGHT = 100; -export const COLUMN_WIDTH = 250; - -export const DEFAULT_TASK_WIDTH = 180; -export const FINALLY_TASK_WIDTH = DEFAULT_TASK_WIDTH - DEFAULT_WHEN_OFFSET - DEFAULT_WHEN_SIZE; -export const DEFAULT_TASK_HEIGHT = 32; - -export const TASK_STATUSES = [ - undefined, - RunStatus.Succeeded, - RunStatus.Failed, - RunStatus.Running, - RunStatus.InProgress, - RunStatus.FailedToStart, - RunStatus.Skipped, - RunStatus.Cancelled, - RunStatus.Pending, - RunStatus.Idle -]; - -const STATUS_PER_ROW = 4; -const GRAPH_MARGIN_TOP = 40; -const PARALLEL_TASKS_COUNT = 3; -const PARALLEL_TASK_DEPTH = 2; -const FINALLY_TASKS_COUNT = 2; - -export const useDemoPipelineNodes = ( - showContextMenu: boolean, - showBadges: boolean, - showIcons: boolean, - badgeTooltips: boolean, - layout?: string, - showGroups = false -): PipelineNodeModel[] => - React.useMemo(() => { - // Create a task node for each task status - const tasks = TASK_STATUSES.map((status, index) => { - // Set all the standard fields - const task: PipelineNodeModel = { - id: `task-${status}`, - type: DEFAULT_TASK_NODE_TYPE, - label: `${status || 'No status'} Task`, - width: DEFAULT_TASK_WIDTH + (showContextMenu ? 10 : 0) + (showBadges ? 40 : 0), - height: DEFAULT_TASK_HEIGHT, - style: { - padding: [NODE_PADDING_VERTICAL, NODE_PADDING_HORIZONTAL + (showIcons ? 25 : 0)] - }, - runAfterTasks: [] - }; - - // put options in data, our DEMO task node will pass them along to the TaskNode - task.data = { - status, - badge: showBadges ? '3/4' : undefined, - badgeTooltips, - taskIconClass: showIcons ? logos.get('icon-java') : undefined, - taskIconTooltip: showIcons ? 'Environment' : undefined, - showContextMenu, - columnGroup: index % STATUS_PER_ROW - }; - - // If not using a layout, manually place the node by setting the x,y location - if (!layout) { - const row = Math.ceil((index + 1) / STATUS_PER_ROW) - 1; - const column = index % STATUS_PER_ROW; - const columnWidth = COLUMN_WIDTH + (showIcons ? 15 : 0) + (showBadges ? 32 : 0) + (showContextMenu ? 20 : 0); - task.x = (showIcons ? 28 : 0) + column * columnWidth; - task.y = GRAPH_MARGIN_TOP + row * ROW_HEIGHT; - } - - return task; - }); - - // Add when tasks to the nodes that are not first in the row - const whenTasks = tasks.filter( - (task, index) => index % (Math.floor(tasks.length / (STATUS_PER_ROW - 1)) + 1) !== 0 - ); - whenTasks.forEach((task, index) => { - task.data.whenStatus = index % 2 === 0 ? WhenStatus.Met : WhenStatus.Unmet; - task.data.whenOffset = DEFAULT_WHEN_OFFSET; - task.data.whenSize = DEFAULT_WHEN_SIZE; - }); - - // Connect the tasks in each row by setting the `runAfterTasks` value for each task - for (let i = 0; i < tasks.length; i++) { - tasks[i + 1].runAfterTasks.push(tasks[i].id); - i++; - if (i + 1 < tasks.length) { - tasks[i + 1].runAfterTasks.push(tasks[i].id); - } - i++; - if (i + 1 < tasks.length) { - tasks[i + 1].runAfterTasks.push(tasks[i].id); - } - i++; - } - - if (layout) { - const parallelTasks: PipelineNodeModel[] = []; - - for (let i = 0; i < PARALLEL_TASKS_COUNT; i++) { - const parallelTask: PipelineNodeModel = { - id: `parallelTasks-${i}`, - type: DEFAULT_TASK_NODE_TYPE, - label: `Parallel Sub-Task ${i}`, - width: DEFAULT_TASK_WIDTH + (showContextMenu ? 10 : 0) + (showBadges ? 40 : 0), - height: DEFAULT_TASK_HEIGHT, - style: { - padding: [NODE_PADDING_VERTICAL, NODE_PADDING_HORIZONTAL + (showIcons ? 25 : 0)] - }, - runAfterTasks: [] - }; - - // put options in data, our DEMO task node will pass them along to the TaskNode - parallelTask.data = { - status, - showContextMenu - }; - parallelTasks.push(parallelTask); - } - - let usedNodes = 0; - while (usedNodes < parallelTasks.length) { - for (let depth = 0; depth < PARALLEL_TASK_DEPTH; depth++) { - if (usedNodes < parallelTasks.length) { - if (depth === 0) { - parallelTasks[usedNodes].runAfterTasks = [tasks[9].id]; - } else { - parallelTasks[usedNodes].runAfterTasks = [parallelTasks[usedNodes - 1].id]; - } - } - usedNodes++; - } - } - tasks.push(...parallelTasks); - - if (showGroups) { - tasks.push({ - id: `group-parallels`, - type: 'task-group', - children: parallelTasks.map(t => t.id), - group: true, - label: 'Parallel tasks' - }); - } - } - - const finallyNodes = []; - for (let i = 0; i < FINALLY_TASKS_COUNT; i++) { - const finallyNode: PipelineNodeModel = { - id: `finally-${i}`, - type: DEFAULT_FINALLY_NODE_TYPE, - label: `Finally task ${i}`, - width: FINALLY_TASK_WIDTH, - height: DEFAULT_TASK_HEIGHT, - style: { paddingLeft: DEFAULT_WHEN_SIZE + DEFAULT_WHEN_OFFSET } - }; - - if (!layout) { - const columnWidth = COLUMN_WIDTH + (showIcons ? 15 : 0) + (showBadges ? 32 : 0) + (showContextMenu ? 20 : 0); - finallyNode.x = STATUS_PER_ROW * columnWidth; - finallyNode.y = GRAPH_MARGIN_TOP + ((3 - FINALLY_TASKS_COUNT) * ROW_HEIGHT) / 2 + ROW_HEIGHT * i; - } - finallyNodes.push(finallyNode); - } - - const finallyGroup = { - id: 'finally-group', - type: 'finally-group', - children: finallyNodes.map(n => n.id), - group: true - }; - - if (showGroups) { - const taskGroups = tasks.reduce((acc: PipelineNodeModel[], task) => { - if (task.data?.columnGroup !== undefined) { - let taskGroup = acc.find((group: PipelineNodeModel) => group.id === `group-${task.data.columnGroup}`); - if (!taskGroup) { - taskGroup = { - id: `group-${task.data.columnGroup}`, - type: 'task-group', - children: [], - group: true, - label: `Group ${task.data.columnGroup}` - }; - acc.push(taskGroup); - } - taskGroup.children.push(task.id); - } - return acc; - }, [] as PipelineNodeModel[]); - - tasks.push(...taskGroups); - } - - return [...tasks, ...finallyNodes, finallyGroup]; - }, [badgeTooltips, layout, showBadges, showContextMenu, showGroups, showIcons]); diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/usePipelineOptions.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/usePipelineOptions.tsx deleted file mode 100644 index 5cbd0234bd3..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/usePipelineOptions.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import { Checkbox, ToolbarItem } from '@patternfly/react-core'; -import '@patternfly/react-styles/css/components/Topology/topology-components.css'; - -export const usePipelineOptions = ( - allowGroups = false -): { - contextToolbar: React.ReactNode; - showContextMenu: boolean; - showBadges: boolean; - showIcons: boolean; - showGroups: boolean; - badgeTooltips: boolean; -} => { - const [showContextMenu, setShowContextMenu] = React.useState(false); - const [showBadges, setShowBadges] = React.useState(false); - const [showIcons, setShowIcons] = React.useState(false); - const [showGroups, setShowGroups] = React.useState(false); - const [badgeTooltips, setBadgeTooltips] = React.useState(false); - - const contextToolbar = ( - <> - - setShowIcons(checked)} label="Show icons" /> - - - setShowBadges(checked)} label="Show badges" /> - - - setBadgeTooltips(checked)} label="Badge tooltips" /> - - - setShowContextMenu(checked)} label="Context menus" /> - - {allowGroups ? ( - - setShowGroups(checked)} label="Show groups" /> - - ) : null} - - ); - - return { contextToolbar, showContextMenu, showBadges, showIcons, showGroups, badgeTooltips }; -}; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/useTopologyOptions.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/useTopologyOptions.tsx deleted file mode 100644 index 89a31d900ee..00000000000 --- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/useTopologyOptions.tsx +++ /dev/null @@ -1,452 +0,0 @@ -import React from 'react'; -import * as _ from 'lodash'; -import { - Button, - Dropdown, - DropdownItem, - DropdownPosition, - DropdownToggle, - Flex, - Split, - SplitItem, - TextInput, - ToolbarItem, - Tooltip -} from '@patternfly/react-core'; -import { - Select, - SelectOption, - SelectVariant -} from '@patternfly/react-core/deprecated'; -import '@patternfly/react-styles/css/components/Topology/topology-components.css'; -import { DefaultEdgeOptions, DefaultNodeOptions, GeneratorEdgeOptions, GeneratorNodeOptions } from './data/generator'; -import { - EDGE_ANIMATION_SPEEDS, - EDGE_STYLES, - EDGE_TERMINAL_TYPES, - NODE_SHAPES, - NODE_STATUSES -} from './utils/styleUtils'; -import { Controller, Model, NodeShape } from '@patternfly/react-topology'; - -const GRAPH_LAYOUT_OPTIONS = ['x', 'y', 'visible', 'style', 'layout', 'scale', 'scaleExtent', 'layers']; -const NODE_LAYOUT_OPTIONS = ['x', 'y', 'visible', 'style', 'collapsed', 'width', 'height', 'shape']; - -export const useTopologyOptions = ( - controller: Controller -): { - layout: string; - nodeOptions: GeneratorNodeOptions; - edgeOptions: GeneratorEdgeOptions; - nestedLevel: number; - creationCounts: { numNodes: number; numEdges: number; numGroups: number }; - medScale: number; - lowScale: number; - contextToolbar: React.ReactNode; - viewToolbar: React.ReactNode; -} => { - const [layoutDropdownOpen, setLayoutDropdownOpen] = React.useState(false); - const [layout, setLayout] = React.useState('ColaNoForce'); - const [nodeOptionsOpen, setNodeOptionsOpen] = React.useState(false); - const [nodeShapesOpen, setNodeShapesOpen] = React.useState(false); - const [nodeOptions, setNodeOptions] = React.useState(DefaultNodeOptions); - const [edgeOptionsOpen, setEdgeOptionsOpen] = React.useState(false); - const [edgeOptions, setEdgeOptions] = React.useState(DefaultEdgeOptions); - const [savedModel, setSavedModel] = React.useState(); - const [modelSaved, setModelSaved] = React.useState(false); - const newNodeCount = React.useRef(0); - const [numNodes, setNumNodes] = React.useState(6); - const [numEdges, setNumEdges] = React.useState(2); - const [numGroups, setNumGroups] = React.useState(1); - const [nestedLevel, setNestedLevel] = React.useState(0); - const [medScale, setMedScale] = React.useState(0.5); - const [lowScale, setLowScale] = React.useState(0.3); - const [creationCounts, setCreationCounts] = React.useState<{ numNodes: number; numEdges: number; numGroups: number }>( - { numNodes, numEdges, numGroups } - ); - - const updateLayout = (newLayout: string) => { - setLayout(newLayout); - setLayoutDropdownOpen(false); - }; - - const layoutDropdown = ( - - - - - - setLayoutDropdownOpen(!layoutDropdownOpen)}>{layout}} - isOpen={layoutDropdownOpen} - dropdownItems={[ - updateLayout('Force')}> - Force - , - updateLayout('Dagre')}> - Dagre - , - updateLayout('Cola')}> - Cola - , - updateLayout('ColaGroups')}> - ColaGroups - , - updateLayout('ColaNoForce')}> - ColaNoForce - , - updateLayout('Grid')}> - Grid - , - updateLayout('Concentric')}> - Concentric - , - updateLayout('BreadthFirst')}> - BreadthFirst - - ]} - /> - - - ); - - const renderNodeOptionsDropdown = () => { - const selectContent = ( -
- setNodeOptions(prev => ({ ...prev, nodeLabels: !prev.nodeLabels }))} - /> - setNodeOptions(prev => ({ ...prev, nodeSecondaryLabels: !prev.nodeSecondaryLabels }))} - /> - 1} - onClick={() => - setNodeOptions(prev => ({ - ...prev, - statuses: prev.statuses.length > 1 ? DefaultNodeOptions.statuses : NODE_STATUSES - })) - } - /> - - setNodeOptions(prev => ({ - ...prev, - statusDecorators: !prev.statusDecorators, - showDecorators: !prev.showDecorators - })) - } - /> - setNodeOptions(prev => ({ ...prev, nodeBadges: !prev.nodeBadges }))} - /> - setNodeOptions(prev => ({ ...prev, nodeIcons: !prev.nodeIcons }))} - /> - setNodeOptions(prev => ({ ...prev, contextMenus: !prev.contextMenus }))} - /> -
- ); - - return ( - setNodeShapesOpen(prev => !prev)} - onSelect={() => {}} - isCheckboxSelectionBadgeHidden - isOpen={nodeShapesOpen} - placeholderText="Node shapes" - /> - ); - }; - - const renderEdgeOptionsDropdown = () => { - const selectContent = ( -
- 1} - onClick={() => - setEdgeOptions(prev => ({ - ...prev, - edgeStatuses: prev.edgeStatuses.length > 1 ? DefaultEdgeOptions.edgeStatuses : NODE_STATUSES - })) - } - /> - 1} - onClick={() => - setEdgeOptions(prev => ({ - ...prev, - edgeStyles: prev.edgeStyles.length > 1 ? DefaultEdgeOptions.edgeStyles : EDGE_STYLES - })) - } - /> - 1} - onClick={() => - setEdgeOptions(prev => ({ - ...prev, - edgeAnimations: prev.edgeAnimations.length > 1 ? DefaultEdgeOptions.edgeAnimations : EDGE_ANIMATION_SPEEDS - })) - } - /> - 1} - onClick={() => - setEdgeOptions(prev => ({ - ...prev, - terminalTypes: prev.terminalTypes.length > 1 ? DefaultEdgeOptions.terminalTypes : EDGE_TERMINAL_TYPES - })) - } - /> - setEdgeOptions(prev => ({ ...prev, edgeTags: !prev.edgeTags }))} - /> -
- ); - - return ( -