Function CreateConnectionModal

src/components/CreateConnectionModal.tsx:89–443

(props: Props)

};

const CreateConnectionModal = (props: Props) => {
  const { connection: editConnection, close } = props;
  const { t } = useTranslation();
  const connectionStore = useConnectionStore();
  const [connection, setConnection] = useState<Connection>(defaultConnection);
  const [showDeleteConnectionModal, setShowDeleteConnectionModal] = useState(false);
  const [sslType, setSSLType] = useState<SSLType>("preferred");
  const [selectedSSLField, setSelectedSSLField] = useState<SSLFieldType>("ca");
  const [isRequesting, setIsRequesting] = useState(false);
  const showDatabaseField = connection.engineType === Engine.PostgreSQL || connection.engineType === Engine.MSSQL;
  const isEditing = editConnection !== undefined;
  const allowSave = connection.title !== "" && connection.host !== "" && connection.username !== "";

  useEffect(() => {
    const connection = isEditing ? editConnection : defaultConnection;
    setConnection(connection);
    if (connection.ssl) {
      if (connection.ssl.ca && connection.ssl.cert && connection.ssl.key) {
        setSSLType("full");
      } else {
        setSSLType("ca-only");
      }
    }
  }, []);

  useEffect(() => {
    let ssl: SSLOptions | undefined = undefined;
    if (sslType === "ca-only") {
      ssl = {
        ca: "",
      };
    } else if (sslType === "full") {
      ssl = {
        ca: "",
        cert: "",
        key: "",
      };
    }
    setConnection((connection) => ({
      ...connection,
      ssl: ssl,
    }));
    setSelectedSSLField("ca");
  }, [sslType]);

  const setPartialConnection = (state: Partial<Connection>) => {
    setConnection({
      ...connection,
      ...state,
    });
  };

  const handleSSLFileInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    const files = event.currentTarget.files;
    if (!files || files.length === 0) {
      return;
    }