Repository: apache/superset
File: superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx (TypeScript)

Code before:
                >
                  <div className="input-container">
                    <Checkbox
                      id="allow_file_upload"
                      name="allow_file_upload"
                      indeterminate={false}
                      checked={!!db?.allow_file_upload}
                      onChange={onInputChange}
                    >
                      {t('Allow file uploads to database')}
                    </Checkbox>
                  </div>
                </StyledInputContainer>
              )}
              {isFileUploadSupportedByEngine && !!db?.allow_file_upload && (
                <StyledInputContainer css={no_margin_bottom}>
                  <div className="control-label">
                    {t('Schemas allowed for File upload')}
                  </div>
                  <div className="input-container">
                    <Input
                      type="text"
                      name="schemas_allowed_for_file_upload"
                      value={schemasText}
                      placeholder="schema1,schema2"
                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                        setSchemasText(e.target.value)
                      }
                      onBlur={() =>
                        onExtraInputChange({
                          target: {
                            type: 'text',
                            name: 'schemas_allowed_for_file_upload',
                            value: schemasText,
                          },
                        })
                      }
                    />
                  </div>
                  <div className="helper">
                    {t(
                      'A comma-separated list of schemas that files are allowed to upload to.',
                    )}
                  </div>
                </StyledInputContainer>
              )}
            </>
          ),
        },
        ...(extraExtension && ExtraExtensionComponent && ExtensionDescription
          ? [

Review comment (suggestion):
```suggestion
                      onChange={(e) =>
```

Code after:
                          },
                        } as ChangeEvent<HTMLInputElement>)
                      }
                    />
                  </div>
                  <div className="helper">
                    {t(
                      'A comma-separated list of schemas that files are allowed to upload to.',
                    )}
                  </div>
                </StyledInputContainer>
              )}
              <StyledInputContainer>
                <div className="control-label">{t('Secure extra')}</div>
                <div className="input-container">
                  <StyledJsonEditor
                    name="masked_encrypted_extra"
                    value={db?.masked_encrypted_extra || ''}
                    placeholder={t('Secure extra')}
                    onChange={(json: string) =>
                      onEditorChange({ json, name: 'masked_encrypted_extra' })
                    }
                    width="100%"
                    height="160px"
                    annotations={secureExtraAnnotations}
                  />
                </div>
                <div className="helper">
                  <div>
                    {t(
                      'JSON string containing additional connection configuration. ' +
                        'This is used to provide connection information for systems ' +
                        'like Hive, Presto and BigQuery which do not conform to the ' +
                        'username:password syntax normally used by SQLAlchemy.',
                    )}
                  </div>
                </div>
              </StyledInputContainer>
              <StyledInputContainer>
                <div className="control-label">{t('Root certificate')}</div>
                <div className="input-container">
                  <Input.TextArea
                    name="server_cert"
                    value={db?.server_cert || ''}
                    placeholder={t('Enter CA_BUNDLE')}
                    onChange={onTextChange}
                  />
                </div>
                <div className="helper">
                  {t(
                    'Optional CA_BUNDLE contents to validate HTTPS requests. Only ' +