Web:Client:Plugins: restore Profile menu items, Main button items

2023-07-25 13:35:45 +03:00 · 2023-07-25 13:35:45 +03:00 · 4f7d03e3c9
commit 4f7d03e3c9
parent 3bd9b24974
7 changed files with 316 additions and 33 deletions
--- a/packages/client/src/components/Article/MainButton/index.js
+++ b/packages/client/src/components/Article/MainButton/index.js
@ -30,6 +30,7 @@ import styled, { css } from "styled-components";
 import Button from "@docspace/components/button";

 import { resendInvitesAgain } from "@docspace/common/api/people";
+import { messageActions } from "SRC_DIR/helpers/plugins/utils";

 const StyledButton = styled(Button)`
  font-weight: 700;
@ -118,6 +119,8 @@ const ArticleMainButtonContent = (props) => {
    security,
    isGracePeriod,
    setInviteUsersWarningDialogVisible,
+    setSettingsPluginDialogVisible,
+    setCurrentSettingsDialogPlugin,
  } = props;

  const navigate = useNavigate();
@ -415,10 +418,31 @@ const ArticleMainButtonContent = (props) => {

    if (mainButtonItemsList && enablePlugins) {
      mainButtonItemsList.forEach((option) => {
-        menuModel.splice(option.value.position, 0, {
-          key: option.key,
-          ...option.value,
-        });
+        if (option.value.onClick) {
+          const onClick = async () => {
+            const message = await option.value.onClick();
+
+            messageActions(
+              message,
+              null,
+              null,
+              option.value.pluginId,
+              setSettingsPluginDialogVisible,
+              setCurrentSettingsDialogPlugin
+            );
+          };
+
+          menuModel.splice(option.value.position, 0, {
+            key: option.key,
+            ...option.value,
+            onClick,
+          });
+        } else {
+          menuModel.splice(option.value.position, 0, {
+            key: option.key,
+            ...option.value,
+          });
+        }
      });
    }

@ -435,6 +459,8 @@ const ArticleMainButtonContent = (props) => {
    isRoomsFolder,
    isOwner,
    isAdmin,
+    setSettingsPluginDialogVisible,
+    setCurrentSettingsDialogPlugin,
    onCreate,
    onCreateRoom,
    onInvite,
@ -566,7 +592,11 @@ export default inject(
    const { isAdmin, isOwner } = auth.userStore.user;
    const { isGracePeriod } = auth.currentTariffStatusStore;

-    const { mainButtonItemsList } = pluginStore;
+    const {
+      mainButtonItemsList,
+      setSettingsPluginDialogVisible,
+      setCurrentSettingsDialogPlugin,
+    } = pluginStore;

    return {
      isGracePeriod,
@ -601,6 +631,8 @@ export default inject(

      mainButtonMobileVisible,
      security,
+      setSettingsPluginDialogVisible,
+      setCurrentSettingsDialogPlugin,
    };
  }
 )(
--- a/packages/client/src/helpers/plugins/constants.js
+++ b/packages/client/src/helpers/plugins/constants.js
@ -9,6 +9,9 @@ export const PluginScopes = Object.freeze({
  Settings: "Settings",
  ContextMenu: "ContextMenu",
  InfoPanel: "InfoPanel",
+  MainButton: "MainButton",
+  ProfileMenu: "ProfileMenu",
+  EventListener: "EventListener",
 });

 export const PluginType = Object.freeze({
@ -54,3 +57,11 @@ export const PluginComponents = Object.freeze({
  textArea: "textArea",
  toggleButton: "toggleButton",
 });
+
+export const PluginUsersType = Object.freeze({
+  owner: "Owner",
+  docSpaceAdmin: "DocSpaceAdmin",
+  roomAdmin: "RoomAdmin",
+  collaborator: "Collaborator",
+  user: "User",
+});
--- a/packages/client/src/store/ContextOptionsStore.js
+++ b/packages/client/src/store/ContextOptionsStore.js
@ -1146,10 +1146,16 @@ class ContextOptionsStore {
                );
              };

-              if (
-                value.fileExt.includes(item.fileExst) ||
-                value.fileExt === "all"
-              ) {
+              if (value.fileExt) {
+                if (value.fileExt.includes(item.fileExst)) {
+                  options.splice(value.position, 0, {
+                    key: option.key,
+                    label: value.label,
+                    icon: value.icon,
+                    onClick: onClick,
+                  });
+                }
+              } else {
                options.splice(value.position, 0, {
                  key: option.key,
                  label: value.label,
--- a/packages/client/src/store/PluginStore.js
+++ b/packages/client/src/store/PluginStore.js
@ -8,7 +8,9 @@ import defaultConfig from "PUBLIC_DIR/scripts/config.json";
 import {
  PluginFileType,
  PluginScopes,
+  PluginUsersType,
 } from "SRC_DIR/helpers/plugins/constants";
+import { getPluginUrl } from "SRC_DIR/helpers/plugins/utils";

 let { api: apiConf, proxy: proxyConf } = defaultConfig;
 let { orign: apiOrigin, prefix: apiPrefix } = apiConf;
@ -28,6 +30,7 @@ class PluginStore {
  infoPanelItems = null;
  mainButtonItems = null;
  profileMenuItems = null;
+  eventListenerItems = null;

  pluginFrame = null;

@ -46,6 +49,7 @@ class PluginStore {
    this.infoPanelItems = new Map();
    this.mainButtonItems = new Map();
    this.profileMenuItems = new Map();
+    this.eventListenerItems = new Map();

    makeAutoObservable(this);
  }
@ -164,19 +168,19 @@ class PluginStore {
      }
    }

-    if (plugin.enabled && plugin.onLoadCallback) {
+    if (!plugin || !plugin.enabled) return;
+
+    if (plugin.onLoadCallback) {
      plugin.onLoadCallback();
    }

-    if (plugin.scopes.includes(PluginScopes.API) && plugin.enabled) {
+    if (plugin.scopes.includes(PluginScopes.API)) {
      plugin.setAPI(origin, proxy, prefix);
    }

    if (
-      plugin &&
      plugin.scopes.includes(PluginScopes.ContextMenu) &&
-      plugin.contextMenuItems &&
-      plugin.enabled
+      plugin.contextMenuItems
    ) {
      Array.from(plugin.contextMenuItems).map(([key, value]) => {
        this.contextMenuItems.set(key, value);
@ -184,15 +188,40 @@ class PluginStore {
    }

    if (
-      plugin &&
      plugin.scopes.includes(PluginScopes.InfoPanel) &&
-      plugin.infoPanelItems &&
-      plugin.enabled
+      plugin.infoPanelItems
    ) {
      Array.from(plugin.infoPanelItems).map(([key, value]) => {
        this.infoPanelItems.set(key, value);
      });
    }
+
+    if (
+      plugin.scopes.includes(PluginScopes.MainButton) &&
+      plugin.mainButtonItems
+    ) {
+      Array.from(plugin.mainButtonItems).map(([key, value]) => {
+        this.mainButtonItems.set(key, value);
+      });
+    }
+
+    if (
+      plugin.scopes.includes(PluginScopes.ProfileMenu) &&
+      plugin.profileMenuItems
+    ) {
+      Array.from(plugin.profileMenuItems).map(([key, value]) => {
+        this.profileMenuItems.set(key, value);
+      });
+    }
+
+    if (
+      plugin.scopes.includes(PluginScopes.EventListener) &&
+      plugin.eventListenerItems
+    ) {
+      Array.from(plugin.eventListenerItems).map(([key, value]) => {
+        this.eventListenerItems.set(key, value);
+      });
+    }
  };

  activatePlugin = async (id) => {
@ -206,10 +235,11 @@ class PluginStore {
  deactivatePlugin = async (id) => {
    const plugin = this.plugins.find((p) => p.id === id);

+    if (!plugin) return;
+
    plugin.enabled = false;

    if (
-      plugin &&
      plugin.scopes.includes(PluginScopes.ContextMenu) &&
      plugin.contextMenuItems
    ) {
@ -219,7 +249,6 @@ class PluginStore {
    }

    if (
-      plugin &&
      plugin.scopes.includes(PluginScopes.InfoPanel) &&
      plugin.infoPanelItems
    ) {
@ -227,6 +256,33 @@ class PluginStore {
        this.infoPanelItems.delete(key);
      });
    }
+
+    if (
+      plugin.scopes.includes(PluginScopes.ProfileMenu) &&
+      plugin.profileMenuItems
+    ) {
+      Array.from(plugin.profileMenuItems).map(([key, value]) => {
+        this.profileMenuItems.delete(key);
+      });
+    }
+
+    if (
+      plugin.scopes.includes(PluginScopes.MainButton) &&
+      plugin.mainButtonItems
+    ) {
+      Array.from(plugin.mainButtonItems).map(([key, value]) => {
+        this.mainButtonItems.delete(key);
+      });
+    }
+
+    if (
+      plugin.scopes.includes(PluginScopes.EventListener) &&
+      plugin.eventListenerItems
+    ) {
+      Array.from(plugin.eventListenerItems).map(([key, value]) => {
+        this.eventListenerItems.delete(key);
+      });
+    }
  };

  uninstallPlugin = async (id) => {
@ -251,9 +307,29 @@ class PluginStore {
    return plugin;
  };

+  getUserRole = () => {
+    const { user } = this.authStore.userStore;
+
+    const { isOwner, isAdmin, isCollaborator, isVisitor } = user;
+
+    const userRole = isOwner
+      ? PluginUsersType.owner
+      : isAdmin
+      ? PluginUsersType.docSpaceAdmin
+      : isCollaborator
+      ? PluginUsersType.collaborator
+      : isVisitor
+      ? PluginUsersType.user
+      : PluginUsersType.roomAdmin;
+
+    return userRole;
+  };
+
  getContextMenuKeysByType = (type, fileExst) => {
    if (!this.contextMenuItems) return;

+    const userRole = this.getUserRole();
+
    const itemsMap = Array.from(this.contextMenuItems);
    const keys = [];

@ -261,28 +337,52 @@ class PluginStore {
      case PluginFileType.Files:
        itemsMap.forEach(([key, item]) => {
          if (item.fileType.includes(PluginFileType.Files)) {
-            if (item.fileExt.includes(fileExst)) {
-              keys.push(item.key);
+            if (item.fileExt) {
+              if (item.fileExt.includes(fileExst)) {
+                if (item.usersType) {
+                  if (item.usersType.includes(userRole)) keys.push(item.key);
+                } else {
+                  keys.push(item.key);
+                }
+              }
+            } else {
+              if (item.usersType) {
+                if (item.usersType.includes(userRole)) keys.push(item.key);
+              } else {
+                keys.push(item.key);
+              }
            }
          }
        });
+        break;
      case PluginFileType.Folders:
        itemsMap.forEach(([key, item]) => {
          if (item.fileType.includes(PluginFileType.Folders)) {
-            keys.push(item.key);
+            if (item.usersType) {
+              if (item.usersType.includes(userRole)) keys.push(item.key);
+            } else {
+              keys.push(item.key);
+            }
          }
        });
        break;
      case PluginFileType.Rooms:
        itemsMap.forEach(([key, item]) => {
          if (item.fileType.includes(PluginFileType.Rooms)) {
-            keys.push(item.key);
+            if (item.usersType) {
+              if (item.usersType.includes(userRole)) keys.push(item.key);
+            } else {
+              keys.push(item.key);
+            }
          }
        });
        break;
      default:
        itemsMap.forEach(([key, item]) => {
-          if (item.fileType === PluginFileType.All) {
+          if (item.fileType) return;
+          if (item.usersType) {
+            if (item.usersType.includes(userRole)) keys.push(item.key);
+          } else {
            keys.push(item.key);
          }
        });
@ -306,8 +406,17 @@ class PluginStore {

    this.plugins.forEach((plugin) => {
      if (plugin.scopes.includes(PluginScopes.ContextMenu)) {
+        const iconUrl = getPluginUrl(plugin.url, "assets");
+
        Array.from(plugin.getContextMenuItems(), ([key, value]) =>
-          items.push({ key, value: { ...value, pluginId: plugin.id } })
+          items.push({
+            key,
+            value: {
+              ...value,
+              pluginId: plugin.id,
+              icon: `${iconUrl}/${value.icon}`,
+            },
+          })
        );
      }
    });
@ -324,16 +433,111 @@ class PluginStore {
  get infoPanelItemsList() {
    const items = [];

+    const userRole = this.getUserRole();
+
    this.plugins.forEach((plugin) => {
      if (plugin.scopes.includes(PluginScopes.InfoPanel)) {
-        Array.from(plugin.getInfoPanelItems(), ([key, value]) =>
-          items.push({ key, value: { ...value, pluginId: plugin.id } })
-        );
+        Array.from(plugin.getInfoPanelItems(), ([key, value]) => {
+          if (value.usersType) {
+            if (value.usersType.includes(userRole))
+              items.push({ key, value: { ...value, pluginId: plugin.id } });
+          } else {
+            items.push({ key, value: { ...value, pluginId: plugin.id } });
+          }
+        });
      }
    });

    return items;
  }
+
+  get profileMenuItemsList() {
+    const items = [];
+
+    const userRole = this.getUserRole();
+
+    this.plugins.forEach((plugin) => {
+      if (plugin.scopes.includes(PluginScopes.ProfileMenu)) {
+        const iconUrl = getPluginUrl(plugin.url, "assets");
+
+        Array.from(plugin.getProfileMenuItems(), ([key, value]) => {
+          if (value.usersType) {
+            if (value.usersType.includes(userRole)) {
+              items.push({
+                key,
+                value: {
+                  ...value,
+                  pluginId: plugin.id,
+                  icon: `${iconUrl}/${value.icon}`,
+                },
+              });
+            }
+          } else {
+            items.push({
+              key,
+              value: {
+                ...value,
+                pluginId: plugin.id,
+                icon: `${iconUrl}/${value.icon}`,
+              },
+            });
+          }
+        });
+      }
+    });
+
+    if (items.length > 0) {
+      items.sort((a, b) => a.value.position < b.value.position);
+
+      return items;
+    }
+
+    return null;
+  }
+
+  get mainButtonItemsList() {
+    const items = [];
+
+    const userRole = this.getUserRole();
+
+    this.plugins.forEach((plugin) => {
+      if (plugin.scopes.includes(PluginScopes.MainButton)) {
+        const iconUrl = getPluginUrl(plugin.url, "assets");
+
+        Array.from(plugin.getMainButtonItems(), ([key, value]) => {
+          if (value.usersType) {
+            if (value.usersType.includes(userRole)) {
+              items.push({
+                key,
+                value: {
+                  ...value,
+                  pluginId: plugin.id,
+                  icon: `${iconUrl}/${value.icon}`,
+                },
+              });
+            }
+          } else {
+            items.push({
+              key,
+              value: {
+                ...value,
+                pluginId: plugin.id,
+                icon: `${iconUrl}/${value.icon}`,
+              },
+            });
+          }
+        });
+      }
+    });
+
+    if (items.length > 0) {
+      items.sort((a, b) => a.value.position < b.value.position);
+
+      return items;
+    }
+
+    return null;
+  }
 }

 export default PluginStore;
--- a/packages/client/src/store/ProfileActionsStore.js
+++ b/packages/client/src/store/ProfileActionsStore.js
@ -17,6 +17,7 @@ import { isDesktop, isTablet, isMobile } from "react-device-detect";
 import { ZendeskAPI } from "@docspace/common/components/Zendesk";
 import { LIVE_CHAT_LOCAL_STORAGE_KEY } from "@docspace/common/constants";
 import toastr from "@docspace/components/toast/toastr";
+import { messageActions } from "SRC_DIR/helpers/plugins/utils";

 const PROXY_HOMEPAGE_URL = combineUrl(window.DocSpaceConfig?.proxy?.url, "/");
 const PROFILE_SELF_URL = combineUrl(PROXY_HOMEPAGE_URL, "/profile");
@ -321,11 +322,39 @@ class ProfileActionsStore {
    }

    if (this.pluginStore.profileMenuItemsList && enablePlugins) {
+      const {
+        setSettingsPluginDialogVisible,
+        setCurrentSettingsDialogPlugin,
+        updatePluginStatus,
+      } = this.pluginStore;
+
      this.pluginStore.profileMenuItemsList.forEach((option) => {
-        actions.splice(option.value.position, 0, {
-          key: option.key,
-          ...option.value,
-        });
+        if (option.value.onClick) {
+          const onClick = async () => {
+            const message = await option.value.onClick();
+
+            messageActions(
+              message,
+              null,
+              null,
+              option.value.pluginId,
+              setSettingsPluginDialogVisible,
+              setCurrentSettingsDialogPlugin,
+              updatePluginStatus
+            );
+          };
+
+          actions.splice(option.value.position, 0, {
+            key: option.key,
+            ...option.value,
+            onClick,
+          });
+        } else {
+          actions.splice(option.value.position, 0, {
+            key: option.key,
+            ...option.value,
+          });
+        }
      });
    }

--- a/packages/components/drop-down-item/index.js
+++ b/packages/components/drop-down-item/index.js
@ -62,7 +62,7 @@ const DropDownItem = (props) => {
        <IconWrapper className="drop-down-icon">
          {!withoutIcon ? (
            !icon.includes("images/") ? (
-              <img src={icon} />
+              <img className="drop-down-icon_image" src={icon} />
            ) : (
              <ReactSVG
                src={icon}
--- a/packages/components/drop-down-item/styled-drop-down-item.js
+++ b/packages/components/drop-down-item/styled-drop-down-item.js
@ -196,6 +196,7 @@ const IconWrapper = styled.div`
    max-width: 16px;
    height: 100%;
    max-height: 16px;
+    margin-top: 12px;
  }
 `;
 IconWrapper.defaultProps = { theme: Base };