@jskit-ai/connectors-web 0.1.61 → 0.1.63

package/README.md

@@ -22,6 +22,7 @@ preserve other integration slots, registrations and extension values.
 
 Provider `settingsFields` metadata supplies labelled select controls when `items`
 are provided and text controls otherwise, with optional hints and placeholders.
+A hint may be text or a function of the current settings.
 Defaults and applicable fields come from
 `getProviderSettingsSchema(provider, settings).getFieldDefinitions()`, which also
 supports schemas containing custom validators. A provider may select a schema

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/connectors-web",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "description": "Shared Vue fields for portable application integration configuration.",
   "type": "module",
   "files": [
@@ -10,7 +10,7 @@
     "./client": "./src/client/index.js"
   },
   "dependencies": {
-    "@jskit-ai/connectors-core": "0.1.61"
+    "@jskit-ai/connectors-core": "0.1.63"
   },
   "peerDependencies": {
     "vue": "^3.5.13",

package/src/client/IntegrationConfigurationFields.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref } from "vue";
-import { getProviderAccountModes, getProviderAuthenticationMethods, getProviderClientAuthenticationMethods, getProviderScopes, getProviderSettingsSchema } from "@jskit-ai/connectors-core/shared/configuration";
+import { DEFAULT_GRANT_TYPE, DEFAULT_TOKEN_ENDPOINT_AUTH_METHOD, getProviderAccountModes, getProviderAuthenticationMethods, getProviderClientAuthenticationMethods, getProviderScopes, getProviderSettingsSchema, providerGrantTypes, registrationClientAuthentication, registrationGrantType } from "@jskit-ai/connectors-core/shared/configuration";
 
 const props = defineProps({
   modelValue: { type: Object, required: true },
@@ -15,8 +15,8 @@ const panels = ref(["details", "credentials"]);
 const integration = computed(() => props.modelValue.integrations[props.integrationId]);
 const registrationId = computed(() => integration.value?.authentication.registrationRef);
 const registration = computed(() => props.modelValue.registrations[registrationId.value]);
-const grantType = computed(() => registration.value?.grantType || "authorization_code");
-const grantOptions = computed(() => (props.provider.oauthGrantTypes || ["authorization_code"]).map((value) => ({
+const grantType = computed(() => registrationGrantType(registration.value));
+const grantOptions = computed(() => providerGrantTypes(props.provider).map((value) => ({
   value, title: { authorization_code: "User consent", client_credentials: "Service account" }[value] || value
 })));
 const modes = computed(() => getProviderAccountModes(props.provider, integration.value.settings || {}).filter((mode) =>
@@ -37,10 +37,35 @@ const visibleSettings = computed(() => (props.provider.settingsFields || []).fil
   (!field.authenticationMethods || field.authenticationMethods.includes(integration.value.authentication.method))
 ));
 const visibleScopes = computed(() => getProviderScopes(props.provider, integration.value.settings || {}, grantType.value, integration.value.authentication.method));
+const clientSecretHint = computed(() =>
+  `Use an environment reference such as env:${environmentPrefix(registrationId.value || props.integrationId)}_CLIENT_SECRET. Keep the value outside this file.`);
 const assistantPermissions = [
   { value: "ask", title: "Ask each time" }, { value: "always", title: "Always allow" }, { value: "never", title: "Never allow" }
 ];
 
+// The environment-variable prefix editAuthentication uses for a new registration's references.
+function environmentPrefix(id) {
+  return id.toUpperCase().replaceAll("-", "_");
+}
+
+// A service account cannot connect as each app user; fall back to a mode these settings allow.
+function accountModeForGrant(grant, settings, accountMode) {
+  return grant === "client_credentials" && accountMode === "per-user"
+    ? getProviderAccountModes(props.provider, settings || {}).find((mode) => mode !== "per-user") : accountMode;
+}
+
+function settingValue(field) {
+  return integration.value.settings?.[field.name] ?? settingProperties.value[field.name]?.defaultTo;
+}
+
+function settingHint(field) {
+  return typeof field.hint === "function" ? field.hint(integration.value.settings) : field.hint;
+}
+
+function settingErrors(field) {
+  return props.fieldErrors[`${integrationPath.value}.settings.${field.name}`];
+}
+
 function editAssistantPolicy(changes) {
   editIntegration({ assistantPolicy: { enabled: true, defaultPermission: "ask", actions: {}, ...integration.value.assistantPolicy, ...changes } });
 }
@@ -91,25 +116,26 @@ function editAuthentication(method, current = integration.value) {
   for (const field of props.provider.settingsFields || []) {
     if (field.authenticationMethods && !field.authenticationMethods.includes(method)) delete settings[field.name];
   }
-  const availableScopes = getProviderScopes(props.provider, settings, "authorization_code", method);
+  const grant = method === "oauth2" ? props.provider.oauthGrantTypes?.[0] || DEFAULT_GRANT_TYPE : DEFAULT_GRANT_TYPE;
+  const availableScopes = getProviderScopes(props.provider, settings, grant, method);
   const scopes = availableScopes.filter(scope => current.scopes.includes(scope.value) || scope.required || (scope.authenticationMethods && scope.recommended)).map(scope => scope.value);
   if (method === "oauth2") {
     let id = props.integrationId;
     let suffix = 2;
     while (Object.hasOwn(props.modelValue.registrations, id)) id = `${props.integrationId}-${suffix++}`;
-    const prefix = id.toUpperCase().replaceAll("-", "_");
-    const grant = props.provider.oauthGrantTypes?.[0] || "authorization_code";
+    const prefix = environmentPrefix(id);
     const clientAuthentication = getProviderClientAuthenticationMethods(props.provider, grant, settings)[0];
     emit("update:modelValue", {
       ...props.modelValue,
       integrations: { ...props.modelValue.integrations, [props.integrationId]: {
         ...current, scopes, authentication: { method, registrationRef: id },
+        accountMode: accountModeForGrant(grant, settings, current.accountMode),
         ...(current.settings ? { settings } : {})
       } },
       registrations: { ...props.modelValue.registrations, [id]: {
         source: "own", clientId: "",
         ...(grant === "authorization_code" ? { callbackUrlRef: `env:${prefix}_CALLBACK_URL` } : { grantType: grant }),
-        ...(clientAuthentication !== "client_secret_post" ? { tokenEndpointAuthMethod: clientAuthentication } : {}),
+        ...(clientAuthentication !== DEFAULT_TOKEN_ENDPOINT_AUTH_METHOD ? { tokenEndpointAuthMethod: clientAuthentication } : {}),
         ...(clientAuthentication !== "none" ? { clientSecretRef: `env:${prefix}_CLIENT_SECRET` } : {})
       } }
     });
@@ -137,7 +163,7 @@ function editRegistration(field, value) {
 function editGrantType(value) {
   const nextRegistration = { ...registration.value, grantType: value };
   const methods = getProviderClientAuthenticationMethods(props.provider, value, integration.value.settings || {});
-  if (!methods.includes(nextRegistration.tokenEndpointAuthMethod || "client_secret_post")) nextRegistration.tokenEndpointAuthMethod = methods[0];
+  if (!methods.includes(registrationClientAuthentication(nextRegistration))) nextRegistration.tokenEndpointAuthMethod = methods[0];
   if (nextRegistration.tokenEndpointAuthMethod === "none") delete nextRegistration.clientSecretRef;
   if (value === "client_credentials") delete nextRegistration.callbackUrlRef;
   const allowed = getProviderScopes(props.provider, integration.value.settings || {}, value, integration.value.authentication.method).map((scope) => scope.value);
@@ -146,8 +172,7 @@ function editGrantType(value) {
     registrations: { ...props.modelValue.registrations, [registrationId.value]: nextRegistration },
     integrations: { ...props.modelValue.integrations, [props.integrationId]: {
       ...integration.value,
-      accountMode: value === "client_credentials" && integration.value.accountMode === "per-user"
-        ? props.provider.accountModes.find((mode) => mode !== "per-user") : integration.value.accountMode,
+      accountMode: accountModeForGrant(value, integration.value.settings, integration.value.accountMode),
       scopes: integration.value.scopes.filter((scope) => allowed.includes(scope))
     } }
   });
@@ -185,22 +210,22 @@ function editGrantType(value) {
             <v-autocomplete
               v-if="field.searchable"
               :label="field.label" :items="field.items" :disabled="disabled" auto-select-first
-              :model-value="integration.settings?.[field.name] ?? settingProperties[field.name]?.defaultTo"
-              :hint="typeof field.hint === 'function' ? field.hint(integration.settings) : field.hint" persistent-hint :error-messages="fieldErrors[`${integrationPath}.settings.${field.name}`]"
+              :model-value="settingValue(field)"
+              :hint="settingHint(field)" persistent-hint :error-messages="settingErrors(field)"
               @update:model-value="editSetting(field.name, $event)"
             />
             <v-select
               v-else-if="field.items"
               :label="field.label" :items="field.items" :disabled="disabled"
-              :model-value="integration.settings?.[field.name] ?? settingProperties[field.name]?.defaultTo"
-              :hint="field.hint" persistent-hint :error-messages="fieldErrors[`${integrationPath}.settings.${field.name}`]"
+              :model-value="settingValue(field)"
+              :hint="settingHint(field)" persistent-hint :error-messages="settingErrors(field)"
               @update:model-value="editSetting(field.name, $event)"
             />
             <v-text-field
               v-else
               :label="field.label" :disabled="disabled" :placeholder="field.placeholder"
-              :model-value="integration.settings?.[field.name] ?? settingProperties[field.name]?.defaultTo ?? ''"
-              :hint="field.hint" persistent-hint :error-messages="fieldErrors[`${integrationPath}.settings.${field.name}`]"
+              :model-value="settingValue(field) ?? ''"
+              :hint="settingHint(field)" persistent-hint :error-messages="settingErrors(field)"
               @update:model-value="editSetting(field.name, $event)"
             />
           </template>
@@ -236,7 +261,7 @@ function editGrantType(value) {
               <slot v-if="registration.tokenEndpointAuthMethod !== 'none'" name="credential" :reference="registration.clientSecretRef" :disabled="disabled">
                 <v-text-field
                   label="Client secret reference" :model-value="registration.clientSecretRef" :disabled="disabled"
-                  hint="Use an environment reference such as env:GOOGLE_CLIENT_SECRET. Keep the value outside this file."
+                  :hint="clientSecretHint"
                   persistent-hint :error-messages="fieldErrors[`${registrationPath}.clientSecretRef`]"
                   @update:model-value="editRegistration('clientSecretRef', $event)"
                 />