Backport UI: OIDC provider logo fix (#20263)

changelog/20263.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix OIDC provider logo showing when domain doesn't match
+```

ui/app/models/role-jwt.js

@@ -1,31 +1,30 @@
 import Model, { attr } from '@ember-data/model';
-import { computed } from '@ember/object';
 import parseURL from 'core/utils/parse-url';
 
 const DOMAIN_STRINGS = {
-  github: 'GitHub',
-  gitlab: 'GitLab',
-  google: 'Google',
-  ping: 'Ping',
-  okta: 'Okta',
-  auth0: 'Auth0',
+  'github.com': 'GitHub',
+  'gitlab.com': 'GitLab',
+  'google.com': 'Google',
+  'ping.com': 'Ping',
+  'okta.com': 'Okta',
+  'auth0.com': 'Auth0',
 };
 
 const PROVIDER_WITH_LOGO = ['GitLab', 'Google', 'Auth0'];
 
 export { DOMAIN_STRINGS, PROVIDER_WITH_LOGO };
 
-export default Model.extend({
-  authUrl: attr('string'),
+export default class RoleJwtModel extends Model {
+  @attr('string') authUrl;
 
-  providerName: computed('authUrl', function () {
-    let { hostname } = parseURL(this.authUrl);
-    let firstMatch = Object.keys(DOMAIN_STRINGS).find((name) => hostname.includes(name));
+  get providerName() {
+    const { hostname } = parseURL(this.authUrl);
+    const firstMatch = Object.keys(DOMAIN_STRINGS).find((name) => hostname.includes(name));
     return DOMAIN_STRINGS[firstMatch] || null;
-  }),
+  }
 
-  providerButtonComponent: computed('providerName', function () {
-    let { providerName } = this;
+  get providerButtonComponent() {
+    const { providerName } = this;
     return PROVIDER_WITH_LOGO.includes(providerName) ? `auth-button-${providerName.toLowerCase()}` : null;
-  }),
-});
+  }
+}

ui/tests/unit/models/role-jwt-test.js

@@ -1,4 +1,4 @@
-/* eslint qunit/no-conditional-assertions: "warn" */
+/* eslint-disable qunit/no-conditional-assertions */
 import { module, test } from 'qunit';
 import { setupTest } from 'ember-qunit';
 import { DOMAIN_STRINGS, PROVIDER_WITH_LOGO } from 'vault/models/role-jwt';
@@ -9,37 +9,50 @@ module('Unit | Model | role-jwt', function (hooks) {
   test('it exists', function (assert) {
     let model = this.owner.lookup('service:store').createRecord('role-jwt');
     assert.ok(!!model);
-    assert.equal(model.providerName, null, 'no providerName');
-    assert.equal(model.providerButtonComponent, null, 'no providerButtonComponent');
+    assert.strictEqual(model.providerName, null, 'no providerName');
+    assert.strictEqual(model.providerButtonComponent, null, 'no providerButtonComponent');
   });
 
   test('it computes providerName when known provider url match fails', function (assert) {
     let model = this.owner.lookup('service:store').createRecord('role-jwt', {
       authUrl: 'http://example.com',
     });
 
-    assert.equal(model.providerName, null, 'no providerName');
-    assert.equal(model.providerButtonComponent, null, 'no providerButtonComponent');
+    assert.strictEqual(model.providerName, null, 'no providerName');
+    assert.strictEqual(model.providerButtonComponent, null, 'no providerButtonComponent');
   });
 
   test('it provides a providerName for listed known providers', function (assert) {
     assert.expect(12);
-    Object.keys(DOMAIN_STRINGS).forEach((domainPart) => {
-      let model = this.owner.lookup('service:store').createRecord('role-jwt', {
-        authUrl: `http://provider-${domainPart}.com`,
+    Object.keys(DOMAIN_STRINGS).forEach((domain) => {
+      const model = this.owner.lookup('service:store').createRecord('role-jwt', {
+        authUrl: `http://provider-${domain}`,
       });
 
-      let expectedName = DOMAIN_STRINGS[domainPart];
-      assert.equal(model.providerName, expectedName, `computes providerName: ${expectedName}`);
+      const expectedName = DOMAIN_STRINGS[domain];
+      assert.strictEqual(model.providerName, expectedName, `computes providerName: ${expectedName}`);
       if (PROVIDER_WITH_LOGO.includes(expectedName)) {
-        assert.equal(
+        assert.strictEqual(
           model.providerButtonComponent,
-          `auth-button-${domainPart}`,
-          `computes providerButtonComponent: ${domainPart}`
+          `auth-button-${expectedName.toLowerCase()}`,
+          `computes providerButtonComponent: ${domain}`
         );
       } else {
-        assert.equal(model.providerButtonComponent, null, `computes providerButtonComponent: ${domainPart}`);
+        assert.strictEqual(
+          model.providerButtonComponent,
+          null,
+          `computes providerButtonComponent: ${domain}`
+        );
       }
     });
   });
+
+  test('it does not return provider unless domain matches completely', function (assert) {
+    assert.expect(2);
+    const model = this.owner.lookup('service:store').createRecord('role-jwt', {
+      authUrl: `http://custom-auth0-provider.com`,
+    });
+    assert.strictEqual(model.providerName, null, `no providerName for custom URL`);
+    assert.strictEqual(model.providerButtonComponent, null, 'no providerButtonComponent for custom URL');
+  });
 });