Client:AccountsBody:EmptyScreen Added new empty screen for group

packages/client/public/locales/en/EmptyView.json

@@ -41,5 +41,7 @@
   "MigrationDataDescription": "Import data to your {{productName}} from ONLYOFFICE Workspace, Google Workspace, or Nextcloud.",
   "EmptyRootRoomUserTitle": "There are no rooms here yet",
   "EmptyRootRoomUserDescription": "The shared room will appear here.",
-  "EmptyRecentDescription": "Your last viewed or edited docs will be displayed in this section."
+  "EmptyRecentDescription": "Your last viewed or edited docs will be displayed in this section.",
+  "EmptyGroupAddedUserOptionDescription": "Add group members and assign the head",
+  "EmptyGroupDeleteOptionDescription": "If you don't need this group anymore"
 }

packages/client/src/pages/Home/Section/AccountsBody/EmptyScreen.js

@@ -28,11 +28,13 @@ import React from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 
+import InviteUserIcon from "PUBLIC_DIR/images/emptyview/invite.user.svg";
+import TrashIcon from "PUBLIC_DIR/images/emptyview/trash.svg";
+import ClearEmptyFilterSvg from "PUBLIC_DIR/images/clear.empty.filter.svg";
+
 import EmptyScreenPersonSvgLight from "PUBLIC_DIR/images/emptyFilter/empty.filter.people.light.svg";
 import EmptyScreenPersonSvgDark from "PUBLIC_DIR/images/emptyFilter/empty.filter.people.dark.svg";
 
