@rancher/shell 0.3.8 → 0.3.10

package/components/CodeMirror.vue

@@ -1,9 +1,18 @@
 <script>
 import { KEYMAP } from '@shell/store/prefs';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
 
 export default {
   name:  'CodeMirror',
   props: {
+    /**
+     * Sets the edit mode for Text Area.
+     * @values _EDIT, _VIEW
+     */
+    mode: {
+      type:    String,
+      default: _EDIT
+    },
     value: {
       type:     String,
       required: true,
@@ -11,14 +20,26 @@ export default {
     options: {
       type:    Object,
       default: () => {}
+    },
+    asTextArea: {
+      type:    Boolean,
+      default: false
     }
   },
 
   data() {
-    return { loaded: false };
+    return {
+      codeMirrorRef: null,
+      loaded:        false
+    };
   },
 
   computed: {
+
+    isDisabled() {
+      return this.mode === _VIEW;
+    },
+
     combinedOptions() {
       const theme = this.$store.getters['prefs/theme'];
       const keymap = this.$store.getters['prefs/get'](KEYMAP);
@@ -39,6 +60,12 @@ export default {
         showCursorWhenSelecting: true,
       };
 
+      if (this.asTextArea) {
+        out.lineNumbers = false;
+        out.tabSize = 0;
+        out.extraKeys = { Tab: false };
+      }
+
       Object.assign(out, this.options);
 
       return out;
@@ -58,35 +85,44 @@ export default {
   methods: {
 
     focus() {
-      if ( this.$refs.cm ) {
-        this.$refs.cm.codemirror.focus();
+      if ( this.$refs.codeMirrorRef ) {
+        this.$refs.codeMirrorRef.codemirror.focus();
       }
     },
 
     refresh() {
-      if ( this.$refs.cm ) {
-        this.$refs.cm.refresh();
+      if ( this.$refs.codeMirrorRef ) {
+        this.$refs.codeMirrorRef.refresh();
       }
     },
 
-    onReady(cm) {
+    onReady(codeMirrorRef) {
       this.$nextTick(() => {
-        cm.refresh();
+        codeMirrorRef.refresh();
+        this.codeMirrorRef = codeMirrorRef;
       });
-      this.$emit('onReady', cm);
+      this.$emit('onReady', codeMirrorRef);
     },
 
     onInput(newCode) {
       this.$emit('onInput', newCode);
     },
 
-    onChanges(cm, changes) {
-      this.$emit('onChanges', cm, changes);
+    onChanges(codeMirrorRef, changes) {
+      this.$emit('onChanges', codeMirrorRef, changes);
+    },
+
+    onFocus() {
+      this.$emit('onFocus', true);
+    },
+
+    onBlur() {
+      this.$emit('onFocus', false);
     },
 
     updateValue(value) {
-      if ( this.$refs.cm ) {
-        this.$refs.cm.codemirror.doc.setValue(value);
+      if ( this.$refs.codeMirrorRef ) {
+        this.$refs.codeMirrorRef.codemirror.doc.setValue(value);
       }
     }
   }
@@ -95,15 +131,21 @@ export default {
 
 <template>
   <client-only placeholder=" Loading...">
-    <div class="code-mirror">
+    <div
+      class="code-mirror"
+      :class="{['as-text-area']: asTextArea}"
+    >
       <codemirror
         v-if="loaded"
-        ref="cm"
+        ref="codeMirrorRef"
         :value="value"
         :options="combinedOptions"
+        :disabled="isDisabled"
         @ready="onReady"
         @input="onInput"
         @changes="onChanges"
+        @focus="onFocus"
+        @blur="onBlur"
       />
       <div v-else>
         Loading...
@@ -120,5 +162,95 @@ export default {
       height: initial;
       background: none
     }
+
+    &.as-text-area {
+      min-height: 40px;
+      position: relative;
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      padding: 10px;
+      background-color: var(--input-bg);
+      border-radius: var(--border-radius);
+      border: solid var(--border-width) var(--input-border);
+      color: var(--input-text);
+
+      &:hover {
+        border-color: var(--input-hover-border);
+      }
+
+      &:focus, &.focus {
+        outline: none;
+        border-color: var(--outline);
+      }
+
+      .CodeMirror-wrap pre {
+        word-break: break-word;
+      }
+      .CodeMirror-code {
+        .CodeMirror-line {
+          &:not(:last-child)>span:after,
+          .cm-markdown-single-trailing-space-odd:before,
+          .cm-markdown-single-trailing-space-even:before {
+            color: var(--muted);
+            position: absolute;
+            line-height: 20px;
+            pointer-events: none;
+          }
+          &:not(:last-child)>span:after {
+            content: '↵';
+            margin-left: 2px;
+          }
+          .cm-markdown-single-trailing-space-odd:before,
+          .cm-markdown-single-trailing-space-even:before {
+            font-weight: bold;
+            content: '·';
+          }
+        }
+      }
+
+      .CodeMirror-lines {
+        color: var(--input-text);
+        padding: 0;
+
+        .CodeMirror-line > span > span {
+          &.cm-overlay {
+            font-family: monospace;
+          }
+        }
+
+        .CodeMirror-line > span {
+          font-family: $body-font;
+        }
+      }
+
+      .CodeMirror-sizer {
+        min-height: 20px;
+      }
+
+      .CodeMirror-selected {
+        background-color: var(--primary) !important;
+      }
+
+      .CodeMirror-selectedtext {
+        color: var(--primary-text);
+      }
+
+      .CodeMirror-line::selection,
+      .CodeMirror-line > span::selection,
+      .CodeMirror-line > span > span::selection {
+        color: var(--primary-text);
+        background-color: var(--primary);
+      }
+
+      .CodeMirror-line::-moz-selection,
+      .CodeMirror-line > span::-moz-selection,
+      .CodeMirror-line > span > span::-moz-selection {
+        color: var(--primary-text);
+        background-color: var(--primary);
+      }
+    }
+
   }
+
 </style>

package/components/CompoundStatusBadge.vue

@@ -24,7 +24,7 @@ export default {
 
 <template>
   <div
-    v-tooltip.bottom="tooltipText"
+    v-clean-tooltip.bottom="tooltipText"
     class="compound-cluster-badge"
     :class="`bg-${badgeClass}`"
   >

package/components/ContainerResourceLimit.vue

@@ -26,6 +26,11 @@ export default {
       }
     },
 
+    handleGpuLimit: {
+      type:    Boolean,
+      default: true
+    },
+
     registerBeforeHook: {
       type:    Function,
       default: null
@@ -180,6 +185,7 @@ export default {
           :input-exponent="-1"
           :output-modifier="true"
           :base-unit="t('suffix.cpus')"
+          data-testid="cpu-reservation"
           @input="updateLimits"
         />
       </span>
@@ -192,6 +198,7 @@ export default {
           :input-exponent="2"
           :increment="1024"
           :output-modifier="true"
+          data-testid="memory-reservation"
           @input="updateLimits"
         />
       </span>
@@ -207,6 +214,7 @@ export default {
           :input-exponent="-1"
           :output-modifier="true"
           :base-unit="t('suffix.cpus')"
+          data-testid="cpu-limit"
           @input="updateLimits"
         />
       </span>
@@ -219,11 +227,15 @@ export default {
           :input-exponent="2"
           :increment="1024"
           :output-modifier="true"
+          data-testid="memory-limit"
           @input="updateLimits"
         />
       </span>
     </div>
-    <div class="row">
+    <div
+      v-if="handleGpuLimit"
+      class="row"
+    >
       <span class="col span-6">
         <UnitInput
           v-model="limitsGpu"
@@ -231,6 +243,7 @@ export default {
           :label="t('containerResourceLimit.limitsGpu')"
           :mode="mode"
           :base-unit="t('suffix.gpus')"
+          data-testid="gpu-limit"
           @input="updateLimits"
         />
       </span>

package/components/CopyCode.vue

@@ -53,7 +53,7 @@ export default {
 
 <template>
   <code
-    v-tooltip="tooltip"
+    v-clean-tooltip="tooltip"
     class="copy"
     @click.stop.prevent="clicked"
   ><slot /></code>

package/components/CruResource.vue

@@ -1,6 +1,6 @@
 <script>
 import isEmpty from 'lodash/isEmpty';
-import { createYaml } from '@shell/utils/create-yaml';
+import { createYamlWithOptions } from '@shell/utils/create-yaml';
 import { clone, get } from '@shell/utils/object';
 import { SCHEMA, NAMESPACE } from '@shell/config/types';
 import ResourceYaml from '@shell/components/ResourceYaml';
@@ -101,6 +101,11 @@ export default {
       default: null,
     },
 
+    preventEnterSubmit: {
+      type:    Boolean,
+      default: false,
+    },
+
     applyHooks: {
       type:    Function,
       default: null,
@@ -141,6 +146,11 @@ export default {
     description: {
       type:    String,
       default: ''
+    },
+
+    yamlModifiers: {
+      type:    Object,
+      default: undefined
     }
   },
 
@@ -296,7 +306,7 @@ export default {
       }
     },
 
-    createResourceYaml() {
+    createResourceYaml(modifiers) {
       const resource = this.resource;
 
       if ( typeof this.generateYaml === 'function' ) {
@@ -306,7 +316,7 @@ export default {
         const schemas = this.$store.getters[`${ inStore }/all`](SCHEMA);
         const clonedResource = clone(resource);
 
-        const out = createYaml(schemas, resource.type, clonedResource);
+        const out = createYamlWithOptions(schemas, resource.type, clonedResource, modifiers);
 
         return out;
       }
@@ -317,7 +327,7 @@ export default {
         await this.applyHooks(BEFORE_SAVE_HOOKS);
       }
 
-      const resourceYaml = this.createResourceYaml();
+      const resourceYaml = this.createResourceYaml(this.yamlModifiers);
 
       this.resourceYaml = resourceYaml;
       this.showAsForm = false;
@@ -380,6 +390,12 @@ export default {
           throw new Error(`Could not create the new namespace. ${ e.message }`);
         }
       }
+    },
+
+    onPressEnter(event) {
+      if (this.preventEnterSubmit) {
+        event.preventDefault();
+      }
     }
   }
 };
@@ -398,7 +414,7 @@ export default {
       :is="(isView? 'div' : 'form')"
       class="create-resource-container cru__form"
       @submit.prevent
-      @keydown.enter.prevent
+      @keydown.enter="onPressEnter($event)"
     >
       <div
         v-if="hasErrors"

package/components/DetailTop.vue

@@ -252,7 +252,7 @@ export default {
           />
           <span
             v-if="internalTooltips[key]"
-            v-tooltip="prop ? `${key} : ${prop}` : key"
+            v-clean-tooltip="prop ? `${key} : ${prop}` : key"
           >
             <span>{{ internalTooltips[key] ? internalTooltips[key] : key }}</span>
             <span v-if="showAllLabels">: {{ key }}</span>

package/components/ExplorerProjectsNamespaces.vue

@@ -11,6 +11,7 @@ import MoveModal from '@shell/components/MoveModal';
 import { defaultTableSortGenerationFn } from '@shell/components/ResourceTable.vue';
 import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
 import ResourceFetch from '@shell/mixins/resource-fetch';
+import DOMPurify from 'dompurify';
 
 export default {
   name:       'ListProjectNamespace',
@@ -319,7 +320,10 @@ export default {
       const row = group.rows[0];
 
       if (row.isFake) {
-        return this.t('resourceTable.groupLabel.project', { name: row.project?.nameDisplay }, true);
+        return DOMPurify.sanitize(
+          this.t('resourceTable.groupLabel.project', { name: row.project?.nameDisplay }, true),
+          { ALLOWED_TAGS: ['span'] }
+        );
       }
 
       return row.groupByLabel;
@@ -447,12 +451,12 @@ export default {
           </span>
           <i
             v-if="row.injectionEnabled"
-            v-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
+            v-clean-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
             class="icon icon-istio ml-5"
           />
           <i
             v-if="row.hasSystemLabels"
-            v-tooltip="getPsaTooltip(row)"
+            v-clean-tooltip="getPsaTooltip(row)"
             class="icon icon-lock ml-5"
           />
         </div>
@@ -533,7 +537,7 @@ export default {
 <style lang="scss">
   .psa-tooltip {
     // These could pop up a lot as the mouse moves around, keep them as small and unintrusive as possible
-    // (easier to test with v-tooltip="{ content: getPSA(row), autoHide: false, show: true }")
+    // (easier to test with v-clean-tooltip="{ content: getPSA(row), autoHide: false, show: true }")
     margin: 3px 0;
     padding: 0 8px 0 22px;
   }

package/components/GlobalRoleBindings.vue

@@ -341,7 +341,7 @@ export default {
                       <span class="checkbox-label">{{ role.nameDisplay }}</span>
                       <i
                         v-if="!!assignOnlyRoles[role.id]"
-                        v-tooltip="t('rbac.globalRoles.assignOnlyRole')"
+                        v-clean-tooltip="t('rbac.globalRoles.assignOnlyRole')"
                         class="checkbox-info icon icon-info icon-lg"
                       />
                     </div>

package/components/GroupPanel.vue

@@ -0,0 +1,57 @@
+<script>
+export default {
+  props: {
+    /**
+     * Label for the group
+     */
+    label: {
+      type:    String,
+      default: null
+    },
+    /**
+     * The i18n key to use for the label
+     */
+    labelKey: {
+      type:    String,
+      default: null
+    },
+  }
+};
+</script>
+<template>
+  <div class="group-panel-outer">
+    <div class="group-panel">
+      <div class="group-panel-title">
+        <t
+          v-if="labelKey"
+          :k="labelKey"
+        />
+        <template v-else-if="label">
+          {{ label }}
+        </template>
+      </div>
+      <div class="group-panel-content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .group-panel {
+    border: 1px solid var(--border);
+    border-radius: 5px;
+    padding: 10px;
+    position: relative;
+    margin-top: 10px;
+    .group-panel-title {
+      position: absolute;
+      top: -7px;
+      background-color: var(--body-bg);
+      padding: 0 5px;
+    }
+    .group-panel-content {
+      position: relative;
+    }
+  }
+</style>

package/components/HarvesterServiceAddOnConfig.vue

@@ -1,7 +1,5 @@
 <script>
-import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { RadioGroup } from '@components/Form/Radio';
 import { _CREATE } from '@shell/config/query-params';
 import { get } from '@shell/utils/object';
 import { HCI as HCI_LABELS_ANNOTATIONS } from '@shell/config/labels-annotations';
@@ -10,34 +8,10 @@ const HARVESTER_ADD_ON_CONFIG = [{
   variableName: 'ipam',
   key:          HCI_LABELS_ANNOTATIONS.CLOUD_PROVIDER_IPAM,
   default:      'dhcp'
-}, {
-  variableName: 'healthcheckPort',
-  key:          'cloudprovider.harvesterhci.io/healthcheck-port',
-  default:      '',
-}, {
-  variableName: 'healthCheckSuccessThreshold',
-  key:          'cloudprovider.harvesterhci.io/healthcheck-success-threshold',
-  default:      1,
-}, {
-  variableName: 'healthCheckFailureThreshold',
-  key:          'cloudprovider.harvesterhci.io/healthcheck-failure-threshold',
-  default:      3,
-}, {
-  variableName: 'healthCheckPeriod',
-  key:          'cloudprovider.harvesterhci.io/healthcheck-periodseconds',
-  default:      5,
-}, {
-  variableName: 'healthCheckTimeout',
-  key:          'cloudprovider.harvesterhci.io/healthcheck-timeoutseconds',
-  default:      3,
 }];
 
 export default {
-  components: {
-    LabeledInput,
-    LabeledSelect,
-    RadioGroup,
-  },
+  components: { LabeledSelect },
 
   props: {
     mode: {
@@ -71,10 +45,7 @@ export default {
       harvesterAddOnConfig[c.variableName] = this.value.metadata.annotations[c.key] || c.default;
     });
 
-    return {
-      ...harvesterAddOnConfig,
-      healthCheckEnabled: !!harvesterAddOnConfig.healthcheckPort,
-    };
+    return { ...harvesterAddOnConfig };
   },
 
   computed: {
@@ -97,27 +68,9 @@ export default {
 
   methods: {
     willSave() {
-      const errors = [];
-
-      if (this.healthCheckEnabled && !this.healthcheckPort) {
-        errors.push(this.t('validation.required', { key: this.t('servicesPage.harvester.healthCheckPort.label') }, true));
-      }
-
-      if (errors.length > 0) {
-        return Promise.reject(errors);
-      }
-
       HARVESTER_ADD_ON_CONFIG.forEach((c) => {
         this.value.metadata.annotations[c.key] = String(get(this, c.variableName));
       });
-
-      if (!this.healthCheckEnabled) {
-        delete this.value.metadata.annotations['cloudprovider.harvesterhci.io/healthcheck-port'];
-        delete this.value.metadata.annotations['cloudprovider.harvesterhci.io/healthcheck-success-threshold'];
-        delete this.value.metadata.annotations['cloudprovider.harvesterhci.io/healthcheck-failure-threshold'];
-        delete this.value.metadata.annotations['cloudprovider.harvesterhci.io/healthcheck-periodseconds'];
-        delete this.value.metadata.annotations['cloudprovider.harvesterhci.io/healthcheck-timeoutseconds'];
-      }
     },
   },
 };
@@ -132,76 +85,8 @@ export default {
           :mode="mode"
           :options="ipamOptions"
           :label="t('servicesPage.harvester.ipam.label')"
-          :disabled="mode === 'edit'"
         />
       </div>
     </div>
-
-    <div class="row mt-30">
-      <div class="col span-6">
-        <RadioGroup
-          v-model="healthCheckEnabled"
-          :mode="mode"
-          name="healthCheckEnabled"
-          :label="t('servicesPage.harvester.healthCheckEnabled.label')"
-          :labels="[t('generic.disabled'),t('generic.enabled')]"
-          :options="[false, true]"
-        />
-      </div>
-    </div>
-    <div v-if="healthCheckEnabled">
-      <div class="row mt-10">
-        <div
-          v-if="healthCheckEnabled"
-          class="col span-6"
-        >
-          <LabeledSelect
-            v-model="healthcheckPort"
-            :mode="mode"
-            :options="portOptions"
-            required
-            :label="t('servicesPage.harvester.healthCheckPort.label')"
-          />
-        </div>
-        <div class="col span-6">
-          <LabeledInput
-            v-model="healthCheckSuccessThreshold"
-            :mode="mode"
-            type="number"
-            :label="t('servicesPage.harvester.healthCheckSuccessThreshold.label')"
-            :tooltip="t('servicesPage.harvester.healthCheckSuccessThreshold.description')"
-          />
-        </div>
-      </div>
-      <div class="row mt-10">
-        <div class="col span-6">
-          <LabeledInput
-            v-model="healthCheckFailureThreshold"
-            :mode="mode"
-            type="number"
-            :label="t('servicesPage.harvester.healthCheckFailureThreshold.label')"
-            :tooltip="t('servicesPage.harvester.healthCheckFailureThreshold.description')"
-          />
-        </div>
-        <div class="col span-6">
-          <LabeledInput
-            v-model="healthCheckPeriod"
-            :mode="mode"
-            type="number"
-            :label="t('servicesPage.harvester.healthCheckPeriod.label')"
-          />
-        </div>
-      </div>
-      <div class="row mt-10">
-        <div class="col span-6">
-          <LabeledInput
-            v-model="healthCheckTimeout"
-            :mode="mode"
-            type="number"
-            :label="t('servicesPage.harvester.healthCheckTimeout.label')"
-          />
-        </div>
-      </div>
-    </div>
   </div>
 </template>

package/components/ResourceDetail/Masthead.vue

@@ -434,7 +434,7 @@ export default {
               class="masthead-istio"
             >
               <i
-                v-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
+                v-clean-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
                 class="icon icon-sm icon-istio"
               />
             </span>