Merge branch 'release/v2.5.0' of github.com:ONLYOFFICE/DocSpace-client into release/v2.5.0

packages/client/src/pages/PortalSettings/categories/integration/Plugins/index.js

@@ -27,7 +27,7 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
-
+import { useDropzone } from "react-dropzone";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
 
 import Header from "./sub-components/header";
@@ -60,6 +60,23 @@ const PluginPage = ({
 }) => {
   const { t } = useTranslation(["WebPlugins", "Common"]);
 
+  const onDrop = (files) => {
+    let formData = new FormData();
+
+    formData.append("file", files[0]);
+    addPlugin(formData);
+  };
+
+  const { getRootProps, getInputProps } = useDropzone({
+    maxFiles: 1,
+    noClick: withUpload,
+    noKeyboard: withUpload,
+    // maxSize: 1000000,
+    accept: [".zip"],
+    // @ts-expect-error onDrop
+    onDrop,
+  });
+
   React.useEffect(() => {
     setDocumentTitle(t("Common:Plugins"));
   }, []);
@@ -71,24 +88,31 @@ const PluginPage = ({
           <ListLoader withUpload={withUpload} />
         </StyledContainer>
       ) : isEmptyList ? (
-        <StyledEmptyContainer>
+        <StyledEmptyContainer {...getRootProps()}>
           <EmptyScreen
             t={t}
             theme={theme}
             onAddAction={addPlugin}
             currentColorScheme={currentColorScheme}
             withUpload={withUpload}
+            inputProps={getInputProps()}
           />
         </StyledEmptyContainer>
       ) : (
-        <StyledContainer>
+        <StyledContainer {...getRootProps()}>
           {/* <Header
             t={t}
             currentColorScheme={currentColorScheme}
            
             withUpload={withUpload}
           /> */}
-          {withUpload && <UploadButton t={t} addPlugin={addPlugin} />}
+          {withUpload && (
+            <UploadButton
+              t={t}
+              addPlugin={addPlugin}
+              inputProps={getInputProps()}
+            />
+          )}
           <PluginListContainer>
             {pluginList.map((plugin) => (
               <PluginItem

packages/client/src/pages/PortalSettings/categories/integration/Plugins/sub-components/EmptyScreen.js

@@ -43,6 +43,7 @@ const EmptyScreen = ({
   currentColorScheme,
 
   withUpload,
+  inputProps,
 }) => {
   const imageSrc = theme.isBase
     ? EmptyScreenPluginsUrl
@@ -55,7 +56,11 @@ const EmptyScreen = ({
       style={{ gridColumnGap: "39px" }}
       buttonStyle={{ marginTop: "16px" }}
       imageSrc={imageSrc}
-      buttons={withUpload && <UploadButton t={t} addPlugin={onAddAction} />}
+      buttons={
+        withUpload && (
+          <UploadButton t={t} addPlugin={onAddAction} inputProps={inputProps} />
+        )
+      }
     />
   );
 };

packages/client/src/pages/PortalSettings/categories/integration/Plugins/sub-components/button.js

@@ -33,7 +33,7 @@ const StyledUploadButton = styled.div`
   width: auto;
 `;
 
-const UploadButton = ({ t, addPlugin }) => {
+const UploadButton = ({ t, addPlugin, inputProps }) => {
   const pluginInputRef = React.useRef(null);
 
   const onAddAction = () => {
@@ -72,6 +72,7 @@ const UploadButton = ({ t, addPlugin }) => {
         ref={pluginInputRef}
         style={{ display: "none" }}
       />
+      {inputProps && <input {...inputProps} />}
     </StyledUploadButton>
   );
 };

packages/client/src/store/PluginStore.ts

@@ -64,6 +64,7 @@ import {
 } from "../helpers/plugins/enums";
 
 import SelectedFolderStore from "./SelectedFolderStore";
+import { getCSPSettings } from "@docspace/shared/api/settings";
 
 const { api: apiConf, proxy: proxyConf } = defaultConfig;
 const { origin: apiOrigin, prefix: apiPrefix } = apiConf;