From 3743e913f70fc48f62d3f4bf78aa368efe1fb3b1 Mon Sep 17 00:00:00 2001
From: Jai <41024828+ChaiWithJai@users.noreply.github.com>
Date: Tue, 15 Nov 2022 14:13:57 -0500
Subject: [PATCH] feat: add tooltip to storage volumes (#15245)

* feat: add tooltip to storage volumes

* chore: move Tooltip into td to preserve style

* styling: add overflow-x to section (#15246)

* styling: add overflow-x to section

* refact: use media query with display block
---
 ui/app/styles/core/table.scss          |  5 +++++
 ui/app/styles/core/variables.scss      |  1 +
 ui/app/templates/csi/volumes/index.hbs | 16 +++++++++-------
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss
index 2e2f1d673..174b0d172 100644
--- a/ui/app/styles/core/table.scss
+++ b/ui/app/styles/core/table.scss
@@ -7,6 +7,11 @@
   border-collapse: separate;
   width: 100%;
 
+  @media #{$mq-table-overflow} {
+    display: block;
+    overflow-x: auto;
+  }
+
   &.is-fixed {
     table-layout: fixed;
 
diff --git a/ui/app/styles/core/variables.scss b/ui/app/styles/core/variables.scss
index deb853173..b5a134e32 100644
--- a/ui/app/styles/core/variables.scss
+++ b/ui/app/styles/core/variables.scss
@@ -46,6 +46,7 @@ $breadcrumb-item-active-color: $white;
 $breadcrumb-item-separator-color: $primary;
 
 $mq-hidden-gutter: 'only screen and (max-width : 960px)';
+$mq-table-overflow: 'only screen and (max-width : 1100px)';
 
 $timing-fast: 150ms;
 $timing-medium: 300ms;
diff --git a/ui/app/templates/csi/volumes/index.hbs b/ui/app/templates/csi/volumes/index.hbs
index f060825f7..535fea7c9 100644
--- a/ui/app/templates/csi/volumes/index.hbs
+++ b/ui/app/templates/csi/volumes/index.hbs
@@ -77,13 +77,15 @@
                 action=(action "gotoVolume" row.model)
               }}
             >
-              <LinkTo
-                @route="csi.volumes.volume"
-                @model={{row.model.idWithNamespace}}
-                class="is-primary"
-              >
-                {{row.model.name}}
-              </LinkTo>
+              <Tooltip @text={{row.model.plainId}}>
+                <LinkTo
+                  @route="csi.volumes.volume"
+                  @model={{row.model.idWithNamespace}}
+                  class="is-primary"
+                >
+                  {{row.model.name}}
+                </LinkTo>
+              </Tooltip>
             </td>
             {{#if this.system.shouldShowNamespaces}}
               <td data-test-volume-namespace>