feat(saved-searches): Improve responsiveness of issue stream with sidebar (#40986)

static/app/views/issueList/actions/index.tsx

@@ -27,6 +27,7 @@ type IssueListActionsProps = {
   displayCount: React.ReactNode;
   displayReprocessingActions: boolean;
   groupIds: string[];
+  isSavedSearchesOpen: boolean;
   onDelete: () => void;
   onSelectStatsPeriod: (period: string) => void;
   onSortChange: (sort: string) => void;
@@ -43,6 +44,7 @@ function IssueListActions({
   allResultsVisible,
   displayReprocessingActions,
   groupIds,
+  isSavedSearchesOpen,
   onActionTaken,
   onDelete,
   onMarkReviewed,
@@ -66,7 +68,11 @@ function IssueListActions({
     setAllInQuerySelected,
   } = useSelectedGroupsState();
 
-  const disableActions = useMedia(`(max-width: ${theme.breakpoints.small})`);
+  const disableActions = useMedia(
+    `(max-width: ${
+      isSavedSearchesOpen ? theme.breakpoints.large : theme.breakpoints.small
+    })`
+  );
 
   const numIssues = selectedIdsSet.size;
 

static/app/views/issueList/filters.tsx

@@ -35,12 +35,12 @@ function IssueListFilters({
 
   return (
     <SearchContainer>
-      <PageFilterBar>
+      <StyledPageFilterBar>
         <ProjectPageFilter />
         <EnvironmentPageFilter />
         <DatePageFilter alignDropdown="left" />
-      </PageFilterBar>
-      <IssueListSearchBar
+      </StyledPageFilterBar>
+      <StyledIssueListSearchBar
         searchSource="main_search"
         organization={organization}
         query={query || ''}
@@ -63,14 +63,26 @@ function IssueListFilters({
 }
 
 const SearchContainer = styled('div')`
-  display: grid;
+  display: flex;
   gap: ${space(2)};
+  flex-wrap: wrap;
   width: 100%;
   margin-bottom: ${space(2)};
-  grid-template-columns: minmax(0, max-content) minmax(20rem, 1fr);
+`;
+
+const StyledPageFilterBar = styled(PageFilterBar)`
+  flex: 1;
+  width: 100%;
+  max-width: 25rem;
+`;
+
+const StyledIssueListSearchBar = styled(IssueListSearchBar)`
+  flex: 1;
+  width: 100%;
+  min-width: 20rem;
 
-  @media (max-width: ${p => p.theme.breakpoints.small}) {
-    grid-template-columns: minmax(0, 1fr);
+  @media (min-width: ${p => p.theme.breakpoints.small}) {
+    min-width: 25rem;
   }
 `;
 

static/app/views/issueList/groupListBody.tsx

@@ -18,6 +18,7 @@ type GroupListBodyProps = {
   error: string | null;
   groupIds: string[];
   groupStatsPeriod: string;
+  isSavedSearchesOpen: boolean;
   loading: boolean;
   memberList: IndexedMembersByProject;
   query: string;
@@ -30,6 +31,7 @@ type GroupListProps = {
   displayReprocessingLayout: boolean;
   groupIds: string[];
   groupStatsPeriod: string;
+  isSavedSearchesOpen: boolean;
   memberList: IndexedMembersByProject;
   query: string;
   sort: string;
@@ -46,6 +48,7 @@ function GroupListBody({
   error,
   refetchGroups,
   selectedProjectIds,
+  isSavedSearchesOpen,
 }: GroupListBodyProps) {
   const api = useApi();
   const organization = useOrganization();
@@ -80,6 +83,7 @@ function GroupListBody({
         displayReprocessingLayout,
         groupStatsPeriod,
         source: 'group-list',
+        isSavedSearchesOpen,
       }}
     />
   );
@@ -92,10 +96,15 @@ function GroupList({
   sort,
   displayReprocessingLayout,
   groupStatsPeriod,
+  isSavedSearchesOpen,
 }: GroupListProps) {
   const topIssue = groupIds[0];
   const showInboxTime = sort === IssueSortOptions.INBOX;
-  const canSelect = !useMedia(`(max-width: ${theme.breakpoints.small})`);
+  const canSelect = !useMedia(
+    `(max-width: ${
+      isSavedSearchesOpen ? theme.breakpoints.large : theme.breakpoints.small
+    })`
+  );
 
   return (
     <PanelBody>
@@ -116,6 +125,7 @@ function GroupList({
             useFilteredStats
             showInboxTime={showInboxTime}
             canSelect={canSelect}
+            narrowGroups={isSavedSearchesOpen}
           />
         );
       })}

static/app/views/issueList/header.tsx

@@ -86,7 +86,9 @@ function IssueListHeader({
     : t('Enable real-time updates');
 
   return (
-    <Layout.Header noActionWrap>
+    <Layout.Header
+      noActionWrap={!organization.features.includes('issue-list-saved-searches-v2')}
+    >
       <Layout.HeaderContent>
         <StyledLayoutTitle>{t('Issues')}</StyledLayoutTitle>
       </Layout.HeaderContent>

static/app/views/issueList/overview.tsx

@@ -1235,6 +1235,7 @@ class IssueListOverview extends Component<Props, State> {
                 displayReprocessingActions={displayReprocessingActions}
                 sort={this.getSort()}
                 onSortChange={this.onSortChange}
+                isSavedSearchesOpen={isSavedSearchesOpen}
               />
               <PanelBody>
                 <ProcessingIssueList
@@ -1257,6 +1258,7 @@ class IssueListOverview extends Component<Props, State> {
                     loading={issuesLoading}
                     error={error}
                     refetchGroups={this.fetchData}
+                    isSavedSearchesOpen={isSavedSearchesOpen}
                   />
                 </VisuallyCompleteWithData>
               </PanelBody>

static/app/views/issueList/savedIssueSearches.tsx

@@ -223,7 +223,7 @@ const SavedIssueSearches = ({
 };
 
 const StyledSidebar = styled('aside')`
-  width: 360px;
+  width: 100%;
   padding: ${space(3)} ${space(2)};
 
   @media (max-width: ${p => p.theme.breakpoints.small}) {
@@ -233,6 +233,7 @@ const StyledSidebar = styled('aside')`
 
   @media (min-width: ${p => p.theme.breakpoints.small}) {
     border-left: 1px solid ${p => p.theme.gray200};
+    max-width: 340px;
   }
 `;