From c58679b6ead43e52dc5a6b43d5a8cf74803a559b Mon Sep 17 00:00:00 2001 From: MichaelSun48 Date: Tue, 18 Mar 2025 15:56:44 -0700 Subject: [PATCH 1/4] Change add view button to just + icon near starred views header' --- .../nav/issueViews/issueViewAddViewButton.tsx | 85 ++++++------------- .../issueViews/issueViewNavItemContent.tsx | 9 +- .../nav/issueViews/issueViewNavItems.tsx | 44 +++++++--- static/app/views/issues/navigation.tsx | 66 +++++++------- 4 files changed, 95 insertions(+), 109 deletions(-) diff --git a/static/app/components/nav/issueViews/issueViewAddViewButton.tsx b/static/app/components/nav/issueViews/issueViewAddViewButton.tsx index 174c895ea72e75..7fff6f4564aef6 100644 --- a/static/app/components/nav/issueViews/issueViewAddViewButton.tsx +++ b/static/app/components/nav/issueViews/issueViewAddViewButton.tsx @@ -1,13 +1,11 @@ -import {Fragment, useState} from 'react'; -import {css} from '@emotion/react'; +import {useState} from 'react'; import styled from '@emotion/styled'; -import {motion} from 'framer-motion'; import {Button} from 'sentry/components/core/button'; import LoadingIndicator from 'sentry/components/loadingIndicator'; import {useNavContext} from 'sentry/components/nav/context'; import useDefaultProject from 'sentry/components/nav/issueViews/useDefaultProject'; -import {NavLayout} from 'sentry/components/nav/types'; +import type {NavLayout} from 'sentry/components/nav/types'; import {IconAdd} from 'sentry/icons'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; @@ -70,64 +68,35 @@ export function IssueViewAddViewButton({baseUrl}: {baseUrl: string}) { }; return ( - - - {isLoading ? ( - + ) : ( - - - {t('Add View')} - - )} - - + + ) + } + /> ); } -const AddViewButton = styled(Button)<{layout: NavLayout}>` - display: flex; - align-items: center; - justify-content: center; - padding: ${space(0.5)}; - - width: 100%; - position: relative; - height: 34px; - color: ${p => p.theme.textColor}; - font-size: ${p => p.theme.fontSizeMedium}; - font-weight: ${p => p.theme.fontWeightNormal}; - line-height: 177.75%; - border-radius: ${p => p.theme.borderRadius}; - - &:hover { - color: inherit; - } - - [data-isl] { - transform: translate(0, 0); - top: 1px; - bottom: 1px; - right: 0; - left: 0; - width: initial; - height: initial; - } - - ${p => - p.layout === NavLayout.MOBILE && - css` - padding: 0 ${space(1.5)} 0 48px; - border-radius: 0; - `} +const StyledLoadingIndicator = styled(LoadingIndicator)` + width: 14px; + height: 14px !important; + margin: 0 !important; `; -const StyledIconAdd = styled(IconAdd)` - margin-right: 4px; +const AddViewButton = styled(Button)<{layout: NavLayout}>` + padding: ${space(0.5)}; + margin-right: -${space(0.5)}; `; diff --git a/static/app/components/nav/issueViews/issueViewNavItemContent.tsx b/static/app/components/nav/issueViews/issueViewNavItemContent.tsx index 2878596565db9c..0cddc4c757ed6c 100644 --- a/static/app/components/nav/issueViews/issueViewNavItemContent.tsx +++ b/static/app/components/nav/issueViews/issueViewNavItemContent.tsx @@ -130,6 +130,8 @@ export function IssueViewNavItemContent({ const {startInteraction, endInteraction, isInteractingRef} = useNavContext(); + const scrollPosition = window.scrollY || document.documentElement.scrollTop; + return ( ` position: relative; - background-color: ${p => p.theme.translucentSurface200}; + background-color: ${p => (p.grabbing ? p.theme.translucentSurface200 : 'transparent')}; border-radius: ${p => p.theme.borderRadius}; `; diff --git a/static/app/components/nav/issueViews/issueViewNavItems.tsx b/static/app/components/nav/issueViews/issueViewNavItems.tsx index 8cdfcaf0a4bd69..2c231ae12c4f2c 100644 --- a/static/app/components/nav/issueViews/issueViewNavItems.tsx +++ b/static/app/components/nav/issueViews/issueViewNavItems.tsx @@ -1,11 +1,14 @@ import {useCallback, useEffect, useMemo, useState} from 'react'; -import {AnimatePresence, Reorder} from 'framer-motion'; +import styled from '@emotion/styled'; +import {Reorder} from 'framer-motion'; import debounce from 'lodash/debounce'; import isEqual from 'lodash/isEqual'; import {IssueViewAddViewButton} from 'sentry/components/nav/issueViews/issueViewAddViewButton'; import {IssueViewNavItemContent} from 'sentry/components/nav/issueViews/issueViewNavItemContent'; +import {SecondaryNav} from 'sentry/components/nav/secondary'; import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse'; +import {t} from 'sentry/locale'; import {trackAnalytics} from 'sentry/utils/analytics'; import {setApiQueryData, useQueryClient} from 'sentry/utils/queryClient'; import normalizeUrl from 'sentry/utils/url/normalizeUrl'; @@ -256,17 +259,25 @@ export function IssueViewNavItems({ ); return ( - setViews(newOrder)} - initial={false} - ref={sectionRef} + + {t('Starred Views')} + + + } > - {views.map(view => ( - + setViews(newOrder)} + initial={false} + ref={sectionRef} + > + {views.map(view => ( - - ))} - - + ))} + + ); } @@ -299,3 +309,9 @@ export const constructViewLink = (baseUrl: string, view: IssueView) => { }, }); }; + +const TitleWrapper = styled('div')` + display: flex; + align-items: center; + justify-content: space-between; +`; diff --git a/static/app/views/issues/navigation.tsx b/static/app/views/issues/navigation.tsx index 516b37347659a2..c61ae91ec128ea 100644 --- a/static/app/views/issues/navigation.tsx +++ b/static/app/views/issues/navigation.tsx @@ -61,41 +61,39 @@ export function IssueNavigation({children}: IssuesWrapperProps) { {groupSearchViews && ( - - { - const tabId = id ?? `default${index.toString()}`; + { + const tabId = id ?? `default${index.toString()}`; - return { - id: tabId, - key: tabId, - label: name, - query: viewQuery, - querySort: viewQuerySort, - environments: viewEnvironments, - projects: isAllProjects ? [-1] : viewProjects, - timeFilters: viewTimeFilters, - isCommitted: true, - }; - } - )} - sectionRef={sectionRef} - baseUrl={baseUrl} - /> - + return { + id: tabId, + key: tabId, + label: name, + query: viewQuery, + querySort: viewQuerySort, + environments: viewEnvironments, + projects: isAllProjects ? [-1] : viewProjects, + timeFilters: viewTimeFilters, + isCommitted: true, + }; + } + )} + sectionRef={sectionRef} + baseUrl={baseUrl} + /> )} Date: Tue, 18 Mar 2025 16:04:35 -0700 Subject: [PATCH 2/4] Remove negative margin --- static/app/components/nav/issueViews/issueViewAddViewButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/components/nav/issueViews/issueViewAddViewButton.tsx b/static/app/components/nav/issueViews/issueViewAddViewButton.tsx index 7fff6f4564aef6..0c5f6e746a5692 100644 --- a/static/app/components/nav/issueViews/issueViewAddViewButton.tsx +++ b/static/app/components/nav/issueViews/issueViewAddViewButton.tsx @@ -98,5 +98,5 @@ const StyledLoadingIndicator = styled(LoadingIndicator)` const AddViewButton = styled(Button)<{layout: NavLayout}>` padding: ${space(0.5)}; - margin-right: -${space(0.5)}; + /* margin-right: -${space(0.5)}; */ `; From 0a2c4c5bcc32a2715c26a0f80ce50872d38ac883 Mon Sep 17 00:00:00 2001 From: Michael Sun <55160142+MichaelSun48@users.noreply.github.com> Date: Wed, 19 Mar 2025 11:38:27 -0700 Subject: [PATCH 3/4] Update static/app/components/nav/issueViews/issueViewAddViewButton.tsx Co-authored-by: Malachi Willey --- static/app/components/nav/issueViews/issueViewAddViewButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/components/nav/issueViews/issueViewAddViewButton.tsx b/static/app/components/nav/issueViews/issueViewAddViewButton.tsx index 0c5f6e746a5692..07da90aecb65a3 100644 --- a/static/app/components/nav/issueViews/issueViewAddViewButton.tsx +++ b/static/app/components/nav/issueViews/issueViewAddViewButton.tsx @@ -75,7 +75,7 @@ export function IssueViewAddViewButton({baseUrl}: {baseUrl: string}) { onClick={handleOnAddView} disabled={isLoading} title={!isLoading && t('Add View')} - aria-label={t('Add View Button')} + aria-label={t('Add View')} tooltipProps={{ delay: 500, }} From b0708de0d39d2176bccc3da23879c63df8f2ba84 Mon Sep 17 00:00:00 2001 From: MichaelSun48 Date: Wed, 19 Mar 2025 11:52:09 -0700 Subject: [PATCH 4/4] Add comment about style hack --- .../app/components/nav/issueViews/issueViewNavItemContent.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/static/app/components/nav/issueViews/issueViewNavItemContent.tsx b/static/app/components/nav/issueViews/issueViewNavItemContent.tsx index 0cddc4c757ed6c..4db5e88b00f99b 100644 --- a/static/app/components/nav/issueViews/issueViewNavItemContent.tsx +++ b/static/app/components/nav/issueViews/issueViewNavItemContent.tsx @@ -150,6 +150,10 @@ export function IssueViewNavItemContent({ }} dragListener={false} dragControls={controls} + // This style is a hack to fix a framer-motion bug that causes views to + // jump from the bottom of the nav bar to their correct positions + // upon scrolling down on the page and triggering a page navigation. + // See: https://github.com/motiondivision/motion/issues/2006 style={{ ...(isDragging || scrollPosition === 0 ? {}