ref(shared-views): Use queryclient cache instead of state, rewire with 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.

Author: MichaelSun48

static/app/views/issueList/issueViews/createIssueViewFromUrl.tsx

@@ -7,17 +7,10 @@ import {
   decodeList,
   decodeScalar,
 } from 'sentry/utils/queryString';
-import type {GroupSearchView} from 'sentry/views/issueList/types';
+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 {
   return {
     query: typeof query.query === 'string' ? query.query : '',
     querySort:

static/app/views/issueList/issueViews/issueViewsList/issueViewsList.tsx

@@ -20,10 +20,12 @@ import {
   makeFetchGroupSearchViewsKey,
   useFetchGroupSearchViews,
 } from 'sentry/views/issueList/queries/useFetchGroupSearchViews';
+import {makeFetchStarredGroupSearchViewsKey} from 'sentry/views/issueList/queries/useFetchStarredGroupSearchViews';
 import {
   type GroupSearchView,
   GroupSearchViewCreatedBy,
   GroupSearchViewSort,
+  type StarredGroupSearchView,
 } from 'sentry/views/issueList/types';
 
 type IssueViewSectionProps = {
@@ -78,13 +80,33 @@ function IssueViewSection({createdBy, limit, cursorQueryParam}: IssueViewSection
           view.id === variables.id ? {...view, starred: variables.starred} : view
         );
       });
+      if (variables.starred) {
+        setApiQueryData<StarredGroupSearchView[]>(
+          queryClient,
+          makeFetchStarredGroupSearchViewsKey({orgSlug: organization.slug}),
+          data => [...(data ?? []), variables.view]
+        );
+      } else {
+        setApiQueryData<StarredGroupSearchView[]>(
+          queryClient,
+          makeFetchStarredGroupSearchViewsKey({orgSlug: organization.slug}),
+          data => data?.filter(view => view.id !== variables.id)
+        );
+      }
     },
     onError: (_error, variables) => {
       setApiQueryData<GroupSearchView[]>(queryClient, tableQueryKey, data => {
         return data?.map(view =>
           view.id === variables.id ? {...view, starred: !variables.starred} : view
         );
       });
+      if (variables.starred) {
+        setApiQueryData<StarredGroupSearchView[]>(
+          queryClient,
+          makeFetchStarredGroupSearchViewsKey({orgSlug: organization.slug}),
+          data => data?.filter(view => view.id !== variables.id)
+        );
+      }
     },
   });
 

static/app/views/issueList/issueViews/useIssueViewUnsavedChanges.tsx

@@ -24,5 +24,12 @@ export function useIssueViewUnsavedChanges() {
 
   return {
     hasUnsavedChanges,
+    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),
+    },
   };
 }

static/app/views/issueList/mutations/useCreateGroupSearchView.tsx

@@ -7,8 +7,8 @@ import {
 } from 'sentry/utils/queryClient';
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
-import {makeFetchGroupSearchViewsKey} from 'sentry/views/issueList/queries/useFetchGroupSearchViews';
-import type {GroupSearchView} from 'sentry/views/issueList/types';
+import {makeFetchStarredGroupSearchViewsKey} from 'sentry/views/issueList/queries/useFetchStarredGroupSearchViews';
+import type {GroupSearchView, StarredGroupSearchView} from 'sentry/views/issueList/types';
 
 interface CreateGroupSearchViewData
   extends Partial<
