diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs b/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs index 6aadacc3ca..dc958b68a0 100644 --- a/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs @@ -1,3 +1,9 @@ - - {{t (concat "common.brand." @item.Type)}} - +{{#let (icon-mapping @item.Type) as |flightIcon|}} + {{log flightIcon}} + + {{#if flightIcon}} + + {{/if}} + {{t (concat "common.brand." @item.Type)}} + +{{/let}} diff --git a/ui/packages/consul-ui/app/components/consul/external-source/index.hbs b/ui/packages/consul-ui/app/components/consul/external-source/index.hbs index a910e69ee6..86742d4314 100644 --- a/ui/packages/consul-ui/app/components/consul/external-source/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/external-source/index.hbs @@ -8,7 +8,7 @@ class="consul-external-source" ...attributes > - + Registered via {{t (concat "common.brand." externalSource)}} @@ -36,7 +36,7 @@ class="consul-external-source" ...attributes > - + {{#if @label}} {{@label}} {{else}} diff --git a/ui/packages/consul-ui/app/components/consul/external-source/index.scss b/ui/packages/consul-ui/app/components/consul/external-source/index.scss index 9b992c9413..21232a860e 100644 --- a/ui/packages/consul-ui/app/components/consul/external-source/index.scss +++ b/ui/packages/consul-ui/app/components/consul/external-source/index.scss @@ -29,9 +29,9 @@ // .consul-external-source.leader::before { // @extend %with-star-outline-mask, %as-pseudo; // } -// .consul-external-source.jwt::before { -// @extend %with-logo-jwt-color-icon, %as-pseudo; -// } +.consul-external-source.jwt::before { + @extend %with-logo-jwt-color-icon, %as-pseudo; +} .consul-external-source.oidc::before { @extend %with-logo-oidc-color-icon, %as-pseudo; } diff --git a/ui/packages/consul-ui/app/components/pill/index.scss b/ui/packages/consul-ui/app/components/pill/index.scss index 6e2a82faf7..9beab83163 100644 --- a/ui/packages/consul-ui/app/components/pill/index.scss +++ b/ui/packages/consul-ui/app/components/pill/index.scss @@ -33,7 +33,7 @@ span.policy-service-identity::before { // %pill.kubernetes::before { // @extend %with-logo-kubernetes-color-icon, %as-pseudo; // } -%pill.aws-iam::before { - --icon-name: icon-aws-color; - content: ''; -} +// %pill.aws-iam::before { +// --icon-name: icon-aws-color; +// content: ''; +// } diff --git a/ui/packages/consul-ui/app/helpers/external-source-icon-map.js b/ui/packages/consul-ui/app/helpers/external-source-icon-map.js deleted file mode 100644 index 5a657b98d8..0000000000 --- a/ui/packages/consul-ui/app/helpers/external-source-icon-map.js +++ /dev/null @@ -1,19 +0,0 @@ -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); diff --git a/ui/packages/consul-ui/app/helpers/icon-mapping.js b/ui/packages/consul-ui/app/helpers/icon-mapping.js new file mode 100644 index 0000000000..9f561836e5 --- /dev/null +++ b/ui/packages/consul-ui/app/helpers/icon-mapping.js @@ -0,0 +1,28 @@ +import { helper } from '@ember/component/helper'; + +const ICON_MAPPING = { + kubernetes: 'kubernetes-color', + terraform: 'terraform-color', + nomad: 'nomad-color', + consul: 'consul-color', + 'consul-api-gateway': 'consul-color', + vault: 'vault', + aws: 'aws-color', + 'aws-iam': 'aws-color', + lambda: 'aws-lambda-color', +}; + +/** + * Takes a icon name, usually an external-source/auth-method-type, and maps it to a flight-icon name or returns undefined + * if the icon is not currently mapped to a flight-icon name. This is particularly useful when dealing with converting icons to + * use the `` component directly instead of our own css. If the icon is not available with `` you can leave + * it out of the mapping and handle it in the undefined case. + * + * @param {string} icon + * @returns {string|undefined} + */ +function iconMapping([icon]) { + return ICON_MAPPING[icon]; +} + +export default helper(iconMapping);