Add minor CSS to make long value copy even easier (#7829)

web-console/package.json

@@ -29,7 +29,7 @@
     "compile": "./script/build",
     "pretest": "./script/build",
     "run": "./script/run",
-    "test": "jest --silent 2>&1",
+    "test": "npm run tslint && jest --silent 2>&1",
     "coverage": "jest --coverage",
     "update-snapshots": "jest -u",
     "tslint": "./node_modules/.bin/tslint -c tslint.json --project tsconfig.json --formatters-dir ./node_modules/awesome-code-style/formatter 'src/**/*.ts?(x)'",

web-console/src/components/action-icon/action-icon.spec.tsx

@@ -16,11 +16,11 @@
  * limitations under the License.
  */
 
+import { IconNames } from '@blueprintjs/icons';
 import * as React from 'react';
 import { render } from 'react-testing-library';
 
 import { ActionIcon } from './action-icon';
-import { IconNames } from '@blueprintjs/icons';
 
 describe('action icon', () => {
   it('matches snapshot', () => {

web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap

@@ -4,7 +4,13 @@ exports[`table cell matches snapshot array long 1`] = `
 <span
   class="table-cell truncated"
 >
-  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16 ...323 omitted... 7, 98, 99]
+  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16
+  <span
+    class="omitted"
+  >
+    ...323 omitted...
+  </span>
+  7, 98, 99]
   <span
     class="bp3-icon bp3-icon-clipboard action-icon"
     icon="clipboard"
@@ -43,7 +49,13 @@ exports[`table cell matches snapshot truncate 1`] = `
 <span
   class="table-cell truncated"
 >
-  testtesttesttesttesttesttesttesttesttesttesttesttesttestt ...329 omitted... sttesttest
+  testtesttesttesttesttesttesttesttesttesttesttesttesttestt
+  <span
+    class="omitted"
+  >
+    ...329 omitted...
+  </span>
+  sttesttest
   <span
     class="bp3-icon bp3-icon-clipboard action-icon"
     icon="clipboard"

web-console/src/components/table-cell/table-cell.scss

@@ -30,8 +30,23 @@
   }
 
   &.truncated {
+    position: relative;
+    width: 100%;
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding-right: 16px;
+
+    .omitted {
+      margin: 0 0.2em;
+      font-style: italic;
+    }
+
     .action-icon {
-      margin-left: 5px;
+      position: absolute;
+      top: 0;
+      right: 0;
     }
   }
 }

web-console/src/components/table-cell/table-cell.tsx

@@ -33,13 +33,23 @@ export interface NullTableCellProps extends React.Props<any> {
   unparseable?: boolean;
 }
 
+interface ShortParts {
+  prefix: string;
+  omitted: string;
+  suffix: string;
+}
+
 export class TableCell extends React.Component<NullTableCellProps, {}> {
   static MAX_CHARS_TO_SHOW = 50;
 
   static possiblyTruncate(str: string): React.ReactNode {
     if (str.length < TableCell.MAX_CHARS_TO_SHOW) return str;
+
+    const { prefix, omitted, suffix } = TableCell.shortenString(str);
     return <span className="table-cell truncated">
-      {TableCell.shortenString(str)}
+      {prefix}
+      <span className="omitted">{omitted}</span>
+      {suffix}
       <ActionIcon
         icon={IconNames.CLIPBOARD}
         onClick={() => {
@@ -53,13 +63,17 @@ export class TableCell extends React.Component<NullTableCellProps, {}> {
     </span>;
   }
 
-  static shortenString(str: string): string {
+  static shortenString(str: string): ShortParts {
     // Print something like:
     // BAAAArAAEiQKpDAEAACwZCBAGSBgiSEAAAAQpAIDwAg...23 omitted...gwiRoQBJIC
     const omit = str.length - (TableCell.MAX_CHARS_TO_SHOW + 17);
     const prefix = str.substr(0, str.length - (omit + 10));
     const suffix = str.substr(str.length - 10);
-    return `${prefix} ...${omit} omitted... ${suffix}`;
+    return {
+      prefix,
+      omitted: `...${omit} omitted...`,
+      suffix
+    };
   }
 
   render() {