Fix auth method config submit following ember data migration (#9755) (#9793)

* fix broken form after ember data migration

* convert to typescript, add tests

* only transition on success

* use test.each

* use AuthMethodResource

* add tests and refactor fallback for engine-display-data

* fix token_type submitting for token auth methods

* fix imports

* fix conditional for token_type

* update comments add check for token_type

* fix test and add comment to clarify different setting types

* revert and keep unknown type, blowing the scope out too much!

Co-authored-by: claire bontempo <[email protected]>

Author: hc-github-team-secure-vault-core

ui/app/components/auth-config-form/config.hbs

@@ -6,8 +6,8 @@
 <form {{on "submit" (perform this.saveModel)}}>
   <div class="box is-sideless is-fullwidth is-marginless">
     <NamespaceReminder @mode="save" @noun="Auth Method" />
-    <MessageError @model={{@form}} />
-    <FormFieldGroups @model={{@form}} @groupName="formFieldGroups" @mode={{this.mode}} />
+    <MessageError @model={{@form}} @errorMessage={{this.errorMessage}} />
+    <FormFieldGroups @model={{@form}} @groupName="formFieldGroups" />
   </div>
 
   <div class="field is-grouped box is-fullwidth is-bottomless">

ui/app/components/auth-config-form/config.js

@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { task } from 'ember-concurrency';
+import { waitFor } from '@ember/test-waiters';
+import { tracked } from '@glimmer/tracking';
+
+import type AuthMethodForm from 'vault/forms/auth/method';
+import type RouterService from '@ember/routing/router-service';
+import type FlashMessageService from 'ember-cli-flash/services/flash-messages';
+import type ApiService from 'vault/services/api';
+import type { HTMLElementEvent } from 'vault/forms';
+import {
+  AwsConfigureClientRequest,
+  AwsConfigureIdentityAccessListTidyOperationRequest,
+  AwsConfigureRoleTagDenyListTidyOperationRequest,
+  AzureConfigureAuthRequest,
+  GithubConfigureRequest,
+  GoogleCloudConfigureAuthRequest,
+  JwtConfigureRequest,
+  KubernetesConfigureAuthRequest,
+  LdapConfigureAuthRequest,
+  OktaConfigureRequest,
+  RadiusConfigureRequest,
+} from '@hashicorp/vault-client-typescript';
+import AuthMethodResource from 'vault/resources/auth/method';
+
+/**
+ * @module AuthConfigForm/Config
+ * The `AuthConfigForm/Config` is the form for auth methods that need additional configuration.
+ * AuthConfigForm::Options handle the backend's mount configuration.
+ *
+ * @example
+ * <AuthConfigForm::Config @form={{this.form}} />
+ *
+ * @property form=null {AuthMethodForm} - The corresponding auth method that is being configured.
+ *
+ */
+
+type ConfigPayload =
+  | AwsConfigureClientRequest
+  | AwsConfigureIdentityAccessListTidyOperationRequest
+  | AwsConfigureRoleTagDenyListTidyOperationRequest
+  | AzureConfigureAuthRequest
+  | GithubConfigureRequest
+  | GoogleCloudConfigureAuthRequest
+  | JwtConfigureRequest
+  | KubernetesConfigureAuthRequest
+  | LdapConfigureAuthRequest
+  | OktaConfigureRequest
+  | RadiusConfigureRequest
+  | Record<string, unknown>; // Add other payload types as needed
+
+interface Args {
+  form: AuthMethodForm;
+  section: 'configuration' | 'client' | 'identity-accesslist' | 'roletag-denylist';
+  method: AuthMethodResource;
+}
+
+export default class AuthConfigBase extends Component<Args> {
+  @service declare readonly api: ApiService;
+  @service declare readonly flashMessages: FlashMessageService;
+  @service declare readonly router: RouterService;
+
+  @tracked errorMessage = '';
+
+  configMethod(path: string, payload: ConfigPayload) {
+    const { section, method } = this.args;
+
+    switch (method.methodType) {
+      case 'aws':
+        switch (section) {
+          case 'client':
+            return this.api.auth.awsConfigureClient(path, payload as AwsConfigureClientRequest);
+          case 'identity-accesslist':
+            return this.api.auth.awsConfigureIdentityAccessListTidyOperation(
+              path,
+              payload as AwsConfigureIdentityAccessListTidyOperationRequest
+            );
+          case 'roletag-denylist':
+            return this.api.auth.awsConfigureRoleTagDenyListTidyOperation(
+              path,
+              payload as AwsConfigureRoleTagDenyListTidyOperationRequest
+            );
+          default:
+            throw new Error(`Unsupported AWS section: ${section}`);
+        }
+      case 'azure':
+        return this.api.auth.azureConfigureAuth(path, payload as AzureConfigureAuthRequest);
+      case 'github':
+        return this.api.auth.githubConfigure(path, payload as GithubConfigureRequest);
+      case 'gcp':
+        return this.api.auth.googleCloudConfigureAuth(path, payload as GoogleCloudConfigureAuthRequest);
+      case 'jwt':
+      case 'oidc':
+        return this.api.auth.jwtConfigure(path, payload as JwtConfigureRequest);
+      case 'kubernetes':
+        return this.api.auth.kubernetesConfigureAuth(path, payload as KubernetesConfigureAuthRequest);
+      case 'ldap':
+        return this.api.auth.ldapConfigureAuth(path, payload as LdapConfigureAuthRequest);
+      case 'okta':
+        return this.api.auth.oktaConfigure(path, payload as OktaConfigureRequest);
+      case 'radius':
+        return this.api.auth.radiusConfigure(path, payload as RadiusConfigureRequest);
+      default:
+        throw new Error(`Configuration of the ${method.methodType} method is not supported by the Vault UI.`);
+    }
+  }
+
+  @task
+  @waitFor
+  *saveModel(evt: HTMLElementEvent<HTMLFormElement>) {
+    evt.preventDefault();
+    this.errorMessage = '';
+    try {
+      const { form, method } = this.args;
+      const { data } = form.toJSON();
+      yield this.configMethod(method.path, data as ConfigPayload);
+      this.router.transitionTo('vault.cluster.access.methods').followRedirects();
+      this.flashMessages.success('The configuration was saved successfully.');
+    } catch (err) {
+      const { message } = yield this.api.parseError(err);
+      this.errorMessage = message;
+    }
+  }
+}

ui/app/components/auth-config-form/config.ts

@@ -66,6 +66,7 @@ export default class AuthConfigOptions extends Component<Args> {
         const {
           data: { description, config, user_lockout_config },
         } = form.toJSON();
+
         const payload = {
           description,
           ...config,
@@ -75,13 +76,18 @@ export default class AuthConfigOptions extends Component<Args> {
           payload.user_lockout_config = user_lockout_config;
         }
 
+        // 'token_type' cannot be set for the 'token' auth mount
+        if (form.normalizedType === 'token' && payload?.token_type) {
+          delete payload.token_type;
+        }
+
         await this.api.sys.mountsAuthTuneConfigurationParameters(form.data.path, payload);
+        this.router.transitionTo('vault.cluster.access.methods').followRedirects();
+        this.flashMessages.success('The configuration was saved successfully.');
       } catch (err) {
         const { message } = await this.api.parseError(err);
         this.errorMessage = message;
       }
-      this.router.transitionTo('vault.cluster.access.methods').followRedirects();
-      this.flashMessages.success('The configuration was saved successfully.');
     })
   );
 }

