[WEB-5379] fix: optimize filter handling in work item components (#8079)

apps/web/core/components/work-item-filters/filters-hoc/base.tsx

@@ -62,17 +62,15 @@ const WorkItemFilterRoot = observer((props: TWorkItemFilterProps) => {
     [isTemporary, entityId]
   );
   // memoize initial values to prevent re-computations when reference changes
-  const initialUserFilters = useMemo(
+  const initialUserFilters = useMemo(() => initialWorkItemFilters.richFilters, [initialWorkItemFilters]);
-    () => initialWorkItemFilters.richFilters,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  ); // Empty dependency array to capture only the initial value
   const workItemFiltersConfig = useWorkItemFiltersConfig({
     allowedFilters: filtersToShowByLayout ? filtersToShowByLayout : [],
     ...entityConfigProps,
   });
   // get or create filter instance
-  const workItemLayoutFilter = getOrCreateFilter({
+  const workItemLayoutFilter = useMemo(
+    () =>
+      getOrCreateFilter({
         entityType,
         entityId: workItemEntityID,
         initialExpression: initialUserFilters,
@@ -82,7 +80,10 @@ const WorkItemFilterRoot = observer((props: TWorkItemFilterProps) => {
           updateViewOptions,
         },
         showOnMount,
-  });
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [entityType, workItemEntityID, saveViewOptions, updateViewOptions, updateFilters]
+  );
 
   // delete filter instance when component unmounts
   useEffect(
@@ -92,8 +93,14 @@ const WorkItemFilterRoot = observer((props: TWorkItemFilterProps) => {
     [deleteFilter, entityType, workItemEntityID]
   );
 
+  useEffect(() => {
     workItemLayoutFilter.configManager.setAreConfigsReady(workItemFiltersConfig.areAllConfigsInitialized);
     workItemLayoutFilter.configManager.registerAll(workItemFiltersConfig.configs);
+  }, [
+    workItemFiltersConfig.areAllConfigsInitialized,
+    workItemFiltersConfig.configs,
+    workItemLayoutFilter.configManager,
+  ]);
 
   return <>{typeof children === "function" ? children({ filter: workItemLayoutFilter }) : children}</>;
 });

apps/web/core/components/work-item-filters/filters-hoc/project-level.tsx

@@ -88,6 +88,17 @@ export const ProjectLevelWorkItemFiltersHOC = observer((props: TProjectLevelWork
       isCurrentUserOwner,
     ]
   );
+  const createViewLabel = useMemo(() => props.saveViewOptions?.label, [props.saveViewOptions?.label]);
+  const updateViewLabel = useMemo(() => props.updateViewOptions?.label, [props.updateViewOptions?.label]);
+  const hasAdditionalChanges = useMemo(
+    () =>
+      !isEqual(initialWorkItemFilters?.displayFilters, viewDetails?.display_filters) ||
+      !isEqual(
+        removeNillKeys(initialWorkItemFilters?.displayProperties),
+        removeNillKeys(viewDetails?.display_properties)
+      ),
+    [initialWorkItemFilters, viewDetails]
+  );
 
   const getDefaultViewDetailPayload: () => Partial<IProjectView> = useCallback(
     () => ({
@@ -108,6 +119,17 @@ export const ProjectLevelWorkItemFiltersHOC = observer((props: TProjectLevelWork
     [initialWorkItemFilters]
   );
 
+  const handleViewSave = useCallback(
+    (expression: TWorkItemFilterExpression) => {
+      setCreateViewPayload({
+        ...getDefaultViewDetailPayload(),
+        ...getViewFilterPayload(expression),
+      });
+      setIsCreateViewModalOpen(true);
+    },
+    [getDefaultViewDetailPayload, getViewFilterPayload]
+  );
+
   const handleViewUpdate = useCallback(
     (filterExpression: TWorkItemFilterExpression) => {
       if (!viewDetails) {
@@ -153,6 +175,25 @@ export const ProjectLevelWorkItemFiltersHOC = observer((props: TProjectLevelWork
     [viewDetails, updateView, workspaceSlug, projectId, getViewFilterPayload]
   );
 
+  const saveViewOptions = useMemo(
+    () => ({
+      label: createViewLabel,
+      isDisabled: !canCreateView,
+      onViewSave: handleViewSave,
+    }),
+    [createViewLabel, canCreateView, handleViewSave]
+  );
+
+  const updateViewOptions = useMemo(
+    () => ({
+      label: updateViewLabel,
+      isDisabled: !canUpdateView,
+      hasAdditionalChanges,
+      onViewUpdate: handleViewUpdate,
+    }),
+    [updateViewLabel, canUpdateView, hasAdditionalChanges, handleViewUpdate]
+  );
+
   return (
     <>
       <CreateUpdateProjectViewModal
@@ -177,28 +218,8 @@ export const ProjectLevelWorkItemFiltersHOC = observer((props: TProjectLevelWork
         memberIds={getProjectMemberIds(projectId, false) ?? undefined}
         moduleIds={getProjectModuleIds(projectId) ?? undefined}
         stateIds={getProjectStateIds(projectId)}
-        saveViewOptions={{
+        saveViewOptions={saveViewOptions}
-          label: props.saveViewOptions?.label,
+        updateViewOptions={updateViewOptions}
-          isDisabled: !canCreateView,
-          onViewSave: (expression) => {
-            setCreateViewPayload({
-              ...getDefaultViewDetailPayload(),
-              ...getViewFilterPayload(expression),
-            });
-            setIsCreateViewModalOpen(true);
-          },
-        }}
-        updateViewOptions={{
-          label: props.updateViewOptions?.label,
-          isDisabled: !canUpdateView,
-          hasAdditionalChanges:
-            !isEqual(initialWorkItemFilters?.displayFilters, viewDetails?.display_filters) ||
-            !isEqual(
-              removeNillKeys(initialWorkItemFilters?.displayProperties),
-              removeNillKeys(viewDetails?.display_properties)
-            ),
-          onViewUpdate: handleViewUpdate,
-        }}
       >
         {children}
       </WorkItemFiltersHOC>

apps/web/core/components/work-item-filters/filters-hoc/workspace-level.tsx

@@ -70,6 +70,17 @@ export const WorkspaceLevelWorkItemFiltersHOC = observer((props: TWorkspaceLevel
       isCurrentUserOwner,
     ]
   );
+  const createViewLabel = useMemo(() => props.saveViewOptions?.label, [props.saveViewOptions?.label]);
+  const updateViewLabel = useMemo(() => props.updateViewOptions?.label, [props.updateViewOptions?.label]);
+  const hasAdditionalChanges = useMemo(
+    () =>
+      !isEqual(initialWorkItemFilters?.displayFilters, viewDetails?.display_filters) ||
+      !isEqual(
+        removeNillKeys(initialWorkItemFilters?.displayProperties),
+        removeNillKeys(viewDetails?.display_properties)
+      ),
+    [initialWorkItemFilters, viewDetails]
+  );
 
   const getDefaultViewDetailPayload: () => Partial<IWorkspaceView> = useCallback(
     () => ({
@@ -89,6 +100,17 @@ export const WorkspaceLevelWorkItemFiltersHOC = observer((props: TWorkspaceLevel
     [initialWorkItemFilters]
   );
 
+  const handleViewSave = useCallback(
+    (expression: TWorkItemFilterExpression) => {
+      setCreateViewPayload({
+        ...getDefaultViewDetailPayload(),
+        ...getViewFilterPayload(expression),
+      });
+      setIsCreateViewModalOpen(true);
+    },
+    [getDefaultViewDetailPayload, getViewFilterPayload]
+  );
+
   const handleViewUpdate = useCallback(
     (filterExpression: TWorkItemFilterExpression) => {
       if (!viewDetails) {
@@ -140,6 +162,25 @@ export const WorkspaceLevelWorkItemFiltersHOC = observer((props: TWorkspaceLevel
     [viewDetails, updateGlobalView, workspaceSlug, getViewFilterPayload]
   );
 
+  const saveViewOptions = useMemo(
+    () => ({
+      label: createViewLabel,
+      isDisabled: !canCreateView,
+      onViewSave: handleViewSave,
+    }),
+    [createViewLabel, canCreateView, handleViewSave]
+  );
+
+  const updateViewOptions = useMemo(
+    () => ({
+      label: updateViewLabel,
+      isDisabled: !canUpdateView,
+      hasAdditionalChanges,
+      onViewUpdate: handleViewUpdate,
+    }),
+    [updateViewLabel, canUpdateView, hasAdditionalChanges, handleViewUpdate]
+  );
+
   return (
     <>
       <CreateUpdateWorkspaceViewModal
@@ -155,28 +196,8 @@ export const WorkspaceLevelWorkItemFiltersHOC = observer((props: TWorkspaceLevel
         memberIds={getWorkspaceMemberIds(workspaceSlug)}
         labelIds={getWorkspaceLabelIds(workspaceSlug)}
         projectIds={joinedProjectIds}
-        saveViewOptions={{
+        saveViewOptions={saveViewOptions}
-          label: props.saveViewOptions?.label,
+        updateViewOptions={updateViewOptions}
-          isDisabled: !canCreateView,
-          onViewSave: (expression) => {
-            setCreateViewPayload({
-              ...getDefaultViewDetailPayload(),
-              ...getViewFilterPayload(expression),
-            });
-            setIsCreateViewModalOpen(true);
-          },
-        }}
-        updateViewOptions={{
-          label: props.updateViewOptions?.label,
-          isDisabled: !canUpdateView,
-          hasAdditionalChanges:
-            !isEqual(initialWorkItemFilters?.displayFilters, viewDetails?.display_filters) ||
-            !isEqual(
-              removeNillKeys(initialWorkItemFilters?.displayProperties),
-              removeNillKeys(viewDetails?.display_properties)
-            ),
-          onViewUpdate: handleViewUpdate,
-        }}
       >
         {children}
       </WorkItemFiltersHOC>

packages/shared-state/src/store/rich-filters/filter.ts

@@ -160,7 +160,7 @@ export class FilterInstance<P extends TFilterProperty, E extends TExternalFilter
       id: observable,
       initialFilterExpression: observable,
       expression: observable,
-      expressionOptions: observable,
+      expressionOptions: observable.struct,
       adapter: observable,
       configManager: observable,
       // computed