Web: Files: Templates: AccessSettings: bugfix

2024-05-16 13:25:44 +03:00 · 2024-05-16 13:25:44 +03:00 · 7bd19ef2ca
commit 7bd19ef2ca
parent 5d40081965
6 changed files with 106 additions and 85 deletions
--- a/packages/client/public/locales/en/Files.json
+++ b/packages/client/public/locales/en/Files.json
@ -200,6 +200,7 @@
  "TemplateAvailableDescription": "All DocSpace and Room admins will be able to create rooms using this template.",
  "AddUsersOrGroups": "Add Users or Groups",
  "AddUsersOrGroupsDescription": "The added administrators will be able to create rooms using this template.",
-  "AddUsersOrGroupsInfo": "Only DocSpace and Room admins are shown her",
-  "AddUsersOrGroupsInfoGroups": "Only DocSpace and Room admins from the selected groups will be able to create rooms using this template."
+  "AddUsersOrGroupsInfo": "Only <strong>DocSpace</strong> and <strong>Room admins</strong> are shown here",
+  "AddUsersOrGroupsInfoGroups": "Only <strong>DocSpace</strong> and <strong>Room admins</strong> from the selected groups will be able to create rooms using this template.",
+  "AddAdminByNameOrEmail": "Add admin by name or email"
 }
--- a/packages/client/src/components/dialogs/CreateRoomTemplate/index.js
+++ b/packages/client/src/components/dialogs/CreateRoomTemplate/index.js
@ -61,6 +61,10 @@ const StyledModalDialog = styled(ModalDialog)`
    align-items: flex-start;
    justify-content: start;
    gap: 16px;
+
+    .tile-header {
+      padding: 12px 15px;
+    }
  }

  .modal-footer {
@ -249,7 +253,9 @@ const CreateRoomTemplate = (props) => {
          <Button
            id="create-room-template-modal_submit"
            tabIndex={5}
-            label={isEdit ? t("Common:SaveButton") : t("Files:CreateTemplate")}
+            label={
+              item.isEdit ? t("Common:SaveButton") : t("Files:CreateTemplate")
+            }
            size="normal"
            primary
            scale
--- a/packages/client/src/components/dialogs/CreateRoomTemplate/sub-components/TemplateAccess.js
+++ b/packages/client/src/components/dialogs/CreateRoomTemplate/sub-components/TemplateAccess.js
@ -40,10 +40,10 @@ const TemplateAccess = ({ t, roomOwner, onOpenAccessSettings }) => {
  const groupsList = [{}, {}, {}];
  const avatarList = [];

+  const usersLength = usersList.length;
+
  const maxAvatarsCount =
-    usersList.length >= MAX_AVATARS_COUNT
-      ? MAX_AVATARS_COUNT
-      : usersList.length;
+    usersLength >= MAX_AVATARS_COUNT ? MAX_AVATARS_COUNT : usersLength;

  let index = 0;
  while (avatarList.length !== maxAvatarsCount) {
@ -51,22 +51,23 @@ const TemplateAccess = ({ t, roomOwner, onOpenAccessSettings }) => {

    avatarList.push(
      <Avatar
-        className="template-access-avatar"
+        className="template-access_avatar"
        size="min"
        role={""}
        isDefaultSource={roomOwner.hasAvatar}
        source={roomOwner.avatarSmall ?? roomOwner.avatar}
        userName={userName}
+        key={index}
      />,
    );
    index++;
  }

-  const isAvailableToEveryone = true;
+  const isAvailableToEveryone = false; //TODO: Templates

  return (
    <Styled.TemplateAccess>
-      <Text className="template-access-label" fontWeight={600} fontSize="13px">
+      <Text className="template-access_label" fontWeight={600} fontSize="13px">
        {`${t("Files:AccessToTemplate")}:`}
      </Text>

@ -75,11 +76,11 @@ const TemplateAccess = ({ t, roomOwner, onOpenAccessSettings }) => {
          headerText={t("Files:TemplateAvailable")}
          bodyText={
            <>
-              <div className="template-access-description">
+              <div className="template-access_description">
                {t("Files:TemplateAvailableDescription")}
              </div>
              <Link
-                className="template-access-link"
+                className="template-access_link"
                isHovered
                type="action"
                fontWeight={600}
@ -92,19 +93,37 @@ const TemplateAccess = ({ t, roomOwner, onOpenAccessSettings }) => {
          }
        />
      ) : (
-        <div className="template-access-wrapper">
-          <div className="template-access-container">
-            <div className="template-access-avatar-container">
-              <div className="access-avatar-container">{avatarList}</div>
-              <Text fontWeight={600} fontSize="14px">
-                {t("Common:MeLabel")}{" "}
-                {`and ${usersList.length} User and ${groupsList.length} Groups`}
-              </Text>
-            </div>
+        <div className="template-access_wrapper">
+          <div className="template-access_avatar-container">
+            {usersLength === 1 ? (
+              <>
+                <Avatar
+                  size="min"
+                  role={""}
+                  isDefaultSource={roomOwner.hasAvatar}
+                  source={roomOwner.avatarSmall ?? roomOwner.avatar}
+                  userName={userName}
+                />
+                <div className="template-access_display-name">
+                  <Text fontWeight={600} fontSize="13px">
+                    {userName}
+                  </Text>
+                  <Text className="me-label">({t("Common:MeLabel")})</Text>
+                </div>
+              </>
+            ) : (
+              <>
+                <div className="access-avatar-container">{avatarList}</div>
+                <Text fontWeight={600} fontSize="14px">
+                  {t("Common:MeLabel")}
+                  {`and ${usersList.length} User and ${groupsList.length} Groups`}
+                </Text>
+              </>
+            )}
          </div>

          <Link
-            className="template-access-link"
+            className="template-access_link"
            isHovered
            type="action"
            fontWeight={600}
--- a/packages/client/src/components/dialogs/CreateRoomTemplate/sub-components/TemplateAccess.styled.js
+++ b/packages/client/src/components/dialogs/CreateRoomTemplate/sub-components/TemplateAccess.styled.js
@ -28,59 +28,57 @@ import { Base } from "@docspace/shared/themes";
 import styled from "styled-components";

 export const TemplateAccess = styled.div`
