2623 20 add new sync provider change to modal

packages/tokens-studio-for-figma/src/app/components/SyncSettings.test.tsx

@@ -111,7 +111,7 @@ describe('ConfirmDialog', () => {
     );
 
     await act(async () => {
-      const trigger = await result.getByTestId('add-storage-item-dropdown');
+      const trigger = await result.getByTestId('add-storage-item-button');
       trigger?.focus();
       await userEvent.keyboard('[Enter]');
     });

packages/tokens-studio-for-figma/src/app/components/SyncSettings.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import {
-  DropdownMenu, Heading, Button, Box, Stack,
+  Heading, Button, Box, Stack, Text, Dialog,
 } from '@tokens-studio/ui';
 import { track } from '@/utils/analytics';
 import StorageItem from './StorageItem';
@@ -16,6 +16,7 @@ import useRemoteTokens from '../store/remoteTokens';
 import { StorageTypeCredentials } from '@/types/StorageType';
 import LocalStorageItem from './LocalStorageItem';
 import { getProviderIcon } from '@/utils/getProviderIcon';
+import { StyledBetaBadge } from './SecondScreen';
 
 const SyncSettings = () => {
   const localApiState = useSelector(localApiStateSelector);
@@ -44,8 +45,9 @@ const SyncSettings = () => {
       type: StorageProviderType.ADO,
     },
     {
-      text: 'BitBucket (Beta)',
+      text: 'BitBucket',
       type: StorageProviderType.BITBUCKET,
+      beta: true,
     },
     {
       text: 'Supernova',
@@ -56,14 +58,17 @@ const SyncSettings = () => {
       type: StorageProviderType.GENERIC_VERSIONED_STORAGE,
     },
     {
-      text: 'Tokens Studio (Beta)',
+      text: 'Tokens Studio',
       type: StorageProviderType.TOKENS_STUDIO,
+      beta: true,
     },
   ], [t]);
 
   const apiProviders = useSelector(apiProvidersSelector);
   const dispatch = useDispatch<Dispatch>();
 
+  const [open, setOpen] = React.useState(false);
+
   const { fetchBranches } = useRemoteTokens();
 
   const [editStorageItemModalVisible, setShowEditStorageModalVisible] = React.useState(Boolean(localApiState.new));
@@ -97,6 +102,7 @@ const SyncSettings = () => {
 
   const handleProviderClick = React.useCallback(
     (provider: StorageProviderType) => () => {
+      setOpen(false);
       setStorageProvider(provider);
       handleShowAddCredentials(provider);
     },
@@ -131,7 +137,50 @@ const SyncSettings = () => {
       )}
       <Box css={{ padding: '0 $4' }}>
         <Stack gap={4} direction="column" align="start">
-          <Heading size="medium">{t('syncProviders')}</Heading>
+          <Stack direction="row" justify="between" align="center" css={{ width: '100%' }}>
+            <Heading size="medium">{t('syncProviders')}</Heading>
+            <Dialog modal open={open} onOpenChange={setOpen}>
+              <Dialog.Trigger asChild>
+                <Button variant="secondary" size="small" data-testid="add-storage-item-button">
+                  {t('addNewSyncProvider')}
+                </Button>
+              </Dialog.Trigger>
+              <Dialog.Portal>
+                <Dialog.Overlay />
+                <Dialog.Content className="content scroll-container">
+                  <Heading>{t('addNewSyncProvider')}</Heading>
+
+                  <Stack direction="column" gap={4}>
+                    {
+                    providers.map((provider) => (
+                      <Stack direction="row" justify="between" align="center">
+                        <Stack direction="column">
+                          <Box css={{
+                            color: '$fgDefault', display: 'inline-flex', gap: '$2', alignItems: 'center',
+                          }}
+                          >
+                            <Box css={{ color: '$fgSubtle' }}>{getProviderIcon(provider.type)}</Box>
+                            {provider.text}
+                            {provider.beta && <StyledBetaBadge>BETA</StyledBetaBadge>}
+                          </Box>
+                        </Stack>
+                        <Button
+                          key={provider.type}
+                          onClick={handleProviderClick(provider.type)}
+                          variant="secondary"
+                          size="small"
+                          data-testid={`add-${provider.text}-credential`}
+                        >
+                          {t('choose')}
+                        </Button>
+                      </Stack>
+                    ))
+                  }
+                  </Stack>
+                </Dialog.Content>
+              </Dialog.Portal>
+            </Dialog>
+          </Stack>
           <Stack direction="column" gap={2} width="full" align="start">
             <LocalStorageItem />
             {apiProviders.length > 0 && apiProviders.map((item) => (
@@ -142,28 +191,6 @@ const SyncSettings = () => {
               />
             ))}
           </Stack>
-          <DropdownMenu>
-            <DropdownMenu.Trigger asChild data-testid="add-storage-item-dropdown">
-              <Button asDropdown>
-                {t('addNewSyncProvider')}
-              </Button>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Portal>
-              <DropdownMenu.Content
-                side="bottom"
-                className="content scroll-container"
-              >
-                {
-                providers.map((provider) => (
-                  <DropdownMenu.Item key={provider.type} onSelect={handleProviderClick(provider.type)} css={{ display: 'flex', gap: '$3' }} data-testid={`add-${provider.text}-credential`}>
-                    <Box css={{ color: '$fgSubtle' }}>{getProviderIcon(provider.type)}</Box>
-                    {provider.text}
-                  </DropdownMenu.Item>
-                ))
-              }
-              </DropdownMenu.Content>
-            </DropdownMenu.Portal>
-          </DropdownMenu>
         </Stack>
       </Box>
     </Box>

packages/tokens-studio-for-figma/src/i18n/lang/en/storage.json

@@ -3,6 +3,7 @@
   "youCanAlwaysGoBack": "You can always go back to remote storage.",
   "addNewSyncProvider": "Add new sync provider",
   "editCredentials": "Edit sync provider credentials",
+  "choose": "Choose",
   "name": "Name",
   "pat": "Personal Access Token",
   "gitExplained": "Read your tokens that are stored on your repository, close to your code.",

packages/tokens-studio-for-figma/src/i18n/lang/es/storage.json

@@ -3,6 +3,7 @@
   "youCanAlwaysGoBack": "Siempre puedes volver al almacenamiento remoto.",
   "addNewSyncProvider": "Agregar nuevo proveedor de sincronización",
   "editCredentials": "Editar credenciales del proveedor de sincronización",
+  "choose": "Elegir",
   "name": "Nombre",
   "pat": "Token de acceso personal",
   "gitExplained": "Lea sus tokens que están almacenados en su repositorio, cerca de su código.",

packages/tokens-studio-for-figma/src/i18n/lang/fr/storage.json

@@ -3,6 +3,7 @@
   "youCanAlwaysGoBack": "Vous pouvez toujours revenir au stockage distant.",
   "addNewSyncProvider": "Ajouter un nouveau fournisseur de synchronisation",
   "editCredentials": "Modifier les informations d'identification du fournisseur de synchronisation",
+  "choose": "Choisir",
   "name": "Nom",
   "pat": "Jeton d'accès personnel",
   "gitExplained": "Lisez vos jetons stockés sur votre référentiel, à proximité de votre code.",

packages/tokens-studio-for-figma/src/i18n/lang/hi/storage.json

@@ -3,6 +3,7 @@
   "youCanAlwaysGoBack": "आप कभी भी रिमोट स्टोरेज पर वापस जा सकते हैं।",
   "addNewSyncProvider": "नया सिंक प्रदाता जोड़ें",
   "editCredentials": "सिंक प्रदाता क्रेडेंशियल संपादित करें",
+  "choose": "चुनें",
   "name": "नाम",
   "pat": "व्यक्तिगत पहुँच टोकन",
   "gitExplained": "अपने टोकन पढ़ें जो आपके रिपॉजिटरी पर, आपके कोड के पास संग्रहीत हैं।",

packages/tokens-studio-for-figma/src/i18n/lang/nl/storage.json

@@ -3,6 +3,7 @@
   "youCanAlwaysGoBack": "U kunt altijd teruggaan naar externe opslag.",
   "addNewSyncProvider": "Nieuwe synchronisatieprovider toevoegen",
   "editCredentials": "Bewerk de inloggegevens van de synchronisatieprovider",
+  "choose": "Kiezen",
   "name": "Naam",
   "pat": "Persoonlijk toegangstoken",
   "gitExplained": "Lees uw tokens die in uw repository zijn opgeslagen, dichtbij uw code.",

packages/tokens-studio-for-figma/src/i18n/lang/zh/storage.json

@@ -3,6 +3,7 @@
   "youCanAlwaysGoBack": "您可以随时返回远程存储。",
   "addNewSyncProvider": "添加新的同步提供商",
   "editCredentials": "编辑同步提供商凭据",
+  "choose": "选择",
   "name": "姓名",
   "pat": "个人访问令牌",
   "gitExplained": "读取存储在存储库中靠近代码的令牌。",