From 32f45b1fea704ac3b0b38c6816792d6b96ebf557 Mon Sep 17 00:00:00 2001
From: gopienkonikita <nikita.gopienko@onlyoffice.com>
Date: Thu, 13 Apr 2023 13:35:37 +0300
Subject: [PATCH 01/17] Web: Files: added displaying context items if file is
 editing

---
 .../client/src/store/ContextOptionsStore.js   | 77 +++++++++++--------
 packages/client/src/store/FilesStore.js       |  5 +-
 2 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/packages/client/src/store/ContextOptionsStore.js b/packages/client/src/store/ContextOptionsStore.js
index bf5de44389..23dce8ea4e 100644
--- a/packages/client/src/store/ContextOptionsStore.js
+++ b/packages/client/src/store/ContextOptionsStore.js
@@ -1,4 +1,4 @@
-import HistoryReactSvgUrl from "PUBLIC_DIR/images/history.react.svg?url";
+import HistoryReactSvgUrl from "PUBLIC_DIR/images/history.react.svg?url";
 import HistoryFinalizedReactSvgUrl from "PUBLIC_DIR/images/history-finalized.react.svg?url";
 import MoveReactSvgUrl from "PUBLIC_DIR/images/move.react.svg?url";
 import CheckBoxReactSvgUrl from "PUBLIC_DIR/images/check-box.react.svg?url";
@@ -608,6 +608,11 @@ class ContextOptionsStore {
     onSelectItem({ id: item.id, isFolder: item.isFolder }, true, false);
   };
 
