Form: Migrate form UI to wildcard

.github/workflows/scip-typescript.yml

@@ -33,7 +33,7 @@ jobs:
         run: pnpm install --frozen-lockfile
       - run: pnpm generate
       - run: pnpm --filter ./client/web-sveltekit run sync
-      - run: pnpm dlx @sourcegraph/scip-typescript index --pnpm-workspaces
+      - run: pnpm dlx @sourcegraph/scip-typescript index --pnpm-workspaces --no-global-caches
       - run: cp index.scip dump.lsif-typed
       - name: Install src-cli
         run: |

client/web/src/enterprise/insights/components/creation-ui/code-insight-time-step-picker/CodeInsightTimeStepPicker.tsx

@@ -2,10 +2,9 @@ import { ChangeEvent, FocusEventHandler, forwardRef } from 'react'
 
 import classNames from 'classnames'
 
-import { getInputStatus, Input } from '@sourcegraph/wildcard'
+import { getInputStatus, Input, FormGroup } from '@sourcegraph/wildcard'
 
 import { InsightStep } from '../../../pages/insights/creation/search-insight'
-import { FormGroup } from '../../form/form-group/FormGroup'
 import { FormRadioInput } from '../../form/form-radio-input/FormRadioInput'
 
 import { getDescriptionText } from './get-interval-descrtiption-text/get-interval-description-text'

client/web/src/enterprise/insights/components/creation-ui/form-series/FormSeries.tsx

@@ -2,10 +2,10 @@ import { FC, ReactNode } from 'react'
 
 import classNames from 'classnames'
 
-import { Button } from '@sourcegraph/wildcard'
+import { Button, useFieldAPI } from '@sourcegraph/wildcard'
 
 import { useUiFeatures } from '../../../hooks'
-import { LimitedAccessLabel, useFieldAPI } from '../../index'
+import { LimitedAccessLabel } from '../../index'
 
 import { FormSeriesInput } from './components/form-series-input/FormSeriesInput'
 import { SeriesCard } from './components/series-card/SeriesCard'

client/web/src/enterprise/insights/components/creation-ui/form-series/components/form-series-input/FormSeriesInput.tsx

