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

Author: MichaelSun48

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

@@ -20,12 +20,10 @@ 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 = {
@@ -80,33 +78,13 @@ 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/leftNavViewsHeader.tsx

@@ -1,31 +1,97 @@
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
+import {Button} from 'sentry/components/core/button';
 import GlobalEventProcessingAlert from 'sentry/components/globalEventProcessingAlert';
 import * as Layout from 'sentry/components/layouts/thirds';
+import {IconStar} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {setApiQueryData, useQueryClient} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 import {useSelectedGroupSearchView} from 'sentry/views/issueList/issueViews/useSelectedGroupSeachView';
+import {useUpdateGroupSearchViewStarred} from 'sentry/views/issueList/mutations/useUpdateGroupSearchViewStarred';
+import {makeFetchGroupSearchViewKey} from 'sentry/views/issueList/queries/useFetchGroupSearchView';
+import type {GroupSearchView} from 'sentry/views/issueList/types';
 import {usePrefersStackedNav} from 'sentry/views/nav/prefersStackedNav';
 
 type LeftNavViewsHeaderProps = {
   selectedProjectIds: number[];
 };
 
 function LeftNavViewsHeader({selectedProjectIds}: LeftNavViewsHeaderProps) {
+  const organization = useOrganization();
   const {projects} = useProjects();
   const prefersStackedNav = usePrefersStackedNav();
+  const queryClient = useQueryClient();
 
   const selectedProjects = projects.filter(({id}) =>
     selectedProjectIds.includes(Number(id))
   );
 
   const {data: groupSearchView} = useSelectedGroupSearchView();
+  const {mutate: mutateViewStarred} = useUpdateGroupSearchViewStarred({
+    onMutate: variables => {
+      setApiQueryData<GroupSearchView>(
+        queryClient,
+        makeFetchGroupSearchViewKey({
+          orgSlug: organization.slug,
+          id: variables.id,
+        }),
+        oldGroupSearchView =>
+          oldGroupSearchView
+            ? {...oldGroupSearchView, starred: variables.starred}
+            : oldGroupSearchView
+      );
+    },
+    onError: (_error, variables) => {
+      setApiQueryData<GroupSearchView>(
+        queryClient,
+        makeFetchGroupSearchViewKey({
+          orgSlug: organization.slug,
+          id: variables.id,
+        }),
+        oldGroupSearchView =>
+          oldGroupSearchView
+            ? {...oldGroupSearchView, starred: !variables.starred}
+            : oldGroupSearchView
+      );
+    },
+  });
 
   return (
     <Layout.Header noActionWrap unified={prefersStackedNav}>
       <Layout.HeaderContent unified={prefersStackedNav}>
-        <Layout.Title>{groupSearchView?.name ?? t('Issues')}</Layout.Title>
+        <StyledLayoutTitle>
+          {groupSearchView ? (
+            <Fragment>
+              {groupSearchView.name}
+              {organization.features.includes('issue-view-sharing') ? (
+                <Button
+                  onClick={() => {
+                    mutateViewStarred({
+                      id: groupSearchView.id,
+                      starred: !groupSearchView?.starred,
+                      view: groupSearchView,
+                    });
+                  }}
+                  aria-label={
+                    groupSearchView?.starred ? t('Unstar view') : t('Star view')
+                  }
+                  icon={
+                    <IconStar
+                      isSolid={groupSearchView?.starred}
+                      color={groupSearchView?.starred ? 'yellow300' : 'subText'}
+                    />
+                  }
+                />
+              ) : null}
+            </Fragment>
+          ) : (
+            t('Issues')
+          )}
+        </StyledLayoutTitle>
       </Layout.HeaderContent>
       <Layout.HeaderActions />
       <StyledGlobalEventProcessingAlert projects={selectedProjects} />
@@ -45,3 +111,8 @@ const StyledGlobalEventProcessingAlert = styled(GlobalEventProcessingAlert)`
     margin-bottom: 0;
   }
 `;
+
+const StyledLayoutTitle = styled(Layout.Title)`
+  display: flex;
+  justify-content: space-between;
+`;

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

@@ -146,10 +146,8 @@ export function IssueViewNavItemContent({
                 e.preventDefault();
               }}
               onClick={e => {
-                if (isDragging) {
-                  e.stopPropagation();
-                  e.preventDefault();
-                }
+                e.stopPropagation();
+                e.preventDefault();
               }}
             >
               <StyledInteractionStateLayer isPressed={isDragging === view.id} />