Web: Added quota update in management section.

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

@@ -1,4 +1,3 @@
-import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 import { useState, useEffect } from "react";
 
@@ -16,11 +15,11 @@ const ChangeStorageQuotaDialog = (props) => {
     initialSize,
     portalInfo,
     isVisible,
-    onSave,
+    updateFunction,
     onClose,
     isDisableQuota,
-    updateTenantCustomQuota,
   } = props;
+
   const { t } = useTranslation("Common");
 
   const [isLoading, setIsLoading] = useState(false);
@@ -57,13 +56,15 @@ const ChangeStorageQuotaDialog = (props) => {
         Quota: isDisableQuota ? -1 : size,
       });
 
-      updateTenantCustomQuota(storageQuota);
+      await updateFunction(storageQuota);
+
       toastr.success(t("Common:StorageQuotaSet"));
     } catch (e) {
       toastr.error(e);
     }
+
     setSize("");
-    onSave && onSave();
+    onClose && onClose();
     setIsLoading(false);
   };
 
@@ -127,17 +128,4 @@ const ChangeStorageQuotaDialog = (props) => {
   );
 };
 
-export default inject(({ auth, dialogsStore, storageManagement }) => {
-  const { changeQuotaDialogVisible, setChangeQuotaDialogVisible } =
-    dialogsStore;
-  const { portalInfo } = storageManagement;
-  const { currentQuotaStore } = auth;
-  const { updateTenantCustomQuota } = currentQuotaStore;
-
-  return {
-    changeQuotaDialogVisible,
-    setChangeQuotaDialogVisible,
-    portalInfo,
-    updateTenantCustomQuota,
-  };
-})(observer(ChangeStorageQuotaDialog));
+export default ChangeStorageQuotaDialog;

packages/client/src/pages/PortalSettings/categories/storage-management/StorageSpaceUsed.js

@@ -25,6 +25,8 @@ const DiskSpaceUsedComponent = (props) => {
     maxTotalSizeByQuota,
     standalone,
     isTenantCustomQuotaSet,
+    portalInfo,
+    updateTenantCustomQuota,
   } = props;
 
   const { t } = useTranslation("Settings");
