import React, { type FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react' import { gql, useMutation } from '@apollo/client' import { mdiDelete, mdiFlag } from '@mdi/js' import classNames from 'classnames' import { useNavigate, useParams } from 'react-router-dom' import { of } from 'rxjs' import { catchError, map } from 'rxjs/operators' import { Toggle } from '@sourcegraph/branded/src/components/Toggle' import { asError, type ErrorLike, isErrorLike, pluralize } from '@sourcegraph/common' import { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry' import type { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService' import { Button, Container, Link, LoadingSpinner, PageHeader, Select, useObservable, Icon, Modal, Input, Code, Label, H3, Text, ErrorAlert, Form, } from '@sourcegraph/wildcard' import { CreatedByAndUpdatedByInfoByline } from '../components/Byline/CreatedByAndUpdatedByInfoByline' import { Collapsible } from '../components/Collapsible' import { LoaderButton } from '../components/LoaderButton' import { PageTitle } from '../components/PageTitle' import { RadioButtons } from '../components/RadioButtons' import { fetchFeatureFlags as defaultFetchFeatureFlags } from './backend' import { getFeatureFlagReferences, parseProductReference } from './SiteAdminFeatureFlagsPage' import { UserSelect } from './user-select/UserSelect' import styles from './SiteAdminFeatureFlagConfigurationPage.module.scss' export interface SiteAdminFeatureFlagConfigurationProps extends TelemetryProps, TelemetryV2Props { fetchFeatureFlags?: typeof defaultFetchFeatureFlags productVersion?: string } export const SiteAdminFeatureFlagConfigurationPage: FunctionComponent< React.PropsWithChildren > = ({ fetchFeatureFlags = defaultFetchFeatureFlags, productVersion = window.context.version, telemetryRecorder }) => { const { name = '' } = useParams<{ name: string }>() const navigate = useNavigate() const productGitVersion = parseProductReference(productVersion) const isCreateFeatureFlag = name === 'new' useEffect(() => telemetryRecorder.recordEvent('admin.featureFlagConfiguration', 'view'), [telemetryRecorder]) // Load the initial feature flag, unless we are creating a new feature flag. const featureFlagOrError = useObservable( useMemo( () => isCreateFeatureFlag ? of(undefined) : fetchFeatureFlags().pipe( map(flags => flags.find(flag => flag.name === name)), map(flag => { if (flag === undefined) { throw new Error(`Could not find feature flag with name '${name}'.`) } return flag }), catchError((error): [ErrorLike] => [asError(error)]) ), [isCreateFeatureFlag, name, fetchFeatureFlags] ) ) // Split feature flag fields into parts that can be individually updated during // feature flag creation or management of an existing feature flag. const [flagName, setFlagName] = useState() const [flagType, setFlagType] = useState() const [flagValue, setFlagValue] = useState() const [flagOverrides, setOverrides] = useState() useEffect(() => { if (featureFlagOrError && !isErrorLike(featureFlagOrError)) { setFlagName(featureFlagOrError.name) setFlagType(featureFlagOrError.__typename) setFlagValue(featureFlagOrError) setOverrides(featureFlagOrError.overrides) } }, [featureFlagOrError]) const onOverridesUpdate = useCallback( (overrides: FeatureFlagOverride[]) => { setOverrides(overrides) }, [setOverrides] ) // Set up mutations for creation or management of this feature flag. const [createFeatureFlag, { loading: createFlagLoading, error: createFlagError }] = useMutation(CREATE_FEATURE_FLAG_MUTATION) const [updateFeatureFlag, { loading: updateFlagLoading, error: updateFlagError }] = useMutation(UPDATE_FEATURE_FLAG_MUTATION) const [deleteFeatureFlag, { loading: deleteFlagLoading, error: deleteFlagError }] = useMutation(DELETE_FEATURE_FLAG_MUTATION) // Create the main form fields and action buttons based on the state of the page. let body: React.ReactElement let actions: React.ReactElement | undefined if (isCreateFeatureFlag) { // Create new feature flag state body = ( ) actions = ( ) } else if (isErrorLike(featureFlagOrError)) { // Error occurred state body = } else if (flagName && flagType && flagValue) { // Found existing feature flag state body = ( ) actions = ( <> ) } else { body = } const verb = isCreateFeatureFlag ? 'Create' : 'Manage' return ( <> ) } /> {createFlagError && } {updateFlagError && } {deleteFlagError && } {body}

{actions}

) } type FeatureFlagType = 'FeatureFlagBoolean' | 'FeatureFlagRollout' interface FeatureFlagOverride { id: string value: boolean } interface FeatureFlagOverrideParsedID { OrgID: number UserID: number FlagName: string } interface FeatureFlagBooleanValue { value: boolean } interface FeatureFlagRolloutValue { rolloutBasisPoints: number } interface CreateFeatureFlagOverrideResult { createFeatureFlagOverride: FeatureFlagOverride } interface CreateFeatureFlagOverrideVariables { namespace: string flagName: string value: boolean } type FeatureFlagValue = FeatureFlagBooleanValue | FeatureFlagRolloutValue type FeatureFlagOverrideType = 'User' | 'Org' const AddFeatureFlagOverride: FunctionComponent< React.PropsWithChildren<{ name: string value: boolean onOverrideAdded: (override: FeatureFlagOverride) => void }> > = ({ name, value, onOverrideAdded }) => { const [showAddOverride, setShowAddOverride] = useState(false) const [overrideValue, setOverrideValue] = useState(!value) const [overrideType, setOverrideType] = useState('User') const [namespaceID, setNamespaceID] = useState('') const getBase64Namespace = useCallback( (): string => btoa(`${overrideType}:${namespaceID}`), [namespaceID, overrideType] ) const [addOverride, { loading, error, reset }] = useMutation< CreateFeatureFlagOverrideResult, CreateFeatureFlagOverrideVariables >(CREATE_FEATURE_FLAG_OVERRIDE_MUTATION, { variables: { namespace: getBase64Namespace(), flagName: name, value: overrideValue, }, onCompleted: data => { onOverrideAdded(data.createFeatureFlagOverride) closeModal() }, }) const closeModal = useCallback(() => { setShowAddOverride(false) setOverrideType('User') setNamespaceID('') setOverrideValue(!value) reset() }, [setShowAddOverride, setOverrideType, setNamespaceID, setOverrideValue, value, reset]) const openModal = useCallback( (event: React.MouseEvent) => { event.stopPropagation() setShowAddOverride(true) }, [setShowAddOverride] ) const setInputValue = useCallback( (event: React.ChangeEvent) => { const stringValue = event.target.value.trim() if (stringValue !== '') { setNamespaceID(Number(stringValue)) } else { setNamespaceID('') } }, [setNamespaceID] ) return (

Add feature flag override for {name}

Override type ) => setOverrideType(event.target.value as FeatureFlagOverrideType) } selected={overrideType} /> {overrideType === 'User' && ( <> Select user setNamespaceID(user?.databaseID ?? '')} htmlID="add-feature-flag--user" /> )} {overrideType !== 'User' && ( )}

