diff --git a/src/Components/Header/Header.scss b/src/Components/Header/Header.scss index 929c25f..d24d1f6 100644 --- a/src/Components/Header/Header.scss +++ b/src/Components/Header/Header.scss @@ -30,3 +30,7 @@ } } } + +.enable-workspaces-alert { + background-color: var(--pf-v6-global--palette--cyan-50); +} diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx index d6acd3f..03644fb 100644 --- a/src/Components/Header/Header.tsx +++ b/src/Components/Header/Header.tsx @@ -1,25 +1,37 @@ import './Header.scss'; import { + AlertActionLink, Button, ButtonVariant, Content, + Dropdown, Flex, FlexItem, + MenuToggle, + MenuToggleElement, + NotificationDrawerList, + NotificationDrawerListItem, + NotificationDrawerListItemHeader, PageSection, + Split, + SplitItem, + Switch, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, } from '@patternfly/react-core'; import React from 'react'; -import { PlusCircleIcon } from '@patternfly/react-icons'; +import { EllipsisVIcon, PlusCircleIcon, UsersIcon } from '@patternfly/react-icons'; import { useAtom, useSetAtom } from 'jotai'; import { drawerExpandedAtom } from '../../state/drawerExpandedAtom'; import { templateIdAtom } from '../../state/templateAtom'; import { resetDashboardTemplate } from '../../api/dashboard-templates'; import useCurrentUser from '../../hooks/useCurrentUser'; import { WarningModal } from '@patternfly/react-component-groups'; +import { Alert } from '@patternfly/react-core'; +import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent'; const Controls = () => { const [isOpen, setIsOpen] = React.useState(false); @@ -79,6 +91,14 @@ const Controls = () => { const Header = () => { const { currentUser } = useCurrentUser(); const userName = currentUser?.first_name && currentUser?.last_name ? ` ${currentUser.first_name} ${currentUser.last_name}` : currentUser?.username; + + const [isWizardOpen, setIsWizardOpen] = React.useState(false); + const [isConfirmed, setIsConfirmed] = React.useState(false); + const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); + const onToggle = () => { + setIsDropdownOpen(!isDropdownOpen); + }; + return ( @@ -98,6 +118,60 @@ const Header = () => { + + + + + +

You are qualified to opt into the workspace user access model for your organization.

+
+ + + ) => ( + } /> + )} + > + +
+ + } + customIcon={} + ouiaId="enable-workspaces-alert" + className="enable-workspaces-alert" + actionLinks={ + + + setIsWizardOpen(value)} + label="Enable workspaces" + ouiaId="enable-workspaces-switch" + id="enable-workspaces-switch" + /> + + + + Workspace hierarchy + + + + } + >
+ {isWizardOpen && ( + setIsWizardOpen(!isWizardOpen)} + afterSubmit={() => setIsConfirmed(true)} + /> + )} +
+
); };