moved beta button

Author: enrico-kaack-comp

src/components/Core/BetaButton.tsx

@@ -0,0 +1,61 @@
+import { ButtonDomRef, Button, Icon, PopoverDomRef, Popover, Text } from "@ui5/webcomponents-react";
+import { useState, useRef, RefObject } from "react";
+import styles from './ShellBar.module.css';
+import { useTranslation } from "react-i18next";
+import PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
+import { ThemingParameters } from '@ui5/webcomponents-react-base';
+
+
+export function BetaButton() {
+  const [betaPopoverOpen, setBetaPopoverOpen] = useState(false);
+  const betaButtonRef = useRef<ButtonDomRef>(null);
+  const betaPopoverRef = useRef<PopoverDomRef>(null);
+  const { t } = useTranslation();
+
+
+  const onBetaClick = () => {
+    if (betaButtonRef.current) {
+      betaPopoverRef.current!.opener = betaButtonRef.current;
+      setBetaPopoverOpen(!betaPopoverOpen);
+    }
+  };
+
+  return (
+    <>
+      <Button ref={betaButtonRef} className={styles.betaButton} onClick={onBetaClick}>
+        <span className={styles.betaContent}>
+          <Icon name="information" className={styles.betaIcon} />
+          <span className={styles.betaText}>{t('ShellBar.betaButton')}</span>
+        </span>
+        <BetaPopover open={betaPopoverOpen} setOpen={setBetaPopoverOpen} popoverRef={betaPopoverRef} />
+      </Button>
+    </>
+  )
+}
+
+const BetaPopover = ({
+  open,
+  setOpen,
+  popoverRef,
+}: {
+  open: boolean;
+  setOpen: (arg0: boolean) => void;
+  popoverRef: RefObject<PopoverDomRef | null>;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Popover ref={popoverRef} placement={PopoverPlacement.Bottom} open={open} onClose={() => setOpen(false)}>
+      <Text
+        style={{
+          padding: '1rem',
+          maxWidth: '250px',
+          fontFamily: ThemingParameters.sapFontFamily,
+        }}
+      >
+        {t('ShellBar.betaButtonDescription')}
+      </Text>
+    </Popover>
+  );
+};
+

src/components/Core/IntelligentBreadcrumbs.tsx

@@ -5,6 +5,7 @@ import useLuigiNavigate from '../Shared/useLuigiNavigate.tsx';
 import LandscapeLabel from './LandscapeLabel.tsx';
 import { useTranslation } from 'react-i18next';
 import { FeedbackButton } from './FeedbackButton.tsx';
+import { BetaButton } from './BetaButton.tsx';
 
 const PREFIX = '/mcp';
 
@@ -67,6 +68,7 @@ export function BreadCrumbFeedbackHeader() {
       alignItems={FlexBoxAlignItems.Center}
     >
       <IntelligentBreadcrumbs />
+      <BetaButton />
       <FeedbackButton />
     </FlexBox>
   )

src/components/Core/ShellBar.tsx

@@ -1,8 +1,5 @@
 import {
   Avatar,
-  Button,
-  ButtonDomRef,
-  Icon,
   List,
   ListItemStandard,
   Popover,
@@ -18,30 +15,19 @@ import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js'
 import { useTranslation } from 'react-i18next';
 import { generateInitialsForEmail } from '../Helper/generateInitialsForEmail.ts';
 import styles from './ShellBar.module.css';
-import { ThemingParameters } from '@ui5/webcomponents-react-base';
 
 
 export function ShellBarComponent() {
   const auth = useAuthOnboarding();
   const profilePopoverRef = useRef<PopoverDomRef>(null);
-  const betaPopoverRef = useRef<PopoverDomRef>(null);
   const [profilePopoverOpen, setProfilePopoverOpen] = useState(false);
-  const [betaPopoverOpen, setBetaPopoverOpen] = useState(false);
-  const betaButtonRef = useRef<ButtonDomRef>(null);
 
-  const { t } = useTranslation();
 
   const onProfileClick = (e: Ui5CustomEvent<ShellBarDomRef, ShellBarProfileClickEventDetail>) => {
     profilePopoverRef.current!.opener = e.detail.targetRef;
     setProfilePopoverOpen(!profilePopoverOpen);
   };
 
-  const onBetaClick = () => {
-    if (betaButtonRef.current) {
-      betaPopoverRef.current!.opener = betaButtonRef.current;
-      setBetaPopoverOpen(!betaPopoverOpen);
-    }
-  };
 
   useEffect(() => {
     const shellbar = document.querySelector('ui5-shellbar');
@@ -64,20 +50,13 @@ export function ShellBarComponent() {
               <img src="/logo.png" alt="MCP" className={styles.logo} />
               <span className={styles.logoText}>MCP</span>
             </div>
-            <Button ref={betaButtonRef} className={styles.betaButton} onClick={onBetaClick}>
-              <span className={styles.betaContent}>
-                <Icon name="information" className={styles.betaIcon} />
-                <span className={styles.betaText}>{t('ShellBar.betaButton')}</span>
-              </span>
-            </Button>
           </div>
         }
         onProfileClick={onProfileClick}
       >
       </ShellBar>
 
       <ProfilePopover open={profilePopoverOpen} setOpen={setProfilePopoverOpen} popoverRef={profilePopoverRef} />
-      <BetaPopover open={betaPopoverOpen} setOpen={setBetaPopoverOpen} popoverRef={betaPopoverRef} />
 
     </>
   );
@@ -118,29 +97,3 @@ const ProfilePopover = ({
   );
 };
 
-const BetaPopover = ({
-  open,
-  setOpen,
-  popoverRef,
-}: {
-  open: boolean;
-  setOpen: (arg0: boolean) => void;
-  popoverRef: RefObject<PopoverDomRef | null>;
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <Popover ref={popoverRef} placement={PopoverPlacement.Bottom} open={open} onClose={() => setOpen(false)}>
-      <div
-        style={{
-          padding: '1rem',
-          maxWidth: '250px',
-          fontFamily: ThemingParameters.sapFontFamily,
-        }}
-      >
-        {t('ShellBar.betaButtonDescription')}
-      </div>
-    </Popover>
-  );
-};
-