chore: 🤖 add skip prompts toggle (#2036)

* chore: 🤖 add skip prompts toggle

addons/api/addon/models/auth-method.js

@@ -37,7 +37,7 @@ export const options = {
     account_claim_maps: {
       to: ['sub', 'name', 'email'],
     },
-    prompts: ['none', 'consent', 'select_account', 'login'],
+    prompts: ['consent', 'select_account', 'login'],
   },
   ldap: {
     account_attribute_maps: {

addons/core/translations/resources/en-us.yaml

@@ -157,7 +157,7 @@ auth-method:
       label: Login
       help: Always require the user to log in to this auth provider
     none:
-      label: None
+      label: Skip Prompts
       help: Skip prompts if the user is already signed in and has granted consent
   section:
     connection:

ui/admin/app/components/form/auth-method/oidc/index.hbs

@@ -528,33 +528,57 @@
     {{/if}}
   </form.input>
 
-  <Hds::Form::Checkbox::Group
-    class='oidc-prompts'
-    @isOptional={{true}}
-    @name='prompts'
-    disabled={{form.disabled}}
-    as |G|
-  >
-    <G.Legend>{{t 'form.prompts.label'}}</G.Legend>
-    <G.HelperText>{{t 'form.prompts.help'}}</G.HelperText>
-
-    {{#each this.prompts as |prompt|}}
-      <G.Checkbox::Field
-        @id={{prompt}}
-        checked={{includes prompt this.selectedPrompts}}
-        {{on 'change' (fn this.updatePrompt prompt)}}
+  <Hds::Form::Fieldset @isOptional={{true}} as |F|>
+    <F.Legend>{{t 'form.prompts.label'}}</F.Legend>
+    <F.HelperText>{{t 'form.prompts.help'}}</F.HelperText>
+    <F.Control>
+      <Hds::Form::Toggle::Field
+        name='prompts'
+        checked={{this.skipPromptsList}}
+        disabled={{form.disabled}}
+        {{on 'change' (fn this.toggleField 'none')}}
         as |F|
       >
         <F.Label>
-          {{t (concat 'resources.auth-method.form.' prompt '.label')}}
+          {{t 'resources.auth-method.form.none.label'}}
         </F.Label>
         <F.HelperText>
-          {{t (concat 'resources.auth-method.form.' prompt '.help')}}
+          {{t 'resources.auth-method.form.none.help'}}
         </F.HelperText>
-      </G.Checkbox::Field>
-    {{/each}}
-
-  </Hds::Form::Checkbox::Group>
+      </Hds::Form::Toggle::Field>
+      {{#unless this.skipPromptsList}}
+        <Hds::Form::Checkbox::Group
+          class='oidc-prompts'
+          @name='prompts'
+          disabled={{form.disabled}}
+          as |G|
+        >
+          {{#each this.prompts as |prompt|}}
+            <G.Checkbox::Field
+              @id={{prompt}}
+              checked={{includes prompt this.selectedPrompts}}
+              {{on 'change' (fn this.updatePrompt prompt)}}
+              as |F|
+            >
+              <F.Label>
+                {{t (concat 'resources.auth-method.form.' prompt '.label')}}
+              </F.Label>
+              <F.HelperText>
+                {{t (concat 'resources.auth-method.form.' prompt '.help')}}
+              </F.HelperText>
+            </G.Checkbox::Field>
+          {{/each}}
+        </Hds::Form::Checkbox::Group>
+      {{/unless}}
+    </F.Control>
+    {{#if @model.errors.prompts}}
+      <F.Error as |E|>
+        {{#each @model.errors.prompts as |error|}}
+          <E.Message>{{error.message}}</E.Message>
+        {{/each}}
+      </F.Error>
+    {{/if}}
+  </Hds::Form::Fieldset>
 
   {{#unless @model.isNew}}
     <form.input

ui/admin/app/components/form/auth-method/oidc/index.js

@@ -36,6 +36,7 @@ export default class FormAuthMethodOidcComponent extends Component {
   prompts = options.oidc.prompts;
 
   @tracked selectedPrompts = this.parsePromptsArray();
+  @tracked skipPromptsList = this.isToggleChecked();
 
   /**
    * @returns {string}
@@ -44,8 +45,29 @@ export default class FormAuthMethodOidcComponent extends Component {
     return this.args.model.prompts?.map((item) => item.value) ?? [];
   }
 
+  /**
+   * @returns {boolean}
+   */
+  isToggleChecked() {
+    return this.args.model.prompts?.find((i) => i.value === 'none');
+  }
+
   //actions
 
+  /**
+   * @param {string} value
+   */
+  @action
+  toggleField(value) {
+    this.skipPromptsList = !this.skipPromptsList;
+    //If toggle is on, then add `none` to model, else remove it
+    if (this.skipPromptsList) {
+      this.args.model.prompts = [{ value }];
+    } else {
+      this.args.model.prompts = [];
+    }
+  }
+
   /**
    * @param {string} option
    * @param {object} event
@@ -54,7 +76,6 @@ export default class FormAuthMethodOidcComponent extends Component {
   updatePrompt(value, event) {
     const currentSelection = { value };
     const previousSelection = this.args.model.prompts || [];
-
     // Add the selected option to the model, only when the checkbox is in checked state
     if (event.target.checked) {
       this.args.model.prompts = [...previousSelection, currentSelection];
@@ -63,6 +84,7 @@ export default class FormAuthMethodOidcComponent extends Component {
       const removeSelection = previousSelection.filter(
         (prompt) => prompt.value !== value,
       );
+
       this.args.model.prompts = [...removeSelection];
     }
   }

ui/admin/app/styles/app.scss

@@ -319,6 +319,8 @@
 
 /* stylelint-disable selector-class-pattern */
 .oidc-prompts {
+  margin-left: 2.5rem;
+
   .hds-form-group__control-field {
     margin-bottom: 0.5rem;
   }

ui/admin/tests/acceptance/auth-methods/create-test.js

@@ -43,6 +43,7 @@ module('Acceptance | auth-methods | create', function (hooks) {
 
   const CLAIMS_SCOPES_BTN_SELECTOR = '[name="claims_scopes"] button';
   const CLAIMS_SCOPES_INPUT_SELECTOR = '[name="claims_scopes"] input';
+  const TOGGLE_SELECTOR = '[name="prompts"]';
   let getAuthMethodsCount;
   let featuresService;
 
@@ -108,7 +109,7 @@ module('Acceptance | auth-methods | create', function (hooks) {
   });
 
   test('Users can create new oidc auth method', async function (assert) {
-    assert.expect(13);
+    assert.expect(14);
     const count = getAuthMethodsCount();
 
     await visit(`${urls.authMethods}/new?type=oidc`);
@@ -135,6 +136,10 @@ module('Acceptance | auth-methods | create', function (hooks) {
     await fillIn('[name="max_age"]', '5');
     await fillIn('[name="api_url_prefix"]', 'api_url_prefix');
     await click('[id="consent"]', 'consent');
+
+    //If skip prompts toggle is clicked, then we hide the rest of the prompt options
+    await click(TOGGLE_SELECTOR);
+    assert.dom('[id="select_account"]').isNotVisible();
     await click(SAVE_BTN_SELECTOR);
 
     assert.strictEqual(getAuthMethodsCount(), count + 1);
@@ -154,7 +159,7 @@ module('Acceptance | auth-methods | create', function (hooks) {
     assert.deepEqual(authMethod.attributes.idp_ca_certs, ['certificates']);
     assert.strictEqual(authMethod.attributes.max_age, 5);
     assert.strictEqual(authMethod.attributes.api_url_prefix, 'api_url_prefix');
-    assert.deepEqual(authMethod.attributes.prompts, ['consent']);
+    assert.deepEqual(authMethod.attributes.prompts, ['none']);
   });
 
   test('Users can create a new ldap auth method', async function (assert) {

ui/admin/tests/acceptance/auth-methods/update-test.js

@@ -51,6 +51,8 @@ module('Acceptance | auth-methods | update', function (hooks) {
     '[name="claims_scopes"] [data-test-remove-button]';
   const CLAIMS_SCOPES_BTN_SELECTOR = '[name="claims_scopes"] button';
   const CLAIMS_SCOPES_INPUT_SELECTOR = '[name="claims_scopes"] input';
+  const TOGGLE_SELECTOR = '[name="prompts"]';
+
   const instances = {
     scopes: {
       global: null,
@@ -173,7 +175,7 @@ module('Acceptance | auth-methods | update', function (hooks) {
     await click(IDP_CERTS_BTN_SELECTOR);
     await fillIn('[name="max_age"]', '5');
     await fillIn('[name="api_url_prefix"]', 'api_url_prefix');
-    await click('[id="none"]', 'none');
+    await click(TOGGLE_SELECTOR);
     await click('form [type="submit"]:not(:disabled)');
 
     const authMethod = this.server.schema.authMethods.findBy({ name });
@@ -192,7 +194,7 @@ module('Acceptance | auth-methods | update', function (hooks) {
     assert.deepEqual(authMethod.attributes.idp_ca_certs, ['certificates']);
     assert.strictEqual(authMethod.attributes.max_age, 5);
     assert.strictEqual(authMethod.attributes.api_url_prefix, 'api_url_prefix');
-    assert.deepEqual(authMethod.attributes.prompts, ['consent', 'none']);
+    assert.deepEqual(authMethod.attributes.prompts, ['none']);
   });
 
   test('can update an ldap auth method and save changes', async function (assert) {