ref(shared-views): Don't show ellipsis menu and remove editable view title in nav (with sharing enabled) (#89551)

Author: MichaelSun48

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

@@ -1,4 +1,5 @@
 import {Fragment, useEffect, useState} from 'react';
+import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import {motion, Reorder, useDragControls} from 'framer-motion';
 
@@ -72,15 +73,16 @@ export function IssueViewNavItemContent({
   const organization = useOrganization();
   const location = useLocation();
   const navigate = useNavigate();
+  const {projects} = useProjects();
+
+  const hasIssueViewSharing = organization.features.includes('issue-view-sharing');
 
   const controls = useDragControls();
 
   const baseUrl = `/organizations/${organization.slug}/issues`;
   const [isEditing, setIsEditing] = useState(false);
   const {hasUnsavedChanges, changedParams} = useIssueViewUnsavedChanges();
 
-  const {projects} = useProjects();
-
   useEffect(() => {
     if (isActive) {
       if (Object.keys(location.query).length === 0) {
@@ -159,16 +161,20 @@ export function IssueViewNavItemContent({
         trailingItems={
           <TrailingItemsWrapper
             onClickCapture={e => {
-              e.preventDefault();
+              if (!hasIssueViewSharing) {
+                e.preventDefault();
+              }
             }}
           >
             <IssueViewNavQueryCount view={view} isActive={isActive} />
-            <IssueViewNavEllipsisMenu
-              isLastView={isLastView}
-              setIsEditing={setIsEditing}
-              view={view}
-              sectionRef={sectionRef}
-            />
+            {!hasIssueViewSharing && (
+              <IssueViewNavEllipsisMenu
+                isLastView={isLastView}
+                setIsEditing={setIsEditing}
+                view={view}
+                sectionRef={sectionRef}
+              />
+            )}
           </TrailingItemsWrapper>
         }
         onPointerDown={e => {
@@ -185,14 +191,19 @@ export function IssueViewNavItemContent({
           }
         }}
         analyticsItemName="issues_view_starred"
+        hasIssueViewSharing={hasIssueViewSharing}
       >
-        <IssueViewNavEditableTitle
-          view={view}
-          isEditing={isEditing}
-          setIsEditing={setIsEditing}
-          isDragging={!!isDragging}
-          isActive={isActive}
-        />
+        {hasIssueViewSharing ? (
+          view.label
+        ) : (
+          <IssueViewNavEditableTitle
+            view={view}
+            isEditing={isEditing}
+            setIsEditing={setIsEditing}
+            isDragging={!!isDragging}
+            isActive={isActive}
+          />
+        )}
         {isActive && hasUnsavedChanges && changedParams && (
           <Tooltip
             title={constructUnsavedTooltipTitle(changedParams)}
@@ -261,15 +272,19 @@ const TrailingItemsWrapper = styled('div')`
   margin-right: ${space(0.25)};
 `;
 
-const StyledSecondaryNavItem = styled(SecondaryNav.Item)`
+const StyledSecondaryNavItem = styled(SecondaryNav.Item)<{hasIssueViewSharing: boolean}>`
   position: relative;
   padding-right: ${space(0.5)};
 
   /* Hide the ellipsis menu if the item is not hovered */
   :not(:hover) {
-    [data-ellipsis-menu-trigger]:not([aria-expanded='true']) {
-      ${p => p.theme.visuallyHidden}
-    }
+    ${p =>
+      !p.hasIssueViewSharing &&
+      css`
+        [data-ellipsis-menu-trigger]:not([aria-expanded='true']) {
+          ${p.theme.visuallyHidden}
+        }
+      `}
 
     [data-drag-icon] {
       ${p => p.theme.visuallyHidden}
@@ -278,9 +293,14 @@ const StyledSecondaryNavItem = styled(SecondaryNav.Item)`
 
   /* Hide the query count if the ellipsis menu is not expanded */
   :hover {
-    [data-issue-view-query-count] {
-      ${p => p.theme.visuallyHidden}
-    }
+    ${p =>
+      !p.hasIssueViewSharing &&
+      css`
+        [data-issue-view-query-count] {
+          ${p.theme.visuallyHidden}
+        }
+      `}
+
     [data-project-icon] {
       ${p => p.theme.visuallyHidden}
     }