refactor: 💡 consolidate host catalog type badges to component

addons/api/addon/models/host-set.js

@@ -1,5 +1,6 @@
 import GeneratedHostSetModel from '../generated/models/host-set';
 import { fragmentArray } from 'ember-data-model-fragments/attributes';
+import { types } from './host-catalog';
 
 export default class HostSetModel extends GeneratedHostSetModel {
   // =attributes
@@ -20,6 +21,14 @@ export default class HostSetModel extends GeneratedHostSetModel {
     return this.type === 'plugin';
   }
 
+  /**
+   * True if the host set is an unknown type.
+   * @type {boolean}
+   */
+  get isUnknown() {
+    return this.isPlugin && !types.includes(this.plugin?.name);
+  }
+
   /**
    * Returns if a host-set plugin is AWS or not
    * @type {boolean}
@@ -41,7 +50,9 @@ export default class HostSetModel extends GeneratedHostSetModel {
    * @type {string}
    */
   get compositeType() {
-    return this.plugin ? this.plugin.name : this.type;
+    if (this.isUnknown) return 'unknown';
+    if (this.isPlugin) return this.plugin.name;
+    return 'static';
   }
 
   /**

addons/api/tests/unit/models/host-set-test.js

@@ -183,15 +183,19 @@ module('Unit | Model | host set', function (hooks) {
   test('get compositeType return expected values', async function (assert) {
     assert.expect(3);
     const store = this.owner.lookup('service:store');
-    const modelPlugin = store.createRecord('host-set', {
+    const modelPlugin1 = store.createRecord('host-set', {
+      type: 'plugin',
+      plugin: { name: 'aws' },
+    });
+    const modelPlugin2 = store.createRecord('host-set', {
       type: 'plugin',
       plugin: { name: 'Test name' },
     });
     const modelStatic = store.createRecord('host-set', {
       type: 'static',
     });
-    assert.equal(typeof modelPlugin.compositeType, 'string');
-    assert.equal(modelPlugin.compositeType, 'Test name');
+    assert.equal(modelPlugin1.compositeType, 'aws');
+    assert.equal(modelPlugin2.compositeType, 'unknown');
     assert.equal(modelStatic.compositeType, 'static');
   });
 

ui/admin/app/components/host-catalog-type-badge/index.hbs

@@ -0,0 +1,15 @@
+{{#if @model.isStatic}}
+  <Rose::Badge>
+    {{t (concat 'resources.host-catalog.types.' @model.compositeType '.label')}}
+  </Rose::Badge>
+{{else if @model.isUnknown}}
+  <Rose::Badge>
+    {{t (concat 'resources.host-catalog.types.' @model.compositeType '.label')}}
+  </Rose::Badge>
+{{else}}
+  <Rose::Badge
+    @icon={{concat 'flight-icons/svg/' @model.compositeType '-color-16'}}
+  >
+    {{t (concat 'resources.host-catalog.types.' @model.compositeType '.label')}}
+  </Rose::Badge>
+{{/if}}

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs

@@ -26,7 +26,7 @@
             <p>{{host.description}}</p>
           </row.headerCell>
           <row.cell>
-            <Rose::Badge>{{host.type}}</Rose::Badge>
+            <HostCatalogTypeBadge @model={{host}} />
           </row.cell>
           <row.cell>
             <Copyable

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/index.hbs

@@ -25,29 +25,7 @@
             <p>{{hostSet.description}}</p>
           </row.headerCell>
           <row.cell>
-            {{#if hostSet.isStatic}}
-              <Rose::Badge>
-                {{t
-                  (concat
-                    'resources.host-set.types.' hostSet.compositeType '.label'
-                  )
-                }}
-              </Rose::Badge>
-            {{else}}
-              <Rose::Badge
-                @icon={{concat
-                  'flight-icons/svg/'
-                  hostSet.compositeType
-                  '-color-16'
-                }}
-              >
-                {{t
-                  (concat
-                    'resources.host-set.types.' hostSet.compositeType '.label'
-                  )
-                }}
-              </Rose::Badge>
-            {{/if}}
+            <HostCatalogTypeBadge @model={{hostSet}} />
           </row.cell>
           <row.cell>
             <Copyable

ui/admin/app/templates/scopes/scope/host-catalogs/index.hbs

@@ -56,43 +56,7 @@
                 <p>{{hostCatalog.description}}</p>
               </row.headerCell>
               <row.cell>
-                {{#if hostCatalog.isStatic}}
-                  <Rose::Badge>
-                    {{t
-                      (concat
-                        'resources.host-catalog.types.'
-                        hostCatalog.compositeType
-                        '.label'
-                      )
-                    }}
-                  </Rose::Badge>
-                {{else if hostCatalog.isUnknown}}
-                  <Rose::Badge>
-                    {{t
-                      (concat
-                        'resources.host-catalog.types.'
-                        hostCatalog.compositeType
-                        '.label'
-                      )
-                    }}
-                  </Rose::Badge>
-                {{else}}
-                  <Rose::Badge
-                    @icon={{concat
-                      'flight-icons/svg/'
-                      hostCatalog.compositeType
-                      '-color-16'
-                    }}
-                  >
-                    {{t
-                      (concat
-                        'resources.host-catalog.types.'
-                        hostCatalog.compositeType
-                        '.label'
-                      )
-                    }}
-                  </Rose::Badge>
-                {{/if}}
+                <HostCatalogTypeBadge @model={{hostCatalog}} />
               </row.cell>
               <row.cell>
                 <Copyable

ui/admin/app/templates/scopes/scope/targets/target/host-sources.hbs

@@ -38,9 +38,7 @@
                 <p>{{hostSet.model.description}}</p>
               </row.headerCell>
               <row.cell>
-                <Rose::Badge>{{t
-                    (concat 'resources.host-set.types.' hostSet.model.type)
-                  }}</Rose::Badge>
+                <HostCatalogTypeBadge @model={{hostSet.model}} />
               </row.cell>
               <row.cell>
                 <Copyable