Web: Files: EmbeddingPanel: fixed icon, added bar

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

@@ -5,5 +5,7 @@
   "Height": "Height",
   "Width": "Width",
   "EmbeddingDescription": "Embed Public room into your website or blog. Apply additional display settings for customizing the embedded content.",
-  "CodeSuccessfullyCopied": "Code to insert successfully copied to clipboard"
+  "CodeSuccessfullyCopied": "Code to insert successfully copied to clipboard",
+  "LinkProtectedWithPassword": "The link is protected with a password.",
+  "ContentRestricted": "Content copying, file downloading and printing are restricted."
 }

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

@@ -183,5 +183,6 @@
   "WantToRestoreTheRoom": "All shared 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 shared 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?",
   "WithSubfolders": "With subfolders",
-  "YouLeftTheRoom": "You have left the room"
+  "YouLeftTheRoom": "You have left the room",
+  "Protected": "protected"
 }

packages/client/src/components/Badges.js

@@ -33,7 +33,7 @@ import FormFillRectSvgUrl from "PUBLIC_DIR/images/form.fill.rect.svg?url";
 import AccessEditFormReactSvgUrl from "PUBLIC_DIR/images/access.edit.form.react.svg?url";
 import FileActionsConvertEditDocReactSvgUrl from "PUBLIC_DIR/images/file.actions.convert.edit.doc.react.svg?url";
 import LinkReactSvgUrl from "PUBLIC_DIR/images/link.react.svg?url";
-import TabletLinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.reat.svg?url";
+import TabletLinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.react.svg?url";
 import Refresh12ReactSvgUrl from "PUBLIC_DIR/images/icons/12/refresh.react.svg?url";
 import Mute12ReactSvgUrl from "PUBLIC_DIR/images/icons/12/mute.react.svg?url";
 import Mute16ReactSvgUrl from "PUBLIC_DIR/images/icons/16/mute.react.svg?url";

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

@@ -64,6 +64,7 @@ const EditLinkPanel = (props) => {
     language,
     isPublic,
     currentDeviceType,
+    setLinkParams,
   } = props;
 
   const [isLoading, setIsLoading] = useState(false);
