ui: Add version information back into the footer (#11803)

hashicorp · Dec 13, 2021 · 03ecc51 · 03ecc51
1 parent 338d740
commit 03ecc51
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/.changelog/11803.txt b/.changelog/11803.txt
@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Adds visible Consul version information
+```
diff --git a/ui/packages/consul-ui/app/components/app/index.scss b/ui/packages/consul-ui/app/components/app/index.scss
@@ -4,6 +4,9 @@
 .app .notifications {
   @extend %app-notifications;
 }
+.app footer {
+  @extend %footer;
+}
 %app-notifications {
   display: flex;
   flex-direction: column;
@@ -58,15 +61,37 @@
 %main-nav-vertical-hoisted.is-active > label > * {
   @extend %main-nav-horizontal-action-active;
 }
+%footer,
 %main-nav-sidebar,
 %main-notifications,
 main {
   @extend %transition-pushover;
 }
+%footer {
+  position: absolute;
+  z-index: 50;
+
+  color: rgb(var(--tone-gray-400));
+  font-size: var(--typo-size-800);
+
+  width: 250px;
+  padding-left: 25px;
+}
+.app footer {
+  top: calc(100vh - 42px);
+  top: calc(max(100vh, 460px) - 42px);
+}
+html.has-partitions.has-nspaces .app footer {
+  top: calc(100vh - 42px);
+  top: calc(max(100vh, 640px) - 42px);
+}
 %main-nav-sidebar {
-  transition-property: left;
   z-index: 10;
 }
+%footer,
+%main-nav-sidebar {
+  transition-property: left;
+}
 %app-notifications,
 main {
   margin-top: var(--chrome-height, 64px);
@@ -83,36 +108,37 @@ main {
   %main-nav-horizontal-toggle:checked ~ main .notifications {
     width: 100%;
   }
+  %main-nav-horizontal-toggle ~ footer,
   %main-nav-horizontal-toggle + header > div > nav:first-of-type {
     left: 0;
   }
+  %main-nav-horizontal-toggle:checked ~ footer,
   %main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
     left: calc(var(--chrome-width, 300px) * -1);
   }
   %main-nav-horizontal-toggle ~ main .notifications,
-  %main-nav-horizontal-toggle ~ main,
-  %main-nav-horizontal-toggle ~ footer {
+  %main-nav-horizontal-toggle ~ main {
     margin-left: var(--chrome-width, 300px);
   }
   %main-nav-horizontal-toggle:checked ~ main .notifications,
-  %main-nav-horizontal-toggle:checked ~ main,
-  %main-nav-horizontal-toggle:checked ~ footer {
+  %main-nav-horizontal-toggle:checked ~ main {
     margin-left: 0;
   }
 }
 @media #{$--lt-sidebar-open} {
   %main-nav-horizontal-toggle ~ main .notifications {
     width: 100%;
   }
+  %main-nav-horizontal-toggle:checked ~ footer,
   %main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
     left: 0;
   }
+  %main-nav-horizontal-toggle ~ footer,
   %main-nav-horizontal-toggle + header > div > nav:first-of-type {
     left: calc(var(--chrome-width, 300px) * -1);
   }
   %main-nav-horizontal-toggle ~ main .notifications,
-  %main-nav-horizontal-toggle ~ main,
-  %main-nav-horizontal-toggle ~ footer {
+  %main-nav-horizontal-toggle ~ main {
     margin-left: 0;
   }
 }
diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
@@ -388,6 +388,9 @@
     </:main>
 
     <:content-info>
+      <p>
+        Consul v{{env 'CONSUL_VERSION'}}
+      </p>
       {{{concat '<!-- ' (env 'CONSUL_GIT_SHA') '-->'}}}
     </:content-info>
   </App>