Web: Files: Public-room: added expiration date

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

@@ -70,5 +70,6 @@
   "TypeTitleSharePoint": "SharePoint",
   "TypeTitleSkyDrive": "OneDrive",
   "TypeTitleWebDav": "WebDAV",
-  "TypeTitleYandex": "Yandex.Disk"
+  "TypeTitleYandex": "Yandex.Disk",
+  "PublicRoomLinkValidTime": "This link is valid until {{date}} Once it expires, it will be impossible to access the room via this link."
 }

packages/client/src/components/panels/EditLinkPanel/LimitTimeBlock.js

@@ -1,14 +1,22 @@
 import React from "react";
 import ToggleBlock from "./ToggleBlock";
+import DateTimePicker from "@docspace/components/date-time-picker";
 
 const LimitTimeBlock = (props) => {
-  const { isChecked, isLoading } = props;
+  const { isLoading, expirationDate, setExpirationDate } = props;
 
-  const DateTimePicker = () => <></>;
+  const onChange = (date) => {
+    setExpirationDate(date);
+  };
 
   return (
-    <ToggleBlock {...props}>
-      {isChecked ? <DateTimePicker isDisabled={isLoading} /> : <></>}
+    <ToggleBlock {...props} withToggle={false}>
+      <DateTimePicker
+        className="public-room_date-picker"
+        isDisabled={isLoading}
+        initialDate={expirationDate}
+        onChange={onChange}
+      />
     </ToggleBlock>
   );
 };

packages/client/src/components/panels/EditLinkPanel/StyledEditLinkPanel.js

