Web: Files: added lifetime dialog

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

@@ -178,5 +178,7 @@
   "WithSubfolders": "With subfolders",
   "YouLeftTheRoom": "You have left the room",
   "RoomFilesLifetime": "The file lifetime is set to {{days}} days in this room",
-  "FileWillBeDeleted": "The file will be deleted {{date}}"
+  "FileWillBeDeleted": "The file will be deleted {{date}}",
+  "LifetimeDialogDescription": "Lifetime countdown begins at the file creation date. Some files in this room exceed the proposed lifetime and will be deleted once you enable the setting.",
+  "LifetimeDialogDescriptionHeader": "Older files with exceeded lifetime will be deleted"
 }

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

@@ -42,6 +42,7 @@ import FilesSelector from "../FilesSelector";
 import { FilesSelectorFilterTypes } from "@docspace/common/constants";
 import LeaveRoomDialog from "../dialogs/LeaveRoomDialog";
 import ChangeRoomOwnerPanel from "../panels/ChangeRoomOwnerPanel";
+import LifetimeDialog from "../dialogs/LifetimeDialog";
 
 const Panels = (props) => {
   const {
@@ -56,6 +57,7 @@ const Panels = (props) => {
     deleteThirdPartyDialogVisible,
     versionHistoryPanelVisible,
     deleteDialogVisible,
+    lifetimeDialogVisible,
     downloadDialogVisible,
     emptyTrashDialogVisible,
     newFilesPanelVisible,
@@ -141,6 +143,7 @@ const Panels = (props) => {
       <VersionHistoryPanel key="version-history-panel" />
     ),
     deleteDialogVisible && <DeleteDialog key="delete-dialog" />,
+    lifetimeDialogVisible && <LifetimeDialog key="delete-dialog" />,
     emptyTrashDialogVisible && <EmptyTrashDialog key="empty-trash-dialog" />,
     downloadDialogVisible && <DownloadDialog key="download-dialog" />,
 
@@ -222,6 +225,7 @@ export default inject(
       connectDialogVisible,
       deleteThirdPartyDialogVisible,
       deleteDialogVisible,
+      lifetimeDialogVisible,
       downloadDialogVisible,
       emptyTrashDialogVisible,
       newFilesPanelVisible,
@@ -280,6 +284,7 @@ export default inject(
       deleteThirdPartyDialogVisible,
       versionHistoryPanelVisible,
       deleteDialogVisible,
+      lifetimeDialogVisible,
       downloadDialogVisible,
       emptyTrashDialogVisible,
       newFilesPanelVisible,

packages/client/src/components/dialogs/LifetimeDialog/StyledLifetimeDialog.js

@@ -0,0 +1,46 @@
+import ModalDialog from "@docspace/components/modal-dialog";
+import { tablet } from "@docspace/components/utils/device";
+import styled from "styled-components";
+import { getCorrectFourValuesStyle } from "@docspace/components/utils/rtlUtils";
+
+const StyledLifetimeDialog = styled(ModalDialog)`
+  .modal-dialog-content-body {
+    display: grid;
+    gap: 18px;
+  }
+
+  .modal-dialog-aside-header {
+    margin: ${({ theme }) =>
+      getCorrectFourValuesStyle("0 -24px 0 -16px", theme.interfaceDirection)};
+    padding: ${({ theme }) =>
+      getCorrectFourValuesStyle("0 0 0 16px", theme.interfaceDirection)};
+  }
+
+  .modal-dialog-aside-footer {
+    @media ${tablet} {
+      width: 100%;
+
+      ${({ theme }) =>
+        theme.interfaceDirection === "rtl"
+          ? `padding-left: 32px;`
+          : `padding-right: 32px;`}
+      display: flex;
+    }
+  }
+
+  .button-dialog-accept {
+    @media ${tablet} {
+      width: 100%;
+    }
+  }
+
+  .button-dialog {
+    @media ${tablet} {
+      width: 100%;
+    }
+
+    display: inline-block;
+  }
+`;
+
+export { StyledLifetimeDialog };

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

@@ -0,0 +1,92 @@
+import { useEffect } from "react";
+import ModalDialog from "@docspace/components/modal-dialog";
+import { StyledLifetimeDialog } from "./StyledLifetimeDialog";
+import Button from "@docspace/components/button";
+import Text from "@docspace/components/text";
+import { withTranslation } from "react-i18next";
+import toastr from "@docspace/components/toast/toastr";
+import { inject, observer } from "mobx-react";
+
+const LifetimeDialogComponent = (props) => {
+  const { t, setLifetimeDialogVisible, visible, tReady } = props;
+
+  useEffect(() => {
+    document.addEventListener("keyup", onKeyUp, false);
+
+    return () => {
+      document.removeEventListener("keyup", onKeyUp, false);
+    };
+  }, []);
+
+  const onKeyUp = (e) => {
+    if (e.keyCode === 27) onClose();
+    if (e.keyCode === 13 || e.which === 13) onDeleteAction();
+  };
+
+  const onClose = () => {
+    setLifetimeDialogVisible(false);
+  };
+
+  const onAcceptClick = () => {
+    console.log("onAcceptClick");
+    onClose();
+  };
+
+  const onDeleteAction = () => {
+    onAcceptClick();
+  };
+
+  return (
+    <StyledLifetimeDialog
+      isLoading={!tReady}
+      visible={visible}
+      onClose={onClose}
+    >
+      <ModalDialog.Header>{t("Common:Warning")}</ModalDialog.Header>
+      <ModalDialog.Body>
+        <div className="modal-dialog-content-body">
+          <Text fontWeight={600} fontSize="13px" noSelect>
+            {t("Files:LifetimeDialogDescriptionHeader")}
+          </Text>
+          <Text fontSize="13px" noSelect>
+            {t("Files:LifetimeDialogDescription")}
+          </Text>
+        </div>
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <Button
+          id="delete-file-modal_submit"
+          key="OkButton"
+          label={t("Common:OKButton")}
+          size="normal"
+          primary
+          scale
+          onClick={onDeleteAction}
+          // isDisabled={!selection.length}
+        />
+        <Button
+          id="delete-file-modal_cancel"
+          key="CancelButton"
+          label={t("Common:CancelButton")}
+          size="normal"
+          scale
+          onClick={onClose}
+        />
+      </ModalDialog.Footer>
+    </StyledLifetimeDialog>
+  );
+};
+
+const LifetimeDialog = withTranslation(["Common", "Files"])(
+  LifetimeDialogComponent
+);
+
+export default inject(({ dialogsStore }) => {
+  const { lifetimeDialogVisible: visible, setLifetimeDialogVisible } =
+    dialogsStore;
+
+  return {
+    visible,
+    setLifetimeDialogVisible,
+  };
+})(observer(LifetimeDialog));

packages/client/src/store/DialogsStore.js

@@ -20,6 +20,7 @@ class DialogsStore {
   connectDialogVisible = false;
   thirdPartyMoveDialogVisible = false;
   deleteDialogVisible = false;
+  lifetimeDialogVisible = false;
   downloadDialogVisible = false;
   emptyTrashDialogVisible = false;
   newFilesPanelVisible = false;
@@ -198,6 +199,10 @@ class DialogsStore {
     this.deleteDialogVisible = deleteDialogVisible;
   };
 
+  setLifetimeDialogVisible = (lifetimeDialogVisible) => {
+    this.lifetimeDialogVisible = lifetimeDialogVisible;
+  };
+
   setEventDialogVisible = (eventDialogVisible) => {
     this.eventDialogVisible = eventDialogVisible;
   };