From 3a010a00a75f1329d473b9bc028c8a08e54d9b32 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Mon, 2 Oct 2023 20:52:26 +1000
Subject: [PATCH] Implement connector button and context menu action. (#7891)

- Closes https://github.com/enso-org/cloud-v2/issues/686

# Important Notes
For now they use the backend endpoints for secrets.
---
 app/ide-desktop/lib/assets/connector.svg      |   5 +
 app/ide-desktop/lib/assets/secret.svg         |   5 -
 .../dashboard/components/assetNameColumn.tsx  |   4 +-
 .../src/dashboard/components/assetRow.tsx     |   2 +-
 .../src/dashboard/components/assetsTable.tsx  |   4 +-
 .../components/confirmDeleteModal.tsx         |  16 +--
 ...NameColumn.tsx => connectorNameColumn.tsx} |  25 ++--
 .../components/directoryNameColumn.tsx        |   2 +-
 .../src/dashboard/components/drive.tsx        |  14 +++
 .../src/dashboard/components/driveBar.tsx     |  21 +++-
 .../dashboard/components/fileNameColumn.tsx   |   2 +-
 .../components/globalContextMenu.tsx          |  19 +++-
 .../src/dashboard/components/input.tsx        |   2 +-
 .../components/newDataConnectorModal.tsx      | 107 ++++++++++++++++++
 .../src/dashboard/components/projectIcon.tsx  |   2 +-
 .../components/projectNameColumn.tsx          |   2 +-
 .../src/dashboard/events/assetEvent.ts        |   9 +-
 .../src/dashboard/events/assetListEvent.ts    |   9 +-
 18 files changed, 197 insertions(+), 53 deletions(-)
 create mode 100644 app/ide-desktop/lib/assets/connector.svg
 delete mode 100644 app/ide-desktop/lib/assets/secret.svg
 rename app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/{secretNameColumn.tsx => connectorNameColumn.tsx} (88%)
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/newDataConnectorModal.tsx

diff --git a/app/ide-desktop/lib/assets/connector.svg b/app/ide-desktop/lib/assets/connector.svg
new file mode 100644
index 000000000000..ce56723a8c8f
--- /dev/null
+++ b/app/ide-desktop/lib/assets/connector.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M5 3C2.23858 3 0 5.23858 0 8C0 10.7614 2.23858 13 5 13H7V9H11C11.5523 9 12 8.55228 12 8C12 7.44772 11.5523 7 11 7L7 7V3H5ZM6.99998 7V4.99999H4.99998C3.34313 4.99999 1.99998 6.34314 1.99998 7.99999C1.99998 9.65685 3.34313 11 4.99998 11H6.99998V9H5C4.44772 9 4 8.55228 4 8C4 7.44771 4.44772 7 5 7H6.99998ZM11 13C13.7614 13 16 10.7614 16 8C16 5.23858 13.7614 3 11 3H9V5L11 5C12.6569 5 14 6.34315 14 8C14 9.65685 12.6569 11 11 11H9V13H11Z"
+        fill="#9F24EA" />
+</svg>
\ No newline at end of file
diff --git a/app/ide-desktop/lib/assets/secret.svg b/app/ide-desktop/lib/assets/secret.svg
deleted file mode 100644
index d77454027db6..000000000000
--- a/app/ide-desktop/lib/assets/secret.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M10.3 13a4 4 0 1 1 0-2h10a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0v-2h-2v2a1 1 0 0 1-2 0v-2ZM3.5 12a1 1 0 1 1 2 0a1 1 0 1 1-2 0"
-        fill="#3e515fe5" fill-rule="evenodd" />
-</svg>
\ No newline at end of file
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetNameColumn.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetNameColumn.tsx
index 14e20521fa60..3ec16fffda79 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetNameColumn.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetNameColumn.tsx
@@ -4,10 +4,10 @@ import * as React from 'react'
 import * as backendModule from '../backend'
 
 import * as column from '../column'
+import ConnectorNameColumn from './connectorNameColumn'
 import DirectoryNameColumn from './directoryNameColumn'
 import FileNameColumn from './fileNameColumn'
 import ProjectNameColumn from './projectNameColumn'
-import SecretNameColumn from './secretNameColumn'
 
 // =================
 // === AssetName ===
