Badge: option to show short/full versions of contents (#1397)

* add button to expand and view whole badge contents

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* revert font changes due to update elsewhere already existing

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* make expanding icon smaller and not focusable

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* extended badge content by click, selecting text from label doesn't trigger auto-closing

Signed-off-by: Roman <ixrock@gmail.com>

* fix: hover only intercative badges (with extra content)

Signed-off-by: Roman <ixrock@gmail.com>

* added common document/selectionchange watcher

Signed-off-by: Roman <ixrock@gmail.com>

* lint fixes

Signed-off-by: Roman <ixrock@gmail.com>

* Convert Badge to CSS Modules

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Align Badge styles across components

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Cleaning up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Not closing badge if user started to select text

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Co-authored-by: Sebastian Malton <sebastian@malton.name>
Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+workloads-pods/pod-details-container.scss

@@ -58,8 +58,4 @@
 
     @include pod-status-colors;
   }
-
-  .Badge {
-    white-space: normal;
-  }
 }

src/renderer/components/+workloads-pods/pod-details.tsx

@@ -142,7 +142,7 @@ export class PodDetails extends React.Component<Props> {
                 <Badge
                   key={type}
                   label={type}
-                  className={cssNames({ disabled: status === "False" })}
+                  disabled={status === "False"}
                   tooltip={`Last transition time: ${lastTransitionTime}`}
                 />
               );

src/renderer/components/+workloads-pods/pods.tsx

@@ -127,7 +127,7 @@ export class Pods extends React.Component<Props> {
           { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
         ]}
         renderTableContents={(pod: Pod) => [
-          <Badge flat key="name" label={pod.getName()} tooltip={pod.getName()} />,
+          <Badge flat key="name" label={pod.getName()} tooltip={pod.getName()} expandable={false} />,
           <KubeObjectStatusIcon key="icon" object={pod} />,
           pod.getNs(),
           this.renderContainersStatus(pod),
@@ -145,7 +145,7 @@ export class Pods extends React.Component<Props> {
             );
           }),
           pod.getNodeName() ?
-            <Badge flat key="node" className="node" tooltip={pod.getNodeName()}>
+            <Badge flat key="node" className="node" tooltip={pod.getNodeName()} expandable={false}>
               <Link to={getDetailsUrl(nodesApi.getUrl({ name: pod.getNodeName() }))} onClick={stopPropagation}>
                 {pod.getNodeName()}
               </Link>