@cdc/dashboard 4.26.3 → 4.26.5

package/src/components/DashboardFilters/DashboardFilters.test.tsx

@@ -0,0 +1,267 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import DashboardFilters from './DashboardFilters'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: props => <span data-testid='mock-icon' {...props} />
+}))
+
+const createDataBackedFilter = (displaySubgroupingOnly = false) =>
+  ({
+    key: 'Year and Quarter',
+    type: 'datafilter',
+    filterStyle: 'nested-dropdown',
+    showDropdown: true,
+    values: ['2023', '2024'],
+    columnName: 'year',
+    id: 0,
+    parents: [],
+    order: 'asc',
+    active: '2023',
+    displaySubgroupingOnly,
+    subGrouping: {
+      columnName: 'quarter',
+      active: 'Q2',
+      valuesLookup: {
+        '2023': { values: ['Q1', 'Q2'] },
+        '2024': { values: ['Q3', 'Q4'] }
+      }
+    }
+  } as any)
+
+const createApiBackedFilter = (displaySubgroupingOnly = false) =>
+  ({
+    key: 'API Year and Quarter',
+    type: 'urlfilter',
+    filterStyle: 'nested-dropdown',
+    showDropdown: true,
+    values: [],
+    columnName: 'year',
+    id: 0,
+    parents: [],
+    order: 'asc',
+    active: '2023',
+    displaySubgroupingOnly,
+    apiFilter: {
+      apiEndpoint: '/api/nested-options',
+      valueSelector: 'year',
+      subgroupValueSelector: 'quarter'
+    },
+    subGrouping: {
+      columnName: 'quarter',
+      active: 'Q2',
+      valuesLookup: {}
+    }
+  } as any)
+
+const apiFilterDropdowns = {
+  '/api/nested-options': [
+    {
+      value: '2023',
+      text: '2023',
+      subOptions: [
+        { value: 'Q1', text: 'Q1' },
+        { value: 'Q2', text: 'Q2' }
+      ]
+    },
+    {
+      value: '2024',
+      text: '2024',
+      subOptions: [
+        { value: 'Q3', text: 'Q3' },
+        { value: 'Q4', text: 'Q4' }
+      ]
+    }
+  ]
+}
+
+describe('DashboardFilters nested dropdown display', () => {
+  it.each([
+    ['data-backed', createDataBackedFilter(false), {}, '2023 - Q2'],
+    ['data-backed subgroup only', createDataBackedFilter(true), {}, 'Q2'],
+    ['api-backed', createApiBackedFilter(false), apiFilterDropdowns, '2023 - Q2'],
+    ['api-backed subgroup only', createApiBackedFilter(true), apiFilterDropdowns, 'Q2']
+  ])('shows the expected closed text for %s filters', (_label, filter, dropdowns, expectedValue) => {
+    const { container } = render(
+      <DashboardFilters
+        applyFilters={vi.fn()}
+        apiFilterDropdowns={dropdowns as any}
+        filters={[filter]}
+        handleOnChange={vi.fn()}
+        show={[0]}
+        showSubmit={false}
+      />
+    )
+
+    const input = container.querySelector('.nested-dropdown input')
+    expect(input).toHaveValue(expectedValue)
+  })
+
+  it.each([
+    ['data-backed', createDataBackedFilter(false), {}],
+    ['data-backed subgroup only', createDataBackedFilter(true), {}],
+    ['api-backed', createApiBackedFilter(false), apiFilterDropdowns],
+    ['api-backed subgroup only', createApiBackedFilter(true), apiFilterDropdowns]
+  ])('keeps nested dropdown selection behavior unchanged for %s filters', (_label, filter, dropdowns) => {
+    const handleOnChange = vi.fn()
+    const { container, getByText, queryByText } = render(
+      <DashboardFilters
+        applyFilters={vi.fn()}
+        apiFilterDropdowns={dropdowns as any}
+        filters={[filter]}
+        handleOnChange={handleOnChange}
+        show={[0]}
+        showSubmit={false}
+      />
+    )
+
+    const input = container.querySelector('.nested-dropdown input') as HTMLInputElement
+    fireEvent.focus(input)
+    fireEvent.change(input, { target: { value: 'Q3' } })
+
+    expect(getByText('2024')).toBeInTheDocument()
+    expect(queryByText('2023')).not.toBeInTheDocument()
+
+    fireEvent.click(getByText('Q3'))
+
+    expect(handleOnChange).toHaveBeenCalledWith(0, ['2024', 'Q3'])
+  })
+})
+
+describe('DashboardFilters layout', () => {
+  const createDropdownFilter = () =>
+    ({
+      key: 'State',
+      type: 'datafilter',
+      filterStyle: 'dropdown',
+      showDropdown: true,
+      values: ['Alabama', 'Alaska'],
+      columnName: 'state',
+      id: 0,
+      parents: [],
+      order: 'asc',
+      active: 'Alabama'
+    } as any)
+
+  it('keeps intro text outside the gapped controls form', () => {
+    const { container } = render(
+      <DashboardFilters
+        applyFilters={vi.fn()}
+        apiFilterDropdowns={{}}
+        filterIntro='Choose a <strong>state</strong>.'
+        filters={[createDropdownFilter()]}
+        handleOnChange={vi.fn()}
+        show={[0]}
+        showSubmit={true}
+      />
+    )
+
+    const intro = container.querySelector('.filters-section__intro-text')
+    const form = container.querySelector('.dashboard-filters__form')
+
+    expect(intro).toBeInTheDocument()
+    expect(intro?.querySelector('strong')).toHaveTextContent('state')
+    expect(form).toBeInTheDocument()
+    expect(form).not.toContainElement(intro as Element)
+    expect(form?.querySelector('.dashboard-filters__field')).toBeInTheDocument()
+    expect(form?.querySelector('.dashboard-filters__actions')).toBeInTheDocument()
+    expect(intro?.compareDocumentPosition(form as Element) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+  })
+})
+
+describe('DashboardFilters filter notes', () => {
+  const createDropdownFilter = (note?: string) =>
+    ({
+      key: 'State',
+      type: 'datafilter',
+      filterStyle: 'dropdown',
+      showDropdown: true,
+      values: ['Alabama', 'Alaska'],
+      columnName: 'state',
+      id: 0,
+      parents: [],
+      order: 'asc',
+      active: 'Alabama',
+      note
+    } as any)
+
+  const renderDashboardFilterList = (filters, show = filters.map((_filter, index) => index)) =>
+    render(
+      <DashboardFilters
+        applyFilters={vi.fn()}
+        apiFilterDropdowns={{}}
+        filters={filters}
+        handleOnChange={vi.fn()}
+        show={show}
+        showSubmit={false}
+      />
+    )
+  const renderDashboardFilters = filter => renderDashboardFilterList([filter])
+
+  it('renders parsed HTML notes under the label and before dropdown controls', () => {
+    const { container } = renderDashboardFilters(createDropdownFilter('Choose a <strong>state</strong>.'))
+
+    const label = screen.getByText('State')
+    const note = container.querySelector('.filters-section__note-text')
+    const select = screen.getByLabelText('State')
+
+    expect(note).toBeInTheDocument()
+    expect(note).toHaveTextContent('Choose a state.')
+    expect(note?.querySelector('strong')).toHaveTextContent('state')
+    expect(label.compareDocumentPosition(note as Element) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(note?.compareDocumentPosition(select) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(select).toHaveClass('filters-section__select--fit-content')
+    expect(select).not.toHaveClass('w-100')
+  })
+
+  it('renders notes for tab-simple filters above the tab control', () => {
+    const { container } = renderDashboardFilters({
+      ...createDropdownFilter('Pick <em>status</em>.'),
+      key: 'Status',
+      filterStyle: 'tab-simple',
+      values: ['Current', 'Prior'],
+      active: 'Current'
+    })
+
+    const note = container.querySelector('.filters-section__note-text')
+    const tab = screen.getByRole('button', { name: 'Current' })
+
+    expect(note).toHaveTextContent('Pick status.')
+    expect(note?.querySelector('em')).toHaveTextContent('status')
+    expect(note?.compareDocumentPosition(tab) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+  })
+
+  it('does not render note markup for empty notes', () => {
+    const { container } = renderDashboardFilters(createDropdownFilter('   '))
+    const select = screen.getByLabelText('State')
+
+    expect(container.querySelector('.filters-section__note-text')).not.toBeInTheDocument()
+    expect(select).toHaveClass('w-100')
+    expect(select).not.toHaveClass('filters-section__select--fit-content')
+  })
+
+  it('marks the form as single-filter layout when only one dashboard filter is visible', () => {
+    const hiddenFilter = { ...createDropdownFilter(), key: 'Hidden State', showDropdown: false }
+    const { container } = renderDashboardFilterList([createDropdownFilter('Choose a state.'), hiddenFilter])
+
+    const form = container.querySelector('.dashboard-filters__form')
+
+    expect(form).toHaveClass('filters-section__wrapper--single')
+    expect(form).not.toHaveClass('filters-section__wrapper--multiple')
+  })
+
+  it('marks the form as multiple-filter layout when more than one dashboard filter is visible', () => {
+    const statusFilter = {
+      ...createDropdownFilter('Choose a status.'),
+      key: 'Status',
+      columnName: 'status',
+      active: 'Current'
+    }
+    const { container } = renderDashboardFilterList([createDropdownFilter('Choose a state.'), statusFilter])
+
+    const form = container.querySelector('.dashboard-filters__form')
+
+    expect(form).toHaveClass('filters-section__wrapper--multiple')
+    expect(form).not.toHaveClass('filters-section__wrapper--single')
+  })
+})

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -9,9 +9,14 @@ import NestedDropdown from '@cdc/core/components/NestedDropdown'
 import { getNestedOptions } from '@cdc/core/components/Filters/helpers/getNestedOptions'
 import { MouseEventHandler } from 'react'
 import Loader from '@cdc/core/components/Loader'
+import Button from '@cdc/core/components/elements/Button'
 import _ from 'lodash'
-import { DROPDOWN_STYLES } from '@cdc/core/components/Filters/components/Dropdown'
+import { getDropdownStyles } from '@cdc/core/components/Filters/components/Dropdown'
 import Tabs from '@cdc/core/components/Filters/components/Tabs'
+import FilterNote from '@cdc/core/components/Filters/components/FilterNote'
+import parse from 'html-react-parser'
+import './dashboardfilter.styles.css'
+import { isVisibleDashboardFilter } from '../../helpers/filterVisibility'
 
 type DashboardFilterProps = {
   show: number[]
@@ -19,6 +24,7 @@ type DashboardFilterProps = {
   apiFilterDropdowns: APIFilterDropdowns
   handleOnChange: (index: number, value: string | string[]) => void
   showSubmit: boolean
+  filterIntro?: string
   applyFilters: MouseEventHandler<HTMLButtonElement>
   applyFiltersButtonText?: string
   handleReset?: MouseEventHandler<HTMLButtonElement>
@@ -30,6 +36,7 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
   apiFilterDropdowns,
   handleOnChange,
   showSubmit,
+  filterIntro,
   applyFilters,
   applyFiltersButtonText,
   handleReset
@@ -57,184 +64,198 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
     ])
   }
 
+  const visibleFilterIndexes = show.filter(filterIndex => isVisibleDashboardFilter(sharedFilters[filterIndex]))
+  const formClasses = [
+    'dashboard-filters__form',
+    'filters-section__wrapper',
+    visibleFilterIndexes.length > 1 ? 'filters-section__wrapper--multiple' : 'filters-section__wrapper--single'
+  ]
+
   return (
-    <form className='d-flex flex-wrap'>
-      {show.map(filterIndex => {
-        const filter = sharedFilters[filterIndex]
-        const urlFilterType = filter.type === 'urlfilter'
-        const label = stripDuplicateLabelIncrement(filter.key || '')
-
-        if (
-          !urlFilterType &&
-          !filter.showDropdown &&
-          filter.filterStyle !== FILTER_STYLE.nestedDropdown &&
-          filter.filterStyle !== FILTER_STYLE.tabSimple
-        )
-          return <React.Fragment key={`${filter.key}-filtersection-${filterIndex}-option`} />
-        const values: JSX.Element[] = []
-
-        const _key = filter.apiFilter?.apiEndpoint
-        const loading = apiFilterDropdowns[_key] === null
-
-        const multiValues: { value; label }[] = []
-        const nestedOptions: NestedOptions = getNestedOptions({
-          orderedValues: filter.orderedValues,
-          values: filter.values,
-          subGrouping: filter.subGrouping
-        })
-
-        if (_key && apiFilterDropdowns[_key]) {
-          // URL Filter
-          if (filter.filterStyle !== FILTER_STYLE.nestedDropdown) {
-            apiFilterDropdowns[_key].forEach(({ text, value }, index) => {
-              values.push(
-                <option key={`${value}-option-${index}`} value={value}>
-                  {text}
-                </option>
-              )
-              multiValues.push({ value, label: text })
+    <>
+      {filterIntro && <p className='filters-section__intro-text cove-prose mb-3 w-100'>{parse(filterIntro)}</p>}
+      <form className={formClasses.join(' ')}>
+        {show.map(filterIndex => {
+          const filter = sharedFilters[filterIndex]
+
+          if (!isVisibleDashboardFilter(filter))
+            return <React.Fragment key={`${filter?.key || 'missing'}-filtersection-${filterIndex}-option`} />
+
+          const label = stripDuplicateLabelIncrement(filter.key || '')
+          const values: JSX.Element[] = []
+
+          const _key = filter.apiFilter?.apiEndpoint
+          const loading = apiFilterDropdowns[_key] === null
+
+          const multiValues: { value; label }[] = []
+          const nestedOptions: NestedOptions = getNestedOptions({
+            orderedValues: filter.orderedValues,
+            values: filter.values,
+            subGrouping: filter.subGrouping
+          })
+
+          if (_key && apiFilterDropdowns[_key]) {
+            // URL Filter
+            if (filter.filterStyle !== FILTER_STYLE.nestedDropdown) {
+              apiFilterDropdowns[_key].forEach(({ text, value }, index) => {
+                values.push(
+                  <option key={`${value}-option-${index}`} value={value}>
+                    {text}
+                  </option>
+                )
+                multiValues.push({ value, label: text })
+              })
+            }
+          } else {
+            // Data Filter
+            const orderedFilterValues = filter.orderedValues || filter.values
+            orderedFilterValues?.forEach((filterOption, index) => {
+              const labeledOpt = filter.labels && filter.labels[filterOption]
+              const resetLabelHasMatch = (filterOption || labeledOpt) === filter.resetLabel
+
+              if (!resetLabelHasMatch) {
+                values.push(
+                  <option key={`${filter.key}-option-${index}`} value={filterOption}>
+                    {labeledOpt || filterOption}
+                  </option>
+                )
+              } else {
+                // add label to the front of list if it matches with reset label
+                values.unshift(
+                  <option key={`${filter.key}-option-${index}`} value={filterOption}>
+                    {labeledOpt || filterOption}
+                  </option>
+                )
+              }
+
+              multiValues.push({ value: filterOption, label: labeledOpt || filterOption })
             })
           }
-        } else {
-          // Data Filter
-          const orderedFilterValues = filter.orderedValues || filter.values
-          orderedFilterValues?.forEach((filterOption, index) => {
-            const labeledOpt = filter.labels && filter.labels[filterOption]
-            const resetLabelHasMatch = (filterOption || labeledOpt) === filter.resetLabel
-
-            if (!resetLabelHasMatch) {
-              values.push(
-                <option key={`${filter.key}-option-${index}`} value={filterOption}>
-                  {labeledOpt || filterOption}
-                </option>
-              )
-            } else {
-              // add label to the front of list if it matches with reset label
-              values.unshift(
-                <option key={`${filter.key}-option-${index}`} value={filterOption}>
-                  {labeledOpt || filterOption}
-                </option>
-              )
-            }
 
-            multiValues.push({ value: filterOption, label: labeledOpt || filterOption })
-          })
-        }
-
-        const isDisabled = !values.length
-        // push reset label only if it does not includes in filter values options
-        if (filter.resetLabel && !filter.values.includes(filter.resetLabel) && !_key) {
-          values.unshift(
-            <option key={`${filter.resetLabel}-option`} value={filter.resetLabel}>
-              {filter.resetLabel}
-            </option>
+          const isDisabled = !values.length
+          // push reset label only if it does not includes in filter values options
+          if (filter.resetLabel && !filter.values.includes(filter.resetLabel) && !_key) {
+            values.unshift(
+              <option key={`${filter.resetLabel}-option`} value={filter.resetLabel}>
+                {filter.resetLabel}
+              </option>
+            )
+          }
+
+          const isTabSimple = filter.filterStyle === FILTER_STYLE.tabSimple
+          const dropdownStyles = getDropdownStyles(Boolean(filter.note?.trim()))
+          const formGroupClass = [
+            'dashboard-filters__field',
+            'form-group',
+            loading ? 'loading-filter' : '',
+            isTabSimple ? 'w-100' : ''
+          ]
+            .filter(Boolean)
+            .join(' ')
+          return (
+            <div className={formGroupClass} key={`${filter.key}-filtersection-${filterIndex}`}>
+              {label && (
+                <label className='font-weight-bold mb-2' htmlFor={`filter-${filterIndex}`}>
+                  {label}
+                </label>
+              )}
+              <FilterNote note={filter.note} />
+              {filter.filterStyle === FILTER_STYLE.tabSimple ? (
+                <Tabs
+                  filter={filter}
+                  index={filterIndex}
+                  changeFilterActive={(index, value) => handleOnChange(index, value)}
+                  loading={loading}
+                />
+              ) : filter.filterStyle === FILTER_STYLE.multiSelect ? (
+                <MultiSelect
+                  label={label}
+                  options={multiValues}
+                  fieldName={filterIndex}
+                  updateField={updateField}
+                  selected={filter.active as string[]}
+                  limit={filter.selectLimit || 5}
+                  loading={loading}
+                />
+              ) : filter.filterStyle === FILTER_STYLE.nestedDropdown ? (
+                <NestedDropdown
+                  activeGroup={(filter.queuedActive?.[0] || filter.active) as string}
+                  activeSubGroup={(filter.queuedActive?.[1] || filter.subGrouping?.active) as string}
+                  displaySubgroupingOnly={filter.displaySubgroupingOnly}
+                  filterIndex={filterIndex}
+                  options={_key ? getNestedDropdownOptions(apiFilterDropdowns[_key]) : nestedOptions}
+                  listLabel={label}
+                  handleSelectedItems={value => updateField(null, null, filterIndex, value)}
+                  loading={loading}
+                />
+              ) : filter.filterStyle === FILTER_STYLE.combobox ? (
+                <ComboBox
+                  options={multiValues}
+                  fieldName={filterIndex}
+                  updateField={updateField}
+                  selected={(filter.queuedActive || filter.active) as string}
+                  label={label}
+                  loading={loading}
+                  placeholder={filter.resetLabel || '- Select -'}
+                />
+              ) : (
+                <>
+                  <select
+                    id={`filter-${filterIndex}`}
+                    className={`cove-form-select ${dropdownStyles}`}
+                    data-index='0'
+                    value={loading ? 'Loading...' : filter.queuedActive || filter.active}
+                    onChange={val => {
+                      handleOnChange(filterIndex, val.target.value)
+                    }}
+                    disabled={loading || isDisabled}
+                  >
+                    {loading && <option value='Loading...'>Loading...</option>}
+                    {/* For API filters, show placeholder when no value is selected */}
+                    {_key && nullVal(filter) && (
+                      <option key={`reset-label`} value=''>
+                        {filter.resetLabel || '- Select One -'}
+                      </option>
+                    )}
+                    {/* For non-API filters or when no value is selected, show empty option */}
+                    {!_key && nullVal(filter) && (
+                      <option key={`select`} value=''>
+                        {filter.resetLabel || '- Select -'}
+                      </option>
+                    )}
+                    {values}
+                  </select>
+                  {loading && <Loader spinnerType={'text-secondary'} />}
+                </>
+              )}
+            </div>
           )
-        }
-
-        const isTabSimple = filter.filterStyle === FILTER_STYLE.tabSimple
-        const formGroupClass = `form-group${isTabSimple ? '' : ' me-4'} mb-1${loading ? ' loading-filter' : ''}${
-          isTabSimple ? ' w-100' : ''
-        }`
-        return (
-          <div className={formGroupClass} key={`${filter.key}-filtersection-${filterIndex}`}>
-            {label && (
-              <label className='font-weight-bold mb-2' htmlFor={`filter-${filterIndex}`}>
-                {label}
-              </label>
-            )}
-            {filter.filterStyle === FILTER_STYLE.tabSimple ? (
-              <Tabs
-                filter={filter}
-                index={filterIndex}
-                changeFilterActive={(index, value) => handleOnChange(index, value)}
-                loading={loading}
-              />
-            ) : filter.filterStyle === FILTER_STYLE.multiSelect ? (
-              <MultiSelect
-                label={label}
-                options={multiValues}
-                fieldName={filterIndex}
-                updateField={updateField}
-                selected={filter.active as string[]}
-                limit={filter.selectLimit || 5}
-                loading={loading}
-              />
-            ) : filter.filterStyle === FILTER_STYLE.nestedDropdown ? (
-              <NestedDropdown
-                activeGroup={(filter.queuedActive?.[0] || filter.active) as string}
-                activeSubGroup={(filter.queuedActive?.[1] || filter.subGrouping?.active) as string}
-                filterIndex={filterIndex}
-                options={_key ? getNestedDropdownOptions(apiFilterDropdowns[_key]) : nestedOptions}
-                listLabel={label}
-                handleSelectedItems={value => updateField(null, null, filterIndex, value)}
-                loading={loading}
-              />
-            ) : filter.filterStyle === FILTER_STYLE.combobox ? (
-              <ComboBox
-                options={multiValues}
-                fieldName={filterIndex}
-                updateField={updateField}
-                selected={(filter.queuedActive || filter.active) as string}
-                label={label}
-                loading={loading}
-                placeholder={filter.resetLabel || '- Select -'}
-              />
-            ) : (
-              <>
-                <select
-                  id={`filter-${filterIndex}`}
-                  className={`cove-form-select ${DROPDOWN_STYLES}`}
-                  data-index='0'
-                  value={loading ? 'Loading...' : filter.queuedActive || filter.active}
-                  onChange={val => {
-                    handleOnChange(filterIndex, val.target.value)
-                  }}
-                  disabled={loading || isDisabled}
-                >
-                  {loading && <option value='Loading...'>Loading...</option>}
-                  {/* For API filters, show placeholder when no value is selected */}
-                  {_key && nullVal(filter) && (
-                    <option key={`reset-label`} value=''>
-                      {filter.resetLabel || '- Select One -'}
-                    </option>
-                  )}
-                  {/* For non-API filters or when no value is selected, show empty option */}
-                  {!_key && nullVal(filter) && (
-                    <option key={`select`} value=''>
-                      {filter.resetLabel || '- Select -'}
-                    </option>
-                  )}
-                  {values}
-                </select>
-                {loading && <Loader spinnerType={'text-secondary'} />}
-              </>
+        })}
+        {showSubmit && (
+          <div className='dashboard-filters__actions'>
+            <Button
+              variant='primary'
+              className='mb-1 me-2'
+              onClick={applyFilters}
+              disabled={visibleFilterIndexes.some(filterIndex => {
+                const emptyFilterValues = [undefined, '', '- Select -']
+                return (
+                  emptyFilterValues.includes(sharedFilters[filterIndex]?.queuedActive) &&
+                  emptyFilterValues.includes(sharedFilters[filterIndex]?.active)
+                )
+              })}
+            >
+              {applyFiltersButtonText || 'GO!'}
+            </Button>
+            {handleReset && (
+              <Button variant='link' className='mb-1' onClick={handleReset}>
+                Clear Filters
+              </Button>
             )}
           </div>
-        )
-      })}
-      {showSubmit && (
-        <>
-          <button
-            className='btn btn-primary mb-1 me-2'
-            onClick={applyFilters}
-            disabled={show.some(filterIndex => {
-              const emptyFilterValues = [undefined, '', '- Select -']
-              return (
-                emptyFilterValues.includes(sharedFilters[filterIndex].queuedActive) &&
-                emptyFilterValues.includes(sharedFilters[filterIndex].active)
-              )
-            })}
-          >
-            {applyFiltersButtonText || 'GO!'}
-          </button>
-          {handleReset && (
-            <button className='btn btn-link mb-1' onClick={handleReset}>
-              Clear Filters
-            </button>
-          )}
-        </>
-      )}
-    </form>
+        )}
+      </form>
+    </>
   )
 }