Merge branch 'develop' into bugfix/new-selector

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

@@ -25,6 +25,9 @@
   "DisableNotifications": "Disable notifications",
   "Document": "Document",
   "DocumentEdited": "Cannot perform the action because the document is being edited.",
+  "PasswordLink": " Add a password to protect your link.",
+  "ChooseExpirationDate": "Limit availability period for this link by setting an expiration date.",
+  "PreventDownloadFilesAndFolders": "Disable downloads of files and folders from this room to secure your data.",
   "EditRoom": "Edit room",
   "EmptyFile": "Empty file",
   "EmptyFilterDescriptionText": "No files or folders match this filter. Try a different one or clear filter to view all files. ",
@@ -138,6 +141,7 @@
   "ShareRoom": "Share room",
   "DownloadAll": "Download all",
   "PublicRoom": "Public room",
+  "RoomAvailableViaExternalLink": "Room available via external link",
   "PasswordSuccessfullyCopied": "Password successfully copied",
   "LinkAddedSuccessfully": "Link added successfully",
   "MoveToPublicRoomTitle": "Move to Public room",
@@ -149,5 +153,8 @@
   "LinkValidUntil": "This link will be valid until",
   "NoExternalLinks": "No external links",
   "AllLinksAreDisabled": "All links are disabled",
-  "MaximumNumberOfExternalLinksCreated": "Maximum number of external links created"
+  "MaximumNumberOfExternalLinksCreated": "Maximum number of external links created",
+  "AddNewExternalLink": "Add new external link",
+  "CopyLinkPassword": "Copy link password",
+  "ShowLinkActions": "Show link actions"
 }

packages/client/src/HOCs/withLoader.js

@@ -73,7 +73,6 @@ const withLoader = (WrappedComponent) => (Loader) => {
         isLoadingFilesFind,
         isInit: isPublicRoom ? true : isInit,
         showBodyLoader,
-        isPublicRoom,
         accountsViewAs,
       };
     }

packages/client/src/components/FilesSelector/FilesSelector.types.ts