+  onShowEditingToast = (t) => {
+    // const FilesIsEditing = "File is editing"
+    toastr.error(t("Files:FilesIsEditing"));
+  };
+
   onClickMute = (e, item, t) => {
     const data = (e.currentTarget && e.currentTarget.dataset) || e;
     const { action } = data;
@@ -670,7 +675,7 @@ class ContextOptionsStore {
     return { pinOptions, muteOptions };
   };
   getFilesContextOptions = (item, t, isInfoPanel) => {
-    const { contextOptions } = item;
+    const { contextOptions, isEditing } = item;
 
     const { enablePlugins } = this.authStore.settingsStore;
 
@@ -723,7 +728,10 @@ class ContextOptionsStore {
                     key: "finalize-version",
                     label: t("FinalizeVersion"),
                     icon: HistoryFinalizedReactSvgUrl,
-                    onClick: () => this.finalizeVersion(item.id, item.security),
+                    onClick: () =>
+                      isEditing
+                        ? this.onShowEditingToast(t)
+                        : this.finalizeVersion(item.id, item.security),
                     disabled: false,
                   },
                   {
@@ -744,7 +752,10 @@ class ContextOptionsStore {
               key: "finalize-version",
               label: t("FinalizeVersion"),
               icon: HistoryFinalizedReactSvgUrl,
-              onClick: () => this.finalizeVersion(item.id),
+              onClick: () =>
+                isEditing
+                  ? this.onShowEditingToast(t)
+                  : this.finalizeVersion(item.id),
               disabled: false,
             },
             {
@@ -770,7 +781,9 @@ class ContextOptionsStore {
                   key: "move-to",
                   label: t("MoveTo"),
                   icon: MoveReactSvgUrl,
-                  onClick: this.onMoveAction,
+                  onClick: isEditing
+                    ? () => this.onShowEditingToast(t)
+                    : this.onMoveAction,
                   disabled: false,
                 },
                 {
@@ -798,7 +811,9 @@ class ContextOptionsStore {
               key: "move-to",
               label: t("MoveTo"),
               icon: MoveReactSvgUrl,
-              onClick: this.onMoveAction,
+              onClick: isEditing
+                ? () => this.onShowEditingToast(t)
+                : this.onMoveAction,
               disabled: false,
             },
             {
@@ -1093,7 +1108,8 @@ class ContextOptionsStore {
           ? t("Common:Disconnect")
           : t("Common:Delete"),
         icon: TrashReactSvgUrl,
-        onClick: () => this.onClickDelete(item, t),
+        onClick: () =>
+          isEditing ? this.onShowEditingToast(t) : this.onClickDelete(item, t),
         disabled: false,
       },
     ];
@@ -1138,7 +1154,7 @@ class ContextOptionsStore {
 
   getGroupContextOptions = (t) => {
     const { personal } = this.authStore.settingsStore;
-    const { selection } = this.filesStore;
+    const { selection, allFilesIsEditing } = this.filesStore;
     const { setDeleteDialogVisible } = this.dialogsStore;
     const {
       isRecycleBinFolder,
@@ -1146,12 +1162,7 @@ class ContextOptionsStore {
       isArchiveFolder,
     } = this.treeFoldersStore;
 
-    const {
-      pinRooms,
-      unpinRooms,
-
-      deleteRooms,
-    } = this.filesActionsStore;
+    const { pinRooms, unpinRooms, deleteRooms } = this.filesActionsStore;
 
     if (isRoomsFolder || isArchiveFolder) {
       const isPinOption = selection.filter((item) => !item.pinned).length > 0;
@@ -1330,7 +1341,9 @@ class ContextOptionsStore {
         key: "move-to",
         label: t("MoveTo"),
         icon: MoveReactSvgUrl,
-        onClick: this.onMoveAction,
+        onClick: allFilesIsEditing
+          ? () => this.onShowEditingToast(t)
+          : this.onMoveAction,
         disabled: isRecycleBinFolder || !moveItems,
       },
       {
@@ -1356,23 +1369,25 @@ class ContextOptionsStore {
         key: "delete",
         label: t("Common:Delete"),
         icon: TrashReactSvgUrl,
-        onClick: () => {
-          if (this.settingsStore.confirmDelete) {
-            setDeleteDialogVisible(true);
-          } else {
-            const translations = {
-              deleteOperation: t("Translations:DeleteOperation"),
-              deleteFromTrash: t("Translations:DeleteFromTrash"),
-              deleteSelectedElem: t("Translations:DeleteSelectedElem"),
-              FileRemoved: t("Files:FileRemoved"),
-              FolderRemoved: t("Files:FolderRemoved"),
-            };
+        onClick: allFilesIsEditing
+          ? () => this.onShowEditingToast(t)
+          : () => {
+              if (this.settingsStore.confirmDelete) {
+                setDeleteDialogVisible(true);
+              } else {
+                const translations = {
+                  deleteOperation: t("Translations:DeleteOperation"),
+                  deleteFromTrash: t("Translations:DeleteFromTrash"),
+                  deleteSelectedElem: t("Translations:DeleteSelectedElem"),
+                  FileRemoved: t("Files:FileRemoved"),
+                  FolderRemoved: t("Files:FolderRemoved"),
+                };
 
-            this.filesActionsStore
-              .deleteAction(translations)
-              .catch((err) => toastr.error(err));
-          }
-        },
+                this.filesActionsStore
+                  .deleteAction(translations)
+                  .catch((err) => toastr.error(err));
+              }
+            },
         disabled: !deleteItems || isRootThirdPartyFolder,
       },
     ];
diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js
index e1e4387312..3c9381831b 100644
--- a/packages/client/src/store/FilesStore.js
+++ b/packages/client/src/store/FilesStore.js
@@ -1522,10 +1522,7 @@ class FilesStore {
     const canConvert = this.filesSettingsStore.extsConvertible[item.fileExst];
     const isEncrypted = item.encrypted;
     const isDocuSign = false; //TODO: need this prop;
-    const isEditing =
-      (item.fileStatus & FileStatus.IsEditing) === FileStatus.IsEditing;
-    // const isFileOwner =
-    //   item.createdBy?.id === this.authStore.userStore.user?.id;
+    const isEditing = false; // (item.fileStatus & FileStatus.IsEditing) === FileStatus.IsEditing;
 
     const { isRecycleBinFolder, isMy, isArchiveFolder } = this.treeFoldersStore;
 

From a40a1ebfbde58de8ed5021d76eb60371cad276b0 Mon Sep 17 00:00:00 2001
From: gopienkonikita <nikita.gopienko@onlyoffice.com>
Date: Thu, 13 Apr 2023 15:21:40 +0300
Subject: [PATCH 02/17] Web: Files: added DocumentEdited translation

---
 packages/client/public/locales/en/Files.json     | 3 ++-
 packages/client/public/locales/ru/Files.json     | 3 ++-
 packages/client/src/store/ContextOptionsStore.js | 3 +--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/client/public/locales/en/Files.json b/packages/client/public/locales/en/Files.json
index 129428cde7..2978512740 100644
--- a/packages/client/public/locales/en/Files.json
+++ b/packages/client/public/locales/en/Files.json
@@ -115,5 +115,6 @@
   "ViewList": "List",
   "ViewOnlyRooms": "View-only",
   "ViewTiles": "Tiles",
-  "WithSubfolders": "With subfolders"
+  "WithSubfolders": "With subfolders",
+  "DocumentEdited": "Cannot perform the action because the document is being edited."
 }
diff --git a/packages/client/public/locales/ru/Files.json b/packages/client/public/locales/ru/Files.json
index c7017479a3..e79bdc71b5 100644
--- a/packages/client/public/locales/ru/Files.json
+++ b/packages/client/public/locales/ru/Files.json
@@ -115,5 +115,6 @@
   "ViewList": "Список",
   "ViewOnlyRooms": "Просмотр",
   "ViewTiles": "Плитки",
-  "WithSubfolders": "С подпапками"
+  "WithSubfolders": "С подпапками",
+  "DocumentEdited": "Невозможно выполнить действие, так как документ редактируется."
 }
diff --git a/packages/client/src/store/ContextOptionsStore.js b/packages/client/src/store/ContextOptionsStore.js
index 23dce8ea4e..e2a06e621a 100644
--- a/packages/client/src/store/ContextOptionsStore.js
+++ b/packages/client/src/store/ContextOptionsStore.js
@@ -609,8 +609,7 @@ class ContextOptionsStore {
   };
 
   onShowEditingToast = (t) => {
-    // const FilesIsEditing = "File is editing"
-    toastr.error(t("Files:FilesIsEditing"));
+    toastr.error(t("Files:DocumentEdited"));
   };
 
   onClickMute = (e, item, t) => {

From fafb96b723f7416ba453a9900b5772459cb8cd15 Mon Sep 17 00:00:00 2001
From: Akmal Isomadinov <isomadinovakmal1997@gmail.com>
Date: Thu, 13 Apr 2023 18:41:34 +0500
Subject: [PATCH 03/17] Web:Client:Pages:Home:InfoPanel:Header Changed the icon
 closing the info panel

---
 .../src/pages/Home/InfoPanel/Header/index.js  | 33 ++++++++-----------
 .../Home/InfoPanel/Header/styles/common.js    |  5 +++
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/packages/client/src/pages/Home/InfoPanel/Header/index.js b/packages/client/src/pages/Home/InfoPanel/Header/index.js
index 3620f0fa11..23a170061a 100644
--- a/packages/client/src/pages/Home/InfoPanel/Header/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Header/index.js
@@ -1,4 +1,4 @@
-import PanelReactSvgUrl from "PUBLIC_DIR/images/panel.react.svg?url";
+import CrossReactSvgUrl from "PUBLIC_DIR/images/cross.react.svg?url";
 import React, { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
@@ -106,25 +106,18 @@ const InfoPanelHeaderContent = (props) => {
           {t("Common:Info")}
         </Text>
 
-        <ColorTheme
-          {...props}
-          themeId={ThemeType.InfoPanelToggle}
-          isRootFolder={true}
-          isInfoPanelVisible={true}
-        >
-          {!isTablet && (
-            <div className="info-panel-toggle-bg">
-              <IconButton
-                id="info-panel-toggle--close"
-                className="info-panel-toggle"
-                iconName={PanelReactSvgUrl}
-                size="16"
-                isFill={true}
-                onClick={closeInfoPanel}
-              />
-            </div>
-          )}
-        </ColorTheme>
+        {!isTablet && (
+          <div className="info-panel-toggle-bg">
+            <IconButton
+              id="info-panel-toggle--close"
+              className="info-panel-toggle"
+              iconName={CrossReactSvgUrl}
+              size="16"
+              isFill={true}
+              onClick={closeInfoPanel}
+            />
+          </div>
+        )}
       </div>
 
       {withSubmenu && (
diff --git a/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js b/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js
index b6c7a32225..03c2d339cb 100644
--- a/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js
+++ b/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js
@@ -46,6 +46,11 @@ const StyledInfoPanelHeader = styled.div`
       margin-left: 20px;
     }
   }
+
+  .info-panel-toggle-bg{
+    padding-right: 20px;
+  }
+
   .submenu {
     display: flex;
     width: 100%;

From ac83de246d9b39d146764de02abf20e422bd863a Mon Sep 17 00:00:00 2001
From: Akmal Isomadinov <isomadinovakmal1997@gmail.com>
Date: Thu, 13 Apr 2023 18:46:48 +0500
Subject: [PATCH 04/17] Web:components:table-container:TableGroupMenu Added a
 toggle button in the table menu

---
 .../table-container/StyledTableContainer.js   | 78 +++++++------------
 .../table-container/TableGroupMenu.js         | 10 ++-
 2 files changed, 37 insertions(+), 51 deletions(-)

diff --git a/packages/components/table-container/StyledTableContainer.js b/packages/components/table-container/StyledTableContainer.js
index 253d2ee5c4..36bda93e74 100644
--- a/packages/components/table-container/StyledTableContainer.js
+++ b/packages/components/table-container/StyledTableContainer.js
@@ -4,6 +4,7 @@ import { mobile, tablet, hugeMobile } from "../utils/device";
 import IconButton from "../icon-button";
 import Scrollbar from "../scrollbar";
 import { isMobile, isMobileOnly } from "react-device-detect";
+import { ColorTheme } from "@docspace/common/components/ColorTheme";
 
 const reactWindowContainerStyles = css`
   height: 100%;
@@ -50,7 +51,7 @@ const StyledTableContainer = styled.div`
     border-bottom: 1px solid;
     border-image-slice: 1;
     border-image-source: ${(props) =>
-      props.theme.tableContainer.header.borderImageSource};
+    props.theme.tableContainer.header.borderImageSource};
     border-top: 0;
     border-left: 0;
   }
@@ -58,12 +59,12 @@ const StyledTableContainer = styled.div`
   .lengthen-header {
     border-image-slice: 1;
     border-image-source: ${(props) =>
-      props.theme.tableContainer.header.lengthenBorderImageSource};
+    props.theme.tableContainer.header.lengthenBorderImageSource};
   }
 
   .hotkeys-lengthen-header {
     border-bottom: ${(props) =>
-      props.theme.tableContainer.header.hotkeyBorderBottom};
+    props.theme.tableContainer.header.hotkeyBorderBottom};
     border-image-source: none;
   }
 
@@ -121,14 +122,14 @@ const StyledTableGroupMenu = styled.div`
     }
 
     ${isMobile &&
-    css`
+  css`
       margin-left: 24px;
     `}
   }
 
   .table-container_group-menu-separator {
     border-right: ${(props) =>
-      props.theme.tableContainer.groupMenu.borderRight};
+    props.theme.tableContainer.groupMenu.borderRight};
     width: 1px;
     height: 21px;
     margin: 0 16px 0 20px;
@@ -138,7 +139,7 @@ const StyledTableGroupMenu = styled.div`
     }
 
     ${isMobile &&
-    css`
+  css`
       height: 36px;
     `}
 
@@ -147,7 +148,7 @@ const StyledTableGroupMenu = styled.div`
     }
 
     ${isMobileOnly &&
-    css`
+  css`
       height: 20px;
     `}
   }
@@ -172,8 +173,8 @@ const StyledTableGroupMenu = styled.div`
 
 StyledTableGroupMenu.defaultProps = { theme: Base };
 
-const StyledInfoPanelToggleWrapper = styled.div`
-  display: ${(props) => (props.isInfoPanelVisible ? "none" : "flex")};
+const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)`
+  display: flex;
 
   align-items: center;
   align-self: center;
@@ -182,6 +183,7 @@ const StyledInfoPanelToggleWrapper = styled.div`
   height: 100%;
   width: auto;
   padding-left: 20px;
+  padding-right: 0;
 
   @media ${tablet} {
     display: none;
@@ -191,30 +193,10 @@ const StyledInfoPanelToggleWrapper = styled.div`
   margin-top: 1px;
 
   .info-panel-toggle-bg {
-    height: 32px;
-    width: 32px;
-    display: flex;
-    align-items: center;
-    align-self: center;
-
-    justify-content: center;
-    border-radius: 50%;
-    background-color: ${(props) =>
-      props.isInfoPanelVisible
-        ? props.theme.infoPanel.sectionHeaderToggleBgActive
-        : props.theme.infoPanel.sectionHeaderToggleBg};
-
-    path {
-      fill: ${(props) =>
-        props.isInfoPanelVisible
-          ? props.theme.infoPanel.sectionHeaderToggleIconActive
-          : props.theme.infoPanel.sectionHeaderToggleIcon};
-    }
-
     margin-bottom: 1px;
   }
 `;
-StyledInfoPanelToggleWrapper.defaultProps = { theme: Base };
+StyledInfoPanelToggleColorThemeWrapper.defaultProps = { theme: Base };
 
 const StyledTableHeader = styled.div`
   position: fixed;
@@ -245,10 +227,10 @@ const StyledTableHeaderCell = styled.div`
     padding: 13px 0 0 4px;
 
     display: ${(props) =>
-      props.isActive && props.showIcon ? "block" : "none"};
+    props.isActive && props.showIcon ? "block" : "none"};
     ${(props) =>
-      props.sorted &&
-      css`
+    props.sorted &&
+    css`
         transform: scale(1, -1);
         padding: 14px 0 14px 4px;
       `}
@@ -258,16 +240,16 @@ const StyledTableHeaderCell = styled.div`
       height: 12px;
       path {
         fill: ${(props) =>
-          props.isActive
-            ? props.theme.tableContainer.header.activeIconColor
-            : props.theme.tableContainer.header.iconColor} !important;
+    props.isActive
+      ? props.theme.tableContainer.header.activeIconColor
+      : props.theme.tableContainer.header.iconColor} !important;
       }
     }
 
     &:hover {
       path {
         fill: ${(props) =>
-          props.theme.tableContainer.header.hoverIconColor} !important;
+    props.theme.tableContainer.header.hoverIconColor} !important;
       }
     }
   }
@@ -275,8 +257,8 @@ const StyledTableHeaderCell = styled.div`
   :hover {
     .header-container-text-icon {
       ${(props) =>
-        props.showIcon &&
-        css`
+    props.showIcon &&
+    css`
           display: block;
         `};
     }
