Web: Client: Connecting storage: integrated connecting storages data from API

2024-04-25 14:06:20 +05:00 · 2024-04-25 14:06:20 +05:00 · 0b349e32d7
commit 0b349e32d7
parent 70fad8a173
7 changed files with 84 additions and 172 deletions
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js
@ -89,35 +89,6 @@ const StyledDropDown = styled(DropDown)`
      max-height: 7px !important;
    }
  }
-
-  .storage-unavailable {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-direction: row-reverse;
-
-    .drop-down-item_icon {
-      svg {
-        path[fill] {
-          fill: ${(props) => props.theme.dropDownItem.icon.disableColor};
-        }
-
-        path[stroke] {
-          stroke: ${(props) => props.theme.dropDownItem.icon.disableColor};
-        }
-
-        circle[fill] {
-          fill: ${(props) => props.theme.dropDownItem.icon.disableColor};
-        }
-
-        rect[fill] {
-          fill: ${(props) => props.theme.dropDownItem.icon.disableColor};
-        }
-      }
-    }
-
-    color: ${(props) => props.theme.dropDownItem.disableColor};
-  }
 `;

 StyledDropDown.defaultProps = { theme: Base };
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js
@ -60,6 +60,34 @@ const StyledStorageLocation = styled.div`
    flex-direction: row;
    gap: 8px;
  }
+
+  .storage-unavailable {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+
+    .drop-down-item_icon {
+      svg {
+        path[fill] {
+          fill: ${(props) => props.theme.dropDownItem.disableColor};
+        }
+
+        path[stroke] {
+          stroke: ${(props) => props.theme.dropDownItem.disableColor};
+        }
+
+        circle[fill] {
+          fill: ${(props) => props.theme.dropDownItem.disableColor};
+        }
+
+        rect[fill] {
+          fill: ${(props) => props.theme.dropDownItem.disableColor};
+        }
+      }
+    }
+
+    color: ${(props) => props.theme.dropDownItem.disableColor};
+  }
 `;

 StyledStorageLocation.defaultProps = { theme: Base };
