Merge branch 'hotfix/v2.6.1' into bugfix/Bug69117

2024-07-30 10:34:55 +03:00 · 2024-07-30 10:34:55 +03:00 · 12355b9192
commit 12355b9192
parent 69a4c5f395 46a1e1455b
5 changed files with 239 additions and 116 deletions
--- a/packages/client/public/locales/en/Translations.json
+++ b/packages/client/public/locales/en/Translations.json
@ -33,11 +33,14 @@
  "RoleEditorDescription": "Operations with existing files: viewing, editing, form filling, reviewing, commenting.",
  "RoleFormFiller": "Form filler",
  "RoleFormFillerDescription": "Operations with existing files: viewing, form filling, reviewing, commenting.",
+  "RoleFormFillerFormRoomDescription": "Form fillers can fill out forms and view only their completed/started forms within the Complete and In Process folders.",
  "RolePortalAdminDescription": "{{productName}} admins can access {{productName}} settings, manage and archive rooms, invite new users and assign roles below their level. All admins have access to the Personal section.",
  "RolePowerUserDescription": "Power users can create and edit files in the room, but can't create rooms, manage users, or access settings.",
+  "RolePowerUserFormRoomDescription": "Power users can upload forms to the room and have full access to the Complete and In Process folders.",
  "RoleReviewer": "Reviewer",
  "RoleReviewerDescription": "Operations with existing files: viewing, reviewing, commenting.",
  "RoleRoomAdminDescription": "Room admins can create and manage the assigned rooms, invite new users, and assign roles of room admin and lower. All admins have access to the Personal section.",
+  "RoleRoomAdminFormRoomDescription": "Room admins can create and manage rooms, invite new users and assign roles of room admin or lower. Room admins can upload forms to the room and have full access to the Complete and In Process folders.",
  "RoleUserDescription": "Users can only access the rooms they are invited to by admins. They can't create own rooms, folders or files.",
  "RoleViewer": "Viewer",
  "RoleViewerDescription": "File viewing",
--- a/packages/client/src/components/panels/InvitePanel/utils/index.js
+++ b/packages/client/src/components/panels/InvitePanel/utils/index.js
@ -31,6 +31,50 @@ import {
 } from "@docspace/shared/enums";
 import { checkIfAccessPaid } from "SRC_DIR/helpers";

