diff --git a/public/locales/en.json b/public/locales/en.json index d81e383e..77b0852e 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -93,6 +93,7 @@ "subtitleMessage": "Looks like this page is not opened inside of the Hyperspace Portal. Contact admins for help." }, "ShellBar": { + "betaButtonDescription": "This web app is currently in Beta, and may not ready for productive use. We're actively improving the experience and would love your feedback — your input helps shape the future of the app!", "signOutButton": "Sign Out" }, "CreateProjectDialog": { diff --git a/src/components/Core/ShellBar.module.css b/src/components/Core/ShellBar.module.css new file mode 100644 index 00000000..de04cea2 --- /dev/null +++ b/src/components/Core/ShellBar.module.css @@ -0,0 +1,51 @@ +.container { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.logoWrapper { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.logo { + height: 1.5rem; +} + +.logoText { + font-weight: bold; + font-size: 1rem; + color: var(--sapTextColor); +} + +.betaButton { + background-color: #FFF3CD; + color: #856404; + padding: 4px 10px; + border-radius: 12px; + border: 1px solid #FFEB99; + font-weight: bold; + font-size: 0.75rem; + height: 1.75rem; + line-height: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.betaContent { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.betaIcon { + font-size: 1rem; + color: #0A6ED1; +} + +.betaText { + font-size: 0.875rem; +} diff --git a/src/components/Core/ShellBar.tsx b/src/components/Core/ShellBar.tsx index e8912880..61bb4155 100644 --- a/src/components/Core/ShellBar.tsx +++ b/src/components/Core/ShellBar.tsx @@ -1,5 +1,8 @@ import { Avatar, + Button, + ButtonDomRef, + Icon, List, ListItemStandard, Popover, @@ -9,16 +12,21 @@ import { Ui5CustomEvent, } from '@ui5/webcomponents-react'; import { useAuth } from 'react-oidc-context'; -import { RefObject, useRef, useState } from 'react'; +import { RefObject, useEffect, useRef, useState } from 'react'; import { ShellBarProfileClickEventDetail } from '@ui5/webcomponents-fiori/dist/ShellBar.js'; import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js'; import { useTranslation } from 'react-i18next'; import { generateInitialsForEmail } from '../Helper/GenerateInitialsForEmail'; +import styles from './ShellBar.module.css'; +import { ThemingParameters } from '@ui5/webcomponents-react-base'; export function ShellBarComponent() { const auth = useAuth(); const profilePopoverRef = useRef(null); + const betaPopoverRef = useRef(null); const [profilePopoverOpen, setProfilePopoverOpen] = useState(false); + const [betaPopoverOpen, setBetaPopoverOpen] = useState(false); + const betaButtonRef = useRef(null); const onProfileClick = ( e: Ui5CustomEvent, @@ -27,24 +35,65 @@ export function ShellBarComponent() { setProfilePopoverOpen(!profilePopoverOpen); }; + const onBetaClick = () => { + if (betaButtonRef.current) { + betaPopoverRef.current!.opener = betaButtonRef.current; + setBetaPopoverOpen(!betaPopoverOpen); + } + }; + + useEffect(() => { + const shellbar = document.querySelector('ui5-shellbar'); + const el = shellbar?.shadowRoot?.querySelector( + '.ui5-shellbar-overflow-container-left', + ); + + if (el) { + (el as HTMLElement).style.backgroundColor = 'red'; + } + }, []); + return ( <> } - primaryTitle="MCP" + className={styles.TestShellbar} profile={ } + startButton={ +
+
+ MCP + MCP +
+ +
+ } onProfileClick={onProfileClick} /> + setProfilePopoverOpen(b)} + setOpen={setProfilePopoverOpen} popoverRef={profilePopoverRef} /> + ); } @@ -62,28 +111,55 @@ const ProfilePopover = ({ const { t } = useTranslation(); return ( - <> - { - setOpen(false); + setOpen(false)} + > + + { + setOpen(false); + auth.removeUser(); + }} + > + {t('ShellBar.signOutButton')} + + + + ); +}; + +const BetaPopover = ({ + open, + setOpen, + popoverRef, +}: { + open: boolean; + setOpen: (arg0: boolean) => void; + popoverRef: RefObject; +}) => { + const { t } = useTranslation(); + + return ( + setOpen(false)} + > +
- - { - setOpen(false); - auth.removeUser(); - }} - > - {t('ShellBar.signOutButton')} - - - - + {t('ShellBar.betaButtonDescription')} +
+
); };