@@ -48,13 +50,13 @@ const DiskSpaceUsedComponent = (props) => {
   const getContextModel = () => {
     return [
       {
-        key: "create",
+        key: "change-quota",
         label: t("Common:ChangeQuota"),
         icon: ChangQuotaReactSvgUrl,
         onClick: onChangeDialogClick,
       },
       {
-        key: "template-info",
+        key: "disable-quota",
         label: t("Common:DisableQuota"),
         icon: DisableQuotaReactSvgUrl,
         onClick: onDisableDialogClick,
@@ -65,9 +67,10 @@ const DiskSpaceUsedComponent = (props) => {
   const onClickContextMenu = (e) => {
     ref.current.show(e);
   };
-  const onSave = () => {
-    setIsVisibleChangeQuotaDialog(false);
+  const updateFunction = (storage) => {
+    updateTenantCustomQuota(storage);
   };
+
   const onClose = () => {
     setIsVisibleChangeQuotaDialog(false);
   };
@@ -78,8 +81,9 @@ const DiskSpaceUsedComponent = (props) => {
         <ChangeStorageQuotaDialog
           isDisableQuota={isDisableQuota}
           isVisible={isVisibleDialog}
-          onSave={onSave}
+          updateFunction={updateFunction}
           onClose={onClose}
+          portalInfo={portalInfo}
         />
       )}
       <StyledMainTitle fontSize="16px" fontWeight={700}>
@@ -132,15 +136,16 @@ const DiskSpaceUsedComponent = (props) => {
   );
 };
 
-export default inject(({ auth }) => {
+export default inject(({ auth, storageManagement }) => {
   const { currentQuotaStore, settingsStore } = auth;
   const {
     isTenantCustomQuotaSet,
     usedTotalStorageSizeCount,
     maxTotalSizeByQuota: maxSizeByTariff,
     tenantCustomQuota,
+    updateTenantCustomQuota,
   } = currentQuotaStore;
-
+  const { portalInfo } = storageManagement;
   const { standalone } = settingsStore;
 
   const maxTotalSizeByQuota = standalone ? tenantCustomQuota : maxSizeByTariff;
@@ -150,5 +155,7 @@ export default inject(({ auth }) => {
     usedTotalStorageSizeCount,
     standalone,
     maxTotalSizeByQuota,
+    portalInfo,
+    updateTenantCustomQuota,
   };
 })(observer(DiskSpaceUsedComponent));

packages/client/webpack.config.js

@@ -320,7 +320,8 @@ module.exports = (env, argv) => {
         "./RestorePage":
           "./src/pages/PortalSettings/categories/data-management/backup/restore-backup",
         "./PaymentsPage": "./src/pages/PortalSettings/categories/payments",
-        "./ChangeQuotaDialog": "./src/components/dialogs/ChangeQuotaDialog",
+        "./ChangeStorageQuotaDialog":
+          "./src/components/dialogs/ChangeStorageQuotaDialog",
       },
       shared: {
         ...deps,

packages/management/src/categories/spaces/sub-components/RowView/RoomContent.tsx

@@ -31,16 +31,17 @@ type TRoomContent = {
 export const RoomContent = ({ item, isCurrentPortal }: TRoomContent) => {
   const { t } = useTranslation(["Management", "Common", "Settings"]);
 
-  const { roomAdminCount, usersCount, storageSize, roomsCount, usedSize } =
-    item?.quotaUsage || {
-      roomAdminCount: null,
-      usersCount: null,
-      storageSize: null,
-      roomsCount: null,
-      usedSize: null,
-    };
+  const { roomAdminCount, usersCount, roomsCount } = item?.quotaUsage || {
+    roomAdminCount: null,
+    usersCount: null,
+    roomsCount: null,
+  };
+  const { quota, usedSize } = item || {
+    quota: null,
+    usedSize: null,
+  };
 
-  const maxStorage = getConvertedSize(t, storageSize);
+  const maxStorage = quota >= 0 ? getConvertedSize(t, quota) : null;
   const usedStorage = getConvertedSize(t, usedSize);
 
   return (

packages/management/src/categories/spaces/sub-components/RowView/SpacesRoomRow.tsx

@@ -8,7 +8,8 @@ import DeleteReactSvgUrl from "PUBLIC_DIR/images/delete.react.svg?url";
 import ExternalLinkIcon from "PUBLIC_DIR/images/external.link.react.svg?url";
 import DefaultLogoUrl from "PUBLIC_DIR/images/logo/leftmenu.svg?url";
 import ChangQuotaReactSvgUrl from "PUBLIC_DIR/images/change.quota.react.svg?url";
-import ChangeQuotaDialog from "client/ChangeQuotaDialog";
+import DisableQuotaReactSvgUrl from "PUBLIC_DIR/images/disable.quota.react.svg?url";
+import ChangeStorageQuotaDialog from "client/ChangeStorageQuotaDialog";
 
 import { useTranslation } from "react-i18next";
 import { TPortals } from "SRC_DIR/types/spaces";
@@ -41,10 +42,10 @@ type TRow = {
 const SpacesRoomRow = ({ item }: TRow) => {
   const { spacesStore, authStore } = useStore();
   const { setDeletePortalDialogVisible, setCurrentPortal } = spacesStore;
-  const { tenantAlias } = authStore.settingsStore;
+  const { tenantAlias, getAllPortals } = authStore.settingsStore;
 
-  const [isVisibleDialog, setIsVisibleDialog] = useState();
-  const [size, setSize] = useState();
+  const [isVisibleDialog, setIsVisibleDialog] = useState(false);
+  const [isDisableQuota, setIsDisableQuota] = useState(false);
 
   const onDelete = () => {
     setCurrentPortal(item);
@@ -73,9 +74,21 @@ const SpacesRoomRow = ({ item }: TRow) => {
     },
     {
       label: t("Common:ManageStorageQuota"),
-      key: "space_settings",
+      key: "change_quota",
       icon: ChangQuotaReactSvgUrl,
-      onClick: () => setIsVisibleDialog(true),
+      onClick: () => {
+        setIsVisibleDialog(true);
+        isDisableQuota && setIsDisableQuota(false);
+      },
+    },
+    {
+      key: "disable_quota",
+      label: t("Common:DisableQuota"),
+      icon: DisableQuotaReactSvgUrl,
+      onClick: () => {
+        setIsVisibleDialog(true);
+        setIsDisableQuota(true);
+      },
     },
     {
       key: "separator",
@@ -89,27 +102,24 @@ const SpacesRoomRow = ({ item }: TRow) => {
     },
   ];
 
-  const onSaveClick = () => {
-    setIsVisibleDialog(false);
+  const updateFunction = async () => {
+    await getAllPortals();
   };
 
   const onCloseClick = () => {
     setIsVisibleDialog(false);
   };
 
-  const onSetQuotaBytesSize = (bytes) => {
-    setSize(bytes);
-  };
-
   const isCurrentPortal = tenantAlias === item.portalName;
 
   return (
     <>
-      <ChangeQuotaDialog
-        visible={isVisibleDialog}
-        onSaveClick={onSaveClick}
-        onCloseClick={onCloseClick}
-        onSetQuotaBytesSize={onSetQuotaBytesSize}
+      <ChangeStorageQuotaDialog
+        isVisible={isVisibleDialog}
+        updateFunction={updateFunction}
+        onClose={onCloseClick}
+        portalInfo={item}
+        isDisableQuota={isDisableQuota}
       />
       <StyledRoomRow
         contextOptions={contextOptionsProps}