Value

setOverrideValue(!overrideValue)} aria-describedby="add-feature-flag-override-value-toggle-description" /> {Boolean(overrideValue).toString()} {error && }

addOverride()} label="Add override" loading={loading} />

) } const FeatureFlagOverridesHeader: FunctionComponent< React.PropsWithChildren<{ name: string type: FeatureFlagType value: FeatureFlagValue overrides: FeatureFlagOverride[] onOverrideAdded: (flag: FeatureFlagOverride) => void }> > = ({ name, type, value, overrides, onOverrideAdded }) => { const count = `${overrides.length} override${overrides.length === 1 ? '' : 's'}` return ( <>

{count}

) } interface UpdateFeatureFlagOverrideResult { updateFeatureFlagOverride: FeatureFlagOverride } const FeatureFlagOverrideItem: FunctionComponent< React.PropsWithChildren<{ override: FeatureFlagOverride onUpdate: (value: boolean) => void onDelete: () => void }> > = ({ override, onUpdate, onDelete }) => { const { id, value } = override const [error, setError] = useState() const { OrgID: orgID, UserID: userID } = JSON.parse( atob(id).replace('FeatureFlagOverride:{', '{') ) as FeatureFlagOverrideParsedID const nsLabel = orgID > 0 ? 'OrgID' : 'UserID' const nsValue = orgID > 0 ? orgID : userID const onError = useCallback( (error: Error) => { setError(error) }, [setError] ) const [deleteFeatureFlagOverride, { loading: deleteOverrideLoading }] = useMutation( DELETE_FEATURE_FLAG_OVERRIDE_MUTATION, { variables: { id }, onCompleted: () => { onDelete() setError(undefined) }, onError, } ) const [updateFeatureFlagOverride, { loading: updateOverrideLoading }] = useMutation< UpdateFeatureFlagOverrideResult, FeatureFlagOverride >(UPDATE_FEATURE_FLAG_OVERRIDE_MUTATION, { variables: { id, value: !value, }, onCompleted: data => { onUpdate(data.updateFeatureFlagOverride.value) setError(undefined) }, onError, }) return (

{updateOverrideLoading && } {error && } updateFeatureFlagOverride()} className="mr-1" aria-describedby="feature-flag-override-toggle-description" /> {Boolean(value).toString()} {/* TODO: querying for namespace of orgId does not work on Cloud, so just present the decoded contents of the ID for now. https://github.com/sourcegraph/sourcegraph/issues/32238 */} {nsLabel}: {nsValue} deleteFeatureFlagOverride()} label="Delete Override" loading={deleteOverrideLoading} alwaysShowLabel={true} />

) } /** * Component with form fields for managing an existing feature flag. */ const ManageFeatureFlag: FunctionComponent< React.PropsWithChildren<{ name: string type: FeatureFlagType value: FeatureFlagValue overrides?: FeatureFlagOverride[] onOverridesUpdate: (overrides: FeatureFlagOverride[]) => void setFlagValue: (flag: FeatureFlagValue) => void }> > = ({ name, type, value, overrides, onOverridesUpdate, setFlagValue }) => { const addOverride = useCallback( (override: FeatureFlagOverride): void => { const newOverrides = overrides?.slice() || [] newOverrides.push(override) onOverridesUpdate(newOverrides) }, [overrides, onOverridesUpdate] ) const updateOverride = useCallback( (index: number, value: boolean): void => { if ((overrides?.length || -1) > index) { const newOverrides = overrides?.slice() || [] newOverrides[index].value = value onOverridesUpdate(newOverrides) } }, [overrides, onOverridesUpdate] ) const deleteOverride = useCallback( (index: number): void => { if ((overrides?.length || -1) > index) { const newOverrides = overrides?.slice() || [] newOverrides?.splice(index, 1) onOverridesUpdate(newOverrides) } }, [overrides, onOverridesUpdate] ) return ( <>

Name

{name}

Type

{type.slice('FeatureFlag'.length)} Overrides} detail={ } className="p-0 font-weight-normal" buttonClassName="mb-0" titleAtStart={true} defaultExpanded={false} wholeTitleClickable={false} >

updateOverride(index, newValue)} onDelete={() => deleteOverride(index)} /> ))}

) } /** * Component with form fields for creating a feature flag. */ const CreateFeatureFlag: React.FunctionComponent< React.PropsWithChildren<{ name?: string setFlagName: (s: string) => void type?: FeatureFlagType setFlagType: (t: FeatureFlagType) => void value?: FeatureFlagValue setFlagValue: (v: FeatureFlagValue) => void }> > = ({ name, setFlagName, type, setFlagType, value, setFlagValue }) => ( <> { setFlagName(value) }} className="form-group" label={

Name

} message="Required." /> {type && } ) /** * Displays a modal for configuring the flag value as a certain type. Can be provided an * undefined value to instantiate it based on type. */ const FeatureFlagValueSettings: React.FunctionComponent< React.PropsWithChildren<{ type: FeatureFlagType value?: FeatureFlagValue setFlagValue: (next: FeatureFlagValue) => void }> > = ({ type, value, setFlagValue }) => { if (type === 'FeatureFlagRollout') { if (!value || !('rolloutBasisPoints' in value)) { value = { rolloutBasisPoints: 0 } setFlagValue({ ...value }) } return ( { setFlagValue({ ...value, ...next, }) }} /> ) } if (!value || !('value' in value)) { value = { value: false } setFlagValue({ ...value }) } return ( { setFlagValue({ ...value, ...next, }) }} /> ) } const FeatureFlagRolloutValueSettings: React.FunctionComponent< React.PropsWithChildren<{ value: FeatureFlagRolloutValue update: (next: FeatureFlagRolloutValue) => void }> > = ({ value, update }) => (

Value} inputClassName="p-0 w-25" value={value.rolloutBasisPoints} onChange={({ target }) => { update({ rolloutBasisPoints: parseInt(target.value, 10) }) }} aria-describedby="feature-flag-rollout-description" />

