ref(shared-views): Use queryclient cache instead of state, rewire with new endpoints by MichaelSun48 · Pull Request #89441 · getsentry/sentry

MichaelSun48 · 2025-04-11T22:18:38Z

This PR makes a couple of major refactors to the new Issue Views Navigation component family in preparation for the launch of shared views. The same refactors have not been applied to the legacy issue views component since it will be completely deleted with the release of issue view sharing.

Here's a high level overview of the changes:

QueryClient cache is now the single source of truth for starred views state: Previously, I used a react useState that consumed the views from the QueryClient cache, which was essentially a middleman that provided 0 value.
All entrypoints to PUT /group-search-views/ have been rewired: All issue view mutations in the new nav have been rewired to use the new CRUD endpoints created.
Unsaved Changes no longer persist across navigation: Clicking away from your view with unsaved changes will now discard those changes automatically. This saves us from a lot of state management and complexity.

Unfortunately, these refactors were a bit tricky to implement by themselves without destroying or degrading functionality (this has active users), hence why the size of this PR is quite large. I have tried to comprehensively annotate my changes in the diff, happy to elaborate more on any the changes.

Some bonus style changes:

Each component's mutation logic is significantly more localized. Previously, the root issue views component passed down a single bulk-mutate function to all of its children (because its debounced and updates react state). Now, each component self-contains its own mutation logic, rather than consuming it from its parent. This means significantly less prop drilling, and significantly more balanced components (in terms of LOC/component)

MichaelSun48 · 2025-04-11T22:19:44Z

+import type {IssueViewParams} from 'sentry/views/issueList/issueViews/issueViews';
 import {IssueSortOptions} from 'sentry/views/issueList/utils';

-export function createIssueViewFromUrl({
-  query,
-}: {
-  query: Query;
-}): Pick<
-  GroupSearchView,
-  'query' | 'querySort' | 'projects' | 'environments' | 'timeFilters'
-> {
+export function createIssueViewFromUrl({query}: {query: Query}): IssueViewParams {


Minor refactor:

Pick<GroupSearchView, 'query' | 'querySort' | 'projects' | 'environments' | 'timeFilters'>

Is completely congruent with the existing IssueViewParams type.

MichaelSun48 · 2025-04-11T22:20:19Z

+    changedParams: {
+      query: !isEqual(currentViewData.query, viewFromUrl.query),
+      querySort: !isEqual(currentViewData.querySort, viewFromUrl.querySort),
+      projects: !isEqual(currentViewData.projects, viewFromUrl.projects),
+      environments: !isEqual(currentViewData.environments, viewFromUrl.environments),
+      timeFilters: !isEqual(currentViewData.timeFilters, viewFromUrl.timeFilters),
+    },


This is used here to support the unsavedChangesIndicator tooltip

codecov · 2025-04-11T22:23:13Z

Codecov Report

All modified and coverable lines are covered by tests ✅

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #89441      +/-   ##
==========================================
+ Coverage   86.65%   86.66%   +0.01%     
==========================================
  Files       10159    10159              
  Lines      573773   573629     -144     
  Branches    22555    22529      -26     
==========================================
- Hits       497175   497138      -37     
+ Misses      76164    76057     -107     
  Partials      434      434

MichaelSun48 · 2025-04-11T22:25:59Z

-  onDeleteView: () => void;
-  onDuplicateView: () => void;
-  onUpdateView: (view: IssueView) => void;


The ellipsis menu can now make these event handlers within itself, rather than relying on the root issue views component passing down the debounce update function.

MichaelSun48 · 2025-04-11T22:29:47Z

+  const {mutate: updateIssueView} = useUpdateGroupSearchView({
+    onSuccess: () => {
+      trackAnalytics('issue_views.saved_changes', {
+        leftNav: true,
+        organization: organization.slug,
+      });
+    },
+  });

-    trackAnalytics('issue_views.saved_changes', {
-      leftNav: true,
-      organization: organization.slug,
-    });
-  };
+  const {mutate: deleteIssueView} = useDeleteGroupSearchView({
+    onSuccess: () => {
+      trackAnalytics('issue_views.deleted_view', {
+        leftNav: true,
+        organization: organization.slug,
+      });
+    },
+    onError: () => {
+      addErrorMessage(t('Failed to delete view'));
+    },
+  });

-  const handleDiscardChanges = () => {
-    const updatedView = {
-      ...view,
-      unsavedChanges: undefined,
-    };
-    onUpdateView(updatedView);
-    navigate(constructViewLink(baseUrl, updatedView));
+  const {mutate: createIssueView} = useCreateGroupSearchView({
+    onSuccess: data => {
+      navigate(
+        normalizeUrl(`/organizations/${organization.slug}/issues/views/${data.id}/`)
+      );
+      trackAnalytics('issue_views.duplicated_view', {
+        leftNav: true,
+        organization,
+      });
+    },
+  });


Completely remove the Usage of PUT /group-search-views in favor of new purposeful endpoints:

Duplicate: POST /group-search-views/

Delete: DELETE /group-search-views/:viewId

MichaelSun48 · 2025-04-11T22:30:54Z

  );
 };

