UI: OIDC provider logo fix (#20263)

* glimmerize role-jwt model, update test for use new case

* Fix issue #8949

* Update test

* Add changelog

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

@@ -4,33 +4,32 @@
  */
 
 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 () {
+  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 () {
+  get providerButtonComponent() {
     const { providerName } = this;
     return PROVIDER_WITH_LOGO.includes(providerName) ? `auth-button-${providerName.toLowerCase()}` : null;
-  }),
-});
+  }
+}

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

@@ -29,26 +29,35 @@ module('Unit | Model | role-jwt', function (hooks) {
 
   test('it provides a providerName for listed known providers', function (assert) {
     assert.expect(12);
-    Object.keys(DOMAIN_STRINGS).forEach((domainPart) => {
+    Object.keys(DOMAIN_STRINGS).forEach((domain) => {
       const model = this.owner.lookup('service:store').createRecord('role-jwt', {
-        authUrl: `http://provider-${domainPart}.com`,
+        authUrl: `http://provider-${domain}`,
       });
 
-      const expectedName = DOMAIN_STRINGS[domainPart];
+      const expectedName = DOMAIN_STRINGS[domain];
       assert.strictEqual(model.providerName, expectedName, `computes providerName: ${expectedName}`);
       if (PROVIDER_WITH_LOGO.includes(expectedName)) {
         assert.strictEqual(
           model.providerButtonComponent,
-          `auth-button-${domainPart}`,
-          `computes providerButtonComponent: ${domainPart}`
+          `auth-button-${expectedName.toLowerCase()}`,
+          `computes providerButtonComponent: ${domain}`
         );
       } else {
         assert.strictEqual(
           model.providerButtonComponent,
           null,
-          `computes providerButtonComponent: ${domainPart}`
+          `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');
+  });
 });