Annotations display redesign (rancher#9835)

* Added new colors to yaml

* Added tooltip on click

* Clean up code

* Added i18n for text and code clean up

* Fixed typo

shell/assets/styles/themes/_dark.scss

@@ -31,6 +31,24 @@
 
   $drag-over: #DCDEE7;
 
+  // The library that decorates the code blocks in CodeMirror uses the same colours for light and dark themes.
+  // This causes a contrast and accessibility issues.
+  // To fix the issues we have added new colors to the code blocks in CodeMirror for light and dark themes.
+  $cm-meta: #FFFFFF;
+  $cm-string: #5CE6FF;
+  $cm-number: #63F7C1;
+  $cm-keyword: #FF9C9C;
+  $cm-atom: #CC8DBF;
+  $cm-comment: #E78957;
+
+  // Status colors Yaml variables
+  --cm-meta: #{$cm-meta};
+  --cm-string: #{$cm-string};
+  --cm-number: #{$cm-number};
+  --cm-keyword: #{$cm-keyword};
+  --cm-atom: #{$cm-atom};
+  --cm-comment: #{$cm-comment};
+
   --default                    : #{$dark};
   --default-text               : #{$light};
   --default-hover-bg           : #{darken($dark, 10%)};
@@ -211,4 +229,5 @@
 
   --product-icon               : #{$lighter};
   --product-icon-active        : #{$lightest};
+  --annotations-hover-bg       : #{$darkest};
 }

shell/assets/styles/themes/_light.scss

@@ -42,6 +42,17 @@ $selected: rgba(#3D98D3, .5);
 
 $drag-over: #DCDEE7;
 
+
+// The library that decorates the code blocks in CodeMirror uses the same colours for light and dark themes.
+// This causes a contrast and accessibility issues.
+// To fix the issues we have added new colors to the code blocks in CodeMirror for light and dark themes.
+$cm-meta: #141419;
+$cm-string: #00529F;
+$cm-number: #005E3B;
+$cm-keyword: #B94545;
+$cm-atom: #921E80;
+$cm-comment: #8F5536;
+
 BODY, .theme-light {
 
   --primary                    : #{$primary};
@@ -55,6 +66,14 @@ BODY, .theme-light {
   --primary-light-bg           : #{rgba($primary, 0.05)};
 
 
+  // Status colors Yaml variables
+  --cm-meta: #{$cm-meta};
+  --cm-string: #{$cm-string};
+  --cm-number: #{$cm-number};
+  --cm-keyword: #{$cm-keyword};
+  --cm-atom: #{$cm-atom};
+  --cm-comment: #{$cm-comment};
+
   .text-primary {
     color: var(--primary) !important;
   }
@@ -86,7 +105,6 @@ BODY, .theme-light {
   --link-light-bg           : #{rgba($link, 0.05)};
 
 
-
   .text-link {
     color: var(--link) !important;
   }
@@ -541,4 +559,6 @@ BODY, .theme-light {
 
   --product-icon               : #{$darker};
   --product-icon-active        : #{$darkest};
+
+  --annotations-hover-bg       : #{$lighter};
 }

shell/assets/translations/en-us.yaml

@@ -111,6 +111,8 @@ generic:
           =1 {Matches 1 of {total, number}: "{sample}"}
           other {Matches {matched, number} of {total, number}, including "{sample}"}
         }
+  copyValue: Copy value
+  valueCopied: Value copied!
 
 locale:
   en-us: English

shell/components/CodeMirror.vue

@@ -162,6 +162,34 @@ export default {
       height: initial;
       background: none
     }
+    .cm-s-base16-dark .cm-atom,
+    .cm-s-base16-light .cm-atom {
+      color: var(--cm-atom);
+    }
+
+    .cm-meta {
+      color: var(--cm-meta);
+    }
+
+    .cm-s-base16-dark .cm-comment,
+    .cm-s-base16-light .cm-comment {
+      color: var(--cm-meta);
+    }
+
+    .cm-s-base16-dark .cm-string,
+    .cm-s-base16-light .cm-string {
+      color: var(--cm-string);
+    }
+
+    .cm-s-base16-dark span.cm-keyword,
+    .cm-s-base16-light span.cm-keyword {
+      color: var(--cm-keyword);
+    }
+
+    .cm-s-base16-dark span.cm-number,
+    .cm-s-base16-light span.cm-number {
+      color: var(--cm-number);
+    }
 
     &.as-text-area {
       min-height: 40px;

shell/components/CopyToClipboardText.vue

@@ -9,7 +9,12 @@ export default {
     plain: {
       type:    Boolean,
       default: false
-    }
+    },
+    // If false Show toolTip instead of label before copy-to-clipboard icon
+    showLabel: {
+      type:    Boolean,
+      default: true
+    },
   },
 
   data() {
@@ -28,28 +33,50 @@ export default {
         if (t.tagName === 'I') {
           t = t.parentElement || t;
         }
+
         setTimeout(() => {
           this.copied = false;
-        }, 500);
+        }, 800);
       }
-    },
+    }
   }
 };
 </script>
 
 <template>
   <a