@@ -30,7 +30,7 @@ export default function AssetNameColumn(props: AssetNameColumnProps) {
             return <FileNameColumn {...props} />
         }
         case backendModule.AssetType.secret: {
-            return <SecretNameColumn {...props} />
+            return <ConnectorNameColumn {...props} />
         }
         case backendModule.AssetType.specialLoading:
         case backendModule.AssetType.specialEmpty: {
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetRow.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetRow.tsx
index d72a94485b6d..65a2cebd4a68 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetRow.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetRow.tsx
@@ -147,7 +147,7 @@ export default function AssetRow(props: AssetRowProps) {
             case assetEventModule.AssetEventType.newProject:
             case assetEventModule.AssetEventType.newFolder:
             case assetEventModule.AssetEventType.uploadFiles:
-            case assetEventModule.AssetEventType.newSecret:
+            case assetEventModule.AssetEventType.newDataConnector:
             case assetEventModule.AssetEventType.openProject:
             case assetEventModule.AssetEventType.closeProject:
             case assetEventModule.AssetEventType.cancelOpeningAllProjects: {
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetsTable.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetsTable.tsx
index 01b3a55bcdab..b1a7b9a526de 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetsTable.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetsTable.tsx
@@ -816,7 +816,7 @@ export default function AssetsTable(props: AssetsTableProps) {
                 })
                 break
             }
-            case assetListEventModule.AssetListEventType.newSecret: {
+            case assetListEventModule.AssetListEventType.newDataConnector: {
                 const placeholderItem: backendModule.SecretAsset = {
                     id: backendModule.SecretId(uniqueString.uniqueString()),
                     title: event.name,
@@ -854,7 +854,7 @@ export default function AssetsTable(props: AssetsTableProps) {
                           )
                 )
                 dispatchAssetEvent({
-                    type: assetEventModule.AssetEventType.newSecret,
+                    type: assetEventModule.AssetEventType.newDataConnector,
                     placeholderId: placeholderItem.id,
                     value: event.value,
                 })
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx
index 1161b3cecb2f..ee7e641650de 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx
@@ -8,9 +8,9 @@ import * as modalProvider from '../../providers/modal'
 
 import Modal from './modal'
 
-// =================
-// === Component ===
-// =================
+// ==========================
+// === ConfirmDeleteModal ===
+// ==========================
 
 /** Props for a {@link ConfirmDeleteModal}. */
 export interface ConfirmDeleteModalProps {
@@ -61,19 +61,19 @@ export default function ConfirmDeleteModal(props: ConfirmDeleteModalProps) {
                         // delete an important asset.
                         onSubmit()
                     }}
-                    className="relative shadow-soft rounded-2xl w-96 px-4 py-2"
+                    className="relative flex flex-col rounded-2xl gap-2 w-96 px-4 p-2"
                 >
-                    <div className="m-2">Are you sure you want to delete {description}?</div>
-                    <div className="m-1">
+                    <div>Are you sure you want to delete {description}?</div>
+                    <div className="flex gap-2">
                         <button
                             type="submit"
-                            className="hover:cursor-pointer inline-block text-white bg-delete rounded-full px-4 py-1 m-1"
+                            className="hover:cursor-pointer inline-block text-white bg-delete rounded-full px-4 py-1"
                         >
                             Delete
                         </button>
                         <button
                             type="button"
-                            className="hover:cursor-pointer inline-block bg-frame-selected rounded-full px-4 py-1 m-1"
+                            className="hover:cursor-pointer inline-block bg-frame-selected rounded-full px-4 py-1"
                             onClick={unsetModal}
                         >
                             Cancel
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretNameColumn.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/connectorNameColumn.tsx
similarity index 88%
rename from app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretNameColumn.tsx
rename to app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/connectorNameColumn.tsx
index e22b7f15ae6a..67158a455510 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretNameColumn.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/connectorNameColumn.tsx
@@ -1,7 +1,7 @@
 /** @file The icon and name of a {@link backendModule.SecretAsset}. */
 import * as React from 'react'
 
-import SecretIcon from 'enso-assets/secret.svg'
+import ConnectorIcon from 'enso-assets/connector.svg'
 
 import * as assetEventModule from '../events/assetEvent'
 import * as assetListEventModule from '../events/assetListEvent'
@@ -17,19 +17,18 @@ import * as shortcutsProvider from '../../providers/shortcuts'
 
 import * as column from '../column'
 import EditableSpan from './editableSpan'
-import SvgMask from '../../authentication/components/svgMask'
 
-// ==================
-// === SecretName ===
-// ==================
+// =====================
+// === ConnectorName ===
+// =====================
 
-/** Props for a {@link SecretNameColumn}. */
-export interface SecretNameColumnProps extends column.AssetColumnProps {}
+/** Props for a {@link ConnectorNameColumn}. */
+export interface ConnectorNameColumnProps extends column.AssetColumnProps {}
 
 /** The icon and name of a {@link backendModule.SecretAsset}.
  * @throws {Error} when the asset is not a {@link backendModule.SecretAsset}.
  * This should never happen. */
-export default function SecretNameColumn(props: SecretNameColumnProps) {
+export default function ConnectorNameColumn(props: ConnectorNameColumnProps) {
     const {
         item,
         setItem,
@@ -44,7 +43,7 @@ export default function SecretNameColumn(props: SecretNameColumnProps) {
     const asset = item.item
     if (asset.type !== backendModule.AssetType.secret) {
         // eslint-disable-next-line no-restricted-syntax
-        throw new Error('`SecretNameColumn` can only display secret assets.')
+        throw new Error('`ConnectorNameColumn` can only display data connector assets.')
     }
     const setAsset = assetTreeNode.useSetAsset(asset, setItem)
 
@@ -72,10 +71,10 @@ export default function SecretNameColumn(props: SecretNameColumnProps) {
                 // `AssetRow`.
                 break
             }
-            case assetEventModule.AssetEventType.newSecret: {
+            case assetEventModule.AssetEventType.newDataConnector: {
                 if (item.key === event.placeholderId) {
                     if (backend.type !== backendModule.BackendType.remote) {
-                        toastAndLog('Secrets cannot be created on the local backend')
+                        toastAndLog('Data connectors cannot be created on the local backend')
                     } else {
                         rowState.setPresence(presence.Presence.inserting)
                         try {
@@ -94,7 +93,7 @@ export default function SecretNameColumn(props: SecretNameColumnProps) {
                                 type: assetListEventModule.AssetListEventType.delete,
                                 key: item.key,
                             })
-                            toastAndLog('Error creating new secret', error)
+                            toastAndLog('Error creating new data connector', error)
                         }
                     }
                 }
@@ -126,7 +125,7 @@ export default function SecretNameColumn(props: SecretNameColumnProps) {
                 }
             }}
         >
-            <SvgMask src={SecretIcon} />
+            <img src={ConnectorIcon} className="m-1" />
             <EditableSpan
                 editable={false}
                 onSubmit={async newTitle => {
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoryNameColumn.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoryNameColumn.tsx
index 543c822d1292..ba81d6d8b864 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoryNameColumn.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoryNameColumn.tsx
@@ -85,7 +85,7 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
         switch (event.type) {
             case assetEventModule.AssetEventType.newProject:
             case assetEventModule.AssetEventType.uploadFiles:
-            case assetEventModule.AssetEventType.newSecret:
+            case assetEventModule.AssetEventType.newDataConnector:
             case assetEventModule.AssetEventType.openProject:
             case assetEventModule.AssetEventType.closeProject:
             case assetEventModule.AssetEventType.cancelOpeningAllProjects:
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/drive.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/drive.tsx
index 951a7722c530..12051b96e793 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/drive.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/drive.tsx
@@ -117,6 +117,19 @@ export default function Drive(props: DriveProps) {
         })
     }, [/* should never change */ dispatchAssetListEvent])
 
+    const doCreateDataConnector = React.useCallback(
+        (name: string, value: string) => {
+            dispatchAssetListEvent({
+                type: assetListEventModule.AssetListEventType.newDataConnector,
+                parentKey: null,
+                parentId: null,
+                name,
+                value,
+            })
+        },
+        [/* should never change */ dispatchAssetListEvent]
+    )
+
     React.useEffect(() => {
         const onDragEnter = (event: DragEvent) => {
             if (
@@ -176,6 +189,7 @@ export default function Drive(props: DriveProps) {
                     doCreateProject={doCreateProject}
                     doUploadFiles={doUploadFiles}
                     doCreateDirectory={doCreateDirectory}
+                    doCreateDataConnector={doCreateDataConnector}
                     dispatchAssetEvent={dispatchAssetEvent}
                 />
             </div>
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/driveBar.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/driveBar.tsx
index 72a40e0a4372..0fb4539e4bc7 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/driveBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/driveBar.tsx
@@ -16,6 +16,7 @@ import * as shortcutsProvider from '../../providers/shortcuts'
 
 import * as categorySwitcher from './categorySwitcher'
 import Button from './button'
+import NewDataConnectorModal from './newDataConnectorModal'
 
 // ================
 // === DriveBar ===
@@ -26,6 +27,7 @@ export interface DriveBarProps {
     category: categorySwitcher.Category
     doCreateProject: (templateId: string | null) => void
     doCreateDirectory: () => void
+    doCreateDataConnector: (name: string, value: string) => void
     doUploadFiles: (files: File[]) => void
     dispatchAssetEvent: (event: assetEventModule.AssetEvent) => void
 }
@@ -33,10 +35,16 @@ export interface DriveBarProps {
 /** Displays the current directory path and permissions, upload and download buttons,
  * and a column display mode switcher. */
 export default function DriveBar(props: DriveBarProps) {
-    const { category, doCreateProject, doCreateDirectory, doUploadFiles, dispatchAssetEvent } =
-        props
+    const {
+        category,
+        doCreateProject,
+        doCreateDirectory,
+        doCreateDataConnector,
+        doUploadFiles,
+        dispatchAssetEvent,
+    } = props
     const { backend } = backendProvider.useBackend()
-    const { unsetModal } = modalProvider.useSetModal()
+    const { setModal, unsetModal } = modalProvider.useSetModal()
     const { shortcuts } = shortcutsProvider.useShortcuts()
     const uploadFilesRef = React.useRef<HTMLInputElement>(null)
 
@@ -98,7 +106,7 @@ export default function DriveBar(props: DriveBarProps) {
                     )}
                     {backend.type !== backendModule.BackendType.local && (
                         <Button
-                            disabled
+                            active
                             image={AddConnectorIcon}
                             error={
                                 category === categorySwitcher.Category.trash
@@ -106,8 +114,9 @@ export default function DriveBar(props: DriveBarProps) {
                                     : 'Not implemented yet.'
                             }
                             disabledOpacityClassName="opacity-20"
-                            onClick={() => {
-                                // No backend support yet.
+                            onClick={event => {
+                                event.stopPropagation()
+                                setModal(<NewDataConnectorModal doCreate={doCreateDataConnector} />)
                             }}
                         />
                     )}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/fileNameColumn.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/fileNameColumn.tsx
index 470b693907ab..cc57d74580c0 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/fileNameColumn.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/fileNameColumn.tsx
@@ -58,7 +58,7 @@ export default function FileNameColumn(props: FileNameColumnProps) {
         switch (event.type) {
             case assetEventModule.AssetEventType.newProject:
             case assetEventModule.AssetEventType.newFolder:
-            case assetEventModule.AssetEventType.newSecret:
+            case assetEventModule.AssetEventType.newDataConnector:
             case assetEventModule.AssetEventType.openProject:
             case assetEventModule.AssetEventType.closeProject:
             case assetEventModule.AssetEventType.cancelOpeningAllProjects:
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/globalContextMenu.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/globalContextMenu.tsx
index 6206bbba3676..453e36e4d053 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/globalContextMenu.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/globalContextMenu.tsx
@@ -9,6 +9,7 @@ import * as shortcuts from '../shortcuts'
 
 import ContextMenu from './contextMenu'
 import MenuEntry from './menuEntry'
+import NewDataConnectorModal from './newDataConnectorModal'
 
 /** Props for a {@link GlobalContextMenu}. */
 export interface GlobalContextMenuProps {
@@ -22,7 +23,7 @@ export interface GlobalContextMenuProps {
 export default function GlobalContextMenu(props: GlobalContextMenuProps) {
     const { hidden = false, directoryKey, directoryId, dispatchAssetListEvent } = props
     const { backend } = backendProvider.useBackend()
-    const { unsetModal } = modalProvider.useSetModal()
+    const { setModal, unsetModal } = modalProvider.useSetModal()
     const filesInputRef = React.useRef<HTMLInputElement>(null)
     return (
         <ContextMenu hidden={hidden}>
@@ -111,10 +112,22 @@ export default function GlobalContextMenu(props: GlobalContextMenuProps) {
             {backend.type !== backendModule.BackendType.local && (
                 <MenuEntry
                     hidden={hidden}
-                    disabled
                     action={shortcuts.KeyboardAction.newDataConnector}
                     doAction={() => {
-                        // No backend support yet.
+                        setModal(
+                            <NewDataConnectorModal
+                                doCreate={(name, value) => {
+                                    dispatchAssetListEvent({
+                                        type: assetListEventModule.AssetListEventType
+                                            .newDataConnector,
+                                        parentKey: directoryKey,
+                                        parentId: directoryId,
+                                        name,
+                                        value,
+                                    })
+                                }}
+                            />
+                        )
                     }}
                 />
             )}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/input.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/input.tsx
index 86c29f189be4..1b98ffc665a6 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/input.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/input.tsx
@@ -23,7 +23,7 @@ export interface InputProps extends InputAttributes {
     setValue: (value: string) => void
 }
 
-/** A component for authentication from inputs, with preset styles. */
+/** A component for authentication form inputs, with preset styles. */
 export default function Input(props: InputProps) {
     const { setValue, error, validate = false, onChange, onBlur, ...passthroughProps } = props
     const [reportTimeoutHandle, setReportTimeoutHandle] = React.useState<number | null>(null)
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/newDataConnectorModal.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/newDataConnectorModal.tsx
new file mode 100644
index 000000000000..143606f86dcc
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/newDataConnectorModal.tsx
@@ -0,0 +1,107 @@
+/** @file Modal for confirming delete of any type of asset. */
+import * as React from 'react'
+import * as toastify from 'react-toastify'
+
+import * as errorModule from '../../error'
+import * as loggerProvider from '../../providers/logger'
+import * as modalProvider from '../../providers/modal'
+
+import Modal from './modal'
+
+// =============================
+// === NewDataConnectorModal ===
+// =============================
+
+/** Props for a {@link NewDataConnectorModal}. */
+export interface NewDataConnectorModalProps {
+    doCreate: (name: string, value: string) => void
+}
+
+/** A modal for confirming the deletion of an asset. */
+export default function NewDataConnectorModal(props: NewDataConnectorModalProps) {
+    const { doCreate } = props
+    const logger = loggerProvider.useLogger()
+    const { unsetModal } = modalProvider.useSetModal()
+
+    const [name, setName] = React.useState('')
+    const [value, setValue] = React.useState('')
+    const canSubmit = Boolean(name && value)
+
+    const onSubmit = () => {
+        unsetModal()
+        try {
+            doCreate(name, value)
+        } catch (error) {
+            const message = errorModule.getMessageOrToString(error)
+            toastify.toast.error(message)
+            logger.error(message)
+        }
+    }
+
+    return (
+        <Modal centered className="bg-dim">
+            <div
+                tabIndex={-1}
+                className="relative rounded-2xl pointer-events-auto"
+                onKeyDown={event => {
+                    if (event.key !== 'Escape') {
+                        event.stopPropagation()
+                    }
+                }}
+            >
+                <div className="absolute rounded-2xl bg-frame-selected backdrop-blur-3xl w-full h-full" />
+                <form
+                    onClick={event => {
+                        event.stopPropagation()
+                    }}
+                    onSubmit={event => {
+                        event.preventDefault()
+                        // Consider not calling `onSubmit()` here to make it harder to accidentally
+                        // delete an important asset.
+                        onSubmit()
+                    }}
+                    className="relative flex flex-col rounded-2xl gap-2 w-96 px-4 py-2"
+                >
+                    <h1 className="text-sm font-semibold">New Data Connector</h1>
+                    <div className="flex">
+                        <div className="w-12 h-6 py-1">Name</div>
+                        <input
+                            autoFocus
+                            placeholder="Enter the name of the data connector"
+                            className="grow bg-transparent border border-black-a10 rounded-full leading-170 h-6 px-4 py-px"
+                            onInput={event => {
+                                setName(event.currentTarget.value)
+                            }}
+                        />
+                    </div>
+                    <div className="flex">
+                        <div className="w-12 h-6 py-1">Value</div>
+                        <input
+                            placeholder="Enter the value of the data connector"
+                            className="grow bg-transparent border border-black-a10 rounded-full leading-170 h-6 px-4 py-px"
+                            onInput={event => {
+                                setValue(event.currentTarget.value)
+                            }}
+                        />
+                    </div>
+                    <div className="flex gap-2">
+                        <button
+                            disabled={!canSubmit}
+                            type="submit"
+                            className="hover:cursor-pointer inline-block text-white bg-invite rounded-full px-4 py-1 disabled:opacity-50 disabled:cursor-default"
+                        >
+                            Create
+                        </button>
+                        <button
+                            type="button"
+                            className="hover:cursor-pointer inline-block bg-frame-selected rounded-full px-4 py-1"
+                            onClick={unsetModal}
+                        >
+                            Cancel
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </Modal>
+    )
+}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectIcon.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectIcon.tsx
index 1bf676595829..2d41048c597c 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectIcon.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectIcon.tsx
@@ -239,7 +239,7 @@ export default function ProjectIcon(props: ProjectIconProps) {
         switch (event.type) {
             case assetEventModule.AssetEventType.newFolder:
             case assetEventModule.AssetEventType.uploadFiles:
-            case assetEventModule.AssetEventType.newSecret:
+            case assetEventModule.AssetEventType.newDataConnector:
             case assetEventModule.AssetEventType.deleteMultiple:
             case assetEventModule.AssetEventType.restoreMultiple:
             case assetEventModule.AssetEventType.downloadSelected:
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectNameColumn.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectNameColumn.tsx
index 40df08070f7b..b9e4712ded37 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectNameColumn.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectNameColumn.tsx
@@ -99,7 +99,7 @@ export default function ProjectNameColumn(props: ProjectNameColumnProps) {
     hooks.useEventHandler(assetEvents, async event => {
         switch (event.type) {
             case assetEventModule.AssetEventType.newFolder:
-            case assetEventModule.AssetEventType.newSecret:
+            case assetEventModule.AssetEventType.newDataConnector:
             case assetEventModule.AssetEventType.openProject:
             case assetEventModule.AssetEventType.closeProject:
             case assetEventModule.AssetEventType.cancelOpeningAllProjects:
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/assetEvent.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/assetEvent.ts
index 7bcde6be5633..c8e261aa3126 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/assetEvent.ts
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/assetEvent.ts
@@ -21,7 +21,7 @@ export enum AssetEventType {
     newProject = 'new-project',
     newFolder = 'new-folder',
     uploadFiles = 'upload-files',
-    newSecret = 'new-secret',
+    newDataConnector = 'new-data-connector',
     openProject = 'open-project',
     closeProject = 'close-project',
     cancelOpeningAllProjects = 'cancel-opening-all-projects',
@@ -41,7 +41,7 @@ interface AssetEvents {
     newProject: AssetNewProjectEvent
     newFolder: AssetNewFolderEvent
     uploadFiles: AssetUploadFilesEvent
-    newSecret: AssetNewSecretEvent
+    newDataConnector: AssetNewDataConnectorEvent
     openProject: AssetOpenProjectEvent
     closeProject: AssetCloseProjectEvent
     cancelOpeningAllProjects: AssetCancelOpeningAllProjectsEvent
@@ -78,8 +78,9 @@ export interface AssetUploadFilesEvent extends AssetBaseEvent<AssetEventType.upl
     files: Map<backendModule.AssetId, File>
 }
 
-/** A signal to create a secret. */
-export interface AssetNewSecretEvent extends AssetBaseEvent<AssetEventType.newSecret> {
+/** A signal to create a data connector. */
+export interface AssetNewDataConnectorEvent
+    extends AssetBaseEvent<AssetEventType.newDataConnector> {
     placeholderId: backendModule.SecretId
     value: string
 }
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/assetListEvent.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/assetListEvent.ts
index b1fb61c136a4..da314e917dff 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/assetListEvent.ts
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/assetListEvent.ts
@@ -17,7 +17,7 @@ export enum AssetListEventType {
     newFolder = 'new-folder',
     newProject = 'new-project',
     uploadFiles = 'upload-files',
-    newSecret = 'new-secret',
+    newDataConnector = 'new-data-connector',
     closeFolder = 'close-folder',
     willDelete = 'will-delete',
     delete = 'delete',
@@ -34,7 +34,7 @@ interface AssetListEvents {
     newFolder: AssetListNewFolderEvent
     newProject: AssetListNewProjectEvent
     uploadFiles: AssetListUploadFilesEvent
-    newSecret: AssetListNewSecretEvent
+    newDataConnector: AssetListNewDataConnectorEvent
     closeFolder: AssetListCloseFolderEvent
     willDelete: AssetListWillDeleteEvent
     delete: AssetListDeleteEvent
@@ -74,8 +74,9 @@ interface AssetListUploadFilesEvent extends AssetListBaseEvent<AssetListEventTyp
     files: File[]
 }
 
-/** A signal to create a new secret. */
-interface AssetListNewSecretEvent extends AssetListBaseEvent<AssetListEventType.newSecret> {
+/** A signal to create a new data connector. */
+interface AssetListNewDataConnectorEvent
+    extends AssetListBaseEvent<AssetListEventType.newDataConnector> {
     parentKey: backend.DirectoryId | null
     parentId: backend.DirectoryId | null
     name: string