feat(plugins/plugin-client-common): kubectl labels ui should be more easily copy/pasteable

1) our dom structure is not easy to copy/paste; e.g. triple click does not work, and our text has a key | value, which is not standard
2) we should add a click-to-copy feature

this pr changes key | value to key=value, and enables triple-click select and adds a click-to-copy

Author: starpit

plugins/plugin-client-common/src/components/spi/DescriptionList/impl/PatternFlyLabelList.tsx

@@ -17,26 +17,59 @@
 import React from 'react'
 import { LabelGroup, Label } from '@patternfly/react-core'
 
-import Props from '../model'
+import BaseProps from '../model'
+
+import Tooltip from '../../Tooltip'
 
 import '../../../../../web/scss/components/DescriptionList/PatternFlyLabelList.scss'
 
-export default function PatternFlyDescriptionList(props: Omit<Props, 'as'>) {
-  return (
-    <div
-      className={[props.className, 'kui--description-list', 'kui--label-list', 'flex-fill', 'padding-content'].join(
-        ' '
-      )}
-    >
-      <LabelGroup className="kui--description-list-group" numLabels={10}>
-        {props.groups.map((group, idx) => (
-          <Label key={idx} className="kui--description-list-term" data-term={group.term}>
-            <span className="kui--description-list-label-key">{group.term}</span>
-            <strong className="slightly-deemphasize small-left-pad small-right-pad">|</strong>
-            <span className="map-value">{group.description}</span>
-          </Label>
-        ))}
-      </LabelGroup>
-    </div>
-  )
+type Props = Omit<BaseProps, 'as'>
+type State = {
+  className: string
+}
+
+export default class PatternFlyDescriptionList extends React.PureComponent<Props, State> {
+  public constructor(props: Props) {
+    super(props)
+    this.state = {
+      className: [
+        this.props.className,
+        'kui--description-list',
+        'kui--label-list',
+        'flex-fill',
+        'padding-content'
+      ].join(' ')
+    }
+  }
+
+  private readonly _onClick = (evt: React.MouseEvent<HTMLSpanElement>) => {
+    const key = evt.currentTarget.getAttribute('data-term')
+    const value = evt.currentTarget.getAttribute('data-description')
+    navigator.clipboard.writeText(`${key}=${value}`)
+  }
+
+  public render() {
+    return (
+      <div className={this.state.className}>
+        <LabelGroup className="kui--description-list-group" numLabels={10}>
+          {this.props.groups.map((group, idx) => (
+            <Tooltip key={idx} content="Click to copy" position="bottom">
+              <Label
+                className="kui--description-list-term"
+                data-term={group.term}
+                data-description={group.description}
+                onClick={this._onClick}
+              >
+                <div>
+                  <span className="kui--description-list-label-key">{group.term}</span>
+                  <span className="slightly-deemphasize">=</span>
+                  <span className="map-value">{group.description}</span>
+                </div>
+              </Label>
+            </Tooltip>
+          ))}
+        </LabelGroup>
+      </div>
+    )
+  }
 }

plugins/plugin-client-common/web/scss/components/DescriptionList/PatternFlyLabelList.scss

@@ -27,10 +27,57 @@
 
   @include DescriptionListTerm {
     background-color: var(--color-base02);
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--color-base03);
+    }
   }
 }
 
 @include LabelKey {
   font-weight: 500;
   color: var(--color-base0D);
 }
+
+/** click effect, adapted from https://codepen.io/ash_s_west/pen/GRZbvym @starpit 20220903 */
+@include DescriptionListTerm {
+  & {
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s; /* Safari */
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    border-radius: 2em;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: all 0.5s;
+    box-shadow: 0 0 1em 0.5em var(--color-text-01);
+  }
+
+  &:active:after {
+    box-shadow: 0 0 0 0 var(--color-text-01);
+    position: absolute;
+    border-radius: 2em;
+    left: 0;
+    top: 0;
+    opacity: 1;
+    transition: 0s;
+  }
+
+  &:active {
+    top: 1px;
+  }
+}