@@ -87,6 +87,10 @@ const StyledEditLinkPanel = styled.div`
       font-size: 18px;
     }
   }
+
+  .public-room_date-picker {
+    padding-top: 8px;
+  }
 `;
 
 const StyledScrollbar = styled(Scrollbar)`

packages/client/src/components/panels/EditLinkPanel/ToggleBlock.js

@@ -9,6 +9,7 @@ const ToggleBlock = ({
   isChecked,
   onChange,
   children,
+  withToggle = true,
 }) => {
   return (
     <div className="edit-link-toggle-block">
@@ -16,12 +17,14 @@ const ToggleBlock = ({
         <Text fontSize="16px" fontWeight={700}>
           {headerText}
         </Text>
-        <ToggleButton
-          isDisabled={isLoading}
-          isChecked={isChecked}
-          onChange={onChange}
-          className="edit-link-toggle"
-        />
+        {withToggle && (
+          <ToggleButton
+            isDisabled={isLoading}
+            isChecked={isChecked}
+            onChange={onChange}
+            className="edit-link-toggle"
+          />
+        )}
       </div>
       <Text
         className="edit-link-toggle-description"

packages/client/src/components/panels/EditLinkPanel/index.js

@@ -3,7 +3,6 @@ import { observer, inject } from "mobx-react";
 import { withTranslation } from "react-i18next";
 import copy from "copy-to-clipboard";
 import isEqual from "lodash/isEqual";
-// import { createPasswordHash } from "@docspace/common/utils";
 
 import Heading from "@docspace/components/heading";
 import Backdrop from "@docspace/components/backdrop";
@@ -37,11 +36,10 @@ const EditLinkPanel = (props) => {
     shareLink,
     unsavedChangesDialogVisible,
     setUnsavedChangesDialog,
-    // hashSettings,
     isLocked,
-    disabled,
     isDenyDownload,
     link,
+    date,
   } = props;
 
   const [isLoading, setIsLoading] = useState(false);
@@ -49,7 +47,7 @@ const EditLinkPanel = (props) => {
   const linkTitle = link.sharedTo.title ?? "";
   const [linkNameValue, setLinkNameValue] = useState(linkTitle);
   const [passwordValue, setPasswordValue] = useState(password);
-  const [expirationDate, setExpirationDate] = useState("");
+  const [expirationDate, setExpirationDate] = useState(date);
 
   const [isPasswordValid, setIsPasswordValid] = useState(true);
 
@@ -58,15 +56,12 @@ const EditLinkPanel = (props) => {
 
   const [passwordAccessIsChecked, setPasswordAccessIsChecked] =
     useState(isLocked);
-  const [limitByTimeIsChecked, setLimitByTimeIsChecked] = useState(false);
+
   const [denyDownload, setDenyDownload] = useState(isDenyDownload);
 
   const onPasswordAccessChange = () =>
     setPasswordAccessIsChecked(!passwordAccessIsChecked);
 
-  const onLimitByTimeChange = () =>
-    setLimitByTimeIsChecked(!limitByTimeIsChecked);
-
   const onDenyDownloadChange = () => setDenyDownload(!denyDownload);
 
   const onClosePanel = () => {
@@ -83,16 +78,12 @@ const EditLinkPanel = (props) => {
       return;
     }
 
-    // const passwordHash = passwordAccessIsChecked
-    //   ? createPasswordHash(passwordValue, hashSettings)
-    //   : null;
-
     const newLink = JSON.parse(JSON.stringify(link));
 
     newLink.sharedTo.title = linkNameValue;
     newLink.sharedTo.password = passwordAccessIsChecked ? passwordValue : null;
     newLink.sharedTo.denyDownload = denyDownload;
-    // link.sharedTo.expirationDate=expirationDate;
+    newLink.sharedTo.expirationDate = expirationDate;
 
     setIsLoading(true);
     editExternalLink(roomId, newLink)
@@ -119,19 +110,17 @@ const EditLinkPanel = (props) => {
 
   const initState = {
     passwordValue: password,
-    //expirationDate
+    expirationDate: date,
     passwordAccessIsChecked: isLocked,
-    //limitByTimeIsChecked,
-    //denyDownload
+    denyDownload: isDenyDownload,
   };
 
   useEffect(() => {
     const data = {
       passwordValue,
-      //expirationDate,
+      expirationDate,
       passwordAccessIsChecked,
-      //limitByTimeIsChecked,
-      //denyDownload,
+      denyDownload,
     };
 
     if (!isEqual(data, initState)) {
@@ -194,13 +183,6 @@ const EditLinkPanel = (props) => {
               setIsPasswordValid={setIsPasswordValid}
               onChange={onPasswordAccessChange}
             />
-            <LimitTimeBlock
-              isLoading={isLoading}
-              headerText={t("Files:LimitByTimePeriod")}
-              bodyText={t("Files:ChooseExpirationDate")}
-              isChecked={limitByTimeIsChecked}
-              onChange={onLimitByTimeChange}
-            />
             <ToggleBlock
               isLoading={isLoading}
               headerText={t("Files:DenyDownload")}
@@ -208,6 +190,13 @@ const EditLinkPanel = (props) => {
               isChecked={denyDownload}
               onChange={onDenyDownloadChange}
             />
+            <LimitTimeBlock
+              isLoading={isLoading}
+              headerText={t("Files:LimitByTimePeriod")}
+              bodyText={t("Files:ChooseExpirationDate")}
+              expirationDate={expirationDate}
+              setExpirationDate={setExpirationDate}
+            />
           </div>
         </StyledScrollbar>
 
@@ -235,7 +224,6 @@ const EditLinkPanel = (props) => {
 
 export default inject(({ auth, dialogsStore, publicRoomStore }) => {
   const { selectionParentRoom } = auth.infoPanelStore;
-  // const { hashSettings } = auth.settingsStore;
   const {
     editLinkPanelIsVisible,
     setEditLinkPanelIsVisible,
@@ -259,19 +247,17 @@ export default inject(({ auth, dialogsStore, publicRoomStore }) => {
     setIsVisible: setEditLinkPanelIsVisible,
     isEdit,
     linkId: link?.sharedTo?.id ?? template?.sharedTo?.id,
-
-    disabled: link?.sharedTo?.disabled,
     editExternalLink,
     roomId: selectionParentRoom.id,
     setExternalLinks,
     isLocked: !!link?.sharedTo?.password,
     password: link?.sharedTo?.password ?? "",
+    date: link?.sharedTo?.expirationDate,
     isDenyDownload: link?.sharedTo?.denyDownload ?? false,
     shareLink,
     externalLinks,
     unsavedChangesDialogVisible,
     setUnsavedChangesDialog,
-    // hashSettings,
     link: link ?? template,
   };
 })(

packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.js

@@ -18,6 +18,7 @@ import LockedReactSvgUrl from "PUBLIC_DIR/images/locked.react.svg?url";
 import LoadedReactSvgUrl from "PUBLIC_DIR/images/loaded.react.svg?url";
 import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
 import ClockReactSvg from "PUBLIC_DIR/images/clock.react.svg";
+import moment from "moment";
 
 import { StyledLinkRow } from "./StyledPublicRoom";
 
@@ -38,20 +39,14 @@ const LinkRow = (props) => {
 
   const [isLoading, setIsLoading] = useState(false);
 
-  const {
-    title,
-    /* isLocked, */ shareLink,
-    id,
-    password,
-    disabled,
-    expirationDate,
-  } = link.sharedTo;
+  const { title, shareLink, id, password, disabled, expirationDate } =
+    link.sharedTo;
 
   const isLocked = !!password;
   const expiryDate = !!expirationDate;
+  const date = moment(expirationDate).format("LLL");
 
-  const date = "October 5, 2023 11:00 AM.";
-  const tooltipContent = `This link is valid until ${date} Once it expires, it will be impossible to access the room via this link.`;
+  const tooltipContent = t("Translations:PublicRoomLinkValidTime", { date });
 
   const onEditLink = () => {
     setEditLinkPanelIsVisible(true);
@@ -226,4 +221,8 @@ export default inject(
       isArchiveFolder,
     };
   }
-)(withTranslation(["SharingPanel", "Files", "Settings"])(observer(LinkRow)));
+)(
+  withTranslation(["SharingPanel", "Files", "Settings", "Translations"])(
+    observer(LinkRow)
+  )
+);