Merge pull request #12851 from overleaf/jk-dashboard-filter-visibility

[web] Improve filter visibility on project dashboard

GitOrigin-RevId: de7a9f999d6d0164ab3c18c58e305c7c628f946c

services/web/test/frontend/features/project-list/components/project-list-root.test.tsx

@@ -1037,7 +1037,7 @@ describe('<ProjectListRoot />', function () {
     describe('search', function () {
       it('shows only projects based on the input', async function () {
         const input = screen.getAllByRole('textbox', {
-          name: /search projects/i,
+          name: /search in all projects/i,
         })[0]
         const value = currentList[0].name
 

services/web/test/frontend/features/project-list/components/project-list-title.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react'
+import { Filter } from '../../../../../frontend/js/features/project-list/context/project-list-context'
+import { Tag } from '../../../../../app/src/Features/Tags/types'
+import ProjectListTitle from '../../../../../frontend/js/features/project-list/components/title/project-list-title'
+
+describe('<ProjectListTitle />', function () {
+  type TestCase = {
+    filter: Filter
+    selectedTag: Tag | undefined
+    expectedText: string
+  }
+
+  const testCases: Array<TestCase> = [
+    // Filter, without tag
+    {
+      filter: 'all',
+      selectedTag: undefined,
+      expectedText: 'all projects',
+    },
+    {
+      filter: 'owned',
+      selectedTag: undefined,
+      expectedText: 'your projects',
+    },
+    {
+      filter: 'shared',
+      selectedTag: undefined,
+      expectedText: 'shared with you',
+    },
+    {
+      filter: 'archived',
+      selectedTag: undefined,
+      expectedText: 'archived projects',
+    },
+    {
+      filter: 'trashed',
+      selectedTag: undefined,
+      expectedText: 'trashed projects',
+    },
+    // Tags
+    {
+      filter: 'all',
+      selectedTag: { _id: '', user_id: '', name: 'sometag' },
+      expectedText: 'sometag',
+    },
+    {
+      filter: 'shared',
+      selectedTag: { _id: '', user_id: '', name: 'othertag' },
+      expectedText: 'othertag',
+    },
+  ]
+
+  for (const testCase of testCases) {
+    it(`renders the title text for filter: ${testCase.filter}, tag: ${testCase?.selectedTag?.name}`, function () {
+      render(
+        <ProjectListTitle
+          filter={testCase.filter}
+          selectedTag={testCase.selectedTag}
+        />
+      )
+      screen.getByText(new RegExp(testCase.expectedText, 'i'))
+    })
+  }
+})

services/web/test/frontend/features/project-list/components/project-search.test.tsx

@@ -4,6 +4,8 @@ import { expect } from 'chai'
 import SearchForm from '../../../../../frontend/js/features/project-list/components/search-form'
 import * as eventTracking from '../../../../../frontend/js/infrastructure/event-tracking'
 import fetchMock from 'fetch-mock'
+import { Filter } from '../../../../../frontend/js/features/project-list/context/project-list-context'
+import { Tag } from '../../../../../app/src/Features/Tags/types'
 
 describe('Project list search form', function () {
   let sendMBSpy: sinon.SinonSpy
@@ -19,17 +21,35 @@ describe('Project list search form', function () {
   })
 
   it('renders the search form', function () {
-    render(<SearchForm inputValue="" setInputValue={() => {}} />)
+    const filter: Filter = 'all'
+    const selectedTag = undefined
+    render(
+      <SearchForm
+        inputValue=""
+        setInputValue={() => {}}
+        filter={filter}
+        selectedTag={selectedTag}
+      />
+    )
     screen.getByRole('search')
-    screen.getByRole('textbox', { name: /search projects/i })
+    screen.getByRole('textbox', { name: /search in all projects/i })
   })
 
   it('calls clear text when clear button is clicked', function () {
+    const filter: Filter = 'all'
+    const selectedTag = undefined
     const setInputValueMock = sinon.stub()
-    render(<SearchForm inputValue="abc" setInputValue={setInputValueMock} />)
+    render(
+      <SearchForm
+        inputValue="abc"
+        setInputValue={setInputValueMock}
+        filter={filter}
+        selectedTag={selectedTag}
+      />
+    )
 
     const input = screen.getByRole<HTMLInputElement>('textbox', {
-      name: /search projects/i,
+      name: /search in all projects/i,
     })
 
     expect(input.value).to.equal('abc')
@@ -43,8 +63,20 @@ describe('Project list search form', function () {
   it('changes text', function () {
     const setInputValueMock = sinon.stub()
 
-    render(<SearchForm inputValue="" setInputValue={setInputValueMock} />)
-    const input = screen.getByRole('textbox', { name: /search projects/i })
+    const filter: Filter = 'all'
+    const selectedTag = undefined
+
+    render(
+      <SearchForm
+        inputValue=""
+        setInputValue={setInputValueMock}
+        filter={filter}
+        selectedTag={selectedTag}
+      />
+    )
+    const input = screen.getByRole('textbox', {
+      name: /search in all projects/i,
+    })
     const value = 'abc'
 
     fireEvent.change(input, { target: { value } })
@@ -56,4 +88,67 @@ describe('Project list search form', function () {
     })
     expect(setInputValueMock).to.be.calledWith(value)
   })
+
+  type TestCase = {
+    filter: Filter
+    selectedTag: Tag | undefined
+    expectedText: string
+  }
+
+  const placeholderTestCases: Array<TestCase> = [
+    // Filter, without tag
+    {
+      filter: 'all',
+      selectedTag: undefined,
+      expectedText: 'search in all projects',
+    },
+    {
+      filter: 'owned',
+      selectedTag: undefined,
+      expectedText: 'search in your projects',
+    },
+    {
+      filter: 'shared',
+      selectedTag: undefined,
+      expectedText: 'search in projects shared with you',
+    },
+    {
+      filter: 'archived',
+      selectedTag: undefined,
+      expectedText: 'search in archived projects',
+    },
+    {
+      filter: 'trashed',
+      selectedTag: undefined,
+      expectedText: 'search in trashed projects',
+    },
+    // Tags
+    {
+      filter: 'all',
+      selectedTag: { _id: '', user_id: '', name: 'sometag' },
+      expectedText: 'search sometag',
+    },
+    {
+      filter: 'shared',
+      selectedTag: { _id: '', user_id: '', name: 'othertag' },
+      expectedText: 'search othertag',
+    },
+  ]
+
+  for (const testCase of placeholderTestCases) {
+    it(`renders placeholder text for filter:${testCase.filter}, tag:${testCase?.selectedTag?.name}`, function () {
+      render(
+        <SearchForm
+          inputValue=""
+          setInputValue={() => {}}
+          filter={testCase.filter}
+          selectedTag={testCase.selectedTag}
+        />
+      )
+      screen.getByRole('search')
+      screen.getByRole('textbox', {
+        name: new RegExp(testCase.expectedText, 'i'),
+      })
+    })
+  }
 })