@rancher/shell 0.1.0 → 0.1.1

package/components/form/Command.vue

@@ -1,10 +1,10 @@
 <script>
 import Vue from 'vue';
 
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import ShellInput from '@shell/components/form/ShellInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import EnvVars from '@shell/components/form/EnvVars';
 
 export default {
@@ -88,7 +88,6 @@ export default {
           this.tty = false;
           break;
         }
-        this.update();
       },
     },
   },
@@ -120,50 +119,70 @@ export default {
 };
 </script>
 <template>
-  <div @input="update">
+  <div>
     <div class="row">
-      <div class="col span-6">
+      <div
+        class="col span-6"
+        data-testid="input-command-command"
+      >
         <slot name="entrypoint">
           <ShellInput
             v-model="command"
             :mode="mode"
             :label="t('workload.container.command.command')"
             :placeholder="t('generic.placeholder', {text: '/bin/sh'}, true)"
+            @input="update"
           />
         </slot>
       </div>
-      <div class="col span-6">
+      <div
+        class="col span-6"
+        data-testid="input-command-args"
+      >
         <slot name="command">
           <ShellInput
             v-model="args"
             :mode="mode"
             :label="t('workload.container.command.args')"
             :placeholder="t('generic.placeholder', {text: '/usr/sbin/httpd -f httpd.conf'}, true)"
+            @input="update"
           />
         </slot>
       </div>
     </div>
 
     <div class="row mt-20">
-      <div class="col span-6">
+      <div
+        class="col span-6"
+        data-testid="input-command-workingDir"
+      >
         <LabeledInput
           v-model="workingDir"
           :mode="mode"
           :label="t('workload.container.command.workingDir')"
           :placeholder="t('generic.placeholder', {text: '/myapp'}, true)"
+          @input="update"
         />
       </div>
       <div class="col span-6">
         <div :style="{ 'align-items': 'center' }" class="row">
-          <div class="col span-6">
+          <div
+            class="col span-6"
+            data-testid="input-command-stdin"
+          >
             <LabeledSelect
               v-model="stdinSelect"
               :label="t('workload.container.command.stdin')"
               :options="commandOptions"
               :mode="mode"
+              @input="update"
             />
           </div>
-          <div v-if="stdin" class="col span-6">
+          <div
+            v-if="stdin"
+            class="col span-6"
+            data-testid="input-command-tty"
+          >
             <Checkbox
               v-model="tty"
               :mode="mode"

package/components/form/Error.vue

@@ -0,0 +1,50 @@
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+import Banner from '@components/Banner/Banner.vue';
+
+type Rule = (v?: string) => undefined | string;
+
+export default Vue.extend<any, any, any, any>({
+  components: { Banner },
+  props:      {
+    value: {
+      default: null,
+      type:    [String, Object, Number, Array]
+    },
+    rules: {
+      default:   () => [],
+      type:       Array as PropType<Rule[]>,
+    },
+    asBanner: {
+      default: false,
+      type:    Boolean
+    }
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    validationMessage(): undefined | string {
+      const ruleMessages = [];
+      const value = this.value;
+
+      for (const rule of this.rules) {
+        const message = rule(value);
+
+        if (message) {
+          ruleMessages.push(message);
+        }
+      }
+      if (ruleMessages.length > 0) {
+        return ruleMessages.join(', ');
+      }
+
+      return '';
+    }
+  }
+});
+</script>
+<template>
+  <Banner v-if="!!asBanner && !!validationMessage" color="error" :label="validationMessage" />
+  <span v-else-if="!!validationMessage" class="text-error" data-testid="error-span">{{ validationMessage }}</span>
+</template>

package/components/form/Footer.vue

@@ -2,13 +2,10 @@
 import Vue from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import AsyncButton, { AsyncButtonCallback } from '@shell/components/AsyncButton.vue';