@@ -129,6 +130,7 @@ const EditLinkPanel = (props) => {
     editExternalLink(roomId, newLink)
       .then((link) => {
         setExternalLink(link);
+        setLinkParams({ link, roomId });
 
         if (isEdit) {
           copy(linkValue);
@@ -311,6 +313,7 @@ export default inject(
       unsavedChangesDialogVisible,
       setUnsavedChangesDialog,
       linkParams,
+      setLinkParams,
     } = dialogsStore;
     const { externalLinks, editExternalLink, setExternalLink } =
       publicRoomStore;
@@ -342,6 +345,7 @@ export default inject(
       language: authStore.language,
       isPublic,
       currentDeviceType: settingsStore.currentDeviceType,
+      setLinkParams,
     };
   },
 )(

packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js

@@ -72,6 +72,22 @@ const StyledBody = styled.div`
       margin-bottom: 18px;
     }
 
+    .embedding-panel_bar {
+      margin: 23px 0px 21px 0px;
+
+      .embedding-panel_bar-header {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .header-icon {
+        svg path {
+          fill: ${({ theme }) => theme.embeddingPanel.iconColor};
+        }
+      }
+    }
+
     .embedding-panel_header-text {
       margin-bottom: 16px;
     }

packages/client/src/components/panels/EmbeddingPanel/index.tsx

@@ -41,10 +41,12 @@ import { toastr } from "@docspace/shared/components/toast";
 import { Textarea } from "@docspace/shared/components/textarea";
 import { IconButton } from "@docspace/shared/components/icon-button";
 import { Scrollbar } from "@docspace/shared/components/scrollbar/custom-scrollbar";
+import PublicRoomBar from "@docspace/shared/components/public-room-bar";
+import { Link, LinkType } from "@docspace/shared/components/link";
 import { Button, ButtonSize } from "@docspace/shared/components/button";
 import { TOption } from "@docspace/shared/components/combobox";
 import { TTranslation } from "@docspace/shared/types";
-import { TTheme } from "@docspace/shared/themes";
+import { TColorScheme, TTheme } from "@docspace/shared/themes";
 import DialogsStore from "SRC_DIR/store/DialogsStore";
 import { SettingsStore } from "@docspace/shared/store/SettingsStore";
 
@@ -53,6 +55,7 @@ import HeaderUrl from "PUBLIC_DIR/images/sdk-presets_header.react.svg?url";
 import HeaderDarkUrl from "PUBLIC_DIR/images/sdk-presets_header_dark.png?url";
 import SearchUrl from "PUBLIC_DIR/images/sdk-presets_search.react.svg?url";
 import SearchDarkUrl from "PUBLIC_DIR/images/sdk-presets_search_dark.png?url";
+import TabletLinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.react.svg?url";
 
 import {
   StyledEmbeddingPanel,
@@ -64,6 +67,34 @@ import {
 import { DisplayBlock } from "./sub-components/DisplayBlock";
 import { CheckboxElement } from "./sub-components/CheckboxElement";
 
+type LinkParamsLinkShareToType = {
+  denyDownload: boolean;
+  id: string;
+  internal: boolean;
+  isExpired: boolean;
+  linkType: number;
+  primary: boolean;
+  requestToken: string;
+  shareLink: string;
+  title: string;
+  password?: string;
+};
+
+type LinkParamsLinkType = {
+  access: number;
+  canEditAccess: boolean;
+  isLocked: boolean;
+  isOwner: boolean;
+  sharedTo: LinkParamsLinkShareToType;
+  subjectType: number;
+};
+
+type LinkParamsType = {
+  roomId?: number;
+  isEdit?: boolean;
+  link: LinkParamsLinkType;
+};
+
 type EmbeddingPanelProps = {
   t: TTranslation;
   theme: TTheme;
@@ -71,20 +102,35 @@ type EmbeddingPanelProps = {
   roomId: number;
   visible: boolean;
   setEmbeddingPanelIsVisible: (value: boolean) => void;
+  setEditLinkPanelIsVisible: (value: boolean) => void;
   currentDeviceType: DeviceType;
+  currentColorScheme: TColorScheme;
+  denyDownload: boolean;
+  linkParams: LinkParamsType;
+  setLinkParams: (linkParams: LinkParamsType) => void;
 };
 
 const EmbeddingPanelComponent = (props: EmbeddingPanelProps) => {
   const {
     t,
     theme,
-    requestToken,
-    roomId,
     visible,
     setEmbeddingPanelIsVisible,
+    setEditLinkPanelIsVisible,
     currentDeviceType,
+    currentColorScheme,
+    linkParams,
+    setLinkParams,
   } = props;
 
+  const { roomId, link } = linkParams;
+  const {
+    requestToken,
+    title: linkTitle,
+    password: withPassword,
+    denyDownload,
+  } = link.sharedTo;
+
   const dataDimensions = [
     { key: "percent", label: "%", default: true },
     { key: "pixel", label: "px" },
@@ -183,6 +229,11 @@ const EmbeddingPanelComponent = (props: EmbeddingPanelProps) => {
     onClose();
   };
 
+  const onEditLink = () => {
+    setEditLinkPanelIsVisible(true);
+    setLinkParams({ isEdit: true, link });
+  };
+
   const onKeyPress = (e: KeyboardEvent) =>
     (e.key === "Esc" || e.key === "Escape") && onClose();
 
@@ -196,6 +247,41 @@ const EmbeddingPanelComponent = (props: EmbeddingPanelProps) => {
 
   console.log("Embedding config", config);
 
+  const barTitle = (
+    <div className="embedding-panel_bar-header">
+      <Link
+        isHovered
+        type={LinkType.action}
+        fontSize="13px"
+        fontWeight={600}
+        color={currentColorScheme?.main?.accent}
+        onClick={onEditLink}
+      >
+        {linkTitle}
+      </Link>
+      <Text fontSize="12px" fontWeight={600}>
+        {t("Files:Protected")}
+      </Text>
+    </div>
+  );
+
+  const contentRestrictedTitle = t("EmbeddingPanel:ContentRestricted");
+  const withPasswordTitle = t("EmbeddingPanel:LinkProtectedWithPassword");
+
+  let barSubTitle = "";
+
+  if (withPassword) {
+    barSubTitle = withPasswordTitle;
+
+    if (denyDownload) {
+      barSubTitle += ` ${contentRestrictedTitle}`;
+    }
+  } else {
+    barSubTitle = contentRestrictedTitle;
+  }
+
+  const showLinkBar = withPassword || denyDownload;
+
   const embeddingPanelComponent = (
     <StyledEmbeddingPanel>
       <Backdrop onClick={onClose} visible={visible} isAside zIndex={310} />
@@ -217,6 +303,15 @@ const EmbeddingPanelComponent = (props: EmbeddingPanelProps) => {
                 {t("EmbeddingPanel:EmbeddingDescription")}
               </Text>
 
+              {showLinkBar && (
+                <PublicRoomBar
+                  className="embedding-panel_bar"
+                  headerText={barTitle}
+                  bodyText={barSubTitle}
+                  iconName={TabletLinkReactSvgUrl}
+                />
+              )}
+
               <Text
                 className="embedding-panel_header-text"
                 fontSize="15px"
@@ -335,17 +430,26 @@ export default inject(
     dialogsStore: DialogsStore;
     settingsStore: SettingsStore;
   }) => {
-    const { embeddingPanelIsVisible, setEmbeddingPanelIsVisible, linkParams } =
-      dialogsStore;
-    const { theme, currentDeviceType } = settingsStore;
+    const {
+      embeddingPanelIsVisible,
+      setEmbeddingPanelIsVisible,
+      linkParams,
+      setEditLinkPanelIsVisible,
+      setLinkParams,
+    } = dialogsStore;
+    const { theme, currentColorScheme, currentDeviceType } = settingsStore;
+
+    console.log("linkParams", linkParams);
 
     return {
       theme,
+      currentDeviceType,
+      currentColorScheme,
       visible: embeddingPanelIsVisible,
       setEmbeddingPanelIsVisible,
-      requestToken: linkParams?.link?.sharedTo?.requestToken,
-      roomId: linkParams?.roomId,
-      currentDeviceType,
+      setEditLinkPanelIsVisible,
+      linkParams,
+      setLinkParams,
     };
   },
 )(

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

@@ -35,7 +35,7 @@ import { IconButton } from "@docspace/shared/components/icon-button";
 import { ContextMenuButton } from "@docspace/shared/components/context-menu-button";
 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.reat.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";

packages/client/src/pages/Home/Section/Header/index.js

@@ -44,7 +44,7 @@ import PublicRoomIconUrl from "PUBLIC_DIR/images/public-room.react.svg?url";
 
 import LeaveRoomSvgUrl from "PUBLIC_DIR/images/logout.react.svg?url";
 import CatalogRoomsReactSvgUrl from "PUBLIC_DIR/images/catalog.rooms.react.svg?url";
-import TabletLinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.reat.svg?url";
+import TabletLinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.react.svg?url";
 
 import React from "react";
 import { inject, observer } from "mobx-react";

packages/client/src/store/ContextOptionsStore.js

@@ -57,7 +57,7 @@ import MuteReactSvgUrl from "PUBLIC_DIR/images/icons/16/mute.react.svg?url";
 import ShareReactSvgUrl from "PUBLIC_DIR/images/share.react.svg?url";
 import InvitationLinkReactSvgUrl from "PUBLIC_DIR/images/invitation.link.react.svg?url";
 import CopyToReactSvgUrl from "PUBLIC_DIR/images/copyTo.react.svg?url";
-import TabletLinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.reat.svg?url";
+import TabletLinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.react.svg?url";
 import MailReactSvgUrl from "PUBLIC_DIR/images/mail.react.svg?url";
 import RoomArchiveSvgUrl from "PUBLIC_DIR/images/room.archive.svg?url";
 import PluginActionsSvgUrl from "PUBLIC_DIR/images/plugin.actions.react.svg?url";

packages/shared/components/public-room-bar/PublicRoomBar.types.ts

@@ -27,8 +27,8 @@
 import React from "react";
 
 export interface PublicRoomBarProps {
-  headerText: string;
-  bodyText: string;
+  headerText: string | React.ReactNode;
+  bodyText: string | React.ReactNode;
   iconName?: string;
   onClose?: () => void;
   className?: string;

packages/shared/components/public-room-bar/index.tsx

@@ -36,6 +36,9 @@ import { PublicRoomBarProps } from "./PublicRoomBar.types";
 const PublicRoomBar = (props: PublicRoomBarProps) => {
   const { headerText, bodyText, iconName, onClose, ...rest } = props;
 
+  const headerAs = typeof headerText !== "string" ? "div" : undefined;
+  const bodyAs = typeof bodyText !== "string" ? "div" : undefined;
+
   return (
     <StyledPublicRoomBar {...rest}>
       <div className="text-container">
@@ -43,11 +46,20 @@ const PublicRoomBar = (props: PublicRoomBarProps) => {
           <div className="header-icon">
             <ReactSVG src={iconName || PeopleIcon} />
           </div>
-          <Text className="text-container_header" fontWeight={600}>
+          <Text
+            className="text-container_header"
+            fontWeight={600}
+            as={headerAs}
+          >
             {headerText}
           </Text>
         </div>
-        <Text className="text-container_body" fontSize="12px" fontWeight={400}>
+        <Text
+          className="text-container_body"
+          fontSize="12px"
+          fontWeight={400}
+          as={bodyAs}
+        >
           {bodyText}
         </Text>
       </div>

packages/shared/themes/base.ts

@@ -3357,6 +3357,7 @@ export const getBaseTheme = () => {
 
     embeddingPanel: {
       descriptionTextColor: "#657077",
+      iconColor: "#657077",
     },
   };
 };

packages/shared/themes/dark.ts

@@ -3334,6 +3334,7 @@ const Dark: TTheme = {
 
   embeddingPanel: {
     descriptionTextColor: "#ADADAD",
+    iconColor: "#ADADAD",
   },
 };