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

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>>({});
@@ -136,7 +135,7 @@ function BaseDraggableTabList({
           </MotionWrapper>
           <TabDivider layout />
           <MotionWrapper layout>
-            {showTempTab && tempTab && (
+            {tempTab && (
               <Tab
                 key={tempTab.key}
                 item={tempTab}
@@ -173,12 +172,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 +193,6 @@ export function DraggableTabList({
     <BaseDraggableTabList
       items={parsedItems}
       onAddView={onAddView}
-      showTempTab={showTempTab}
       disabledKeys={disabledKeys}
       {...props}
     >
@@ -215,6 +208,7 @@ const TabDivider = styled(motion.div)`
   width: 1px;
   border-radius: 6px;
   background-color: ${p => p.theme.gray200};
+  margin: 1px ${space(0.5)} 0px ${space(0.5)};
 `;
 
 const TabListOuterWrap = styled('div')<{
@@ -252,14 +246,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}
       />