feat(FilesTableSearch): add to searchText to criteria

Author: MellyGray

src/files/domain/models/FileCriteria.ts

@@ -5,7 +5,8 @@ export class FileCriteria {
     public readonly sortBy: FileSortByOption = FileSortByOption.NAME_AZ,
     public readonly filterByType?: FileType,
     public readonly filterByAccess?: FileAccessOption,
-    public readonly filterByTag?: FileTag
+    public readonly filterByTag?: FileTag,
+    public readonly searchText?: string
   ) {}
 
   withSortBy(sortBy: FileSortByOption): FileCriteria {
@@ -27,6 +28,16 @@ export class FileCriteria {
 
     return new FileCriteria(this.sortBy, this.filterByType, this.filterByAccess, newFilterByTag)
   }
+
+  withSearchText(searchText: string | undefined): FileCriteria {
+    return new FileCriteria(
+      this.sortBy,
+      this.filterByType,
+      this.filterByAccess,
+      this.filterByTag,
+      searchText
+    )
+  }
 }
 
 export enum FileSortByOption {

src/sections/dataset/dataset-files/file-criteria-form/FileCriteriaForm.tsx

@@ -24,7 +24,7 @@ export function FileCriteriaForm({
     <Form>
       <Row>
         <Col md={5}>
-          <FileCriteriaSearchText />
+          <FileCriteriaSearchText criteria={criteria} onCriteriaChange={onCriteriaChange} />
         </Col>
       </Row>
       <Row className={styles['criteria-section']}>

src/sections/dataset/dataset-files/file-criteria-form/FileCriteriaSearchText.tsx

@@ -1,16 +1,48 @@
 import { Button, Form } from 'dataverse-design-system'
 import { Search } from 'react-bootstrap-icons'
+import { FileCriteria } from '../../../../files/domain/models/FileCriteria'
+import { ChangeEvent, useState, KeyboardEvent } from 'react'
+
+interface FileCriteriaSearchTextProps {
+  criteria: FileCriteria
+  onCriteriaChange: (criteria: FileCriteria) => void
+}
+export function FileCriteriaSearchText({
+  criteria,
+  onCriteriaChange
+}: FileCriteriaSearchTextProps) {
+  const [searchText, setSearchText] = useState<string>(criteria.searchText ?? '')
+  const handleSearchTextChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const updatedSearchText = event.target.value
+    setSearchText(updatedSearchText)
+  }
+  const handleSubmitSearch = () => {
+    onCriteriaChange(criteria.withSearchText(searchText))
+  }
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      handleSubmitSearch()
+    }
+  }
 
-export function FileCriteriaSearchText() {
   return (
     <Form.Group controlId="search-files">
       <Form.InputGroup>
         <Form.Group.Input
           type="text"
           placeholder="Search this dataset..."
           aria-label="Search this dataset"
+          defaultValue={searchText}
+          onChange={handleSearchTextChange}
+          onKeyDown={handleKeyDown}
+        />
+        <Button
+          variant="secondary"
+          icon={<Search />}
+          aria-label="Submit search"
+          onClick={handleSubmitSearch}
         />
-        <Button variant="secondary" icon={<Search />} aria-label="Submit search" />
       </Form.InputGroup>
     </Form.Group>
   )

tests/component/sections/dataset/dataset-files/DatasetFiles.spec.tsx

@@ -115,6 +115,24 @@ describe('DatasetFiles', () => {
     cy.findByRole('button', { name: 'Filter Type: All' }).should('exist')
   })
 
+  it('calls the useFiles hook with the correct parameters when searchText criteria changes', () => {
+    cy.customMount(
+      <DatasetFiles
+        filesRepository={fileRepository}
+        datasetPersistentId={datasetPersistentId}
+        datasetVersion={datasetVersion}
+      />
+    )
+
+    cy.findByLabelText('Search this dataset').type('test{enter}')
+    cy.wrap(fileRepository.getAllByDatasetPersistentId).should(
+      'be.calledWith',
+      datasetPersistentId,
+      datasetVersion,
+      new FileCriteria().withSearchText('test')
+    )
+  })
+
   it("selects all rows when the 'Select all' button is clicked", () => {
     cy.customMount(
       <DatasetFiles

tests/component/sections/dataset/dataset-files/file-criteria-form/FileCriteriaForm.spec.tsx

@@ -58,7 +58,7 @@ describe('FileCriteriaForm', () => {
     cy.findByRole('button', { name: 'Filter Type: All' }).should('not.exist')
     cy.findByRole('button', { name: 'Access: All' }).should('not.exist')
     cy.findByRole('button', { name: 'Filter Tag: All' }).should('not.exist')
-    cy.findByAltText('Search this dataset').should('not.exist')
+    cy.findByLabelText('Search this dataset').should('not.exist')
   })
 
   it('renders the SortBy input', () => {
@@ -97,7 +97,7 @@ describe('FileCriteriaForm', () => {
       />
     )
 
-    cy.findByAltText('Search this dataset').should('exist')
+    cy.findByLabelText('Search this dataset').should('exist')
   })
 
   it('saves global criteria when the sort by option changes', () => {
@@ -187,4 +187,27 @@ describe('FileCriteriaForm', () => {
     cy.findByRole('button', { name: 'Access: Public' }).should('exist')
     cy.findByRole('button', { name: 'Filter Tag: Data' }).should('exist')
   })
+
+  it('saves global criteria when the search input changes', () => {
+    const criteria = new FileCriteria()
+      .withFilterByTag('document')
+      .withFilterByAccess(FileAccessOption.PUBLIC)
+      .withFilterByType('image')
+      .withSearchText('search')
+
+    cy.customMount(
+      <FileCriteriaForm
+        criteria={criteria}
+        onCriteriaChange={onCriteriaChange}
+        filesCountInfo={filesCountInfo}
+      />
+    )
+
+    cy.findByLabelText('Search this dataset').clear().type('new search')
+
+    cy.findByRole('button', { name: 'Filter Type: Image' }).should('exist')
+    cy.findByRole('button', { name: 'Access: Public' }).should('exist')
+    cy.findByRole('button', { name: 'Filter Tag: Document' }).should('exist')
+    cy.findByLabelText('Search this dataset').should('have.value', 'new search')
+  })
 })

tests/component/sections/dataset/dataset-files/file-criteria-form/FileCriteriaSearchText.spec.tsx

@@ -1,10 +1,39 @@
 import { FileCriteriaSearchText } from '../../../../../../src/sections/dataset/dataset-files/file-criteria-form/FileCriteriaSearchText'
+import { FileCriteria } from '../../../../../../src/files/domain/models/FileCriteria'
+
+const defaultCriteria = new FileCriteria()
 
 describe('FilesSearch', () => {
   it('renders the search input', () => {
-    cy.customMount(<FileCriteriaSearchText />)
+    const onCriteriaChange = cy.stub().as('onCriteriaChange')
+    cy.customMount(
+      <FileCriteriaSearchText criteria={defaultCriteria} onCriteriaChange={onCriteriaChange} />
+    )
 
     cy.findByLabelText('Search this dataset').should('exist')
     cy.findByRole('button', { name: 'Submit search' }).should('exist')
   })
+
+  it('calls onCriteriaChange with the searchText value on enter', () => {
+    const onCriteriaChange = cy.stub().as('onCriteriaChange')
+
+    cy.customMount(
+      <FileCriteriaSearchText criteria={defaultCriteria} onCriteriaChange={onCriteriaChange} />
+    )
+
+    cy.findByLabelText('Search this dataset').type('test{enter}')
+    cy.wrap(onCriteriaChange).should('be.calledWith', defaultCriteria.withSearchText('test'))
+  })
+
+  it('calls onCriteriaChange with the searchText value on submit', () => {
+    const onCriteriaChange = cy.stub().as('onCriteriaChange')
+
+    cy.customMount(
+      <FileCriteriaSearchText criteria={defaultCriteria} onCriteriaChange={onCriteriaChange} />
+    )
+
+    cy.findByLabelText('Search this dataset').type('test')
+    cy.findByRole('button', { name: 'Submit search' }).click()
+    cy.wrap(onCriteriaChange).should('be.calledWith', defaultCriteria.withSearchText('test'))
+  })
 })