feat(issue-views): Tab title char limits (dupe)

static/app/views/issueList/customViewsHeader.tsx

@@ -326,6 +326,9 @@ function CustomViewsIssueListHeaderTabsContent({
 
   useEffect(() => {
     if (viewId?.startsWith('_')) {
+      if (draggableTabs.find(tab => tab.id === viewId)?.label.endsWith('(Copy)')) {
+        return;
+      }
       // If the user types in query manually while the new view flow is showing,
       // then replace the add view flow with the issue stream with the query loaded,
       // and persist the query

static/app/views/issueList/groupSearchViewTabs/draggableTabBar.tsx

@@ -388,15 +388,13 @@ export function DraggableTabBar({
           disabled={tab.key === editingTabKey}
         >
           <TabContentWrap>
-            <motion.div layout="position" transition={{duration: 0.25}}>
-              <EditableTabTitle
-                label={tab.label}
-                isEditing={editingTabKey === tab.key}
-                setIsEditing={isEditing => setEditingTabKey(isEditing ? tab.key : null)}
-                onChange={newLabel => handleOnTabRenamed(newLabel.trim(), tab.key)}
-                tabKey={tab.key}
-              />
-            </motion.div>
+            <EditableTabTitle
+              label={tab.label}
+              isEditing={editingTabKey === tab.key}
+              setIsEditing={isEditing => setEditingTabKey(isEditing ? tab.key : null)}
+              onChange={newLabel => handleOnTabRenamed(newLabel.trim(), tab.key)}
+              tabKey={tab.key}
+            />
             {/* If tablistState isn't initialized, we want to load the elipsis menu
                 for the initial tab, that way it won't load in a second later
                 and cause the tabs to shift and animate on load.

static/app/views/issueList/groupSearchViewTabs/editableTabTitle.tsx

@@ -1,9 +1,11 @@
 import {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
+import {motion} from 'framer-motion';
 
 import {GrowingInput} from 'sentry/components/growingInput';
 import {TabsContext} from 'sentry/components/tabs';
+import {Tooltip} from 'sentry/components/tooltip';
 
 interface EditableTabTitleProps {
   isEditing: boolean;
@@ -84,31 +86,47 @@ function EditableTabTitle({
     setInputValue(e.target.value);
   };
 
-  return isSelected ? (
-    <StyledGrowingInput
-      value={inputValue}
-      onChange={handleOnChange}
-      onKeyDown={handleOnKeyDown}
-      onDoubleClick={() => isSelected && setIsEditing(true)}
-      onBlur={handleOnBlur}
-      ref={inputRef}
-      style={memoizedStyles}
-      isEditing={isEditing}
-      onFocus={e => e.target.select()}
-      onPointerDown={e => {
-        e.stopPropagation();
-      }}
-      onMouseDown={e => {
-        e.stopPropagation();
-      }}
-    />
-  ) : (
-    <div style={{height: '20px'}}>{label}</div>
+  return (
+    <Tooltip title={label} showOnlyOnOverflow skipWrapper>
+      <motion.div layout="position" transition={{duration: 0.25}}>
+        {isSelected ? (
+          <StyledGrowingInput
+            value={inputValue}
+            onChange={handleOnChange}
+            onKeyDown={handleOnKeyDown}
+            onDoubleClick={() => isSelected && setIsEditing(true)}
+            onBlur={handleOnBlur}
+            ref={inputRef}
+            style={memoizedStyles}
+            isEditing={isEditing}
+            onFocus={e => e.target.select()}
+            onPointerDown={e => {
+              e.stopPropagation();
+            }}
+            onMouseDown={e => {
+              e.stopPropagation();
+            }}
+            maxLength={128}
+          />
+        ) : (
+          <UnselectedTabTitle>{label}</UnselectedTabTitle>
+        )}
+      </motion.div>
+    </Tooltip>
   );
 }
 
 export default EditableTabTitle;
 
+const UnselectedTabTitle = styled('div')`
+  height: 20px;
+  /* The max width is slightly smaller than the GrowingInput since the text in the growing input is bolded */
+  max-width: 310px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 const StyledGrowingInput = styled(GrowingInput)<{
   isEditing: boolean;
 }>`
@@ -119,8 +137,11 @@ const StyledGrowingInput = styled(GrowingInput)<{
   min-height: 0px;
   height: 20px;
   border-radius: 0px;
+  text-overflow: ellipsis;
   cursor: ${p => (p.isEditing ? 'text' : 'pointer')};
 
+  ${p => !p.isEditing && `max-width: 325px;`}
+
   &,
   &:focus,
   &:active,