From fd0a7edd9bf28648a6c90645cc5df9ee04b12102 Mon Sep 17 00:00:00 2001
From: kawamataryou <ba068082@gmail.com>
Date: Fri, 27 Mar 2020 06:51:23 +0900
Subject: [PATCH 1/2] console: fix handle long column names during update event
 trigger creation (#4123)

---
 console/src/components/Common/Common.scss                    | 4 ++++
 .../src/components/Services/EventTrigger/Add/AddTrigger.js   | 5 ++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/console/src/components/Common/Common.scss b/console/src/components/Common/Common.scss
index fc556d9fc94ce..6ff4358c5bde2 100644
--- a/console/src/components/Common/Common.scss
+++ b/console/src/components/Common/Common.scss
@@ -1395,6 +1395,10 @@ code {
   width: 300px;
 }
 
+.wordBreakAll {
+  word-break: break-all;
+}
+
 /* container height subtracting top header and bottom scroll bar */
 $mainContainerHeight: calc(100vh - 50px - 25px);
 
diff --git a/console/src/components/Services/EventTrigger/Add/AddTrigger.js b/console/src/components/Services/EventTrigger/Add/AddTrigger.js
index 4d557fcd79d10..84107fd267325 100644
--- a/console/src/components/Services/EventTrigger/Add/AddTrigger.js
+++ b/console/src/components/Services/EventTrigger/Add/AddTrigger.js
@@ -249,7 +249,10 @@ class AddTrigger extends Component {
           />
         );
         return (
-          <div key={i} className={styles.padd_remove + ' col-md-4'}>
+          <div
+            key={i}
+            className={`${styles.padd_remove} ${styles.wordBreakAll} style col-md-4`}
+          >
             <div className={'checkbox '}>
               <label>
                 {inputHtml}

From 46e742a44c4b4592bcbf784f3b0777ff8ada07a4 Mon Sep 17 00:00:00 2001
From: kawamataryou <ba068082@gmail.com>
Date: Sat, 28 Mar 2020 05:44:22 +0900
Subject: [PATCH 2/2] console: Modified to use common column style elements

---
 console/src/components/Common/Common.scss            |  5 +++--
 .../Common/Permissions/PermissionStyles.scss         |  7 +------
 .../Services/Data/TablePermissions/Permissions.scss  |  9 ++-------
 .../Services/EventTrigger/Add/AddTrigger.js          |  2 +-
 .../Services/EventTrigger/Modify/OperationEditor.js  | 12 +++---------
 5 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/console/src/components/Common/Common.scss b/console/src/components/Common/Common.scss
index 6ff4358c5bde2..924ac8b5153b6 100644
--- a/console/src/components/Common/Common.scss
+++ b/console/src/components/Common/Common.scss
@@ -1395,8 +1395,9 @@ code {
   width: 300px;
 }
 
-.wordBreakAll {
-  word-break: break-all;
+.columnListElement {
+  float: left;
+  margin-right: 50px !important;
 }
 
 /* container height subtracting top header and bottom scroll bar */
diff --git a/console/src/components/Common/Permissions/PermissionStyles.scss b/console/src/components/Common/Permissions/PermissionStyles.scss
index 6d514988d5384..e528fcb217476 100644
--- a/console/src/components/Common/Permissions/PermissionStyles.scss
+++ b/console/src/components/Common/Permissions/PermissionStyles.scss
@@ -109,11 +109,6 @@ width: 85%;
     padding: 10px;
     word-wrap: break-word;
 
-    .columnListElement {
-      float: left;
-      margin-right: 50px;
-    }
-
     .form_permission_insert_set_wrapper {
       .permission_insert_set_wrapper {
         .configure_insert_set_checkbox {
@@ -176,4 +171,4 @@ color: firebrick;
 .bulkSelectCell {
   border-left: 4px double #ddd;
   width: 10%;
-}
\ No newline at end of file
+}
diff --git a/console/src/components/Services/Data/TablePermissions/Permissions.scss b/console/src/components/Services/Data/TablePermissions/Permissions.scss
index a287f6d98bbfa..747eafc5368e2 100644
--- a/console/src/components/Services/Data/TablePermissions/Permissions.scss
+++ b/console/src/components/Services/Data/TablePermissions/Permissions.scss
@@ -37,7 +37,7 @@
   // TODO: make common with Roles page
   .clickableCell {
     cursor: pointer;
-    
+
     .editPermsIcon {
       font-size: 12px;
       position: absolute;
@@ -117,11 +117,6 @@
     padding: 10px;
     word-wrap: break-word;
 
-    .columnListElement {
-      float: left;
-      margin-right: 50px;
-    }
-
     .form_permission_insert_set_wrapper {
       .permission_insert_set_wrapper {
         .configure_insert_set_checkbox {
@@ -165,4 +160,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/console/src/components/Services/EventTrigger/Add/AddTrigger.js b/console/src/components/Services/EventTrigger/Add/AddTrigger.js
index 84107fd267325..38edc5b19a93b 100644
--- a/console/src/components/Services/EventTrigger/Add/AddTrigger.js
+++ b/console/src/components/Services/EventTrigger/Add/AddTrigger.js
@@ -251,7 +251,7 @@ class AddTrigger extends Component {
         return (
           <div
             key={i}
-            className={`${styles.padd_remove} ${styles.wordBreakAll} style col-md-4`}
+            className={`${styles.padd_remove} ${styles.columnListElement}`}
           >
             <div className={'checkbox '}>
               <label>
diff --git a/console/src/components/Services/EventTrigger/Modify/OperationEditor.js b/console/src/components/Services/EventTrigger/Modify/OperationEditor.js
index a7fdf52aa9508..f582c3b4e0c3a 100644
--- a/console/src/components/Services/EventTrigger/Modify/OperationEditor.js
+++ b/console/src/components/Services/EventTrigger/Modify/OperationEditor.js
@@ -99,9 +99,7 @@ class OperationEditor extends React.Component {
             {definition.update ? (
               allTableColumns.map((col, i) => (
                 <div
-                  className={`${styles.opsCheckboxWrapper} col-md-4 ${
-                    styles.padd_remove
-                  }`}
+                  className={`${styles.opsCheckboxWrapper} ${styles.columnListElement} ${styles.padd_remove}`}
                   key={i}
                 >
                   <input
@@ -139,9 +137,7 @@ class OperationEditor extends React.Component {
           <div className={'col-md-12 ' + styles.padd_remove}>
             {operationTypes.map((qt, i) => (
               <div
-                className={`${styles.opsCheckboxWrapper} col-md-2 ${
-                  styles.padd_remove
-                } ${styles.cursorPointer}`}
+                className={`${styles.opsCheckboxWrapper} col-md-2 ${styles.padd_remove} ${styles.cursorPointer}`}
                 key={i}
                 onClick={() => {
                   dispatch(
@@ -173,9 +169,7 @@ class OperationEditor extends React.Component {
             {modifyTrigger.definition.update ? (
               allTableColumns.map((col, i) => (
                 <div
-                  className={`${styles.opsCheckboxWrapper} col-md-4 ${
-                    styles.padd_remove
-                  } ${styles.cursorPointer}`}
+                  className={`${styles.opsCheckboxWrapper} ${styles.columnListElement} ${styles.padd_remove} ${styles.cursorPointer}`}
                   key={i}
                   onClick={() => dispatch(toggleColumn('update', col.name))}
                 >