ToolJet/frontend/src/Editor/DataSourceManager/Postgresql.jsx

import React from 'react';
import Button from 'react-bootstrap/Button';

export const Postgresql = ({ optionchanged, createDataSource, testDataSource, options  }) => {

    return (
        <div>
            <div className="row">
                <div className="col-md-9">
                    <label className="form-label">Host</label>
                    <input type="text" className="form-control" onChange={(e) => optionchanged('host', e.target.value)} value={options.host} />
                </div>
                <div className="col-md-3">
                    <label className="form-label">Port</label>
                    <input type="text" className="form-control" onChange={(e) => optionchanged('port', e.target.value)}  value={options.port} />
                </div>
            </div>
            <div className="row mt-3">
                <div className="col-md-4">
                    <label className="form-label">Database Name</label>
                    <input type="text" className="form-control" onChange={(e) => optionchanged('database', e.target.value)}  value={options.database} />
                </div>
                <div className="col-md-4">
                    <label className="form-label">Username</label>
                    <input type="text" className="form-control" onChange={(e) => optionchanged('username', e.target.value)}  value={options.username} />
                </div>
                <div className="col-md-4">
                    <label className="form-label">Password</label>
                    <input type="text" className="form-control" onChange={(e) => optionchanged('password', e.target.value)}  value={options.password} />
                </div>
            </div>
            <div className="row mt-3">
                <div className="col">

                </div>
                <div className="col-auto">
                    <Button className="m-2" variant="light" onClick={() => hideModal()} >
                        Cancel
                    </Button>
                    <Button className="m-2" variant="success" onClick={testDataSource} >
                        Test
                    </Button>
                    <Button className="m-2" variant="primary" onClick={createDataSource}>
                        Save
                    </Button>
                </div>
            </div>
        </div>
    );
}