Fix overflow for SecretType. Fixes #1109 (#1117)

* Use overflow-wrap: anywhere for secret type. Fixes #1109 * Switch to break-word to avoid any change for secret value. * Update snapshot tests
vmware-tanzu · Aug 8, 2019 · 3ad4182 · 3ad4182
1 parent 47b6944
commit 3ad4182
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/dashboard/src/components/AppView/ResourceTable/ResourceItem/SecretItem/SecretContent.scss b/dashboard/src/components/AppView/ResourceTable/ResourceItem/SecretItem/SecretContent.scss
@@ -9,8 +9,12 @@
   margin: 0;
   min-width: 0;
   white-space: pre-wrap;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   padding-left: 0.3em;
   padding-right: 0.3em;
   color: inherit;
 }
+
+.SecretType {
+  overflow-wrap: break-word;
+}
diff --git a/dashboard/src/components/AppView/ResourceTable/ResourceItem/SecretItem/SecretItem.tsx b/dashboard/src/components/AppView/ResourceTable/ResourceItem/SecretItem/SecretItem.tsx
@@ -23,7 +23,7 @@ const SecretItem: React.SFC<ISecretItemRow> = props => {
   return (
     <React.Fragment>
       <td className="col-3">{resource.metadata.name}</td>
-      <td className="col-2">{resource.type}</td>
+      <td className="col-2 SecretType">{resource.type}</td>
       {isEmpty(resource.data) ? (
         <td className="col-7">
           <span>This Secret is empty</span>

diff --git a/...ents/AppView/ResourceTable/ResourceItem/SecretItem/__snapshots__/SecretItem.test.tsx.snap b/...ents/AppView/ResourceTable/ResourceItem/SecretItem/__snapshots__/SecretItem.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`renders a SecretItemDatum component for each Secret key 1`] = `
     foo
   </td>
   <td
-    className="col-2"
+    className="col-2 SecretType"
   >
     Opaque
   </td>
@@ -37,7 +37,7 @@ exports[`when there is an empty Secret displays a message 1`] = `
     foo
   </td>
   <td
-    className="col-2"
+    className="col-2 SecretType"
   >
     Opaque
   </td>
-Original file line number
+Diff line change
@@ Expand Up @@
         foo
       </td>
       <td
-        className="col-2"
+        className="col-2 SecretType"
       >
         Opaque
       </td>
@@ Expand Down Expand Up @@
         foo
       </td>
       <td
-        className="col-2"
+        className="col-2 SecretType"
       >
         Opaque
       </td>
@@ Expand Down @@