Fix Bug 69727 - Settings: Backup. Fixed backup providers

packages/client/src/components/dialogs/ConnectDialog/index.js

@@ -170,7 +170,7 @@ const PureConnectDialogContainer = (props) => {
         provider_id,
       )
         .then(async () => {
-          await setThirdPartyAccountsInfo();
+          await setThirdPartyAccountsInfo(t);
         })
         .catch((err) => {
           toastr.error(err);

packages/client/src/pages/PortalSettings/categories/data-management/backup/common-container/DirectThirdPartyConnection.js

@@ -83,7 +83,7 @@ const DirectThirdPartyConnection = (props) => {
 
   const onSetSettings = async () => {
     try {
-      await setThirdPartyAccountsInfo();
+      await setThirdPartyAccountsInfo(t);
 
       setState({
         isLoading: false,
@@ -157,7 +157,7 @@ const DirectThirdPartyConnection = (props) => {
         provider_id,
       );
 
-      await setThirdPartyAccountsInfo();
+      await setThirdPartyAccountsInfo(t);
     } catch (e) {
       toastr.error(e);
     }
@@ -167,7 +167,10 @@ const DirectThirdPartyConnection = (props) => {
 
   const onSelectAccount = (options) => {
     const key = options.key;
-    setSelectedThirdPartyAccount({ ...accounts[+key] });
+
+    const account = accounts.find((t) => t.key === key);
+
+    setSelectedThirdPartyAccount(account);
   };
 
   const onDisconnect = () => {
@@ -187,7 +190,7 @@ const DirectThirdPartyConnection = (props) => {
         key: "Disconnect-settings",
         label: t("Common:Disconnect"),
         onClick: onDisconnect,
-        disabled: selectedThirdPartyAccount?.connected ? false : true,
+        disabled: selectedThirdPartyAccount?.storageIsConnected ? false : true,
         icon: AccessNoneReactSvgUrl,
       },
     ];

packages/client/src/store/BackupStore.js

@@ -37,13 +37,15 @@ import { combineUrl } from "@docspace/shared/utils/combineUrl";
 import config from "PACKAGE_FILE";
 import {
   getSettingsThirdParty,
-  getThirdPartyCapabilities,
   uploadBackup,
 } from "@docspace/shared/api/files";
 import i18n from "../i18n";
+import { connectedCloudsTypeTitleTranslation } from "../helpers/filesUtils.js";
+
 const { EveryDayType, EveryWeekType } = AutoBackupPeriod;
 
 class BackupStore {
+  thirdPartyStore = null;
   restoreResource = null;
 
   backupSchedule = {};
@@ -100,11 +102,12 @@ class BackupStore {
   selectedThirdPartyAccount = null;
   connectedThirdPartyAccount = null;
   accounts = [];
-  capabilities = [];
   connectedAccount = [];
 
-  constructor() {
+  constructor(thirdPartyStore) {
     makeAutoObservable(this);
+
+    this.thirdPartyStore = thirdPartyStore;
   }
 
   setConnectedThirdPartyAccount = (account) => {
@@ -195,37 +198,20 @@ class BackupStore {
     return false;
   }
 
-  setThirdPartyAccountsInfo = async () => {
-    const [connectedAccount, capabilities] = await Promise.all([
+  setThirdPartyAccountsInfo = async (t) => {
+    const [connectedAccount, providers] = await Promise.all([
       getSettingsThirdParty(),
-      getThirdPartyCapabilities(),
+      this.thirdPartyStore.fetchConnectingStorages(),
     ]);
 
-    this.setCapabilities(capabilities);
     this.setConnectedThirdPartyAccount(connectedAccount);
 
-    const providerNames = [
-      ["GoogleDrive", i18n.t("Translations:TypeTitleGoogle")],
-      ["Box", i18n.t("Translations:TypeTitleBoxNet")],
-      ["DropboxV2", i18n.t("Translations:TypeTitleDropBox")],
-      ["SharePoint", i18n.t("Translations:TypeTitleSharePoint")],
-      ["OneDrive", i18n.t("Translations:TypeTitleSkyDrive")],
-      ["WebDav", "Nextcloud"],
-      ["WebDav", "ownCloud"],
-      ["kDrive", i18n.t("Translations:TypeTitlekDrive")],
-      ["Yandex", i18n.t("Translations:TypeTitleYandex")],
-      ["WebDav", i18n.t("Translations:TypeTitleWebDav")],
-    ];
-
     let accounts = [],
       selectedAccount = {};
     let index = 0;
-    providerNames.map((item) => {
-      const { account, isConnected } = this.getThirdPartyAccount(
-        item[0],
-        item[1],
-        index,
-      );
+
+    providers.map((item) => {
+      const { account, isConnected } = this.getThirdPartyAccount(item, t);
 
       if (!account) return;
 
@@ -248,28 +234,23 @@ class BackupStore {
     );
   };
 
-  getThirdPartyAccount = (providerKey, serviceTitle, index) => {
-    const accountIndex =
-      this.capabilities &&
-      this.capabilities.findIndex((x) => x[0] === providerKey);
-
-    if (accountIndex === -1) return { account: null, isConnected: false };
+  getThirdPartyAccount = (provider, t) => {
+    const serviceTitle = connectedCloudsTypeTitleTranslation(provider.name, t);
 
     const isConnected =
       this.connectedThirdPartyAccount?.providerKey === "WebDav"
         ? serviceTitle === this.connectedThirdPartyAccount?.title
-        : this.capabilities[accountIndex][0] ===
-          this.connectedThirdPartyAccount?.providerKey;
+        : provider.key === this.connectedThirdPartyAccount?.providerKey;
 
     const account = {
-      key: index.toString(),
+      key: provider.name,
       label: serviceTitle,
       title: serviceTitle,
-      provider_key: this.capabilities[accountIndex][0],
-      ...(this.capabilities[accountIndex][1] && {
-        provider_link: this.capabilities[accountIndex][1],
+      provider_key: provider.key,
+      ...(provider.clientId && {
+        provider_link: provider.clientId,
       }),
-      connected: isConnected,
+      storageIsConnected: isConnected,
       ...(isConnected && {
         provider_id: this.connectedThirdPartyAccount?.providerId,
         id: this.connectedThirdPartyAccount.id,
@@ -279,9 +260,6 @@ class BackupStore {
     return { account, isConnected };
   };
 
-  setCapabilities = (capabilities) => {
-    this.capabilities = capabilities;
-  };
   setThirdPartyAccounts = (accounts) => {
     this.accounts = accounts;
   };

packages/client/src/store/ThirdPartyStore.js

@@ -84,7 +84,10 @@ class ThirdPartyStore {
       oauthHref: storage.redirectUrl,
       category: storage.name,
       requiredConnectionUrl: storage.requiredConnectionUrl,
+      clientId: storage.clientId,
     }));
+
+    return res;
   };
 
   saveThirdParty = (

packages/client/src/store/index.js

@@ -98,7 +98,7 @@ const paymentStore = new PaymentStore(
 );
 const wizardStore = new WizardStore();
 const confirmStore = new ConfirmStore();
-const backupStore = new BackupStore();
+const backupStore = new BackupStore(thirdPartyStore);
 const commonStore = new CommonStore(settingsStore);
 
 const ssoStore = new SsoFormStore();