+/**
+ * @param {RoomsType} roomType
+ * @param {(key: string) => string} t
+ * @returns {string}
+ */
+const getRoomAdminDescription = (roomType, t) => {
+  switch (roomType) {
+    case RoomsType.FormRoom:
+      return t("Translations:RoleRoomAdminFormRoomDescription");
+
+    default:
+      return t("Translations:RoleRoomAdminDescription");
+  }
+};
+/**
+ * @param {RoomsType} roomType
+ * @param {(key: string)=> string} t
+ * @returns {string}
+ */
+const getPowerUserDescription = (roomType, t) => {
+  switch (roomType) {
+    case RoomsType.FormRoom:
+      return t("Translations:RolePowerUserFormRoomDescription");
+
+    default:
+      return t("Translations:RolePowerUserDescription");
+  }
+};
+
+/**
+ * @param {RoomsType} roomType
+ * @param {(key: string)=> string} t
+ * @returns {string}
+ */
+const getFormFillerDescription = (roomType, t) => {
+  switch (roomType) {
+    case RoomsType.FormRoom:
+      return t("Translations:RoleFormFillerFormRoomDescription");
+
+    default:
+      return t("Translations:RoleFormFillerDescription");
+  }
+};
+
 export const getAccessOptions = (
  t,
  roomType = RoomsType.CustomRoom,
@ -56,7 +100,7 @@ export const getAccessOptions = (
    roomAdmin: {
      key: "roomAdmin",
      label: t("Common:RoomAdmin"),
-      description: t("Translations:RoleRoomAdminDescription"),
+      description: getRoomAdminDescription(roomType, t),
      ...(!standalone && { quota: t("Common:Paid") }),
      color: "#EDC409",
      access:
@ -66,7 +110,7 @@ export const getAccessOptions = (
    collaborator: {
      key: "collaborator",
      label: t("Common:PowerUser"),
-      description: t("Translations:RolePowerUserDescription"),
+      description: getPowerUserDescription(roomType, t),
      ...(!standalone && { quota: t("Common:Paid") }),
      color: "#EDC409",
      access:
@ -92,7 +136,7 @@ export const getAccessOptions = (
    formFiller: {
      key: "formFiller",
      label: t("Translations:RoleFormFiller"),
-      description: t("Translations:RoleFormFillerDescription"),
+      description: getFormFillerDescription(roomType, t),
      access: ShareAccessRights.FormFilling,
      type: "user",
    },
--- a/packages/doceditor/src/components/completed-form/CompletedForm.styled.ts
+++ b/packages/doceditor/src/components/completed-form/CompletedForm.styled.ts
@ -27,33 +27,61 @@

 import styled from "styled-components";

-import { mobile } from "@docspace/shared/utils";
+import { mobile, mobileMore } from "@docspace/shared/utils";

 import type { CompletedFormLayoutProps } from "./CompletedForm.types";

-export const CompletedFormLayout = styled.section<CompletedFormLayoutProps>`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-
+export const ContainerCompletedForm = styled.section<CompletedFormLayoutProps>`
  box-sizing: border-box;

  * {
    box-sizing: border-box;
  }

-  width: 100%;
-  min-height: 100dvh;
-  padding: 100px 16px 16px;
-
  background-image: ${(props) => props.bgPattern};
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;

+  width: 100%;
+  min-height: 100dvh;
+  height: 100%;
+
+  .scroller {
+    > .scroll-body {
+      display: flex;
+      flex-direction: column;
+      padding-inline-end: 16px !important;
+    }
+  }
+
+  .completed-form__default-layout {
+    padding: clamp(42px, 8vh, 100px) 16px 16px;
+
+    picture {
+    }
+  }
+
+  @media ${mobile} {
+    .completed-form__default-layout {
+      padding: 0px 16px 16px;
+    }
+
+    background-image: none;
+  }
+`;
+
+export const CompletedFormLayout = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  padding: clamp(42px, 8vh, 100px) 0px 16px 16px;
+
  picture {
-    margin-bottom: clamp(40px, 10vh, 125px);
+    margin-bottom: clamp(40px, 8vh, 125px);
+    user-select: none;
  }

  .link {
@ -68,9 +96,14 @@ export const CompletedFormLayout = styled.section<CompletedFormLayoutProps>`
    margin-top: 24px;
  }

-  @media ${mobile} {
-    background-image: none;
+  @media ${mobileMore} and (max-height: 650px) {
+    padding-top: 42px;
+    .completed-form__logo {
+      margin-bottom: 40px;
+    }
+  }

+  @media ${mobile} {
    padding-top: 0px;

    .completed-form__icon {
@ -95,6 +128,11 @@ export const CompletedFormLayout = styled.section<CompletedFormLayoutProps>`
        align-self: center;
      }
    }
+
+    .completed-form__empty {
+      gap: 20px;
+      margin-top: 24px;
+    }
  }
 `;

@ -228,6 +266,19 @@ export const FormNumberWrapper = styled.div`

  grid-area: form-number;

+  .form-number--big {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  @media ${mobileMore} {
+    .form-number--big {
+      font-size: 23px;
+      line-height: 28px;
+    }
+  }
+
  > div {
    justify-content: center;
    flex-grow: 1;
--- a/packages/doceditor/src/components/completed-form/CompletedForm.tsx
+++ b/packages/doceditor/src/components/completed-form/CompletedForm.tsx
@ -46,10 +46,11 @@ import { isNullOrUndefined } from "@docspace/shared/utils/typeGuards";

 import { Button, ButtonSize } from "@docspace/shared/components/button";
 import { WhiteLabelLogoType } from "@docspace/shared/enums";
-import { mobile, mobileMore } from "@docspace/shared/utils";
+import { classNames, mobile, mobileMore } from "@docspace/shared/utils";
 import { Heading, HeadingLevel } from "@docspace/shared/components/heading";
 import { IconButton } from "@docspace/shared/components/icon-button";
 import { copyShareLink } from "@docspace/shared/utils/copy";
+import { Scrollbar } from "@docspace/shared/components/scrollbar";

 import {
  Avatar,
@ -69,10 +70,13 @@ import {
  FormNumberWrapper,
  ManagerWrapper,
  MainContent,
+  ContainerCompletedForm,
 } from "./CompletedForm.styled";

 import type { CompletedFormProps } from "./CompletedForm.types";

+const BIG_FORM_NUMBER = 9_999_999;
+
 export const CompletedForm = ({
  session,
  share,
@ -92,25 +96,29 @@ export const CompletedForm = ({

  if (!session)
    return (
-      <CompletedFormLayout bgPattern={bgPattern}>
-        <picture className="completed-form__logo">
-          <source media={mobile} srcSet={smallLogoUrl} />
-          <source media={mobileMore} srcSet={logoUrl} />
-          <img src={logoUrl} alt="logo" />
-        </picture>
-        <Image
-          priority
-          src={iconUrl}
-          className="completed-form__icon"
-          alt="icon"
-          width={416}
-          height={200}
-        />
-        <TextWrapper className="completed-form__empty">
-          <Heading level={HeadingLevel.h1}>{t("CompletedForm:Title")}</Heading>
-          <Text noSelect>{t("CompletedForm:Description")}</Text>
-        </TextWrapper>
-      </CompletedFormLayout>
+      <ContainerCompletedForm bgPattern={bgPattern}>
+        <CompletedFormLayout className="completed-form__default-layout">
+          <picture className="completed-form__logo">
+            <source media={mobile} srcSet={smallLogoUrl} />
+            <source media={mobileMore} srcSet={logoUrl} />
+            <img src={logoUrl} alt="logo" />
+          </picture>
+          <Image
+            priority
+            src={iconUrl}
+            className="completed-form__icon"
+            alt="icon"
+            width={416}
+            height={200}
+          />
+          <TextWrapper className="completed-form__empty">
+            <Heading level={HeadingLevel.h1}>
+              {t("CompletedForm:Title")}
+            </Heading>
+            <Text noSelect>{t("CompletedForm:Description")}</Text>
+          </TextWrapper>
+        </CompletedFormLayout>
+      </ContainerCompletedForm>
    );

  const {
@ -172,85 +180,100 @@ export const CompletedForm = ({
  });

  return (
-    <CompletedFormLayout bgPattern={bgPattern}>
-      <picture className="completed-form__logo">
-        <source media={mobile} srcSet={smallLogoUrl} />
-        <source media={mobileMore} srcSet={logoUrl} />
-        <img src={logoUrl} alt="logo" />
-      </picture>
-      <TextWrapper>
-        <Heading level={HeadingLevel.h1}>
-          {t("CompletedForm:FormCompletedSuccessfully")}
-        </Heading>
-        <Text noSelect>
-          {isAnonim
-            ? t("CompletedForm:DescriptionForAnonymous")
-            : t("CompletedForm:DescriptionForRegisteredUser")}
-        </Text>
-      </TextWrapper>
-      <MainContent>
-        <Box className="completed-form__file">
-          <PDFIcon />
-          <Heading className="completed-form__filename" level={HeadingLevel.h5}>
-            {completedForm.title}
-          </Heading>
-          <IconButton
-            size={16}
-            className="completed-form__download"
-            iconName={isAnonim ? DownloadIconUrl : LinkIconUrl}
-            onClick={isAnonim ? handleDownload : copyLinkFile}
-          />
-        </Box>
-        <FormNumberWrapper>
-          <span className="label">{t("CompletedForm:FormNumber")}</span>
-          <Box>
-            <Text className="completed-form__form-number">{formNumber}</Text>
-          </Box>
-        </FormNumberWrapper>
-        <ManagerWrapper>
-          <span className="label">{t("CompletedForm:FormOwner")}</span>
-          <Box>
-            <Avatar
-              className="manager__avatar"
-              size={AvatarSize.medium}
-              role={AvatarRole.manager}
-              source={manager.avatar}
-            />
-            <Heading level={HeadingLevel.h3} className="manager__user-name">
-              {decode(manager.displayName)}
+    <ContainerCompletedForm bgPattern={bgPattern}>
+      <Scrollbar fixedSize>
+        <CompletedFormLayout>
+          <picture className="completed-form__logo">
+            <source media={mobile} srcSet={smallLogoUrl} />
+            <source media={mobileMore} srcSet={logoUrl} />
+            <img src={logoUrl} alt="logo" />
+          </picture>
+          <TextWrapper>
+            <Heading level={HeadingLevel.h1}>
+              {t("CompletedForm:FormCompletedSuccessfully")}
            </Heading>
-            <Link
-              className="manager__mail link"
-              href={`mailto:${manager.email}`}
-            >
-              <MailIcon />
-              <span>{manager.email}</span>
-            </Link>
-          </Box>
-        </ManagerWrapper>
-      </MainContent>
-      <ButtonWrapper isShreFile={isShreFile && !isRoomMember}>
-        <Button
-          scale
-          primary
-          size={ButtonSize.medium}
-          label={
-            isAnonim ? t("Common:Download") : t("CompletedForm:CheckReadyForms")
-          }
-          onClick={isAnonim ? handleDownload : gotoCompleteFolder}
-        />
-        {(!isShreFile || isRoomMember) && (
-          <Button
-            scale
-            size={ButtonSize.medium}
-            label={t("CompletedForm:BackToRoom")}
-            onClick={handleBackToRoom}
-          />
-        )}
-      </ButtonWrapper>
-      <Link className="link" href={`/?${fillAgainSearchParams.toString()}`}>
-        {t("CompletedForm:FillItOutAgain")}
-      </Link>
-    </CompletedFormLayout>
+            <Text noSelect>
+              {isAnonim
+                ? t("CompletedForm:DescriptionForAnonymous")
+                : t("CompletedForm:DescriptionForRegisteredUser")}
+            </Text>
+          </TextWrapper>
+          <MainContent>
+            <Box className="completed-form__file">
+              <PDFIcon />
+              <Heading
+                className="completed-form__filename"
+                level={HeadingLevel.h5}
+              >
+                {completedForm.title}
+              </Heading>
+              <IconButton
+                size={16}
+                className="completed-form__download"
+                iconName={isAnonim ? DownloadIconUrl : LinkIconUrl}
+                onClick={isAnonim ? handleDownload : copyLinkFile}
+              />
+            </Box>
+            <FormNumberWrapper>
+              <span className="label">{t("CompletedForm:FormNumber")}</span>
+              <Box>
+                <Text
+                  className={classNames("completed-form__form-number", {
+                    ["form-number--big"]: formNumber > BIG_FORM_NUMBER,
+                  })}
+                >
+                  {formNumber}
+                </Text>
+              </Box>
+            </FormNumberWrapper>
+            <ManagerWrapper>
+              <span className="label">{t("CompletedForm:FormOwner")}</span>
+              <Box>
+                <Avatar
+                  className="manager__avatar"
+                  size={AvatarSize.medium}
+                  role={AvatarRole.manager}
+                  source={manager.avatar}
+                />
+                <Heading level={HeadingLevel.h3} className="manager__user-name">
+                  {decode(manager.displayName)}
+                </Heading>
+                <Link
+                  className="manager__mail link"
+                  href={`mailto:${manager.email}`}
+                >
+                  <MailIcon />
+                  <span>{manager.email}</span>
+                </Link>
+              </Box>
+            </ManagerWrapper>
+          </MainContent>
+          <ButtonWrapper isShreFile={isShreFile && !isRoomMember}>
+            <Button
+              scale
+              primary
+              size={ButtonSize.medium}
+              label={
+                isAnonim
+                  ? t("Common:Download")
+                  : t("CompletedForm:CheckReadyForms")
+              }
+              onClick={isAnonim ? handleDownload : gotoCompleteFolder}
+            />
+            {(!isShreFile || isRoomMember) && (
+              <Button
+                scale
+                size={ButtonSize.medium}
+                label={t("CompletedForm:BackToRoom")}
+                onClick={handleBackToRoom}
+              />
+            )}
+          </ButtonWrapper>
+          <Link className="link" href={`/?${fillAgainSearchParams.toString()}`}>
+            {t("CompletedForm:FillItOutAgain")}
+          </Link>
+        </CompletedFormLayout>
+      </Scrollbar>
+    </ContainerCompletedForm>
  );
 };
--- a/packages/shared/components/selector/sub-components/Body.tsx
+++ b/packages/shared/components/selector/sub-components/Body.tsx
@ -216,7 +216,9 @@ const Body = ({
            : FOOTER_HEIGHT
      }
      className="selector_body"
-      headerHeight={HEADER_HEIGHT}
+      headerHeight={
+        withTabs ? HEADER_HEIGHT : HEADER_HEIGHT + CONTAINER_PADDING
+      }
      footerVisible={footerVisible}
      withHeader={withHeader}
      withTabs={withTabs}