From 792ab3cc4056bc2cde3daad3d03cf0087622e652 Mon Sep 17 00:00:00 2001
From: Akmal Isomadinov <isomadinovakmal1997@gmail.com>
Date: Mon, 29 Jul 2024 18:28:14 +0500
Subject: [PATCH 1/4] Doceditor:CompletedForm Fixed scroll and styles

---
 .../completed-form/CompletedForm.styled.ts    |  64 ++++--
 .../completed-form/CompletedForm.tsx          | 213 ++++++++++--------
 2 files changed, 166 insertions(+), 111 deletions(-)

diff --git a/packages/doceditor/src/components/completed-form/CompletedForm.styled.ts b/packages/doceditor/src/components/completed-form/CompletedForm.styled.ts
index e63e06b173..10dcdcfaba 100644
--- 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;
+    }
   }
 `;
 
diff --git a/packages/doceditor/src/components/completed-form/CompletedForm.tsx b/packages/doceditor/src/components/completed-form/CompletedForm.tsx
index fa36983c63..040391af8f 100644
--- a/packages/doceditor/src/components/completed-form/CompletedForm.tsx
+++ b/packages/doceditor/src/components/completed-form/CompletedForm.tsx
@@ -69,9 +69,11 @@ import {
   FormNumberWrapper,
   ManagerWrapper,
   MainContent,
+  ContainerCompletedForm,
 } from "./CompletedForm.styled";
 
 import type { CompletedFormProps } from "./CompletedForm.types";
+import { Scrollbar } from "@docspace/shared/components/scrollbar";
 
 export const CompletedForm = ({
   session,
@@ -92,25 +94,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 +178,96 @@ 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="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)}
+                </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>
   );
 };

From 92bac99ed7dd0661ca223fc69893e6e197e07330 Mon Sep 17 00:00:00 2001
From: Akmal Isomadinov <isomadinovakmal1997@gmail.com>
Date: Mon, 29 Jul 2024 18:57:46 +0500
Subject: [PATCH 2/4] Doceditor:CompletedForm Fixed form number

---
 .../completed-form/CompletedForm.styled.ts          | 13 +++++++++++++
 .../src/components/completed-form/CompletedForm.tsx | 12 +++++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/doceditor/src/components/completed-form/CompletedForm.styled.ts b/packages/doceditor/src/components/completed-form/CompletedForm.styled.ts
index 10dcdcfaba..e810bc9a19 100644
--- a/packages/doceditor/src/components/completed-form/CompletedForm.styled.ts
+++ b/packages/doceditor/src/components/completed-form/CompletedForm.styled.ts
@@ -266,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;
diff --git a/packages/doceditor/src/components/completed-form/CompletedForm.tsx b/packages/doceditor/src/components/completed-form/CompletedForm.tsx
index 040391af8f..0bfb20af4a 100644
--- 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,
@@ -73,7 +74,8 @@ import {
 } from "./CompletedForm.styled";
 
 import type { CompletedFormProps } from "./CompletedForm.types";
-import { Scrollbar } from "@docspace/shared/components/scrollbar";
+
+const BIG_FORM_NUMBER = 9_999_999;
 
 export const CompletedForm = ({
   session,
@@ -215,7 +217,11 @@ export const CompletedForm = ({
             <FormNumberWrapper>
               <span className="label">{t("CompletedForm:FormNumber")}</span>
               <Box>
-                <Text className="completed-form__form-number">
+                <Text
+                  className={classNames("completed-form__form-number", {
+                    ["form-number--big"]: formNumber > BIG_FORM_NUMBER,
+                  })}
+                >
                   {formNumber}
                 </Text>
               </Box>

From 2d4fe09f2121bc491976e780eb8e7bd896e42dea Mon Sep 17 00:00:00 2001
From: gopienkonikita <nikita.gopienko@onlyoffice.com>
Date: Mon, 29 Jul 2024 17:31:57 +0300
Subject: [PATCH 3/4] Web: Components: Selector: fixed body height

---
 packages/shared/components/selector/sub-components/Body.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/shared/components/selector/sub-components/Body.tsx b/packages/shared/components/selector/sub-components/Body.tsx
index 61f588472f..14d7af6d18 100644
--- 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}

From d381fd166c6a8f9998ef048e81d1787035b9a211 Mon Sep 17 00:00:00 2001
From: Akmal Isomadinov <isomadinovakmal1997@gmail.com>
Date: Mon, 29 Jul 2024 19:42:15 +0500
Subject: [PATCH 4/4] Client:InvitePanel Fixed role descriptions for the form
 room

---
 .../public/locales/en/Translations.json       |  3 ++
 .../panels/InvitePanel/utils/index.js         | 50 +++++++++++++++++--
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/packages/client/public/locales/en/Translations.json b/packages/client/public/locales/en/Translations.json
index 38b7d0ad8e..8ccc7ba1af 100644
--- 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",
diff --git a/packages/client/src/components/panels/InvitePanel/utils/index.js b/packages/client/src/components/panels/InvitePanel/utils/index.js
index cc47ca63c7..951954fe6b 100644
--- 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",
     },