Data connector type as dropdown, write-only (#237)

* Data connector type as dropdown, write-only

* Dropdown overflow

* Fixes

* Fix position of dropdown

* No vendor needed, unique data source name

* Fixes for names of data sources and servers

Author: eatonphil

ui/ConnectorList.tsx

@@ -2,11 +2,57 @@ import * as React from 'react';
 import {
   ConnectorInfo,
   DatabaseConnectorInfo,
+  DatabaseConnectorInfoType,
   ProjectState,
 } from '../shared/state';
 import { Button } from './components/Button';
+import { Dropdown } from './components/Dropdown';
 import { Connector } from './Connector';
-import { VENDORS } from './connectors';
+import { VENDORS, VENDOR_GROUPS } from './connectors';
+
+function NewConnector({
+  onClick,
+}: {
+  onClick: (type: DatabaseConnectorInfoType) => void;
+}) {
+  const groups = VENDOR_GROUPS.map((g) => ({
+    name: g.group,
+    id: g.group,
+    items: g.vendors.map((id) => ({
+      render(close: () => void) {
+        return (
+          <Button
+            onClick={() => {
+              onClick(id);
+              close();
+            }}
+          >
+            {VENDORS[id].name}
+          </Button>
+        );
+      },
+      id,
+    })),
+  }));
+
+  return (
+    <Dropdown
+      className="add-panel"
+      trigger={(open) => (
+        <Button
+          onClick={(e) => {
+            e.preventDefault();
+            open();
+          }}
+        >
+          Add Panel
+        </Button>
+      )}
+      title="Add Panel"
+      groups={groups}
+    />
+  );
+}
 
 export function ConnectorList({
   state,
@@ -51,14 +97,21 @@ export function ConnectorList({
           ))}
         </React.Fragment>
       ))}
-      <div className="text-center">
-        <Button
-          onClick={() => {
-            updateConnector(new DatabaseConnectorInfo(), -1, true);
+      <div className="new-panel">
+        <NewConnector
+          onClick={(type: DatabaseConnectorInfoType) => {
+            updateConnector(
+              new DatabaseConnectorInfo({
+                type,
+                name: `Untitled ${VENDORS[type].name} Data Source #${
+                  state.connectors?.length + 1
+                }`,
+              }),
+              -1,
+              true
+            );
           }}
-        >
-          Add Data Source
-        </Button>
+        />
       </div>
     </div>
   );

ui/DatabaseConnector.tsx

@@ -1,11 +1,6 @@
 import * as React from 'react';
-import {
-  DatabaseConnectorInfo,
-  DatabaseConnectorInfoType,
-} from '../shared/state';
-import { FormGroup } from './components/FormGroup';
-import { Select } from './components/Select';
-import { VENDORS, VENDOR_GROUPS } from './connectors';
+import { DatabaseConnectorInfo } from '../shared/state';
+import { VENDORS } from './connectors';
 import { ProjectContext } from './state';
 
 export function DatabaseConnector({
@@ -18,36 +13,10 @@ export function DatabaseConnector({
   const { servers } = React.useContext(ProjectContext).state;
   const { details: Details } = VENDORS[connector.database.type];
   return (
-    <React.Fragment>
-      <FormGroup>
-        <div className="form-row">
-          <Select
-            label="Vendor"
-            value={connector.database.type}
-            onChange={(value: string) => {
-              connector.database.type = value as DatabaseConnectorInfoType;
-              updateConnector(connector);
-            }}
-          >
-            {VENDOR_GROUPS.map((group) => (
-              <optgroup
-                key={group.group}
-                label={group.group}
-                children={group.vendors.map((v) => (
-                  <option key={v} value={v}>
-                    {VENDORS[v].name}
-                  </option>
-                ))}
-              />
-            ))}
-          </Select>
-        </div>
-      </FormGroup>
-      <Details
-        connector={connector}
-        updateConnector={updateConnector}
-        servers={servers}
-      />
-    </React.Fragment>
+    <Details
+      connector={connector}
+      updateConnector={updateConnector}
+      servers={servers}
+    />
   );
 }

ui/ServerList.tsx

@@ -26,7 +26,13 @@ export function ServerList({
       <div className="text-center">
         <Button
           onClick={() => {
-            updateServer(new ServerInfo(), -1, true);
+            updateServer(
+              new ServerInfo({
+                name: `Untitled Server #${state.servers?.length + 1}`,
+              }),
+              -1,
+              true
+            );
           }}
         >
           Add Server

ui/connectors/BigQueryDetails.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { DatabaseConnectorInfo } from '../../shared/state';
+import { FormGroup } from '../components/FormGroup';
 import { ApiKey } from './ApiKey';
 import { Database } from './Database';
 
@@ -12,16 +13,18 @@ export function BigQueryDetails({
 }) {
   return (
     <React.Fragment>
-      <Database
-        label="Project ID"
-        connector={connector}
-        updateConnector={updateConnector}
-      />
-      <ApiKey
-        label="Service Account JSON"
-        connector={connector}
-        updateConnector={updateConnector}
-      />
+      <FormGroup>
+        <Database
+          label="Project ID"
+          connector={connector}
+          updateConnector={updateConnector}
+        />
+        <ApiKey
+          label="Service Account JSON"
+          connector={connector}
+          updateConnector={updateConnector}
+        />
+      </FormGroup>
     </React.Fragment>
   );
 }

ui/style.css

@@ -437,9 +437,12 @@ input + input[type='file'] {
   }
 }
 
+.input input:disabled,
+.input:disabled,
 .button:not(.button--icon):disabled,
 .button:not(.button--icon):disabled:hover {
-  background: #ccc;
+  background: #ccc !important;
+  box-shadow: none !important;
   color: #999;
   cursor: not-allowed;
   pointer-events: all !important;
@@ -1183,6 +1186,8 @@ tbody tr {
   background: var(--background-light);
   width: 300px;
   box-shadow: 0 1px 3px 0 #aaa;
+  max-height: 500px;
+  overflow: auto;
 }
 
 .dropdown-section:not(:last-of-type) {