From 76a9126d4e9ae0ab3bfd3730e5cfb1c26ed98558 Mon Sep 17 00:00:00 2001
From: gopienkonikita <nikita.gopienko@onlyoffice.com>
Date: Tue, 18 Jul 2023 15:21:19 +0300
Subject: [PATCH] Web: Files: Public-room: added "Limit by time period" block

---
 packages/client/public/locales/en/Files.json  |  3 ++-
 .../public/locales/en/Translations.json       |  3 ++-
 .../panels/EditLinkPanel/LimitTimeBlock.js    |  8 +++++-
 .../EditLinkPanel/StyledEditLinkPanel.js      | 15 ++++++++++-
 .../panels/EditLinkPanel/ToggleBlock.js       | 22 ++++++++++------
 .../components/panels/EditLinkPanel/index.js  | 17 ++++++++++---
 .../views/Members/sub-components/LinkRow.js   | 25 +++++++++++++++----
 .../sub-components/StyledPublicRoom.js        | 17 ++++++++++---
 packages/components/avatar/index.js           |  1 +
 packages/components/themes/base.js            |  7 ++++++
 packages/components/themes/dark.js            |  7 ++++++
 11 files changed, 101 insertions(+), 24 deletions(-)

diff --git a/packages/client/public/locales/en/Files.json b/packages/client/public/locales/en/Files.json
index 9979e9e17f..7fe387fb0a 100644
--- a/packages/client/public/locales/en/Files.json
+++ b/packages/client/public/locales/en/Files.json
@@ -145,5 +145,6 @@
   "LinkRemovedSuccessfully": "Link removed successfully",
   "Links": "Links",
   "WantToRestoreTheRoom": "All external links in this room will become active, and its contents will be available to everyone with the link. Do you want to restore the room?",
-  "WantToRestoreTheRooms": "All external links in restored rooms will become active, and their contents will be available to everyone with the room links. Do you want to restore the rooms?"
+  "WantToRestoreTheRooms": "All external links in restored rooms will become active, and their contents will be available to everyone with the room links. Do you want to restore the rooms?",
+  "LinkValidUntil": "This link will be valid until"
 }
diff --git a/packages/client/public/locales/en/Translations.json b/packages/client/public/locales/en/Translations.json
index a2d233e7b1..1595723db5 100644
--- a/packages/client/public/locales/en/Translations.json
+++ b/packages/client/public/locales/en/Translations.json
@@ -71,5 +71,6 @@
   "TypeTitleSkyDrive": "OneDrive",
   "TypeTitleWebDav": "WebDAV",
   "TypeTitleYandex": "Yandex.Disk",
-  "PublicRoomLinkValidTime": "This link is valid until {{date}} Once it expires, it will be impossible to access the room via this link."
+  "PublicRoomLinkValidTime": "This link is valid until {{date}} Once it expires, it will be impossible to access the room via this link.",
+  "LinkHasExpiredAndHasBeenDisabled": "The link has expired and has been disabled"
 }
