Use FlightIcon component for external sources

ui/packages/consul-ui/app/components/consul/external-source/index.hbs

@@ -5,9 +5,10 @@
           <dt>
             <span
               data-test-external-source={{externalSource}}
-              class="consul-external-source {{externalSource}}"
+              class="consul-external-source"
               ...attributes
             >
+              <FlightIcon @name={{external-source-icon-map externalSource}} class="mr-1.5 w-3 h-3"  />
               Registered via {{t (concat "common.brand." externalSource)}}
             </span>
           </dt>
@@ -32,9 +33,10 @@
   {{else if externalSource}}
     <span
       data-test-external-source={{externalSource}}
-      class="consul-external-source {{externalSource}}"
+      class="consul-external-source"
       ...attributes
     >
+      <FlightIcon @name={{external-source-icon-map externalSource}} class="mr-1.5 h-3 w-3" />
       {{#if @label}}
         {{@label}}
       {{else}}

ui/packages/consul-ui/app/components/consul/external-source/index.scss

@@ -6,32 +6,32 @@
   --icon-size: icon-300;
 }
 
-.consul-external-source.kubernetes::before {
+// .consul-external-source.kubernetes::before {
-  @extend %with-logo-kubernetes-color-icon, %as-pseudo;
+//   @extend %with-logo-kubernetes-color-icon, %as-pseudo;
-}
+// }
-.consul-external-source.terraform::before {
+// .consul-external-source.terraform::before {
-  @extend %with-logo-terraform-color-icon, %as-pseudo;
+//   @extend %with-logo-terraform-color-icon, %as-pseudo;
-}
+// }
-.consul-external-source.nomad::before {
+// .consul-external-source.nomad::before {
-  @extend %with-logo-nomad-color-icon, %as-pseudo;
+//   @extend %with-logo-nomad-color-icon, %as-pseudo;
-}
+// }
-.consul-external-source.consul::before,
+// .consul-external-source.consul::before,
-.consul-external-source.consul-api-gateway::before {
+// .consul-external-source.consul-api-gateway::before {
-  @extend %with-logo-consul-color-icon, %as-pseudo;
+//   @extend %with-logo-consul-color-icon, %as-pseudo;
-}
+// }
-.consul-external-source.vault::before {
+// .consul-external-source.vault::before {
-  @extend %with-vault-300;
+//   @extend %with-vault-300;
-}
+// }
-.consul-external-source.lambda::before,
+// .consul-external-source.lambda::before,
-.consul-external-source.aws::before {
+// .consul-external-source.aws::before {
-  @extend %with-aws-300;
+//   @extend %with-aws-300;
-}
+// }
-.consul-external-source.leader::before {
+// .consul-external-source.leader::before {
-  @extend %with-star-outline-mask, %as-pseudo;
+//   @extend %with-star-outline-mask, %as-pseudo;
-}
+// }
-.consul-external-source.jwt::before {
+// .consul-external-source.jwt::before {
-  @extend %with-logo-jwt-color-icon, %as-pseudo;
+//   @extend %with-logo-jwt-color-icon, %as-pseudo;
-}
+// }
 .consul-external-source.oidc::before {
   @extend %with-logo-oidc-color-icon, %as-pseudo;
 }

ui/packages/consul-ui/app/components/pill/index.scss

@@ -30,9 +30,9 @@ span.policy-service-identity::before {
 %pill.oidc::before {
   @extend %with-logo-oidc-color-icon, %as-pseudo;
 }
-%pill.kubernetes::before {
+// %pill.kubernetes::before {
-  @extend %with-logo-kubernetes-color-icon, %as-pseudo;
+//   @extend %with-logo-kubernetes-color-icon, %as-pseudo;
-}
+// }
 %pill.aws-iam::before {
   --icon-name: icon-aws-color;
   content: '';

ui/packages/consul-ui/app/helpers/external-source-icon-map.js

@@ -0,0 +1,19 @@
+import { helper } from '@ember/component/helper';
+
+const EXTERNAL_SOURCE_ICON_MAP = {
+  kubernetes: 'kubernetes-color',
+  terraform: 'terraform-color',
+  nomad: 'nomad-color',
+  consul: 'consul-color',
+  'consul-api-gateway': 'consul-color',
+  vault: 'vault',
+  jwt: 'jwt-color',
+  aws: 'aws-color',
+  lambda: 'aws-lambda-color',
+};
+
+function externalSourceIconMap([icon]) {
+  return EXTERNAL_SOURCE_ICON_MAP[icon];
+}
+
+export default helper(externalSourceIconMap);

ui/packages/consul-ui/package.json

@@ -70,7 +70,7 @@
     "@hashicorp/design-system-components": "^1.0.4",
     "@hashicorp/design-system-tokens": "^1.0.0",
     "@hashicorp/ember-cli-api-double": "^4.0.0",
-    "@hashicorp/ember-flight-icons": "^2.0.12",
+    "@hashicorp/ember-flight-icons": "^3.0.0",
     "@html-next/vertical-collection": "^4.0.0",
     "@lit/reactive-element": "^1.2.1",
     "@xstate/fsm": "^1.4.0",

ui/yarn.lock

@@ -3315,11 +3315,26 @@
     ember-cli-babel "^7.26.11"
     ember-cli-htmlbars "^6.0.1"
 
+"@hashicorp/ember-flight-icons@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@hashicorp/ember-flight-icons/-/ember-flight-icons-3.0.0.tgz#fddeb8adfb036aa3573c55b7236b34172b49cba9"
+  integrity sha512-+QrV38Ix9dWLwMzdVcMcSmFfeSVGvWvB+3OVBq3ltOTmnoLPIAx8LT9UDZUZ1wa65ciO+a1YzLMmwWnQgX/r9Q==
+  dependencies:
+    "@hashicorp/flight-icons" "^2.11.0"
+    ember-auto-import "^2.4.1"
+    ember-cli-babel "^7.26.11"
+    ember-cli-htmlbars "^6.0.1"
+
 "@hashicorp/flight-icons@^2.10.0":
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/@hashicorp/flight-icons/-/flight-icons-2.10.0.tgz#24b03043bacda16e505200e6591dfef896ddacf1"
   integrity sha512-jYUA0M6Tz+4RAudil+GW/fHbhZPcKCiIZZAguBDviqbLneMkMgPOBgbXWCGWsEQ1fJzP2cXbUaio8L0aQZPWQw==
 
+"@hashicorp/flight-icons@^2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@hashicorp/flight-icons/-/flight-icons-2.11.0.tgz#1500be99a42ee8512e7caece4bdae60ce8790577"
+  integrity sha512-teFkUY2di63JZ2gsegQgS+3f5YEP+GPuycB1Z2O+weInIrL33Ds0/J+lxFCmi2vkPAeY5xOnsclHYnhU6xOSmA==
+
 "@html-next/vertical-collection@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@html-next/vertical-collection/-/vertical-collection-4.0.0.tgz#b3b3d52358e15e7ed46e028d12424dab994690ed"