External Service Credentials

app/common/src/backendQuery.ts

@@ -20,6 +20,7 @@ export type BackendMutationMethod = DefineBackendMethods<
   | 'closeProject'
   | 'copyAsset'
   | 'createCheckoutSession'
+  | 'createCredential'
   | 'createDatalink'
   | 'createDirectory'
   | 'createPermission'

app/common/src/services/Backend.ts

@@ -1400,13 +1400,49 @@ export interface UpdateProjectExecutionRequestBody {
   readonly enabled?: boolean | undefined
 }
 
+/** HTTP request body for the "create secret or credential" endpoint. */
+export type CreateSecretOrCredentialRequestBody =
+  | CreateSecretRequestBody
+  | CreateCredentialRequestBody
+
 /** HTTP request body for the "create secret" endpoint. */
 export interface CreateSecretRequestBody {
   readonly name: string
   readonly value: string
   readonly parentDirectoryId: DirectoryId | null
 }
 
+/** Metadata for a Snowflake credential. */
+export interface SnowflakeCredentialInput {
+  readonly type: 'Snowflake'
+  readonly account: string
+  readonly client_id: string
+  readonly client_secret: string
+  readonly role: string | null
+}
+
+/** Metadata for a Google credential. */
+export interface GoogleCredentialInput {
+  readonly type: 'Google'
+  readonly scopes: readonly string[]
+}
+
+/** Metadata for an arbitrary credential. */
+export type CredentialInput = SnowflakeCredentialInput | GoogleCredentialInput
+
+/** Metadata for an arbitrary credential, plus a nonce for authentication purposes. */
+export interface CredentialMetadata {
+  readonly nonce: string
+  readonly input: CredentialInput
+}
+
+/** HTTP request body for the "create credential" endpoint. */
+export interface CreateCredentialRequestBody {
+  readonly name: string
+  readonly value: CredentialMetadata
+  readonly parentDirectoryId: DirectoryId | null
+}
+
 /** HTTP request body for the "update secret" endpoint. */
 export interface UpdateSecretRequestBody {
   readonly title: string | null
@@ -1842,6 +1878,8 @@ export default abstract class Backend {
   abstract deleteDatalink(datalinkId: DatalinkId, title: string | null): Promise<void>
   /** Create a secret environment variable. */
   abstract createSecret(body: CreateSecretRequestBody): Promise<SecretId>
+  /** Create an OAuth credential. */
+  abstract createCredential(body: CreateCredentialRequestBody): Promise<SecretId>
   /** Return a secret environment variable. */
   abstract getSecret(secretId: SecretId, title: string): Promise<Secret>
   /** Change the value of a secret. */

app/common/src/text.ts

@@ -102,6 +102,7 @@ interface PlaceholderOverrides {
   readonly getDatalinkBackendError: [datalinkTitle: string]
   readonly deleteDatalinkBackendError: [datalinkTitle: string]
   readonly createSecretBackendError: [secretTitle: string]
+  readonly createCredentialBackendError: [credentialTitle: string]
   readonly getSecretBackendError: [secretTitle: string]
   readonly updateSecretBackendError: [secretTitle: string]
   readonly createLabelBackendError: [labelName: string]

app/common/src/text/english.json

@@ -9,6 +9,7 @@
   "createProjectError": "Could not create new project",
   "createDatalinkError": "Could not create new Datalink",
   "createSecretError": "Could not create new secret",
+  "createCredentialError": "Could not create new credential",
   "renameFolderError": "Could not rename folder",
   "renameProjectError": "Could not rename project",
   "uploadProjectError": "Could not upload project",
@@ -165,6 +166,7 @@
   "uploadFileWithNameBackendError": "Could not upload file '$0'",
   "getFileDetailsBackendError": "Could not get details of project '$0'",
   "createSecretBackendError": "Could not create secret with name '$0'",
+  "createCredentialBackendError": "Could not create credential with name '$0'",
   "createDatalinkBackendError": "Could not create Datalink with name '$0'",
   "getDatalinkBackendError": "Could not get Datalink '$0'",
   "deleteDatalinkBackendError": "Could not delete Datalink '$0'",
@@ -305,6 +307,18 @@
   "more": "More",
   "close": "Close",
 
+  "account": "Account",
+  "clientId": "Client ID",
+  "clientSecret": "Client Secret",
+  "role": "Role",
+  "snowflakeCredentialType": "Snowflake",
+  "googleCredentialType": "Google",
+  "googleCredentialSheetsScope": "Sheets",
+  "googleCredentialSheetsReadScope": "Read sheets",
+  "googleCredentialSheetsWriteScope": "Write sheets",
+  "googleCredentialSheetsDriveBrowseScope": "Browse files on drive",
+  "googleCredentialAnalyticsScope": "Analytics",
+
   "enterSecretPath": "Enter secret path",
   "enterText": "Enter text",
   "enterNumber": "Enter number",
@@ -358,6 +372,8 @@
   "uploadFiles": "Import",
   "downloadFiles": "Download",
   "newDatalink": "New Datalink",
+  "newCredential": "New Credential",
+  "editCredential": "Edit Credential",
   "newSecret": "New Secret",
   "newLabel": "New Label",
   "newEmptyProject": "New Project",
@@ -555,6 +571,8 @@
   "secretValueHidden": "●●●●●●●●",
   "secretNamePlaceholder": "Enter the name of the secret",
   "secretValuePlaceholder": "Enter the value of the secret",
+  "credentialNamePlaceholder": "Enter the name of the credential",
+  "credentialTypeLabel": "Credential type",
   "datalinkNamePlaceholder": "Enter the name of the Datalink",
   "labelNamePlaceholder": "Enter the name of the label",
   "labelSearchPlaceholder": "Type labels to search",
@@ -832,6 +850,7 @@
   "newFolderShortcut": "New Folder",
   "newDatalinkShortcut": "New Datalink",
   "newSecretShortcut": "New Secret",
+  "newCredentialShortcut": "New Credential",
   "useInNewProjectShortcut": "Use in New Project",
   "closeModalShortcut": "Close",
   "cancelEditNameShortcut": "Cancel Editing",

app/gui/env.d.ts

@@ -7,10 +7,6 @@
 import type * as saveAccessToken from 'enso-common/src/accessToken'
 import type { $Config } from './src/config'
 
-// =============
-// === Types ===
-// =============
-
 /** Nested configuration options with `string` values. */
 interface StringConfig {
   [key: string]: StringConfig | string
@@ -21,10 +17,6 @@ interface Enso {
   readonly main: (inputConfig?: StringConfig) => Promise<void>
 }
 
-// ===================
-// === Backend API ===
-// ===================
-
 /**
  * `window.backendApi` is a context bridge to the main process, when we're running in an
  * Electron context. It contains non-authentication-related functionality.
@@ -38,10 +30,6 @@ interface BackendApi {
   ) => Promise<ProjectInfo>
 }
 
-// ==========================
-// === Authentication API ===
-// ==========================
-
 /**
  * `window.authenticationApi` is a context bridge to the main process, when we're running in an
  * Electron context.
@@ -65,10 +53,6 @@ interface AuthenticationApi {
   readonly saveAccessToken: (accessToken: saveAccessToken.AccessToken | null) => void
 }
 
-// ======================
-// === Navigation API ===
-// ======================
-
 /**
  * `window.navigationApi` is a context bridge to the main process, when we're running in an
  * Electron context. It contains navigation-related functionality.
@@ -80,30 +64,18 @@ interface NavigationApi {
   readonly goForward: () => void
 }
 
-// ================
-// === Menu API ===
-// ================
-
 /** `window.menuApi` exposes functionality related to the system menu. */
 interface MenuApi {
   /** Set the callback to be called when the "about" entry is clicked in the "help" menu. */
   readonly setShowAboutModalHandler: (callback: () => void) => void
 }
 
-// ==================
-// === System API ===
-// ==================
-
 /** `window.systemApi` exposes functionality related to the operating system. */
 interface SystemApi {
   readonly downloadURL: (url: string, headers?: Record<string, string>) => void
   readonly showItemInFolder: (fullPath: string) => void
 }
 
-// ==============================
-// === Project Management API ===
-// ==============================
-
 /** Metadata for a newly imported project. */
 interface ProjectInfo {
   readonly id: string
@@ -119,10 +91,6 @@ interface ProjectManagementApi {
   readonly setOpenProjectHandler: (handler: (projectInfo: ProjectInfo) => void) => void
 }
 
-// ========================
-// === File Browser API ===
-// ========================
-
 /**
  * `window.fileBrowserApi` is a context bridge to the main process, when we're running in an
  * Electron context.
@@ -144,10 +112,6 @@ interface FileBrowserApi {
   ) => Promise<string[] | undefined>
 }
 
-// ====================
-// === Version Info ===
-// ====================
-
 /** Versions of the app, and selected software bundled with Electron. */
 interface VersionInfo {
   readonly version: string
@@ -156,10 +120,6 @@ interface VersionInfo {
   readonly chrome: string
 }
 
-// =====================================
-// === Global namespace augmentation ===
-// =====================================
-
 // JSDocs here are intentionally empty as these interfaces originate from elsewhere.
 declare global {
   const $config: $Config

app/gui/src/config.ts

@@ -26,6 +26,7 @@ const $config = {
   YDOC_SERVER_URL: import.meta.env.ENSO_IDE_YDOC_SERVER_URL,
   CLOUD_BUILD: import.meta.env.ENSO_IDE_CLOUD_BUILD,
   AG_GRID_LICENSE_KEY: import.meta.env.ENSO_IDE_AG_GRID_LICENSE_KEY,
+  GOOGLE_OAUTH_CLIENT_ID: import.meta.env.ENSO_IDE_GOOGLE_OAUTH_CLIENT_ID,
   MAPBOX_API_TOKEN: window.mapBoxApiToken?.() || import.meta.env.ENSO_IDE_MAPBOX_API_TOKEN,
 } as const
 

app/gui/src/dashboard/components/AriaComponents/Checkbox/Checkbox.tsx

@@ -35,29 +35,36 @@ import type { TestIdProps } from '../types'
 import { CheckboxStandaloneProvider, useCheckboxContext } from './CheckboxContext'
 import { CheckboxGroup } from './CheckboxGroup'
 
+/** Props common between all {@link CheckboxProps} variants. */
+interface CheckboxSharedProps
+  extends Omit<VariantProps<typeof CHECKBOX_STYLES>, 'isDisabled' | 'isInvalid'>,
+    TestIdProps {
+  readonly className?: string
+  readonly style?: CSSProperties
+  readonly checkboxRef?: MutableRefObject<HTMLInputElement>
+}
+
 /** Props for the {@link Checkbox} component. */
-export type CheckboxProps<
-  Schema extends TSchema,
-  TFieldName extends FieldPath<Schema, boolean>,
-> = Omit<VariantProps<typeof CHECKBOX_STYLES>, 'isDisabled' | 'isInvalid'> &
-  TestIdProps & {
-    readonly className?: string
-    readonly style?: CSSProperties
-    readonly checkboxRef?: MutableRefObject<HTMLInputElement>
-  } & (CheckboxGroupCheckboxProps | StandaloneCheckboxProps<Schema, TFieldName>)
+export type CheckboxProps<Schema extends TSchema, TFieldName extends FieldPath<Schema, boolean>> =
+  | CheckboxGroupCheckboxProps
+  | StandaloneCheckboxProps<Schema, TFieldName>
 
 /** Props for the {@link Checkbox} component when used inside a {@link CheckboxGroup}. */
-interface CheckboxGroupCheckboxProps extends AriaCheckboxProps {
-  readonly value: string
-  readonly form?: never
-  readonly name?: never
-}
+export type CheckboxGroupCheckboxProps = AriaCheckboxProps &
+  CheckboxSharedProps & {
+    readonly value: string
+    readonly form?: never
+    readonly name?: never
+  }
 
 /** Props for the {@link Checkbox} component when used outside of a {@link CheckboxGroup}. */
-type StandaloneCheckboxProps<
+export type StandaloneCheckboxProps<
   Schema extends TSchema,
   TFieldName extends FieldPath<Schema, boolean>,
-> = FieldProps & FieldStateProps<AriaCheckboxProps, Schema, TFieldName, boolean> & FieldVariantProps
+> = CheckboxSharedProps &
+  FieldProps &
+  FieldStateProps<AriaCheckboxProps, Schema, TFieldName, boolean> &
+  FieldVariantProps
 
 export const CHECKBOX_STYLES = tv({
   base: 'group flex gap-2 items-center cursor-pointer select-none',

app/gui/src/dashboard/components/AriaComponents/Form/Form.tsx

@@ -124,6 +124,7 @@ export const Form = forwardRef(function Form<
   /* eslint-disable @typescript-eslint/naming-convention */
   schema: typeof components.schema
   useForm: typeof components.useForm
+  useFormWithComponents: typeof components.useFormWithComponents
   useField: typeof components.useField
   makeUseField: typeof components.makeUseField
   Submit: typeof components.Submit
@@ -146,6 +147,7 @@ export const Form = forwardRef(function Form<
 
 Form.schema = components.schema
 Form.useForm = components.useForm
+Form.useFormWithComponents = components.useFormWithComponents
 Form.useField = components.useField
 Form.makeUseField = components.makeUseField
 Form.useFormSchema = components.useFormSchema

app/gui/src/dashboard/components/AriaComponents/Form/components/index.ts

@@ -1,8 +1,4 @@
-/**
- * @file
- *
- * Barrel file for form components.
- */
+/** @file Barrel file for form components. */
 export { Controller, useWatch } from 'react-hook-form'
 export * from './Field'
 export * from './FieldValue'
@@ -18,3 +14,4 @@ export * from './useFieldState'
 export * from './useForm'
 export * from './useFormError'
 export * from './useFormSchema'
+export * from './useFormWithComponents'