Create TransparentProxy mode label for service instance page

ui/packages/consul-ui/app/components/consul/transparent-proxy/index.hbs

@@ -0,0 +1,3 @@
+<span class="consul-transparent-proxy">
+  {{t "components.consul.transparent-proxy"}}
+</span>

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

@@ -2,7 +2,8 @@ span.policy-service-identity,
 span.policy-node-identity,
 .leader,
 .consul-auth-method-type,
-.topology-metrics-source-type {
+.topology-metrics-source-type,
+.consul-transparent-proxy {
   @extend %pill-200, %frame-gray-600;
 }
 span.policy-service-identity::before,

ui/packages/consul-ui/app/templates/dc/services/instance.hbs

@@ -58,6 +58,9 @@ as |route|>
             </h1>
             <Consul::ExternalSource @item={{item}} />
             <Consul::Kind @item={{item}} @withInfo={{true}} />
+            {{#if proxy.ServiceProxy.Mode}}
+              <Consul::TransparentProxy />
+            {{/if}}
           </BlockSlot>
           <BlockSlot @name="nav">
             <dl>

ui/packages/consul-ui/mock-api/v1/catalog/connect/_

@@ -49,6 +49,7 @@ ${range(env('CONSUL_EXPOSED_COUNT', 3)).map((i) => `
 `)}
             ]
           },
+          "Mode": ${fake.random.boolean()},
           "DestinationServiceName": "${location.pathname.slice(4)}"
           ${ location.pathname.slice(4) === "service-0" ? `
           ,