feat: disable Update View button if filters and sorts are up to date (#1293)

Closes #1291

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)),
+      ),
+});

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)),
+      ),
+});

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