From 2c168cd54bdc1f814151633ee06cbe3c70f1a896 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 1 May 2026 14:03:59 -0400 Subject: [PATCH 1/3] fix(Compass): replaced CompassPanel and background images --- package.json | 14 +- packages/documentation-framework/package.json | 10 +- .../content/AI/Compass/CompassHandbook.md | 26 +-- .../AI/Compass/CompassIntegrationsDemo.js | 12 +- .../AnimationsOverviewClusterInventory.js | 6 +- .../AnimationsOverviewMemoryUtilization.js | 6 +- .../AnimationsOverviewNetworkActivity.js | 6 +- .../cards/AnimationsOverviewStorage.js | 6 +- .../AI/Compass/cards/ClusterDetailsCard.js | 4 +- .../AI/Compass/cards/RecentActivityCard.js | 6 +- .../content/AI/Compass/dashboard.js | 10 +- .../AI/generative-uis/compass/Compass.md | 4 +- .../compass/CompassIntegrationsDemo.tsx | 189 +++++++++--------- .../AnimationsOverviewClusterInventory.tsx | 13 +- .../AnimationsOverviewMemoryUtilization.tsx | 13 +- .../AnimationsOverviewNetworkActivity.tsx | 9 +- .../cards/AnimationsOverviewStorage.tsx | 13 +- .../compass/cards/ClusterDetailsCard.tsx | 95 ++++----- .../compass/cards/RecentActivityCard.tsx | 13 +- .../AI/generative-uis/compass/dashboard.tsx | 167 ++++++++-------- packages/site/package.json | 2 +- yarn.lock | 107 ++++++---- 22 files changed, 401 insertions(+), 330 deletions(-) diff --git a/package.json b/package.json index 057520b68d..dd9ac4fda7 100644 --- a/package.json +++ b/package.json @@ -39,10 +39,10 @@ }, "devDependencies": { "@octokit/rest": "^19.0.13", - "@patternfly/patternfly": "^6.5.0-prerelease.64", - "@patternfly/react-code-editor": "^6.5.0-prerelease.52", - "@patternfly/react-core": "^6.5.0-prerelease.49", - "@patternfly/react-table": "^6.5.0-prerelease.50", + "@patternfly/patternfly": "^6.5.0-prerelease.81", + "@patternfly/react-code-editor": "^6.5.0-prerelease.68", + "@patternfly/react-core": "^6.5.0-prerelease.65", + "@patternfly/react-table": "^6.5.0-prerelease.68", "glob": "^8.1.0", "lerna": "^9.0.5", "monaco-editor": "0.54.0", @@ -74,9 +74,9 @@ "ajv": ">=6.14.0", "qs": ">=6.15.0", "@isaacs/brace-expansion": ">=5.0.1", - "@patternfly/react-code-editor": "^6.5.0-prerelease.52", - "@patternfly/react-core": "^6.5.0-prerelease.49", - "@patternfly/react-table": "^6.5.0-prerelease.50", + "@patternfly/react-code-editor": "^6.5.0-prerelease.68", + "@patternfly/react-core": "^6.5.0-prerelease.65", + "@patternfly/react-table": "^6.5.0-prerelease.68", "monaco-editor": "0.54.0" } } diff --git a/packages/documentation-framework/package.json b/packages/documentation-framework/package.json index 22de979f23..c8d296dce6 100644 --- a/packages/documentation-framework/package.json +++ b/packages/documentation-framework/package.json @@ -68,11 +68,11 @@ "webpack-merge": "5.10.0" }, "peerDependencies": { - "@patternfly/patternfly": "^6.5.0-prerelease.64", - "@patternfly/react-code-editor": "^6.5.0-prerelease.52", - "@patternfly/react-core": "^6.5.0-prerelease.49", - "@patternfly/react-icons": "^6.5.0-prerelease.20", - "@patternfly/react-table": "^6.5.0-prerelease.50", + "@patternfly/patternfly": "^6.5.0-prerelease.81", + "@patternfly/react-code-editor": "^6.5.0-prerelease.68", + "@patternfly/react-core": "^6.5.0-prerelease.65", + "@patternfly/react-icons": "^6.5.0-prerelease.29", + "@patternfly/react-table": "^6.5.0-prerelease.68", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" }, diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/CompassHandbook.md b/packages/documentation-site/patternfly-docs/content/AI/Compass/CompassHandbook.md index f1391df8d4..90dc5e628e 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/Compass/CompassHandbook.md +++ b/packages/documentation-site/patternfly-docs/content/AI/Compass/CompassHandbook.md @@ -11,9 +11,9 @@ When building generative UI layouts using the Compass components, there are seve ### Transparent containers Transparent containers create a modern glass look and feel. To enable transparency on a container, apply `pf-v6-theme-glass` to the `html` element class list, similar to the approach for enabling the dark mode theme. -Within Compass layouts, elements with a transparent glass background and rounded borders should be wrapped in a `` (some Compass components do this automatically). You can adjust various options of the `` to adapt its padding and behavior to fit the context of your use case. +Within Compass layouts, elements with a transparent glass background and rounded borders should be wrapped in a `` and `` (some Compass components do this automatically). You can adjust various options of the `` to adapt its padding and behavior to fit the context of your use case. -To prevent styling issues, do not nest `` components while using the glass effects. +To prevent styling issues, do not nest `` components while using the glass effects. ### Header You can add a header to a Compass layout via the `` component. `` constructs 3 sections, which can contain any custom content, but will typically include the following: @@ -35,7 +35,7 @@ You can add a header to a Compass layout via the `` component. `< ``` ### Sidebars -There are 2 vertical sidebars in a Compass layout: 1 at the start of the page and another at the end. There are no specific helper components for these sections, so they're usually created by passing a `` that contains an [``](/components/action-list) with the `isVertical` flag. +There are 2 vertical sidebars in a Compass layout: 1 at the start of the page and another at the end. There are no specific helper components for these sections, so they're usually created by passing a `` and `` that contains an [``](/components/action-list) with the `isVertical` flag. ### Docked navigation As an alternative to the above header and sidebars, a docked navigation may be used to organize navigation elements into a single anchored sidebar. You can add a docked nav to the Compass layout via the `dock` property. @@ -45,16 +45,18 @@ A docked nav will typically contain a [``](/components/masthead) with ### Footer There are 2 methods of adding a footer to a compass layout. -In both methods, the footer content will remain the same, typically containing a [ChatBot ``](/extensions/chatbot/messages/), wrapped in a `` and `` component: +In both methods, the footer content will remain the same, typically containing a [ChatBot ``](/extensions/chatbot/messages/), wrapped in a ``, ``, and `` component: ``` - - -
- // aria anouncments for message bar's state updates -
- + + + +
+ // aria anouncments for message bar's state updates +
+ + ``` @@ -69,9 +71,9 @@ In both methods, the footer content will remain the same, typically containing a ### Main content The main content in a Compass layout includes the generated information displays. Main content fills the center of the viewport and typically consists of a `` or ``, a ``, and an optional ``. -Often, the main section will contain a `` and `` with a `` child containing the primary page content. +Often, the main section will contain a `` and `` with `` and `` children containing the primary page content. -When making [a dashboard view](/patterns/dashboard), use a `` instead of a ``. Instead of having a single `` within a ``, each individual dashboard item should be wrapped in a ``. For example, in a dashboard with many content cards, each `` (with `isPlain` flag) should be wrapped by a `` inside of a [``](/foundations-and-styles/layouts/grid). +When making [a dashboard view](/patterns/dashboard), use a `` instead of a ``. Instead of having a single `` and `` structure within a ``, each individual dashboard item should be wrapped in a `` and ``. For example, in a dashboard with many content cards, each `` (with `isPlain` flag) should be wrapped by a `` and `` structure inside of a [``](/foundations-and-styles/layouts/grid). ## CSS customization diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/CompassIntegrationsDemo.js b/packages/documentation-site/patternfly-docs/content/AI/Compass/CompassIntegrationsDemo.js index d48d12daee..dbf6b89b94 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/Compass/CompassIntegrationsDemo.js +++ b/packages/documentation-site/patternfly-docs/content/AI/Compass/CompassIntegrationsDemo.js @@ -1,6 +1,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; import { useState, useEffect } from 'react'; -import { Compass, CompassHeader, CompassContent, CompassMainHeader, CompassPanel, CompassMessageBar, Tabs, TabsComponent, Tab, TabTitleText, ActionList, ActionListGroup, ActionListItem, Button, Title, Tooltip, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, SearchInput, ToggleGroup, ToggleGroupItem, Pagination, DescriptionList, DescriptionListGroup, DescriptionListTerm, DescriptionListDescription, Label, Gallery, Card, CardBody, CardHeader, Content, Dropdown, MenuToggle, DropdownItem, DropdownList, Flex, Avatar, Icon, SkipToContent, Switch, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody } from '@patternfly/react-core'; +import { Compass, CompassHeader, CompassContent, CompassMainHeader, Panel, PanelMain, CompassMessageBar, Tabs, TabsComponent, Tab, TabTitleText, ActionList, ActionListGroup, ActionListItem, Button, Title, Tooltip, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, SearchInput, ToggleGroup, ToggleGroupItem, Pagination, DescriptionList, DescriptionListGroup, DescriptionListTerm, DescriptionListDescription, Label, Gallery, Card, CardBody, CardHeader, Content, Dropdown, MenuToggle, DropdownItem, DropdownList, Flex, Avatar, Icon, SkipToContent, Switch, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody } from '@patternfly/react-core'; import { ActionsColumn } from '@patternfly/react-table'; import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar'; import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter'; @@ -160,9 +160,9 @@ export const CompassIntegrationsDemo = () => { setIsThinking(false); }, 10000); // 10 seconds }; - const navContent = (_jsx(_Fragment, { children: _jsx(CompassPanel, { isPill: true, hasNoPadding: true, children: _jsxs(Tabs, { activeKey: 1, isNav: true, onSelect: () => { }, component: TabsComponent.nav, "aria-label": "Compass global", inset: { default: 'insetXl' }, children: [_jsx(Tab, { eventKey: 0, title: _jsx(TabTitleText, { children: "Tab 1" }) }), _jsx(Tab, { eventKey: 1, title: _jsx(TabTitleText, { children: "Integrations" }) }), _jsx(Tab, { eventKey: 2, title: _jsx(TabTitleText, { children: "Tab 3" }) }), _jsx(Tab, { eventKey: 3, title: _jsx(TabTitleText, { children: "Disabled Tab 4" }), isDisabled: true })] }) }) })); - const startSidebarContent = (_jsx(CompassPanel, { isPill: true, children: _jsxs(ActionList, { isIconList: true, isVertical: true, children: [_jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Play", children: _jsx(Button, { variant: "plain", icon: _jsx(PlayIcon, {}), "aria-label": "Play", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Add", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedPlusSquare, {}), "aria-label": "Add", isCircle: true }) }) })] }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Chat with AI", children: _jsx(Button, { variant: "plain", icon: _jsx(Icon, { style: { translate: ".05em .1em; scale: 1.1" }, children: _jsx(RHAiExperienceIcon, {}) }), "aria-label": "Chat with AI", isCircle: true, className: "pf-v6-m-ai-indicator" }) }) }), _jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Help", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Help", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Copy", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedCopy, {}), "aria-label": "Copy", isCircle: true }) }) })] })] }) })); - const endSidebarContent = (_jsx(CompassPanel, { isPill: true, children: _jsx(ActionList, { isIconList: true, isVertical: true, children: _jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Help", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Help", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Add", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedPlusSquare, {}), "aria-label": "Add", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Other help icon", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Other help", isCircle: true }) }) })] }) }) })); + const navContent = (_jsx(_Fragment, { children: _jsx(Panel, { isPill: true, children: _jsx(PanelMain, { children: _jsxs(Tabs, { activeKey: 1, isNav: true, onSelect: () => { }, component: TabsComponent.nav, "aria-label": "Compass global", inset: { default: 'insetXl' }, children: [_jsx(Tab, { eventKey: 0, title: _jsx(TabTitleText, { children: "Tab 1" }) }), _jsx(Tab, { eventKey: 1, title: _jsx(TabTitleText, { children: "Integrations" }) }), _jsx(Tab, { eventKey: 2, title: _jsx(TabTitleText, { children: "Tab 3" }) }), _jsx(Tab, { eventKey: 3, title: _jsx(TabTitleText, { children: "Disabled Tab 4" }), isDisabled: true })] }) }) })); + const startSidebarContent = (_jsx(Panel, { isPill: true, children: _jsx(PanelMain, { children: _jsxs(ActionList, { isIconList: true, isVertical: true, children: [_jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Play", children: _jsx(Button, { variant: "plain", icon: _jsx(PlayIcon, {}), "aria-label": "Play", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Add", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedPlusSquare, {}), "aria-label": "Add", isCircle: true }) }) })] }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Chat with AI", children: _jsx(Button, { variant: "plain", icon: _jsx(Icon, { style: { translate: ".05em .1em; scale: 1.1" }, children: _jsx(RHAiExperienceIcon, {}) }), "aria-label": "Chat with AI", isCircle: true, className: "pf-v6-m-ai-indicator" }) }) }), _jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Help", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Help", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Copy", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedCopy, {}), "aria-label": "Copy", isCircle: true }) }) })] })] }) })); + const endSidebarContent = (_jsx(Panel, { isPill: true, children: _jsx(PanelMain, { children: _jsx(ActionList, { isIconList: true, isVertical: true, children: _jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Help", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Help", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Add", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedPlusSquare, {}), "aria-label": "Add", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Other help icon", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Other help", isCircle: true }) }) })] }) }) })); const userDropdownItems = (_jsxs(_Fragment, { children: [_jsx(DropdownItem, { children: "My profile" }), _jsx(DropdownItem, { children: "User management" }), _jsx(DropdownItem, { children: "Logout" })] })); const userDropdown = (_jsx(Dropdown, { isOpen: isDropdownOpen, onSelect: () => setIsDropdownOpen(false), onOpenChange: (isOpen) => setIsDropdownOpen(isOpen), popperProps: { position: "right" }, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: () => setIsDropdownOpen(!isDropdownOpen), isExpanded: isDropdownOpen, variant: "plain", isCircle: true, children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, gap: { default: "gapMd" }, children: ["User Name", _jsx(Avatar, { src: imgAvatar, alt: "", size: "md" })] }) })), children: _jsx(DropdownList, { children: userDropdownItems }) })); const headerContent = _jsx(CompassHeader, { logo: _jsx("a", { href: "#", "aria-label": "Red Hat automations", tabIndex: 0, children: _jsx(RHAutomationsLogo, {}) }), nav: navContent, profile: userDropdown }); @@ -240,7 +240,7 @@ export const CompassIntegrationsDemo = () => { } ]; const tableViewContent = (_jsxs(_Fragment, { children: [_jsx(DataViewToolbar, { clearAllFilters: () => { }, filters: _jsx(DataViewTextFilter, { filterId: "name", title: "Name", placeholder: "Filter by name" }), actions: _jsxs(ToggleGroup, { children: [_jsx(ToggleGroupItem, { icon: _jsx(ThIcon, {}), "aria-label": "grid icon button", isSelected: activeDisplay === "card", onChange: () => setActiveDisplay("card") }), _jsx(ToggleGroupItem, { icon: _jsx(ListIcon, {}), "aria-label": "list icon button", isSelected: activeDisplay === "table", onChange: () => setActiveDisplay("table") })] }), pagination: _jsx(Pagination, { page: 1, perPage: 10, isCompact: true }) }), _jsx(DataViewTable, { "aria-label": "Integrations", columns: columns, rows: rows, className: "pf-m-plain" })] })); - const mainContent = (_jsxs(_Fragment, { children: [_jsx(CompassMainHeader, { title: _jsx(Title, { headingLevel: "h1", children: "Integrations" }), toolbar: (_jsx(Toolbar, { hasNoPadding: true, children: _jsxs(ToolbarContent, { children: [_jsx(ToolbarGroup, { children: _jsx(ToolbarItem, { children: _jsx(Button, { variant: "primary", onClick: onDrawerToggle, children: "Toggle drawer" }) }) }), _jsx(ToolbarGroup, { children: _jsx(ToolbarItem, { children: _jsx(Button, { icon: _jsx(EllipsisVIcon, {}), variant: "plain", "aria-label": "More options" }) }) })] }) })) }), _jsx(CompassContent, { children: _jsx(CompassPanel, { isScrollable: true, id: "integrations-main-content", tabIndex: -1, children: (() => { + const mainContent = (_jsxs(_Fragment, { children: [_jsx(CompassMainHeader, { title: _jsx(Title, { headingLevel: "h1", children: "Integrations" }), toolbar: (_jsx(Toolbar, { hasNoPadding: true, children: _jsxs(ToolbarContent, { children: [_jsx(ToolbarGroup, { children: _jsx(ToolbarItem, { children: _jsx(Button, { variant: "primary", onClick: onDrawerToggle, children: "Toggle drawer" }) }) }), _jsx(ToolbarGroup, { children: _jsx(ToolbarItem, { children: _jsx(Button, { icon: _jsx(EllipsisVIcon, {}), variant: "plain", "aria-label": "More options" }) }) })] }) })) }), _jsx(CompassContent, { children: _jsx(Panel, { isScrollable: true, id: "integrations-main-content", children: _jsx(PanelMain, { tabIndex: -1, children: (() => { if (activeDisplay === "table") { return tableViewContent; } @@ -248,7 +248,7 @@ export const CompassIntegrationsDemo = () => { return cardViewContent; } })() }) })] })); - const footerContent = (_jsx(CompassMessageBar, { children: _jsxs(CompassPanel, { isPill: true, hasNoPadding: true, hasNoBorder: true, children: [_jsx(MessageBar, { isCompact: true, onSendMessage: handleSendMessage, alwayShowSendButton: true, hasAttachButton: false, hasAiIndicator: true, isThinking: isThinking }), _jsx("div", { "aria-live": "polite", className: "pf-v6-screen-reader", children: isThinking ? "Ai is thinking..." : "Ai is ready to chat" })] }) })); + const footerContent = (_jsx(CompassMessageBar, { children: _jsx(Panel, { isPill: true, hasNoBorder: true, children: _jsxs(PanelMain, { children: [_jsx(MessageBar, { isCompact: true, onSendMessage: handleSendMessage, alwayShowSendButton: true, hasAttachButton: false, hasAiIndicator: true, isThinking: isThinking }), _jsx("div", { "aria-live": "polite", className: "pf-v6-screen-reader", children: isThinking ? "Ai is thinking..." : "Ai is ready to chat" })] }) }) })); const handleClick = (e) => { e.preventDefault(); const mainContentElement = document.getElementById('integrations-main-content'); diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewClusterInventory.js b/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewClusterInventory.js index 0de1652bdd..c71fe8625f 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewClusterInventory.js +++ b/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewClusterInventory.js @@ -1,6 +1,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { useState } from "react"; -import { Card, CardHeader, CardTitle, CardBody, CardFooter, Dropdown, DropdownList, DropdownItem, MenuToggle, Flex, FlexItem, Button, Icon, CompassPanel, } from "@patternfly/react-core"; +import { Card, CardHeader, CardTitle, CardBody, CardFooter, Dropdown, DropdownList, DropdownItem, MenuToggle, Flex, FlexItem, Button, Icon, Panel, PanelMain, } from "@patternfly/react-core"; import ListIcon from "@patternfly/react-icons/dist/esm/icons/list-icon"; import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; import CubesIcon from "@patternfly/react-icons/dist/esm/icons/cubes-icon"; @@ -27,7 +27,7 @@ export const ClusterInventoryCard = () => { return ( // To match the dark theme in your screenshot, we wrap the card in a div with a dark background. // The `isPlain` and `isFlat` props on the Card remove its default background and shadow so it blends in. - _jsx(CompassPanel, { hasNoPadding: true, isFullHeight: true, children: _jsxs(Card, { isPlain: true, isFullHeight: true, children: [_jsx(CardHeader + _jsx(Panel, { isFullHeight: true, children: _jsx(PanelMain, { children: _jsxs(Card, { isPlain: true, isFullHeight: true, children: [_jsx(CardHeader // We use a Flex layout in the header to position the title and actions , { // We use a Flex layout in the header to position the title and actions @@ -35,7 +35,7 @@ export const ClusterInventoryCard = () => { actions: (_jsx(Dropdown, { isOpen: isKebabOpen, onSelect: () => setIsKebabOpen(false), onOpenChange: (isOpen) => setIsKebabOpen(isOpen), toggle: kebabToggle, popperProps: { position: "right" }, children: _jsx(DropdownList, { children: dropdownItems }) })), hasNoOffset: false, className: "", - }, children: _jsx(CardTitle, { children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, children: [_jsx(ListIcon, {}), _jsx("span", { children: " Cluster inventory" })] }) }) }), _jsx(CardBody, { children: _jsx(Flex, { direction: { default: "column" }, spaceItems: { default: "spaceItemsMd" }, children: inventoryItems.map((item, index) => (_jsx(FlexItem, { children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, children: [_jsx(FlexItem, { children: _jsx(Icon, { children: item.icon }) }), _jsx(FlexItem, { children: item.text })] }) }, index))) }) }), _jsx(CardFooter, { children: _jsx(Button, { variant: "link", isInline: true, icon: _jsx(ArrowRightIcon, {}), iconPosition: "end", component: "a", href: "#", children: "Cluster inventory page" }) })] }) })); + }, children: _jsx(CardTitle, { children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, children: [_jsx(ListIcon, {}), _jsx("span", { children: " Cluster inventory" })] }) }) }), _jsx(CardBody, { children: _jsx(Flex, { direction: { default: "column" }, spaceItems: { default: "spaceItemsMd" }, children: inventoryItems.map((item, index) => (_jsx(FlexItem, { children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, children: [_jsx(FlexItem, { children: _jsx(Icon, { children: item.icon }) }), _jsx(FlexItem, { children: item.text })] }) }, index))) }) }), _jsx(CardFooter, { children: _jsx(Button, { variant: "link", isInline: true, icon: _jsx(ArrowRightIcon, {}), iconPosition: "end", component: "a", href: "#", children: "Cluster inventory page" }) })] }) }) })); }; ClusterInventoryCard.displayName = "ClusterInventoryCard"; export default ClusterInventoryCard; diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewMemoryUtilization.js b/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewMemoryUtilization.js index 4559cfdc26..37b70baa61 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewMemoryUtilization.js +++ b/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewMemoryUtilization.js @@ -1,6 +1,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { useState } from "react"; -import { Card, CardTitle, CardBody, CardFooter, Flex, Button, Dropdown, DropdownItem, MenuToggle, CardHeader, DropdownList, FlexItem, CompassPanel, } from "@patternfly/react-core"; +import { Card, CardTitle, CardBody, CardFooter, Flex, Button, Dropdown, DropdownItem, MenuToggle, CardHeader, DropdownList, FlexItem, Panel, PanelMain, } from "@patternfly/react-core"; import { ChartDonutThreshold, ChartDonutUtilization, } from "@patternfly/react-charts/dist/esm/victory/components"; import ArrowRightIcon from "@patternfly/react-icons/dist/esm/icons/arrow-right-icon"; import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; @@ -14,7 +14,7 @@ export const MemoryUtilizationCard = () => { ]; // The kebab menu toggle button const kebabToggle = (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, variant: "plain", onClick: () => setIsKebabOpen(!isKebabOpen), isExpanded: isKebabOpen, "aria-label": "Memory usage card options", children: _jsx(EllipsisVIcon, {}) })); - return (_jsx(CompassPanel, { hasNoPadding: true, isFullHeight: true, children: _jsxs(Card, { isPlain: true, isFullHeight: true, children: [_jsx(CardHeader, { actions: { + return (_jsx(Panel, { isFullHeight: true, children: _jsx(PanelMain, { children: _jsxs(Card, { isPlain: true, isFullHeight: true, children: [_jsx(CardHeader, { actions: { actions: (_jsx(Dropdown, { isOpen: isKebabOpen, onSelect: () => setIsKebabOpen(false), onOpenChange: (isOpen) => setIsKebabOpen(isOpen), toggle: kebabToggle, popperProps: { position: "right" }, children: _jsx(DropdownList, { children: dropdownItems }) })), hasNoOffset: false, className: "", @@ -34,7 +34,7 @@ export const MemoryUtilizationCard = () => { left: 10, right: 10, top: 0, - }, width: 200, children: _jsx(ChartDonutUtilization, { data: { x: "GPU capacity", y: 55 }, labels: ({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null, title: "55%", subTitle: "GPU", thresholds: [{ value: 60 }, { value: 90 }] }) }) })] }) }), _jsx(CardFooter, { children: _jsx(Button, { variant: "link", isInline: true, icon: _jsx(ArrowRightIcon, {}), iconPosition: "end", component: "a", href: "#", children: "Memory usage page" }) })] }) })); + }, width: 200, children: _jsx(ChartDonutUtilization, { data: { x: "GPU capacity", y: 55 }, labels: ({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null, title: "55%", subTitle: "GPU", thresholds: [{ value: 60 }, { value: 90 }] }) }) })] }) }), _jsx(CardFooter, { children: _jsx(Button, { variant: "link", isInline: true, icon: _jsx(ArrowRightIcon, {}), iconPosition: "end", component: "a", href: "#", children: "Memory usage page" }) })] }) }) })); }; MemoryUtilizationCard.displayName = "MemoryUtilizationCard"; export default MemoryUtilizationCard; diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewNetworkActivity.js b/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewNetworkActivity.js index 63a3c20aba..a808156b3c 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewNetworkActivity.js +++ b/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewNetworkActivity.js @@ -1,6 +1,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { useState } from "react"; -import { Card, CardHeader, CardTitle, CardBody, Dropdown, DropdownList, DropdownItem, MenuToggle, Flex, CompassPanel, } from "@patternfly/react-core"; +import { Card, CardHeader, CardTitle, CardBody, Dropdown, DropdownList, DropdownItem, MenuToggle, Flex, Panel, PanelMain, } from "@patternfly/react-core"; import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; import NetworkIcon from "@patternfly/react-icons/dist/esm/icons/network-icon"; import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer, } from "@patternfly/react-charts/dist/esm/victory/components"; @@ -30,7 +30,7 @@ export const NetworkActivityCard = () => { return ( // To match the dark theme, we wrap the card in a div with a dark background. // The `isPlain` and `isFlat` props on the Card remove its default styling. - _jsx(CompassPanel, { hasNoPadding: true, isFullHeight: true, children: _jsxs(Card, { isPlain: true, isFullHeight: true, children: [_jsx(CardHeader, { actions: { + _jsx(Panel, { isFullHeight: true, children: _jsx(PanelMain, { children: _jsxs(Card, { isPlain: true, isFullHeight: true, children: [_jsx(CardHeader, { actions: { actions: (_jsx(Dropdown, { isOpen: isKebabOpen, onSelect: () => setIsKebabOpen(false), onOpenChange: (isOpen) => setIsKebabOpen(isOpen), toggle: kebabToggle, popperProps: { position: "right" }, children: _jsx(DropdownList, { children: dropdownItems }) })), hasNoOffset: false, className: "", @@ -45,7 +45,7 @@ export const NetworkActivityCard = () => { stroke: "#0066CC", // Line color fill: "rgba(0, 102, 204, 0.4)", // Area fill color with opacity }, - } }) })] }) })] }) })); + } }) })] }) })] }) }) })); }; NetworkActivityCard.displayName = "NetworkActivityCard"; export default NetworkActivityCard; diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewStorage.js b/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewStorage.js index 44525cf959..87404a9b15 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewStorage.js +++ b/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/AnimationsOverviewStorage.js @@ -1,6 +1,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { useState } from "react"; -import { CardTitle, CardBody, CardFooter, Flex, Button, Dropdown, DropdownItem, MenuToggle, Card, CardHeader, DropdownList, FlexItem, CompassPanel, } from "@patternfly/react-core"; +import { CardTitle, CardBody, CardFooter, Flex, Button, Dropdown, DropdownItem, MenuToggle, Card, CardHeader, DropdownList, FlexItem, Panel, PanelMain, } from "@patternfly/react-core"; import { ChartDonutThreshold, ChartDonutUtilization, } from "@patternfly/react-charts/dist/esm/victory/components"; import StorageDomainIcon from "@patternfly/react-icons/dist/esm/icons/storage-domain-icon"; import ArrowRightIcon from "@patternfly/react-icons/dist/esm/icons/arrow-right-icon"; @@ -14,7 +14,7 @@ export const StorageCard = () => { ]; // The kebab menu toggle button const kebabToggle = (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, variant: "plain", onClick: () => setIsKebabOpen(!isKebabOpen), isExpanded: isKebabOpen, "aria-label": "Storage card options", children: _jsx(EllipsisVIcon, {}) })); - return (_jsx(CompassPanel, { hasNoPadding: true, isFullHeight: true, children: _jsxs(Card, { isFullHeight: true, isPlain: true, children: [_jsx(CardHeader, { actions: { + return (_jsx(Panel, { isFullHeight: true, children: _jsx(PanelMain, { children: _jsxs(Card, { isFullHeight: true, isPlain: true, children: [_jsx(CardHeader, { actions: { actions: (_jsx(Dropdown, { isOpen: isKebabOpen, onSelect: () => setIsKebabOpen(false), onOpenChange: (isOpen) => setIsKebabOpen(isOpen), toggle: kebabToggle, popperProps: { position: "right" }, children: _jsx(DropdownList, { children: dropdownItems }) })), hasNoOffset: false, className: "", @@ -26,7 +26,7 @@ export const StorageCard = () => { left: 10, right: 10, top: 0, - }, width: 200, children: _jsx(ChartDonutUtilization, { data: { x: "Storage capacity", y: 80 }, labels: ({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null, title: "80%", subTitle: "Available", thresholds: [{ value: 60 }, { value: 90 }] }) }) }) }) }), _jsx(CardFooter, { children: _jsx(Button, { variant: "link", isInline: true, icon: _jsx(ArrowRightIcon, {}), iconPosition: "end", component: "a", href: "#", children: "Storage page" }) })] }) })); + }, width: 200, children: _jsx(ChartDonutUtilization, { data: { x: "Storage capacity", y: 80 }, labels: ({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null, title: "80%", subTitle: "Available", thresholds: [{ value: 60 }, { value: 90 }] }) }) }) }) }), _jsx(CardFooter, { children: _jsx(Button, { variant: "link", isInline: true, icon: _jsx(ArrowRightIcon, {}), iconPosition: "end", component: "a", href: "#", children: "Storage page" }) })] }) }) })); }; StorageCard.displayName = "StorageCard"; export default StorageCard; diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/ClusterDetailsCard.js b/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/ClusterDetailsCard.js index 401137036f..370edc7a8b 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/ClusterDetailsCard.js +++ b/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/ClusterDetailsCard.js @@ -1,7 +1,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import { CompassPanel, Card, CardTitle, CardBody, CardFooter, Title, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Divider, } from '@patternfly/react-core'; +import { Panel, PanelMain, Card, CardTitle, CardBody, CardFooter, Title, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Divider, } from '@patternfly/react-core'; export const ClusterDetailsCard = () => { - return (_jsx(CompassPanel, { hasNoPadding: true, isFullHeight: true, children: _jsxs(Card, { isPlain: true, isFullHeight: true, children: [_jsx(CardTitle, { children: _jsx(Title, { id: "cluster-details-title", headingLevel: "h1", size: "xl", children: "Cluster Details" }) }), _jsx(CardBody, { children: _jsxs(DescriptionList, { "aria-labelledby": 'cluster-details-title', children: [_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Cluster API Address" }), _jsx(DescriptionListDescription, { children: _jsx("a", { href: "#", children: "https://api1.devcluster.openshift.com" }) })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Cluster ID" }), _jsx(DescriptionListDescription, { children: "63b97ac1-b850-41d9-8820-239becde9e86" })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Provide" }), _jsx(DescriptionListDescription, { children: "AWS" })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "OpenShift Version" }), _jsx(DescriptionListDescription, { children: "4.5.0.ci-2020-06-16-015028" })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Update Channel" }), _jsx(DescriptionListDescription, { children: "stable-4.5" })] })] }) }), _jsx(Divider, {}), _jsx(CardFooter, { children: _jsx("a", { href: "#", children: "View Settings" }) })] }) })); + return (_jsx(Panel, { isFullHeight: true, children: _jsx(PanelMain, { children: _jsxs(Card, { isPlain: true, isFullHeight: true, children: [_jsx(CardTitle, { children: _jsx(Title, { id: "cluster-details-title", headingLevel: "h1", size: "xl", children: "Cluster Details" }) }), _jsx(CardBody, { children: _jsxs(DescriptionList, { "aria-labelledby": 'cluster-details-title', children: [_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Cluster API Address" }), _jsx(DescriptionListDescription, { children: _jsx("a", { href: "#", children: "https://api1.devcluster.openshift.com" }) })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Cluster ID" }), _jsx(DescriptionListDescription, { children: "63b97ac1-b850-41d9-8820-239becde9e86" })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Provide" }), _jsx(DescriptionListDescription, { children: "AWS" })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "OpenShift Version" }), _jsx(DescriptionListDescription, { children: "4.5.0.ci-2020-06-16-015028" })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Update Channel" }), _jsx(DescriptionListDescription, { children: "stable-4.5" })] })] }) }), _jsx(Divider, {}), _jsx(CardFooter, { children: _jsx("a", { href: "#", children: "View Settings" }) })] }) }) })); }; ClusterDetailsCard.displayName = 'ClusterDetailsCard'; export default ClusterDetailsCard; diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/RecentActivityCard.js b/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/RecentActivityCard.js index 7f5aff2e20..62265e23f1 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/RecentActivityCard.js +++ b/packages/documentation-site/patternfly-docs/content/AI/Compass/cards/RecentActivityCard.js @@ -1,5 +1,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import { CompassPanel, Card, CardHeader, CardTitle, CardBody, Flex, Dropdown, MenuToggle, ProgressStep, ProgressStepper, Spinner, Button, } from '@patternfly/react-core'; +import { Panel, PanelMain, Card, CardHeader, CardTitle, CardBody, Flex, Dropdown, MenuToggle, ProgressStep, ProgressStepper, Spinner, Button, } from '@patternfly/react-core'; import PortIcon from '@patternfly/react-icons/dist/esm/icons/port-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; @@ -41,11 +41,11 @@ export const RecentActivityCard = () => { danger: _jsx(ExclamationCircleIcon, {}), warning: _jsx(ExclamationTriangleIcon, {}), }; - return (_jsx(CompassPanel, { hasNoPadding: true, isFullHeight: true, children: _jsxs(Card, { isPlain: true, isFullHeight: true, children: [_jsx(CardHeader, { actions: { + return (_jsx(Panel, { isFullHeight: true, children: _jsx(PanelMain, { children: _jsxs(Card, { isPlain: true, isFullHeight: true, children: [_jsx(CardHeader, { actions: { actions: (_jsx(Dropdown, { isOpen: false, onSelect: () => { }, onOpenChange: () => { }, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, variant: "plain", onClick: () => { }, isExpanded: false, "aria-label": "Recent activity card options", children: _jsx(EllipsisVIcon, {}) })), popperProps: { position: 'right' } })), hasNoOffset: false, className: '', - }, children: _jsx(CardTitle, { children: _jsxs(Flex, { alignItems: { default: 'alignItemsCenter' }, children: [_jsx(PortIcon, {}), _jsx("span", { children: "Recent activity" })] }) }) }), _jsx(CardBody, { children: _jsxs(Table, { "aria-label": "Recent activity table", variant: "compact", className: "pf-m-plain", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { width: 30, children: "Name" }), _jsx(Th, { width: 30, children: "Project" }), _jsx(Th, { width: 30, children: "Progress" }), _jsx(Th, { width: 10 })] }) }), _jsx(Tbody, { children: activityData.map((activity, rowIndex) => (_jsxs(Tr, { children: [_jsx(Td, { children: _jsx(Button, { variant: "link", isInline: true, component: "a", href: "#", children: activity.name }) }), _jsx(Td, { children: _jsx(Button, { variant: "link", isInline: true, component: "a", href: "#", children: activity.project }) }), _jsx(Td, { children: _jsx(ProgressStepper, { isCompact: true, "aria-label": `Progress for activity ${activity.name} in project ${activity.project}`, children: activity.progress.map((stepVariant, stepIndex) => (_jsx(ProgressStep, { id: `progress-step-${rowIndex}-${stepVariant}-${stepIndex}`, variant: stepVariant, icon: iconMap[stepVariant], "aria-label": `Step ${stepIndex + 1} is ${stepVariant}` }, stepIndex))) }) }), _jsx(Td, { isActionCell: true, children: _jsx(Dropdown, { isOpen: false, onSelect: () => { }, onOpenChange: () => { }, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, variant: "plain", onClick: () => { }, isExpanded: false, "aria-label": `Options for activity ${activity.name} in project ${activity.project}`, children: _jsx(EllipsisVIcon, {}) })), popperProps: { position: 'right' } }) })] }, activity.id))) })] }) })] }) })); + }, children: _jsx(CardTitle, { children: _jsxs(Flex, { alignItems: { default: 'alignItemsCenter' }, children: [_jsx(PortIcon, {}), _jsx("span", { children: "Recent activity" })] }) }) }), _jsx(CardBody, { children: _jsxs(Table, { "aria-label": "Recent activity table", variant: "compact", className: "pf-m-plain", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { width: 30, children: "Name" }), _jsx(Th, { width: 30, children: "Project" }), _jsx(Th, { width: 30, children: "Progress" }), _jsx(Th, { width: 10 })] }) }), _jsx(Tbody, { children: activityData.map((activity, rowIndex) => (_jsxs(Tr, { children: [_jsx(Td, { children: _jsx(Button, { variant: "link", isInline: true, component: "a", href: "#", children: activity.name }) }), _jsx(Td, { children: _jsx(Button, { variant: "link", isInline: true, component: "a", href: "#", children: activity.project }) }), _jsx(Td, { children: _jsx(ProgressStepper, { isCompact: true, "aria-label": `Progress for activity ${activity.name} in project ${activity.project}`, children: activity.progress.map((stepVariant, stepIndex) => (_jsx(ProgressStep, { id: `progress-step-${rowIndex}-${stepVariant}-${stepIndex}`, variant: stepVariant, icon: iconMap[stepVariant], "aria-label": `Step ${stepIndex + 1} is ${stepVariant}` }, stepIndex))) }) }), _jsx(Td, { isActionCell: true, children: _jsx(Dropdown, { isOpen: false, onSelect: () => { }, onOpenChange: () => { }, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, variant: "plain", onClick: () => { }, isExpanded: false, "aria-label": `Options for activity ${activity.name} in project ${activity.project}`, children: _jsx(EllipsisVIcon, {}) })), popperProps: { position: 'right' } }) })] }, activity.id))) })] }) })] }) }) })); }; RecentActivityCard.displayName = 'RecentActivityCard'; export default RecentActivityCard; diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/dashboard.js b/packages/documentation-site/patternfly-docs/content/AI/Compass/dashboard.js index f215e10960..2fc68ba4aa 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/Compass/dashboard.js +++ b/packages/documentation-site/patternfly-docs/content/AI/Compass/dashboard.js @@ -1,6 +1,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; import { useState } from 'react'; -import { Compass, CompassHeader, CompassContent, CompassPanel, CompassMessageBar, Hero, Tabs, TabsComponent, Tab, TabTitleText, ActionList, ActionListGroup, ActionListItem, Button, Tooltip, Content, Avatar, Dropdown, DropdownItem, DropdownList, Flex, MenuToggle, Grid, GridItem, Icon, SkipToContent } from '@patternfly/react-core'; +import { Compass, CompassHeader, CompassContent, Panel, PanelMain, CompassMessageBar, Hero, Tabs, TabsComponent, Tab, TabTitleText, ActionList, ActionListGroup, ActionListItem, Button, Tooltip, Content, Avatar, Dropdown, DropdownItem, DropdownList, Flex, MenuToggle, Grid, GridItem, Icon, SkipToContent } from '@patternfly/react-core'; import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon'; import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon'; @@ -22,8 +22,8 @@ export const CompassBasic = () => { const [activeTab, setActiveTab] = useState(0); const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [isThinking, setIsThinking] = useState(false); - const navContent = (_jsx(_Fragment, { children: _jsx(CompassPanel, { isPill: true, hasNoPadding: true, children: _jsxs(Tabs, { activeKey: activeTab, isNav: true, onSelect: (_event, tabIndex) => setActiveTab(tabIndex), component: TabsComponent.nav, "aria-label": "Compass global", inset: { default: 'insetXl' }, children: [_jsx(Tab, { eventKey: 0, title: _jsx(TabTitleText, { children: "Dashboard" }) }), _jsx(Tab, { eventKey: 1, title: _jsx(TabTitleText, { children: "Builder" }), isDisabled: true }), _jsx(Tab, { eventKey: 2, title: _jsx(TabTitleText, { children: "Automations" }) }), _jsx(Tab, { eventKey: 3, title: _jsx(TabTitleText, { children: "Approvals" }), isDisabled: true }), _jsx(Tab, { eventKey: 4, title: _jsx(TabTitleText, { children: "Configuration" }) }), _jsx(Tab, { eventKey: 5, title: _jsx(TabTitleText, { children: "Test Page" }) })] }) }) })); - const westContent = (_jsx(CompassPanel, { isPill: true, children: _jsxs(ActionList, { isIconList: true, isVertical: true, children: [_jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Play", children: _jsx(Button, { variant: "plain", icon: _jsx(PlayIcon, {}), "aria-label": "Play", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Add", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedPlusSquare, {}), "aria-label": "Add", isCircle: true }) }) })] }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Assistant", children: _jsx(Button, { variant: "plain", icon: _jsx(Icon, { style: { translate: ".05em .1em; scale: 1.1" }, children: _jsx(RHAiExperienceIcon, {}) }), "aria-label": "Assistant", isCircle: true, className: "pf-v6-m-ai-indicator" }) }) }), _jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Help", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Help", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Copy", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedCopy, {}), "aria-label": "Copy", isCircle: true }) }) })] })] }) })); + const navContent = (_jsx(_Fragment, { children: _jsx(Panel, { isPill: true, children: _jsx(PanelMain, { children: _jsxs(Tabs, { activeKey: activeTab, isNav: true, onSelect: (_event, tabIndex) => setActiveTab(tabIndex), component: TabsComponent.nav, "aria-label": "Compass global", inset: { default: 'insetXl' }, children: [_jsx(Tab, { eventKey: 0, title: _jsx(TabTitleText, { children: "Dashboard" }) }), _jsx(Tab, { eventKey: 1, title: _jsx(TabTitleText, { children: "Builder" }), isDisabled: true }), _jsx(Tab, { eventKey: 2, title: _jsx(TabTitleText, { children: "Automations" }) }), _jsx(Tab, { eventKey: 3, title: _jsx(TabTitleText, { children: "Approvals" }), isDisabled: true }), _jsx(Tab, { eventKey: 4, title: _jsx(TabTitleText, { children: "Configuration" }) }), _jsx(Tab, { eventKey: 5, title: _jsx(TabTitleText, { children: "Test Page" }) })] }) }) })); + const westContent = (_jsx(Panel, { isPill: true, children: _jsx(PanelMain, { children: _jsxs(ActionList, { isIconList: true, isVertical: true, children: [_jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Play", children: _jsx(Button, { variant: "plain", icon: _jsx(PlayIcon, {}), "aria-label": "Play", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Add", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedPlusSquare, {}), "aria-label": "Add", isCircle: true }) }) })] }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Assistant", children: _jsx(Button, { variant: "plain", icon: _jsx(Icon, { style: { translate: ".05em .1em; scale: 1.1" }, children: _jsx(RHAiExperienceIcon, {}) }), "aria-label": "Assistant", isCircle: true, className: "pf-v6-m-ai-indicator" }) }) }), _jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Help", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Help", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Copy", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedCopy, {}), "aria-label": "Copy", isCircle: true }) }) })] })] }) })); const userDropdownItems = (_jsxs(_Fragment, { children: [_jsx(DropdownItem, { children: "My profile" }, "group 2 profile"), _jsx(DropdownItem, { children: "User management" }, "group 2 user"), _jsx(DropdownItem, { children: "Logout" }, "group 2 logout")] })); const onDropdownSelect = () => { setIsDropdownOpen(false); @@ -34,14 +34,14 @@ export const CompassBasic = () => { const userDropdown = (_jsx(Dropdown, { isOpen: isDropdownOpen, onSelect: () => onDropdownSelect, onOpenChange: (isOpen) => setIsDropdownOpen(isOpen), popperProps: { position: "right" }, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: onDropdownToggle, isExpanded: isDropdownOpen, variant: "plain", isCircle: true, children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, gap: { default: "gapMd" }, children: ["Aliyah Frazier", _jsx(Avatar, { src: imgAvatar, alt: "", size: "md" })] }) })), children: _jsx(DropdownList, { children: userDropdownItems }) })); const northContent = _jsx(CompassHeader, { logo: _jsx("a", { href: "#", "aria-label": "Red Hat automations", tabIndex: 0, children: _jsx(RHAutomationsLogo, {}) }), nav: navContent, profile: userDropdown }); const mainContent = (_jsxs(_Fragment, { children: [_jsx(Hero, { gradientDark: { stop1: '#3d2785', stop2: '#1b0d33', stop3: '#000' }, backgroundSrcDark: heroBg, children: _jsxs(Content, { children: [_jsx("h1", { children: "Automation that does more" }), _jsx("p", { children: "Red\u00A0Hat Ansible Automation Platform offers more capabilities, accessibility, and flexibility, so you can bring the power of automation to the teams, tasks, and environments that need it." }), _jsx(ActionList, { children: _jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Button, { variant: "primary", children: "Upgrade today" }) }), _jsx(ActionListItem, { children: _jsx(Button, { variant: "secondary", children: "Talk to a Red Hatter" }) })] }) })] }) }), _jsx(CompassContent, { id: "main", children: _jsxs(Grid, { hasGutter: true, style: { maxHeight: 'none' }, children: [_jsx(GridItem, { span: 12, sm: 12, md: 6, lg: 4, xl: 3, rowSpan: 4, children: _jsx(ClusterDetailsCard, {}) }), _jsx(GridItem, { span: 12, sm: 12, md: 6, lg: 4, xl: 3, rowSpan: 2, children: _jsx(AnimationsOverviewClusterInventory, {}) }), _jsx(GridItem, { span: 12, sm: 12, md: 6, lg: 4, xl: 3, rowSpan: 2, children: _jsx(AnimationsOverviewStorage, {}) }), _jsx(GridItem, { span: 12, sm: 12, md: 12, lg: 8, xl: 3, rowSpan: 2, children: _jsx(AnimationsOverviewMemoryUtilization, {}) }), _jsx(GridItem, { span: 12, sm: 12, md: 12, lg: 12, xl: 3, rowSpan: 2, children: _jsx(AnimationsOverviewNetworkActivity, {}) }), _jsx(GridItem, { span: 12, sm: 12, md: 12, lg: 8, xl: 6, rowSpan: 2, children: _jsx(RecentActivityCard, {}) })] }) })] })); - const eastContent = (_jsx(CompassPanel, { isPill: true, children: _jsx(ActionList, { isIconList: true, isVertical: true, children: _jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Help 2", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Help 2", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Add", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedPlusSquare, {}), "aria-label": "Add", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Help 3", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Help 3", isCircle: true }) }) })] }) }) })); + const eastContent = (_jsx(Panel, { isPill: true, children: _jsx(PanelMain, { children: _jsx(ActionList, { isIconList: true, isVertical: true, children: _jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Help 2", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Help 2", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Add", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedPlusSquare, {}), "aria-label": "Add", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Help 3", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Help 3", isCircle: true }) }) })] }) }) })); const handleSendMessage = () => { setIsThinking(true); setTimeout(() => { setIsThinking(false); }, 10000); // 10 seconds }; - const southContent = (_jsxs(CompassMessageBar, { children: [_jsx(CompassPanel, { isPill: true, hasNoPadding: true, hasNoBorder: true, children: _jsx(MessageBar, { isCompact: true, onSendMessage: handleSendMessage, alwayShowSendButton: true, hasAttachButton: false, hasAiIndicator: true, isThinking: isThinking }) }), _jsx("div", { className: "pf-v6-screen-reader", "aria-live": "polite", children: isThinking && "AI is thinking..." })] })); + const southContent = (_jsxs(CompassMessageBar, { children: [_jsx(Panel, { isPill: true, hasNoBorder: true, children: _jsx(PanelMain, { children: _jsx(MessageBar, { isCompact: true, onSendMessage: handleSendMessage, alwayShowSendButton: true, hasAttachButton: false, hasAiIndicator: true, isThinking: isThinking }) }) }), _jsx("div", { className: "pf-v6-screen-reader", "aria-live": "polite", children: isThinking && "AI is thinking..." })] })); const skipToContentClick = (e) => { e.preventDefault(); const mainContent = document.getElementById('main'); diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/Compass.md b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/Compass.md index 3d74539607..70b305e8c1 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/Compass.md +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/Compass.md @@ -40,12 +40,12 @@ import heroBg from './assets/hero-bg.png'; To help you use the Compass layout, there are several variants and props exposed on other PatternFly components that may be useful: -- `isPlain` on [card](/components/card#modifiers), [data list](/components/data-list#plain), and [table](/components/table#plain). This flag will set a transparent background for these components, allowing the glass effect in a wrapping `` to appear as the background. +- `isPlain` on [card](/components/card#modifiers), [data list](/components/data-list#plain), and [table](/components/table#plain). This flag will set a transparent background for these components, allowing the glass effect in a wrapping `` to appear as the background. - `isVertical` on [action list](/components/action-list#vertical-action-list). This flag sets the orientation on `` to support vertical icon lists for the sidebars. - `isNav` on [tabs](/components/tabs#tabs-used-for-site-navigation). This flag enables a new styling of `` to be used as a top-page navigation. - `isCircle` on [button](/components/button#circle-buttons) and [menu toggle](/components/menus/menu-toggle#plain-circle-toggle). This flag sets a border radius on the ` - - + + + ); }; ClusterInventoryCard.displayName = "ClusterInventoryCard"; diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewMemoryUtilization.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewMemoryUtilization.tsx index fe7444a2eb..6653723ee7 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewMemoryUtilization.tsx +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewMemoryUtilization.tsx @@ -12,7 +12,8 @@ import { CardHeader, DropdownList, FlexItem, - CompassPanel, + Panel, + PanelMain, } from "@patternfly/react-core"; import { ChartDonutThreshold, @@ -45,8 +46,9 @@ export const MemoryUtilizationCard: React.FunctionComponent = () => { ); return ( - - + + + { Memory usage page - - + + + ); }; MemoryUtilizationCard.displayName = "MemoryUtilizationCard"; diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewNetworkActivity.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewNetworkActivity.tsx index d981cc31d9..cb353ec972 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewNetworkActivity.tsx +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewNetworkActivity.tsx @@ -9,7 +9,8 @@ import { DropdownItem, MenuToggle, Flex, - CompassPanel, + Panel, + PanelMain, } from "@patternfly/react-core"; import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; @@ -64,7 +65,8 @@ export const NetworkActivityCard: React.FunctionComponent = () => { return ( // To match the dark theme, we wrap the card in a div with a dark background. // The `isPlain` and `isFlat` props on the Card remove its default styling. - + + { - + + ); }; NetworkActivityCard.displayName = "NetworkActivityCard"; diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewStorage.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewStorage.tsx index 289cdf06d5..955908326d 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewStorage.tsx +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewStorage.tsx @@ -12,7 +12,8 @@ import { CardHeader, DropdownList, FlexItem, - CompassPanel, + Panel, + PanelMain, } from "@patternfly/react-core"; import { ChartDonutThreshold, @@ -45,8 +46,9 @@ export const StorageCard: React.FunctionComponent = () => { ); return ( - - + + + { Storage page - - + + + ); }; StorageCard.displayName = "StorageCard"; diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/ClusterDetailsCard.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/ClusterDetailsCard.tsx index b68be647ca..966a4cea51 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/ClusterDetailsCard.tsx +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/ClusterDetailsCard.tsx @@ -1,5 +1,6 @@ import { - CompassPanel, + Panel, + PanelMain, Card, CardTitle, CardBody, @@ -14,51 +15,53 @@ import { export const ClusterDetailsCard: React.FunctionComponent = () => { return ( - - - - - Cluster Details - - - - - - Cluster API Address - - https://api1.devcluster.openshift.com - - - - Cluster ID - - 63b97ac1-b850-41d9-8820-239becde9e86 - - - - Provide - AWS - - - OpenShift Version - - 4.5.0.ci-2020-06-16-015028 - - - - Update Channel - - stable-4.5 - - - - - - - View Settings - - - + + + + + + Cluster Details + + + + + + Cluster API Address + + https://api1.devcluster.openshift.com + + + + Cluster ID + + 63b97ac1-b850-41d9-8820-239becde9e86 + + + + Provide + AWS + + + OpenShift Version + + 4.5.0.ci-2020-06-16-015028 + + + + Update Channel + + stable-4.5 + + + + + + + View Settings + + + + ); }; diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/RecentActivityCard.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/RecentActivityCard.tsx index 659f424501..b1c983b12e 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/RecentActivityCard.tsx +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/RecentActivityCard.tsx @@ -1,5 +1,6 @@ import { - CompassPanel, + Panel, + PanelMain, Card, CardHeader, CardTitle, @@ -58,8 +59,9 @@ export const RecentActivityCard: React.FunctionComponent = () => { }; return ( - - + + + { - - + + + ); }; diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/dashboard.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/dashboard.tsx index 15b9e14a7f..522a5e3865 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/dashboard.tsx +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/dashboard.tsx @@ -3,7 +3,8 @@ import { Compass, CompassHeader, CompassContent, - CompassPanel, + Panel, + PanelMain, CompassMessageBar, Hero, Tabs, @@ -56,60 +57,64 @@ export const CompassBasic: React.FunctionComponent = () => { const navContent = ( <> - - setActiveTab(tabIndex as number)} - component={TabsComponent.nav} - aria-label="Compass global" - inset={{ default: 'insetXl' }} - > - Dashboard} /> - Builder} isDisabled /> - Automations} /> - Approvals} isDisabled /> - Configuration} /> - Test Page} /> - - + + + setActiveTab(tabIndex as number)} + component={TabsComponent.nav} + aria-label="Compass global" + inset={{ default: 'insetXl' }} + > + Dashboard} /> + Builder} isDisabled /> + Automations} /> + Approvals} isDisabled /> + Configuration} /> + Test Page} /> + + + ); const westContent = ( - - - - - -