From 441ce9bb8815e0cb32935c7daf18959d281d918a Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 15 Oct 2025 16:26:03 -0400 Subject: [PATCH 1/3] poc: Compass --- packages/react-core/package.json | 2 + .../react-core/src/demos/Compass/Compass.md | 28 + .../src/demos/Compass/examples/Compass.tsx | 354 +++ yarn.lock | 1894 ++++++++++++++++- 4 files changed, 2215 insertions(+), 63 deletions(-) create mode 100644 packages/react-core/src/demos/Compass/Compass.md create mode 100644 packages/react-core/src/demos/Compass/examples/Compass.tsx diff --git a/packages/react-core/package.json b/packages/react-core/package.json index d1cf91c525c..11429db6a92 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -54,7 +54,9 @@ "tslib": "^2.8.1" }, "devDependencies": { + "@patternfly/chatbot": "6.4.0-prerelease.26", "@patternfly/patternfly": "6.4.0-prerelease.2", + "@patternfly/react-data-view": "6.4.0-prerelease.4", "case-anything": "^3.1.2", "css": "^3.0.0", "fs-extra": "^11.3.0" diff --git a/packages/react-core/src/demos/Compass/Compass.md b/packages/react-core/src/demos/Compass/Compass.md new file mode 100644 index 00000000000..727e868b8d4 --- /dev/null +++ b/packages/react-core/src/demos/Compass/Compass.md @@ -0,0 +1,28 @@ +--- +id: Compass +section: patterns +--- + +import { useState, Fragment } from 'react'; +import { MessageBar } from '@patternfly/chatbot'; +import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable'; +import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar'; +import { ResponsiveAction, ResponsiveActions } from '@patternfly/react-component-groups'; +import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters'; +import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter'; +import { ActionsColumn } from '@patternfly/react-table'; +import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; +import pfLogo from '../assets/PF-HorizontalLogo-Color.svg'; +import pfLogoSm from '../assets/PF-IconLogo.svg'; +import imgAvatar from '../assets/avatarImg.svg'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import ListIcon from "@patternfly/react-icons/dist/esm/icons/list-icon"; +import ThIcon from "@patternfly/react-icons/dist/esm/icons/th-icon"; + +## Compass + +### Compass + +```ts file="./examples/Compass.tsx" isFullscreen + +``` diff --git a/packages/react-core/src/demos/Compass/examples/Compass.tsx b/packages/react-core/src/demos/Compass/examples/Compass.tsx new file mode 100644 index 00000000000..516fabd79fa --- /dev/null +++ b/packages/react-core/src/demos/Compass/examples/Compass.tsx @@ -0,0 +1,354 @@ +// eslint-disable-next-line no-restricted-imports +import React, { Fragment, useState } from 'react'; +import { + ActionList, + ActionListItem, + Button, + Page, + PageSection, + Tabs, + Tab, + TabsComponent, + TabTitleText, + Brand, + DropdownItem, + Dropdown, + MenuToggle, + Avatar, + DropdownList, + MenuToggleElement, + ToolbarGroup, + Toolbar, + ToolbarContent, + ToolbarItem, + Title, + SearchInput, + Card, + CardHeader, + CardTitle, + CardBody, + ToggleGroupItem, + ToggleGroup, + Gallery, + Pagination, + Flex, + FlexItem +} from '@patternfly/react-core'; +import { MessageBar } from '@patternfly/chatbot'; +import { ActionsColumn } from '@patternfly/react-table'; +import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable'; +import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar'; +import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters'; +import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter'; +import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; +import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg'; +import pfLogoSm from '../../assets/PF-IconLogo-color.svg'; +import imgAvatar from '../../assets/avatarImg.svg'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import ListIcon from '@patternfly/react-icons/dist/esm/icons/list-icon'; +import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; + +export const Compass: React.FunctionComponent = () => { + const [activeSection, setActiveSection] = useState(4); + const [activeSubsection, setActiveSubsection] = useState(1); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [integrationTableDisplay, setIntegrationTableDisplay] = useState(false); + + const onDropdownSelect = ( + _event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + _value: string | number | undefined + ) => { + setIsDropdownOpen(false); + }; + + const onDropdownToggle = () => { + setIsDropdownOpen(!isDropdownOpen); + }; + + const handleTabClick = ( + _event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveSection(tabIndex as number); + }; + + const handleSubsectionClick = ( + _event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveSubsection(tabIndex as number); + }; + + const userDropdownItems = ( + <> + My profile + User management + Logout + + ); + + const userDropdown = ( + setIsDropdownOpen(isOpen)} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + } + > + Ned Username + + )} + > + {userDropdownItems} + + ); + + const compassAutomations = ( + + + Title section: Automations + Content section + + + ); + + const integrations = [ + { + id: 1, + name: 'Ansible Automation Platform', + description: + 'Ansible Automation Platform is an entrprise framework for building and operating IT automation at scale.', + status: 'Connected', + type: 'MCP Server', + url: 'ansible.example.com' + }, + { + id: 2, + name: 'Github', + description: 'Github is a code hosting platform for version control and collaboration. ', + status: 'Disconnected', + type: 'Version Control', + url: 'github.example.com' + }, + { + id: 3, + name: 'Kubernetes Cluster', + description: 'A Kubernetes cluster is a set of node machines for running containerized applications.', + status: 'Connected', + type: 'MCP Server', + url: 'k8s.example.com' + } + ]; + + const rowActions = [ + { + title: 'Some action', + onClick: () => console.log('clicked on Some action') // eslint-disable-line no-console + }, + { + title:
Another action
, + onClick: () => console.log('clicked on Another action') // eslint-disable-line no-console + }, + { + isSeparator: true + }, + { + title: 'Third action', + onClick: () => console.log('clicked on Third action') // eslint-disable-line no-console + } + ]; + + const rows = integrations.map(({ name, type }) => [ + name, + type, + { cell: , props: { isActionCell: true } } + ]); + + const columns = ['Name', 'Type']; + + const cardIntegration = ( + <> + + + + + + + + + } + aria-label="grid icon button" + isSelected={!integrationTableDisplay} + onChange={() => setIntegrationTableDisplay(false)} + > + } + aria-label="list icon button" + isSelected={integrationTableDisplay} + onChange={() => setIntegrationTableDisplay(true)} + > + + + + + {integrations.map((product) => ( + + + {}} + toggle={(toggleRef: React.Ref) => ( + } + /> + )} + popperProps={{ position: 'right' }} + /> + + ) + }} + > + {product.name} + + {product.description} + + ))} + + + ); + const dataViewIntegration = ( + <> + {}} + filters={ + {}} values={{}}> + + + + } + actions={ + + } + aria-label="grid icon button" + isSelected={!integrationTableDisplay} + onChange={() => setIntegrationTableDisplay(true)} + > + } + aria-label="list icon button" + isSelected={integrationTableDisplay} + onChange={() => setIntegrationTableDisplay(false)} + > + + } + pagination={} + /> + + + ); + + const compassIntegrations = ( + + + + + + Integrations + + + + + + + + + + + +