{value.rolloutBasisPoints} basis points

This feature is enabled for {Math.floor(value.rolloutBasisPoints / 100) || 0}% of users.

) const FeatureFlagBooleanValueSettings: React.FunctionComponent< React.PropsWithChildren<{ value: FeatureFlagBooleanValue update: (next: FeatureFlagBooleanValue) => void }> > = ({ value, update }) => (

Value

{ update({ value: isTrue }) }} className="mr-2" aria-describedby="feature-flag-toggle-description" />{' '}

{value.value ? 'True' : 'False'}

{value.value ? 'This feature is enabled.' : 'This feature is disabled.'}

) /** * Searches for potential references and renders them in a collapsible, or returns an * empty fragment - this allows references to work seamlessly in case the flag has not * been implemented yet, or if this Sourcegraph instance does not have a copy of the * Sourcegraph repository. */ const ReferencesCollapsible: React.FunctionComponent< React.PropsWithChildren<{ flagName: string | undefined productGitVersion: string }> > = ({ flagName, productGitVersion }) => { const references = useObservable( useMemo( () => (flagName ? getFeatureFlagReferences(flagName, productGitVersion) : of([])), [flagName, productGitVersion] ) ) if (references === undefined || references.length === 0) { return <> } return ( References} detail={`${references.length} potential feature flag ${pluralize( 'reference', references.length )} in sourcegraph@${productGitVersion}`} className="p-0 font-weight-normal mt-3" buttonClassName="mb-0" titleAtStart={true} defaultExpanded={false} >

{references.map(reference => (

{reference.file}

))}

) } const CREATE_FEATURE_FLAG_MUTATION = gql` mutation create($name: String!, $value: Boolean, $rolloutBasisPoints: Int) { createFeatureFlag(name: $name, value: $value, rolloutBasisPoints: $rolloutBasisPoints) { __typename } } ` const UPDATE_FEATURE_FLAG_MUTATION = gql` mutation update($name: String!, $value: Boolean, $rolloutBasisPoints: Int) { updateFeatureFlag(name: $name, value: $value, rolloutBasisPoints: $rolloutBasisPoints) { __typename } } ` const DELETE_FEATURE_FLAG_MUTATION = gql` mutation delete($name: String!) { deleteFeatureFlag(name: $name) { alwaysNil } } ` const CREATE_FEATURE_FLAG_OVERRIDE_MUTATION = gql` mutation createFeatureFlagOverride($namespace: ID!, $flagName: String!, $value: Boolean!) { createFeatureFlagOverride(namespace: $namespace, flagName: $flagName, value: $value) { id value } } ` const UPDATE_FEATURE_FLAG_OVERRIDE_MUTATION = gql` mutation updateFeatureFlagOverride($id: ID!, $value: Boolean!) { updateFeatureFlagOverride(id: $id, value: $value) { id value } } ` const DELETE_FEATURE_FLAG_OVERRIDE_MUTATION = gql` mutation deleteFeatureFlagOverride($id: ID!) { deleteFeatureFlagOverride(id: $id) { alwaysNil } } `