console: update manage databases UI (#499)

GitOrigin-RevId: 68f58ef
hasura · Feb 19, 2021 · da1a7a5 · da1a7a5
1 parent 88e71f3
commit da1a7a5
Show file tree

Hide file tree

Showing 10 changed files with 1,067 additions and 243 deletions.
diff --git a/console/src/components/Common/Common.scss b/console/src/components/Common/Common.scss
@@ -1420,13 +1420,46 @@ code {
   margin-top: 20px;
 }
 
+.boldTitle {
+  color: #788095;
+  font-weight: bold;
+  font-size: 14px;
+  margin-left: 2px;
+}
+
 .db_list_item {
   display: flex;
   margin-top: 20px;
+  border-bottom: 1px solid rgb(187, 187, 187);
+  padding-bottom: 12px;
+}
+
+.db_list_item:last-of-type {
+  border-bottom: none;
+}
+
+.show_connection_string {
+  display: -webkit-inline-box;
+  &:hover {
+    cursor: pointer;
+  }
+  color: #337ab7;
+}
+
+.showAdminSecret {
+  font-size: 16px;
+}
+
+.db_display_data {
+  display: flex;
+  align-items: flex-start;
+  padding-left: 95px;
+  flex-direction: column;
 }
 
 .db_list_content {
-  margin-left: 10px;
+  display: inline-flex;
+  width: 30%;
 }
 
 .data_list_container {
@@ -1435,18 +1468,98 @@ code {
 }
 
 .db_item_actions {
-  width: 110px;
-  display: flex;
-  max-width: 120px;
-  justify-content: space-between;
+  width: 14%;
   margin-right: 10px;
 }
 
-.boldTitle {
-  color: #788095;
+.text_red {
+  color: rgb(192, 32, 32);
+}
+
+.connect_db_content {
+  display: flex;
+  flex-direction: column;
+}
+
+.connect_db_header {
   font-weight: bold;
+  font-size: medium;
+}
+
+.connect_db_radios {
+  display: flex;
+  width: 70%;
+  align-items: center;
+  height: auto;
+  justify-content: flex-start;
+  padding-top: 10px;
+  padding-bottom: 10px;
   font-size: 14px;
-  margin-left: 2px;
+  input[type='radio'] {
+    margin-right: 4px;
+  }
+}
+
+.connect_db_radio_label {
+  margin-right: 24px;
+}
+
+.connect_form_layout {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+}
+
+.connect_db_input_label {
+  display: inline-block;
+  max-width: 100%;
+  padding-bottom: 10px;
+  font-weight: 700;
+}
+
+.connect_db_input_pad {
+  margin-bottom: 16px;
+}
+
+.add_button_layout {
+  width: 40%;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+  align-self: flex-end;
+}
+
+.connection_settings_layout {
+  width: 100%;
+  margin: 10px 0px;
+}
+
+.connection_settings_header {
+  font-weight: bold;
+  border: none;
+  outline: none;
+}
+
+.connection_settings_form {
+  display: flex;
+  flex-direction: row;
+  margin-top: 12px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.connnection_settings_form_input_layout {
+  display: flex;
+  flex-direction: column;
+
+  label {
+    margin-bottom: 10px !important;
+  }
+}
+
+.connnection_settings_form_input {
+  width: 65%;
 }
 
 /* container height subtracting top header and bottom scroll bar */

diff --git a/console/src/components/Common/LabeledInput/index.tsx b/console/src/components/Common/LabeledInput/index.tsx
@@ -0,0 +1,20 @@
+import React, { InputHTMLAttributes } from 'react';
+import styles from '../../Common/Common.scss';
+
+interface LabeledInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  labelInBold?: boolean;
+}
+
+export const LabeledInput: React.FC<LabeledInputProps> = props => (
+  <>
+    <label className={props.labelInBold ? '' : styles.connect_db_input_label}>
+      {props?.labelInBold ? <b>{props.label}</b> : props.label}
+    </label>
+    <input
+      type="text"
+      className={`form-control ${styles.connect_db_input_pad}`}
+      {...props}
+    />
+  </>
+);
diff --git a/console/src/components/Services/Data/DataRouter.js b/console/src/components/Services/Data/DataRouter.js
@@ -29,6 +29,7 @@ import {
 import { UPDATE_CURRENT_DATA_SOURCE } from './DataActions';
 import { exportMetadata } from '../../../metadata/actions';
 import ConnectedDataSourceContainer from './DataSourceContainer';
+import ConnectDatabase from './DataSources/ConnectDatabase';
 
 const makeDataRouter = (
   connect,
@@ -48,6 +49,8 @@ const makeDataRouter = (
       <IndexRedirect to="manage" />
       <Route path="manage" component={ConnectedDatabaseManagePage} />
       <Route path="schema/manage" component={ConnectedDatabaseManagePage} />
+      <Route path="manage/connect" component={ConnectDatabase} />
+      <Route path="manage/edit/:databaseName" component={ConnectDatabase} />
       <Route path=":source" component={ConnectedDataSourceContainer}>
         <Route path="sql" component={rawSQLConnector(connect)} />
         <Route path="schema">