-  .template-access {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin: 8px 0;
-
-    .template-access-name {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-
-      .me-label {
-        color: ${({ theme }) => theme.text.disableColor};
-      }
-    }
-  }
-
-  .template-access-description {
+  .template-access_description {
    margin-bottom: 8px;
  }

-  .template-access-wrapper {
+  .template-access_wrapper {
    display: flex;
    align-items: center;
+    margin-top: 12px;

-    .template-access-link {
+    .template-access_link {
      margin-left: auto;
    }
  }

-  .access-avatar-container {
-    display: flex;
-
-    .template-access-avatar:not(:first-child) {
-      margin-left: -8px;
-      z-index: 2;
-    }
-
-    .template-access-avatar:last-child {
-      z-index: 1;
-    }
-
-    .template-access-avatar {
-      border: 1px solid rgb(255, 255, 255);
-      border-radius: 50%;
-      z-index: 3;
-    }
-  }
-
-  .template-access-avatar-container {
+  .template-access_avatar-container {
    display: flex;
    align-items: center;
    gap: 8px;
+
+    .access-avatar-container {
+      display: flex;
+
+      .template-access_avatar:not(:first-child) {
+        margin-left: -8px;
+        z-index: 2;
+      }
+
+      .template-access_avatar:last-child {
+        z-index: 1;
+      }
+
+      .template-access_avatar {
+        border: ${(props) => `1px solid ${props.theme.backgroundColor}`};
+        border-radius: 50%;
+        z-index: 3;
+      }
+    }
+  }
+
+  .template-access_label {
+    margin-bottom: 8px;
+  }
+
+  .template-access_display-name {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .me-label {
+      color: ${({ theme }) => theme.text.disableColor};
+    }
  }
 `;

--- a/packages/client/src/components/panels/AddUsersPanel/index.tsx
+++ b/packages/client/src/components/panels/AddUsersPanel/index.tsx
@ -43,6 +43,7 @@ import {
  TAccessRight,
  TSelectorAccessRights,
  TSelectorCancelButton,
+  TSelectorInfo,
  TWithTabs,
 } from "@docspace/shared/components/selector/Selector.types";
 import { toastr } from "@docspace/shared/components/toast";
@ -143,14 +144,6 @@ const toListItem = (
  } as TSelectorItem;
 };

-export type TSelectorInfo =
-  | { withInfo: true; infoText: string; withInfoBadge?: boolean }
-  | {
-      withInfo?: undefined;
-      infoText?: undefined;
-      withInfoBadge?: undefined;
-    };
-
 type AddUsersPanelProps = TSelectorInfo & {
  isEncrypted: boolean;
  defaultAccess: ShareAccessRights;
@ -200,6 +193,7 @@ const AddUsersPanel = ({
  disableDisabledUsers,
  infoText,
  withInfo,
+  withInfoBadge,
  setActiveTabId: setActiveTabIdProp,
 }: AddUsersPanelProps) => {
  const theme = useTheme();
@ -512,6 +506,14 @@ const AddUsersPanel = ({
      }
    : {};

+  const infoProps: TSelectorInfo = withInfo
+    ? {
+        withInfo,
+        infoText,
+        withInfoBadge,
+      }
+    : {};
+
  return (
    <>
      <Backdrop
@ -581,8 +583,6 @@ const AddUsersPanel = ({
          isLoading={isLoading}
          searchLoader={<SearchLoader />}
          isSearchLoading={isInit}
-          infoText={infoText}
-          withInfo={withInfo}
          rowLoader={
            <RowLoader
              isUser
@ -593,6 +593,7 @@ const AddUsersPanel = ({
            />
          }
          {...withTabsProps}
+          {...infoProps}
        />
      </Aside>
    </>
--- a/packages/client/src/components/panels/TemplateAccessSettingsPanel/sub-components/InviteInput.js
+++ b/packages/client/src/components/panels/TemplateAccessSettingsPanel/sub-components/InviteInput.js
@ -26,16 +26,13 @@

 import debounce from "lodash.debounce";
 import { inject, observer } from "mobx-react";
-import { withTranslation } from "react-i18next";
+import { withTranslation, Trans } from "react-i18next";
 import { useMemo, useState, useCallback, useEffect, useRef } from "react";

 import { Avatar } from "@docspace/shared/components/avatar";
 import { TextInput } from "@docspace/shared/components/text-input";
 import { DropDownItem } from "@docspace/shared/components/drop-down-item";
 import { toastr } from "@docspace/shared/components/toast";
-import { Aside } from "@docspace/shared/components/aside";
-import { Backdrop } from "@docspace/shared/components/backdrop";
-import PeopleSelector from "@docspace/shared/selectors/People";
 import Filter from "@docspace/shared/api/people/filter";
 import { getMembersList } from "@docspace/shared/api/people";
 import {
@ -280,6 +277,13 @@ const InviteInput = ({
    standalone,
  );

+  const infoText =
+    selectedTab === PEOPLE_TAB_ID ? (
+      <Trans i18nKey="AddUsersOrGroupsInfo" ns="Files" t={t}></Trans>
+    ) : (
+      <Trans i18nKey="AddUsersOrGroupsInfoGroups" ns="Files" t={t}></Trans>
+    );
+
  return (
    <>
      <StyledSubHeader className="invite-input-text">
@ -305,11 +309,7 @@ const InviteInput = ({
            className="invite-input"
            scale
            onChange={onChange}
-            placeholder={
-              roomId === -1
-                ? t("InviteAccountSearchPlaceholder")
-                : t("InviteRoomSearchPlaceholder")
-            }
+            placeholder={t("Files:AddAdminByNameOrEmail")}
            value={inputValue}
            isAutoFocussed={true}
            type="search"
@ -353,11 +353,7 @@ const InviteInput = ({
            roomId={roomId} // fixed groups request // need template id for correct working
            withGroups={!isPublicRoomType}
            withInfo
-            infoText={
-              selectedTab === PEOPLE_TAB_ID
-                ? t("Files:AddUsersOrGroupsInfo")
-                : t("Files:AddUsersOrGroupsInfoGroups")
-            }
+            infoText={infoText}
            withInfoBadge
            invitedUsers={invitedUsers}
            disableDisabledUsers