-// TODO(msun): Once nuqs supports native array query params, we can use that here and replace this absurd function


This outrageous function has been replace by the useIssueViewUnsavedChanges();, which is a far cleaner way of handling the same behavior.

MichaelSun48 · 2025-04-11T22:35:32Z

-    }
-  }, [loadedViews, views, setViews]);
-
-  const replaceWithPersistentViewIds = useCallback(


Get rid of this absurd logic to hotswap the viewId in the url params to support optimistic rendering.

Now, hitting duplicate will result in a second before the view appears. This is a slightly worse experience, but we are going to remove this as an option entirely pretty soon anyways.

MichaelSun48 · 2025-04-11T22:37:04Z

-            sectionRef={sectionRef}
-            baseUrl={baseUrl}
-          />
+          <IssueViewNavItems sectionRef={sectionRef} baseUrl={baseUrl} />


The IssueViewNavItems component no longer needs to consumes views from the nav — it instead consumes it from the APIQueryClient cache.

MichaelSun48 · 2025-04-11T23:15:27Z

-          onChange={value => {
-            onUpdateView({...view, label: value});
-            trackAnalytics('issue_views.renamed_view', {
-              leftNav: true,
-              organization: organization.slug,
-            });


The IssueViewEditableTitle handles this mutation within itself now

Co-authored-by: Scott Cooper <scttcper@gmail.com>

… delete

malwilley · 2025-04-14T20:21:07Z

          makeFetchStarredGroupSearchViewsKey({orgSlug: organization.slug}),
          data => data?.filter(view => view.id !== variables.id)
        );
-      } else {


@MichaelSun48 actually the invalidation that I thought was happening is actually not working correctly because it is pointing at the old query and not the /starred/ query.

This is the line that needs to be updated:

sentry/static/app/views/issueList/mutations/useUpdateGroupSearchViewStarred.tsx

Line 48 in a43222d

queryKey: makeFetchGroupSearchViewsKey({orgSlug: organization.slug}),

You can see in the vercel deployment that unstarring from the all views page doesn't recover correctly because of this

🤦 my bad! so many caches to deal with 😵‍💫

…h new endpoints (#89441) This PR makes a couple of major refactors to the new Issue Views Navigation component family in preparation for the launch of shared views. The same refactors have **not** been applied to the legacy issue views component since it will be completely deleted with the release of issue view sharing. Here's a high level overview of the changes: * **QueryClient cache is now the single source of truth for starred views state:** Previously, I used a react useState that consumed the views from the QueryClient cache, which was essentially a middleman that provided 0 value. * **All entrypoints to `PUT` `/group-search-views/` have been rewired:** All issue view mutations in the new nav have been rewired to use the new CRUD endpoints created. * **Unsaved Changes no longer persist across navigation:** Clicking away from your view with unsaved changes will now discard those changes automatically. This saves us from a lot of state management and complexity.

github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Apr 11, 2025

MichaelSun48 commented Apr 11, 2025

View reviewed changes

vercel Bot deployed to Preview April 11, 2025 22:23 View deployment

MichaelSun48 commented Apr 11, 2025

View reviewed changes

Refactor to use queryclient cache, rewire with new endpoints

0c45ef6

MichaelSun48 force-pushed the msun/sharedViews/refUseQueryClientCache branch from ff0b4fe to 0c45ef6 Compare April 11, 2025 23:13

MichaelSun48 commented Apr 11, 2025

View reviewed changes

vercel Bot deployed to Preview April 11, 2025 23:17 View deployment

Fix tests, minor style changes

656e58c

MichaelSun48 marked this pull request as ready for review April 11, 2025 23:43

MichaelSun48 requested a review from a team as a code owner April 11, 2025 23:43

vercel Bot deployed to Preview April 11, 2025 23:45 View deployment

I swear theyre fixed this time

33445a2

vercel Bot deployed to Preview April 12, 2025 05:08 View deployment

Fix editable title tests

c1e1e36

vercel Bot deployed to Preview April 12, 2025 05:19 View deployment

MichaelSun48 added 2 commits April 14, 2025 10:10

Fix which cache is updated

b131c3f

Remove unneccssary nullish check

8b7daf1

vercel Bot deployed to Preview April 14, 2025 17:19 View deployment

scttcper reviewed Apr 14, 2025

View reviewed changes

Comment thread static/app/views/issueList/mutations/useDeleteGroupSearchView.tsx Outdated

MichaelSun48 requested a review from malwilley April 14, 2025 18:31

persist in flight deletion request

0f9b532

Co-authored-by: Scott Cooper <scttcper@gmail.com>

vercel Bot deployed to Preview April 14, 2025 18:37 View deployment

malwilley reviewed Apr 14, 2025

View reviewed changes

Comment thread static/app/views/issueList/issueViews/issueViewsList/issueViewsList.tsx Outdated

Comment thread static/app/views/issueList/mutations/useDeleteGroupSearchView.tsx Outdated

Comment thread static/app/views/nav/secondary/sections/issues/issueViews/useStarredIssueViews.tsx Outdated

Use useApiQuery, remove onError cache adjustment, invalidate query on…

a4876b3

… delete

MichaelSun48 requested a review from malwilley April 14, 2025 20:06

vercel Bot deployed to Preview April 14, 2025 20:11 View deployment

malwilley reviewed Apr 14, 2025

View reviewed changes

malwilley approved these changes Apr 14, 2025

View reviewed changes

MichaelSun48 added 2 commits April 14, 2025 13:34

Use correct query key in mutate starred

b556f1c

Remove unnecessary query in editable title

c036f61

vercel Bot deployed to Preview April 14, 2025 20:43 View deployment

This was referenced Apr 15, 2025

ref(shared-views): Don't show ellipsis menu and remove editable view title in nav (with sharing enabled) #89551

Merged

feat(shared-views): Add star toggle to view header. #89500

Merged

feat(shared-views): Make issue view header editable #89394

Merged

Fix duplicating and deleting

dbe4c13

vercel Bot deployed to Preview April 15, 2025 16:59 View deployment

malwilley merged commit 0cf29e0 into master Apr 15, 2025

malwilley deleted the msun/sharedViews/refUseQueryClientCache branch April 15, 2025 17:19

github-actions Bot locked and limited conversation to collaborators May 1, 2025

Uh oh!

Conversation

MichaelSun48 commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MichaelSun48 Apr 11, 2025

Choose a reason for hiding this comment

Uh oh!

MichaelSun48 Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov Bot commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

MichaelSun48 Apr 11, 2025

Choose a reason for hiding this comment

Uh oh!

MichaelSun48 Apr 11, 2025

Choose a reason for hiding this comment

Uh oh!

MichaelSun48 Apr 11, 2025

Choose a reason for hiding this comment

Uh oh!

MichaelSun48 Apr 11, 2025

Choose a reason for hiding this comment

Uh oh!

MichaelSun48 Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MichaelSun48 Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

malwilley Apr 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MichaelSun48 Apr 14, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MichaelSun48 commented Apr 11, 2025 •

edited

Loading

MichaelSun48 Apr 11, 2025 •

edited

Loading

codecov Bot commented Apr 11, 2025 •

edited

Loading

MichaelSun48 Apr 11, 2025 •

edited

Loading

MichaelSun48 Apr 11, 2025 •

edited

Loading

malwilley Apr 14, 2025 •

edited

Loading