Fix connection editor

gessfred · Jan 20, 2024 · 4d76d8d · 4d76d8d
1 parent 4d3bfca
commit 4d76d8d
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 231 deletions.
diff --git a/app/src/App.jsx b/app/src/App.jsx
@@ -59,7 +59,7 @@ function API(url, user) {
             json: callback
           })
         },
-        write: (datasource) => post("/datasources", Object.assign({}, datasource, {owner: user.user_email}))
+        write: (datasource, hook) => post("/datasources", Object.assign({}, datasource, {owner: user.user_email}), hook)
       },
       notebooks: {
         read: (callback) => {

diff --git a/app/src/components/DataSourceGrid.jsx b/app/src/components/DataSourceGrid.jsx
@@ -1,4 +1,5 @@
 import { CodeBracketIcon, AdjustmentsHorizontalIcon } from '@heroicons/react/20/solid'
+import { engines } from '../pages/ConnectionEditor'
 
 const people = [
   {
@@ -13,47 +14,59 @@ const people = [
   // More people...
 ]
 
-export default function DataSourceGrid({datasources, createWorksheet, editDataSource}) {
+
+
+function parseConnectionString(connectionString) {
+  return Object.fromEntries(connectionString?.split(' ').map(kv => kv.split('=')))
+}
+
+function DatasourceCard({ds, createWorksheet, editDataSource}) {
+  const connection = parseConnectionString(ds.connection_string)
   return (
-    <ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-      {(datasources || []).map((ds) => (
-        <li key={ds} className="col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow">
-          <div className="flex w-full items-center justify-between space-x-6 p-6">
-            <div className="flex-1 truncate">
-              <div className="flex items-center space-x-3">
-                <h3 className="truncate text-sm font-medium text-gray-900">{ds.name}</h3>
-                <span className="inline-flex flex-shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
-                  {ds.name}
-                </span>
-              </div>
-              <p className="mt-1 truncate text-sm text-gray-500">{ds.name}</p>
-            </div>
-            <img className="h-10 w-10 flex-shrink-0 rounded-full bg-gray-300" src={ds.imageUrl} alt="" />
+    <li key={ds} className="col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow">
+      <div className="flex w-full items-center justify-between space-x-6 p-6">
+        <div className="flex-1 truncate">
+          <div className="flex items-center space-x-3">
+            <h3 className="truncate text-sm font-medium text-gray-900">{ds.name}</h3>
+            <span className="inline-flex flex-shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
+              {connection.user}
+            </span>
+          </div>
+          <p className="mt-1 truncate text-sm text-gray-500">{connection.dbname}</p>
+        </div>
+        <img className="h-10 w-10 flex-shrink-0 rounded-full bg-gray-300" src={engines[ds.engine]?.avatar} alt="" />
+      </div>
+      <div>
+        <div className="-mt-px flex divide-x divide-gray-200">
+          <div className="flex w-0 flex-1">
+            <button
+              className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900"
+              onClick={() => createWorksheet(ds)}
+            >
+              <CodeBracketIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+              Notebook
+            </button>
           </div>
-          <div>
-            <div className="-mt-px flex divide-x divide-gray-200">
-              <div className="flex w-0 flex-1">
-                <button
-                  className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900"
-                  onClick={() => createWorksheet(ds)}
-                >
-                  <CodeBracketIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                  Worksheet
-                </button>
-              </div>
-              <div className="-ml-px flex w-0 flex-1">
-                <button
-                  className="relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-gray-900"
-                  onClick={editDataSource}
-                >
-                  <AdjustmentsHorizontalIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                  Edit
-                </button>
-              </div>
-            </div>
+          <div className="-ml-px flex w-0 flex-1">
+            <button
+              className="relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-gray-900"
+              onClick={editDataSource}
+            >
+              <AdjustmentsHorizontalIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+              Edit
+            </button>
           </div>
-        </li>
-      ))}
+        </div>
+      </div>
+    </li>
+  )
+}
+
+export default function DataSourceGrid({datasources, createWorksheet, editDataSource}) {
+
+  return (
+    <ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      {(datasources || []).map((ds) => <DatasourceCard ds={ds} createWorksheet={createWorksheet} editDataSource={editDataSource} />)}
     </ul>
   )
 }
diff --git a/app/src/pages/ConnectionEditor.jsx b/app/src/pages/ConnectionEditor.jsx
@@ -4,39 +4,15 @@ import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
 import Dropdown from '../components/Dropdown'
 import uniqid from 'uniqid'
 
-const engines = [
-  {
-    id: 1,
+const engines = {
+  postgres: {
+    id: 'postgres',
     name: 'PostgresSQL',
-    avatar:
-      'https://wiki.postgresql.org/images/3/30/PostgreSQL_logo.3colors.120x120.png',
-  },
-  {
-    id: 2,
-    name: 'Arlene Mccoy',
-    avatar:
-      'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-  {
-    id: 3,
-    name: 'Devon Webb',
-    avatar:
-      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80',
-  },
-  {
-    id: 4,
-    name: 'Tom Cook',
-    avatar:
-      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-  {
-    id: 5,
-    name: 'Tanya Fox',
-    avatar:
-      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+    avatar: 'https://wiki.postgresql.org/images/3/30/PostgreSQL_logo.3colors.120x120.png',
   }
-]
+}
 
+export { engines }
 
 export function Input({name, value, setValue}) {
     const hint = false
@@ -63,13 +39,13 @@ export function Input({name, value, setValue}) {
 }
 
 export default function ConnectionEditor({api, show, onHide, onCreate}) {
-  const [open, setOpen] = useState(true)
-  const [connection, setConnection] = useState({engine: engines[0]})
+  const [connection, setConnection] = useState({engine: Object.values(engines)[0]})
   const cancelButtonRef = useRef(null)
   const setConnectionProperty = property => value => setConnection(prev => Object.assign({}, prev, {[property]: value}))
   const createConnection = () => {
-    api.userdata.datasources.write(Object.assign({}, connection, {datasource_id: uniqid()}))
+    api.userdata.datasources.write(Object.assign({}, connection, {datasource_id: uniqid()}, {engine: connection.engine.id}), {success: () => onCreate()})
   }
+  console.log('connection', connection)
   return (
     <Transition.Root show={show} as={Fragment}>
       <Dialog as="div" className="relative z-10" initialFocus={cancelButtonRef} onClose={onHide}>
@@ -107,7 +83,7 @@ export default function ConnectionEditor({api, show, onHide, onCreate}) {
                         New connection
                       </Dialog.Title>
                       <div className="mt-2">
-                        <Dropdown name="Engine" items={engines} selected={connection.engine} setSelected={setConnectionProperty('engine')} />
+                        <Dropdown name="Engine" items={Object.values(engines)} selected={connection.engine} setSelected={setConnectionProperty('engine')} />
                         <Input name="Name" value={connection.name} setValue={setConnectionProperty('name')} />
                         <Input name="Connection String" value={connection.connection_string} setValue={setConnectionProperty('connection_string')} />
                       </div>