feat(saved-searches): Add 'show more' button when there are many saved searches (#40990)

static/app/views/issueList/savedIssueSearches.spec.tsx

@@ -50,6 +50,23 @@ describe('SavedIssueSearches', function () {
     expect(container).toSnapshot();
   });
 
+  it('hides saves searches by default past first 5', function () {
+    render(
+      <SavedIssueSearches
+        {...defaultProps}
+        savedSearches={[...new Array(6)].map((_, i) => ({
+          ...orgSearch,
+          name: 'Test Search',
+          id: i,
+        }))}
+      />
+    );
+
+    expect(screen.getAllByText('Test Search')).toHaveLength(5);
+    userEvent.click(screen.getByRole('button', {name: /show all 6 saved searches/i}));
+    expect(screen.getAllByText('Test Search')).toHaveLength(6);
+  });
+
   it('can select a saved search', function () {
     render(<SavedIssueSearches {...defaultProps} />);
 

static/app/views/issueList/savedIssueSearches.tsx

@@ -1,6 +1,7 @@
-import {Fragment} from 'react';
+import {Fragment, useState} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
+import orderBy from 'lodash/orderBy';
 
 import {openModal} from 'sentry/actionCreators/modal';
 import Button from 'sentry/components/button';
@@ -40,6 +41,8 @@ type CreateNewSavedSearchButtonProps = Pick<
   'query' | 'sort' | 'organization'
 >;
 
+const MAX_SHOWN_SEARCHES = 5;
+
 const SavedSearchItem = ({
   organization,
   onSavedSearchDelete,
@@ -149,6 +152,8 @@ const SavedIssueSearches = ({
   query,
   sort,
 }: SavedIssueSearchesProps) => {
+  const [showAll, setShowAll] = useState(false);
+
   if (!isOpen) {
     return null;
   }
@@ -165,11 +170,17 @@ const SavedIssueSearches = ({
     );
   }
 
-  const orgSavedSearches = savedSearches.filter(
-    search => !search.isGlobal && !search.isPinned
+  const orgSavedSearches = orderBy(
+    savedSearches.filter(search => !search.isGlobal && !search.isPinned),
+    'dateCreated',
+    'desc'
   );
   const recommendedSavedSearches = savedSearches.filter(search => search.isGlobal);
 
+  const shownOrgSavedSearches = showAll
+    ? orgSavedSearches
+    : orgSavedSearches.slice(0, MAX_SHOWN_SEARCHES);
+
   return (
     <StyledSidebar>
       {orgSavedSearches.length > 0 && (
@@ -179,7 +190,7 @@ const SavedIssueSearches = ({
             <CreateNewSavedSearchButton {...{organization, query, sort}} />
           </HeadingContainer>
           <SearchesContainer>
-            {orgSavedSearches.map(item => (
+            {shownOrgSavedSearches.map(item => (
               <SavedSearchItem
                 key={item.id}
                 organization={organization}
@@ -189,6 +200,11 @@ const SavedIssueSearches = ({
               />
             ))}
           </SearchesContainer>
+          {orgSavedSearches.length > shownOrgSavedSearches.length && (
+            <ShowAllButton size="zero" borderless onClick={() => setShowAll(true)}>
+              {t('Show all %s saved searches', orgSavedSearches.length.toLocaleString())}
+            </ShowAllButton>
+          )}
         </Fragment>
       )}
       {recommendedSavedSearches.length > 0 && (
@@ -297,4 +313,15 @@ const OverflowMenu = styled(DropdownMenuControl)`
   right: ${space(1)};
 `;
 
+const ShowAllButton = styled(Button)`
+  color: ${p => p.theme.linkColor};
+  font-weight: normal;
+  margin-top: 2px;
+  padding: ${space(1)} ${space(2)};
+
+  &:hover {
+    color: ${p => p.theme.linkHoverColor};
+  }
+`;
+
 export default SavedIssueSearches;