From fdbbf82cda0924b3a0077b073acb9bd45cef7137 Mon Sep 17 00:00:00 2001
From: Qi Shu <shuqi7sq@gmail.com>
Date: Fri, 15 Mar 2019 17:30:47 -0700
Subject: [PATCH] Fixed bugs in retention cell and retention dialog (#7276)

* Fixed a bug when there are so many retention rules that it becomes unclickable; fixed a bug when retention dialog is at bottom and becomes unreachable

* Using class for CSS instead of inline style
---
 web-console/src/dialogs/retention-dialog.scss | 6 +++++-
 web-console/src/views/datasource-view.scss    | 4 ++++
 web-console/src/views/datasource-view.tsx     | 7 +++++--
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/web-console/src/dialogs/retention-dialog.scss b/web-console/src/dialogs/retention-dialog.scss
index dfd32a1dd8a..7c9b51d0616 100644
--- a/web-console/src/dialogs/retention-dialog.scss
+++ b/web-console/src/dialogs/retention-dialog.scss
@@ -18,12 +18,16 @@
 
 .retention-dialog {
   width: 750px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) !important;
 
   .dialog-body {
     overflow: scroll;
     max-height: 70vh;
 
-    .bp3-form-group {
+    .form-group {
       margin: 0 0 5px;
     }
 
diff --git a/web-console/src/views/datasource-view.scss b/web-console/src/views/datasource-view.scss
index 39834376653..b552485a2f0 100644
--- a/web-console/src/views/datasource-view.scss
+++ b/web-console/src/views/datasource-view.scss
@@ -20,6 +20,10 @@
   height: 100%;
   width: 100%;
 
+  .clickable-cell {
+    cursor: pointer;
+  }
+
   .ReactTable {
     position: absolute;
     top: 50px;
diff --git a/web-console/src/views/datasource-view.tsx b/web-console/src/views/datasource-view.tsx
index 6e62ced7211..aacaace4c01 100644
--- a/web-console/src/views/datasource-view.tsx
+++ b/web-console/src/views/datasource-view.tsx
@@ -362,9 +362,12 @@ GROUP BY 1`);
                 text = DatasourcesView.formatRules(rules);
               }
 
-              return <span>
+              return <span
+                onClick={() => this.setState({retentionDialogOpenOn: { datasource: row.original.datasource, rules: row.original.rules }})}
+                className={"clickable-cell"}
+              >
                 {text}&nbsp;
-                <a onClick={() => this.setState({retentionDialogOpenOn: { datasource: row.original.datasource, rules: row.original.rules }})}>&#x270E;</a>
+                <a>&#x270E;</a>
               </span>;
             }
           },