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-deployments/deployment-details.scss

@@ -21,21 +21,19 @@
 
 .DeploymentDetails {
   .conditions {
-    .Badge {
-      &.available {
-        color: white;
-        background-color: $deployment-available;
-      }
+    .available {
+      color: white;
+      background-color: $deployment-available;
+    }
 
-      &.progressing {
-        color: white;
-        background-color: $deployment-progressing;
-      }
+    .progressing {
+      color: white;
+      background-color: $deployment-progressing;
+    }
 
-      &.replica-failure {
-        color: white;
-        background-color: $deployment-replicafailure;
-      }
+    .replica-failure {
+      color: white;
+      background-color: $deployment-replicafailure;
     }
   }
 }

src/renderer/components/+workloads-deployments/deployment-details.tsx

@@ -27,7 +27,6 @@ import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
 import type { Deployment } from "../../api/endpoints";
-import { cssNames } from "../../utils";
 import { PodDetailsTolerations } from "../+workloads-pods/pod-details-tolerations";
 import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities";
 import { podsStore } from "../+workloads-pods/pods.store";
@@ -118,7 +117,8 @@ export class DeploymentDetails extends React.Component<Props> {
                 <Badge
                   key={type}
                   label={type}
-                  className={cssNames({ disabled: status === "False" }, kebabCase(type))}
+                  disabled={status === "False"}
+                  className={kebabCase(type)}
                   tooltip={(
                     <>
                       <p>{message}</p>