|
| 1 | +// Copyright 2020 Dgraph Labs, Inc. and Contributors |
| 2 | +// |
| 3 | +// Licensed under the Apache License, Version 2.0 (the "License"); |
| 4 | +// you may not use this file except in compliance with the License. |
| 5 | +// You may obtain a copy of the License at |
| 6 | +// |
| 7 | +// http://www.apache.org/licenses/LICENSE-2.0 |
| 8 | +// |
| 9 | +// Unless required by applicable law or agreed to in writing, software |
| 10 | +// distributed under the License is distributed on an "AS IS" BASIS, |
| 11 | +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 12 | +// See the License for the specific language governing permissions and |
| 13 | +// limitations under the License. |
| 14 | + |
| 15 | +import React, { useEffect, useState } from "react"; |
| 16 | +import Alert from "react-bootstrap/Alert"; |
| 17 | +import Button from "react-bootstrap/Button"; |
| 18 | +import Card from "react-bootstrap/Card"; |
| 19 | +import Col from "react-bootstrap/Col"; |
| 20 | +import Container from "react-bootstrap/Container"; |
| 21 | +import Form from "react-bootstrap/Form"; |
| 22 | +import ListGroup from "react-bootstrap/ListGroup"; |
| 23 | +import Modal from "react-bootstrap/Modal"; |
| 24 | +import Row from "react-bootstrap/Row"; |
| 25 | + |
| 26 | +import { useDispatch, useSelector } from "react-redux"; |
| 27 | + |
| 28 | +import { sanitizeUrl } from "../lib/helpers"; |
| 29 | +import * as actions from "../actions/connection"; |
| 30 | +import { clickSidebarUrl } from "../actions/ui"; |
| 31 | + |
| 32 | +import SidebarLoginControl from "./SidebarLoginControl"; |
| 33 | + |
| 34 | +import "./ServerConnectionModal.scss"; |
| 35 | + |
| 36 | +export default function ServerConnectionModal() { |
| 37 | + const dispatch = useDispatch(); |
| 38 | + const onHide = () => dispatch(clickSidebarUrl("")); |
| 39 | + const { serverHistory } = useSelector(state => state.connection); |
| 40 | + const [urlInput, setUrlInput] = useState(serverHistory[0].url); |
| 41 | + const [showError, setShowError] = useState(false); |
| 42 | + |
| 43 | + const urlInputSanitized = sanitizeUrl(urlInput); |
| 44 | + const activeServer = serverHistory.find(s => s.url === urlInputSanitized); |
| 45 | + |
| 46 | + const activeUrl = serverHistory[0].url; |
| 47 | + useEffect(() => { |
| 48 | + // When connected server URL is changed by any action -- update input |
| 49 | + setUrlInput(activeUrl); |
| 50 | + }, [activeUrl]); |
| 51 | + |
| 52 | + const connectTo = url => { |
| 53 | + if (!url.trim()) { |
| 54 | + setShowError(true); |
| 55 | + return; |
| 56 | + } |
| 57 | + dispatch(actions.updateUrl(url)); |
| 58 | + }; |
| 59 | + |
| 60 | + const renderSettings = () => { |
| 61 | + if (!activeServer) { |
| 62 | + return ( |
| 63 | + <Alert variant="warning"> |
| 64 | + New URL entered. Click 'Connect' before customizing{" "} |
| 65 | + <strong>{urlInputSanitized}</strong>{" "} |
| 66 | + </Alert> |
| 67 | + ); |
| 68 | + } |
| 69 | + |
| 70 | + return ( |
| 71 | + <> |
| 72 | + <Card> |
| 73 | + <Card.Body> |
| 74 | + <Card.Subtitle>ACL Account</Card.Subtitle> |
| 75 | + <SidebarLoginControl /> |
| 76 | + </Card.Body> |
| 77 | + </Card> |
| 78 | + |
| 79 | + <Card> |
| 80 | + <Card.Body> |
| 81 | + <Card.Subtitle>Connection Settings</Card.Subtitle> |
| 82 | + <Form.Group controlId="queryTimeoutInput"> |
| 83 | + <Form.Label>Query timeout (seconds):</Form.Label> |
| 84 | + <Form.Control |
| 85 | + type="number" |
| 86 | + min="1" |
| 87 | + step="1" |
| 88 | + placeholder="<timeout in seconds>" |
| 89 | + value={activeServer.queryTimeout} |
| 90 | + onChange={e => { |
| 91 | + const newTimeout = parseInt(e.target.value); |
| 92 | + if (newTimeout > 0) { |
| 93 | + dispatch( |
| 94 | + actions.setQueryTimeout( |
| 95 | + activeServer.url, |
| 96 | + newTimeout, |
| 97 | + ), |
| 98 | + ); |
| 99 | + } |
| 100 | + }} |
| 101 | + /> |
| 102 | + </Form.Group> |
| 103 | + </Card.Body> |
| 104 | + </Card> |
| 105 | + </> |
| 106 | + ); |
| 107 | + }; |
| 108 | + |
| 109 | + const alreadyConnected = urlInputSanitized === serverHistory[0].url; |
| 110 | + const urlInputBlock = ( |
| 111 | + <div className="url-input-box"> |
| 112 | + <label htmlFor="serverUrlInput">Dgraph server URL:</label> |
| 113 | + |
| 114 | + <div className="form-group"> |
| 115 | + <input |
| 116 | + id="serverUrlInput" |
| 117 | + type="text" |
| 118 | + placeholder="https://dgraph.example.com:port" |
| 119 | + value={urlInput} |
| 120 | + onChange={event => { |
| 121 | + const value = event.target.value; |
| 122 | + setShowError(value && !value.trim()); |
| 123 | + setUrlInput(value); |
| 124 | + }} |
| 125 | + style={{ width: "100%" }} |
| 126 | + /> |
| 127 | + {showError ? ( |
| 128 | + <p |
| 129 | + style={{ |
| 130 | + color: "#dc3545", |
| 131 | + marginTop: "5px", |
| 132 | + }} |
| 133 | + > |
| 134 | + The URL field cannot be empty |
| 135 | + </p> |
| 136 | + ) : ( |
| 137 | + <br /> |
| 138 | + )} |
| 139 | + <Button |
| 140 | + size="sm" |
| 141 | + variant={!alreadyConnected ? "primary" : "default"} |
| 142 | + onClick={() => connectTo(urlInput)} |
| 143 | + disabled={alreadyConnected || showError} |
| 144 | + > |
| 145 | + {alreadyConnected ? "Connected" : "Connect"} |
| 146 | + </Button> |
| 147 | + </div> |
| 148 | + </div> |
| 149 | + ); |
| 150 | + |
| 151 | + const historyDisplay = ( |
| 152 | + <> |
| 153 | + <h6>Recent Servers</h6> |
| 154 | + <ListGroup> |
| 155 | + {serverHistory.map(s => ( |
| 156 | + <ListGroup.Item |
| 157 | + key={s.url} |
| 158 | + title={s.url} |
| 159 | + active={s.url === urlInputSanitized} |
| 160 | + onClick={() => setUrlInput(sanitizeUrl(s.url))} |
| 161 | + > |
| 162 | + <p>{s.url}</p> |
| 163 | + <p className="minor">{s.version}</p> |
| 164 | + <Button |
| 165 | + disabled={s.url === serverHistory[0].url} |
| 166 | + className="btn-connect" |
| 167 | + variant={ |
| 168 | + s.url === serverHistory[0].url |
| 169 | + ? "light" |
| 170 | + : "primary" |
| 171 | + } |
| 172 | + size="sm" |
| 173 | + onClick={() => connectTo(s.url)} |
| 174 | + > |
| 175 | + {s.url === serverHistory[0].url ? ( |
| 176 | + <i className="fas fa-check-circle" /> |
| 177 | + ) : ( |
| 178 | + <i className="fas fa-chevron-circle-right" /> |
| 179 | + )} |
| 180 | + </Button> |
| 181 | + </ListGroup.Item> |
| 182 | + ))} |
| 183 | + </ListGroup> |
| 184 | + </> |
| 185 | + ); |
| 186 | + |
| 187 | + return ( |
| 188 | + <Modal centered show={true} size="lg" onHide={onHide}> |
| 189 | + <Modal.Header closeButton> |
| 190 | + <Modal.Title>Server Connection</Modal.Title> |
| 191 | + </Modal.Header> |
| 192 | + <Modal.Body className="server-connection-modal-body"> |
| 193 | + <Container> |
| 194 | + <Row className="main-row"> |
| 195 | + <Col xs={6} lg={4} className="col-history"> |
| 196 | + {historyDisplay} |
| 197 | + </Col> |
| 198 | + <Col xs={6} lg={8} className="col-props"> |
| 199 | + {urlInputBlock} |
| 200 | + <div className="settings">{renderSettings()}</div> |
| 201 | + </Col> |
| 202 | + </Row> |
| 203 | + </Container> |
| 204 | + </Modal.Body> |
| 205 | + |
| 206 | + <Modal.Footer> |
| 207 | + <Button |
| 208 | + className="pull-left" |
| 209 | + variant="secondary" |
| 210 | + onClick={onHide} |
| 211 | + > |
| 212 | + Close |
| 213 | + </Button> |
| 214 | + </Modal.Footer> |
| 215 | + </Modal> |
| 216 | + ); |
| 217 | +} |
0 commit comments