From e4b3cb70d1423f5874cc7f83649ef6bcd650728f Mon Sep 17 00:00:00 2001
From: Zein Sleiman <zsleiman@redhat.com>
Date: Tue, 22 Apr 2025 10:00:06 -0500
Subject: [PATCH 1/2] feat: add enable workspace banner

---
 src/Components/Header/Header.scss |  4 ++
 src/Components/Header/Header.tsx  | 65 ++++++++++++++++++++++++++++++-
 2 files changed, 68 insertions(+), 1 deletion(-)

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..ec09a81 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -1,25 +1,36 @@
 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';
 
 const Controls = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -79,6 +90,13 @@ 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<boolean>(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState<boolean>(false);
+  const onToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
   return (
     <PageSection hasBodyWrapper={false} className="widg-c-page__main-section--header pf-v6-u-p-lg pf-v6-u-p-r-0-on-sm">
       <Flex className="widg-l-flex--header" direction={{ default: 'column', lg: 'row' }}>
@@ -98,6 +116,51 @@ const Header = () => {
           </Toolbar>
         </FlexItem>
       </Flex>
+      <Flex direction={{ default: 'column' }}>
+        <FlexItem>
+          <Alert
+            title={
+              <>
+                <Split>
+                  <SplitItem>
+                    <h1>You are qualified to opt into the workspace user access model for your organization.</h1>
+                  </SplitItem>
+                  <SplitItem isFilled></SplitItem>
+                  <SplitItem>
+                    <Dropdown
+                      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                        <MenuToggle ref={toggleRef} isExpanded={isDropdownOpen} onClick={onToggle} variant="plain" icon={<EllipsisVIcon />} />
+                      )}
+                    ></Dropdown>
+                  </SplitItem>
+                </Split>
+              </>
+            }
+            customIcon={<UsersIcon />}
+            ouiaId="CustomAlert"
+            className="enable-workspaces-alert"
+            actionLinks={
+              <Flex>
+                <FlexItem>
+                  <Switch
+                    className="pf-v6-u-mt-xs"
+                    isChecked={isWizardOpen}
+                    onChange={(_e, value) => setIsWizardOpen(value)}
+                    label="Enable workspaces"
+                    ouiaId="enable-workspaces-switch"
+                    id="enable-workspaces-switch"
+                  />
+                </FlexItem>
+                <FlexItem>
+                  <AlertActionLink component="a" href="/iam/user-access/workspaces">
+                    Workspace hierarchy
+                  </AlertActionLink>
+                </FlexItem>
+              </Flex>
+            }
+          ></Alert>
+        </FlexItem>
+      </Flex>
     </PageSection>
   );
 };

From d7bcf2fe72acd33014f2a473b48e8eac55d723d6 Mon Sep 17 00:00:00 2001
From: Zein Sleiman <zsleiman@redhat.com>
Date: Wed, 30 Apr 2025 09:23:18 -0500
Subject: [PATCH 2/2] fix(banner): add workspace wizard to banner

---
 src/Components/Header/Header.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index ec09a81..03644fb 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -31,6 +31,7 @@ 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);
@@ -92,6 +93,7 @@ const Header = () => {
   const userName = currentUser?.first_name && currentUser?.last_name ? ` ${currentUser.first_name} ${currentUser.last_name}` : currentUser?.username;
 
   const [isWizardOpen, setIsWizardOpen] = React.useState<boolean>(false);
+  const [isConfirmed, setIsConfirmed] = React.useState<boolean>(false);
   const [isDropdownOpen, setIsDropdownOpen] = React.useState<boolean>(false);
   const onToggle = () => {
     setIsDropdownOpen(!isDropdownOpen);
@@ -137,7 +139,7 @@ const Header = () => {
               </>
             }
             customIcon={<UsersIcon />}
-            ouiaId="CustomAlert"
+            ouiaId="enable-workspaces-alert"
             className="enable-workspaces-alert"
             actionLinks={
               <Flex>
@@ -159,6 +161,15 @@ const Header = () => {
               </Flex>
             }
           ></Alert>
+          {isWizardOpen && (
+            <AsyncComponent
+              appName="rbac"
+              module="./CreateWorkspaceWizardModule"
+              scope="rbac"
+              onCancel={() => setIsWizardOpen(!isWizardOpen)}
+              afterSubmit={() => setIsConfirmed(true)}
+            />
+          )}
         </FlexItem>
       </Flex>
     </PageSection>