-import Banner from '@shell/components/Banner.vue';
+import Banner from '@components/Banner/Banner.vue';
 
 export default Vue.extend({
-  components: {
-    AsyncButton,
-    Banner,
-  },
+  components: { AsyncButton, Banner },
 
   props: {
     /**

package/components/form/HealthCheck.vue

@@ -54,7 +54,7 @@ export default {
         />
       </div>
     </div>
-    <div class="spacer"></div>
+    <div class="spacer" />
 
     <div>
       <div class="row">
@@ -68,7 +68,7 @@ export default {
         />
       </div>
     </div>
-    <div class="spacer"></div>
+    <div class="spacer" />
 
     <div class="row">
       <Probe

package/components/form/HookOption.vue

@@ -1,7 +1,7 @@
 <script>
 import debounce from 'lodash/debounce';
-import RadioGroup from '@shell/components/form/RadioGroup';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import ShellInput from '@shell/components/form/ShellInput';
 import { _VIEW } from '@shell/config/query-params';

package/components/form/InputWithSelect.vue

@@ -1,6 +1,6 @@
 <script>
 import labeledFormElement from '@shell/mixins/labeled-form-element';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Select from '@shell/components/form/Select';
 export default {
@@ -75,6 +75,14 @@ export default {
       type:    String,
       default: '',
     },
+    textRules: {
+      default: () => [],
+      type:    Array,
+    },
+    selectRules: {
+      default: () => [],
+      type:    Array,
+    }
 
   },
 
@@ -129,6 +137,7 @@ export default {
       :option-label="optionLabel"
       :placement="$attrs.placement ? $attrs.placement : null"
       :v-bind="$attrs"
+      :rules="selectRules"
       @input="change"
     />
     <Select
@@ -149,7 +158,7 @@ export default {
       @input="change"
     />
     <LabeledInput
-      v-if="textLabel"
+      v-if="textLabel || textRules.length > 0"
       ref="text"
       v-model="string"
       class="input-string col span-8"
@@ -158,6 +167,7 @@ export default {
       :disabled="disabled || textDisabled"
       :required="textRequired"
       :mode="mode"
+      :rules="textRules"
       v-bind="$attrs"
     >
       <template #label>

package/components/form/KeyValue.vue

@@ -4,7 +4,7 @@ import { typeOf } from '@shell/utils/sort';
 import { removeAt, removeObject } from '@shell/utils/array';
 import { base64Encode, base64Decode, binarySize } from '@shell/utils/crypto';
 import { downloadFile } from '@shell/utils/download';
-import TextAreaAutoGrow from '@shell/components/form/TextAreaAutoGrow';
+import { TextAreaAutoGrow } from '@components/Form/TextArea';
 import { get } from '@shell/utils/object';
 import Select from '@shell/components/form/Select';
 import FileSelector from '@shell/components/form/FileSelector';
@@ -277,6 +277,7 @@ export default {
         [this.keyName]:   '',
         [this.valueName]: '',
         binary:           false,
+        canEncode:        this.handleBase64,
         supported:        true
       });
     }
@@ -322,7 +323,8 @@ export default {
         [this.valueName]: value,
       };
 
-      obj.binary = this.displayValuesAsBinary;
+      obj.binary = false;
+      obj.canEncode = this.handleBase64;
       obj.supported = true;
       this.rows.push(obj);
       this.queueUpdate();
@@ -445,6 +447,7 @@ export default {
         [this.keyName]:   (split[0] || '').trim(),
         [this.valueName]: (split[1] || '').trim(),
         supported:        true,
+        canEncode:        this.handleBase64,
         binary:           this.displayValuesAsBinary
       }));
 

package/components/form/LabeledSelect.vue

@@ -3,7 +3,7 @@ import CompactInput from '@shell/mixins/compact-input';
 import LabeledFormElement from '@shell/mixins/labeled-form-element';
 import { findBy } from '@shell/utils/array';
 import { get } from '@shell/utils/object';
-import LabeledTooltip from '@shell/components/form/LabeledTooltip';
+import { LabeledTooltip } from '@components/LabeledTooltip';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
 
@@ -50,10 +50,6 @@ export default {
       default: 'label',
       type:    String
     },
-    options: {
-      default:   null,
-      type:      Array
-    },
     placement: {
       default: null,
       type:    String
@@ -68,10 +64,6 @@ export default {
       },
       type: Function
     },
-    searchable: {
-      default: false,
-      type:    Boolean
-    },
     selectable: {
       default: (opt) => {
         if ( opt ) {
@@ -212,6 +204,14 @@ export default {
         this.dropdownShouldOpen(this.$refs['select-input'], true);
       }
     },
+
+    getOptionKey(opt) {
+      if (this.optionKey) {
+        return get(opt, this.optionKey);
+      }
+
+      return this.getOptionLabel(opt);
+    }
   },
 };
 </script>
@@ -242,7 +242,7 @@ export default {
         <t v-if="labelKey" :k="labelKey" />
         <template v-else-if="label">{{ label }}</template>
 
-        <span v-if="required" class="required">*</span>
+        <span v-if="requiredField" class="required">*</span>
       </label>
     </div>
     <v-select
@@ -252,10 +252,9 @@ export default {
       :append-to-body="appendToBody"
       :calculate-position="positionDropdown"
       :class="{ 'no-label': !(label || '').length }"
+      :clearable="clearable"
       :disabled="isView || disabled || loading"
-      :get-option-key="
-        (opt) => (optionKey ? get(opt, optionKey) : getOptionLabel(opt))
-      "
+      :get-option-key="getOptionKey"
       :get-option-label="(opt) => getOptionLabel(opt)"
       :label="optionLabel"
       :options="options"
@@ -271,7 +270,7 @@ export default {
       @search:focus="onFocus"
       @search="onSearch"
       @open="onOpen"
-      @option:selecting="$emit('input', $event)"
+      @option:selected="$emit('selecting', $event)"
     >
       <template #option="option">
         <template v-if="option.kind === 'group'">
@@ -287,6 +286,7 @@ export default {
         </template>
         <div v-else @mousedown="(e) => onClickOption(option, e)">
           {{ getOptionLabel(option) }}
+          <i v-if="option.error" class="icon icon-warning pull-right" style="font-size: 20px;" />
         </div>
       </template>
       <!-- Pass down templates provided by the caller -->
@@ -301,12 +301,22 @@ export default {
       :value="tooltip"
       :status="status"
     />
+    <LabeledTooltip
+      v-if="!!validationMessage"
+      :hover="hoverTooltip"
+      :value="validationMessage"
+    />
   </div>
 </template>
 
 <style lang='scss' scoped>
+
 .labeled-select {
   position: relative;
+  // Prevent namespace field from wiggling or changing
+  // height when it is toggled from a LabeledInput to a
+  // LabeledSelect.
+  padding-bottom: 1px;
 
   &.no-label.compact-input {
     ::v-deep .vs__actions:after {
@@ -334,6 +344,9 @@ export default {
   }
 
   .labeled-container {
+    // Make LabeledSelect and LabeledInput the same height so they
+    // don't wiggle when you toggle between them.
+    padding: 7px 0 0 $input-padding-sm;
     padding: $input-padding-sm 0 0 $input-padding-sm;
 
     label {

package/components/form/Labels.vue

@@ -28,6 +28,16 @@ export default {
     defaultSectionClass: {
       type:    String,
       default: '',
+    },
+
+    labelTitleTooltip: {
+      type:    String,
+      default: '',
+    },
+
+    annotationTitleTooltip: {
+      type:    String,
+      default: '',
     }
   },
 
@@ -51,6 +61,7 @@ export default {
         :add-label="t('labels.addLabel')"
         :mode="mode"
         :title="t('labels.labels.title')"
+        :title-protip="labelTitleTooltip"
         :read-allowed="false"
         :value-can-be-empty="true"
         @input="value.setLabels($event)"
@@ -64,6 +75,7 @@ export default {
         :add-label="t('labels.addAnnotation')"
         :mode="mode"
         :title="t('labels.annotations.title')"
+        :title-protip="annotationTitleTooltip"
         :read-allowed="false"
         :value-can-be-empty="true"
         @input="value.setAnnotations($event)"

package/components/form/MatchExpressions.vue

@@ -156,12 +156,21 @@ export default {
 </script>
 
 <template>
-  <div @input="update">
-    <button v-if="showRemove && !isView" type="button" class="btn role-link remove-expression" @click="$emit('remove')">
+  <div>
+    <button
+      v-if="showRemove && !isView"
+      type="button"
+      class="btn role-link remove-expression"
+      @click="$emit('remove')"
+    >
       <i class="icon icon-x" />
     </button>
 
-    <div v-if="rules.length" class="match-expression-header" :class="{'view':isView}">
+    <div
+      v-if="rules.length"
+      class="match-expression-header"
+      :class="{'view':isView}"
+    >
       <label>
         {{ t('workload.scheduling.affinity.matchExpressions.key') }}
       </label>
@@ -179,13 +188,22 @@ export default {
       class="match-expression-row"
       :class="{'view':isView, 'mb-10': index !== rules.length - 1}"
     >
-      <div>
+      <div
+        :data-testid="`input-match-expression-key-${index}`"
+      >
         <div v-if="isView">
           {{ row.key }}
         </div>
-        <input v-else v-model="row.key" :mode="mode" />
+        <input
+          v-else
+          v-model="row.key"
+          :mode="mode"
+          @input="update"
+        />
       </div>
-      <div>
+      <div
+        :data-testid="`input-match-expression-operator-${index}`"
+      >
         <div v-if="isView">
           {{ row.operator }}
         </div>
@@ -201,14 +219,26 @@ export default {
         />
       </div>
 
-      <div v-if="row.operator==='Exists' || row.operator==='DoesNotExist'" class="no-value">
+      <div
+        v-if="row.operator==='Exists' || row.operator==='DoesNotExist'"
+        class="no-value"
+      >
         <label class="text-muted">&hellip;</label>
       </div>
-      <div v-else>
+      <div
+        v-else
+        :data-testid="`input-match-expression-values-${index}`"
+      >
         <div v-if="isView">
           {{ row.values }}
         </div>
-        <input v-else v-model="row.values" :mode="mode" :disabled="row.operator==='Exists' || row.operator==='DoesNotExist'" />
+        <input
+          v-else
+          v-model="row.values"
+          :mode="mode"
+          :disabled="row.operator==='Exists' || row.operator==='DoesNotExist'"
+          @input="update"
+        />
       </div>
       <div class="remove-container">
         <button
@@ -225,7 +255,11 @@ export default {
       </div>
     </div>
     <div v-if="!isView" class="mt-20">
-      <button type="button" class="btn role-tertiary add" @click="addRule">
+      <button
+        type="button"
+        class="btn role-tertiary add"
+        @click="addRule"
+      >
         <t k="workload.scheduling.affinity.matchExpressions.addRule" />
       </button>
     </div>

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -3,10 +3,10 @@
 import CreateEditView from '@shell/mixins/create-edit-view';
 import SelectPrincipal from '@shell/components/auth/SelectPrincipal';
 import { MANAGEMENT, NORMAN } from '@shell/config/types';
-import RadioGroup from '@shell/components/form/RadioGroup';
-import Card from '@shell/components/Card';
+import { RadioGroup } from '@components/Form/Radio';
+import { Card } from '@components/Card';
 import Loading from '@shell/components/Loading';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import { DESCRIPTION } from '@shell/config/labels-annotations';
 
 export function canViewClusterPermissionsEditor(store) {

package/components/form/Members/MembershipEditor.vue

@@ -48,6 +48,11 @@ export default {
       type:     Function,
       default:  null,
     },
+
+    modalSticky: {
+      type:    Boolean,
+      default: false,
+    }
   },
 
   async fetch() {
@@ -132,7 +137,11 @@ export default {
 
   methods: {
     addMember() {
-      this.$store.dispatch('cluster/promptModal', { component: this.addMemberDialogName, resources: [this.onAddMember] });
+      this.$store.dispatch('cluster/promptModal', {
+        component:   this.addMemberDialogName,
+        resources:   [this.onAddMember],
+        modalSticky: this.modalSticky
+      });
     },
 
     onAddMember(bindings) {

package/components/form/Members/ProjectMembershipEditor.vue

@@ -54,6 +54,7 @@ export default {
   <MembershipEditor
     ref="editor"
     add-member-dialog-name="AddProjectMemberDialog"
+    :modal-sticky="true"
     :default-binding-handler="defaultBindingHandler"
     :type="NORMAN.PROJECT_ROLE_TEMPLATE_BINDING"
     :mode="mode"