import React, { useMemo, useState, useCallback } from 'react' import { EditorView } from '@codemirror/view' import { mdiInformationOutline } from '@mdi/js' import { debounce } from 'lodash' import { createDefaultSuggestions } from '@sourcegraph/branded' import { isMacPlatform as isMacPlatformFunc } from '@sourcegraph/common' import type { PathMatch } from '@sourcegraph/shared/src/search/stream' import { fetchStreamSuggestions } from '@sourcegraph/shared/src/search/suggestions' import { Icon, Button, Input, InputStatus } from '@sourcegraph/wildcard' import type { BlockProps, FileBlockInput } from '../..' import type { HighlightLineRange } from '../../../graphql-operations' import { SearchPatternType } from '../../../graphql-operations' import { parseLineRange, serializeLineRange } from '../../serialize' import { SearchTypeSuggestionsInput } from '../suggestions/SearchTypeSuggestionsInput' import { fetchSuggestions } from '../suggestions/suggestions' import styles from './NotebookFileBlockInputs.module.scss' interface NotebookFileBlockInputsProps extends Pick { id: string queryInput: string patternType: SearchPatternType lineRange: HighlightLineRange | null onEditorCreated: (editor: EditorView) => void setQueryInput: (value: string) => void onLineRangeChange: (lineRange: HighlightLineRange | null) => void onFileSelected: (file: FileBlockInput) => void isSourcegraphDotCom: boolean } function getFileSuggestionsQuery(queryInput: string): string { return `${queryInput} fork:yes type:path count:50` } const editorAttributes = [ EditorView.editorAttributes.of({ 'data-testid': 'notebook-file-block-input', }), EditorView.contentAttributes.of({ 'aria-label': 'File search input', }), ] export const NotebookFileBlockInputs: React.FunctionComponent< React.PropsWithChildren > = ({ id, lineRange, onFileSelected, onLineRangeChange, isSourcegraphDotCom, patternType, ...inputProps }) => { const [lineRangeInput, setLineRangeInput] = useState(serializeLineRange(lineRange)) const debouncedOnLineRangeChange = useMemo(() => debounce(onLineRangeChange, 300), [onLineRangeChange]) const isLineRangeValid = useMemo( () => (lineRangeInput.trim() ? parseLineRange(lineRangeInput) !== null : undefined), [lineRangeInput] ) const onLineRangeInputChange = useCallback( (event: React.ChangeEvent) => { setLineRangeInput(event.target.value) debouncedOnLineRangeChange(parseLineRange(event.target.value)) }, [setLineRangeInput, debouncedOnLineRangeChange] ) const fetchFileSuggestions = useCallback( (query: string) => fetchSuggestions( getFileSuggestionsQuery(query), patternType, (suggestion): suggestion is PathMatch => suggestion.type === 'path', file => file ), [patternType] ) const countSuggestions = useCallback((suggestions: PathMatch[]) => suggestions.length, []) const onFileSuggestionSelected = useCallback( (file: FileBlockInput) => { onFileSelected(file) setLineRangeInput(serializeLineRange(file.lineRange)) }, [onFileSelected, setLineRangeInput] ) const renderSuggestions = useCallback( (suggestions: PathMatch[]) => ( ), [onFileSuggestionSelected] ) const isMacPlatform = useMemo(() => isMacPlatformFunc(), []) const queryCompletion = useMemo( () => createDefaultSuggestions({ isSourcegraphDotCom, fetchSuggestions: fetchStreamSuggestions, }), [isSourcegraphDotCom] ) return (

To automatically select a file, copy a Sourcegraph file URL, select the block, and paste the URL ({isMacPlatform ? '⌘' : 'Ctrl'} + v).

id={id} label="Find a file using a Sourcegraph search query" queryPrefix="type:path" fetchSuggestions={fetchFileSuggestions} countSuggestions={countSuggestions} renderSuggestions={renderSuggestions} extension={useMemo(() => [queryCompletion, editorAttributes], [queryCompletion])} {...inputProps} />

) } const FileSuggestions: React.FunctionComponent< React.PropsWithChildren<{ suggestions: PathMatch[] onFileSelected: (symbol: FileBlockInput) => void }> > = ({ suggestions, onFileSelected }) => (

{suggestions.map(suggestion => ( ))}

)