@cdc/dashboard 4.25.10 → 4.26.1

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import MultiSelect from '@cdc/core/components/MultiSelect'
+import ComboBox from '@cdc/core/components/ComboBox'
 import { SharedFilter } from '../../types/SharedFilter'
 import { APIFilterDropdowns, DropdownOptions } from './DashboardFiltersWrapper'
 import { FILTER_STYLE } from '../../types/FilterStyles'
 import { NestedOptions, ValueTextPair } from '@cdc/core/components/NestedDropdown/nestedDropdownHelpers'
 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 _ from 'lodash'
@@ -18,6 +20,7 @@ type DashboardFilterProps = {
   showSubmit: boolean
   applyFilters: MouseEventHandler<HTMLButtonElement>
   applyFiltersButtonText?: string
+  handleReset?: MouseEventHandler<HTMLButtonElement>
 }
 
 const DashboardFilters: React.FC<DashboardFilterProps> = ({
@@ -27,7 +30,8 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
   handleOnChange,
   showSubmit,
   applyFilters,
-  applyFiltersButtonText
+  applyFiltersButtonText,
+  handleReset
 }) => {
   const nullVal = (filter: SharedFilter) => {
     const val = filter.queuedActive || filter.active
@@ -54,14 +58,12 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
 
   return (
     <form className='d-flex flex-wrap'>
-      {sharedFilters.map((filter, filterIndex) => {
+      {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) ||
-          (show && !show.includes(filterIndex))
-        )
+        if (!urlFilterType && !filter.showDropdown && filter.filterStyle !== FILTER_STYLE.nestedDropdown)
           return <React.Fragment key={`${filter.key}-filtersection-${filterIndex}-option`} />
         const values: JSX.Element[] = []
 
@@ -69,12 +71,11 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
         const loading = apiFilterDropdowns[_key] === null
 
         const multiValues: { value; label }[] = []
-        const nestedOptions: NestedOptions = Object.entries(filter?.subGrouping?.valuesLookup || {}).map(
-          ([key, data]) => [
-            [key, key], // Main option: [value, text]
-            Array.isArray(data?.values) ? data.values.map(value => [value, value]) : [] // Ensure `values` is an array
-          ]
-        )
+        const nestedOptions: NestedOptions = getNestedOptions({
+          orderedValues: filter.orderedValues,
+          values: filter.values,
+          subGrouping: filter.subGrouping
+        })
 
         if (_key && apiFilterDropdowns[_key]) {
           // URL Filter
@@ -115,8 +116,8 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
         }
 
         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)) {
+        // 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}
@@ -145,15 +146,23 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
             ) : filter.filterStyle === FILTER_STYLE.nestedDropdown ? (
               <NestedDropdown
                 activeGroup={(filter.queuedActive?.[0] || filter.active) as string}
-                activeSubGroup={
-                  _key ? filter.queuedActive?.[1] || filter.subGrouping?.active : filter.subGrouping?.active
-                }
+                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
@@ -167,7 +176,14 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
                   disabled={loading || isDisabled}
                 >
                   {loading && <option value='Loading...'>Loading...</option>}
-                  {nullVal(filter) && (
+                  {/* 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>
@@ -181,19 +197,26 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
         )
       })}
       {showSubmit && (
-        <button
-          className='btn btn-primary mb-1'
-          onClick={applyFilters}
-          disabled={show.some(filterIndex => {
-            const emptyFilterValues = [undefined, '', '- Select -']
-            return (
-              emptyFilterValues.includes(sharedFilters[filterIndex].queuedActive) &&
-              emptyFilterValues.includes(sharedFilters[filterIndex].active)
-            )
-          })}
-        >
-          {applyFiltersButtonText || 'GO!'}
-        </button>
+        <>
+          <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>
   )

package/src/components/DashboardFilters/DashboardFiltersEditor/DashboardFiltersEditor.tsx

@@ -21,6 +21,7 @@ import { addValuesToDashboardFilters } from '../../../helpers/addValuesToDashboa
 import { FILTER_STYLE } from '../../../types/FilterStyles'
 import { handleSorting } from '@cdc/core/components/Filters'
 import { removeDashboardFilter } from '../../../helpers/removeDashboardFilter'
+import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd'
 
 type DashboardFitlersEditorProps = {
   vizConfig: DashboardFilters
@@ -43,9 +44,10 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
     return config.dashboard.sharedFilters
       ?.map<[number, string]>(({ key }, i) => [i, key])
       .filter(([filterIndex]) => !sharedFilterIndexes.includes(filterIndex)) // filter out already added filters
-      .map(([filterIndex, filterName]) => (
-        <option key={filterIndex} value={filterIndex}>{`${filterIndex} - ${filterName}`}</option>
-      ))
+      .map(([filterIndex, filterName]) => ({
+        value: String(filterIndex),
+        label: `${filterIndex} - ${filterName}`
+      }))
   }, [config.visualizations, vizConfig.uid])
 
   const openControls = useState({})
@@ -70,6 +72,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
     newSharedFilters[index][prop] = value
     if (prop === 'columnName') {
       if (newSharedFilters[index].subGrouping) delete newSharedFilters[index].subGrouping
+      newSharedFilters[index].defaultValue = ''
       // changing a data column and want to load the data into the preview options
       const sharedFiltersWithValues = addValuesToDashboardFilters(newSharedFilters, data)
       dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFiltersWithValues })
@@ -121,6 +124,29 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
     dispatch({ type: 'SET_CONFIG', payload: { dashboard, visualizations: newVisualizations } })
   }
 
+  const handleFilterReorder = (result: DropResult) => {
+    const { source, destination } = result
+    if (!destination || source.index === destination.index) return
+
+    const newIndexes = [...vizConfig.sharedFilterIndexes]
+    const [movedIndex] = newIndexes.splice(source.index, 1)
+    newIndexes.splice(destination.index, 0, movedIndex)
+
+    updateConfig({
+      ...vizConfig,
+      sharedFilterIndexes: newIndexes
+    })
+  }
+
+  const getItemStyle = (isDragging, draggableStyle) => ({
+    ...draggableStyle,
+    ...(isDragging && sortableItemStyles)
+  })
+
+  const sortableItemStyles = {
+    background: 'rgba(0, 0, 0, 0.1)'
+  }
+
   const addNewFilter = () => {
     const _sharedFilters = _.cloneDeep(sharedFilters) || []
     const columnName = 'New Dashboard Filter ' + (_sharedFilters.length + 1)
@@ -189,6 +215,27 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               }
             />
           )}
+          {vizConfig.filterBehavior === 'Apply Button' && (
+            <CheckBox
+              label='Show Clear Filters Button'
+              value={vizConfig.showClearButton ?? true}
+              updateField={(_section, _subsection, _key, value) => {
+                updateConfig({ ...vizConfig, showClearButton: value })
+              }}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      When enabled, displays a "Clear Filters" button that allows users to reset all filter selections.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          )}
         </AccordionItemPanel>
       </AccordionItem>
 
@@ -197,44 +244,70 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
           <AccordionItemButton>Filters</AccordionItemButton>
         </AccordionItemHeading>
         <AccordionItemPanel>
-          {vizConfig.sharedFilterIndexes.map(index => {
-            const filter = sharedFilters[index]
-            return (
-              <FieldSetWrapper
-                key={filter.key + index}
-                fieldName={filter.key}
-                fieldKey={index}
-                fieldType='Dashboard Filter'
-                controls={openControls}
-                deleteField={() => {
-                  overlay?.actions.openOverlay(
-                    <DeleteFilterModal
-                      removeFilterCompletely={removeFilter}
-                      removeFilterFromViz={index => {
-                        updateConfig({
-                          ...vizConfig,
-                          sharedFilterIndexes: vizConfig.sharedFilterIndexes.filter(i => i !== index)
-                        })
-                      }}
-                      filterIndex={index}
-                    />
-                  )
-                }}
-              >
-                <FilterEditor
-                  filter={filter}
-                  filterIndex={index}
-                  updateFilterProp={(name, value) => {
-                    updateFilterProp(name, index, value)
-                  }}
-                  toggleNestedQueryParameters={checked => {
-                    toggleNestedQueryParameters(index, checked)
-                  }}
-                  config={config}
-                />
-              </FieldSetWrapper>
-            )
-          })}
+          <DragDropContext onDragEnd={handleFilterReorder}>
+            <Droppable droppableId='dashboard_filters_list'>
+              {provided => (
+                <ul {...provided.droppableProps} ref={provided.innerRef} className='draggable-field-list'>
+                  {vizConfig.sharedFilterIndexes.map((index, filterIndex) => {
+                    const filter = sharedFilters[index]
+                    return (
+                      <Draggable
+                        key={filter.key + index}
+                        draggableId={`filter-${filter.key}-${index}`}
+                        index={filterIndex}
+                      >
+                        {(provided, snapshot) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
+                            className={snapshot.isDragging ? 'currently-dragging' : ''}
+                          >
+                            <FieldSetWrapper
+                              key={filter.key + index}
+                              fieldName={filter.key}
+                              fieldKey={index}
+                              fieldType='Dashboard Filter'
+                              controls={openControls}
+                              draggable={true}
+                              deleteField={() => {
+                                overlay?.actions.openOverlay(
+                                  <DeleteFilterModal
+                                    removeFilterCompletely={removeFilter}
+                                    removeFilterFromViz={index => {
+                                      updateConfig({
+                                        ...vizConfig,
+                                        sharedFilterIndexes: vizConfig.sharedFilterIndexes.filter(i => i !== index)
+                                      })
+                                    }}
+                                    filterIndex={index}
+                                  />
+                                )
+                              }}
+                            >
+                              <FilterEditor
+                                filter={filter}
+                                filterIndex={index}
+                                updateFilterProp={(name, value) => {
+                                  updateFilterProp(name, index, value)
+                                }}
+                                toggleNestedQueryParameters={checked => {
+                                  toggleNestedQueryParameters(index, checked)
+                                }}
+                                config={config}
+                              />
+                            </FieldSetWrapper>
+                          </div>
+                        )}
+                      </Draggable>
+                    )
+                  })}
+                  {provided.placeholder}
+                </ul>
+              )}
+            </Droppable>
+          </DragDropContext>
           <button onClick={addNewFilter} className='btn btn-primary full-width'>
             Add Filter
           </button>
@@ -254,8 +327,10 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
                   </Tooltip.Content>
                 </Tooltip>
               </span>
-              <select
+              <Select
+                label=''
                 value={''}
+                options={[{ value: '', label: 'Select' }, ...(existingOptions || [])]}
                 onChange={e => {
                   updateConfig({
                     ...vizConfig,
@@ -263,14 +338,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
                   })
                   setCanAddExisting(false)
                 }}
-              >
-                {[
-                  <option key='select' value=''>
-                    Select
-                  </option>,
-                  ...existingOptions
-                ]}
-              </select>
+              />
             </label>
           ) : (
             <button onClick={() => setCanAddExisting(true)} className='btn btn-primary full-width mt-2'>

package/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx

@@ -43,7 +43,11 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
   const filterStyles = Object.values(FILTER_STYLE)
 
   const parentFilters: string[] = (config.dashboard.sharedFilters || [])
-    .filter(({ key, type }) => key !== filter.key && type !== 'datafilter')
+    .filter(({ key }) => key !== filter.key)
+    .map(({ key }) => key)
+
+  const dataFilterParents: string[] = (config.dashboard.sharedFilters || [])
+    .filter(({ key }) => key !== filter.key)
     .map(({ key }) => key)
 
   const vizRowColumnLocator = getVizRowColumnLocator(config.rows)
@@ -184,33 +188,25 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
   return (
     <>
       {dataFiltersLoading && <Loading />}
-      <label>
-        <span className='edit-label column-heading'>Filter Type: </span>
-        <select
-          defaultValue={filter.type || ''}
-          onChange={e => selectFilterType(e.target.value)}
-          disabled={!!filter.type}
-        >
-          <option value=''>- Select Option -</option>
-          <option value='urlfilter'>URL</option>
-          <option value='datafilter'>Data</option>
-        </select>
-      </label>
+      <Select
+        label='Filter Type'
+        value={filter.type || ''}
+        options={[
+          { value: '', label: '- Select Option -' },
+          { value: 'urlfilter', label: 'URL' },
+          { value: 'datafilter', label: 'Data' }
+        ]}
+        onChange={e => selectFilterType(e.target.value)}
+        disabled={!!filter.type}
+      />
       {filter.type !== undefined && (
         <>
-          <label>
-            <span className='edit-label column-heading'>Filter Style: </span>
-            <select
-              value={filter.filterStyle || FILTER_STYLE.dropdown}
-              onChange={e => updateFilterProp('filterStyle', e.target.value)}
-            >
-              {filterStyles.map(dataKey => (
-                <option value={dataKey} key={`filter-style-select-item-${dataKey}`}>
-                  {dataKey}
-                </option>
-              ))}
-            </select>
-          </label>
+          <Select
+            label='Filter Style'
+            value={filter.filterStyle || FILTER_STYLE.dropdown}
+            options={filterStyles}
+            onChange={e => updateFilterProp('filterStyle', e.target.value)}
+          />
           {filter.filterStyle === FILTER_STYLE.dropdown && (
             <label>
               <span className='me-1'>Show Dropdown</span>
@@ -254,41 +250,50 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
             <>
               {!hasDashboardApplyBehavior(config.visualizations) && (
                 <>
-                  <label>
-                    <span className='edit-label column-heading'>URL to Filter: </span>
-                    <select
-                      defaultValue={filter.datasetKey || ''}
+                  <Select
+                    label='Filter By'
+                    value={filter.filterBy || ''}
+                    options={[
+                      { value: '', label: '- Select Option -' },
+                      { value: 'Query String', label: 'Query String' },
+                      { value: 'File Name', label: 'File Name' }
+                    ]}
+                    onChange={e => updateFilterProp('filterBy', e.target.value)}
+                  />
+
+                  {filter.filterBy === 'File Name' && (
+                    <Select
+                      label='URL to Filter'
+                      value={filter.datasetKey || ''}
+                      options={[
+                        { value: '', label: '- Select Option -' },
+                        ...Object.keys(config.datasets)
+                          .filter(datasetKey => config.datasets[datasetKey].dataUrl)
+                          .map(datasetKey => ({
+                            value: datasetKey,
+                            label: config.datasets[datasetKey].dataUrl
+                          }))
+                      ]}
                       onChange={e => updateFilterProp('datasetKey', e.target.value)}
-                    >
-                      <option value=''>- Select Option -</option>
-                      {Object.keys(config.datasets).map(datasetKey => {
-                        if (config.datasets[datasetKey].dataUrl) {
-                          return (
-                            <option key={datasetKey} value={datasetKey}>
-                              {config.datasets[datasetKey].dataUrl}
-                            </option>
-                          )
-                        }
-                        return null
-                      })}
-                    </select>
-                  </label>
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>Select which dataset URL's filename should be modified by this filter.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+                  )}
 
-                  <label>
-                    <span className='edit-label column-heading'>Filter By: </span>
-                    <select
-                      defaultValue={filter.filterBy || ''}
-                      onChange={e => updateFilterProp('filterBy', e.target.value)}
-                    >
-                      <option value=''>- Select Option -</option>
-                      <option key={'query-string'} value={'Query String'}>
-                        Query String
-                      </option>
-                      <option key={'file-name'} value={'File Name'}>
-                        File Name
-                      </option>
-                    </select>
-                  </label>
+                  {filter.filterBy === 'Query String' && filter.usedBy && filter.usedBy.length > 0 && (
+                    <div className='bg-info-subtle p-2 my-2' style={{ fontSize: '0.9em' }}>
+                      <Icon display='info' style={{ marginRight: '0.5rem' }} />
+                      Will apply to datasets used by selected widgets
+                    </div>
+                  )}
                   {filter.filterBy === 'File Name' && (
                     <>
                       <TextField
@@ -307,9 +312,16 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                         }
                       />
 
-                      <label>
-                        <span className='edit-label column-heading'>
-                          White Space Replacments
+                      <Select
+                        label='White Space Replacments'
+                        value={filter.whitespaceReplacement || 'Keep Spaces'}
+                        options={[
+                          { value: 'Remove Spaces', label: 'Remove Spaces' },
+                          { value: 'Replace With Underscore', label: 'Replace With Underscore' },
+                          { value: 'Keep Spaces', label: 'Keep Spaces' }
+                        ]}
+                        onChange={e => updateFilterProp('whitespaceReplacement', e.target.value)}
+                        tooltip={
                           <Tooltip style={{ textTransform: 'none' }}>
                             <Tooltip.Target>
                               <Icon display='question' style={{ marginLeft: '0.5rem' }} />
@@ -318,22 +330,8 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                               <p>{`Set how whitespace characters will be handled in the file request`}</p>
                             </Tooltip.Content>
                           </Tooltip>
-                        </span>
-                        <select
-                          defaultValue={filter.whitespaceReplacement || 'Keep Spaces'}
-                          onChange={e => updateFilterProp('whitespaceReplacement', e.target.value)}
-                        >
-                          <option key={'remove-spaces'} value={'Remove Spaces'}>
-                            Remove Spaces
-                          </option>
-                          <option key={'replace-with-underscore'} value={'Replace With Underscore'}>
-                            Replace With Underscore
-                          </option>
-                          <option key={'keep-spaces'} value={'Keep Spaces'}>
-                            Keep Spaces
-                          </option>
-                        </select>
-                      </label>
+                        }
+                      />
                     </>
                   )}
                 </>
@@ -507,22 +505,17 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
             <>
               {filter.filterStyle !== FILTER_STYLE.nestedDropdown ? (
                 <>
-                  <label>
-                    <span className='edit-label column-heading'>Filter: </span>
-                    <select
-                      value={filter.columnName}
-                      onChange={e => {
-                        updateFilterProp('columnName', e.target.value)
-                      }}
-                    >
-                      <option value=''>- Select Option -</option>
-                      {columns.map(dataKey => (
-                        <option value={dataKey} key={`filter-column-select-item-${dataKey}`}>
-                          {dataKey}
-                        </option>
-                      ))}
-                    </select>
-                  </label>
+                  <Select
+                    label='Filter'
+                    value={filter.columnName || ''}
+                    options={[
+                      { value: '', label: '- Select Option -' },
+                      ...columns.map(col => ({ value: col, label: col }))
+                    ]}
+                    onChange={e => {
+                      updateFilterProp('columnName', e.target.value)
+                    }}
+                  />
 
                   <Select
                     value={filter.defaultValue}
@@ -648,21 +641,16 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
               />
 
               <label>
-                <span className='edit-label column-heading'>Parent Filter: </span>
-                <select
-                  value={filter.parents || []}
-                  onChange={e => {
-                    updateFilterProp('parents', e.target.value)
+                <span className='edit-label column-heading mt-1'>Parent Filter(s): </span>
+                <MultiSelect
+                  label='Parent Filter(s): '
+                  options={dataFilterParents.map(key => ({ value: key, label: key }))}
+                  fieldName='parents'
+                  selected={filter.parents}
+                  updateField={(_section, _subsection, _fieldname, newItems) => {
+                    updateFilterProp('parents', newItems)
                   }}
-                >
-                  <option value=''>Select a filter</option>
-                  {config.dashboard.sharedFilters &&
-                    config.dashboard.sharedFilters.map(sharedFilter => {
-                      if (sharedFilter.key !== filter.key) {
-                        return <option key={sharedFilter.key}>{sharedFilter.key}</option>
-                      }
-                    })}
-                </select>
+                />
               </label>
 
               {!isNestedDropdown && (