From 3a3c4a6d3c05e0dc7d2c9d961e4f97f5268bde2c Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 10 Jul 2024 19:07:53 +0300 Subject: [PATCH] Web: Files: added public-room editing --- .../panels/EmbeddingPanel/index.tsx | 5 - .../InfoPanel/Body/views/Members/index.js | 5 +- .../{LinkRow.js => LinkRow.tsx} | 284 +++++++----------- .../Members/sub-components/MembersList.js | 13 +- packages/shared/api/files/types.ts | 5 +- packages/shared/api/rooms/index.ts | 21 +- .../AccessRightSelect.styled.ts | 31 +- .../access-right-select/AccessRightSelect.tsx | 11 +- .../AccessRightSelect.types.ts | 2 + .../ContextMenuButton.types.tsx | 2 +- .../shared/components/share/Share.helpers.ts | 35 +++ .../shared/components/share/Share.styled.ts | 40 ++- .../share/sub-components/ExpiredComboBox.tsx | 2 +- .../share/sub-components/LinkRow.tsx | 115 +++++-- public/images/icons/12/locked.react.svg | 15 + public/locales/en/Common.json | 1 + 16 files changed, 363 insertions(+), 224 deletions(-) rename packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/{LinkRow.js => LinkRow.tsx} (50%) create mode 100644 public/images/icons/12/locked.react.svg diff --git a/packages/client/src/components/panels/EmbeddingPanel/index.tsx b/packages/client/src/components/panels/EmbeddingPanel/index.tsx index 39999cb4c1..3b4325aa9f 100644 --- a/packages/client/src/components/panels/EmbeddingPanel/index.tsx +++ b/packages/client/src/components/panels/EmbeddingPanel/index.tsx @@ -44,9 +44,6 @@ import { ComboBox, TOption } from "@docspace/shared/components/combobox"; import { TData } from "@docspace/shared/components/toast/Toast.type"; import { TTranslation } from "@docspace/shared/types"; import { TColorScheme, TTheme } from "@docspace/shared/themes"; - -import { SettingsStore } from "@docspace/shared/store/SettingsStore"; -import { UserStore } from "@docspace/shared/store/UserStore"; import { ModalDialog, ModalDialogType, @@ -65,8 +62,6 @@ import { StyledModalDialog, StyledBody } from "./StyledEmbeddingPanel"; import { DisplayBlock } from "./sub-components/DisplayBlock"; import { CheckboxElement } from "./sub-components/CheckboxElement"; -import PublicRoomStore from "../../../store/PublicRoomStore"; -import DialogsStore from "../../../store/DialogsStore"; type LinkParamsLinkShareToType = { denyDownload: boolean; diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js index ab938c824e..ce42e7a44e 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js @@ -29,7 +29,7 @@ import { inject, observer } from "mobx-react"; import { withTranslation } from "react-i18next"; import { toastr } from "@docspace/shared/components/toast"; -import { RoomsType, ShareAccessRights } from "@docspace/shared/enums"; +import { RoomsType } from "@docspace/shared/enums"; import { LINKS_LIMIT_COUNT } from "@docspace/shared/constants"; import InfoPanelViewLoader from "@docspace/shared/skeletons/info-panel/body"; import MembersHelper from "../../helpers/MembersHelper"; @@ -182,6 +182,7 @@ const Members = ({ key="general-link" link={primaryLink} setIsScrollLocked={setIsScrollLocked} + isShareLink />, ); } @@ -193,6 +194,7 @@ const Members = ({ link={link} key={link?.sharedTo?.id} setIsScrollLocked={setIsScrollLocked} + isShareLink />, ); }); @@ -202,6 +204,7 @@ const Members = ({ key="create-additional-link" className="additional-link" onClick={onAddNewLink} + isShareLink >
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.tsx similarity index 50% rename from packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.js rename to packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.tsx index 6501d852f7..0c5725c25f 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.tsx @@ -24,70 +24,75 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode -import React, { useState } from "react"; import { observer, inject } from "mobx-react"; import { withTranslation } from "react-i18next"; import copy from "copy-to-clipboard"; -import { Avatar } from "@docspace/shared/components/avatar"; -import { Link } from "@docspace/shared/components/link"; -import { Text } from "@docspace/shared/components/text"; -import { IconButton } from "@docspace/shared/components/icon-button"; -import { ContextMenuButton } from "@docspace/shared/components/context-menu-button"; +import moment from "moment"; +import LinkRowComponent from "@docspace/shared/components/share/sub-components/LinkRow"; import { toastr } from "@docspace/shared/components/toast"; -import CopyReactSvgUrl from "PUBLIC_DIR/images/copy.react.svg?url"; -import LinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.react.svg?url"; import SettingsReactSvgUrl from "PUBLIC_DIR/images/catalog.settings.react.svg?url"; -import ShareReactSvgUrl from "PUBLIC_DIR/images/share.react.svg?url"; import CodeReactSvgUrl from "PUBLIC_DIR/images/code.react.svg?url"; import CopyToReactSvgUrl from "PUBLIC_DIR/images/copyTo.react.svg?url"; import OutlineReactSvgUrl from "PUBLIC_DIR/images/outline-true.react.svg?url"; 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-timezone"; import { RoomsType } from "@docspace/shared/enums"; +import { TTranslation } from "@docspace/shared/types"; +import { TFileLink } from "@docspace/shared/api/files/types"; +import { useState } from "react"; +import { TOption } from "@docspace/shared/components/combobox"; -import { StyledLinkRow } from "./Styled"; +type LinkRowProps = { + t: TTranslation; + link: TFileLink; + roomId: string | number; + setLinkParams: (linkParams: { + roomId: number | string; + isEdit?: boolean; + link: TFileLink; + isPublic?: boolean; + isFormRoom?: boolean; + }) => void; + setEditLinkPanelIsVisible: (value: boolean) => void; + setDeleteLinkDialogVisible: (value: boolean) => void; + setEmbeddingPanelData: (value: { + visible: boolean; + itemId?: string | number; + }) => void; -const LinkRow = (props) => { + isArchiveFolder: boolean; + setIsScrollLocked: (isScrollLocked: boolean) => void; + isPublicRoomType: boolean; + isFormRoom: boolean; +}; + +const LinkRow = (props: LinkRowProps) => { const { t, link, roomId, setLinkParams, - setExternalLink, - editExternalLink, setEditLinkPanelIsVisible, setDeleteLinkDialogVisible, setEmbeddingPanelData, isArchiveFolder, - theme, setIsScrollLocked, isPublicRoomType, isFormRoom, - ...rest + editExternalLink, + setExternalLink, } = props; - const [isLoading, setIsLoading] = useState(false); - - const { - title, - shareLink, - password, - disabled, - expirationDate, - isExpired, - primary, - } = link.sharedTo; + const { title, shareLink, password, isExpired, primary } = link.sharedTo; const isLocked = !!password; - const expiryDate = !!expirationDate; - const date = moment(expirationDate).tz(window.timezone).format("LLL"); + const isDisabled = isExpired; - const tooltipContent = isExpired - ? t("Translations:LinkHasExpiredAndHasBeenDisabled") - : t("Translations:PublicRoomLinkValidTime", { date }); + const [loadingLinks, setLoadingLinks] = useState<(string | number)[]>([]); + + const onCloseContextMenu = () => { + setIsScrollLocked(false); + }; const onEditLink = () => { setEditLinkPanelIsVisible(true); @@ -101,33 +106,11 @@ const LinkRow = (props) => { onCloseContextMenu(); }; - // const onDisableLink = () => { - // if (isExpired) { - // setEditLinkPanelIsVisible(true); - // setLinkParams({ isEdit: true, link, roomId, isPublic: isPublicRoomType, isFormRoom }); - // return; - // } - - // setIsLoading(true); - - // const newLink = JSON.parse(JSON.stringify(link)); - // newLink.sharedTo.disabled = !newLink.sharedTo.disabled; - - // editExternalLink(roomId, newLink) - // .then((link) => { - // setExternalLink(link); - - // disabled - // ? toastr.success(t("Files:LinkEnabledSuccessfully")) - // : toastr.success(t("Files:LinkDisabledSuccessfully")); - // }) - // .catch((err) => toastr.error(err?.message)) - // .finally(() => setIsLoading(false)); - // }; - const onCopyPassword = () => { - copy(password); - toastr.success(t("Files:PasswordSuccessfullyCopied")); + if (password) { + copy(password); + toastr.success(t("Files:PasswordSuccessfullyCopied")); + } }; const onEmbeddingClick = () => { @@ -152,12 +135,6 @@ const LinkRow = (props) => { setIsScrollLocked(true); }; - const onCloseContextMenu = () => { - setIsScrollLocked(false); - }; - - const isDisabled = disabled || isExpired; - const getData = () => { return [ { @@ -166,17 +143,6 @@ const LinkRow = (props) => { icon: SettingsReactSvgUrl, onClick: onEditLink, }, - // { - // key: "edit-link-separator", - // isSeparator: true, - // }, - // { - // key: "share-key", - // label: t("Files:Share"), - // icon: ShareReactSvgUrl, - // // onClick: () => args.onClickLabel("label2"), - // }, - !isDisabled && { key: "copy-link-settings-key", label: t("Files:CopySharedLink"), @@ -184,27 +150,21 @@ const LinkRow = (props) => { onClick: onCopyExternalLink, }, + !isDisabled && + isLocked && { + key: "copy-link-password-key", + label: t("Files:CopyLinkPassword"), + icon: LockedReactSvgUrl, + onClick: onCopyPassword, + }, + !isDisabled && { key: "embedding-settings-key", - label: t("Files:EmbeddingSettings"), + label: t("Files:Embed"), icon: CodeReactSvgUrl, onClick: onEmbeddingClick, }, - // disabled - // ? { - // key: "enable-link-key", - // label: t("Files:EnableLink"), - // icon: LoadedReactSvgUrl, - // onClick: onDisableLink, - // } - // : { - // key: "disable-link-key", - // label: t("Files:DisableLink"), - // icon: OutlineReactSvgUrl, - // onClick: onDisableLink, - // }, - { key: "delete-link-separator", isSeparator: true, @@ -222,91 +182,65 @@ const LinkRow = (props) => { ]; }; - const textColor = disabled ? theme.text.disableColor : theme.text.color; + const editExternalLinkAction = (newLink: TFileLink) => { + setLoadingLinks([newLink.sharedTo.id]); + + console.log("newLink", newLink); + + editExternalLink(roomId, newLink) + .then((linkData: TFileLink) => { + setExternalLink(linkData); + setLinkParams({ + link: linkData, + roomId, + isPublic: isPublicRoomType, + isFormRoom, + }); + + copy(link?.sharedTo?.shareLink); + toastr.success(t("Files:LinkEditedSuccessfully")); + }) + .catch((err: Error) => toastr.error(err?.message)) + .finally(() => setLoadingLinks([])); + }; + + const onAccessRightsSelect = (opt: TOption) => { + const newLink = { ...link }; + if (opt.access) newLink.access = opt.access; + editExternalLinkAction(newLink); + }; + + const changeExpirationOption = async ( + linkData: TFileLink, + expirationDate: moment.Moment | null, + ) => { + const newLink = { ...link }; + newLink.sharedTo.expirationDate = moment(expirationDate); + editExternalLinkAction(newLink); + }; return ( - - - -
- ) : null - } - withTooltip={expiryDate} - tooltipContent={tooltipContent} - /> - {isArchiveFolder ? ( - - {title} - - ) : ( - - {title} - - )} - - {disabled && {t("Settings:Disabled")}} - -
- {!disabled && !isExpired && !isArchiveFolder && ( - <> - {isLocked && ( - - )} - - - )} - - {!isArchiveFolder && ( - - )} -
- + ); }; -export default inject( +export default inject( ({ settingsStore, dialogsStore, - publicRoomStore, treeFoldersStore, infoPanelStore, + publicRoomStore, }) => { const { infoPanelSelection } = infoPanelStore; const { theme } = settingsStore; @@ -317,23 +251,25 @@ export default inject( setEmbeddingPanelData, setLinkParams, } = dialogsStore; - const { editExternalLink, setExternalLink } = publicRoomStore; const { isArchiveFolderRoot } = treeFoldersStore; + const { id, roomType } = infoPanelSelection!; + + const { editExternalLink, setExternalLink } = publicRoomStore; + return { setLinkParams, - editExternalLink, - roomId: infoPanelSelection.id, - setExternalLink, + roomId: id, setEditLinkPanelIsVisible, setDeleteLinkDialogVisible, setEmbeddingPanelData, isArchiveFolder: isArchiveFolderRoot, theme, isPublicRoomType: - infoPanelSelection.roomType === RoomsType.PublicRoom || - infoPanelSelection.roomType === RoomsType.FormRoom, - isFormRoom: infoPanelSelection?.roomType === RoomsType.FormRoom, + roomType === RoomsType.PublicRoom || roomType === RoomsType.FormRoom, + isFormRoom: roomType === RoomsType.FormRoom, + editExternalLink, + setExternalLink, }; }, )( diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/MembersList.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/MembersList.js index 20b40e462d..8ba59f970f 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/MembersList.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/MembersList.js @@ -77,6 +77,7 @@ const StyledList = styled(List)` `; const itemSize = 48; +const shareLinkItemSize = 68; const MembersList = (props) => { const { @@ -150,6 +151,16 @@ const MembersList = (props) => { [isNextPageLoading, loadNextPage], ); + const getItemSize = ({ index }) => { + const elem = list[index]; + + if (elem?.props?.isShareLink) { + return shareLinkItemSize; + } + + return itemSize; + }; + const onScroll = (e) => { const header = document.getElementById("members-list-header"); @@ -220,7 +231,7 @@ const MembersList = (props) => { onRowsRendered={onRowsRendered} ref={registerChild} rowCount={itemsCount} - rowHeight={itemSize} + rowHeight={getItemSize} rowRenderer={renderRow} width={width} isScrolling={isScrolling} diff --git a/packages/shared/api/files/types.ts b/packages/shared/api/files/types.ts index 30d033c2a7..fc668d3cd0 100644 --- a/packages/shared/api/files/types.ts +++ b/packages/shared/api/files/types.ts @@ -24,6 +24,7 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode +import moment from "moment"; import { TCreatedBy, TPathParts } from "../../types"; import { TUser } from "../people/types"; import { @@ -394,9 +395,11 @@ export type TFileLink = { requestToken: string; shareLink: string; title: string; - expirationDate?: string; + expirationDate?: moment.Moment | null; internal?: boolean; + password?: string; }; + subjectType: number; }; export type TFilesUsedSpace = { diff --git a/packages/shared/api/rooms/index.ts b/packages/shared/api/rooms/index.ts index 3cef69b3b0..cf3e7b41a4 100644 --- a/packages/shared/api/rooms/index.ts +++ b/packages/shared/api/rooms/index.ts @@ -27,7 +27,7 @@ /* eslint-disable @typescript-eslint/default-param-last */ import { AxiosRequestConfig } from "axios"; -import { FolderType, MembersSubjectType } from "../../enums"; +import { FolderType, MembersSubjectType, ShareAccessRights } from "../../enums"; import { request } from "../client"; import { checkFilterInstance, @@ -36,6 +36,7 @@ import { } from "../../utils/common"; import RoomsFilter from "./filter"; import { TGetRooms } from "./types"; +import moment from "moment"; export async function getRooms(filter: RoomsFilter, signal?: AbortSignal) { let params; @@ -394,15 +395,15 @@ export const acceptInvitationByLink = async () => { }; export function editExternalLink( - roomId, - linkId, - title, - access, - expirationDate, - linkType, - password, - disabled, - denyDownload, + roomId: number | string, + linkId: number | string, + title: string, + access: ShareAccessRights, + expirationDate: moment.Moment, + linkType: number, + password: string, + disabled: boolean, + denyDownload: boolean, ) { return request({ method: "put", diff --git a/packages/shared/components/access-right-select/AccessRightSelect.styled.ts b/packages/shared/components/access-right-select/AccessRightSelect.styled.ts index 4cbfc6fd56..f8fac314b7 100644 --- a/packages/shared/components/access-right-select/AccessRightSelect.styled.ts +++ b/packages/shared/components/access-right-select/AccessRightSelect.styled.ts @@ -43,6 +43,25 @@ const StyledWrapper = styled(ComboBox)` `} } + ${({ type, theme }) => + type === "onlyIcon" && + css` + .combo-button { + padding-right: 4px; + } + + .combo-button_selected-icon-container { + margin-right: 0px; + } + + .combo-buttons_arrow-icon, + .combo-button_selected-icon-container { + svg path { + fill: ${theme.iconButton.color}; + } + } + `} + @media ${mobile} { .backdrop-active { top: -64px; @@ -84,8 +103,16 @@ const StyledItemDescription = styled.div` StyledItemDescription.defaultProps = { theme: Base }; -const StyledItemIcon = styled.img` - margin-right: 8px; +const StyledItemIcon = styled.img<{ isShortenIcon?: boolean }>` + padding-inline-end: 8px; + + ${({ isShortenIcon }) => + isShortenIcon && + css` + padding-top: 2px; + width: 12px; + height: 12px; + `} `; const StyledItemContent = styled.div` diff --git a/packages/shared/components/access-right-select/AccessRightSelect.tsx b/packages/shared/components/access-right-select/AccessRightSelect.tsx index bd6acbb891..3034fe0195 100644 --- a/packages/shared/components/access-right-select/AccessRightSelect.tsx +++ b/packages/shared/components/access-right-select/AccessRightSelect.tsx @@ -46,6 +46,7 @@ export const AccessRightSelectPure = ({ advancedOptions, selectedOption, className, + type, ...props }: AccessRightSelectProps) => { const [currentItem, setCurrentItem] = useState(selectedOption); @@ -76,7 +77,12 @@ export const AccessRightSelectPure = ({ onClick={() => onSelectCurrentItem(item)} > - {item.icon && } + {item.icon && ( + + )} {item.label} @@ -108,6 +114,7 @@ export const AccessRightSelectPure = ({ return ( ; export type AccessRightSelectProps = PropsFromCombobox & { diff --git a/packages/shared/components/context-menu-button/ContextMenuButton.types.tsx b/packages/shared/components/context-menu-button/ContextMenuButton.types.tsx index 79cb2268fc..c2a280495a 100644 --- a/packages/shared/components/context-menu-button/ContextMenuButton.types.tsx +++ b/packages/shared/components/context-menu-button/ContextMenuButton.types.tsx @@ -77,7 +77,7 @@ export interface ContextMenuButtonProps { /** Sets the number of columns */ columnCount?: number; /** Sets the display type */ - displayType: ContextMenuButtonDisplayType; + displayType?: ContextMenuButtonDisplayType; /** Closing event */ onClose?: () => void; /** Sets the drop down open with the portal */ diff --git a/packages/shared/components/share/Share.helpers.ts b/packages/shared/components/share/Share.helpers.ts index 577a9b6d3f..ee1b8ae654 100644 --- a/packages/shared/components/share/Share.helpers.ts +++ b/packages/shared/components/share/Share.helpers.ts @@ -115,6 +115,41 @@ export const getAccessOptions = ( return items; }; +export const getRoomAccessOptions = (t: TTranslation) => { + return [ + { + access: ShareAccessRights.Editing, + description: + "Operations with existing files: viewing, editing, form filling, reviewing, commenting.", + key: "editing", + label: t("Common:Editor"), + icon: AccessEditReactSvgUrl, + }, + { + access: ShareAccessRights.Review, + description: + "Operations with existing files: viewing, reviewing, commenting.", + key: "review", + label: t("Translations:RoleReviewer"), + icon: AccessReviewReactSvgUrl, + }, + { + access: ShareAccessRights.Comment, + description: "Operations with existing files: viewing, commenting.", + key: "commenting", + label: t("Commentator"), + icon: AccessCommentReactSvgUrl, + }, + { + access: ShareAccessRights.ReadOnly, + description: "File viewing", + key: "viewing", + label: t("JavascriptSdk:Viewer"), + icon: EyeReactSvgUrl, + }, + ]; +}; + export const getExpiredOptions = ( t: TTranslation, setTwelveHours: VoidFunction, diff --git a/packages/shared/components/share/Share.styled.ts b/packages/shared/components/share/Share.styled.ts index 272e76712e..08e32389eb 100644 --- a/packages/shared/components/share/Share.styled.ts +++ b/packages/shared/components/share/Share.styled.ts @@ -24,7 +24,7 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode -import styled from "styled-components"; +import styled, { css } from "styled-components"; const StyledLinks = styled.div` margin-top: 20px; @@ -49,12 +49,29 @@ const StyledLinks = styled.div` } `; -const StyledLinkRow = styled.div` +const StyledLinkRow = styled.div<{ isExpired?: boolean }>` padding: 8px 0; display: flex; gap: 8px; align-items: center; + .avatar_role-wrapper { + /* svg { + path { + fill: ${({ isExpired, theme }) => + isExpired + ? theme.infoPanel.links.iconErrorColor + : theme.infoPanel.links.iconColor}; + } + } */ + + svg { + path:nth-child(3) { + fill: ${({ theme }) => theme.backgroundColor}; + } + } + } + .combo-box { padding: 0; } @@ -71,14 +88,23 @@ const StyledLinkRow = styled.div` .internal-combobox { padding: 0px; + + .combo-button-label { + font-size: 14px; + } } - .internal-combobox_expiered { + .link-options_title { font-size: 14px; font-weight: 600; line-height: 16px; margin: 6px 8px; - color: ${({ theme }) => theme.infoPanel.members.linkAccessComboboxExpired}; + + ${({ theme, isExpired }) => + isExpired && + css` + color: ${theme.infoPanel.members.linkAccessComboboxExpired}; + `}; } .expired-options { @@ -91,6 +117,7 @@ const StyledLinkRow = styled.div` .expire-text { margin-inline-start: 8px; + color: ${({ theme }) => theme.infoPanel.links.primaryColor}; } .link-actions { @@ -98,6 +125,11 @@ const StyledLinkRow = styled.div` gap: 16px; align-items: center; margin-inline-start: auto; + + .link-row_copy-icon { + min-width: 16px; + min-height: 16px; + } } .loader { diff --git a/packages/shared/components/share/sub-components/ExpiredComboBox.tsx b/packages/shared/components/share/sub-components/ExpiredComboBox.tsx index 12c7a5c77a..33fb3faafe 100644 --- a/packages/shared/components/share/sub-components/ExpiredComboBox.tsx +++ b/packages/shared/components/share/sub-components/ExpiredComboBox.tsx @@ -150,7 +150,7 @@ const ExpiredComboBox = ({ ); } - const date = t("Common:Unlimited"); + const date = t("Common:Unlimited").toLowerCase(); return ( diff --git a/packages/shared/components/share/sub-components/LinkRow.tsx b/packages/shared/components/share/sub-components/LinkRow.tsx index 6b36ac4b63..9b718d6c25 100644 --- a/packages/shared/components/share/sub-components/LinkRow.tsx +++ b/packages/shared/components/share/sub-components/LinkRow.tsx @@ -30,6 +30,7 @@ import PlusIcon from "PUBLIC_DIR/images/plus.react.svg?url"; import UniverseIcon from "PUBLIC_DIR/images/universe.react.svg?url"; import PeopleIcon from "PUBLIC_DIR/images/people.react.svg?url"; import CopyIcon from "PUBLIC_DIR/images/copy.react.svg?url"; +import LockedReactSvg from "PUBLIC_DIR/images/icons/12/locked.react.svg"; import { RowSkeleton } from "../../../skeletons/share"; import { TFileLink } from "../../../api/files/types"; @@ -43,11 +44,18 @@ import { Loader, LoaderTypes } from "../../loader"; import { Text } from "../../text"; import { StyledLinkRow, StyledSquare } from "../Share.styled"; -import { getShareOptions, getAccessOptions } from "../Share.helpers"; +import { + getShareOptions, + getAccessOptions, + getRoomAccessOptions, +} from "../Share.helpers"; import { LinkRowProps } from "../Share.types"; import ExpiredComboBox from "./ExpiredComboBox"; +import { AccessRightSelect } from "../../access-right-select"; +import { ContextMenuButton } from "../../context-menu-button"; + const LinkRow = ({ onAddClick, links, @@ -56,11 +64,22 @@ const LinkRow = ({ changeExpirationOption, availableExternalRights, loadingLinks, + + isRoom, + linkTitle, + getData, + onOpenContextMenu, + onCloseContextMenu, + onAccessRightsSelect, }: LinkRowProps) => { - const { t } = useTranslation(["Common"]); + const { t } = useTranslation(["Common", "Translations"]); const shareOptions = getShareOptions(t) as TOption[]; - const accessOptions = getAccessOptions(t, availableExternalRights); + const accessOptions = availableExternalRights + ? getAccessOptions(t, availableExternalRights) + : []; + + const roomAccessOptions = isRoom ? getRoomAccessOptions(t) : []; const onCopyLink = (link: TFileLink) => { copyShareLink(link.sharedTo.shareLink); @@ -88,14 +107,24 @@ const LinkRow = ({ (option) => option && "access" in option && option.access === link.access, ); + + const roomSelectedOptions = roomAccessOptions.find( + (option) => + option && "access" in option && option.access === link.access, + ); + const avatar = shareOption?.key === "anyone" ? UniverseIcon : PeopleIcon; const isExpiredLink = link.sharedTo.isExpired; + const isLocked = !!link.sharedTo.password; const isLoaded = loadingLinks.includes(link.sharedTo.id); return ( - + {isLoaded ? ( ) : ( @@ -103,10 +132,21 @@ const LinkRow = ({ size={AvatarSize.min} role={AvatarRole.user} source={avatar} + roleIcon={isLocked ? : undefined} + + // roleIcon={ + // expiryDate ? ( + //
+ // + //
+ // ) : null + // } /> )}
- {!isExpiredLink ? ( + {isRoom ? ( + {linkTitle} + ) : !isExpiredLink ? ( ) : ( - - {shareOption?.label} - + {shareOption?.label} )} onCopyLink(link)} title={t("Common:CreateAndCopy")} isDisabled={isExpiredLink || isLoaded} /> - changeAccessOption(item, link)} - scaled={false} - scaledOptions={false} - showDisabledItems - size={ComboBoxSize.content} - fillIcon - modernView - type="onlyIcon" - isDisabled={isExpiredLink || isLoaded} - /> + {isRoom ? ( + <> + + + + ) : ( + changeAccessOption(item, link)} + scaled={false} + scaledOptions={false} + showDisabledItems + size={ComboBoxSize.content} + fillIcon + modernView + type="onlyIcon" + isDisabled={isExpiredLink || isLoaded} + /> + )}
); diff --git a/public/images/icons/12/locked.react.svg b/public/images/icons/12/locked.react.svg new file mode 100644 index 0000000000..e37e3b9708 --- /dev/null +++ b/public/images/icons/12/locked.react.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/locales/en/Common.json b/public/locales/en/Common.json index d55a42e9f6..0c995a2a5d 100644 --- a/public/locales/en/Common.json +++ b/public/locales/en/Common.json @@ -143,6 +143,7 @@ "EditButton": "Edit", "Editing": "Editing", "Editor": "Editor", + "Commentator": "Commentator", "EditPDFForm": "Edit PDF form", "Email": "Email", "EmptyDescription": "The list of users previously invited to {{productName}} or separate rooms will appear here. You will be able to invite these users for collaboration at any time.",