chore: replaced gitea popover with dropdown menu

src/Designer/frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/ClonePopoverContent/ClonePopoverContent.module.css

@@ -5,6 +5,7 @@
 
 .link {
   margin-bottom: var(--fds-spacing-4);
+  padding: 0%;
 }
 
 .button {

src/Designer/frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/LocalChangesModal/LocalChangesActionButton/LocalChangesActionButton.module.css

@@ -6,3 +6,11 @@
   display: flex;
   align-items: center;
 }
+
+.link {
+  padding-left: 0;
+}
+
+.button {
+  width: fit-content;
+}

src/Designer/frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/LocalChangesModal/LocalChangesActionButton/LocalChangesActionButton.tsx

@@ -95,7 +95,7 @@ export const LocalChangesActionButton = ({
       case 'link': {
         return (
           <div className={classes.linkAndIconWrapper}>
-            <Link href={action.href}>
+            <Link href={action.href} className={classes.link}>
               {icon}
               {text}
             </Link>
@@ -105,6 +105,7 @@ export const LocalChangesActionButton = ({
       case 'button': {
         return (
           <StudioButton
+            className={classes.button}
             variant='secondary'
             data-color={color}
             onClick={action.onClick}

src/Designer/frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/LocalChangesModal/LocalChangesModal.module.css

@@ -0,0 +1,20 @@
+.dialog > :first-child {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: var(--ds-size-2);
+}
+
+.dialog > :first-child > button {
+  width: fit-content;
+}
+
+.headerBlock {
+  padding-left: var(--ds-size-1);
+}
+
+.headerBlock > h2 {
+  font-weight: bold;
+  font-size: var(--ds-font-size-3);
+  color: var(--ds-color-natural-text-default);
+}

src/Designer/frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/LocalChangesModal/LocalChangesModal.tsx

@@ -4,29 +4,20 @@ import { StudioButton, StudioDialog, StudioHeading } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { LocalChanges } from './LocalChanges/LocalChanges';
 import { MonitorIcon } from '@studio/icons';
+import classes from './LocalChangesModal.module.css';
 
-export type LocalChangesModalProps = {
-  triggerClassName?: string;
-};
-
-export const LocalChangesModal = ({ triggerClassName }: LocalChangesModalProps): ReactNode => {
+export const LocalChangesModal = (): ReactNode => {
   const { t } = useTranslation();
   const dialogRef = useRef<HTMLDialogElement>();
   const openDialog = () => dialogRef.current?.showModal();
 
   return (
     <>
-      <StudioButton
-        className={triggerClassName}
-        icon={<MonitorIcon />}
-        onClick={openDialog}
-        variant='tertiary'
-        data-size='sm'
-      >
+      <StudioButton icon={<MonitorIcon />} onClick={openDialog} variant='tertiary' data-size='sm'>
         {t('sync_header.local_changes')}
       </StudioButton>
-      <StudioDialog ref={dialogRef} closedby='any'>
-        <StudioDialog.Block>
+      <StudioDialog ref={dialogRef} closedby='any' className={classes.dialog}>
+        <StudioDialog.Block className={classes.headerBlock}>
           <StudioHeading level={2}>{t('sync_header.local_changes')}</StudioHeading>
         </StudioDialog.Block>
         <StudioDialog.Block>

src/Designer/frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/LocalChangesModal/index.ts

@@ -1,2 +1 @@
 export { LocalChangesModal } from './LocalChangesModal';
-export type { LocalChangesModalProps } from './LocalChangesModal';

src/Designer/frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/ThreeDotsMenu.test.tsx

@@ -69,7 +69,7 @@ const queryCloneButton = () => queryButton(cloneButtonName);
 const queryButton = (name: string) => screen.queryByRole('button', { name });
 
 const getRepositoryLink = () => getLink(repositoryLinkName);
-const getLink = (name: string) => screen.getByRole('link', { name });
+const getLink = (name: string) => screen.getByRole('button', { name });
 
 const getLocalChangesHeading = () => getHeading(localChangesHeading);
 const getHeading = (name: string) => screen.getByRole('heading', { name });

src/Designer/frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/ThreeDotsMenu.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
-import classes from './ThreeDotsMenu.module.css';
 import { TabsIcon, MenuElipsisVerticalIcon, GiteaIcon } from '@studio/icons';
 import { useTranslation } from 'react-i18next';
 import { repositoryPath } from 'app-shared/api/paths';
-import { StudioLinkButton, StudioList, StudioPopover } from '@studio/components';
+import { StudioPopover, StudioDropdown } from '@studio/components';
 import { LocalChangesModal } from './LocalChangesModal';
 import { ClonePopoverContent } from './ClonePopoverContent';
 import { useGiteaHeaderContext } from '../context/GiteaHeaderContext';
@@ -19,25 +18,24 @@ export const ThreeDotsMenu = ({ isClonePossible = false }: ThreeDotsMenuProps) =
 
   const toggleClonePopoverOpen = () => setClonePopoverOpen((oldValue) => !oldValue);
 
+  const handleClick = () => {
+    window.open(repositoryPath(owner, repoName), '_blank', 'noopener,noreferrer');
+  };
+
   return (
-    <StudioPopover.TriggerContext>
-      <StudioPopover.Trigger
-        icon={<MenuElipsisVerticalIcon />}
-        title={t('sync_header.gitea_menu')}
-        variant='tertiary'
-      />
-      <StudioPopover
-        data-color-scheme='light'
-        className={classes.popover}
-        onClose={() => setClonePopoverOpen(false)}
-      >
-        <StudioList.Root className={classes.menuItems}>
-          {isClonePossible && (
+    <StudioDropdown
+      icon={<MenuElipsisVerticalIcon title={t('sync_header.gitea_menu')} />}
+      triggerButtonAriaLabel={t('sync_header.gitea_menu')}
+      triggerButtonVariant='tertiary'
+      data-color-scheme='light'
+    >
+      <StudioDropdown.List>
+        {isClonePossible && (
+          <StudioDropdown.Item>
             <StudioPopover.TriggerContext>
               <StudioPopover.Trigger
                 onClick={toggleClonePopoverOpen}
                 variant='tertiary'
-                className={classes.menuButton}
                 icon={<TabsIcon />}
               >
                 {t('sync_header.clone')}
@@ -46,21 +44,17 @@ export const ThreeDotsMenu = ({ isClonePossible = false }: ThreeDotsMenuProps) =
                 {clonePopoverOpen && <ClonePopoverContent />}
               </StudioPopover>
             </StudioPopover.TriggerContext>
-          )}
-          <StudioLinkButton
-            className={classes.link}
-            data-color=''
-            data-size='sm'
-            href={repositoryPath(owner, repoName)}
-            icon={<GiteaIcon />}
-            rel='noopener noreferrer'
-            variant='tertiary'
-          >
+          </StudioDropdown.Item>
+        )}
+        <StudioDropdown.Item>
+          <StudioDropdown.Button icon={<GiteaIcon />} onClick={handleClick}>
             {t('sync_header.repository')}
-          </StudioLinkButton>
-          <LocalChangesModal triggerClassName={classes.menuButton} />
-        </StudioList.Root>
-      </StudioPopover>
-    </StudioPopover.TriggerContext>
+          </StudioDropdown.Button>
+        </StudioDropdown.Item>
+        <StudioDropdown.Item>
+          <LocalChangesModal />
+        </StudioDropdown.Item>
+      </StudioDropdown.List>
+    </StudioDropdown>
   );
 };