feat(suite): add labeling export to zip in debug settings

packages/suite/src/actions/suite/metadataActions.ts

@@ -3,6 +3,8 @@ import { createAction } from '@reduxjs/toolkit';
 import { selectDevices } from '@suite-common/wallet-core';
 import { Account } from '@suite-common/wallet-types';
 import { StaticSessionId } from '@trezor/connect';
+import { createZip } from '@trezor/utils';
+import { notificationsActions } from '@suite-common/toast-notifications';
 
 import { METADATA, METADATA_LABELING } from 'src/actions/suite/constants';
 import { Dispatch, GetState } from 'src/types/suite';
@@ -18,6 +20,8 @@ import * as metadataUtils from 'src/utils/suite/metadata';
 import { selectSelectedProviderForLabels } from 'src/reducers/suite/metadataReducer';
 import type { AbstractMetadataProvider, PasswordManagerState } from 'src/types/suite/metadata';
 
+import { getProviderInstance } from './metadataProviderActions';
+
 export type MetadataAction =
     | { type: typeof METADATA.ENABLE }
     | { type: typeof METADATA.DISABLE }
@@ -165,3 +169,55 @@ export const encryptAndSaveMetadata = async ({
 
     return providerInstance.setFileContent(fileName, encrypted);
 };
+
+export const exportMetadataToLocalFile = () => async (dispatch: Dispatch, getState: GetState) => {
+    const providerInstance = dispatch(
+        getProviderInstance({
+            clientId: selectSelectedProviderForLabels(getState())!.clientId,
+            dataType: 'labels',
+        }),
+    );
+
+    if (!providerInstance) return;
+
+    const filesListResult = await providerInstance.getFilesList();
+
+    if (!filesListResult.success || !filesListResult.payload?.length) {
+        dispatch(
+            notificationsActions.addToast({ type: 'error', error: 'Exporting labels failed' }),
+        );
+
+        return;
+    }
+
+    const files = filesListResult.payload;
+
+    return Promise.all(
+        files.map(file => {
+            return providerInstance.getFileContent(file).then(result => {
+                if (!result.success) throw new Error(result.error);
+
+                return { name: file, content: result.payload };
+            });
+        }),
+    )
+        .then(filesContent => {
+            const zipBlob = createZip(filesContent);
+            // Trigger download
+            const a = document.createElement('a');
+            a.href = URL.createObjectURL(zipBlob);
+            a.download = 'archive.zip';
+            a.style.display = 'none';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(a.href);
+        })
+        .catch(_err => {
+            dispatch(
+                notificationsActions.addToast({ type: 'error', error: 'Exporting labels failed' }),
+            );
+
+            return;
+        });
+};

packages/suite/src/views/settings/SettingsDebug/Metadata.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+import { Button } from '@trezor/components';
+
+import { ActionColumn, SectionItem, TextColumn } from 'src/components/suite';
+import { useDispatch } from 'src/hooks/suite';
+import { exportMetadataToLocalFile } from 'src/actions/suite/metadataActions';
+
+export const Metadata = () => {
+    const dispatch = useDispatch();
+    const [exporting, setExporting] = useState(false);
+
+    const onClick = () => {
+        setExporting(true);
+        dispatch(exportMetadataToLocalFile()).finally(() => {
+            setExporting(false);
+        });
+    };
+
+    return (
+        <SectionItem data-testid="@settings/debug/metadata">
+            <TextColumn
+                title="Export"
+                description="Export labeling files to your computer. You may use this to transfer your labeling files from your Google drive account to your Dropbox account."
+            />
+            <ActionColumn>
+                <Button onClick={onClick} isDisabled={exporting} isLoading={exporting}>
+                    Export
+                </Button>
+            </ActionColumn>
+        </SectionItem>
+    );
+};

packages/suite/src/views/settings/SettingsDebug/SettingsDebug.tsx

@@ -21,6 +21,7 @@ import { TriggerHighlight } from './TriggerHighlight';
 import { Backends } from './Backends';
 import { PreField } from './PreField';
 import { Tor } from './Tor';
+import { Metadata } from './Metadata';
 
 export const SettingsDebug = () => {
     const flags = useSelector(selectSuiteFlags);
@@ -76,6 +77,9 @@ export const SettingsDebug = () => {
             <SettingsSection title="Flags JSON">
                 <PreField>{JSON.stringify(flags)}</PreField>
             </SettingsSection>
+            <SettingsSection title="Metadata">
+                <Metadata />
+            </SettingsSection>
         </SettingsLayout>
     );
 };