@@ -36,9 +36,9 @@ export function useCreateGroupSearchView(
     ...options,
     onSuccess: (data, variables, context) => {
       if (variables.starred) {
-        setApiQueryData<GroupSearchView[]>(
+        setApiQueryData<StarredGroupSearchView[]>(
           queryClient,
-          makeFetchGroupSearchViewsKey({
+          makeFetchStarredGroupSearchViewsKey({
             orgSlug: organization.slug,
           }),
           existingViews => [...(existingViews ?? []), data]

static/app/views/issueList/mutations/useDeleteGroupSearchView.tsx

@@ -0,0 +1,62 @@
+import {addErrorMessage} from 'sentry/actionCreators/indicator';
+import {t} from 'sentry/locale';
+import {
+  setApiQueryData,
+  useMutation,
+  type UseMutationOptions,
+  useQueryClient,
+} from 'sentry/utils/queryClient';
+import type RequestError from 'sentry/utils/requestError/requestError';
+import useApi from 'sentry/utils/useApi';
+import useOrganization from 'sentry/utils/useOrganization';
+import {makeFetchGroupSearchViewKey} from 'sentry/views/issueList/queries/useFetchGroupSearchView';
+import {makeFetchStarredGroupSearchViewsKey} from 'sentry/views/issueList/queries/useFetchStarredGroupSearchViews';
+import type {GroupSearchView, StarredGroupSearchView} from 'sentry/views/issueList/types';
+
+type DeleteGroupSearchViewVariables = {
+  id: string;
+};
+export const useDeleteGroupSearchView = (
+  options: Omit<
+    UseMutationOptions<GroupSearchView, RequestError, DeleteGroupSearchViewVariables>,
+    'mutationFn'
+  > = {}
+) => {
+  const api = useApi({persistInFlight: true});
+  const queryClient = useQueryClient();
+  const organization = useOrganization();
+
+  return useMutation<GroupSearchView, RequestError, DeleteGroupSearchViewVariables>({
+    ...options,
+    mutationFn: ({id}: DeleteGroupSearchViewVariables) =>
+      api.requestPromise(
+        `/organizations/${organization.slug}/group-search-views/${id}/`,
+        {
+          method: 'DELETE',
+        }
+      ),
+    onSuccess: (data, parameters, context) => {
+      // Invalidate the view in cache
+      queryClient.invalidateQueries({
+        queryKey: makeFetchGroupSearchViewKey({
+          orgSlug: organization.slug,
+          id: parameters.id,
+        }),
+      });
+
+      // Update any matching starred views in cache
+      setApiQueryData<StarredGroupSearchView[]>(
+        queryClient,
+        makeFetchStarredGroupSearchViewsKey({orgSlug: organization.slug}),
+        oldGroupSearchViews => {
+          return oldGroupSearchViews?.filter(view => view.id !== parameters.id) ?? [];
+        }
+      );
+      options.onSuccess?.(data, parameters, context);
+    },
+    onError: (error, variables, context) => {
+      addErrorMessage(t('Failed to delete view'));
+      options.onError?.(error, variables, context);
+    },
+  });
+};

static/app/views/issueList/mutations/useUpdateGroupSearchView.tsx

@@ -10,8 +10,8 @@ import type RequestError from 'sentry/utils/requestError/requestError';
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
 import {makeFetchGroupSearchViewKey} from 'sentry/views/issueList/queries/useFetchGroupSearchView';
-import {makeFetchGroupSearchViewsKey} from 'sentry/views/issueList/queries/useFetchGroupSearchViews';
-import type {GroupSearchView} from 'sentry/views/issueList/types';
+import {makeFetchStarredGroupSearchViewsKey} from 'sentry/views/issueList/queries/useFetchStarredGroupSearchViews';
+import type {GroupSearchView, StarredGroupSearchView} from 'sentry/views/issueList/types';
 
 type UpdateGroupSearchViewVariables = Pick<
   GroupSearchView,
@@ -47,9 +47,9 @@ export const useUpdateGroupSearchView = (
       );
 
       // Update any matching starred views in cache
-      setApiQueryData<GroupSearchView[]>(
+      setApiQueryData<StarredGroupSearchView[]>(
         queryClient,
-        makeFetchGroupSearchViewsKey({orgSlug: organization.slug}),
+        makeFetchStarredGroupSearchViewsKey({orgSlug: organization.slug}),
         oldGroupSearchViews => {
           return (
             oldGroupSearchViews?.map(view => {

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

@@ -8,7 +8,7 @@ import {
 import type RequestError from 'sentry/utils/requestError/requestError';
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
-import {makeFetchGroupSearchViewsKey} from 'sentry/views/issueList/queries/useFetchGroupSearchViews';
+import {makeFetchStarredGroupSearchViewsKey} from 'sentry/views/issueList/queries/useFetchStarredGroupSearchViews';
 import type {GroupSearchView} from 'sentry/views/issueList/types';
 
 type UpdateGroupSearchViewStarredVariables = {
@@ -45,7 +45,7 @@ export const useUpdateGroupSearchViewStarred = (
     },
     onSettled: (...args) => {
       queryClient.invalidateQueries({
-        queryKey: makeFetchGroupSearchViewsKey({orgSlug: organization.slug}),
+        queryKey: makeFetchStarredGroupSearchViewsKey({orgSlug: organization.slug}),
       });
       options.onSettled?.(...args);
     },

static/app/views/issueList/mutations/useUpdateGroupSearchViewStarredOrder.tsx

@@ -10,7 +10,8 @@ import {
 import type RequestError from 'sentry/utils/requestError/requestError';
 import useApi from 'sentry/utils/useApi';
 import {makeFetchGroupSearchViewsKey} from 'sentry/views/issueList/queries/useFetchGroupSearchViews';
-import type {GroupSearchView} from 'sentry/views/issueList/types';
+import {makeFetchStarredGroupSearchViewsKey} from 'sentry/views/issueList/queries/useFetchStarredGroupSearchViews';
+import type {GroupSearchView, StarredGroupSearchView} from 'sentry/views/issueList/types';
 
 type UpdateGroupSearchViewStarredOrderVariables = {
   orgSlug: string;
@@ -40,9 +41,9 @@ export const useUpdateGroupSearchViewStarredOrder = () => {
         .map(id => groupSearchViews.find(view => parseInt(view.id, 10) === id))
         .filter(defined);
 
-      setApiQueryData<GroupSearchView[]>(
+      setApiQueryData<StarredGroupSearchView[]>(
         queryClient,
-        makeFetchGroupSearchViewsKey({orgSlug: parameters.orgSlug}),
+        makeFetchStarredGroupSearchViewsKey({orgSlug: parameters.orgSlug}),
         newViewsOrder
       );
     },

static/app/views/issueList/mutations/useUpdateGroupSearchViews.tsx

@@ -8,9 +8,10 @@ import {
 } from 'sentry/utils/queryClient';
 import type RequestError from 'sentry/utils/requestError/requestError';
 import useApi from 'sentry/utils/useApi';
-import {makeFetchGroupSearchViewsKey} from 'sentry/views/issueList/queries/useFetchGroupSearchViews';
+import {makeFetchStarredGroupSearchViewsKey} from 'sentry/views/issueList/queries/useFetchStarredGroupSearchViews';
 import type {
   GroupSearchView,
+  StarredGroupSearchView,
   UpdateGroupSearchViewPayload,
 } from 'sentry/views/issueList/types';
 
@@ -36,9 +37,9 @@ export const useUpdateGroupSearchViews = (
         data: {views: groupSearchViews},
       }),
     onSuccess: (groupSearchViews, parameters, context) => {
-      setApiQueryData<GroupSearchView[]>(
+      setApiQueryData<StarredGroupSearchView[]>(
         queryClient,
-        makeFetchGroupSearchViewsKey({orgSlug: parameters.orgSlug}),
+        makeFetchStarredGroupSearchViewsKey({orgSlug: parameters.orgSlug}),
         groupSearchViews // Update the cache with the new groupSearchViews
       );
       options.onSuccess?.(groupSearchViews, parameters, context);

static/app/views/nav/secondary/sections/issues/issueViews/issueViewAddViewButton.tsx

@@ -6,21 +6,22 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {IconAdd} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import {
   DEFAULT_ENVIRONMENTS,
   DEFAULT_TIME_FILTERS,
 } from 'sentry/views/issueList/issueViews/issueViews';
-import {useUpdateGroupSearchViews} from 'sentry/views/issueList/mutations/useUpdateGroupSearchViews';
+import {useCreateGroupSearchView} from 'sentry/views/issueList/mutations/useCreateGroupSearchView';
 import {useFetchStarredGroupSearchViews} from 'sentry/views/issueList/queries/useFetchStarredGroupSearchViews';
 import {IssueSortOptions} from 'sentry/views/issueList/utils';
 import {useNavContext} from 'sentry/views/nav/context';
 import useDefaultProject from 'sentry/views/nav/secondary/sections/issues/issueViews/useDefaultProject';
 import type {NavLayout} from 'sentry/views/nav/types';
 
-export function IssueViewAddViewButton({baseUrl}: {baseUrl: string}) {
+export function IssueViewAddViewButton() {
   const navigate = useNavigate();
   const organization = useOrganization();
 
@@ -33,35 +34,31 @@ export function IssueViewAddViewButton({baseUrl}: {baseUrl: string}) {
     orgSlug: organization.slug,
   });
 
-  const {mutate: updateViews} = useUpdateGroupSearchViews({
-    onSuccess: data => {
-      if (data?.length) {
-        navigate(
-          normalizeUrl({
-            pathname: `${baseUrl}/views/${data.at(-1)!.id}/`,
-          })
-        );
-        setIsLoading(false);
-      }
+  const {mutate: createIssueView} = useCreateGroupSearchView({
+    onSuccess: (data, variables) => {
+      setIsLoading(false);
+      navigate(
+        normalizeUrl(`/organizations/${organization.slug}/issues/views/${data.id}/`)
+      );
+
+      trackAnalytics('issue_views.created', {
+        organization,
+        starred: variables.starred ?? false,
+      });
     },
   });
 
   const handleOnAddView = () => {
     if (starredGroupSearchViews) {
       setIsLoading(true);
-      updateViews({
-        groupSearchViews: [
-          ...starredGroupSearchViews,
-          {
-            name: 'New View',
-            query: 'is:unresolved',
-            querySort: IssueSortOptions.DATE,
-            projects: defaultProject,
-            environments: DEFAULT_ENVIRONMENTS,
-            timeFilters: DEFAULT_TIME_FILTERS,
-          },
-        ],
-        orgSlug: organization.slug,
+      createIssueView({
+        name: 'New View',
+        query: 'is:unresolved',
+        querySort: IssueSortOptions.DATE,
+        projects: defaultProject,
+        environments: DEFAULT_ENVIRONMENTS,
+        timeFilters: DEFAULT_TIME_FILTERS,
+        starred: true,
       });
     }
   };