@@ -300,13 +282,13 @@ const StyledTableHeaderCell = styled.div`
     display: flex;
     align-items: center;
     color: ${(props) =>
-      props.isActive
-        ? props.theme.tableContainer.header.activeTextColor
-        : props.theme.tableContainer.header.textColor};
+    props.isActive
+      ? props.theme.tableContainer.header.activeTextColor
+      : props.theme.tableContainer.header.textColor};
 
     &:hover {
       color: ${(props) =>
-        props.theme.tableContainer.header.hoverTextColor} !important;
+    props.theme.tableContainer.header.hoverTextColor} !important;
     }
   }
 `;
@@ -330,9 +312,9 @@ const StyledTableRow = styled.div`
 
   .droppable-hover {
     background: ${(props) =>
-      props.dragging
-        ? `${props.theme.dragAndDrop.acceptBackground} !important`
-        : "none"};
+    props.dragging
+      ? `${props.theme.dragAndDrop.acceptBackground} !important`
+      : "none"};
   }
 
   .table-container_row-loader {
@@ -420,7 +402,7 @@ const StyledSettingsIcon = styled(IconButton)`
       svg {
         path {
           fill: ${props.theme.tableContainer.header
-            .settingsIconDisableColor} !important;
+        .settingsIconDisableColor} !important;
         }
       }
     `}
@@ -437,7 +419,7 @@ export {
   StyledTableCell,
   StyledTableSettings,
   StyledTableGroupMenu,
-  StyledInfoPanelToggleWrapper,
+  StyledInfoPanelToggleColorThemeWrapper,
   StyledEmptyTableContainer,
   StyledScrollbar,
   StyledSettingsIcon,
diff --git a/packages/components/table-container/TableGroupMenu.js b/packages/components/table-container/TableGroupMenu.js
index 5c7d607f7a..a833504569 100644
--- a/packages/components/table-container/TableGroupMenu.js
+++ b/packages/components/table-container/TableGroupMenu.js
@@ -4,7 +4,7 @@ import Checkbox from "../checkbox";
 import {
   StyledTableGroupMenu,
   StyledScrollbar,
-  StyledInfoPanelToggleWrapper,
+  StyledInfoPanelToggleColorThemeWrapper,
 } from "./StyledTableContainer";
 import ComboBox from "../combobox";
 import GroupMenuItem from "./GroupMenuItem";
@@ -12,6 +12,7 @@ import { useTranslation } from "react-i18next";
 import IconButton from "../icon-button";
 import TriangleNavigationDownReactSvgUrl from "PUBLIC_DIR/images/triangle.navigation.down.react.svg?url";
 import PanelReactSvgUrl from "PUBLIC_DIR/images/panel.react.svg?url";
+import { ThemeType } from "@docspace/common/components/ColorTheme";
 
 const TableGroupMenu = (props) => {
   const {
@@ -67,7 +68,10 @@ const TableGroupMenu = (props) => {
           ))}
         </StyledScrollbar>
         {!withoutInfoPanelToggler && (
-          <StyledInfoPanelToggleWrapper isInfoPanelVisible={isInfoPanelVisible}>
+          <StyledInfoPanelToggleColorThemeWrapper
+            themeId={ThemeType.InfoPanelToggle}
+            isInfoPanelVisible={isInfoPanelVisible}
+          >
             <div className="info-panel-toggle-bg">
               <IconButton
                 id="info-panel-toggle--open"
@@ -78,7 +82,7 @@ const TableGroupMenu = (props) => {
                 onClick={toggleInfoPanel}
               />
             </div>
-          </StyledInfoPanelToggleWrapper>
+          </StyledInfoPanelToggleColorThemeWrapper>
         )}
       </StyledTableGroupMenu>
     </>

From 204e8819f7a726b06a41903116d47168620fad9e Mon Sep 17 00:00:00 2001
From: Akmal Isomadinov <isomadinovakmal1997@gmail.com>
Date: Thu, 13 Apr 2023 18:50:15 +0500
Subject: [PATCH 05/17] Web:Common:Components:ColorTheme:styled:infoPanelToggle
 Changed the logic of showing the accent color

---
 .../common/components/ColorTheme/styled/infoPanelToggle.js   | 4 ++--
 .../common/components/StyledInfoPanelToggleWrapper/index.js  | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/common/components/ColorTheme/styled/infoPanelToggle.js b/packages/common/components/ColorTheme/styled/infoPanelToggle.js
index 8da9fa4336..81805a7917 100644
--- a/packages/common/components/ColorTheme/styled/infoPanelToggle.js
+++ b/packages/common/components/ColorTheme/styled/infoPanelToggle.js
@@ -2,8 +2,8 @@ import styled, { css } from "styled-components";
 import StyledInfoPanelToggleWrapper from "../../StyledInfoPanelToggleWrapper";
 import Base from "@docspace/components/themes/base";
 
-const getDefaultStyles = ({ $currentColorScheme }) =>
-  $currentColorScheme &&
+const getDefaultStyles = ({ $currentColorScheme, isInfoPanelVisible }) =>
+  $currentColorScheme && isInfoPanelVisible &&
   css`
     .info-panel-toggle-bg {
       path {
diff --git a/packages/common/components/StyledInfoPanelToggleWrapper/index.js b/packages/common/components/StyledInfoPanelToggleWrapper/index.js
index 086619a9ed..18a7c1bc44 100644
--- a/packages/common/components/StyledInfoPanelToggleWrapper/index.js
+++ b/packages/common/components/StyledInfoPanelToggleWrapper/index.js
@@ -19,8 +19,9 @@ const StyledInfoPanelToggleWrapper = styled.div`
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    background-color: ${(props) =>
-      props.theme.infoPanel.sectionHeaderToggleBgActive};
+    background-color: ${(props) => !props.isInfoPanelVisible
+    ? "none"
+    : props.theme.infoPanel.sectionHeaderToggleBgActive};
 
     path {
       fill: ${(props) => props.theme.infoPanel.sectionHeaderToggleIconActive};

From a42510771096971a6ee55c71921d4b1c2a301a93 Mon Sep 17 00:00:00 2001
From: Akmal Isomadinov <isomadinovakmal1997@gmail.com>
Date: Thu, 13 Apr 2023 21:44:14 +0500
Subject: [PATCH 06/17] Web:Client:Pages:AccountsHome:Section:Header Changed
 the logic of showing toggle button

---
 .../AccountsHome/Section/Header/index.js      | 76 ++++++++-----------
 .../sub-components/toggle-infopanel-btn.js    | 37 ++-------
 2 files changed, 38 insertions(+), 75 deletions(-)

diff --git a/packages/client/src/pages/AccountsHome/Section/Header/index.js b/packages/client/src/pages/AccountsHome/Section/Header/index.js
index 746aeaff95..6909849e3e 100644
--- a/packages/client/src/pages/AccountsHome/Section/Header/index.js
+++ b/packages/client/src/pages/AccountsHome/Section/Header/index.js
@@ -30,6 +30,9 @@ import toastr from "@docspace/components/toast/toastr";
 import withPeopleLoader from "SRC_DIR/HOCs/withPeopleLoader";
 import { EmployeeType } from "@docspace/common/constants";
 import { resendInvitesAgain } from "@docspace/common/api/people";
+import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
+
+
 
 const StyledContainer = styled.div`
   width: 100%;
@@ -49,7 +52,7 @@ const StyledContainer = styled.div`
     }
 
     ${isMobile &&
-    css`
+  css`
       height: 60px;
       margin: 0 0 0 -16px;
       width: calc(100% + 32px);
@@ -62,7 +65,7 @@ const StyledContainer = styled.div`
     }
 
     ${isMobileOnly &&
-    css`
+  css`
       height: 52px;
       margin: 0 0 0 -16px;
       width: calc(100% + 32px);
@@ -87,7 +90,7 @@ const StyledContainer = styled.div`
     }
 
     ${isMobile &&
-    css`
+  css`
       grid-template-columns: 1fr auto;
     `}
 
@@ -100,7 +103,7 @@ const StyledContainer = styled.div`
       }
 
       ${isMobile &&
-      css`
+  css`
         line-height: 28px;
       `}
 
