feat: 🎸 Update scope dropdown in login to show current scope (#3308)

* feat: 🎸 Update scope dropdown in login to show current scope

* test: 💍 Update e2e tests

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

@@ -30,7 +30,6 @@ copy-error-detail-to-clipboard: Copy error detail to clipboard
 authenticate: Sign In
 deauthenticate: Sign Out
 choose-org: Choose Scope
-choose-different-org: Choose a different scope
 add-host-set: Create Host Set
 add-host: Create Host
 add-principals: Add Principals

e2e-tests/admin/tests/auth-method-ldap.spec.js

@@ -174,8 +174,8 @@ test(
       // Log in using ldap account
       await loginPage.logout(adminLoginName);
 
-      await page.getByText('Choose a different scope').click();
+      await page.getByRole('button', { name: /global/i }).click();
-      await page.getByRole('link', { name: orgName }).click();
+      await page.getByRole('option', { name: orgName }).click();
       await page.getByRole('link', { name: ldapAuthMethodName }).click();
       await loginPage.login(ldapUserName, ldapUserPassword);
       await expect(

e2e-tests/admin/tests/auth-method-oidc-vault.spec.js

@@ -129,8 +129,8 @@ test(
 
       // Log in using oidc account
       await loginPage.logout(adminLoginName);
-      await page.getByText('Choose a different scope').click();
+      await page.getByRole('button', { name: /global/i }).click();
-      await page.getByRole('link', { name: orgName }).click();
+      await page.getByRole('option', { name: orgName }).click();
       await page.getByRole('link', { name: oidcAuthMethodName }).click();
       const pagePromise = context.waitForEvent('page');
       await page.getByRole('button', { name: 'Sign In' }).click();

e2e-tests/admin/tests/auth-method-password.spec.js

@@ -58,8 +58,8 @@ test(
 
       // Log in using new account
       await loginPage.logout(adminLoginName);
-      await page.getByText('Choose a different scope').click();
+      await page.getByRole('button', { name: /global/i }).click();
-      await page.getByRole('link', { name: orgName }).click();
+      await page.getByRole('option', { name: orgName }).click();
       await page.getByRole('link', { name: authMethodName }).click();
 
       await loginPage.login(username, password);
@@ -97,8 +97,8 @@ test(
       // Log in using new password
       await loginPage.logout(adminLoginName);
 
-      await page.getByText('Choose a different scope').click();
+      await page.getByRole('button', { name: /global/i }).click();
-      await page.getByRole('link', { name: orgName }).click();
+      await page.getByRole('option', { name: orgName }).click();
       await page.getByRole('link', { name: authMethodName }).click();
       await loginPage.login(username, newPassword);
       await expect(

e2e-tests/admin/tests/change-password.spec.js

@@ -52,8 +52,8 @@ test(
 
       // Log in using new account
       await page.reload();
-      await page.getByText('Choose a different scope').click();
+      await page.getByRole('button', { name: /global/i }).click();
-      await page.getByRole('link', { name: org.name }).click();
+      await page.getByRole('option', { name: org.name }).click();
       await page.getByRole('link', { name: authMethod.name }).click();
       const loginPage = new LoginPage(page);
       await loginPage.login(username, password);
@@ -79,8 +79,8 @@ test(
 
       // Confirm user cannot log in with old password
       await loginPage.logout(username);
-      await page.getByText('Choose a different scope').click();
+      await page.getByRole('button', { name: /global/i }).click();
-      await page.getByRole('link', { name: org.name }).click();
+      await page.getByRole('option', { name: org.name }).click();
       await page.getByRole('link', { name: authMethod.name }).click();
       await page.getByLabel('Login Name').fill(username);
       await page.getByLabel('Password', { exact: true }).fill(password);

ui/admin/app/templates/scopes/scope/authenticate.hbs

@@ -28,23 +28,25 @@
 
             <Hds::Dropdown @listPosition='bottom-left' as |dd|>
               <dd.ToggleButton
-                @text={{t 'actions.choose-different-org'}}
+                @text={{@model.scope.displayName}}
-                @icon='org'
+                @icon={{if (eq @model.scope.id 'global') 'globe' 'org'}}
                 @color='secondary'
               />
-              <dd.Interactive
+              <dd.Checkmark
                 @route='scopes.scope.authenticate'
                 @model='global'
+                @selected={{eq @model.scope.id 'global'}}
               >
                 {{t 'titles.global'}}
-              </dd.Interactive>
+              </dd.Checkmark>
               {{#each this.sortedScopes as |scope|}}
-                <dd.Interactive
+                <dd.Checkmark
                   @route='scopes.scope.authenticate'
                   @model={{scope.id}}
+                  @selected={{eq @model.scope.id scope.id}}
                 >
                   {{scope.displayName}}
-                </dd.Interactive>
+                </dd.Checkmark>
               {{/each}}
             </Hds::Dropdown>
             <Hds::Separator />

ui/desktop/app/templates/scopes/scope/authenticate.hbs

@@ -18,17 +18,23 @@
 
     <Hds::Dropdown @listPosition='bottom-left' as |dd|>
       <dd.ToggleButton
-        @text={{t 'actions.choose-different-org'}}
+        @text={{@model.scope.displayName}}
-        @icon='org'
+        @icon={{if (eq @model.scope.id 'global') 'globe' 'org'}}
         @color='secondary'
       />
-      <dd.Interactive {{on 'click' (fn this.selectScope 'global' dd.close)}}>
+      <dd.Checkmark
+        @selected={{eq @model.scope.id 'global'}}
+        {{on 'click' (fn this.selectScope 'global' dd.close)}}
+      >
         {{t 'titles.global'}}
-      </dd.Interactive>
+      </dd.Checkmark>
       {{#each this.sortedScopes as |scope|}}
-        <dd.Interactive {{on 'click' (fn this.selectScope scope.id dd.close)}}>
+        <dd.Checkmark
+          @selected={{eq @model.scope.id scope.id}}
+          {{on 'click' (fn this.selectScope scope.id dd.close)}}
+        >
           {{scope.displayName}}
-        </dd.Interactive>
+        </dd.Checkmark>
       {{/each}}
     </Hds::Dropdown>