@@ -27,6 +27,7 @@ export type Item = {
   isFolder: boolean;
   isDisabled?: boolean;
   security: Security;
+  roomType: number;
 };
 
 export type BreadCrumb = {
@@ -89,6 +90,7 @@ export type FilesSelectorProps = {
   withoutImmediatelyClose: boolean;
   isThirdParty: boolean;
   isEditorDialog: boolean;
+  setMoveToPublicRoomVisible: (visible: boolean, operationData: object) => void;
 
   onClose?: () => void;
 

packages/client/src/components/FilesSelector/helpers/useFilesHelper.ts

@@ -352,12 +352,14 @@ export const useFilesHelper = ({
               pathParts.map(async (folderId: number | string) => {
                 const folderInfo: any = await getFolderInfo(folderId);
 
-                const { title, id, parentId, rootFolderType } = folderInfo;
+                const { title, id, parentId, rootFolderType, roomType } =
+                  folderInfo;
 
                 return {
                   label: title,
                   id: id,
                   isRoom: parentId === 0 && rootFolderType === FolderType.Rooms,
+                  roomType,
                 };
               })
             );

packages/client/src/components/FilesSelector/helpers/useRoomsHelper.ts

@@ -23,6 +23,10 @@ const getRoomLogo = (roomType: number) => {
     case RoomsType.EditingRoom:
       path = "editing.svg";
       break;
+
+    case RoomsType.PublicRoom:
+      path = "public.svg";
+      break;
   }
 
   return iconSize32.get(path);
@@ -55,6 +59,7 @@ const convertRoomsToItems = (rooms: any) => {
       parentId,
       rootFolderType,
       isFolder: true,
+      roomType,
     };
   });
 

packages/client/src/components/FilesSelector/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 
 // @ts-ignore
 import Loaders from "@docspace/common/components/Loaders";
-import { FolderType } from "@docspace/common/constants";
+import { FolderType, RoomsType } from "@docspace/common/constants";
 
 import Aside from "@docspace/components/aside";
 import Backdrop from "@docspace/components/backdrop";
@@ -84,6 +84,7 @@ const FilesSelector = ({
   setSelectedItems,
 
   includeFolder,
+  setMoveToPublicRoomVisible,
 }: FilesSelectorProps) => {
   const { t } = useTranslation(["Files", "Common", "Translations"]);
 
@@ -177,6 +178,7 @@ const FilesSelector = ({
           id: item.id,
           isRoom:
             item.parentId === 0 && item.rootFolderType === FolderType.Rooms,
+          roomType: item.roomType,
         },
       ]);
       setSelectedItemId(item.id);
@@ -295,6 +297,10 @@ const FilesSelector = ({
     fileName: string,
     isChecked: boolean
   ) => {
+    const isPublic =
+      breadCrumbs.findIndex((f: any) => f.roomType === RoomsType.PublicRoom) >
+      -1;
+
     if ((isMove || isCopy || isRestoreAll) && !isEditorDialog) {
       const folderTitle = breadCrumbs[breadCrumbs.length - 1].label;
 
@@ -332,6 +338,11 @@ const FilesSelector = ({
           },
         };
 
+        if (isPublic) {
+          setMoveToPublicRoomVisible(true, operationData);
+          return;
+        }
+
         setIsRequestRunning(true);
         setSelectedItems();
         checkFileConflicts(selectedItemId, folderIds, fileIds)
@@ -548,6 +559,7 @@ export default inject(
       conflictResolveDialogVisible,
       isFolderActions,
       setIsFolderActions,
+      setMoveToPublicRoomVisible,
     } = dialogsStore;
 
     const { theme } = auth.settingsStore;
@@ -608,6 +620,7 @@ export default inject(
       setIsFolderActions,
       setSelectedItems,
       includeFolder,
+      setMoveToPublicRoomVisible,
     };
   }
 )(observer(FilesSelector));

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/index.js

@@ -92,13 +92,13 @@ const ThirdPartyStorage = ({
 
   return (
     <StyledThirdPartyStorage>
-      <ToggleParam
+      {/* <ToggleParam
         id="shared_third-party-storage-toggle"
         title={t("Common:ThirdPartyStorage")}
         description={t("ThirdPartyStorageDescription")}
         isChecked={storageLocation.isThirdparty}
         onCheckedChange={onChangeIsThirdparty}
-      />
+      /> */}
 
       {storageLocation.isThirdparty && (
         <ThirdPartyComboBox
@@ -137,11 +137,8 @@ const ThirdPartyStorage = ({
 export default inject(({ auth, settingsStore, dialogsStore }) => {
   const { currentColorScheme } = auth.settingsStore;
 
-  const {
+  const { openConnectWindow, saveThirdParty, deleteThirdParty } =
-    openConnectWindow,
+    settingsStore.thirdPartyStore;
-    saveThirdParty,
-    deleteThirdParty,
-  } = settingsStore.thirdPartyStore;
 
   const {
     setConnectItem,

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

@@ -25,6 +25,7 @@ const MoveToPublicRoomComponent = (props) => {
     setMovingInProgress,
     itemOperationToFolder,
     clearActiveOperations,
+    setSelectedItems,
   } = props;
 
   const [isLoading, setIsLoading] = useState(false);
@@ -69,6 +70,7 @@ const MoveToPublicRoomComponent = (props) => {
         setIsLoading(true);
       }, 500);
 
+    setSelectedItems();
     checkFileConflicts(destFolderId, folderIds, fileIds)
       .then(async (conflicts) => {
         if (conflicts.length) {
@@ -153,7 +155,8 @@ export default inject(
       moveToPublicRoomData,
     } = dialogsStore;
 
-    const { setConflictDialogData, checkFileConflicts } = filesActionsStore;
+    const { setConflictDialogData, checkFileConflicts, setSelectedItems } =
+      filesActionsStore;
     const { itemOperationToFolder, clearActiveOperations } = uploadDataStore;
 
     return {
@@ -169,6 +172,7 @@ export default inject(
       setMovingInProgress,
       itemOperationToFolder,
       clearActiveOperations,
+      setSelectedItems,
     };
   }
 )(observer(MoveToPublicRoomDialog));

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

@@ -9,6 +9,7 @@ const LimitTimeBlock = (props) => {
     setExpirationDate,
     setIsExpired,
     isExpired,
+    language,
   } = props;
 
   const onChange = (date) => {
@@ -35,6 +36,7 @@ const LimitTimeBlock = (props) => {
         minDate={minDate}
         openDate={new Date()}
         hasError={isExpired}
+        locale={language}
       />
     </ToggleBlock>
   );

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

@@ -86,7 +86,7 @@ const PasswordAccessBlock = (props) => {
               isDisabled={isLoading}
               onClick={onCleanClick}
             >
-              {t("Clean")}
+              {t("Files:Clean")}
             </Link>
             <Link
               fontSize="13px"
@@ -96,7 +96,7 @@ const PasswordAccessBlock = (props) => {
               isDisabled={isLoading}
               onClick={onCopyClick}
             >
-              {t("CopyPassword")}
+              {t("Files:CopyPassword")}
             </Link>
           </div>
         </div>

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

@@ -42,6 +42,7 @@ const EditLinkPanel = (props) => {
     isDenyDownload,
     link,
     date,
+    language,
   } = props;
 
   const [isLoading, setIsLoading] = useState(false);
@@ -219,6 +220,7 @@ const EditLinkPanel = (props) => {
               expirationDate={expirationDate}
               setExpirationDate={setExpirationDate}
               setIsExpired={setIsExpired}
+              language={language}
             />
           </div>
         </StyledScrollbar>
@@ -296,6 +298,7 @@ export default inject(({ auth, dialogsStore, publicRoomStore }) => {
     unsavedChangesDialogVisible,
     setUnsavedChangesDialog,
     link: link ?? template,
+    language: auth.language,
   };
 })(
   withTranslation(["SharingPanel", "Common", "Files"])(observer(EditLinkPanel))

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useState } from "react";
 import copy from "copy-to-clipboard";
 import Text from "@docspace/components/text";
 import Link from "@docspace/components/link";
@@ -9,28 +9,34 @@ import IconButton from "@docspace/components/icon-button";
 import Button from "@docspace/components/button";
 import CopyReactSvgUrl from "PUBLIC_DIR/images/copy.react.svg?url";
 import { StyledBody } from "./StyledEmbeddingPanel";
+import { objectToGetParams } from "@docspace/common/utils";
 
-const EmbeddingBody = ({ t, embeddingLink }) => {
+const EmbeddingBody = ({ t, link, roomId }) => {
   const [size, setSize] = useState("auto");
   const [widthValue, setWidthValue] = useState("100%");
   const [heightValue, setHeightValue] = useState("100%");
 
-  const getIframe = useCallback(
+  const config = {
-    () =>
+    width: `${widthValue}`,
-      `<iframe src="${embeddingLink}" width="${widthValue}" height="${heightValue}" frameborder="0" scrolling="no" allowtransparency> </iframe>`,
+    height: `${heightValue}`,
-    [embeddingLink, widthValue, heightValue]
+    frameId: "ds-frame",
-  );
+    init: true,
-  const [link, setLink] = useState(getIframe());
+    showHeader: true,
+    showTitle: true,
+    showMenu: false,
+    showFilter: true,
+    rootPath: "/rooms/shared/",
+    id: roomId,
+  };
 
-  useEffect(() => {
+  const scriptUrl = `${window.location.origin}/static/scripts/api.js`;
-    const link = getIframe();
+  const params = objectToGetParams(config);
-    setLink(link);
+  const codeBlock = `<div id="${config.frameId}">Fallback text</div>\n<script src="${scriptUrl}${params}"></script>`;
-  }, [embeddingLink, widthValue, heightValue]);
 
   const onChangeWidth = (e) => setWidthValue(e.target.value);
   const onChangeHeight = (e) => setHeightValue(e.target.value);
   const onCopyLink = () => {
-    copy(link);
+    copy(codeBlock);
     toastr.success(t("EmbeddingPanel:CodeCopySuccess"));
   };
 
@@ -127,14 +133,16 @@ const EmbeddingBody = ({ t, embeddingLink }) => {
           /> */}
         </div>
         <div className="embedding-panel_code-container">
-          <Text className="embedding-panel_text">{t("EmbedCode")}:</Text>
+          <Text className="embedding-panel_text">
+            {t("EmbeddingPanel:EmbedCode")}:
+          </Text>
           <IconButton
             className="embedding-panel_copy-icon"
             size="16"
             iconName={CopyReactSvgUrl}
             onClick={onCopyLink}
           />
-          <Textarea isReadOnly value={link} heightTextArea={150} />
+          <Textarea isReadOnly value={codeBlock} heightTextArea={150} />
         </div>
       </div>
     </StyledBody>

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

@@ -8,9 +8,7 @@ import { StyledEmbeddingPanel, StyledScrollbar } from "./StyledEmbeddingPanel";
 import EmbeddingBody from "./EmbeddingBody";
 
 const EmbeddingPanelComponent = (props) => {
-  const { t, link, visible, setEmbeddingPanelIsVisible } = props;
+  const { t, link, roomId, visible, setEmbeddingPanelIsVisible } = props;
-
-  const embeddingLink = "embeddingLinkembeddingLinkembeddingLinkembeddingLink";
 
   const scrollRef = useRef(null);
 
@@ -22,7 +20,7 @@ const EmbeddingPanelComponent = (props) => {
     (e.key === "Esc" || e.key === "Escape") && onClose();
 
   useEffect(() => {
-    scrollRef.current && scrollRef.current.view.focus();
+    scrollRef.current && scrollRef.current?.view?.focus();
 
     document.addEventListener("keyup", onKeyPress);
 
@@ -44,7 +42,7 @@ const EmbeddingPanelComponent = (props) => {
           </Heading>
         </div>
         <StyledScrollbar ref={scrollRef} stype="mediumBlack">
-          <EmbeddingBody t={t} embeddingLink={link} />
+          <EmbeddingBody t={t} link={link} roomId={roomId} />
         </StyledScrollbar>
       </Aside>
     </StyledEmbeddingPanel>
@@ -59,6 +57,7 @@ export default inject(({ dialogsStore }) => {
     visible: embeddingPanelIsVisible,
     setEmbeddingPanelIsVisible,
     link: linkParams?.link?.sharedTo?.shareLink,
+    roomId: linkParams?.roomId,
   };
 })(
   withTranslation(["Files", "EmbeddingPanel"])(

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

@@ -13,6 +13,7 @@ import EyeReactSvgUrl from "PUBLIC_DIR/images/eye.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";
@@ -86,13 +87,13 @@ const LinkRow = (props) => {
       .finally(() => setIsLoading(false));
   };
 
-  const onLockClick = () => {
+  const onCopyPassword = () => {
     copy(password);
     toastr.success(t("Files:PasswordSuccessfullyCopied"));
   };
 
   const onEmbeddingClick = () => {
-    setLinkParams({ link });
+    setLinkParams({ link, roomId });
     setEmbeddingPanelIsVisible(true);
   };
 
@@ -130,6 +131,14 @@ const LinkRow = (props) => {
         icon: CodeReactSvgUrl,
         onClick: onEmbeddingClick,
       },
+
+      !disabled && {
+        key: "copy-link-settings-key",
+        label: t("SharingPanel:CopyExternalLink"),
+        icon: CopyToReactSvgUrl,
+        onClick: onCopyExternalLink,
+      },
+
       disabled
         ? {
             key: "enable-link-key",
@@ -160,7 +169,6 @@ const LinkRow = (props) => {
   return (
     <StyledLinkRow {...rest} isExpired={isExpired}>
       <Avatar
-        className="avatar"
         size="min"
         source={EyeReactSvgUrl}
         roleIcon={expiryDate ? <ClockReactSvg /> : null}
@@ -198,7 +206,8 @@ const LinkRow = (props) => {
                 className="locked-icon"
                 size={16}
                 iconName={LockedReactSvgUrl}
-                onClick={onLockClick}
+                onClick={onCopyPassword}
+                title={t("Files:CopyLinkPassword")}
               />
             )}
             <IconButton
@@ -206,12 +215,17 @@ const LinkRow = (props) => {
               size={16}
               iconName={CopyReactSvgUrl}
               onClick={onCopyExternalLink}
+              title={t("SharingPanel:CopyExternalLink")}
             />
           </>
         )}
 
         {!isArchiveFolder && (
-          <ContextMenuButton getData={getData} isDisabled={false} />
+          <ContextMenuButton
+            getData={getData}
+            isDisabled={false}
+            title={t("Files:ShowLinkActions")}
+          />
         )}
       </div>
     </StyledLinkRow>

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

@@ -4,6 +4,7 @@ import PeopleIcon from "PUBLIC_DIR/images/people.react.svg?url";
 import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg?url";
 import IconButton from "@docspace/components/icon-button";
 import { StyledPublicRoomBar } from "./StyledPublicRoom";
+import Text from "@docspace/components/text";
 
 const PublicRoomBar = (props) => {
   const { headerText, bodyText, iconName, onClose, ...rest } = props;
@@ -15,9 +16,13 @@ const PublicRoomBar = (props) => {
           <div className="header-icon">
             <ReactSVG src={iconName ? iconName : PeopleIcon} />
           </div>
-          <div>{headerText}</div>
+          <Text className="text-container_header" fontWeight={600}>
+            {headerText}
+          </Text>
         </div>
-        <div className="body-container">{bodyText}</div>
+        <Text className="text-container_body" fontWeight={400}>
+          {bodyText}
+        </Text>
       </div>
 
       {/* <IconButton

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

@@ -29,7 +29,7 @@ const PublicRoomBlock = (props) => {
     <>
       {externalLinks.length > 0 && !isArchiveFolder && (
         <PublicRoomBar
-          headerText={t("Files:PublicRoom")}
+          headerText={t("Files:RoomAvailableViaExternalLink")}
           bodyText={t("CreateEditRoomDialog:PublicRoomBarDescription")}
         />
       )}
@@ -56,6 +56,7 @@ const PublicRoomBlock = (props) => {
                 onClick={onAddNewLink}
                 size={16}
                 isDisabled={externalLinks.length >= LINKS_LIMIT_COUNT}
+                title={t("Files:AddNewExternalLink")}
               />
 
               {externalLinks.length >= LINKS_LIMIT_COUNT && (

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

@@ -4,7 +4,7 @@ import commonIconsStyles from "@docspace/components/utils/common-icons-style";
 
 const StyledPublicRoomBar = styled.div`
   display: flex;
-  background-color: #f8f9f9;
+  background-color: ${(props) => props.theme.infoBlock.background};
   color: #333;
   font-size: 12px;
   padding: 12px 16px;
@@ -25,9 +25,12 @@ const StyledPublicRoomBar = styled.div`
     font-weight: 600;
   }
 
-  .body-container {
+  .text-container_header {
-    color: #555f65;
+    color: ${(props) => props.theme.infoBlock.headerColor};
-    font-weight: 400;
+  }
+
+  .text-container_body {
+    color: ${(props) => props.theme.infoBlock.descriptionColor};
   }
 
   .close-icon {
@@ -87,12 +90,13 @@ const StyledLinkRow = styled.div`
   }
 
   .avatar_role-wrapper {
-    ${({ isExpired }) =>
+    ${({ isExpired, theme }) =>
-      isExpired &&
       css`
         svg {
           path {
-            fill: #f98e86;
+            fill: ${isExpired
+              ? theme.infoPanel.links.iconErrorColor
+              : theme.infoPanel.links.iconColor};
           }
         }
       `}

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

@@ -938,7 +938,7 @@ const SectionHeaderContent = (props) => {
   const isRoot =
     isLoading && stateIsRoot
       ? stateIsRoot
-      : isRootFolder || isAccountsPage || isSettingsPage || isPublicRoom;
+      : isRootFolder || isAccountsPage || isSettingsPage;
 
   const currentTitle = isSettingsPage
     ? t("Common:Settings")

packages/client/src/pages/PublicRoom/PublicRoomPage.js

@@ -1,10 +1,9 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useLocation, Outlet } from "react-router-dom";
 import Section from "@docspace/common/components/Section";
 import SectionHeaderContent from "../Home/Section/Header";
 import SectionFilterContent from "../Home/Section/Filter";
-import SectionBodyContent from "../Home/Section/Body";
 import FilesPanels from "../../components/FilesPanels";
 
 import { RoomSharingDialog } from "../../components/dialogs";
@@ -62,7 +61,7 @@ const PublicRoomPage = (props) => {
         )}
 
         <Section.SectionBody>
-          <SectionBodyContent />
+          <Outlet />
         </Section.SectionBody>
       </Section>
 
@@ -83,8 +82,7 @@ export default inject(
     clientLoadingStore,
   }) => {
     const { withPaging } = auth.settingsStore;
-    const { validatePublicRoomKey, isLoaded, isLoading, roomStatus, roomId } =
+    const { isLoaded, isLoading, roomStatus, roomId } = publicRoomStore;
-      publicRoomStore;
 
     const { fetchFiles, isEmptyPage } = filesStore;
     const { getFilesSettings } = settingsStore;
@@ -113,7 +111,6 @@ export default inject(
       getFilesSettings,
 
       withPaging,
-      validatePublicRoomKey,
 
       showSecondaryProgressBar,
       secondaryProgressBarValue,

packages/client/src/pages/PublicRoom/index.js

@@ -21,6 +21,7 @@ const PublicRoom = (props) => {
     validatePublicRoomKey,
     getFilesSettings,
     setPublicRoomKey,
+    setIsArticleLoading,
   } = props;
 
   const navigate = useNavigate();
@@ -38,6 +39,7 @@ const PublicRoom = (props) => {
   const fetchRoomFiles = async () => {
     setPublicRoomKey(key);
     await getFilesSettings();
+    setIsArticleLoading(false);
 
     const filterObj = FilesFilter.getFilter(window.location);
 
@@ -94,22 +96,26 @@ const PublicRoom = (props) => {
   );
 };
 
-export default inject(({ auth, publicRoomStore, settingsStore }) => {
+export default inject(
-  const { validatePublicRoomKey, isLoaded, isLoading, roomStatus, roomId } =
+  ({ auth, publicRoomStore, settingsStore, clientLoadingStore }) => {
-    publicRoomStore;
+    const { validatePublicRoomKey, isLoaded, isLoading, roomStatus, roomId } =
+      publicRoomStore;
 
-  const { getFilesSettings } = settingsStore;
+    const { getFilesSettings } = settingsStore;
-  const { setPublicRoomKey } = auth.settingsStore;
+    const { setPublicRoomKey } = auth.settingsStore;
+    const { setIsArticleLoading } = clientLoadingStore;
 
-  return {
+    return {
-    roomId,
+      roomId,
-    isLoaded,
+      isLoaded,
-    isLoading,
+      isLoading,
-    roomStatus,
+      roomStatus,
 
-    getFilesSettings,
+      getFilesSettings,
 
-    validatePublicRoomKey,
+      validatePublicRoomKey,
-    setPublicRoomKey,
+      setPublicRoomKey,
-  };
+      setIsArticleLoading,
-})(observer(PublicRoom));
+    };
+  }
+)(observer(PublicRoom));

packages/client/src/routes/client.js

@@ -254,6 +254,17 @@ const ClientRoutes = [
         </ErrorBoundary>
       </PublicRoute>
     ),
+    errorElement: <Error404 />,
+    children: [
+      {
+        index: true,
+        element: (
+          <PublicRoute>
+            <FilesView />
+          </PublicRoute>
+        ),
+      },
+    ],
   },
   {
     path: "/wizard",

packages/client/src/store/ClientLoadingStore.js

@@ -4,8 +4,6 @@ const SHOW_LOADER_TIMER = 500;
 const MIN_LOADER_TIMER = 500;
 
 class ClientLoadingStore {
-  publicRoomStore;
-
   isLoaded = false;
   firstLoad = true;
 
@@ -33,10 +31,8 @@ class ClientLoadingStore {
     body: null,
   };
 
-  constructor(publicRoomStore) {
+  constructor() {
     makeAutoObservable(this);
-
-    this.publicRoomStore = publicRoomStore;
   }
 
   setIsLoaded = (isLoaded) => {
@@ -217,7 +213,7 @@ class ClientLoadingStore {
 
   get isLoading() {
     return (
-      (this.isArticleLoading && !this.publicRoomStore.isPublicRoom) ||
+      this.isArticleLoading ||
       this.pendingSectionLoaders.header ||
       this.pendingSectionLoaders.filter ||
       this.pendingSectionLoaders.body
@@ -225,7 +221,6 @@ class ClientLoadingStore {
   }
 
   get showArticleLoader() {
-    if (this.publicRoomStore.isPublicRoom) return false;
     return this.isArticleLoading;
   }
 

packages/client/src/store/ContextOptionsStore.js

@@ -38,7 +38,7 @@ import saveAs from "file-saver";
 import { isMobile } from "react-device-detect";
 import config from "PACKAGE_FILE";
 import toastr from "@docspace/components/toast/toastr";
-import { ShareAccessRights } from "@docspace/common/constants";
+import { ShareAccessRights, RoomsType } from "@docspace/common/constants";
 import combineUrl from "@docspace/common/utils/combineUrl";
 import {
   isMobile as isMobileUtils,
@@ -620,7 +620,7 @@ class ContextOptionsStore {
     return promise;
   };
 
-  onClickInviteUsers = (e) => {
+  onClickInviteUsers = (e, item) => {
     const data = (e.currentTarget && e.currentTarget.dataset) || e;
 
     const { action } = data;
@@ -635,7 +635,10 @@ class ContextOptionsStore {
         visible: true,
         roomId: action ? action : e,
         hideSelector: false,
-        defaultAccess: ShareAccessRights.ReadOnly,
+        defaultAccess:
+          item.roomType === RoomsType.PublicRoom
+            ? ShareAccessRights.RoomManager
+            : ShareAccessRights.ReadOnly,
       });
     }
   };
@@ -1035,7 +1038,7 @@ class ContextOptionsStore {
         key: "invite-users-to-room",
         label: t("Common:InviteUsers"),
         icon: PersonReactSvgUrl,
-        onClick: (e) => this.onClickInviteUsers(e),
+        onClick: (e) => this.onClickInviteUsers(e, item),
         disabled: false,
         action: item.id,
       },

packages/client/src/store/index.js

@@ -58,7 +58,7 @@ const treeFoldersStore = new TreeFoldersStore(selectedFolderStore, authStore);
 
 const publicRoomStore = new PublicRoomStore();
 
-const clientLoadingStore = new ClientLoadingStore(publicRoomStore);
+const clientLoadingStore = new ClientLoadingStore();
 
 const settingsStore = new SettingsStore(
   thirdPartyStore,

packages/common/components/Navigation/StyledNavigation.js

@@ -143,6 +143,13 @@ const StyledContainer = styled.div`
     .title-icon {
       min-width: 16px;
       min-height: 16px;
+
+      svg {
+        path,
+        rect {
+          fill: ${({ theme }) => theme.navigation.publicIcon};
+        }
+      }
     }
   }
 

packages/common/constants/index.js

@@ -131,8 +131,8 @@ export const RoomsType = Object.freeze({
   EditingRoom: 2,
   // ReviewRoom: 3, //TODO: Restore when certs will be done
   // ReadOnlyRoom: 4, //TODO: Restore when certs will be done
-  CustomRoom: 5,
   PublicRoom: 6,
+  CustomRoom: 5,
 });
 
 export const RoomsTypeValues = Object.freeze(

packages/components/date-picker/index.js

@@ -118,6 +118,13 @@ const DatePicker = (props) => {
   );
 
   const handleClick = (e) => {
+    if (
+      e.target.classList.contains("nav-thumb-vertical") ||
+      e.target.classList.contains("nav-thumb-horizontal")
+    ) {
+      return;
+    }
+
     !selectorRef?.current?.contains(e.target) &&
       !calendarRef?.current?.contains(e.target) &&
       !selectedItemRef?.current?.contains(e.target) &&
@@ -125,9 +132,9 @@ const DatePicker = (props) => {
   };
 
   useEffect(() => {
-    document.addEventListener("click", handleClick, { capture: true });
+    document.addEventListener("mousedown", handleClick, { capture: true });
     return () =>
-      document.removeEventListener("click", handleClick, { capture: true });
+      document.removeEventListener("mousedown", handleClick, { capture: true });
   }, []);
 
   useEffect(() => {

packages/components/table-container/StyledTableContainer.js

@@ -206,6 +206,10 @@ const StyledTableGroupMenu = styled.div`
       }
     }
   }
+
+  .scroll-body {
+    display: flex;
+  }
 `;
 
 StyledTableGroupMenu.defaultProps = { theme: Base };

packages/components/themes/base.js

@@ -1939,6 +1939,7 @@ const Base = {
     expanderColor: black,
     background: white,
     rootFolderTitleColor: "#A3A9AE",
+    publicIcon: black,
 
     icon: {
       fill: "#316DAA",
@@ -2013,6 +2014,11 @@ const Base = {
     closeButtonSize: "17px",
     closeButtonBg: "transparent",
 
+    links: {
+      iconColor: "#3B72A7",
+      iconErrorColor: "rgba(242, 28, 14, 0.5)", //"#F21C0E",
+    },
+
     members: {
       iconColor: "#A3A9AE",
       iconHoverColor: "#657077",
@@ -3121,6 +3127,12 @@ const Base = {
       errorColor: "#F21C0E",
     },
   },
+
+  infoBlock: {
+    background: "#F8F9F9",
+    headerColor: "#333",
+    descriptionColor: "#555F65",
+  },
 };
 
 export default Base;

packages/components/themes/dark.js

@@ -1935,6 +1935,7 @@ const Dark = {
     expanderColor: "#eeeeee",
     background: black,
     rootFolderTitleColor: "#858585",
+    publicIcon: "#858585",
 
     icon: {
       fill: "#E06A1B",
@@ -2009,6 +2010,11 @@ const Dark = {
     closeButtonSize: "12px",
     closeButtonBg: "#a2a2a2",
 
+    links: {
+      iconColor: "#858585",
+      iconErrorColor: "rgba(242, 28, 14, 0.5)", //"#F21C0E",
+    },
+
     members: {
       iconColor: "#A3A9AE",
       iconHoverColor: "#ffffff",
@@ -3124,6 +3130,12 @@ const Dark = {
       errorColor: "#F21C0E",
     },
   },
+
+  infoBlock: {
+    background: "#282828",
+    headerColor: "#FFF",
+    descriptionColor: "#ADADAD",
+  },
 };
 
 export default Dark;