@@ -109,7 +112,7 @@ const StyledContainer = styled.div`
       }
 
       ${isMobile &&
-      css`
+  css`
         line-height: 24px;
       `}
     }
@@ -122,7 +125,7 @@ const StyledContainer = styled.div`
       }
 
       ${isMobile &&
-      css`
+  css`
         display: none;
       `}
     }
@@ -131,27 +134,9 @@ const StyledContainer = styled.div`
 
 StyledContainer.defaultProps = { theme: Base };
 
-const StyledInfoPanelToggleWrapper = styled.div`
-  display: flex;
-
+const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)`
   margin-left: auto;
-
-  @media ${tablet} {
-    display: none;
-  }
-
-  align-items: center;
-  justify-content: center;
-
-  .info-panel-toggle-bg {
-    height: 32px;
-    width: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    margin-bottom: 1px;
-  }
+  padding: 0;
 `;
 
 const SectionHeaderContent = (props) => {
@@ -236,8 +221,8 @@ const SectionHeaderContent = (props) => {
       .catch((err) => toastr.error(err));
   }, [resendInvitesAgain]);
 
-  const onSetInfoPanelVisible = () => {
-    setInfoPanelIsVisible(true);
+  const infoPanelVisibleToggle = () => {
+    setInfoPanelIsVisible(!isInfoPanelVisible);
   };
 
   const getContextOptions = () => {
@@ -307,7 +292,7 @@ const SectionHeaderContent = (props) => {
             isIndeterminate={isHeaderIndeterminate}
             headerMenu={headerMenu}
             isInfoPanelVisible={isInfoPanelVisible}
-            toggleInfoPanel={onSetInfoPanelVisible}
+            toggleInfoPanel={infoPanelVisibleToggle}
             withoutInfoPanelToggler={false}
           />
         </div>
@@ -331,22 +316,23 @@ const SectionHeaderContent = (props) => {
               getData={getContextOptions}
               isDisabled={false}
             />
-            {!isInfoPanelVisible && (
-              <StyledInfoPanelToggleWrapper>
-                {!(isTablet() || isSmallTablet() || !isDesktop()) && (
-                  <div className="info-panel-toggle-bg">
-                    <IconButton
-                      id="info-panel-toggle--open"
-                      className="info-panel-toggle"
-                      iconName={PanelReactSvgUrl}
-                      size="16"
-                      isFill={true}
-                      onClick={onSetInfoPanelVisible}
-                    />
-                  </div>
-                )}
-              </StyledInfoPanelToggleWrapper>
-            )}
+            <StyledInfoPanelToggleColorThemeWrapper
+              themeId={ThemeType.InfoPanelToggle}
+              isInfoPanelVisible={isInfoPanelVisible}
+            >
+              {!(isTablet() || isSmallTablet() || !isDesktop()) && (
+                <div className="info-panel-toggle-bg">
+                  <IconButton
+                    id="info-panel-toggle"
+                    className="info-panel-toggle"
+                    iconName={PanelReactSvgUrl}
+                    size="16"
+                    isFill={true}
+                    onClick={infoPanelVisibleToggle}
+                  />
+                </div>
+              )}
+            </StyledInfoPanelToggleColorThemeWrapper>
           </>
         </div>
       )}
diff --git a/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js b/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js
index e23961006c..45ac7f7bad 100644
--- a/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js
+++ b/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js
@@ -2,48 +2,24 @@ import React from "react";
 import styled, { css } from "styled-components";
 import PanelReactSvgUrl from "PUBLIC_DIR/images/panel.react.svg?url";
 import IconButton from "@docspace/components/icon-button";
-import { isMobile } from "react-device-detect";
 import { tablet } from "@docspace/components/utils/device";
 import { Base } from "@docspace/components/themes";
+import { ColorTheme, ThemeType } from "../../ColorTheme";
 
-const StyledInfoPanelToggleWrapper = styled.div`
-  display: ${(props) => (props.isInfoPanelVisible ? "none" : "flex")};
+const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)`
 
-  align-items: center;
   align-self: center;
-  justify-content: center;
   margin-left: auto;
 
   margin-bottom: 1px;
+  padding: 0;
 
   @media ${tablet} {
     display: none;
     margin-left: ${(props) => (props.isRootFolder ? "auto" : "0")};
   }
-
-  .info-panel-toggle-bg {
-    height: 32px;
-    width: 32px;
-
-    display: flex;
-
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    background-color: ${(props) =>
-      props.isInfoPanelVisible
-        ? props.theme.infoPanel.sectionHeaderToggleBgActive
-        : props.theme.infoPanel.sectionHeaderToggleBg};
-
-    path {
-      fill: ${(props) =>
-        props.isInfoPanelVisible
-          ? props.theme.infoPanel.sectionHeaderToggleIconActive
-          : props.theme.infoPanel.sectionHeaderToggleIcon};
-    }
-  }
 `;
-StyledInfoPanelToggleWrapper.defaultProps = { theme: Base };
+StyledInfoPanelToggleColorThemeWrapper.defaultProps = { theme: Base };
 
 const ToggleInfoPanelButton = ({
   isRootFolder,
@@ -52,8 +28,9 @@ const ToggleInfoPanelButton = ({
   id,
 }) => {
   return (
-    <StyledInfoPanelToggleWrapper
+    <StyledInfoPanelToggleColorThemeWrapper
       isRootFolder={isRootFolder}
+      themeId={ThemeType.InfoPanelToggle}
       isInfoPanelVisible={isInfoPanelVisible}
     >
       <div className="info-panel-toggle-bg">
@@ -66,7 +43,7 @@ const ToggleInfoPanelButton = ({
           onClick={toggleInfoPanel}
         />
       </div>
-    </StyledInfoPanelToggleWrapper>
+    </StyledInfoPanelToggleColorThemeWrapper>
   );
 };
 

From f8307a609ae04e18fff64e4bd958e7be1d91c96d Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 14 Apr 2023 11:24:53 +0300
Subject: [PATCH 07/17] Web: Moved sort names into constants.

---
 packages/client/src/helpers/constants.js      | 16 ++++++++
 .../Section/Body/TableView/TableHeader.js     | 37 ++++++++++---------
 .../src/pages/Home/Section/Filter/index.js    | 31 +++++++++-------
 .../categories/developer-tools/index.js       | 17 ++++++---
 4 files changed, 63 insertions(+), 38 deletions(-)

diff --git a/packages/client/src/helpers/constants.js b/packages/client/src/helpers/constants.js
index 29a22babca..2405a31f9c 100644
--- a/packages/client/src/helpers/constants.js
+++ b/packages/client/src/helpers/constants.js
@@ -93,3 +93,19 @@ export const DEFAULT_SELECT_LANGUAGE = {
   label: "English (United States)",
   icon: EnUSReactSvgUrl,
 };
+
+/**
+ * Enum for sort by field name
+ * @readonly
+ */
+export const SortByFieldName = Object.freeze({
+  Name: "AZ",
+  ModifiedDate: "DateAndTime",
+  CreationDate: "DateAndTimeCreation",
+  Author: "Author",
+  Size: "Size",
+  Type: "Type",
+  Room: "Room",
+  Tags: "Tags",
+  RoomType: "roomType",
+});
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js
index 9a9369221e..5ae34426df 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js
@@ -3,6 +3,7 @@ import TableHeader from "@docspace/components/table-container/TableHeader";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
 import { Events } from "@docspace/common/constants";
+import { SortByFieldName } from "../../../../../helpers/constants";
 
 class FilesTableHeader extends React.Component {
   constructor(props) {
@@ -33,7 +34,7 @@ class FilesTableHeader extends React.Component {
           resizable: true,
           enable: this.props.roomColumnNameIsEnabled,
           default: true,
-          sortBy: "AZ",
+          sortBy: SortByFieldName.Name,
           minWidth: 210,
           onClick: this.onRoomsFilter,
         },
@@ -42,7 +43,7 @@ class FilesTableHeader extends React.Component {
           title: t("Common:Type"),
           enable: this.props.roomColumnTypeIsEnabled,
           resizable: true,
-          sortBy: "roomType",
+          sortBy: SortByFieldName.RoomType,
           onChange: this.onColumnChange,
           onClick: this.onRoomsFilter,
         },
@@ -51,7 +52,7 @@ class FilesTableHeader extends React.Component {
           title: t("Common:Tags"),
           enable: this.props.roomColumnTagsIsEnabled,
           resizable: true,
-          sortBy: "Tags",
+          sortBy: SortByFieldName.Tags,
           withTagRef: true,
           onChange: this.onColumnChange,
           onClick: this.onRoomsFilter,
@@ -61,7 +62,7 @@ class FilesTableHeader extends React.Component {
           title: t("Common:Owner"),
           enable: this.props.roomColumnOwnerIsEnabled,
           resizable: true,
-          sortBy: "Author",
+          sortBy: SortByFieldName.Author,
           onChange: this.onColumnChange,
           onClick: this.onRoomsFilter,
         },
@@ -70,7 +71,7 @@ class FilesTableHeader extends React.Component {
           title: t("ByLastModified"),
           enable: this.props.roomColumnActivityIsEnabled,
           resizable: true,
-          sortBy: "DateAndTime",
+          sortBy: SortByFieldName.ModifiedDate,
           onChange: this.onColumnChange,
           onClick: this.onRoomsFilter,
         },
@@ -84,7 +85,7 @@ class FilesTableHeader extends React.Component {
           resizable: true,
           enable: this.props.nameColumnIsEnabled,
           default: true,
-          sortBy: "AZ",
+          sortBy: SortByFieldName.Name,
           minWidth: 210,
           onClick: this.onFilter,
         },
@@ -93,7 +94,7 @@ class FilesTableHeader extends React.Component {
           title: t("Common:Room"),
           enable: this.props.roomColumnIsEnabled,
           resizable: true,
-          sortBy: "Room",
+          sortBy: SortByFieldName.Room,
           onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
@@ -102,7 +103,7 @@ class FilesTableHeader extends React.Component {
           title: t("ByAuthor"),
           enable: this.props.authorTrashColumnIsEnabled,
           resizable: true,
-          sortBy: "Author",
+          sortBy: SortByFieldName.Author,
           onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
@@ -111,7 +112,7 @@ class FilesTableHeader extends React.Component {
           title: t("ByCreation"),
           enable: this.props.createdTrashColumnIsEnabled,
           resizable: true,
-          sortBy: "DateAndTimeCreation",
+          sortBy: SortByFieldName.CreationDate,
           onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
@@ -120,7 +121,7 @@ class FilesTableHeader extends React.Component {
           title: t("ByErasure"),
           enable: this.props.erasureColumnIsEnabled,
           resizable: true,
-          sortBy: "DateAndTime",
+          sortBy: SortByFieldName.ModifiedDate,
           onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
@@ -129,7 +130,7 @@ class FilesTableHeader extends React.Component {
           title: t("Common:Size"),
           enable: this.props.sizeTrashColumnIsEnabled,
           resizable: true,
-          sortBy: "Size",
+          sortBy: SortByFieldName.Size,
           onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
@@ -138,7 +139,7 @@ class FilesTableHeader extends React.Component {
           title: t("Common:Type"),
           enable: this.props.typeTrashColumnIsEnabled,
           resizable: true,
-          sortBy: "Type",
+          sortBy: SortByFieldName.Type,
           onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
@@ -159,7 +160,7 @@ class FilesTableHeader extends React.Component {
           resizable: true,
           enable: this.props.nameColumnIsEnabled,
           default: true,
-          sortBy: "AZ",
+          sortBy: SortByFieldName.Name,
           minWidth: 210,
           onClick: this.onFilter,
         },
@@ -168,7 +169,7 @@ class FilesTableHeader extends React.Component {
           title: t("ByAuthor"),
           enable: this.props.authorColumnIsEnabled,
           resizable: true,
-          sortBy: "Author",
+          sortBy: SortByFieldName.Author,
           onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
@@ -177,7 +178,7 @@ class FilesTableHeader extends React.Component {
           title: t("ByCreation"),
           enable: this.props.createdColumnIsEnabled,
           resizable: true,
-          sortBy: "DateAndTimeCreation",
+          sortBy: SortByFieldName.CreationDate,
           onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
@@ -186,7 +187,7 @@ class FilesTableHeader extends React.Component {
           title: t("ByLastModified"),
           enable: this.props.modifiedColumnIsEnabled,
           resizable: true,
-          sortBy: "DateAndTime",
+          sortBy: SortByFieldName.ModifiedDate,
           onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
@@ -195,7 +196,7 @@ class FilesTableHeader extends React.Component {
           title: t("Common:Size"),
           enable: this.props.sizeColumnIsEnabled,
           resizable: true,
-          sortBy: "Size",
+          sortBy: SortByFieldName.Size,
           onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
@@ -204,7 +205,7 @@ class FilesTableHeader extends React.Component {
           title: t("Common:Type"),
           enable: this.props.typeColumnIsEnabled,
           resizable: true,
-          sortBy: "Type",
+          sortBy: SortByFieldName.Type,
           onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
diff --git a/packages/client/src/pages/Home/Section/Filter/index.js b/packages/client/src/pages/Home/Section/Filter/index.js
index 180efc9130..af84bd1f4e 100644
--- a/packages/client/src/pages/Home/Section/Filter/index.js
+++ b/packages/client/src/pages/Home/Section/Filter/index.js
@@ -28,6 +28,8 @@ import { getDefaultRoomName } from "@docspace/client/src/helpers/filesUtils";
 
 import withLoader from "../../../../HOCs/withLoader";
 import { TableVersions } from "SRC_DIR/helpers/constants";
+import { SortByFieldName } from "../../../../helpers/constants";
+
 import { showLoader, hideLoader } from "./FilterUtils";
 
 const getFilterType = (filterValues) => {
@@ -1079,67 +1081,67 @@ const SectionFilterContent = ({
 
     const name = {
       id: "sort-by_name",
-      key: "AZ",
+      key: SortByFieldName.Name,
       label: t("Common:Name"),
       default: true,
     };
     const modifiedDate = {
       id: "sort-by_modified",
-      key: "DateAndTime",
+      key: SortByFieldName.ModifiedDate,
       label: t("Common:LastModifiedDate"),
       default: true,
     };
     const room = {
       id: "sort-by_room",
-      key: "Room",
+      key: SortByFieldName.Room,
       label: t("Common:Room"),
       default: true,
     };
     const authorOption = {
       id: "sort-by_author",
-      key: "Author",
+      key: SortByFieldName.Author,
       label: t("ByAuthor"),
       default: true,
     };
     const creationDate = {
       id: "sort-by_created",
-      key: "DateAndTimeCreation",
+      key: SortByFieldName.CreationDate,
       label: t("InfoPanel:CreationDate"),
       default: true,
     };
     const owner = {
       id: "sort-by_owner",
-      key: "Author",
+      key: SortByFieldName.Author,
       label: t("Common:Owner"),
       default: true,
     };
     const erasure = {
       id: "sort-by_erasure",
-      key: "DateAndTime",
+      key: SortByFieldName.ModifiedDate,
       label: t("ByErasure"),
       default: true,
     };
     const tags = {
       id: "sort-by_tags",
-      key: "Tags",
+      key: SortByFieldName.Tags,
       label: t("Common:Tags"),
       default: true,
     };
     const size = {
       id: "sort-by_size",
-      key: "Size",
+      key: SortByFieldName.Size,
       label: t("Common:Size"),
       default: true,
     };
     const type = {
       id: "sort-by_type",
-      key: "Type",
+      key: SortByFieldName.Type,
       label: t("Common:Type"),
       default: true,
     };
     const roomType = {
       id: "sort-by_room-type",
-      key: "roomType",
+      key: SortByFieldName.RoomType,
       label: t("Common:Type"),
       default: true,
     };
@@ -1453,9 +1455,10 @@ const SectionFilterContent = ({
     }
   };
 
-  useEffect(() => (!!isLoadedFilter ? showLoader() : hideLoader()), [
-    isLoadedFilter,
-  ]);
+  useEffect(
+    () => (!!isLoadedFilter ? showLoader() : hideLoader()),
+    [isLoadedFilter]
+  );
 
   if (!isLoadedFilter) {
     return <Loaders.Filter style={{ display: "none" }} id="filter-loader" />;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js
index 93edd37231..3491e00cb2 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js
@@ -14,6 +14,7 @@ import { objectToGetParams, loadScript } from "@docspace/common/utils";
 import { inject, observer } from "mobx-react";
 import { isMobile } from "react-device-detect";
 import BreakpointWarning from "SRC_DIR/components/BreakpointWarning";
+import { SortByFieldName } from "../../../../helpers/constants";
 
 const Controls = styled(Box)`
   width: 500px;
@@ -81,12 +82,16 @@ const PortalIntegration = (props) => {
   const scriptUrl = `${window.location.origin}/static/scripts/api.js`;
 
   const dataSortBy = [
-    { key: "DateAndTime", label: t("Common:LastModifiedDate"), default: true },
-    { key: "AZ", label: t("Common:Title") },
-    { key: "Type", label: t("Common:Type") },
-    { key: "Size", label: t("Common:Size") },
-    { key: "DateAndTimeCreation", label: t("Files:ByCreation") },
-    { key: "Author", label: t("Files:ByAuthor") },
+    {
+      key: SortByFieldName.ModifiedDate,
+      label: t("Common:LastModifiedDate"),
+      default: true,
+    },
+    { key: SortByFieldName.Name, label: t("Common:Title") },
+    { key: SortByFieldName.Type, label: t("Common:Type") },
+    { key: SortByFieldName.Size, label: t("Common:Size") },
+    { key: SortByFieldName.CreationDate, label: t("Files:ByCreation") },
+    { key: SortByFieldName.Author, label: t("Files:ByAuthor") },
   ];
 
   const dataSortOrder = [

From 38534a2e6323e80f2450e517f6b3cda53517e918 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 14 Apr 2023 13:12:44 +0300
Subject: [PATCH 08/17] Web: Added taking translation from i18n.

---
 packages/client/src/helpers/filesUtils.js     | 20 +++++++++----------
 .../InfoPanel/Body/helpers/DetailsHelper.js   |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/helpers/filesUtils.js b/packages/client/src/helpers/filesUtils.js
index aead2e0f62..48b12eebaa 100644
--- a/packages/client/src/helpers/filesUtils.js
+++ b/packages/client/src/helpers/filesUtils.js
@@ -16,28 +16,28 @@ import i18n from "./i18n";
 
 import { request } from "@docspace/common/api/client";
 
-export const getFileTypeName = (fileType, t) => {
+export const getFileTypeName = (fileType) => {
   switch (fileType) {
     case FileType.Unknown:
-      return t("Common:Unknown");
+      return i18n.t("Common:Unknown");
     case FileType.Archive:
-      return t("Common:Archive");
+      return i18n.t("Common:Archive");
     case FileType.Video:
-      return t("Common:Video");
+      return i18n.t("Common:Video");
     case FileType.Audio:
-      return t("Common:Audio");
+      return i18n.t("Common:Audio");
     case FileType.Image:
-      return t("Common:Image");
+      return i18n.t("Common:Image");
     case FileType.Spreadsheet:
-      return t("Files:Spreadsheet");
+      return i18n.t("Files:Spreadsheet");
     case FileType.Presentation:
-      return t("Files:Presentation");
+      return i18n.t("Files:Presentation");
     case FileType.Document:
     case FileType.OFormTemplate:
     case FileType.OForm:
-      return t("Files:Document");
+      return i18n.t("Files:Document");
     default:
-      return t("Files:Folder");
+      return i18n.t("Files:Folder");
   }
 };
 
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/helpers/DetailsHelper.js b/packages/client/src/pages/Home/InfoPanel/Body/helpers/DetailsHelper.js
index 10d15a4c88..892cf7dc51 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/helpers/DetailsHelper.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/helpers/DetailsHelper.js
@@ -240,7 +240,7 @@ class DetailsHelper {
     return text(
       this.item.isRoom
         ? getDefaultRoomName(this.item.roomType, this.t)
-        : getFileTypeName(this.item.fileType, this.t)
+        : getFileTypeName(this.item.fileType)
     );
   };
 

From 71472df9d2707b725b871229235a04207bc06765 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 14 Apr 2023 13:20:47 +0300
Subject: [PATCH 09/17] Web: RowsView: Added display of sorting in rows.

---
 .../Section/Body/RowsView/FilesRowContent.js  | 60 ++++++++++++++++---
 1 file changed, 52 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
index d91dd09ca0..5e11805485 100644
--- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
@@ -15,6 +15,8 @@ import withBadges from "../../../../../HOCs/withBadges";
 import { Base } from "@docspace/components/themes";
 import { RoomsTypeTranslations } from "@docspace/common/constants";
 import { desktop } from "@docspace/components/utils/device";
+import { getFileTypeName } from "../../../../../helpers/filesUtils";
+import { SortByFieldName } from "../../../../../helpers/constants";
 
 const SimpleFilesRowContent = styled(RowContent)`
   .row-main-container-wrapper {
@@ -101,6 +103,9 @@ const FilesRowContent = ({
   theme,
   isRooms,
   isTrashFolder,
+  filterSortBy,
+  createdDate,
+  fileOwner,
 }) => {
   const {
     contentLength,
@@ -113,10 +118,43 @@ const FilesRowContent = ({
     isRoom,
     daysRemaining,
     viewAccessability,
+    fileType,
+    tags,
   } = item;
 
   const isMedia = viewAccessability?.ImageView || viewAccessability?.MediaView;
 
+  const contentComponent = () => {
+    switch (filterSortBy) {
+      case SortByFieldName.Size:
+        if (!contentLength) return "—";
+        return contentLength;
+
+      case SortByFieldName.CreationDate:
+        return createdDate;
+
+      case SortByFieldName.Author:
+        return fileOwner;
+
+      case SortByFieldName.Type:
+        return getFileTypeName(fileType);
+
+      case SortByFieldName.Tags:
+        if (tags?.length === 0) return "—";
+        return tags?.map((elem) => {
+          return elem;
+        });
+
+      default:
+        if (isTrashFolder)
+          return t("Files:DaysRemaining", {
+            daysRemaining,
+          });
+
+        return updatedDate;
+    }
+  };
+
   return (
     <>
       <SimpleFilesRowContent
@@ -150,11 +188,7 @@ const FilesRowContent = ({
           // color={sideColor}
           className="row_update-text"
         >
-          {isTrashFolder
-            ? t("Files:DaysRemaining", {
-                daysRemaining,
-              })
-            : updatedDate && updatedDate}
+          {contentComponent()}
         </Text>
 
         <Text
@@ -181,9 +215,19 @@ const FilesRowContent = ({
   );
 };
 
-export default inject(({ auth, treeFoldersStore }) => {
-  const { isRecycleBinFolder } = treeFoldersStore;
-  return { theme: auth.settingsStore.theme, isTrashFolder: isRecycleBinFolder };
+export default inject(({ auth, treeFoldersStore, filesStore }) => {
+  const { filter, roomsFilter } = filesStore;
+  const { isRecycleBinFolder, isRoomsFolder, isArchiveFolder } =
+    treeFoldersStore;
+
+  const isRooms = isRoomsFolder || isArchiveFolder;
+  const filterSortBy = isRooms ? roomsFilter.sortBy : filter.sortBy;
+
+  return {
+    filterSortBy,
+    theme: auth.settingsStore.theme,
+    isTrashFolder: isRecycleBinFolder,
+  };
 })(
   observer(
     withRouter(

From 74268a34e7dc2a5382e2cba30c57679996a3f5e7 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 14 Apr 2023 13:22:50 +0300
Subject: [PATCH 10/17] Web: RowsView: Deleted useless code.

---
 .../pages/Home/Section/Body/RowsView/FilesRowContent.js    | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
index 5e11805485..9e3ecef783 100644
--- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
@@ -1,10 +1,9 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { inject, observer } from "mobx-react";
 import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import { isMobile, isTablet, isMobileOnly } from "react-device-detect";
-import moment from "moment";
 
 import Link from "@docspace/components/link";
 import Text from "@docspace/components/text";
@@ -112,18 +111,14 @@ const FilesRowContent = ({
     fileExst,
     filesCount,
     foldersCount,
-    autoDelete,
     providerKey,
     title,
     isRoom,
     daysRemaining,
-    viewAccessability,
     fileType,
     tags,
   } = item;
 
-  const isMedia = viewAccessability?.ImageView || viewAccessability?.MediaView;
-
   const contentComponent = () => {
     switch (filterSortBy) {
       case SortByFieldName.Size:

From f6d60e82c0640b43abf6e33a2641c361c6dd713e Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 14 Apr 2023 13:35:49 +0300
Subject: [PATCH 11/17] Web: RowsView: Fixed side color.

---
 .../src/pages/Home/Section/Body/RowsView/FilesRowContent.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
index 9e3ecef783..c5a8beb74c 100644
--- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
@@ -156,6 +156,7 @@ const FilesRowContent = ({
         sectionWidth={sectionWidth}
         isMobile={isMobile}
         isFile={fileExst || contentLength}
+        sideColor={theme.filesSection.rowView.sideColor}
       >
         <Link
           className="row-content-link"
@@ -180,7 +181,6 @@ const FilesRowContent = ({
           containerWidth="15%"
           fontSize="12px"
           fontWeight={400}
-          // color={sideColor}
           className="row_update-text"
         >
           {contentComponent()}

From 4354a15bacb4b46dcda9db15f97da19132dc3d9f Mon Sep 17 00:00:00 2001
From: Akmal Isomadinov <isomadinovakmal1997@gmail.com>
Date: Fri, 14 Apr 2023 15:42:11 +0500
Subject: [PATCH 12/17] Web:Client:Src:Pages Changed the logic changing the
 view

---
 .../Section/Body/RowView/PeopleRowContainer.js  | 15 +++++++++------
 .../Section/Body/TableView/TableContainer.js    | 13 +++++++++----
 .../Section/Body/RowsView/FilesRowContainer.js  | 17 ++++++++++-------
 .../Section/Body/TableView/TableContainer.js    |  9 ++++++---
 4 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/packages/client/src/pages/AccountsHome/Section/Body/RowView/PeopleRowContainer.js b/packages/client/src/pages/AccountsHome/Section/Body/RowView/PeopleRowContainer.js
index 30daf36ead..ee6189fc28 100644
--- a/packages/client/src/pages/AccountsHome/Section/Body/RowView/PeopleRowContainer.js
+++ b/packages/client/src/pages/AccountsHome/Section/Body/RowView/PeopleRowContainer.js
@@ -42,7 +42,7 @@ const StyledRowContainer = styled(RowContainer)`
   .row-selected + .row-wrapper:not(.row-selected) {
     .user-row {
       border-top: ${(props) =>
-        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+    `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
       margin-top: -3px;
 
       ${marginStyles}
@@ -52,7 +52,7 @@ const StyledRowContainer = styled(RowContainer)`
   .row-wrapper:not(.row-selected) + .row-selected {
     .user-row {
       border-top: ${(props) =>
-        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+    `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
       margin-top: -3px;
 
       ${marginStyles}
@@ -68,7 +68,7 @@ const StyledRowContainer = styled(RowContainer)`
   .row-selected:last-child {
     .user-row {
       border-bottom: ${(props) =>
-        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+    `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
       padding-bottom: 1px;
 
       ${marginStyles}
@@ -80,7 +80,7 @@ const StyledRowContainer = styled(RowContainer)`
   .row-selected:first-child {
     .user-row {
       border-top: ${(props) =>
-        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+    `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
       margin-top: -3px;
 
       ${marginStyles}
@@ -102,11 +102,14 @@ const PeopleRowContainer = ({
   withPaging,
 }) => {
   useEffect(() => {
+
+    const width = window.innerWidth;
+
     if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
     // 400 - it is desktop info panel width
     if (
-      (sectionWidth < 1025 && !infoPanelVisible) ||
-      ((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) &&
+      (width < 1025 && !infoPanelVisible) ||
+      ((width < 625 || (viewAs === "row" && width < 1025)) &&
         infoPanelVisible) ||
       isMobile
     ) {
diff --git a/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableContainer.js
index e3aae876cb..8ba839f225 100644
--- a/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableContainer.js
+++ b/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableContainer.js
@@ -83,7 +83,7 @@ const StyledTableContainer = styled(TableContainer)`
       .table-container_user-name-cell,
       .table-container_row-context-menu-wrapper {
         border-bottom: ${(props) =>
-          `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+    `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
       }
     }
   }
@@ -110,13 +110,16 @@ const Table = ({
   canChangeUserType,
 }) => {
   const ref = useRef(null);
-
+  const [hideColumns, setHideColumns] = React.useState(false);
   useEffect(() => {
+
+    const width = window.innerWidth;
+
     if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
     // 400 - it is desktop info panel width
     if (
-      (sectionWidth < 1025 && !infoPanelVisible) ||
-      ((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) &&
+      (width < 1025 && !infoPanelVisible) ||
+      ((width < 625 || (viewAs === "row" && width < 1025)) &&
         infoPanelVisible) ||
       isMobile
     ) {
@@ -136,6 +139,7 @@ const Table = ({
         columnInfoPanelStorageName={columnInfoPanelStorageName}
         sectionWidth={sectionWidth}
         containerRef={ref}
+        setHideColumns={setHideColumns}
       />
       <TableBody
         infoPanelVisible={infoPanelVisible}
@@ -158,6 +162,7 @@ const Table = ({
             changeUserType={changeType}
             userId={userId}
             canChangeUserType={canChangeUserType}
+            hideColumns={hideColumns}
           />
         ))}
       </TableBody>
diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
index 8209457a06..b0a3a97459 100644
--- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
@@ -13,7 +13,7 @@ const StyledRowContainer = styled(RowContainer)`
     .row-selected {
       .files-row {
         border-top: ${(props) =>
-          `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+    `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
         margin-top: -1px;
         padding-top: 0px;
         padding-bottom: 1px;
@@ -24,7 +24,7 @@ const StyledRowContainer = styled(RowContainer)`
   .row-selected + .row-wrapper:not(.row-selected) {
     .files-row {
       border-top: ${(props) =>
-        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+    `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
       margin-top: -3px;
       ${marginStyles}
     }
@@ -35,7 +35,7 @@ const StyledRowContainer = styled(RowContainer)`
     + .row-selected {
     .files-row {
       border-top: ${(props) =>
-        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+    `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
       margin-top: -3px;
       ${marginStyles}
     }
@@ -50,7 +50,7 @@ const StyledRowContainer = styled(RowContainer)`
   .row-selected:last-child {
     .files-row {
       border-bottom: ${(props) =>
-        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+    `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
       ${marginStyles}
     }
     .files-row::after {
@@ -60,7 +60,7 @@ const StyledRowContainer = styled(RowContainer)`
   .row-selected:first-child {
     .files-row {
       border-top: ${(props) =>
-        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+    `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
       margin-top: -2px;
       padding-top: 1px;
       padding-bottom: 1px;
@@ -86,11 +86,14 @@ const FilesRowContainer = ({
   highlightFile,
 }) => {
   useEffect(() => {
+    const width = window.innerWidth;
+
+
     if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
     // 400 - it is desktop info panel width
     if (
-      (sectionWidth < 1025 && !infoPanelVisible) ||
-      ((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) &&
+      (width < 1025 && !infoPanelVisible) ||
+      ((width < 625 || (viewAs === "row" && width < 1025)) &&
         infoPanelVisible) ||
       isMobile
     ) {
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
index aebb6574ee..2294a1443a 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
@@ -90,7 +90,7 @@ const StyledTableContainer = styled(TableContainer)`
       .table-container_file-name-cell,
       .table-container_row-context-menu-wrapper {
         border-bottom: ${(props) =>
-          `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+    `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
       }
     }
   }
@@ -129,11 +129,14 @@ const Table = ({
   const tagRef = useRef(null);
 
   useEffect(() => {
+
+    const width = window.innerWidth;
+
     if ((viewAs !== "table" && viewAs !== "row") || !setViewAs) return;
     // 400 - it is desktop info panel width
     if (
-      (sectionWidth < 1025 && !infoPanelVisible) ||
-      ((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) &&
+      (width < 1025 && !infoPanelVisible) ||
+      ((width < 625 || (viewAs === "row" && width < 1025)) &&
         infoPanelVisible) ||
       isMobile
     ) {

From 0ac465ee3bfd464cfd141c585412fec97fa8e5a6 Mon Sep 17 00:00:00 2001
From: Akmal Isomadinov <isomadinovakmal1997@gmail.com>
Date: Fri, 14 Apr 2023 15:44:17 +0500
Subject: [PATCH 13/17] Web:Components:Table-Container:TableHeader Removed the
 minimum size

---
 .../components/table-container/TableHeader.js | 53 ++++++++++---------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/packages/components/table-container/TableHeader.js b/packages/components/table-container/TableHeader.js
index 3e4b4aaaf9..2dd075c553 100644
--- a/packages/components/table-container/TableHeader.js
+++ b/packages/components/table-container/TableHeader.js
@@ -201,13 +201,13 @@ class TableHeader extends React.Component {
   onMouseUp = () => {
     !this.props.infoPanelVisible
       ? localStorage.setItem(
-          this.props.columnStorageName,
-          this.props.containerRef.current.style.gridTemplateColumns
-        )
+        this.props.columnStorageName,
+        this.props.containerRef.current.style.gridTemplateColumns
+      )
       : localStorage.setItem(
-          this.props.columnInfoPanelStorageName,
-          this.props.containerRef.current.style.gridTemplateColumns
-        );
+        this.props.columnInfoPanelStorageName,
+        this.props.containerRef.current.style.gridTemplateColumns
+      );
 
     window.removeEventListener("mousemove", this.onMouseMove);
     window.removeEventListener("mouseup", this.onMouseUp);
@@ -243,15 +243,15 @@ class TableHeader extends React.Component {
       ? containerRef.current
       : document.getElementById("table-container");
 
-    // 400 - it is desktop info panel width
-    const minSize = infoPanelVisible ? size.tablet - 400 : size.tablet;
+    // // 400 - it is desktop info panel width
+    // const minSize = infoPanelVisible ? size.tablet - 400 : size.tablet;
 
-    if (
-      !container ||
-      +container.clientWidth + containerMargin <= minSize ||
-      sectionWidth <= minSize
-    )
-      return;
+    // if (
+    //   !container ||
+    //   +container.clientWidth + containerMargin <= minSize ||
+    //   sectionWidth <= minSize
+    // )
+    //   return;
 
     const storageSize =
       !resetColumnsSize && localStorage.getItem(columnStorageName);
@@ -285,6 +285,9 @@ class TableHeader extends React.Component {
       return this.resetColumns(true);
     }
 
+
+    if (!container) return
+
     const containerWidth = +container.clientWidth;
 
     const oldWidth =
@@ -414,12 +417,12 @@ class TableHeader extends React.Component {
                     ? `${defaultColumnSize}px`
                     : (currentContentWidth * percent) / 100 >
                       defaultMinColumnSize
-                    ? (currentContentWidth * percent) / 100 + "px"
-                    : defaultMinColumnSize + "px";
+                      ? (currentContentWidth * percent) / 100 + "px"
+                      : defaultMinColumnSize + "px";
 
                   if (
                     (currentContentWidth * percent) / 100 <
-                      defaultMinColumnSize &&
+                    defaultMinColumnSize &&
                     !defaultColumnSize
                   ) {
                     overWidth +=
@@ -478,10 +481,9 @@ class TableHeader extends React.Component {
                 const newItemWidth = defaultColumnSize
                   ? `${defaultColumnSize}px`
                   : index == 0
-                  ? `${
-                      contentWidth - enabledColumnsCount * defaultMinColumnSize
+                    ? `${contentWidth - enabledColumnsCount * defaultMinColumnSize
                     }px`
-                  : `${defaultMinColumnSize}px`;
+                    : `${defaultMinColumnSize}px`;
 
                 gridTemplateColumns.push(newItemWidth);
               } else {
@@ -524,9 +526,9 @@ class TableHeader extends React.Component {
             const newItemWidth = defaultColumnSize
               ? `${defaultColumnSize}px`
               : percent === 0
-              ? `${minColumnSize}px`
-              : ((containerWidth - defaultSize - settingsSize) * percent) /
-                  100 +
+                ? `${minColumnSize}px`
+                : ((containerWidth - defaultSize - settingsSize) * percent) /
+                100 +
                 "px";
 
             gridTemplateColumns.push(newItemWidth);
@@ -675,9 +677,8 @@ class TableHeader extends React.Component {
       <>
         <StyledTableHeader
           id="table-container_caption-header"
-          className={`${
-            isLengthenHeader ? "lengthen-header" : ""
-          } table-container_header`}
+          className={`${isLengthenHeader ? "lengthen-header" : ""
+            } table-container_header`}
           ref={this.headerRef}
           {...rest}
         >

From 2d789bbc350ca3d9abb132a353eb7e3143224429 Mon Sep 17 00:00:00 2001
From: Akmal Isomadinov <isomadinovakmal1997@gmail.com>
Date: Fri, 14 Apr 2023 15:46:34 +0500
Subject: [PATCH 14/17] 
 Web:Client:src:Pages:AccountsHome:Section:Body:TableView Fixed undefined
 setHideColumns

---
 .../Section/Body/TableView/TableHeader.js     |  2 ++
 .../Section/Body/TableView/TableRow.js        | 21 +++++++++++--------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableHeader.js b/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableHeader.js
index bcaac8226f..6e22b45935 100644
--- a/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableHeader.js
+++ b/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableHeader.js
@@ -140,6 +140,7 @@ class PeopleTableHeader extends React.Component {
       columnStorageName,
       columnInfoPanelStorageName,
       withPaging,
+      setHideColumns
     } = this.props;
     const { sortOrder } = filter;
 
@@ -161,6 +162,7 @@ class PeopleTableHeader extends React.Component {
         checkboxMargin="12px"
         infoPanelVisible={infoPanelVisible}
         useReactWindow={!withPaging}
+        setHideColumns={setHideColumns}
       />
     );
   }
diff --git a/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js b/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js
index 00805e173a..3f2d05e26f 100644
--- a/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js
+++ b/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js
@@ -25,9 +25,9 @@ const StyledPeopleRow = styled(TableRow)`
     .table-container_cell {
       cursor: pointer;
       background: ${(props) =>
-        `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
+    `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
       border-top: ${(props) =>
-        `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+    `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
       margin-top: -1px;
     }
 
@@ -46,8 +46,8 @@ const StyledPeopleRow = styled(TableRow)`
     max-height: 48px;
 
     background: ${(props) =>
-      (props.checked || props.isActive) &&
-      `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
+    (props.checked || props.isActive) &&
+    `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
   }
 
   .table-container_row-checkbox-wrapper {
@@ -130,6 +130,7 @@ const PeopleTableRow = (props) => {
     isActive,
     isSeveralSelection,
     canChangeUserType,
+    hideColumns,
   } = props;
 
   const {
@@ -317,11 +318,12 @@ const PeopleTableRow = (props) => {
     onContentRowClick && onContentRowClick(!isChecked, item);
   };
 
+  console.log({ contextOptionsProps })
+
   return (
     <StyledWrapper
-      className={`user-item ${
-        isChecked || isActive ? "table-row-selected" : ""
-      }`}
+      className={`user-item ${isChecked || isActive ? "table-row-selected" : ""
+        }`}
     >
       <StyledPeopleRow
         key={item.id}
@@ -331,6 +333,7 @@ const PeopleTableRow = (props) => {
         isActive={isActive}
         onClick={onRowClick}
         fileContextClick={onRowContextClick}
+        hideColumns={hideColumns}
         {...contextOptionsProps}
       >
         <TableCell className={"table-container_user-name-cell"}>
@@ -360,8 +363,8 @@ const PeopleTableRow = (props) => {
             {statusType === "pending"
               ? email
               : displayName?.trim()
-              ? displayName
-              : email}
+                ? displayName
+                : email}
           </Link>
           <Badges statusType={statusType} isPaid={!isVisitor} />
         </TableCell>

From 8a093b4443364792b799c023f067732647c73507 Mon Sep 17 00:00:00 2001
From: Akmal Isomadinov <isomadinovakmal1997@gmail.com>
Date: Mon, 17 Apr 2023 16:36:58 +0500
Subject: [PATCH 15/17] Web:Client:AccountsHome:TableRow Fixed Combobox

---
 .../Section/Body/TableView/TableRow.js        | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js b/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js
index 3f2d05e26f..c2204a90bc 100644
--- a/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js
+++ b/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js
@@ -25,9 +25,9 @@ const StyledPeopleRow = styled(TableRow)`
     .table-container_cell {
       cursor: pointer;
       background: ${(props) =>
-    `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
+        `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
       border-top: ${(props) =>
-    `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+        `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
       margin-top: -1px;
     }
 
@@ -46,8 +46,8 @@ const StyledPeopleRow = styled(TableRow)`
     max-height: 48px;
 
     background: ${(props) =>
-    (props.checked || props.isActive) &&
-    `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
+      (props.checked || props.isActive) &&
+      `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
   }
 
   .table-container_row-checkbox-wrapper {
@@ -77,6 +77,15 @@ const StyledPeopleRow = styled(TableRow)`
     margin-left: -8px;
   }
 
+  .type-combobox {
+    visibility: ${(props) => (props.hideColumns ? "hidden" : "visible")};
+    opacity: ${(props) => (props.hideColumns ? 0 : 1)};
+
+    & > div {
+      max-width: fit-content;
+    }
+  }
+
   .type-combobox,
   .room-combobox {
     padding-left: 8px;
@@ -259,7 +268,7 @@ const PeopleTableRow = (props) => {
         }
         options={typesOptions}
         onSelect={onTypeChange}
-        scaled={false}
+        scaled
         size="content"
         displaySelectedOption
         modernView
@@ -318,12 +327,13 @@ const PeopleTableRow = (props) => {
     onContentRowClick && onContentRowClick(!isChecked, item);
   };
 
-  console.log({ contextOptionsProps })
+  console.log({ contextOptionsProps });
 
   return (
     <StyledWrapper
-      className={`user-item ${isChecked || isActive ? "table-row-selected" : ""
-        }`}
+      className={`user-item ${
+        isChecked || isActive ? "table-row-selected" : ""
+      }`}
     >
       <StyledPeopleRow
         key={item.id}
@@ -363,8 +373,8 @@ const PeopleTableRow = (props) => {
             {statusType === "pending"
               ? email
               : displayName?.trim()
-                ? displayName
-                : email}
+              ? displayName
+              : email}
           </Link>
           <Badges statusType={statusType} isPaid={!isVisitor} />
         </TableCell>

From 8c3608b52d8793fbccaa296b45950900f08fbdce Mon Sep 17 00:00:00 2001
From: Akmal Isomadinov <isomadinovakmal1997@gmail.com>
Date: Thu, 20 Apr 2023 16:31:09 +0500
Subject: [PATCH 16/17] Web:Client:AccountsHome Removed useless code

---
 .../src/pages/AccountsHome/Section/Body/TableView/TableRow.js   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js b/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js
index f1a9f92026..84a62100ae 100644
--- a/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js
+++ b/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js
@@ -326,8 +326,6 @@ const PeopleTableRow = (props) => {
     onContentRowClick && onContentRowClick(!isChecked, item);
   };
 
-  console.log({ contextOptionsProps });
-
   return (
     <StyledWrapper
       className={`user-item ${

From 69f77818f7997b1e4781df57352e1e6007534605 Mon Sep 17 00:00:00 2001
From: Akmal Isomadinov <isomadinovakmal1997@gmail.com>
Date: Thu, 20 Apr 2023 16:57:04 +0500
Subject: [PATCH 17/17] Web:Client:PortalSettings Added missing props

---
 .../src/pages/PortalSettings/Layout/Section/Header/index.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
index 10dedf91f5..2cde891808 100644
--- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
+++ b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
@@ -332,7 +332,7 @@ const SectionHeaderContent = (props) => {
               )}
             </div>
           </Headline>
-          {addUsers && (
+          {props.addUsers && (
             <div className="action-wrapper">
               <IconButton
                 iconName={ActionsHeaderTouchReactSvgUrl}