diff --git a/packages/client/src/components/panels/EditLinkPanel/LimitTimeBlock.js b/packages/client/src/components/panels/EditLinkPanel/LimitTimeBlock.js
index 1c25473d92..768199bc0c 100644
--- a/packages/client/src/components/panels/EditLinkPanel/LimitTimeBlock.js
+++ b/packages/client/src/components/panels/EditLinkPanel/LimitTimeBlock.js
@@ -3,12 +3,15 @@ import ToggleBlock from "./ToggleBlock";
 import DateTimePicker from "@docspace/components/date-time-picker";
 
 const LimitTimeBlock = (props) => {
-  const { isLoading, expirationDate, setExpirationDate } = props;
+  const { isLoading, expirationDate, setExpirationDate, isExpired } = props;
 
   const onChange = (date) => {
     setExpirationDate(date);
   };
 
+  const minDate = new Date(new Date().getTime());
+  minDate.setDate(new Date().getDate() - 1);
+
   return (
     <ToggleBlock {...props} withToggle={false}>
       <DateTimePicker
@@ -16,6 +19,9 @@ const LimitTimeBlock = (props) => {
         isDisabled={isLoading}
         initialDate={expirationDate}
         onChange={onChange}
+        minDate={minDate}
+        openDate={new Date()}
+        hasError={isExpired}
       />
     </ToggleBlock>
   );
diff --git a/packages/client/src/components/panels/EditLinkPanel/StyledEditLinkPanel.js b/packages/client/src/components/panels/EditLinkPanel/StyledEditLinkPanel.js
index a78d89640c..bf7f54f642 100644
--- a/packages/client/src/components/panels/EditLinkPanel/StyledEditLinkPanel.js
+++ b/packages/client/src/components/panels/EditLinkPanel/StyledEditLinkPanel.js
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import Box from "@docspace/components/box";
 import Scrollbar from "@docspace/components/scrollbar";
 
@@ -58,6 +58,14 @@ const StyledEditLinkPanel = styled.div`
       }
     }
 
+    .edit-link-toggle-description {
+      color: ${({ theme }) => theme.editLink.text.color};
+    }
+
+    .edit-link-toggle-description_expired {
+      color: ${({ theme }) => theme.editLink.text.errorColor};
+    }
+
     .edit-link_password-block {
       width: 100%;
       display: flex;
@@ -90,6 +98,11 @@ const StyledEditLinkPanel = styled.div`
 
   .public-room_date-picker {
     padding-top: 8px;
+    ${({ isExpired }) =>
+      isExpired &&
+      css`
+        color: ${({ theme }) => theme.datePicker.errorColor};
+      `};
   }
 `;
 
diff --git a/packages/client/src/components/panels/EditLinkPanel/ToggleBlock.js b/packages/client/src/components/panels/EditLinkPanel/ToggleBlock.js
index 1c1e89db6d..554eeb0fe8 100644
--- a/packages/client/src/components/panels/EditLinkPanel/ToggleBlock.js
+++ b/packages/client/src/components/panels/EditLinkPanel/ToggleBlock.js
@@ -10,6 +10,7 @@ const ToggleBlock = ({
   onChange,
   children,
   withToggle = true,
+  isExpired,
 }) => {
   return (
     <div className="edit-link-toggle-block">
@@ -26,14 +27,19 @@ const ToggleBlock = ({
           />
         )}
       </div>
-      <Text
-        className="edit-link-toggle-description"
-        fontSize="12px"
-        fontWeight={400}
-        color="#A3A9AE"
-      >
-        {bodyText}
-      </Text>
+      {bodyText && (
+        <Text
+          className={
+            isExpired
+              ? "edit-link-toggle-description_expired"
+              : "edit-link-toggle-description"
+          }
+          fontSize="12px"
+          fontWeight={400}
+        >
+          {bodyText}
+        </Text>
+      )}
 
       {children}
     </div>
diff --git a/packages/client/src/components/panels/EditLinkPanel/index.js b/packages/client/src/components/panels/EditLinkPanel/index.js
index 82683ef661..adeed1a22e 100644
--- a/packages/client/src/components/panels/EditLinkPanel/index.js
+++ b/packages/client/src/components/panels/EditLinkPanel/index.js
@@ -142,8 +142,18 @@ const EditLinkPanel = (props) => {
 
   const linkNameIsValid = !!linkNameValue.trim();
 
+  const isExpired = expirationDate
+    ? new Date(expirationDate).getTime() <= new Date().getTime()
+    : false;
+
+  const expiredLinkText = isExpired
+    ? t("Translations:LinkHasExpiredAndHasBeenDisabled")
+    : expirationDate
+    ? `${t("Files:LinkValidUntil")}:`
+    : t("Files:ChooseExpirationDate");
+
   return (
-    <StyledEditLinkPanel>
+    <StyledEditLinkPanel isExpired={isExpired}>
       <Backdrop
         onClick={onClosePanel}
         visible={visible}
@@ -191,9 +201,10 @@ const EditLinkPanel = (props) => {
               onChange={onDenyDownloadChange}
             />
             <LimitTimeBlock
+              isExpired={isExpired}
               isLoading={isLoading}
               headerText={t("Files:LimitByTimePeriod")}
-              bodyText={t("Files:ChooseExpirationDate")}
+              bodyText={expiredLinkText}
               expirationDate={expirationDate}
               setExpirationDate={setExpirationDate}
             />
@@ -206,7 +217,7 @@ const EditLinkPanel = (props) => {
             primary
             size="normal"
             label={t("Common:SaveButton")}
-            isDisabled={isLoading || !linkNameIsValid}
+            isDisabled={isLoading || !linkNameIsValid || isExpired}
             onClick={onSave}
           />
           <Button
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.js
index 3e45bdc105..b9d24730fe 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.js
@@ -39,14 +39,23 @@ const LinkRow = (props) => {
 
   const [isLoading, setIsLoading] = useState(false);
 
-  const { title, shareLink, id, password, disabled, expirationDate } =
-    link.sharedTo;
+  const {
+    title,
+    shareLink,
+    id,
+    password,
+    disabled,
+    expirationDate,
+    isExpired,
+  } = link.sharedTo;
 
   const isLocked = !!password;
   const expiryDate = !!expirationDate;
   const date = moment(expirationDate).format("LLL");
 
-  const tooltipContent = t("Translations:PublicRoomLinkValidTime", { date });
+  const tooltipContent = isExpired
+    ? t("Translations:LinkHasExpiredAndHasBeenDisabled")
+    : t("Translations:PublicRoomLinkValidTime", { date });
 
   const onEditLink = () => {
     setEditLinkPanelIsVisible(true);
@@ -54,6 +63,12 @@ const LinkRow = (props) => {
   };
 
   const onDisableLink = () => {
+    if (isExpired) {
+      setEditLinkPanelIsVisible(true);
+      setLinkParams({ isEdit: true, link });
+      return;
+    }
+
     setIsLoading(true);
 
     const newLink = JSON.parse(JSON.stringify(link));
@@ -109,7 +124,7 @@ const LinkRow = (props) => {
       //   icon: ShareReactSvgUrl,
       //   // onClick: () => args.onClickLabel("label2"),
       // },
-      {
+      !isExpired && {
         key: "embedding-settings-key",
         label: t("Files:EmbeddingSettings"),
         icon: CodeReactSvgUrl,
@@ -143,7 +158,7 @@ const LinkRow = (props) => {
   };
 
   return (
-    <StyledLinkRow {...rest}>
+    <StyledLinkRow {...rest} isExpired={isExpired}>
       <Avatar
         className="avatar"
         size="min"
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/StyledPublicRoom.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/StyledPublicRoom.js
index 05ee19bb2b..7e20b7f9c5 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/StyledPublicRoom.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/StyledPublicRoom.js
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg";
 import commonIconsStyles from "@docspace/components/utils/common-icons-style";
 
@@ -17,9 +17,6 @@ const StyledPublicRoomBar = styled.div`
     flex-direction: column;
   }
 
-  .header-icon {
-  }
-
   .header-body {
     display: flex;
     height: fit-content;
@@ -88,6 +85,18 @@ const StyledLinkRow = styled.div`
     display: flex;
     gap: 16px;
   }
+
+  .avatar_role-wrapper {
+    ${({ isExpired }) =>
+      isExpired &&
+      css`
+        svg {
+          path {
+            fill: #f98e86;
+          }
+        }
+      `}
+  }
 `;
 
 export { StyledPublicRoomBar, StyledCrossIcon, LinksBlock, StyledLinkRow };
diff --git a/packages/components/avatar/index.js b/packages/components/avatar/index.js
index b149f7aed1..5c4582fa6e 100644
--- a/packages/components/avatar/index.js
+++ b/packages/components/avatar/index.js
@@ -117,6 +117,7 @@ const Avatar = (props) => {
                 size={size}
                 data-for={uniqueTooltipId}
                 data-tip={tooltipContent}
+                className="avatar_role-wrapper"
               >
                 {props.roleIcon ? props.roleIcon : roleIcon}
               </RoleWrapper>
diff --git a/packages/components/themes/base.js b/packages/components/themes/base.js
index edd8f6c8a9..fcb6b2646a 100644
--- a/packages/components/themes/base.js
+++ b/packages/components/themes/base.js
@@ -3119,6 +3119,13 @@ const Base = {
     borderColor: "#A3A9AE",
     dashedBorder: "1px dashed #5299E0",
   },
+
+  editLink: {
+    text: {
+      color: "#A3A9AE",
+      errorColor: "#F21C0E",
+    },
+  },
 };
 
 export default Base;
diff --git a/packages/components/themes/dark.js b/packages/components/themes/dark.js
index a554579abe..11dc4c17d2 100644
--- a/packages/components/themes/dark.js
+++ b/packages/components/themes/dark.js
@@ -3123,6 +3123,13 @@ const Dark = {
     borderColor: "#858585",
     dashedBorder: "1px dashed #fff",
   },
+
+  editLink: {
+    text: {
+      color: "#A3A9AE",
+      errorColor: "#F21C0E",
+    },
+  },
 };
 
 export default Dark;