feat(custom-views): Add custom views to issue stream behind feature flag (#75883)

This PR releases the custom views feature into the issue stream under a
feature flag. Flagged users will also see the "Custom Search" button has
been removed from the issue stream in favor of custom views. The bulk of
this new component exists in `<CustomViewsIssueListHeader/>`, whose
parent component is in overview.tsx.

Several changes have also been made to the base draggable tab components
to iron out any compatibility issues that did not appear during sandbox
development.

Things that are still broken that I am actively working on: 
* ~Tab Renaming is both ugly and broken (can't type in spaces)~ (#76247)
* Tab overflow logic does not exist at all 
* QueryCounts do not work for any tabs with queries that do not match
queries of previous default tabs
* Some queries that are functionally the same but off by a space
register as different, thus triggering the "unsaved changes" state.
* Tabs do not animate in when added, nor do they animate out when
deleted
* No loading or failure state for tabs request 
* ~Stories is busted as a result of all of the changes made to base tabs
components~ (deleted stories, this component is not, and was not meant
to be reusable)

Author: MichaelSun48

static/app/components/draggableTabs/draggableTabList.tsx

@@ -30,7 +30,6 @@ function BaseDraggableTabList({
   outerWrapStyles,
   onReorder,
   onAddView,
-  showTempTab = false,
   tabVariant = 'filled',
   ...props
 }: BaseDraggableTabListProps) {
@@ -72,7 +71,7 @@ function BaseDraggableTabList({
   useEffect(() => {
     setTabListState(state);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);
+  }, [state.selectedItem, state.selectedKey, props.children]);
 
   // Detect tabs that overflow from the wrapper and put them in an overflow menu
   const tabItemsRef = useRef<Record<string | number, HTMLLIElement | null>>({});
@@ -119,11 +118,14 @@ function BaseDraggableTabList({
                   variant={tabVariant}
                 />
               </Reorder.Item>
-              {(state.selectedKey === 'temporary-tab' ||
-                (state.selectedKey !== item.key &&
-                  state.collection.getKeyAfter(item.key) !== state.selectedKey)) && (
-                <TabDivider layout />
-              )}
+              <TabDivider
+                layout
+                active={
+                  state.selectedKey === 'temporary-tab' ||
+                  (state.selectedKey !== item.key &&
+                    state.collection.getKeyAfter(item.key) !== state.selectedKey)
+                }
+              />
             </Fragment>
           ))}
         </TabListWrap>
@@ -134,9 +136,9 @@ function BaseDraggableTabList({
               {t('Add View')}
             </AddViewButton>
           </MotionWrapper>
-          <TabDivider layout />
+          <TabDivider layout active />
           <MotionWrapper layout>
-            {showTempTab && tempTab && (
+            {tempTab && (
               <Tab
                 key={tempTab.key}
                 item={tempTab}
@@ -173,12 +175,7 @@ export interface DraggableTabListProps
  * To be used as a direct child of the <Tabs /> component. See example usage
  * in tabs.stories.js
  */
-export function DraggableTabList({
-  items,
-  onAddView,
-  showTempTab,
-  ...props
-}: DraggableTabListProps) {
+export function DraggableTabList({items, onAddView, ...props}: DraggableTabListProps) {
   const collection = useCollection({items, ...props}, collectionFactory);
 
   const parsedItems = useMemo(
@@ -199,7 +196,6 @@ export function DraggableTabList({
     <BaseDraggableTabList
       items={parsedItems}
       onAddView={onAddView}
-      showTempTab={showTempTab}
       disabledKeys={disabledKeys}
       {...props}
     >
@@ -210,11 +206,18 @@ export function DraggableTabList({
 
 DraggableTabList.Item = Item;
 
-const TabDivider = styled(motion.div)`
-  height: 50%;
-  width: 1px;
-  border-radius: 6px;
-  background-color: ${p => p.theme.gray200};
+const TabDivider = styled(motion.div)<{active: boolean}>`
+  ${p =>
+    p.active &&
+    `
+    background-color: ${p.theme.gray200};
+    height: 50%;
+    width: 1px;
+    border-radius: 6px;
+    margin-right: ${space(0.5)};
+  `}
+  margin-top: 1px;
+  margin-left: ${space(0.5)};
 `;
 
 const TabListOuterWrap = styled('div')<{
@@ -252,14 +255,13 @@ const TabListWrap = styled('ul')`
 const AddViewButton = styled(Button)`
   display: flex;
   color: ${p => p.theme.gray300};
-  padding-right: ${space(0.5)};
-  margin: 4px 2px 2px 2px;
   font-weight: normal;
+  padding: ${space(0.5)};
+  transform: translateY(1px);
 `;
 
 const StyledIconAdd = styled(IconAdd)`
   margin-right: 4px;
-  margin-left: 2px;
 `;
 
 const MotionWrapper = styled(motion.div)`

static/app/components/layouts/thirds.tsx

@@ -22,14 +22,17 @@ export const Page = styled('main')<{withPadding?: boolean}>`
  *
  * Use `noActionWrap` to disable wrapping if there are minimal actions.
  */
-export const Header = styled('header')<{noActionWrap?: boolean}>`
+export const Header = styled('header')<{
+  borderStyle?: 'dashed' | 'solid';
+  noActionWrap?: boolean;
+}>`
   display: grid;
   grid-template-columns: ${p =>
     !p.noActionWrap ? 'minmax(0, 1fr)' : 'minmax(0, 1fr) auto'};
 
   padding: ${space(2)} ${space(2)} 0 ${space(2)};
   background-color: transparent;
-  border-bottom: 1px solid ${p => p.theme.border};
+  border-bottom: 1px ${p => p.borderStyle ?? 'solid'} ${p => p.theme.border};
 
   @media (min-width: ${p => p.theme.breakpoints.medium}) {
     padding: ${space(2)} ${space(4)} 0 ${space(4)};

static/app/components/tabs/tab.tsx

@@ -53,7 +53,7 @@ export interface BaseTabProps {
   tabProps: DOMAttributes<FocusableElement>;
   /**
    * This controls the border style of the tab. Only active when
-   * `variant=filled` since other variants do not have a border
+   * `variant='filled'` since other variants do not have a border
    */
   borderStyle?: 'solid' | 'dashed';
   to?: string;

static/app/utils/withSavedSearches.tsx

@@ -24,17 +24,24 @@ function withSavedSearches<P extends InjectedSavedSearchesProps>(
     props: Omit<P, keyof InjectedSavedSearchesProps> & Partial<InjectedSavedSearchesProps>
   ) {
     const organization = useOrganization();
-    const {data: savedSearches, isLoading} = useFetchSavedSearchesForOrg({
-      orgSlug: organization.slug,
-    });
+    const {data: savedSearches, isLoading} = useFetchSavedSearchesForOrg(
+      {
+        orgSlug: organization.slug,
+      },
+      {enabled: !organization.features.includes('issue-stream-custom-views')}
+    );
+
     const params = useParams();
     const selectedSavedSearch = useSelectedSavedSearch();
 
     return (
       <WrappedComponent
         {...(props as P)}
         savedSearches={props.savedSearches ?? savedSearches}
-        savedSearchLoading={props.savedSearchLoading ?? isLoading}
+        savedSearchLoading={
+          !organization.features.includes('issue-stream-custom-views') &&
+          (props.savedSearchLoading ?? isLoading)
+        }
         savedSearch={props.savedSearch ?? selectedSavedSearch}
         selectedSearchId={params.searchId ?? null}
       />