From 233e06ec6a9b13e74a4eb824e3e26e3687a86a35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Tue, 10 Jan 2023 08:15:12 +0000 Subject: [PATCH] fix: disable autoResetHiddenColumns when useConditionallyHiddenColumns (#2851) https://linear.app/unleash/issue/2-563/fix-issue-with-useconditionallyhiddencolumns-and-react-table It seems like we should add `autoResetHiddenColumns: false` to `useTable` whenever we use `useConditionallyHiddenColumns`. Basically the thought is that, if we're controlling column visibility in our own way, we should not want other things to change that state unpredictably, otherwise this may make React go _brrrrrr_. And it can be very hard to pinpoint what exactly may be causing React to go _brrrrrr_. ![image](https://user-images.githubusercontent.com/14320932/211332339-95918c5c-e3ea-40e9-b8b4-756a798a4702.png) First detected this issue apparently randomly while developing the new SA table. Around 10-20 page refreshes would eventually trigger it. Was not easy to find, but hopefully this fixes it permanently. At least I haven't been able to reproduce it since. Maybe someone has a better idea of where the issue could be or if this is a pretty good guess. Doesn't seem like this change hurts us anyways. I love React, `useEffect` and these very to-the-point error messages. Very fun and productive. Reference: https://react-table-v7.tanstack.com/docs/api/useTable --- .../src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx | 1 + .../groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx | 1 + .../ProjectRoles/ProjectRoleList/ProjectRoleList.tsx | 1 + .../ServiceAccountTokens/ServiceAccountTokens.tsx | 1 + .../ServiceAccountsTable/ServiceAccountsTable.tsx | 1 + frontend/src/component/admin/users/UsersList/UsersList.tsx | 1 + frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx | 1 + .../ChangeRequestsTabs/ChangeRequestsTabs.tsx | 1 + .../feature/FeatureToggleList/FeatureToggleListTable.tsx | 1 + .../FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx | 1 + .../EnvironmentVariantsTable/EnvironmentVariantsTable.tsx | 1 + .../FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx | 1 + .../Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx | 1 + .../Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx | 1 + .../project/Project/ProjectHealth/ReportTable/ReportTable.tsx | 1 + .../ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx | 1 + .../project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx | 1 + frontend/src/component/segments/SegmentTable.tsx | 1 + .../user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx | 1 + 19 files changed, 19 insertions(+) diff --git a/frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx b/frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx index a3fc7497d6..7ce67c2028 100644 --- a/frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx +++ b/frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx @@ -52,6 +52,7 @@ export const ApiTokenTable = () => { data: tokens as any, initialState, sortTypes, + autoResetHiddenColumns: false, disableSortRemove: true, }, useGlobalFilter, diff --git a/frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx b/frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx index 17bb352f87..1dec51ade5 100644 --- a/frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx +++ b/frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx @@ -92,6 +92,7 @@ export const GroupFormUsersTable: VFC = ({ columns: columns as any[], data: users as any[], sortTypes, + autoResetHiddenColumns: false, autoResetSortBy: false, disableSortRemove: true, disableMultiSort: true, diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx index fb180108f6..5c4d15c38b 100644 --- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx +++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx @@ -165,6 +165,7 @@ const ProjectRoleList = () => { initialState, sortTypes, autoResetGlobalFilter: false, + autoResetHiddenColumns: false, autoResetSortBy: false, disableSortRemove: true, defaultColumn: { diff --git a/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountTokens/ServiceAccountTokens.tsx b/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountTokens/ServiceAccountTokens.tsx index 0a1ee2d06e..dfcd74c98e 100644 --- a/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountTokens/ServiceAccountTokens.tsx +++ b/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountTokens/ServiceAccountTokens.tsx @@ -229,6 +229,7 @@ export const ServiceAccountTokens = ({ data, initialState, sortTypes, + autoResetHiddenColumns: false, autoResetSortBy: false, disableSortRemove: true, disableMultiSort: true, diff --git a/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsTable.tsx b/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsTable.tsx index 104a6b6735..df45e0106e 100644 --- a/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsTable.tsx +++ b/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsTable.tsx @@ -168,6 +168,7 @@ export const ServiceAccountsTable = () => { data, initialState, sortTypes, + autoResetHiddenColumns: false, autoResetSortBy: false, disableSortRemove: true, disableMultiSort: true, diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx index 668572df7c..b5758f3e94 100644 --- a/frontend/src/component/admin/users/UsersList/UsersList.tsx +++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx @@ -206,6 +206,7 @@ const UsersList = () => { initialState, sortTypes, autoResetGlobalFilter: false, + autoResetHiddenColumns: false, autoResetSortBy: false, disableSortRemove: true, defaultColumn: { diff --git a/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx b/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx index 3c74873540..f41f26194a 100644 --- a/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx +++ b/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx @@ -217,6 +217,7 @@ export const ArchiveTable = ({ data, initialState, sortTypes, + autoResetHiddenColumns: false, disableSortRemove: true, autoResetSortBy: false, }, diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx index aa02407750..769b068801 100644 --- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx +++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx @@ -178,6 +178,7 @@ export const ChangeRequestsTabs = ({ data, initialState, sortTypes, + autoResetHiddenColumns: false, disableSortRemove: true, autoResetSortBy: false, defaultColumn: { diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx index f5d77476c4..ba0960130a 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx @@ -204,6 +204,7 @@ export const FeatureToggleListTable: VFC = () => { data, initialState, sortTypes, + autoResetHiddenColumns: false, autoResetSortBy: false, disableSortRemove: true, disableMultiSort: true, diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx index 2989bd390e..734e0f9ace 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx @@ -35,6 +35,7 @@ export const FeatureMetricsTable = ({ initialState, columns: COLUMNS as any, data: metrics as any, + autoResetHiddenColumns: false, disableSortRemove: true, defaultColumn: { Cell: TextCell }, }, diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx index 623903b34b..345b3425c2 100644 --- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx @@ -138,6 +138,7 @@ export const EnvironmentVariantsTable = ({ data, initialState, sortTypes, + autoResetHiddenColumns: false, autoResetSortBy: false, disableSortRemove: true, disableMultiSort: true, diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx index c9f4f5ed1a..4d668de182 100644 --- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx @@ -199,6 +199,7 @@ export const FeatureVariantsList = () => { data: data as any[], initialState, sortTypes, + autoResetHiddenColumns: false, autoResetGlobalFilter: false, autoResetSortBy: false, disableSortRemove: true, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx index fe86c6a429..00e65821a7 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx @@ -170,6 +170,7 @@ export const PlaygroundResultsTable = ({ data: data as any, sortTypes, autoResetGlobalFilter: false, + autoResetHiddenColumns: false, autoResetSortBy: false, disableSortRemove: true, disableMultiSort: true, diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx index a0bc3deeee..e946405d98 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -421,6 +421,7 @@ export const ProjectFeatureToggles = ({ data, initialState, sortTypes, + autoResetHiddenColumns: false, disableSortRemove: true, autoResetSortBy: false, getRowId, diff --git a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx index 0b992843ac..75df6cb1dd 100644 --- a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx +++ b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx @@ -84,6 +84,7 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => { initialState, sortTypes, autoResetGlobalFilter: false, + autoResetHiddenColumns: false, autoResetSortBy: false, disableSortRemove: true, }, diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx index f3f8df4814..39f3581914 100644 --- a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx +++ b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx @@ -297,6 +297,7 @@ export const ProjectAccessTable: VFC = () => { data, initialState, sortTypes, + autoResetHiddenColumns: false, autoResetSortBy: false, disableSortRemove: true, disableMultiSort: true, diff --git a/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx b/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx index f534ffbfc8..83956c49eb 100644 --- a/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx +++ b/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx @@ -146,6 +146,7 @@ export const ProjectGroupView: VFC = ({ data, initialState, sortTypes, + autoResetHiddenColumns: false, autoResetSortBy: false, disableSortRemove: true, disableMultiSort: true, diff --git a/frontend/src/component/segments/SegmentTable.tsx b/frontend/src/component/segments/SegmentTable.tsx index 8c5e231972..debee806a1 100644 --- a/frontend/src/component/segments/SegmentTable.tsx +++ b/frontend/src/component/segments/SegmentTable.tsx @@ -62,6 +62,7 @@ export const SegmentTable = () => { data: data as any, sortTypes, autoResetGlobalFilter: false, + autoResetHiddenColumns: false, autoResetSortBy: false, disableSortRemove: true, defaultColumn: { diff --git a/frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx b/frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx index 4568d358a9..1b2ec5b89c 100644 --- a/frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx +++ b/frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx @@ -192,6 +192,7 @@ export const PersonalAPITokensTab = () => { data, initialState, sortTypes, + autoResetHiddenColumns: false, autoResetSortBy: false, disableSortRemove: true, disableMultiSort: true,