@rancher/shell 0.3.8 → 0.3.9

package/assets/translations/en-us.yaml

@@ -1611,6 +1611,27 @@ cluster:
     additionalManifest:
       title: Additional Manifest
       tooltip: 'Additional Kubernetes Manifest YAML to be applied to the cluster on startup.'
+  agentConfig:
+    tabs:
+      cluster: Cluster Agent
+      fleet: Fleet Agent
+    groups:
+      deploymentLabels: Deployment Labels
+      selector: Selector
+      podAffinity: Affinity
+      podTolerations: Tolerations
+      podRequestsAndLimits: Requests and Limits
+    subGroups:
+      podAffinityAnti: Pod Affinity/Anti-Affinity
+      nodeAffinity: Node Affinity
+    banners:
+      advanced: These are advanced configuration options. Generally, they should be left as-is.
+      tolerations: Additional Pod Tolerations will be added to the default Tolerations applied by Rancher.
+      limits: Pod Requests and Limits do not have a default configuration.
+      windowsCompatibility: "We do not recommended removing the Node Affinity rule that prevents the <b>agent</b> from running on Windows nodes as this is not a supported configuration."
+    affinity:
+      default: Use default affinity rules defined by Rancher
+      custom: Use custom affinity rules
   advanced:
     argInfo:
       title: Additional Kubelet Args
@@ -5944,15 +5965,19 @@ workload:
       antiAffinityTitle: Run pods on nodes without pods matching these selectors
       affinityOption: Affinity
       antiAffinityOption: Anti-Affinity
+      matchFields:
+        label: Fields
       matchExpressions:
+        label: Expressions
         addRule: Add Rule
         doesNotExist: is not set
         exists: is set
         greaterThan: ">"
         in: in list
-        inNamespaces: "Pods in these namespaces:"
+        inNamespaces: "Specific namespaces"
         key: Key
         lessThan: <
+        matchType: Match Type
         namespaces: Namespaces
         notIn: not in list
         operator: Operator
@@ -5968,6 +5993,7 @@ workload:
       schedulingRules: Run pods on node(s) matching scheduling rules
       specificNode: Run pods on specific node(s)
       thisPodNamespace: This pod's namespace
+      allNamespaces: All namespaces
       topologyKey:
         label: Topology Key
         placeholder: e.g. failure-domain.beta.kubernetes.io/zone
@@ -5995,7 +6021,7 @@ workload:
       effectOptions:
         all: All
         noExecute: NoExecute
-        noSchedule: "NoSchedule,"
+        noSchedule: "NoSchedule"
         preferNoSchedule: PreferNoSchedule
       labelKey: Label Key
       operator: Operator

package/babel.config.js

@@ -1,5 +1,6 @@
-module.exports = {
-  presets: [
+module.exports = function(api) {
+  api.cache(true);
+  const presets = [
     [
       '@vue/cli-plugin-babel/preset',
       { useBuiltIns: false }
@@ -8,6 +9,18 @@ module.exports = {
       '@babel/preset-env',
       { targets: { node: 'current' } }
     ]
-  ],
-  env: { test: { presets: [['@babel/env', { targets: { node: 'current' } }]] } }
+  ];
+  const env = { test: { presets: [['@babel/env', { targets: { node: 'current' } }]] } };
+
+  const plugins = [];
+
+  if (process.env.NODE_ENV === 'test') {
+    plugins.push('transform-require-context');
+  }
+
+  return {
+    presets,
+    plugins,
+    env
+  };
 };

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/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/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/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;

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/YamlEditor.vue

@@ -86,7 +86,7 @@ export default {
   },
 
   computed: {
-    cmOptions() {
+    codeMirrorOptions() {
       const readOnly = this.editorMode === EDITOR_MODES.VIEW_CODE;
 
       const gutters = [];
@@ -228,7 +228,7 @@ export default {
       ref="cm"
       :class="{fill: true, scrolling: scrolling}"
       :value="curValue"
-      :options="cmOptions"
+      :options="codeMirrorOptions"
       :data-testid="componentTestid + '-code-mirror'"
       @onInput="onInput"
       @onReady="onReady"

package/components/form/ArrayList.vue

@@ -224,7 +224,7 @@ export default {
       <div
         v-for="(row, idx) in rows"
         :key="idx"
-        data-testid="array-list-box"
+        :data-testid="`array-list-box${ idx }`"
         class="box"
       >
         <slot

package/components/form/KeyValue.vue

@@ -10,11 +10,13 @@ import Select from '@shell/components/form/Select';
 import FileSelector from '@shell/components/form/FileSelector';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { asciiLike } from '@shell/utils/string';
+import CodeMirror from '@shell/components/CodeMirror';
 
 export default {
   name: 'KeyValue',
 
   components: {
+    CodeMirror,
     Select,
     TextAreaAutoGrow,
     FileSelector
@@ -139,6 +141,10 @@ export default {
       type:    Boolean,
       default: false,
     },
+    valueMarkdownMultiline: {
+      type:    Boolean,
+      default: false,
+    },
     valueMultiline: {
       type:    Boolean,
       default: true,
@@ -245,7 +251,10 @@ export default {
   data() {
     const rows = this.getRows(this.value);
 
-    return { rows };
+    return {
+      rows,
+      codeMirrorFocus: {},
+    };
   },
 
   computed: {
@@ -519,6 +528,19 @@ export default {
       return this.t('detailText.binary', { n }, true);
     },
     get,
+    /**
+     * Update 'rows' variable with the user's input and prevents to update queue before the row model is updated
+     */
+    onInputMarkdownMultiline(idx, value) {
+      this.rows = this.rows.map((row, i) => i === idx ? { ...row, value } : row);
+      this.queueUpdate();
+    },
+    /**
+     * Set focus on CodeMirror fields
+     */
+    onFocusMarkdownMultiline(idx, value) {
+      this.$set(this.codeMirrorFocus, idx, value);
+    }
   }
 };
 </script>
@@ -635,6 +657,16 @@ export default {
             <div v-else-if="row.binary">
               {{ binaryTextSize(row.value) }}
             </div>
+            <CodeMirror
+              v-else-if="valueMarkdownMultiline"
+              ref="cm"
+              :class="{['focus']: codeMirrorFocus[i]}"
+              :value="row[valueName]"
+              :as-text-area="true"
+              :mode="mode"
+              @onInput="onInputMarkdownMultiline(i, $event)"
+              @onFocus="onFocusMarkdownMultiline(i, $event)"
+            />
             <TextAreaAutoGrow
               v-else-if="valueMultiline"
               v-model="row[valueName]"
@@ -750,6 +782,7 @@ export default {
       &.value textarea{
         padding: 10px 10px 10px 10px;
       }
+
       .text-monospace:not(.conceal) {
         font-family: monospace, monospace;
       }