+    v-tooltip="!showLabel ? {content: $store.getters['i18n/t']('generic.copyValue')} : {content: null}"
     class="copy-to-clipboard-text"
     :class="{ 'copied': copied, 'plain': plain}"
     href="#"
     @click="clicked"
   >
-    {{ text }} <i
-      class="icon"
-      :class="{ 'icon-copy': !copied, 'icon-checkmark': copied}"
-    />
+    <span v-if="showLabel">{{ text }}</span>
+    <v-popover
+      popover-class="clipboard-text-copied"
+      placement="top"
+      :trigger="!showLabel ? 'click' : ''"
+      :open="copied && !showLabel"
+    >
+      <i
+        class="icon"
+        :class="{ 'icon-copy': !copied, 'icon-checkmark': copied}"
+      />
+      <template slot="popover">
+        <span>{{ t('generic.valueCopied') }}</span>
+      </template>
+    </v-popover>
   </a>
 </template>
+<style lang="scss">
+  .clipboard-text-copied {
+    .wrapper {
+      .popover-inner {
+        background: var(--tooltip-bg);
+      }
+    }
+  }
+</style>
 <style lang="scss" scoped>
   .copy-to-clipboard-text {
     &.plain {

shell/components/DetailText.vue

@@ -2,12 +2,15 @@
 import { mapGetters } from 'vuex';
 import { asciiLike, nlToBr } from '@shell/utils/string';
 import { HIDE_SENSITIVE } from '@shell/store/prefs';
-import CopyToClipboard from '@shell/components/CopyToClipboard';
 import CodeMirror from '@shell/components/CodeMirror';
 import { binarySize } from '@shell/utils/crypto';
+import CopyToClipboardText from '@shell/components/CopyToClipboardText';
 
 export default {
-  components: { CopyToClipboard, CodeMirror },
+  components: {
+    CopyToClipboardText,
+    CodeMirror
+  },
 
   props: {
     label: {
@@ -150,55 +153,52 @@ export default {
       {{ label }}
     </h5>
 
-    <span
-      v-if="isEmpty"
-      v-t="'detailText.empty'"
-      class="text-italic"
-    />
-    <span
-      v-else-if="isBinary"
-      class="text-italic"
-    >{{ body }}</span>
-
-    <CodeMirror
-      v-else-if="jsonStr"
-      :options="{mode:{name:'javascript', json:true}, lineNumbers:false, foldGutter:false, readOnly:true}"
-      :value="jsonStr"
-      :class="{'conceal': concealed}"
-    />
-
-    <span
-      v-else
-      v-clean-html="bodyHtml"
-      data-testid="detail-top_html"
-      :class="{'conceal': concealed, 'monospace': monospace && !isBinary}"
-    />
-
-    <template v-if="!isBinary && !jsonStr && isLong && !expanded">
-      <a
-        href="#"
-        @click.prevent="expand"
-      >{{ plusMore }}</a>
-    </template>
-
-    <CopyToClipboard
-      v-if="copy && !isBinary"
-      :text="value"
-      class="role-tertiary"
-      action-color=""
-    />
+    <div class="value-wrapper">
+      <CopyToClipboardText
+        v-if="copy && !isBinary"
+        :text="value"
+        :showLabel="false"
+        action-color=""
+      />
+      <span
+        v-if="isEmpty"
+        v-t="'detailText.empty'"
+        class="text-italic"
+      />
+      <span
+        v-else-if="isBinary"
+        class="text-italic "
+      >{{ body }}</span>
+
+      <CodeMirror
+        v-else-if="jsonStr"
+        :options="{mode:{name:'javascript', json:true}, lineNumbers:false, foldGutter:false, readOnly:true}"
+        :value="jsonStr"
+        :class="{'conceal': concealed}"
+      />
+
+      <span
+        v-else
+        v-clean-html="bodyHtml"
+        data-testid="detail-top_html"
+        :class="{'conceal': concealed, 'monospace': monospace && !isBinary}"
+      />
+
+      <template v-if="!isBinary && !jsonStr && isLong && !expanded">
+        <a
+          href="#"
+          @click.prevent="expand"
+        >{{ plusMore }}</a>
+      </template>
+    </div>
   </div>
 </template>
 
 <style lang='scss' scoped>
 .with-copy {
-  border: solid 1px var(--border);
-  border-radius: var(--border-radius);
-  padding: 10px;
+  padding: 8px 0;
   position: relative;
   background-color: var(--input-bg);
-  border-radius: var(--border-radius);
-  border: solid var(--border-width) var(--input-border);
 
   > button {
     position: absolute;
@@ -212,4 +212,13 @@ export default {
   white-space: pre-wrap;
   word-wrap: break-all
 }
+
+.value-wrapper {
+  display: flex;
+  padding: 8px 20px;
+
+  &:hover {
+    background: var(--annotations-hover-bg);
+  }
+}
 </style>

shell/components/DetailTop.vue

@@ -336,6 +336,19 @@ export default {
 
     .annotation {
       margin-top: 10px;
+
+      h5 {
+        font-weight: bold;
+        margin-left: 20px;
+      }
+
+      .icon {
+        margin-right: 10px;
+      }
+
+      .CodeMirror-lines {
+        margin: 0;
+      }
     }
 
     .label {