-import ClearEmptyFilterSvg from "PUBLIC_DIR/images/clear.empty.filter.svg";
-
 import { EmptyView } from "@docspace/shared/components/empty-view";
 
 const EmptyScreen = ({
@@ -41,12 +43,23 @@ const EmptyScreen = ({
   setIsLoading,
   theme,
   isEmptyGroup = false,
+  isRoomAdmin,
+  editGroup,
+  deleteGroup,
+  currentGroup,
 }) => {
-  const { t } = useTranslation(["People", "Common"]);
+  const { t } = useTranslation([
+    "People",
+    "Common",
+    "EmptyView",
+    "DeleteDialog",
+  ]);
   const isPeopleAccounts = window.location.pathname.includes("accounts/people");
 
   const title = t("Common:NotFoundUsers");
-  const description = t("Common:NotFoundUsersDescription");
+  const description = isEmptyGroup
+    ? t("Common:EmptyGroupDescription")
+    : t("Common:NotFoundUsersDescription");
 
   /**
    * @type {React.MouseEventHandler<HTMLAnchorElement>}
@@ -58,51 +71,77 @@ const EmptyScreen = ({
     isPeopleAccounts ? resetFilter() : resetInsideGroupFilter();
   };
 
-  const imageSrc = theme.isBase ? (
+  const icon = theme.isBase ? (
     <EmptyScreenPersonSvgLight />
   ) : (
     <EmptyScreenPersonSvgDark />
   );
 
-  if (isEmptyGroup) {
+  /**
-    return (
+   * @returns {import("@docspace/shared/components/empty-view").EmptyViewOptionsType}
-      <EmptyScreenContainer
+   */
-        imageSrc={imageSrc}
+  const getOptions = () => {
-        imageAlt="Empty Screen Filter image"
+    if (isEmptyGroup) {
-        headerText={title}
+      return [
-      />
+        {
-    );
+          key: "group-add-user",
-  }
+          title: t("Common:AddUsers"),
+          description: t("EmptyView:EmptyGroupAddedUserOptionDescription"),
+          disabled: isRoomAdmin || currentGroup?.isLDAP,
+          icon: <InviteUserIcon />,
+          onClick: () => editGroup(currentGroup),
+        },
+        {
+          key: "delete-group",
+          title: t("DeleteDialog:DeleteGroupTitle"),
+          description: t("EmptyView:EmptyGroupDeleteOptionDescription"),
+          disabled: isRoomAdmin || currentGroup?.isLDAP,
+          icon: <TrashIcon />,
+          onClick: () => deleteGroup(currentGroup, true),
+        },
+      ];
+    }
+
+    return {
+      to: "",
+      description: t("Common:ClearFilter"),
+      icon: <ClearEmptyFilterSvg />,
+      onClick: onResetFilter,
+    };
+  };
 
   return (
     <EmptyView
-      description={description}
+      icon={icon}
       title={title}
-      icon={imageSrc}
+      options={getOptions()}
-      options={{
+      description={description}
-        to: "",
-        description: t("Common:ClearFilter"),
-        icon: <ClearEmptyFilterSvg />,
-        onClick: onResetFilter,
-      }}
     />
   );
 };
 
 export default inject(({ peopleStore, clientLoadingStore, settingsStore }) => {
-  const { resetFilter, groupsStore } = peopleStore;
+  const { resetFilter, groupsStore, userStore } = peopleStore;
 
-  const { resetInsideGroupFilter } = groupsStore;
+  const { resetInsideGroupFilter, editGroup, deleteGroup, currentGroup } =
+    groupsStore;
+
+  console.log({ editGroup });
 
   const { setIsSectionBodyLoading } = clientLoadingStore;
 
+  const isRoomAdmin = userStore?.user?.isRoomAdmin;
+
   const setIsLoading = (param) => {
     setIsSectionBodyLoading(param);
   };
   return {
     resetFilter,
     resetInsideGroupFilter,
-
+    isRoomAdmin,
+    editGroup,
+    deleteGroup,
+    currentGroup,
     setIsLoading,
     theme: settingsStore.theme,
   };

packages/client/src/store/GroupsStore.ts

@@ -558,6 +558,19 @@ class GroupsStore {
     ];
   };
 
+  deleteGroup = (item: TGroup, forInsideGroup: boolean) => {
+    if (forInsideGroup) {
+      this.setBufferSelection(item);
+    }
+    this.onDeleteClick(item.name);
+  };
+
+  editGroup = (item: TGroup) => {
+    const event: Event & { item?: TGroup } = new Event(Events.GROUP_EDIT);
+    event.item = item;
+    window.dispatchEvent(event);
+  };
+
   getGroupContextOptions = (
     t,
     item,
@@ -575,11 +588,7 @@ class GroupsStore {
           label: t("PeopleTranslations:EditGroup"),
           title: t("PeopleTranslations:EditGroup"),
           icon: PencilReactSvgUrl,
-          onClick: () => {
+          onClick: () => this.editGroup(item),
-            const event = new Event(Events.GROUP_EDIT);
-            event.item = item;
-            window.dispatchEvent(event);
-          },
         },
       !forInfoPanel && {
         id: "info",
@@ -613,12 +622,7 @@ class GroupsStore {
           label: t("Common:Delete"),
           title: t("Common:Delete"),
           icon: TrashReactSvgUrl,
-          onClick: () => {
+          onClick: () => this.deleteGroup(item, forInsideGroup),
-            if (forInsideGroup) {
-              this.setBufferSelection(item);
-            }
-            this.onDeleteClick(item.name);
-          },
         },
     ];
   };

packages/shared/components/empty-view/EmptyView.types.ts

@@ -1,4 +1,5 @@
 import type { To } from "react-router-dom";
+import type { ContextMenuModel } from "../context-menu";
 
 export type EmptyViewLinkType = {
   to: To;

public/images/emptyview/trash.svg

@@ -0,0 +1,11 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="6" fill="currentColor" fill-opacity="0.1"/>
+<g clip-path="url(#clip0_1358_63296)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.499 10H18.499C19.3274 10 19.999 10.6716 19.999 11.5V12H20H23C24.1049 12 25 12.8959 25 14.0002H23V14H20H18.499H17.499H16H13V14.0002H11C11 12.8959 11.8951 12 13 12H15.999V11.5C15.999 10.6716 16.6705 10 17.499 10ZM13 15.0002V23.0002C13 24.6571 14.3431 26.0002 16 26.0002H20C21.6569 26.0002 23 24.6571 23 23.0002V15.0002H21V23.0002C21 23.5525 20.5523 24.0002 20 24.0002H16C15.4477 24.0002 15 23.5525 15 23.0002V15.0002H13ZM17 16V24H19V16H17Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_1358_63296">
+<rect width="16" height="16" fill="white" transform="translate(10 10)"/>
+</clipPath>
+</defs>
+</svg>

public/locales/en/Common.json

@@ -38,9 +38,9 @@
   "Bytes": "bytes",
   "CancelButton": "Cancel",
   "ChangeButton": "Change",
-  "ChangeUserPermissions": "Change user permissions to the invited people or <1>upgrade your tariff plan</1>.",
   "ChangeQuota": "Change quota",
   "ChangesSavedSuccessfully": "Changes saved successfully",
+  "ChangeUserPermissions": "Change user permissions to the invited people or <1>upgrade your tariff plan</1>.",
   "ChooseFromTemplates": "Choose from Templates",
   "ClearAll": "Clear all",
   "ClearFilter": "Clear filter",
@@ -143,8 +143,8 @@
   "DontShowAgain": "Don't show again",
   "Download": "Download",
   "DownloadApps": "Download applications",
-  "DownloadOperationTitle": "File downloading in progress",
   "DownloadOperationDescription": "Once ready, you can find the files in your browser's download folder and close this tab.",
+  "DownloadOperationTitle": "File downloading in progress",
   "DropzoneTitleExsts": "(JPG or PNG)",
   "DropzoneTitleLink": "Select new image",
   "DropzoneTitleSecondary": "or drop file here",
@@ -159,6 +159,7 @@
   "EmptyFilterDescriptionText": "No files or folders match this filter. Try a different one or clear filter to view all files.",
   "EmptyFilterFilesDescription": "No files or folders match this filter. Try another or remove the filter to view all files.",
   "EmptyFilterRoomsDescription": "No room matches this filter. Try another or reset filter to view all rooms.",
+  "EmptyGroupDescription": "This group is empty",
   "EmptyGroupsDescription": "Please create the first group.",
   "EmptyGroupsHeader": "No groups here yet",
   "EmptyHeader": "No other accounts here yet",
@@ -334,8 +335,8 @@
   "OAuthRoomsWriteDescription": "View and manage all rooms",
   "OCT": "OCT",
   "OFORMsGallery": "Form Gallery",
-  "OKButton": "OK",
   "OkButton": "Ok",
+  "OKButton": "OK",
   "Or": "or",
   "orContinueWith": "or continue with",
   "OrganizationName": "ONLYOFFICE",