ui: Add TProxy Mode notice banner to service instance Upstreams tab (#10136)

.changelog/10136.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Adding a notice about how TransparentProxy mode affects the Upstreams list at the top of tab view
+```

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

@@ -35,6 +35,30 @@ as |route|>
           @filter={{filters}}
         />
       {{/if}}
+      {{#if (eq proxy.ServiceProxy.Mode 'transparent')}}
+      <Notice
+        @type="warning"
+      as |notice|>
+        <notice.Header>
+          <h3>{{t "routes.dc.services.instance.upstreams.tproxy-mode.header"}}</h3>
+        </notice.Header>
+        <notice.Body>
+          <p>
+           {{t "routes.dc.services.instance.upstreams.tproxy-mode.body"}}
+          </p>
+        </notice.Body>
+        <notice.Footer>
+          <p>
+            <Action
+              @href={{concat (env 'CONSUL_DOCS_URL') '/connect/transparent-proxy'}}
+              @external={{true}}
+            >
+              {{t "routes.dc.services.instance.upstreams.tproxy-mode.footer"}}
+            </Action>
+          </p>
+        </notice.Footer>
+      </Notice>
+      {{/if}}
       <DataCollection
         @type="upstream-instance"
         @sort={{sort.value}}

ui/packages/consul-ui/translations/routes/en-us.yaml

@@ -6,3 +6,9 @@ dc:
           <p>
             Upstreams are services that may receive traffic from this gateway. If you are not using Consul DNS, please make sure your <code>Host:</code> header uses the correct domain name for the gateway to correctly proxy to its upstreams. Learn more about configuring gateways in our <a href="{CONSUL_DOCS_URL}/connect/ingress-gateways" target="_blank" rel="noopener noreferrer">documentation</a>.
           </p>
+    instance:
+      upstreams:
+        tproxy-mode:
+          header: Transparent proxy mode
+          body: The upstreams listed on this page have been defined in a proxy registration. There may be more upstreams, though, as "transparent" mode is enabled on this proxy.
+          footer: Read the documentation