ui/app/components/auth-config-form/options.ts

@@ -39,9 +39,12 @@ export default class AuthMethodForm extends MountForm<AuthMethodFormData> {
 
   get tuneFields() {
     const readOnly = ['local', 'seal_wrap'];
+    // 'token_type' cannot be set for the 'token' auth method
+    if (this.normalizedType === 'token') {
+      readOnly.push('config.token_type');
+    }
     return this.formFieldGroups[1]?.['Method Options']?.filter((field) => {
-      const isTuneable = !readOnly.includes(field.name);
-      return isTuneable || (field.name === 'token_type' && this.normalizedType === 'token');
+      return !readOnly.includes(field.name);
     });
   }
 

ui/app/forms/auth/method.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import { ALL_ENGINES } from 'vault/utils/all-engines-metadata';
+import { ALL_ENGINES, type EngineDisplayData } from 'vault/utils/all-engines-metadata';
 
 /**
  * Helper function to retrieve engine metadata for a given `methodType`.
@@ -21,12 +21,11 @@ import { ALL_ENGINES } from 'vault/utils/all-engines-metadata';
  * @returns {Object|undefined} - The engine metadata, which includes information about its mount type (e.g., secret or auth)
  *   and whether it requires an enterprise license. Returns undefined if no match is found.
  */
-export default function engineDisplayData(methodType: string) {
+export default function engineDisplayData(methodType: string): EngineDisplayData {
   const engine = ALL_ENGINES?.find((t) => t.type === methodType);
-  if (!engine && methodType) {
-    // Fallback to a unknown engine if no match found but type is provided
+  if (!engine) {
     return {
-      displayName: 'Unknown plugin',
+      displayName: methodType || 'Unknown plugin',
       type: 'unknown',
       isOldEngine: true,
       glyph: 'lock',

ui/app/helpers/engines-display-data.ts

@@ -5,9 +5,11 @@
 
 import Route from '@ember/routing/route';
 import { service } from '@ember/service';
+import AuthMethodResource from 'vault/resources/auth/method';
 
 import type ApiService from 'vault/services/api';
 import type { ModelFrom } from 'vault/route';
+import type { Mount } from 'vault/vault/mount';
 
 export type ClusterSettingsAuthConfigureRouteModel = ModelFrom<ClusterSettingsAuthConfigureRoute>;
 
@@ -16,12 +18,11 @@ export default class ClusterSettingsAuthConfigureRoute extends Route {
 
   async model(params: { method: string }) {
     const path = params.method;
-    const methodOptions = await this.api.sys.authReadConfiguration(path);
-
+    const methodOptions = (await this.api.sys.authReadConfiguration(path)) as Mount;
+    const method = new AuthMethodResource({ ...methodOptions, path }, this);
     return {
       methodOptions,
-      type: methodOptions.type as string,
-      id: path,
+      method,
     };
   }
 }

ui/app/routes/vault/cluster/settings/auth/configure.ts

@@ -11,8 +11,8 @@ export default class SettingsAuthConfigureRoute extends Route {
   @service router;
 
   beforeModel() {
-    const model = this.modelFor('vault.cluster.settings.auth.configure');
-    const section = tabsForAuthSection([model])[0].routeParams.slice().pop();
+    const { method } = this.modelFor('vault.cluster.settings.auth.configure');
+    const section = tabsForAuthSection([method])[0].routeParams.slice().pop();
     return this.router.transitionTo('vault.cluster.settings.auth.configure.section', section);
   }
 }

ui/app/routes/vault/cluster/settings/auth/configure/index.js

@@ -26,17 +26,19 @@ export default class ClusterSettingsAuthConfigureRoute extends Route {
   }
 
   modelForOptions() {
-    const { methodOptions, id, type } = this.configRouteModel;
+    const { methodOptions, method } = this.configRouteModel;
     const config = methodOptions.config as MountConfig;
     const listing_visibility = config.listing_visibility === 'unauth' ? true : false;
 
     const form = new AuthMethodForm({
       ...methodOptions,
-      path: id,
-      config: { ...methodOptions.config, listing_visibility },
+      path: method.id,
+      config: { ...config, listing_visibility },
       user_lockout_config: {},
     });
-    form.type = type;
+    // `type` is a tracked property on the form class and not a field param
+    // so we need to set it here even though it is spread in methodOptions above.
+    form.type = methodOptions.type;
 
     return {
       form,
@@ -45,13 +47,13 @@ export default class ClusterSettingsAuthConfigureRoute extends Route {
   }
 
   get configFieldGroupsMap() {
-    const { type } = this.configRouteModel;
+    const { method } = this.configRouteModel;
     return {
       kubernetes: {
         default: ['kubernetes_host', 'kubernetes_ca_cert', 'disable_local_ca_jwt'],
         'Kubernetes Options': ['token_reviewer_jwt', 'pem_keys', 'use_annotations_as_alias_metadata'],
       },
-    }[type];
+    }[method.methodType];
   }
 
   fetchConfig(type: string, section: string, path: string, help = false) {
@@ -95,13 +97,13 @@ export default class ClusterSettingsAuthConfigureRoute extends Route {
   }
 
   async modelForConfiguration(section: string) {
-    const { id: path, type } = this.configRouteModel;
+    const { path, methodType } = this.configRouteModel.method;
 
     const formOptions = { isNew: false };
     let formData;
     // make request to fetch configuration data for method
     try {
-      const { data } = await this.fetchConfig(type, section, path);
+      const { data } = await this.fetchConfig(methodType, section, path);
       formData = data as object;
     } catch (e) {
       const { message, status } = await this.api.parseError(e);
@@ -113,15 +115,15 @@ export default class ClusterSettingsAuthConfigureRoute extends Route {
     }
     // make request to fetch OpenAPI properties with help query param
     const helpResponse = (await this.fetchConfig(
-      type,
+      methodType,
       section,
       path,
       true
     )) as unknown as OpenApiHelpResponse;
     const form = new OpenApiForm(helpResponse, formData, formOptions);
     // for jwt and oidc types, the jwks_pairs field is not deprecated but we do not render it in the UI
     // remove the field from the group before rendering the form
-    if (['jwt', 'oidc'].includes(type)) {
+    if (['jwt', 'oidc'].includes(methodType)) {
       const defaultGroup = form.formFieldGroups[0]?.['default'] || [];
       const index = defaultGroup.findIndex((field) => field.name === 'jwks_pairs');
       if (index !== undefined && index >= 0) {
@@ -131,7 +133,8 @@ export default class ClusterSettingsAuthConfigureRoute extends Route {
 
     return {
       form,
-      section: 'configuration',
+      section,
+      method: this.configRouteModel.method,
     };
   }