superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/index.tsx

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import { SupersetTheme } from '@superset-ui/core';
import { Col, Row } from 'src/components';
import { Form } from 'src/components/Form';
import { FORM_FIELD_MAP } from './constants';
import { formScrollableStyles, validatedFormStyles } from '../styles';
import { DatabaseConnectionFormProps, ParameterFieldSchema } from '../../types';
import { GenericField } from './GenericField';

interface ParametersSchema {
  order: string[];
  properties: {
    [key: string]: ParameterFieldSchema;
  };
  required?: string[];
}

const DatabaseConnectionForm = ({
  dbModel,
  db,
  editNewDb,
  getValidation,
  isEditMode = false,
  onAddTableCatalog,
  onChange,
  onExtraInputChange,
  onEncryptedExtraInputChange,
  onParametersChange,
  onParametersUploadFileChange,
  onQueryChange,
  onRemoveTableCatalog,
  sslForced,
  validationErrors,
  clearValidationErrors,
}: DatabaseConnectionFormProps) => {
  const parameters = dbModel?.parameters as ParametersSchema;

  let orderedEntries = Object.entries(parameters?.properties || []).sort(
    ([keyA], [keyB]) =>
      parameters.order.indexOf(keyA) - parameters.order.indexOf(keyB),
  );

  // database name should come first
  orderedEntries = [
    ['database_name', { title: 'Name', type: 'string' }],
    ...orderedEntries,
  ];

  const components = orderedEntries.map(([key, value]) => {
    const FormComponent = FORM_FIELD_MAP[key] || GenericField;

    return (
      <Col span={(value?.['x-width'] || 1) * 24}>
        {FormComponent({
          required: parameters.required?.includes(key),
          changeMethods: {
            onParametersChange,
            onChange,
            onQueryChange,
            onParametersUploadFileChange,
            onAddTableCatalog,
            onRemoveTableCatalog,
            onExtraInputChange,
            onEncryptedExtraInputChange,
          },
          validationErrors,
          getValidation,
          clearValidationErrors,
          db,
          key,
          field: key,
          isEditMode,
          sslForced,
          editNewDb,
          parameter: value,
        })}
      </Col>
    );
  });

  return (
    <Form>
      <div
        css={(theme: SupersetTheme) => [
          formScrollableStyles,
          validatedFormStyles(theme),
        ]}
      >
        <Row gutter={[4, 4]}>{components}</Row>
      </div>
    </Form>
  );
};

export default DatabaseConnectionForm;