diff --git a/static/app/components/nav/issueViews/issueViewNavItemContent.tsx b/static/app/components/nav/issueViews/issueViewNavItemContent.tsx
index 466fe5624c7307..91082792decb53 100644
--- a/static/app/components/nav/issueViews/issueViewNavItemContent.tsx
+++ b/static/app/components/nav/issueViews/issueViewNavItemContent.tsx
@@ -4,6 +4,7 @@ import {motion, Reorder, useDragControls} from 'framer-motion';
import type {Location} from 'history';
import isEqual from 'lodash/isEqual';
+import InteractionStateLayer from 'sentry/components/interactionStateLayer';
import {useNavContext} from 'sentry/components/nav/context';
import {GrabHandleIcon} from 'sentry/components/nav/issueViews/grabHandleIcon';
import IssueViewNavEditableTitle from 'sentry/components/nav/issueViews/issueViewNavEditableTitle';
@@ -38,7 +39,7 @@ export interface IssueViewNavItemContentProps {
/**
* Whether an item is being dragged.
*/
- isDragging: boolean;
+ isDragging: string | null;
/**
* Whether the item is the last view in the list.
* This will be removed once view sharing/starring is implemented.
@@ -63,7 +64,7 @@ export interface IssueViewNavItemContentProps {
/**
* A callback function that updates the isDragging state.
*/
- setIsDragging: (isDragging: boolean) => void;
+ setIsDragging: (isDragging: string | null) => void;
/**
* The issue view to display
*/
@@ -137,11 +138,11 @@ export function IssueViewNavItemContent({
dragTransition={{bounceStiffness: 400, bounceDamping: 40}}
value={view}
onDragStart={() => {
- setIsDragging(true);
+ setIsDragging(view.id);
startInteraction();
}}
onDragEnd={() => {
- setIsDragging(false);
+ setIsDragging(null);
onReorderComplete();
endInteraction();
}}
@@ -168,6 +169,7 @@ export function IssueViewNavItemContent({
e.preventDefault();
}}
>
+
@@ -218,7 +220,7 @@ export function IssueViewNavItemContent({
});
}}
setIsEditing={setIsEditing}
- isDragging={isDragging}
+ isDragging={!!isDragging}
/>
{view.unsavedChanges && (
p.theme.surface200};
+ background-color: ${p => p.theme.translucentSurface200};
+ border-radius: ${p => p.theme.borderRadius};
+`;
+
+const StyledInteractionStateLayer = styled(InteractionStateLayer)`
+ height: 120%;
+ border-radius: 4px;
`;
const TrailingItemsWrapper = styled('div')`
@@ -357,14 +365,12 @@ const StyledSecondaryNavItem = styled(SecondaryNav.Item)`
position: relative;
padding-right: ${space(0.5)};
- /* Hide the ellipsis menu if not hovered, or if it's not expanded */
- :not(:hover):not(:has([data-ellipsis-menu-trigger][aria-expanded='true'])) {
- [data-ellipsis-menu-trigger] {
+ /* Hide the ellipsis menu if the item is not hovered */
+ :not(:hover) {
+ [data-ellipsis-menu-trigger]:not([aria-expanded='true']) {
${p => p.theme.visuallyHidden}
}
- }
- :not(:hover) {
[data-drag-icon] {
${p => p.theme.visuallyHidden}
}
@@ -381,8 +387,7 @@ const StyledSecondaryNavItem = styled(SecondaryNav.Item)`
}
/* Hide the query count if the ellipsis menu is expanded */
- &:has([data-ellipsis-menu-trigger][aria-expanded='true'])
- [data-issue-view-query-count] {
+ :has([data-ellipsis-menu-trigger][aria-expanded='true']) [data-issue-view-query-count] {
${p => p.theme.visuallyHidden}
}
`;
@@ -413,13 +418,13 @@ const LeadingItemsWrapper = styled('div')`
display: flex;
align-items: center;
justify-content: center;
+ margin-right: ${space(0.75)};
`;
const GrabHandleWrapper = styled(motion.div)`
display: flex;
align-items: center;
justify-content: center;
- margin-right: ${space(0.75)};
width: 18px;
height: 18px;
cursor: grab;
diff --git a/static/app/components/nav/issueViews/issueViewNavItems.tsx b/static/app/components/nav/issueViews/issueViewNavItems.tsx
index d036f506bcac15..8cdfcaf0a4bd69 100644
--- a/static/app/components/nav/issueViews/issueViewNavItems.tsx
+++ b/static/app/components/nav/issueViews/issueViewNavItems.tsx
@@ -42,7 +42,7 @@ export function IssueViewNavItems({
* source of truth for the view state, rather than a separate state
*/
const [views, setViews] = useState(loadedViews);
- const [isDragging, setIsDragging] = useState(false);
+ const [isDragging, setIsDragging] = useState(null);
const queryClient = useQueryClient();
useEffect(() => {
diff --git a/static/app/components/nav/projectIcon.tsx b/static/app/components/nav/projectIcon.tsx
index d8f91d0ff12bb1..c5e76dc68f7027 100644
--- a/static/app/components/nav/projectIcon.tsx
+++ b/static/app/components/nav/projectIcon.tsx
@@ -2,13 +2,13 @@ import styled from '@emotion/styled';
import PlatformIcon from 'platformicons/build/platformIcon';
import {IconAllProjects} from 'sentry/components/nav/iconAllProjects';
-import {space} from 'sentry/styles/space';
interface ProjectIconProps {
projectPlatforms: string[];
+ className?: string;
}
-function ProjectIcon({projectPlatforms}: ProjectIconProps) {
+function ProjectIcon({projectPlatforms, className}: ProjectIconProps) {
let renderedIcons: React.ReactNode;
switch (projectPlatforms.length) {
@@ -36,7 +36,11 @@ function ProjectIcon({projectPlatforms}: ProjectIconProps) {
);
}
- return {renderedIcons};
+ return (
+
+ {renderedIcons}
+
+ );
}
const IconWrap = styled('div')`
@@ -45,7 +49,6 @@ const IconWrap = styled('div')`
flex-direction: column;
align-items: center;
justify-content: center;
- margin-right: ${space(0.75)};
`;
const IconContainer = styled('div')`
diff --git a/static/app/views/insights/navigation.tsx b/static/app/views/insights/navigation.tsx
index e3a8cadf6f1f9a..611357a7ee17e1 100644
--- a/static/app/views/insights/navigation.tsx
+++ b/static/app/views/insights/navigation.tsx
@@ -1,4 +1,5 @@
import {Fragment} from 'react';
+import styled from '@emotion/styled';
import {NAV_GROUP_LABELS} from 'sentry/components/nav/constants';
import {usePrefersStackedNav} from 'sentry/components/nav/prefersStackedNav';
@@ -6,6 +7,7 @@ import ProjectIcon from 'sentry/components/nav/projectIcon';
import {SecondaryNav} from 'sentry/components/nav/secondary';
import {PrimaryNavGroup} from 'sentry/components/nav/types';
import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
import useOrganization from 'sentry/utils/useOrganization';
import useProjects from 'sentry/utils/useProjects';
import {
@@ -70,7 +72,7 @@ function InsightsSecondaryNav({children}: InsightsNavigationProps) {
key={project.id}
to={`${baseUrl}/projects/${project.slug}/`}
leadingItems={
-
}
@@ -98,3 +100,7 @@ export default function InsightsNavigation({children}: InsightsNavigationProps)
return {children};
}
+
+const StyledProjectIcon = styled(ProjectIcon)`
+ margin-right: ${space(0.75)};
+`;