import { type ChangeEvent, useId, useState, type FC } from 'react' import classNames from 'classnames' import { identity, upperFirst } from 'lodash' import { BackfillQueueOrderBy, InsightQueueItemState } from '@sourcegraph/shared/src/graphql-operations' import { H3, H4, Label, MultiCombobox, MultiComboboxEmptyList, MultiComboboxInput, MultiComboboxList, MultiComboboxOption, MultiComboboxPopover, Select, } from '@sourcegraph/wildcard' import styles from './CodeInsightsJobsFilters.module.scss' const CODE_INSIGHTS_JOBS_FILTERS = [ InsightQueueItemState.COMPLETED, InsightQueueItemState.FAILED, InsightQueueItemState.NEW, InsightQueueItemState.PROCESSING, InsightQueueItemState.QUEUED, InsightQueueItemState.UNKNOWN, ] export const formatFilter = (filter: InsightQueueItemState): string => upperFirst(filter.toLowerCase()) interface CodeInsightsFiltersPickerProps { selectedFilters: InsightQueueItemState[] className?: string onFiltersChange: (filters: InsightQueueItemState[]) => void } export const CodeInsightsJobStatusPicker: FC = props => { const { selectedFilters, className, onFiltersChange } = props const filterInputId = useId() const [filterInput, setFilterInput] = useState('') // Render only non-selected filters and filters that match with search term value const suggestions = CODE_INSIGHTS_JOBS_FILTERS.filter( filter => !selectedFilters.includes(filter) && filter.toLowerCase().includes(filterInput.toLowerCase()) ) return (

Status:

setFilterInput(event.target.value)} /> {filters => filters.map((filter, index) => ( )) } {suggestions.length === 0 && ( {!filterInput ? <>All filters are selected : <>No options} )} ) } interface CodeInsightsOrderPickerProps { order: BackfillQueueOrderBy className?: string onOrderChange: (order: BackfillQueueOrderBy) => void } export const CodeInsightsJobsOrderPicker: FC = props => { const { order, className, onOrderChange } = props const handleSelect = (event: ChangeEvent): void => { const nextValue = event.target.value as BackfillQueueOrderBy onOrderChange(nextValue) } return ( ) }