@ -67,7 +95,7 @@ StyledStorageLocation.defaultProps = { theme: Base };
 const services = {
  GoogleDrive: "google",
  Box: "box",
-  DropboxV2: "dropbox",
+  Dropbox: "dropbox",
  OneDrive: "skydrive",
  Nextcloud: "nextcloud",
  kDrive: "kdrive",
@ -99,6 +127,14 @@ const ThirdPartyComboBox = ({

  isDisabled,
 }) => {
+  const deafultSelectedItem = {
+    key: "length",
+    label:
+      storageLocation?.provider?.title ||
+      t("ThirdPartyStorageComboBoxPlaceholder"),
+  };
+
+  const [selectedItem, setSelectedItem] = useState(deafultSelectedItem);

  const thirdparties = connectItems.map((item) => ({
    ...item,
@ -106,7 +142,6 @@ const ThirdPartyComboBox = ({
  }));

  const setStorageLocaiton = (thirparty, isConnected) => {
-    console.log(isConnected, thirparty)
    if (!isConnected) {
      window.open(
        `/portal-settings/integration/third-party-services?service=${services[thirparty.id]}`,
@ -121,8 +156,6 @@ const ThirdPartyComboBox = ({
    setRoomCreation(true);
    const provider = storageLocation.provider;

-    console.log(provider);
-
    if (storageLocation.provider.isOauth) {
      setIsOauthWindowOpen(true);
      const authModal = window.open(
@ -176,11 +209,16 @@ const ThirdPartyComboBox = ({
    setSaveThirdpartyResponse(null);
  }, [saveThirdpartyResponse]);

-  const options = thirdparties.map((item) => ({
-    label: item.title,
-    title: item.title,
-    key: item.id,
-  }));
+  const options = thirdparties
+    .sort((storage) => (storage.isConnected ? -1 : 1))
+    .map((item) => ({
+      label:
+        item.title + (item.isConnected ? "" : ` (${t("ActivationRequired")})`),
+      title: item.title,
+      key: item.id,
+      icon: item.isConnected ? undefined : ExternalLinkReactSvgUrl,
+      className: item.isConnected ? "" : "storage-unavailable",
+    }));

  const onSelect = (elem) => {
    const thirdparty = thirdparties.find((t) => {
@ -188,6 +226,9 @@ const ThirdPartyComboBox = ({
    });

    thirdparty && setStorageLocaiton(thirdparty, thirdparty.isConnected);
+    thirdparty.isConnected
+      ? setSelectedItem(elem)
+      : setSelectedItem(deafultSelectedItem);
  };

  return (
@ -195,12 +236,7 @@ const ThirdPartyComboBox = ({
      <div className="set_room_params-thirdparty">
        <ComboBox
          className="thirdparty-combobox"
-          selectedOption={{
-            key: "length",
-            label:
-              storageLocation?.provider?.title ||
-              t("ThirdPartyStorageComboBoxPlaceholder"),
-          }}
+          selectedOption={selectedItem}
          options={options}
          scaled
          withBackdrop={isMobile}
@ -230,48 +266,6 @@ const ThirdPartyComboBox = ({
          onClick={onShowService}
        />
      </div>
-
-
-      {/* <StyledDropDownWrapper
-        className="dropdown-content-wrapper"
-        ref={dropdownRef}
-      >
-        <StyledDropDown
-          className="dropdown-content"
-          open={isOpen}
-          forwardedRef={dropdownRef}
-          clickOutsideAction={toggleIsOpen}
-          maxHeight={isMobile() ? 158 : 382}
-          directionY={dropdownDirection}
-          marginTop={dropdownDirection === "bottom" ? "4px" : "-36px"}
-          hasItems={isOpen}
-        >
-          {thirdparties
-            .sort((a) => (a.isAvailable ? -1 : 1))
-            .map((thirdparty) => (
-              <DropDownItem
-                id={thirdparty.id}
-                className={`dropdown-item ${thirdparty.isAvailable ? "" : "storage-unavailable"} ${thirdparty.className ?? ""}`}
-                label={
-                  thirdparty.title +
-                  (thirdparty.isAvailable
-                    ? ""
-                    : ` (${t("ActivationRequired")})`)
-                }
-                key={thirdparty.id}
-                height={32}
-                heightTablet={32}
-                onClick={() =>
-                  setStorageLocaiton(thirdparty, thirdparty.isAvailable)
-                }
-                icon={
-                  !thirdparty.isAvailable ? ExternalLinkReactSvgUrl : undefined
-                }
-              />
-            ))}
-        </StyledDropDown>
-      </StyledDropDownWrapper> */}
-
    </StyledStorageLocation>
  );
 };
--- a/packages/client/src/store/ThirdPartyStore.js
+++ b/packages/client/src/store/ThirdPartyStore.js
@ -73,92 +73,17 @@ class ThirdPartyStore {
  };

  fetchConnectingStorages = async () => {
-    const storages = await new Promise((resolve, reject) => {
-      setTimeout(() => {
-        resolve(
-          [
-            {
-              id: "WebDav",
-              className: "storage_webdav",
-              providerKey: "WebDav",
-              isOauth: false,
-              oauthHref: "",
-              category: "WebDav",
-              isAvailable: true,
-              title: "WebDav",
-            },
-            {
-              id: "WebDav",
-              className: "storage_webdav",
-              providerKey: "WebDav",
-              isOauth: false,
-              oauthHref: "",
-              category: "ownCloud",
-              isAvailable: true,
-              title: "ownCloud",
-            },
-            {
-              id: "kDrive",
-              className: "storage_kdrive",
-              providerKey: "kDrive",
-              isOauth: false,
-              oauthHref: "",
-              isAvailable: true,
-              title: "kDrive",
-            },
-            {
-              id: "WebDav",
-              className: "storage_webdav",
-              providerKey: "WebDav",
-              isOauth: false,
-              oauthHref: "",
-              category: "Nextcloud",
-              isAvailable: true,
-              title: "Nextcloud",
-            },
-            {
-              id: "GoogleDrive",
-              className: "storage_googledrive",
-              providerKey: "GoogleDrive",
-              isOauth: false,
-              oauthHref: "",
-              isAvailable: false,
-              title: "Google Drive",
-            },
-            {
-              id: "Box",
-              className: "storage_box",
-              providerKey: "Box",
-              isOauth: false,
-              oauthHref: "",
-              isAvailable: false,
-              title: "Box",
-            },
-            {
-              id: "DropboxV2",
-              className: "storage_dropboxv2",
-              providerKey: "DropboxV2",
-              isOauth: false,
-              oauthHref: "",
-              isAvailable: false,
-              title: "Dropbox",
-            },
-            {
-              id: "OneDrive",
-              className: "storage_onedrive",
-              providerKey: "OneDrive",
-              isOauth: false,
-              oauthHref: "",
-              isAvailable: false,
-              title: "OneDrive",
-            },
-          ],
-          2000,
-        );
-      });
-    });
+    const res = await api.files.getConnectingStorages();

-    this.connectingStorages = storages;
+    this.connectingStorages = res.map((storage) => ({
+      id: storage.name,
+      className: `storage_${storage.key}`,
+      providerKey: storage.key !== "WebDav" ? storage.key : storage.name,
+      isConnected: storage.connected,
+      isOauth: storage.oauth,
+      oauthHref: storage.redirectUrl,
+      category: storage.name,
+    }));
  };

  saveThirdParty = (
--- a/packages/shared/api/files/index.ts
+++ b/packages/shared/api/files/index.ts
@ -62,6 +62,7 @@ import {
  TThirdPartyCapabilities,
  TTirdParties,
  TUploadOperation,
+  TConnectingStorages,
 } from "./types";

 export async function openEdit(
@ -1386,3 +1387,12 @@ export async function getFilesUsedSpace() {

  return res;
 }
+
+export async function getConnectingStorages() {
+  const res = (await request({
+    method: "get",
+    url: "files/thirdparty/providers",
+  })) as TConnectingStorages;
+
+  return res;
+}
--- a/packages/shared/api/files/types.ts
+++ b/packages/shared/api/files/types.ts
@ -415,3 +415,13 @@ export type TFilesUsedSpace = {
    usedSpace: number;
  };
 };
+
+export type TConnectingStorage = {
+  name: string;
+  key: string;
+  connected: boolean;
+  oauth: boolean;
+  redirectUrl: string;
+};
+
+export type TConnectingStorages = TConnectingStorage[];
--- a/packages/shared/components/combobox/ComboBox.tsx
+++ b/packages/shared/components/combobox/ComboBox.tsx
@ -232,7 +232,7 @@ const ComboBoxPure = (props: ComboboxProps) => {
      return (
        <DropDownItem
          {...option}
-          className="drop-down-item"
+          className={`drop-down-item ${"className" in option ? option.className : ""}`}
          textOverflow={textOverflow}
          key={option.key}
          disabled={disabled}
--- a/packages/shared/components/combobox/Combobox.types.ts
+++ b/packages/shared/components/combobox/Combobox.types.ts
@ -47,6 +47,7 @@ export type TOption =
      isSelected?: boolean;
      internal?: boolean;
      access?: ShareAccessRights;
+      className?: string;
    }
  | {
      key: string | number;
@ -63,6 +64,7 @@ export type TOption =
      isSelected?: undefined;
      internal?: undefined;
      access?: ShareAccessRights;
+      className?: string;
    };

 export interface ComboboxProps {