Fix: columns positions are saved correctly into local storage

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryTableView/HistoryTableHeader.js

@@ -3,9 +3,8 @@ import TableHeader from "@docspace/components/table-container/TableHeader";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 
-const TABLE_VERSION = "6";
+const TABLE_VERSION = "5";
-const TABLE_COLUMNS = `webhooksHistoryTableColumns_ver-${TABLE_VERSION}`;
+const TABLE_COLUMNS = `webhooksHistoryColumns_ver-${TABLE_VERSION}`;
-const COLUMNS_SIZE = `webhooksHistoryColumnsSize_ver-${TABLE_VERSION}`;
 
 const getColumns = (defaultColumns, userId) => {
   const storageColumns = localStorage.getItem(`${TABLE_COLUMNS}=${userId}`);
@@ -27,7 +26,14 @@ const getColumns = (defaultColumns, userId) => {
 };
 
 const HistoryTableHeader = (props) => {
-  const { userId, sectionWidth, tableRef } = props;
+  const {
+    userId,
+    sectionWidth,
+    tableRef,
+    columnStorageName,
+    columnInfoPanelStorageName,
+    setHideColumns,
+  } = props;
   const { t, ready } = useTranslation(["Webhooks", "People"]);
 
   const defaultColumns = [
@@ -59,11 +65,7 @@ const HistoryTableHeader = (props) => {
 
   const [columns, setColumns] = useState(getColumns(defaultColumns, userId));
 
-  useEffect(() => {
+  function onColumnChange(key, e) {
-    ready && setColumns(getColumns(defaultColumns, userId));
-  }, [ready]);
-
-  const onColumnChange = (key, e, userId) => {
     const columnIndex = columns.findIndex((c) => c.key === key);
 
     if (columnIndex === -1) return;
@@ -76,19 +78,25 @@ const HistoryTableHeader = (props) => {
 
     const tableColumns = columns.map((c) => c.enable && c.key);
     localStorage.setItem(`${TABLE_COLUMNS}=${userId}`, tableColumns);
-  };
+  }
+
+  useEffect(() => {
+    ready && setColumns(getColumns(defaultColumns, userId));
+  }, [ready]);
 
   return (
     <TableHeader
-      columns={columns}
       checkboxSize="32px"
       containerRef={tableRef}
+      columns={columns}
+      columnStorageName={columnStorageName}
+      columnInfoPanelStorageName={columnInfoPanelStorageName}
       sectionWidth={sectionWidth}
+      checkboxMargin="12px"
       showSettings={false}
       useReactWindow
-      setHideColumns={() => {}}
+      setHideColumns={setHideColumns}
-      infoPanelVisible={true}
+      infoPanelVisible={false}
-      columnStorageName={`${COLUMNS_SIZE}=${userId}`}
     />
   );
 };

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryTableView/HistoryTableRow.js

@@ -39,7 +39,7 @@ const StyledWrapper = styled.div`
 `;
 
 const HistoryTableRow = (props) => {
-  const { item, toggleEventId, isIdChecked, retryWebhookEvent } = props;
+  const { item, toggleEventId, isIdChecked, retryWebhookEvent, hideColumns } = props;
   const { t } = useTranslation(["Webhooks", "Common"]);
   const navigate = useNavigate();
 
@@ -86,7 +86,7 @@ const HistoryTableRow = (props) => {
 
   return (
     <StyledWrapper className={isChecked ? "selected-table-row" : ""} onClick={onChange}>
-      <StyledTableRow contextOptions={contextOptions} checked={isChecked}>
+      <StyledTableRow contextOptions={contextOptions} checked={isChecked} hideColumns={hideColumns}>
         <TableCell>
           <TableCell checked={isChecked} className="noPadding">
             <Checkbox onChange={onChange} isChecked={isChecked} />

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryTableView/index.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect } from "react";
 
 import styled from "styled-components";
 
@@ -18,7 +18,7 @@ import { Base } from "@docspace/components/themes";
 const TableWrapper = styled(TableContainer)`
   margin-top: 0;
 
-  .table-container_header{
+  .table-container_header {
     position: absolute;
   }
 
@@ -44,6 +44,10 @@ const TableWrapper = styled(TableContainer)`
 
 TableWrapper.defaultProps = { theme: Base };
 
+const TABLE_VERSION = "5";
+const COLUMNS_SIZE = `webhooksHistoryColumnsSize_ver-${TABLE_VERSION}`;
+const INFO_PANEL_COLUMNS_SIZE = `infoPanelWebhooksHistoryColumnsSize_ver-${TABLE_VERSION}`;
+
 const HistoryTableView = (props) => {
   const {
     sectionWidth,
@@ -55,9 +59,11 @@ const HistoryTableView = (props) => {
     fetchMoreItems,
     formatFilters,
     historyFilters,
+    userId,
   } = props;
 
   const tableRef = useRef(null);
+  const [hideColumns, setHideColumns] = useState(false);
 
   const { id } = useParams();
 
@@ -75,6 +81,9 @@ const HistoryTableView = (props) => {
     fetchMoreItems({ ...params, configId: id, count: 10 });
   };
 
+  const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
+  const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;
+
   return (
     <TableWrapper
       forwardedRef={tableRef}
@@ -82,26 +91,41 @@ const HistoryTableView = (props) => {
         gridTemplateColumns: "300px 100px 400px 24px",
       }}
       useReactWindow>
-      <HistoryTableHeader sectionWidth={sectionWidth} tableRef={tableRef} />
+      <HistoryTableHeader
+        sectionWidth={sectionWidth}
+        tableRef={tableRef}
+        columnStorageName={columnStorageName}
+        columnInfoPanelStorageName={columnInfoPanelStorageName}
+        setHideColumns={setHideColumns}
+      />
       <TableBody
         itemHeight={49}
         useReactWindow
+        infoPanelVisible={false}
+        columnStorageName={columnStorageName}
+        columnInfoPanelStorageName={columnInfoPanelStorageName}
         filesLength={historyItems.length}
         fetchMoreFiles={fetchMoreFiles}
         hasMoreFiles={hasMoreItems}
         itemCount={totalItems}>
         {historyItems.map((item) => (
-          <HistoryTableRow key={item.id} item={{ ...item, title: item.id }} />
+          <HistoryTableRow
+            key={item.id}
+            item={{ ...item, title: item.id }}
+            hideColumns={hideColumns}
+          />
         ))}
       </TableBody>
     </TableWrapper>
   );
 };
 
-export default inject(({ setup, webhooksStore }) => {
+export default inject(({ setup, webhooksStore, auth }) => {
   const { viewAs, setViewAs } = setup;
   const { historyItems, fetchMoreItems, hasMoreItems, totalItems, formatFilters, historyFilters } =
     webhooksStore;
+  const { id: userId } = auth.userStore.user;
+
   return {
     viewAs,
     setViewAs,
@@ -111,5 +135,6 @@ export default inject(({ setup, webhooksStore }) => {
     totalItems,
     formatFilters,
     historyFilters,
+    userId,
   };
 })(observer(HistoryTableView));

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/WebhookTableHeader.js

@@ -1,12 +1,11 @@
-import React, { useState, useRef } from "react";
+import React, { useState } from "react";
 import TableHeader from "@docspace/components/table-container/TableHeader";
 
 import { useTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 
 const TABLE_VERSION = "5";
-const TABLE_COLUMNS = `webhooksConfigTableColumns_ver-${TABLE_VERSION}`;
+const TABLE_COLUMNS = `webhooksConfigColumns_ver-${TABLE_VERSION}`;
-const COLUMNS_SIZE = `webhooksConfigColumnsSize_ver-${TABLE_VERSION}`;
 
 const getColumns = (defaultColumns, userId) => {
   const storageColumns = localStorage.getItem(`${TABLE_COLUMNS}=${userId}`);
@@ -28,10 +27,17 @@ const getColumns = (defaultColumns, userId) => {
 };
 
 const WebhookTableHeader = (props) => {
-  const { userId, sectionWidth, tableRef } = props;
+  const {
+    userId,
+    sectionWidth,
+    tableRef,
+    columnStorageName,
+    columnInfoPanelStorageName,
+    setHideColumns,
+  } = props;
   const { t } = useTranslation(["Webhooks", "Common"]);
 
-  const defaultColumns = useRef([
+  const defaultColumns = [
     {
       key: "Name",
       title: t("Common:Name"),
@@ -56,11 +62,11 @@ const WebhookTableHeader = (props) => {
       resizable: true,
       onChange: onColumnChange,
     },
-  ]);
+  ];
 
-  const [columns, setColumns] = useState(getColumns(defaultColumns.current, userId));
+  const [columns, setColumns] = useState(getColumns(defaultColumns, userId));
 
-  const onColumnChange = (key, e) => {
+  function onColumnChange(key, e) {
     const columnIndex = columns.findIndex((c) => c.key === key);
 
     if (columnIndex === -1) return;
@@ -73,18 +79,21 @@ const WebhookTableHeader = (props) => {
 
     const tableColumns = columns.map((c) => c.enable && c.key);
     localStorage.setItem(`${TABLE_COLUMNS}=${userId}`, tableColumns);
-  };
+  }
 
   return (
     <TableHeader
-      columns={columns}
+      checkboxSize="48px"
       containerRef={tableRef}
+      columns={columns}
+      columnStorageName={columnStorageName}
+      columnInfoPanelStorageName={columnInfoPanelStorageName}
       sectionWidth={sectionWidth}
+      checkboxMargin="12px"
       showSettings={false}
       useReactWindow
-      setHideColumns={() => {}}
+      setHideColumns={setHideColumns}
-      infoPanelVisible={true}
+      infoPanelVisible={false}
-      columnStorageName={`${COLUMNS_SIZE}=${userId}`}
     />
   );
 };

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/WebhooksTableRow.js

@@ -43,6 +43,7 @@ const WebhooksTableRow = (props) => {
     openSettingsModal,
     openDeleteModal,
     setCurrentWebhook,
+    hideColumns,
   } = props;
   const navigate = useNavigate();
 
@@ -111,7 +112,7 @@ const WebhooksTableRow = (props) => {
   return (
     <>
       <StyledWrapper onClick={handleRowClick}>
-        <StyledTableRow contextOptions={contextOptions}>
+        <StyledTableRow contextOptions={contextOptions} hideColumns={hideColumns}>
           <TableCell>
             <Text as="span" fontWeight={600} className="mr-8 textOverflow">
               {webhook.name}{" "}

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/index.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { isMobile } from "react-device-detect";
 
@@ -30,6 +30,10 @@ const TableWrapper = styled(TableContainer)`
 
 TableWrapper.defaultProps = { theme: Base };
 
+const TABLE_VERSION = "5";
+const COLUMNS_SIZE = `webhooksConfigColumnsSize_ver-${TABLE_VERSION}`;
+const INFO_PANEL_COLUMNS_SIZE = `infoPanelWebhooksConfigColumnsSize_ver-${TABLE_VERSION}`;
+
 const WebhooksTableView = (props) => {
   const {
     webhooks,
@@ -39,9 +43,11 @@ const WebhooksTableView = (props) => {
     setViewAs,
     openSettingsModal,
     openDeleteModal,
+    userId,
   } = props;
 
   const tableRef = useRef(null);
+  const [hideColumns, setHideColumns] = useState(false);
 
   useEffect(() => {
     if (!sectionWidth) return;
@@ -52,17 +58,24 @@ const WebhooksTableView = (props) => {
     }
   }, [sectionWidth]);
 
+  const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
+  const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;
+
   return (
-    <TableWrapper
+    <TableWrapper forwardedRef={tableRef} useReactWindow>
-      forwardedRef={tableRef}
+      <WebhookTableHeader
-      style={{
+        sectionWidth={sectionWidth}
-        gridTemplateColumns: "200px 500px 110px 24px",
+        tableRef={tableRef}
-      }}
+        columnStorageName={columnStorageName}
-      useReactWindow>
+        columnInfoPanelStorageName={columnInfoPanelStorageName}
-      <WebhookTableHeader sectionWidth={sectionWidth} tableRef={tableRef} />
+        setHideColumns={setHideColumns}
+      />
       <TableBody
         itemHeight={49}
         useReactWindow
+        infoPanelVisible={false}
+        columnStorageName={columnStorageName}
+        columnInfoPanelStorageName={columnInfoPanelStorageName}
         filesLength={webhooks.length}
         fetchMoreFiles={loadWebhooks}
         hasMoreFiles={false}
@@ -74,6 +87,7 @@ const WebhooksTableView = (props) => {
             index={index}
             openSettingsModal={openSettingsModal}
             openDeleteModal={openDeleteModal}
+            hideColumns={hideColumns}
           />
         ))}
       </TableBody>
@@ -81,15 +95,17 @@ const WebhooksTableView = (props) => {
   );
 };
 
-export default inject(({ webhooksStore, setup }) => {
+export default inject(({ webhooksStore, setup, auth }) => {
   const { webhooks, loadWebhooks } = webhooksStore;
 
   const { viewAs, setViewAs } = setup;
+  const { id: userId } = auth.userStore.user;
 
   return {
     webhooks,
     viewAs,
     setViewAs,
     loadWebhooks,
+    userId,
   };
 })(observer(WebhooksTableView));