@rancher/shell 0.2.3 → 0.2.4

package/components/form/GithubPicker.vue

@@ -271,7 +271,10 @@ export default {
 
 <template>
   <div class="picker">
-    <div v-if="!hasPrivate && !loadingRecentRepos" class="expand-scope pb-20">
+    <div
+      v-if="!hasPrivate && !loadingRecentRepos"
+      class="expand-scope pb-20"
+    >
       <i class="icon icon-info" /> Showing only public repos.  <a
         href="#"
         class="text-primary bg-transparent"
@@ -301,15 +304,21 @@ export default {
           <template #no-options>
             Type to search GitHub repositories
           </template>
-          <template slot="option" slot-scope="option">
+          <template
+            slot="option"
+            slot-scope="option"
+          >
             <div class="d-center">
-              <img :src="option.owner.avatar_url" />
+              <img :src="option.owner.avatar_url">
               {{ option.full_name }}
             </div>
           </template>
-          <template slot="selected-option" slot-scope="option">
+          <template
+            slot="selected-option"
+            slot-scope="option"
+          >
             <div class="selected d-center">
-              <img :src="option.owner.avatar_url" />
+              <img :src="option.owner.avatar_url">
               {{ option.full_name }}
             </div>
           </template>
@@ -324,8 +333,7 @@ export default {
           :value="selectedBranch"
           :clearable="false"
           @input="selectBranch"
-        >
-        </LabeledSelect>
+        />
       </div>
       <div class="col span-4">
         <LabeledSelect
@@ -336,8 +344,7 @@ export default {
           :value="selectedFile"
           :clearable="false"
           @input="selectFile"
-        >
-        </LabeledSelect>
+        />
       </div>
     </div>
   </div>

package/components/form/HookOption.vue

@@ -180,7 +180,11 @@ export default {
       </div>
 
       <h4>{{ t('workload.container.lifecycleHook.httpHeaders.title') }}</h4>
-      <div v-for="(header, index) in value.httpGet.httpHeaders" :key="header.id" class="var-row">
+      <div
+        v-for="(header, index) in value.httpGet.httpHeaders"
+        :key="header.id"
+        class="var-row"
+      >
         <template @input="update">
           <LabeledInput
             v-model="value.httpGet.httpHeaders[index].name"

package/components/form/InputWithSelect.vue

@@ -185,7 +185,7 @@ export default {
       :disabled="isView"
       :placeholder="placeholder"
       autocomplete="off"
-    />
+    >
   </div>
 </template>
 

package/components/form/KeyValue.vue

@@ -497,27 +497,47 @@ export default {
 </script>
 <template>
   <div class="key-value">
-    <div v-if="title || $slots.title" class="clearfix">
+    <div
+      v-if="title || $slots.title"
+      class="clearfix"
+    >
       <slot name="title">
         <h3>
           {{ title }}
-          <i v-if="titleProtip" v-tooltip="titleProtip" class="icon icon-info" />
+          <i
+            v-if="titleProtip"
+            v-tooltip="titleProtip"
+            class="icon icon-info"
+          />
         </h3>
       </slot>
     </div>
-    <div class="kv-container" :style="containerStyle">
+    <div
+      class="kv-container"
+      :style="containerStyle"
+    >
       <template v-if="rows.length || isView">
         <label class="text-label">
           {{ keyLabel }}
-          <i v-if="protip && !isView && addAllowed" v-tooltip="protip" class="icon icon-info" />
+          <i
+            v-if="protip && !isView && addAllowed"
+            v-tooltip="protip"
+            class="icon icon-info"
+          />
         </label>
         <label class="text-label">
           {{ valueLabel }}
         </label>
-        <label v-for="c in extraColumns" :key="c">
+        <label
+          v-for="c in extraColumns"
+          :key="c"
+        >
           <slot :name="'label:'+c">{{ c }}</slot>
         </label>
-        <slot v-if="canRemove" name="remove">
+        <slot
+          v-if="canRemove"
+          name="remove"
+        >
           <span />
         </slot>
       </template>
@@ -529,8 +549,14 @@ export default {
           &mdash;
         </div>
       </template>
-      <template v-for="(row,i) in rows" v-else>
-        <div :key="i+'key'" class="kv-item key">
+      <template
+        v-for="(row,i) in rows"
+        v-else
+      >
+        <div
+          :key="i+'key'"
+          class="kv-item key"
+        >
           <slot
             name="key"
             :row="row"
@@ -557,10 +583,13 @@ export default {
               :placeholder="keyPlaceholder"
               @input="queueUpdate"
               @paste="onPaste(i, $event)"
-            />
+            >
           </slot>
         </div>
-        <div :key="i+'value'" class="kv-item value">
+        <div
+          :key="i+'value'"
+          class="kv-item value"
+        >
           <slot
             name="value"
             :row="row"
@@ -595,11 +624,19 @@ export default {
               autocapitalize="off"
               spellcheck="false"
               @input="queueUpdate"
-            />
+            >
           </slot>
         </div>
-        <div v-for="c in extraColumns" :key="i + c" class="kv-item extra">
-          <slot :name="'col:' + c" :row="row" :queue-update="queueUpdate" />
+        <div
+          v-for="c in extraColumns"
+          :key="i + c"
+          class="kv-item extra"
+        >
+          <slot
+            :name="'col:' + c"
+            :row="row"
+            :queue-update="queueUpdate"
+          />
         </div>
         <div
           v-if="canRemove"
@@ -607,18 +644,43 @@ export default {
           class="kv-item remove"
           :data-testid="`remove-column-${i}`"
         >
-          <slot name="removeButton" :remove="remove" :row="row" :i="i">
-            <button type="button" :disabled="isView" class="btn role-link" @click="remove(i)">
+          <slot
+            name="removeButton"
+            :remove="remove"
+            :row="row"
+            :i="i"
+          >
+            <button
+              type="button"
+              :disabled="isView"
+              class="btn role-link"
+              @click="remove(i)"
+            >
               {{ removeLabel || t('generic.remove') }}
             </button>
           </slot>
         </div>
       </template>
     </div>
-    <div v-if="(addAllowed || readAllowed) && !isView" class="footer">
-      <slot name="add" :add="add">
-        <button v-if="addAllowed" type="button" class="btn role-tertiary add" :disabled="loading || (keyOptions && filteredKeyOptions.length === 0)" @click="add()">
-          <i v-if="loading" class="mr-5 icon icon-spinner icon-spin icon-lg" /> {{ addLabel }}
+    <div
+      v-if="(addAllowed || readAllowed) && !isView"
+      class="footer"
+    >
+      <slot
+        name="add"
+        :add="add"
+      >
+        <button
+          v-if="addAllowed"
+          type="button"
+          class="btn role-tertiary add"
+          :disabled="loading || (keyOptions && filteredKeyOptions.length === 0)"
+          @click="add()"
+        >
+          <i
+            v-if="loading"
+            class="mr-5 icon icon-spinner icon-spin icon-lg"
+          /> {{ addLabel }}
         </button>
         <FileSelector
           v-if="readAllowed"

package/components/form/LabeledSelect.vue

@@ -154,6 +154,7 @@ export default {
       if (!option) {
         return;
       }
+
       if (this.$attrs['get-option-label']) {
         return this.$attrs['get-option-label'](option);
       }
@@ -239,10 +240,16 @@ export default {
       :style="{ border: 'none' }"
     >
       <label v-if="hasLabel">
-        <t v-if="labelKey" :k="labelKey" />
+        <t
+          v-if="labelKey"
+          :k="labelKey"
+        />
         <template v-else-if="label">{{ label }}</template>
 
-        <span v-if="requiredField" class="required">*</span>
+        <span
+          v-if="requiredField"
+          class="required"
+        >*</span>
       </label>
     </div>
     <v-select
@@ -282,19 +289,40 @@ export default {
           </div>
         </template>
         <template v-else-if="option.kind === 'divider'">
-          <hr />
+          <hr>
+        </template>
+        <template v-else-if="option.kind === 'highlighted'">
+          <div class="option-kind-highlighted">
+            {{ option.label }}
+          </div>
         </template>
-        <div v-else @mousedown="(e) => onClickOption(option, e)">
+        <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;" />
+          <i
+            v-if="option.error"
+            class="icon icon-warning pull-right"
+            style="font-size: 20px;"
+          />
         </div>
       </template>
       <!-- Pass down templates provided by the caller -->
-      <template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
-        <slot :name="slot" v-bind="scope" />
+      <template
+        v-for="(_, slot) of $scopedSlots"
+        #[slot]="scope"
+      >
+        <slot
+          :name="slot"
+          v-bind="scope"
+        />
       </template>
     </v-select>
-    <i v-if="loading" class="icon icon-spinner icon-spin icon-lg" />
+    <i
+      v-if="loading"
+      class="icon icon-spinner icon-spin icon-lg"
+    />
     <LabeledTooltip
       v-if="tooltip && !focused"
       :hover="hoverTooltip"
@@ -486,4 +514,23 @@ export default {
     padding: 0 10px;
   }
 }
+
+// Styling for option highlighted
+.vs__dropdown-option {
+  > .option-kind-highlighted {
+    color: var(--dropdown-highlight-text);
+
+    &:hover {
+      color: var(--dropdown-hover-text);
+    }
+  }
+
+  &.vs__dropdown-option--selected,
+  &.vs__dropdown-option--highlight {
+    > .option-kind-highlighted {
+      color: var(--dropdown-hover-text);
+    }
+  }
+}
+
 </style>

package/components/form/Labels.vue

@@ -67,7 +67,7 @@ export default {
         @input="value.setLabels($event)"
       />
     </div>
-    <div class="spacer"></div>
+    <div class="spacer" />
     <div :class="sectionClass">
       <KeyValue
         key="annotations"

package/components/form/LifecycleHooks.vue

@@ -66,14 +66,22 @@ export default {
       <h3 class="clearfix">
         {{ t('workload.container.lifecycleHook.postStart.label') }}
       </h3>
-      <HookOption v-model="postStart" :mode="mode" @input="update" />
+      <HookOption
+        v-model="postStart"
+        :mode="mode"
+        @input="update"
+      />
     </div>
 
     <div>
       <h3 class="clearfix">
         {{ t('workload.container.lifecycleHook.preStop.label') }}
       </h3>
-      <HookOption v-model="preStop" :mode="mode" @input="update" />
+      <HookOption
+        v-model="preStop"
+        :mode="mode"
+        @input="update"
+      />
     </div>
   </div>
 </template>

package/components/form/MatchExpressions.vue

@@ -205,7 +205,12 @@ export default {
         <div v-if="isView">
           {{ row.key }}
         </div>
-        <input v-else-if="!hasKeySelectOptions" v-model="row.key" :mode="mode" @input="update" />
+        <input
+          v-else-if="!hasKeySelectOptions"
+          v-model="row.key"
+          :mode="mode"
+          @input="update"
+        >
         <LabeledSelect
           v-else
           v-model="row.key"
@@ -250,7 +255,7 @@ export default {
           :mode="mode"
           :disabled="row.operator==='Exists' || row.operator==='DoesNotExist'"
           @input="update"
-        />
+        >
       </div>
       <div class="remove-container">
         <button
@@ -266,7 +271,10 @@ export default {
         </button>
       </div>
     </div>
-    <div v-if="!isView" class="mt-20">
+    <div
+      v-if="!isView"
+      class="mt-20"
+    >
       <button
         type="button"
         class="btn role-tertiary add"

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -213,7 +213,10 @@ export default {
 </script>
 <template>
   <Loading v-if="$fetchState.pending" />
-  <div v-else class="cluster-permissions-editor">
+  <div
+    v-else
+    class="cluster-permissions-editor"
+  >
     <div class="row mt-10">
       <div class="col span-12">
         <SelectPrincipal
@@ -226,7 +229,11 @@ export default {
       </div>
     </div>
 
-    <Card class="m-0" :show-highlight-border="false" :show-actions="false">
+    <Card
+      class="m-0"
+      :show-highlight-border="false"
+      :show-actions="false"
+    >
       <template v-slot:title>
         <div class="type-title">
           <h3>{{ t('members.clusterPermissions.label') }}</h3>
@@ -241,8 +248,18 @@ export default {
           :options="options"
           name="permission-group"
         />
-        <div v-if="permissionGroup === 'custom'" class="custom-permissions ml-20 mt-10" :class="{'two-column': useTwoColumnsForCustom}">
-          <Checkbox v-for="permission in customPermissions" :key="permission.key" v-model="permission.value" class="mb-5" :label="permission.label" />
+        <div
+          v-if="permissionGroup === 'custom'"
+          class="custom-permissions ml-20 mt-10"
+          :class="{'two-column': useTwoColumnsForCustom}"
+        >
+          <Checkbox
+            v-for="permission in customPermissions"
+            :key="permission.key"
+            v-model="permission.value"
+            class="mb-5"
+            :label="permission.label"
+          />
         </div>
       </template>
     </Card>

package/components/form/Members/MembershipEditor.vue

@@ -173,7 +173,10 @@ export default {
     <template #columns="{row}">
       <div class="columns row">
         <div class="col span-6">
-          <Principal :key="row.value.principalId" :value="row.value.principalId" />
+          <Principal
+            :key="row.value.principalId"
+            :value="row.value.principalId"
+          />
         </div>
         <div class="col span-6 role">
           {{ row.value.roleDisplay }}
@@ -191,7 +194,13 @@ export default {
     </template>
     <template #remove-button="{remove, i}">
       <span v-if="(isCreate && i === 0) || isView" />
-      <button v-else type="button" :disabled="isView" class="btn role-link" @click="remove">
+      <button
+        v-else
+        type="button"
+        :disabled="isView"
+        class="btn role-link"
+        @click="remove"
+      >
         {{ t('generic.remove') }}
       </button>
     </template>

package/components/form/NameNsDescription.vue

@@ -20,6 +20,7 @@ export function normalizeName(str) {
 }
 
 export default {
+  name:       'NameNsDescripiton',
   components: {
     LabeledInput,
     LabeledSelect
@@ -262,7 +263,8 @@ export default {
       if (this.canCreateNamespace) {
         out.push({
           label: this.t('namespace.createNamespace'),
-          value: ''
+          value: '',
+          kind:  'highlighted'
         });
       }
       out.push({
@@ -357,6 +359,12 @@ export default {
       this.namespace = e.selected;
     },
 
+    cancelCreateNamespace(e) {
+      this.createNamespace = false;
+      this.$parent.$emit('createNamespace', false);
+      this.namespace = this.$store.getters['defaultNamespace'];
+    },
+
     selectNamespace(e) {
       if (!e || e.value === '') { // The blank value in the dropdown is labeled "Create a New Namespace"
         this.createNamespace = true;
@@ -384,7 +392,7 @@ export default {
         ref="namespace"
         v-model="namespace"
         :label="t('namespace.label')"
-        :placeholder="t('namespace.selectOrCreate')"
+        :placeholder="t('namespace.createNamespace')"
         :disabled="namespaceReallyDisabled"
         :mode="mode"
         :min-height="30"
@@ -393,10 +401,7 @@ export default {
       />
       <button
         aria="Cancel create"
-        @click="() => {
-          createNamespace = false
-          $parent.$emit('createNamespace', false)
-        }"
+        @click="cancelCreateNamespace"
       >
         <i
           v-tooltip="t('generic.cancel')"
@@ -467,10 +472,12 @@ export default {
       :key="slot"
       :class="{ col: true, [colSpan]: true }"
     >
-      <slot :name="slot">
-      </slot>
+      <slot :name="slot" />
     </div>
-    <div v-if="showSpacer" class="spacer"></div>
+    <div
+      v-if="showSpacer"
+      class="spacer"
+    />
   </div>
 </template>
 
@@ -489,7 +496,6 @@ button {
     padding-top: 7px;
   }
 }
-
 .row {
   &.name-ns-description {
     max-height: $input-height;

package/components/form/Networking.vue

@@ -191,7 +191,7 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer"></div>
+    <div class="spacer" />
 
     <div>
       <h3>{{ t('workload.networking.dns') }}</h3>
@@ -222,7 +222,7 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer"></div>
+    <div class="spacer" />
 
     <div class="mt-20">
       <div class="row">
@@ -240,7 +240,7 @@ export default {
         />
       </div>
     </div>
-    <div class="spacer"></div>
+    <div class="spacer" />
 
     <div class="row mt-20">
       <div class="col span-12">

package/components/form/NodeAffinity.vue

@@ -133,7 +133,10 @@ export default {
 </script>
 
 <template>
-  <div class="row" @input="queueUpdate">
+  <div
+    class="row"
+    @input="queueUpdate"
+  >
     <div class="col span-12">
       <ArrayListGrouped
         v-model="allSelectorTerms"

package/components/form/NodeScheduling.vue

@@ -188,7 +188,11 @@ export default {
       </div>
     </template>
     <template v-else-if="selectNode === 'affinity'">
-      <NodeAffinity v-model="nodeAffinity" :mode="mode" @input="update" />
+      <NodeAffinity
+        v-model="nodeAffinity"
+        :mode="mode"
+        @input="update"
+      />
     </template>
   </div>
 </template>

package/components/form/Password.vue

@@ -103,17 +103,42 @@ export default {
       @blur="$emit('blur', $event)"
     >
       <template #suffix>
-        <div v-if="isRandom" class="addon">
-          <a href="#" @click.prevent.stop="$copyText(password)">{{ t('action.copy') }}</a>
+        <div
+          v-if="isRandom"
+          class="addon"
+        >
+          <a
+            href="#"
+            @click.prevent.stop="$copyText(password)"
+          >{{ t('action.copy') }}</a>
         </div>
-        <div v-else class="addon">
-          <a v-if="reveal" tabindex="-1" href="#" @click.prevent.stop="reveal = false">{{ t('action.hide') }}</a>
-          <a v-else tabindex="-1" href="#" @click.prevent.stop="reveal=true">{{ t('action.show') }}</a>
+        <div
+          v-else
+          class="addon"
+        >
+          <a
+            v-if="reveal"
+            tabindex="-1"
+            href="#"
+            @click.prevent.stop="reveal = false"
+          >{{ t('action.hide') }}</a>
+          <a
+            v-else
+            tabindex="-1"
+            href="#"
+            @click.prevent.stop="reveal=true"
+          >{{ t('action.show') }}</a>
         </div>
       </template>
     </LabeledInput>
-    <div v-if="isRandom" class="mt-10 genPassword">
-      <a href="#" @click.prevent.stop="generatePassword"><i class="icon icon-refresh" /> {{ t('changePassword.newGeneratedPassword') }}</a>
+    <div
+      v-if="isRandom"
+      class="mt-10 genPassword"
+    >
+      <a
+        href="#"
+        @click.prevent.stop="generatePassword"
+      ><i class="icon icon-refresh" /> {{ t('changePassword.newGeneratedPassword') }}</a>
     </div>
   </div>
 </template>