From e5322b73765a579fa46afdeb6e98ddc70a8a5c61 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Wed, 28 Apr 2021 14:06:18 -0400
Subject: [PATCH] ui: Add TProxy Mode notice banner to service instance
 Upstreams tab (#10136)

---
 .changelog/10136.txt                          |  3 +++
 .../dc/services/instance/upstreams.hbs        | 24 +++++++++++++++++++
 .../consul-ui/translations/routes/en-us.yaml  |  6 +++++
 3 files changed, 33 insertions(+)
 create mode 100644 .changelog/10136.txt

diff --git a/.changelog/10136.txt b/.changelog/10136.txt
new file mode 100644
index 000000000..2db273953
--- /dev/null
+++ b/.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
+```
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/templates/dc/services/instance/upstreams.hbs b/ui/packages/consul-ui/app/templates/dc/services/instance/upstreams.hbs
index 4034f711a..c77b9d2d2 100644
--- a/ui/packages/consul-ui/app/templates/dc/services/instance/upstreams.hbs
+++ b/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}}
diff --git a/ui/packages/consul-ui/translations/routes/en-us.yaml b/ui/packages/consul-ui/translations/routes/en-us.yaml
index 9b0ff275c..136f27e4e 100644
--- a/ui/packages/consul-ui/translations/routes/en-us.yaml
+++ b/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