import { css } from '@emotion/css'; import React, { useEffect, useState } from 'react'; import { UseFormReturn, Controller } from 'react-hook-form'; import { Checkbox, Field, Input, SecretInput, Select, Switch, useTheme2 } from '@grafana/ui'; import { fieldMap } from './fields'; import { SSOProviderDTO, SSOSettingsField } from './types'; import { isSelectableValue } from './utils/guards'; interface FieldRendererProps extends Pick, 'register' | 'control' | 'watch' | 'setValue' | 'unregister'> { field: SSOSettingsField; errors: UseFormReturn['formState']['errors']; secretConfigured: boolean; provider: string; } export const FieldRenderer = ({ field, register, errors, watch, setValue, control, unregister, secretConfigured, provider, }: FieldRendererProps) => { const [isSecretConfigured, setIsSecretConfigured] = useState(secretConfigured); const isDependantField = typeof field !== 'string'; const name = isDependantField ? field.name : field; const parentValue = isDependantField ? watch(field.dependsOn) : null; const fieldData = fieldMap(provider)[name]; const theme = useTheme2(); // Unregister a field that depends on a toggle to clear its data useEffect(() => { if (isDependantField) { if (!parentValue) { unregister(name); } } }, [unregister, name, parentValue, isDependantField]); if (!field) { console.log('missing field:', name); return null; } if (!!fieldData.hidden) { return null; } // Dependant field means the field depends on another field's value and shouldn't be rendered if the parent field is false if (isDependantField) { const parentValue = watch(field.dependsOn); if (!parentValue) { return null; } } const fieldProps = { label: fieldData.label, required: !!fieldData.validation?.required, invalid: !!errors[name], error: fieldData.validation?.message, key: name, description: fieldData.description, defaultValue: fieldData.defaultValue?.value, }; switch (fieldData.type) { case 'text': return ( ); case 'secret': return ( ( { setIsSecretConfigured(false); setValue(name, ''); }} /> )} /> ); case 'select': const watchOptions = watch(name); let options = fieldData.options; if (!fieldData.options?.length) { options = isSelectableValue(watchOptions) ? watchOptions : []; } return ( { return (