(PC-33481)[PRO] feat: add search filters collapse offers list + memorize search configuration

pro/src/components/OffersTable/OffersTableSearch/OffersTableSearch.module.scss

@@ -0,0 +1,115 @@
+@use "styles/mixins/_rem.scss" as rem;
+@use "styles/mixins/_size.scss" as size;
+@use "styles/mixins/_fonts.scss" as fonts;
+@use "styles/mixins/_a11y.scss" as a11y;
+
+.offers-table-search {
+  margin-bottom: rem.torem(32px);
+
+  &-name-and-toggle-row {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &-name-input, &-toggle-button {
+    margin-bottom: rem.torem(16px);
+  }
+
+  &-toggle-button {
+    @include fonts.body;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: fit-content;
+    width: fit-content;
+    padding: rem.torem(8px) rem.torem(16px);
+
+    &-active {
+      @include fonts.button;
+
+      border-color: var(--color-black);
+
+      &::before {
+        content: "";
+        display: block;
+        width: rem.torem(8px);
+        height: rem.torem(8px);
+        background-color: var(--color-secondary-light);
+        border-radius: 50%;
+        margin-right: rem.torem(8px);
+      }
+    }
+  }
+
+  &-filters {
+    margin-top: rem.torem(16px);
+
+    &-collapsed {
+      display: none;
+    }
+  }
+
+  &-reset {
+    &-wrapper {
+      flex-direction: column;
+      margin-top: rem.torem(32px);
+    }
+
+    &-button {
+      min-height: size.$input-min-height;
+      margin-top: 0;
+      display: block;
+      text-align: left;
+    }
+  }
+
+  &-separator {
+    &-wrapper {
+      align-items: center;
+      display: flex;
+      margin-top: rem.torem(23px);
+    }
+
+    &-element {
+      background-color: var(--color-grey-medium);
+      flex: 1;
+      height: rem.torem(1px);
+    }
+  }
+}
+
+@media (min-width: size.$tablet) {
+  .offers-table-search {
+    &-name-and-toggle-row {
+      flex-direction: row;
+    }
+
+    &-name-input {
+      width: unset;
+      max-width: rem.torem(606px);
+      flex-grow: 1;
+    }
+
+    &-toggle-button {
+      margin-top: rem.torem(26px);
+    }
+  }
+}
+
+@media (min-width: size.$laptop) {
+  .offers-table-search {
+    &-reset {
+      &-wrapper {
+        margin-top: 0;
+        flex-direction: row;
+        align-items: center;
+      }
+    }
+  }
+}
+
+.visually-hidden {
+  @include a11y.visually-hidden;
+}

pro/src/components/OffersTable/OffersTableSearch/OffersTableSearch.spec.tsx

@@ -0,0 +1,114 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+
+import { OffersTableSearch, OffersTableSearchProps } from './OffersTableSearch'
+
+type OffersTableSearchTestProps = Partial<OffersTableSearchProps>
+
+const LABELS = {
+  nameInput: /Nom/,
+  resetButton: /Réinitialiser/,
+  searchButton: /Rechercher/,
+  filterToggleButton: /Filtres/,
+}
+
+const renderOffersTableSearch = (props: OffersTableSearchTestProps = {}) => {
+  return render(
+    <OffersTableSearch
+      filtersVisibility={props.filtersVisibility || false}
+      onFiltersToggle={props.onFiltersToggle || vi.fn()}
+      onSubmit={props.onSubmit || vi.fn()}
+      isDisabled={false}
+      nameInputProps={{
+        label: 'Nom',
+        disabled: false,
+        onChange: vi.fn(),
+        value: '',
+        ...props.nameInputProps,
+      }}
+      resetButtonProps={{
+        onClick: vi.fn(),
+        isDisabled: false,
+        ...props.resetButtonProps,
+      }}
+    >
+      {props.children}
+    </OffersTableSearch>
+  )
+}
+
+describe('OffersTableSearch', () => {
+  it('should display a text input and a search button', async () => {
+    const nameInputLabel = 'Nom de l’offre ou EAN-13'
+    const mockedOnChange = vi.fn()
+    renderOffersTableSearch({
+      nameInputProps: {
+        label: nameInputLabel,
+        disabled: false,
+        onChange: mockedOnChange,
+        value: '',
+      },
+    })
+
+    const nameInput = screen.getByRole('textbox', { name: nameInputLabel })
+    const searchButton = screen.getByRole('button', { name: LABELS.searchButton })
+
+    expect(nameInput).toBeInTheDocument()
+    expect(searchButton).toBeInTheDocument()
+
+    const newText = 'New text'
+    await userEvent.type(nameInput, newText)
+    expect(mockedOnChange).toHaveBeenCalledTimes(newText.length)
+  })
+
+  it('should hide filters passed as children and the reset button by default', () => {
+    const childrenTestId = 'filters'
+    renderOffersTableSearch({
+      filtersVisibility: false,
+      children: <div data-testid={childrenTestId}>Filters</div>,
+    })
+
+    // Filters and reset button are always rendered.
+    const filters = screen.getByTestId(childrenTestId)
+    const resetButton = screen.getByRole('button', { name: LABELS.resetButton })
+    expect(filters).toBeInTheDocument()
+    expect(resetButton).toBeInTheDocument()
+
+    // However, they are hidden by default.
+    // There is a better way to do this, but .isVisible() does not seem to work.
+    const filtersWrapper= screen.getByTestId('offers-filter')
+    expect(filtersWrapper).toBeInTheDocument()
+    expect(filtersWrapper).toHaveClass('offers-table-search-filters-collapsed')
+  })
+
+  it('should make filters passed as children and reset button visible when expected', () => {
+    const childrenTestId = 'filters'
+    renderOffersTableSearch({
+      filtersVisibility: true,
+      children: <div data-testid={childrenTestId}>Filters</div>,
+    })
+
+    // Filters and reset button are always rendered.
+    const filters = screen.getByTestId(childrenTestId)
+    const resetButton = screen.getByRole('button', { name: LABELS.resetButton })
+    expect(filters).toBeInTheDocument()
+    expect(resetButton).toBeInTheDocument()
+
+    // They are visible.
+    // There is a better way to do this, but .isVisible() does not seem to work.
+    const filtersWrapper = screen.getByTestId('offers-filter')
+    expect(filtersWrapper).not.toHaveClass('offers-table-search-filters-collapsed')
+  })
+
+  it('should call onFiltersToggle when clicking the filter toggle button', async () => {
+    const mockedOnFiltersToggle = vi.fn()
+    renderOffersTableSearch({
+      onFiltersToggle: mockedOnFiltersToggle,
+    })
+
+    const filterToggleButton = screen.getByRole('button', { name: LABELS.filterToggleButton })
+    await userEvent.click(filterToggleButton)
+
+    expect(mockedOnFiltersToggle).toHaveBeenCalledTimes(1)
+  })
+})

pro/src/components/OffersTable/OffersTableSearch/OffersTableSearch.tsx

@@ -0,0 +1,110 @@
+import cn from 'classnames'
+import { useState } from 'react'
+
+import { FormLayout } from 'components/FormLayout/FormLayout'
+import fullRefreshIcon from 'icons/full-refresh.svg'
+import strokeDownIcon from 'icons/stroke-down.svg'
+import strokeUpIcon from 'icons/stroke-up.svg'
+import { Button } from 'ui-kit/Button/Button'
+import { ButtonVariant, IconPositionEnum } from 'ui-kit/Button/types'
+import { BaseInput } from 'ui-kit/form/shared/BaseInput/BaseInput'
+import { FieldLayout } from 'ui-kit/form/shared/FieldLayout/FieldLayout'
+
+import styles from './OffersTableSearch.module.scss'
+
+export type OffersTableSearchProps = {
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void
+  filtersVisibility: boolean
+  onFiltersToggle: () => void
+  isDisabled: boolean
+  hasActiveFilters: boolean
+  nameInputProps: {
+    label: JSX.Element | string
+    disabled: boolean
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+    value: string
+  }
+  onResetFilters: () => void
+  children: React.ReactNode
+}
+
+export const OffersTableSearch = ({
+  onSubmit,
+  filtersVisibility,
+  onFiltersToggle,
+  isDisabled,
+  hasActiveFilters,
+  nameInputProps,
+  onResetFilters,
+  children,
+}: OffersTableSearchProps) => {
+  return (
+    <form
+      onSubmit={onSubmit}
+      className={styles['offers-table-search']}
+    >
+      <FormLayout.Row
+        className={styles['offers-table-search-name-and-toggle-row']}
+        inline
+      >
+        <FieldLayout
+          className={styles['offers-table-search-name-input']}
+          label={nameInputProps.label}
+          name="offre"
+          isOptional
+          hideFooter
+        >
+          <BaseInput
+            type="text"
+            disabled={nameInputProps.disabled}
+            name="offre"
+            onChange={nameInputProps.onChange}
+            value={nameInputProps.value}
+          />
+        </FieldLayout>
+        <Button
+          className={cn(styles['offers-table-search-toggle-button'], {
+              [styles['offers-table-search-toggle-button-active']]: hasActiveFilters
+            }
+          )}
+          icon={filtersVisibility ? strokeUpIcon : strokeDownIcon}
+          iconPosition={IconPositionEnum.RIGHT}
+          variant={ButtonVariant.BOX}
+          onClick={onFiltersToggle}
+          aria-controls="offers-filter"
+          aria-expanded="false"
+        >
+          Filtres
+          {hasActiveFilters && <span className={styles['visually-hidden']}>actifs</span>}
+        </Button>
+      </FormLayout.Row>
+      <div
+        id="offers-filter"
+        data-testid="offers-filter"
+        className={cn(styles['offers-table-search-filters'], {
+          [styles['offers-table-search-filters-collapsed']]: !filtersVisibility
+        })}
+      >
+        {children}
+        <div className={styles['offers-table-search-reset-wrapper']}>
+          <Button
+            icon={fullRefreshIcon}
+            disabled={!hasActiveFilters}
+            onClick={onResetFilters}
+            variant={ButtonVariant.TERNARY}
+            className={styles['offers-table-search-reset-button']}
+          >
+            Réinitialiser les filtres
+          </Button>
+        </div>
+      </div>
+      <div className={styles['offers-table-search-separator-wrapper']}>
+        <div className={styles['offers-table-search-separator-element']} />
+        <Button type="submit" disabled={isDisabled}>
+          Rechercher
+        </Button>
+        <div className={styles['offers-table-search-separator-element']} />
+      </div>
+    </form>
+  )
+}

pro/src/pages/CollectiveOffers/CollectiveOffers.tsx

@@ -20,6 +20,7 @@ import { serializeApiCollectiveFilters } from 'commons/core/Offers/utils/seriali
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
 import { useCurrentUser } from 'commons/hooks/useCurrentUser'
 import { selectCurrentOffererId } from 'commons/store/user/selectors'
+import { localStorageAvailable } from 'commons/utils/localStorageAvailable'
 import { formatAndOrderVenues } from 'repository/venuesService'
 import { Spinner } from 'ui-kit/Spinner/Spinner'
 
@@ -82,11 +83,16 @@ export const CollectiveOffers = (): JSX.Element => {
     selectedOffererId: offererId ?? '',
   })
 
+  const isLocalStorageAvailable = localStorageAvailable()
   const apiFilters: CollectiveSearchFiltersParams = {
     ...defaultCollectiveFilters,
     ...urlSearchFilters,
     ...(isRestrictedAsAdmin ? { status: [] } : {}),
     ...{ offererId: offererId?.toString() ?? 'all' },
+    ...(isLocalStorageAvailable ? 
+      JSON.parse(localStorage.getItem('COLLECTIVE_OFFERS_FILTER_CONFIG') ?? '{}') :
+      {}
+    )
   }
   delete apiFilters.page