import React, { useCallback, useState, type FC, useEffect } from 'react' import { mdiAlertCircle, mdiChevronDown, mdiChevronLeft, mdiInformationOutline, mdiMagnify } from '@mdi/js' import classNames from 'classnames' import { useNavigate } from 'react-router-dom' import { pluralize, renderMarkdown } from '@sourcegraph/common' import { useMutation, gql, useQuery } from '@sourcegraph/http-client' import type { Skipped, Progress } from '@sourcegraph/shared/src/search/stream' import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry' import type { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService' import { Button, Collapse, CollapseHeader, CollapsePanel, Icon, Checkbox, H4, Text, H3, Markdown, Form, ProductStatusBadge, Alert, ErrorAlert, LoadingSpinner, } from '@sourcegraph/wildcard' import { SyntaxHighlightedSearchQuery } from '../../components' import { sortBySeverity, limitHit } from './utils' import styles from './StreamingProgressSkippedPopover.module.scss' const SkippedMessage: React.FunctionComponent> = ({ skipped, startOpen, }) => { // Reactstrap is preventing default behavior on all non-DropdownItem elements inside a Dropdown, // so we need to stop propagation to allow normal behavior (e.g. enter and space to activate buttons) // See Reactstrap bug: https://github.com/reactstrap/reactstrap/issues/2099 const onKeyDown = useCallback((event: React.KeyboardEvent): void => { if (event.key === ' ' || event.key === 'Enter') { event.stopPropagation() } }, []) return (

{({ isOpen }) => ( <>

{skipped.title} {skipped.message && ( )}

{skipped.message && ( )} )}

) } interface StreamingProgressSkippedPopoverProps extends TelemetryProps, TelemetryV2Props { query: string progress: Progress isSearchJobsEnabled?: boolean onSearchAgain: (additionalFilters: string[]) => void } export const StreamingProgressSkippedPopover: FC = props => { const { query, progress, isSearchJobsEnabled, onSearchAgain, telemetryService, telemetryRecorder } = props const [selectedSuggestedSearches, setSelectedSuggestedSearches] = useState(new Set()) const submitHandler = useCallback( (event: React.FormEvent) => { onSearchAgain([...selectedSuggestedSearches]) event.preventDefault() }, [selectedSuggestedSearches, onSearchAgain] ) const checkboxHandler = useCallback((event: React.FormEvent) => { const itemToToggle = event.currentTarget.value const checked = event.currentTarget.checked setSelectedSuggestedSearches(selected => { const newSelected = new Set(selected) if (checked) { newSelected.add(itemToToggle) } else { newSelected.delete(itemToToggle) } return newSelected }) }, []) const sortedSkippedItems = sortBySeverity(progress.skipped) return ( <> Found {limitHit(progress) ? 'more than ' : ''} {progress.matchCount} {pluralize('result', progress.matchCount)} {progress.repositoriesCount !== undefined ? ` from ${progress.repositoriesCount} ${pluralize( 'repository', progress.repositoriesCount, 'repositories' )}` : ''} . {isSearchJobsEnabled ? ( ) : ( )} {sortedSkippedItems.some(skipped => skipped.suggested) && ( )} {isSearchJobsEnabled && ( <>

)} ) } interface SkippedReasonsProps { items: Skipped[] } const SkippedReasons: FC = props => { const { items } = props return ( <> {items.length > 0 &&

Some results skipped:

} {items.map((skipped, index) => ( ))} ) } const SlimSkippedReasons: FC = props => { const { items } = props if (items.length === 0) { return null } return (

{({ isOpen }) => ( <>

Why was the limit reached?

{items.map((skipped, index) => ( ))} {!isOpen &&

} )}

) } interface SkippedItemsSearchProps { slim: boolean items: Skipped[] disabled: boolean onSearchSettingsChange: (event: React.FormEvent) => void onSubmit: (event: React.FormEvent) => void } const SkippedItemsSearch: FC = props => { const { slim, items, disabled, onSearchSettingsChange, onSubmit } = props return ( ) } const VALIDATE_SEARCH_JOB = gql` query ValidateSearchJob($query: String!) { validateSearchJob(query: $query) { alwaysNil } } ` const CREATE_SEARCH_JOB = gql` mutation CreateSearchJob($query: String!) { createSearchJob(query: $query) { id query state URL startedAt finishedAt repoStats { total completed failed inProgress } creator { id displayName username avatarURL } } } ` interface ExhaustiveSearchMessageProps extends TelemetryProps, TelemetryV2Props { query: string } export const ExhaustiveSearchMessage: FC = props => { const { query, telemetryService, telemetryRecorder } = props const navigate = useNavigate() const [createSearchJob, { loading, error }] = useMutation(CREATE_SEARCH_JOB) const { error: validationError, loading: validationLoading } = useQuery(VALIDATE_SEARCH_JOB, { variables: { query }, }) useEffect(() => { const validState = validationError ? 'invalid' : 'valid' if (!validationLoading) { telemetryService.log('SearchJobsSearchFormShown', { validState }, { validState }) telemetryRecorder.recordEvent('search.exhaustiveJobs', 'view', { metadata: { validState: validState === 'valid' ? 1 : 0 }, }) } }, [telemetryService, telemetryRecorder, validationError, validationLoading]) const handleCreateSearchJobClick = async (): Promise => { await createSearchJob({ variables: { query } }) telemetryService.log('SearchJobsCreateClick', {}, {}) telemetryRecorder.recordEvent('search.exhaustiveJobs.create', 'click') navigate('/search-jobs') } return (

Create a search job:

{validationError && ( {validationError.message} )} Search jobs exhaustively returns all matches of a query. Results can be downloaded in JSON Lines format. {error && }

) }