feat(issue-views): Improve drag handle and safari interactions (#87119)

This PR makes a couple of minor improvements to issue views,
specifically related to the newly added grab handle, and safari
improvements:

1. Hover states in Safari are no longer super janky. This was caused by
some CSS selectors not being supported by safari.
2. The drag handle now has an interaction state layer to make it more
clear that it is draggable
3. The background opacity of each issue view has been slightly decreased
so that an item being dragged will slightly show the items beneath it.

Note that there is still an issue where triggering a reorder while
dragging in safari will cause the hover state to be lost. This seems to
be an [intentional decision by
Safari](https://stackoverflow.com/questions/52133842/safari-only-css-hover-event-not-triggered-on-drag),
but I could not figure out a reasonable fix in the timebox I gave
myself.

Author: MichaelSun48

Diff for: 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();
               }}
             >
+              <StyledInteractionStateLayer isPressed={isDragging === view.id} />
               <GrabHandleIcon color="gray300" />
             </GrabHandleWrapper>
             <ProjectIcon projectPlatforms={projectPlatforms} />
@@ -218,7 +220,7 @@ export function IssueViewNavItemContent({
             });
           }}
           setIsEditing={setIsEditing}
-          isDragging={isDragging}
+          isDragging={!!isDragging}
         />
         {view.unsavedChanges && (
           <Tooltip
@@ -344,7 +346,13 @@ const hasUnsavedChanges = (
 // but we need to ensure the item is relatively positioned and has a background color for it to work
 const StyledReorderItem = styled(Reorder.Item)`
   position: relative;
-  background-color: ${p => 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 for: 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<IssueView[]>(loadedViews);
-  const [isDragging, setIsDragging] = useState(false);
+  const [isDragging, setIsDragging] = useState<string | null>(null);
   const queryClient = useQueryClient();
 
   useEffect(() => {

Diff for: 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 <IconWrap data-project-icon>{renderedIcons}</IconWrap>;
+  return (
+    <IconWrap className={className} data-project-icon>
+      {renderedIcons}
+    </IconWrap>
+  );
 }
 
 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 for: static/app/views/insights/navigation.tsx

@@ -1,11 +1,13 @@
 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';
 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={
-                    <ProjectIcon
+                    <StyledProjectIcon
                       projectPlatforms={project.platform ? [project.platform] : []}
                     />
                   }
@@ -98,3 +100,7 @@ export default function InsightsNavigation({children}: InsightsNavigationProps)
 
   return <InsightsSecondaryNav>{children}</InsightsSecondaryNav>;
 }
+
+const StyledProjectIcon = styled(ProjectIcon)`
+  margin-right: ${space(0.75)};
+`;