Web: Added quota change when creating a room.

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

@@ -6,6 +6,7 @@
   "CreateTagOption": "Create tag",
   "CustomRoomDescription": "Apply your own settings to use this room for any custom purpose.",
   "CustomRoomTitle": "Custom room",
+  "DisableRoomQuota": "Disable quota for this room",
   "FillingFormsRoomDescription": "Build, share and fill document templates or work with the ready presets to quickly create documents of any type.",
   "FillingFormsRoomTitle": "Filling forms room",
   "Icon": "Icon",
@@ -18,6 +19,7 @@
   "ReviewRoomTitle": "Review room",
   "RoomEditing": "Room editing",
   "RootLabel": "Root",
+  "StorageDescription": "Storage quota set per room. You can change this value or turn off storage limit.",
   "TagsPlaceholder": "Add a tag",
   "ThirdPartyStorageComboBoxPlaceholder": "Select storage",
   "ThirdPartyStorageDescription": "Use third-party services as data storage for this room. A new folder for storing this room’s data will be created in the connected storage.",

packages/client/src/components/QuotaForm/StyledComponent.js

@@ -4,8 +4,8 @@ const StyledBody = styled.div`
   .quota-container {
     display: flex;
     grid-gap: 4px;
-    margin-bottom: 16px;
-    ${(props) => props.label && " margin-top: 8px"};
+    margin-bottom: ${(props) => (props.isCheckbox ? "8px" : "16px")};
+    ${(props) => props.isLabel && " margin-top: 8px"};
   }
   .quota_limit {
     ${(props) => props.maxInputWidth && `max-width: ${props.maxInputWidth}`};

packages/client/src/components/QuotaForm/index.js

@@ -9,6 +9,7 @@ import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
 import Text from "@docspace/components/text";
 
 import StyledBody from "./StyledComponent";
+import Checkbox from "@docspace/components/checkbox";
 
 const QuotaForm = ({
   isLoading,
@@ -21,11 +22,13 @@ const QuotaForm = ({
   isButtonsEnable = false,
   onSave,
   label,
+  checkboxLabel,
   description,
 }) => {
   const [size, setSize] = useState(initialSize);
   const [power, setPower] = useState(initialPower);
   const [hasError, setHasError] = useState(false);
+  const [isChecked, setIsChecked] = useState(false);
 
   const { t } = useTranslation(["Common"]);
   const options = [
@@ -36,12 +39,14 @@ const QuotaForm = ({
     { key: 4, label: t("Common:Terabyte") },
   ];
 
+  const getConvertedSize = (value) => {
+    return value.trim() !== "" ? conversionToBytes(value, power) : "";
+  };
   const onChangeTextInput = (e) => {
     const { value, validity } = e.target;
 
     if (validity.valid) {
-      const transmittedSize =
-        value.trim() !== "" ? conversionToBytes(value, power) : "";
+      const transmittedSize = getConvertedSize(value);
 
       onSetQuotaBytesSize && onSetQuotaBytesSize(transmittedSize);
       setSize(value);
@@ -54,6 +59,16 @@ const QuotaForm = ({
     onSetQuotaBytesSize && onSetQuotaBytesSize(conversionToBytes(size, key));
     setPower(key);
   };
+
+  const onChangeCheckbox = () => {
+    const changeСheckbox = !isChecked;
+
+    setIsChecked(changeСheckbox);
+
+    const sizeValue = changeСheckbox ? -1 : getConvertedSize(size);
+
+    onSetQuotaBytesSize && onSetQuotaBytesSize(sizeValue);
+  };
   const isSizeError = () => {
     if (size.trim() === "") {
       setHasError(true);
@@ -87,9 +102,13 @@ const QuotaForm = ({
     console.log("onCancel");
   };
 
-  const isDisable = isLoading || isDisabled;
+  const isDisable = isLoading || isDisabled || isChecked;
   return (
-    <StyledBody maxInputWidth={maxInputWidth} label={label}>
+    <StyledBody
+      maxInputWidth={maxInputWidth}
+      isLabel={!!label}
+      isCheckbox={!!checkboxLabel}
+    >
       {label && <Text fontWeight={600}>{label}</Text>}
       {description && (
         <Text fontSize="12px" className="quota_description">
@@ -120,6 +139,14 @@ const QuotaForm = ({
           manualWidth={"fit-content"}
         />
       </div>
+      {checkboxLabel && (
+        <Checkbox
+          label={checkboxLabel}
+          isChecked={isChecked}
+          onChange={onChangeCheckbox}
+        />
+      )}
+
       {isButtonsEnable && (
         <SaveCancelButtons
           isSaving={isLoading}

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomQuota/index.js

@@ -0,0 +1,23 @@
+import { useTranslation } from "react-i18next";
+
+import QuotaForm from "SRC_DIR/components/QuotaForm";
+
+const RoomQuota = (props) => {
+  const { setRoomParams, roomParams } = props;
+  const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
+
+  const onSetQuotaBytesSize = (size) => {
+    setRoomParams({ ...roomParams, quotaLimit: size });
+  };
+
+  return (
+    <QuotaForm
+      label={t("Common:StorageQuota")}
+      description={t("StorageDescription")}
+      checkboxLabel={t("DisableRoomQuota")}
+      onSetQuotaBytesSize={onSetQuotaBytesSize}
+    />
+  );
+};
+
+export default RoomQuota;

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js

@@ -18,6 +18,7 @@ import { getRoomTypeDefaultTagTranslation } from "../data";
 import ImageEditor from "@docspace/components/ImageEditor";
 import PreviewTile from "@docspace/components/ImageEditor/PreviewTile";
 import Text from "@docspace/components/text";
+import RoomQuota from "./RoomQuota";
 
 const StyledSetRoomParams = styled.div`
   display: flex;
@@ -128,6 +129,9 @@ const SetRoomParams = ({
           isDisabled={isDisabled}
         />
       )}
+
+      <RoomQuota setRoomParams={setRoomParams} roomParams={roomParams} />
+
       <div>
         <Text fontWeight={600} className="icon-editor_text">
           {t("Icon")}