From 0cac598f0c7751e2528a8a702ced9e6513d3a33e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Thu, 24 Aug 2023 15:59:32 +0200
Subject: [PATCH] feat: disable Update View button if filters and sorts are up
 to date (#1293)

Closes #1291
---
 .../states/canPersistFiltersScopedState.ts      | 17 +++++++++++++++++
 .../states/canPersistSortsScopedState.ts        | 17 +++++++++++++++++
 .../components/TableUpdateViewButtonGroup.tsx   | 12 ++++++++++--
 3 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 front/src/modules/ui/filter-n-sort/states/canPersistFiltersScopedState.ts
 create mode 100644 front/src/modules/ui/filter-n-sort/states/canPersistSortsScopedState.ts

diff --git a/front/src/modules/ui/filter-n-sort/states/canPersistFiltersScopedState.ts b/front/src/modules/ui/filter-n-sort/states/canPersistFiltersScopedState.ts
new file mode 100644
index 000000000..a704ca3d4
--- /dev/null
+++ b/front/src/modules/ui/filter-n-sort/states/canPersistFiltersScopedState.ts
@@ -0,0 +1,17 @@
+import { selectorFamily } from 'recoil';
+
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
+
+import { filtersScopedState } from './filtersScopedState';
+import { savedFiltersScopedState } from './savedFiltersScopedState';
+
+export const canPersistFiltersScopedState = selectorFamily({
+  key: 'canPersistFiltersScopedState',
+  get:
+    ([scopeId, viewId]: [string, string | undefined]) =>
+    ({ get }) =>
+      !isDeeplyEqual(
+        get(savedFiltersScopedState(viewId)),
+        get(filtersScopedState(scopeId)),
+      ),
+});
diff --git a/front/src/modules/ui/filter-n-sort/states/canPersistSortsScopedState.ts b/front/src/modules/ui/filter-n-sort/states/canPersistSortsScopedState.ts
new file mode 100644
index 000000000..0502d758f
--- /dev/null
+++ b/front/src/modules/ui/filter-n-sort/states/canPersistSortsScopedState.ts
@@ -0,0 +1,17 @@
+import { selectorFamily } from 'recoil';
+
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
+
+import { savedSortsScopedState } from './savedSortsScopedState';
+import { sortsScopedState } from './sortsScopedState';
+
+export const canPersistSortsScopedState = selectorFamily({
+  key: 'canPersistSortsScopedState',
+  get:
+    ([scopeId, viewId]: [string, string | undefined]) =>
+    ({ get }) =>
+      !isDeeplyEqual(
+        get(savedSortsScopedState(viewId)),
+        get(sortsScopedState(scopeId)),
+      ),
+});
diff --git a/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx b/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx
index f570c12b4..a93a2d7d4 100644
--- a/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx
+++ b/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useRecoilCallback, useSetRecoilState } from 'recoil';
+import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 import { Button, ButtonSize } from '@/ui/button/components/Button';
@@ -10,6 +10,8 @@ import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
 import { DropdownMenuContainer } from '@/ui/filter-n-sort/components/DropdownMenuContainer';
+import { canPersistFiltersScopedState } from '@/ui/filter-n-sort/states/canPersistFiltersScopedState';
+import { canPersistSortsScopedState } from '@/ui/filter-n-sort/states/canPersistSortsScopedState';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { savedFiltersScopedState } from '@/ui/filter-n-sort/states/savedFiltersScopedState';
 import { savedSortsScopedState } from '@/ui/filter-n-sort/states/savedSortsScopedState';
@@ -54,6 +56,12 @@ export const TableUpdateViewButtonGroup = ({
     currentTableViewIdState,
     TableRecoilScopeContext,
   );
+  const canPersistFilters = useRecoilValue(
+    canPersistFiltersScopedState([tableScopeId, currentViewId]),
+  );
+  const canPersistSorts = useRecoilValue(
+    canPersistSortsScopedState([tableScopeId, currentViewId]),
+  );
   const setViewEditMode = useSetRecoilState(tableViewEditModeState);
 
   const { openDropdownButton: openOptionsDropdownButton } = useDropdownButton({
@@ -104,7 +112,7 @@ export const TableUpdateViewButtonGroup = ({
       <ButtonGroup size={ButtonSize.Small}>
         <Button
           title="Update view"
-          disabled={!currentViewId}
+          disabled={!currentViewId || (!canPersistFilters && !canPersistSorts)}
           onClick={handleViewSubmit}
         />
         <Button