@@ -3,10 +3,10 @@ import { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import { noop } from 'rxjs'
 
-import { Button, Card, Input, Code } from '@sourcegraph/wildcard'
+import { Button, Card, Input, Code, useForm, useField, getDefaultInputProps } from '@sourcegraph/wildcard'
 
 import { DEFAULT_DATA_SERIES_COLOR } from '../../../../../constants'
-import { getDefaultInputProps, useField, InsightQueryInput, useForm } from '../../../../form'
+import { InsightQueryInput } from '../../../../form'
 import { EditableDataSeries } from '../../types'
 import { FormColorInput } from '../form-color-input/FormColorInput'
 

client/web/src/enterprise/insights/components/creation-ui/form-series/components/form-series-input/validators.ts

@@ -1,6 +1,6 @@
+import { createRequiredValidator, composeValidators, ValidationResult } from '@sourcegraph/wildcard'
+
 import { searchQueryValidator } from '../../../../../pages/insights/creation/capture-group/utils/search-query-validator'
-import { ValidationResult } from '../../../../form'
-import { createRequiredValidator, composeValidators } from '../../../../form/hooks/validators'
 
 export const SERIES_NAME_VALIDATORS = createRequiredValidator('Name is a required field for data series.')
 

client/web/src/enterprise/insights/components/creation-ui/form-series/use-editable-series.ts

@@ -2,8 +2,9 @@ import { useState } from 'react'
 
 import * as uuid from 'uuid'
 
+import { useFieldAPI } from '@sourcegraph/wildcard'
+
 import { DEFAULT_DATA_SERIES_COLOR } from '../../../constants'
-import { useFieldAPI } from '../../form'
 
 import { EditableDataSeries } from './types'
 

client/web/src/enterprise/insights/components/creation-ui/insight-repo-section/InsightRepoSection.tsx

@@ -17,21 +17,17 @@ import {
     InputStatus,
     useDebounce,
     Link,
+    FormGroup,
+    useFieldAPI,
+    getDefaultInputProps,
+    getDefaultInputStatus,
+    getDefaultInputError,
 } from '@sourcegraph/wildcard'
 
 import { InsightRepositoriesCountResult, InsightRepositoriesCountVariables } from '../../../../../graphql-operations'
 import { useExperimentalFeatures } from '../../../../../stores'
 import { CreateInsightFormFields } from '../../../pages/insights/creation/search-insight'
-import {
-    FormGroup,
-    getDefaultInputProps,
-    getDefaultInputStatus,
-    getDefaultInputError,
-    getRepoQueryPreview,
-    RepositoriesField,
-    useFieldAPI,
-    MonacoField,
-} from '../../form'
+import { getRepoQueryPreview, RepositoriesField, MonacoField } from '../../form'
 import { MonacoPreviewLink } from '../../form/monaco-field'
 
 import styles from './InsightRepoSection.module.scss'

client/web/src/enterprise/insights/components/creation-ui/insight-repo-section/use-repo-fields.ts

@@ -3,12 +3,11 @@ import { useMemo } from 'react'
 import { ApolloClient, gql, useApolloClient } from '@apollo/client'
 
 import { QueryState } from '@sourcegraph/shared/src/search'
+import { FormAPI, AsyncValidator, useField, useFieldAPI, ValidationResult } from '@sourcegraph/wildcard'
 
 import { ValidateInsightRepoQueryResult, ValidateInsightRepoQueryVariables } from '../../../../../graphql-operations'
 import { useExperimentalFeatures } from '../../../../../stores'
 import { RepoMode } from '../../../pages/insights/creation/search-insight/types'
-import { AsyncValidator, useField, useFieldAPI, ValidationResult } from '../../form'
-import { FormAPI } from '../../form/hooks/useForm'
 import { insightRepositoriesValidator } from '../validators/validators'
 
 interface RepositoriesFields {

client/web/src/enterprise/insights/components/creation-ui/validators/validators.ts

@@ -1,5 +1,5 @@
-import { Validator } from '../../form'
-import { createRequiredValidator } from '../../form/hooks/validators'
+import { Validator, createRequiredValidator } from '@sourcegraph/wildcard'
+
 import { EditableDataSeries } from '../form-series'
 
 // Group of shared Creation UI/Edit UI insight validators.

client/web/src/enterprise/insights/components/form/index.ts

@@ -1,13 +1,9 @@
 // helpers for form-field's setup
-export { getDefaultInputProps, getDefaultInputError, getDefaultInputStatus } from './getDefaultInputProps'
 export { getRepoQueryPreview } from './query-input/utils/generate-repo-filters-query'
 
 // form components
 export { RepositoryField } from './repositories-field/RepositoryField'
 export { RepositoriesField } from './repositories-field/RepositoriesField'
 export { InsightQueryInput } from './query-input/InsightQueryInput'
 export { FormRadioInput } from './form-radio-input/FormRadioInput'
-export { FormGroup } from './form-group/FormGroup'
 export { MonacoField } from './monaco-field'
-
-export * from './hooks'

client/web/src/enterprise/insights/components/insights-view-grid/components/backend-insight/components/drill-down-filters-panel/DrillDownInsightCreationForm.tsx

@@ -1,10 +1,19 @@
 import { FunctionComponent } from 'react'
 
-import { Button, Input, H3, ErrorAlert } from '@sourcegraph/wildcard'
+import {
+    Button,
+    Input,
+    H3,
+    ErrorAlert,
+    useForm,
+    useField,
+    FORM_ERROR,
+    getDefaultInputProps,
+    createRequiredValidator,
+    SubmissionResult,
+} from '@sourcegraph/wildcard'
 
 import { LoaderButton } from '../../../../../../../../components/LoaderButton'
-import { getDefaultInputProps, useField, createRequiredValidator } from '../../../../../form'
-import { FORM_ERROR, SubmissionResult, useForm } from '../../../../../form/hooks/useForm'
 
 export interface DrillDownInsightCreationFormValues {
     insightName: string

client/web/src/enterprise/insights/components/insights-view-grid/components/backend-insight/components/drill-down-filters-panel/drill-down-filters/DrillDownInsightFilters.tsx

@@ -6,11 +6,20 @@ import classNames from 'classnames'
 import { isEqual, noop } from 'lodash'
 
 import { SeriesSortDirection, SeriesSortMode } from '@sourcegraph/shared/src/graphql-operations'
-import { Button, Icon, Link, H4, ErrorAlert } from '@sourcegraph/wildcard'
+import {
+    Button,
+    Icon,
+    Link,
+    H4,
+    ErrorAlert,
+    useField,
+    FormChangeEvent,
+    SubmissionResult,
+    useForm,
+    FORM_ERROR,
+} from '@sourcegraph/wildcard'
 
 import { LoaderButton } from '../../../../../../../../../components/LoaderButton'
-import { useField } from '../../../../../../form'
-import { FormChangeEvent, SubmissionResult, useForm, FORM_ERROR } from '../../../../../../form/hooks/useForm'
 import { SortFilterSeriesPanel } from '../../sort-filter-series-panel/SortFilterSeriesPanel'
 import { DrillDownInput, LabelWithReset } from '../drill-down-input/DrillDownInput'
 import { FilterCollapseSection, FilterPreviewPill } from '../filter-collapse-section/FilterCollapseSection'

client/web/src/enterprise/insights/components/insights-view-grid/components/backend-insight/components/drill-down-filters-panel/drill-down-filters/validators.ts

@@ -1,9 +1,8 @@
 import { ApolloClient, gql } from '@apollo/client'
 
-import { InputStatus } from '@sourcegraph/wildcard'
+import { InputStatus, useFieldAPI, ValidationResult } from '@sourcegraph/wildcard'
 
 import { GetSearchContextByNameResult } from '../../../../../../../../../graphql-operations'
-import { useFieldAPI, ValidationResult } from '../../../../../../form'
 
 export const REPO_FILTER_VALIDATORS = isValidRegexp
 

client/web/src/enterprise/insights/components/insights-view-grid/components/backend-insight/components/drill-down-filters-popover/DrillDownFiltersPopover.tsx

@@ -12,10 +12,11 @@ import {
     PopoverTail,
     Position,
     createRectangle,
+    FormChangeEvent,
+    SubmissionResult,
 } from '@sourcegraph/wildcard'
 
 import { InsightFilters } from '../../../../../../core'
-import { FormChangeEvent, SubmissionResult } from '../../../../../form/hooks/useForm'
 import {
     DrillDownFiltersFormValues,
     DrillDownInsightCreationForm,

client/web/src/enterprise/insights/pages/dashboards/creation/components/InsightsDashboardCreationContent.tsx

@@ -2,17 +2,20 @@ import React, { ReactNode } from 'react'
 
 import classNames from 'classnames'
 
-import { Input, ErrorAlert } from '@sourcegraph/wildcard'
-
 import {
+    Input,
+    ErrorAlert,
     FormGroup,
-    FormRadioInput,
-    getDefaultInputProps,
+    useForm,
     useField,
+    getDefaultInputProps,
     createRequiredValidator,
-    LimitedAccessLabel,
-} from '../../../../components'
-import { FORM_ERROR, FormAPI, SubmissionErrors, useForm } from '../../../../components/form/hooks/useForm'
+    FORM_ERROR,
+    FormAPI,
+    SubmissionErrors,
+} from '@sourcegraph/wildcard'
+
+import { FormRadioInput, LimitedAccessLabel } from '../../../../components'
 import { InsightsDashboardOwner, isGlobalOwner, isOrganizationOwner, isPersonalOwner } from '../../../../core'
 import { useUiFeatures } from '../../../../hooks'
 

client/web/src/enterprise/insights/pages/dashboards/edit-dashboard/EditDashobardPage.tsx

@@ -4,12 +4,20 @@ import classNames from 'classnames'
 import MapSearchIcon from 'mdi-react/MapSearchIcon'
 import { useParams, useNavigate } from 'react-router-dom-v5-compat'
 
-import { Button, Container, LoadingSpinner, PageHeader, useObservable, Link } from '@sourcegraph/wildcard'
+import {
+    Button,
+    Container,
+    LoadingSpinner,
+    PageHeader,
+    useObservable,
+    Link,
+    SubmissionErrors,
+} from '@sourcegraph/wildcard'
 
 import { HeroPage } from '../../../../../components/HeroPage'
 import { LoaderButton } from '../../../../../components/LoaderButton'
 import { PageTitle } from '../../../../../components/PageTitle'
-import { CodeInsightsIcon, CodeInsightsPage, SubmissionErrors } from '../../../components'
+import { CodeInsightsIcon, CodeInsightsPage } from '../../../components'
 import {
     CodeInsightsBackendContext,
     CustomInsightDashboard,

client/web/src/enterprise/insights/pages/insights/creation/capture-group/CaptureGroupCreationPage.tsx

@@ -1,18 +1,11 @@
 import { FC, useEffect, useMemo } from 'react'
 
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { Link, PageHeader, useObservable } from '@sourcegraph/wildcard'
+import { Link, PageHeader, useObservable, FORM_ERROR, FormChangeEvent, SubmissionErrors } from '@sourcegraph/wildcard'
 
 import { PageTitle } from '../../../../../../components/PageTitle'
 import { CodeInsightsIcon } from '../../../../../../insights/Icons'
-import {
-    CodeInsightCreationMode,
-    CodeInsightsCreationActions,
-    CodeInsightsPage,
-    FORM_ERROR,
-    FormChangeEvent,
-    SubmissionErrors,
-} from '../../../../components'
+import { CodeInsightCreationMode, CodeInsightsCreationActions, CodeInsightsPage } from '../../../../components'
 import { MinimalCaptureGroupInsightData } from '../../../../core'
 import { useUiFeatures } from '../../../../hooks'
 import { CodeInsightTrackType } from '../../../../pings'

client/web/src/enterprise/insights/pages/insights/creation/capture-group/components/CaptureGoupCreationForm.tsx

@@ -2,17 +2,22 @@ import { FC, FormHTMLAttributes, ReactNode } from 'react'
 
 import classNames from 'classnames'
 
-import { Card, Input, Label, Link } from '@sourcegraph/wildcard'
-
 import {
-    CodeInsightTimeStepPicker,
-    CodeInsightDashboardsVisibility,
+    Card,
+    Input,
+    Label,
+    Link,
     FormGroup,
     getDefaultInputProps,
     useFieldAPI,
-    Form,
-    LimitedAccessLabel,
+    FormInstance,
     SubmissionErrors,
+} from '@sourcegraph/wildcard'
+
+import {
+    CodeInsightTimeStepPicker,
+    CodeInsightDashboardsVisibility,
+    LimitedAccessLabel,
     RepoSettingSection,
 } from '../../../../../components'
 import { useUiFeatures } from '../../../../../hooks'
@@ -24,7 +29,7 @@ import { CaptureGroupQueryInput } from './query-input/CaptureGroupQueryInput'
 import { SearchQueryChecks } from './search-query-checks/SearchQueryChecks'
 
 interface CaptureGroupCreationFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'title' | 'children'> {
-    form: Form<CaptureGroupFormFields>
+    form: FormInstance<CaptureGroupFormFields>
     title: useFieldAPI<CaptureGroupFormFields['title']>
     repositories: useFieldAPI<CaptureGroupFormFields['repositories']>
     repoQuery: useFieldAPI<CaptureGroupFormFields['repoQuery']>

client/web/src/enterprise/insights/pages/insights/creation/capture-group/components/CaptureGroupCreationContent.tsx

@@ -2,17 +2,10 @@ import { FC, ReactNode } from 'react'
 
 import { noop } from 'lodash'
 
+import { useField, FormChangeEvent, SubmissionErrors, useForm } from '@sourcegraph/wildcard'
+
 import { useExperimentalFeatures } from '../../../../../../../stores'
-import {
-    CreationUiLayout,
-    CreationUIForm,
-    CreationUIPreview,
-    useField,
-    FormChangeEvent,
-    SubmissionErrors,
-    useForm,
-    useRepoFields,
-} from '../../../../../components'
+import { CreationUiLayout, CreationUIForm, CreationUIPreview, useRepoFields } from '../../../../../components'
 import { LineChartLivePreview } from '../../LineChartLivePreview'
 import { CaptureGroupFormFields } from '../types'
 

client/web/src/enterprise/insights/pages/insights/creation/capture-group/components/validators.ts

@@ -1,10 +1,6 @@
-import {
-    insightStepValueValidator,
-    insightTitleValidator,
-    composeValidators,
-    Validator,
-} from '../../../../../components'
-import { createRequiredValidator } from '../../../../../components/form/hooks'
+import { Validator, composeValidators, createRequiredValidator } from '@sourcegraph/wildcard'
+
+import { insightStepValueValidator, insightTitleValidator } from '../../../../../components'
 import { Checks, searchQueryValidator } from '../utils/search-query-validator'
 
 const validateQueryCheck: Validator<string, Checks> = (value: string | undefined) => {

client/web/src/enterprise/insights/pages/insights/creation/compute/ComputeInsightCreationPage.tsx

@@ -3,17 +3,17 @@ import { FunctionComponent, useCallback, useMemo } from 'react'
 import BarChartIcon from 'mdi-react/BarChartIcon'
 
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { PageHeader, useLocalStorage, useObservable } from '@sourcegraph/wildcard'
-
-import { PageTitle } from '../../../../../../components/PageTitle'
 import {
-    CodeInsightCreationMode,
-    CodeInsightsCreationActions,
-    CodeInsightsPage,
+    PageHeader,
+    useLocalStorage,
+    useObservable,
     FORM_ERROR,
     FormChangeEvent,
     SubmissionErrors,
-} from '../../../../components'
+} from '@sourcegraph/wildcard'
+
+import { PageTitle } from '../../../../../../components/PageTitle'
+import { CodeInsightCreationMode, CodeInsightsCreationActions, CodeInsightsPage } from '../../../../components'
 import { ComputeInsight } from '../../../../core'
 import { useUiFeatures } from '../../../../hooks'
 import { CodeInsightTrackType } from '../../../../pings'