@rancher/shell 0.2.2 → 0.2.4

package/components/fleet/FleetClusters.vue

@@ -21,6 +21,10 @@ export default {
       type:    Boolean,
       default: false,
     },
+    useQueryParamsForSimpleFiltering: {
+      type:    Boolean,
+      default: false
+    }
   },
 
   computed: {
@@ -86,24 +90,43 @@ export default {
     :headers="headers"
     :rows="rows"
     :loading="loading"
+    :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
     key-field="_key"
     v-on="$listeners"
   >
     <template #cell:workspace="{row}">
       <span v-if="row.type !== MANAGEMENT_CLUSTER && row.metadata.namespace">{{ row.metadata.namespace }}</span>
-      <span v-else class="text-muted">&mdash;</span>
+      <span
+        v-else
+        class="text-muted"
+      >&mdash;</span>
     </template>
 
     <template #cell:reposReady="{row}">
-      <span v-if="!row.repoInfo" class="text-muted">&mdash;</span>
-      <span v-else-if="row.repoInfo.unready" class="text-warning">{{ row.repoInfo.ready }}/{{ row.repoInfo.total }}</span>
+      <span
+        v-if="!row.repoInfo"
+        class="text-muted"
+      >&mdash;</span>
+      <span
+        v-else-if="row.repoInfo.unready"
+        class="text-warning"
+      >{{ row.repoInfo.ready }}/{{ row.repoInfo.total }}</span>
       <span v-else>{{ row.repoInfo.total }}</span>
     </template>
 
     <template #cell:nodesReady="{row}">
-      <span v-if="!row.nodeInfo" class="text-muted">&mdash;</span>
-      <span v-else-if="row.nodeInfo.unready" class="text-warning">{{ row.nodeInfo.ready }}/{{ row.nodeInfo.total }}</span>
-      <span v-else :class="{'text-error': !row.nodeInfo.total}">{{ row.nodeInfo.total }}</span>
+      <span
+        v-if="!row.nodeInfo"
+        class="text-muted"
+      >&mdash;</span>
+      <span
+        v-else-if="row.nodeInfo.unready"
+        class="text-warning"
+      >{{ row.nodeInfo.ready }}/{{ row.nodeInfo.total }}</span>
+      <span
+        v-else
+        :class="{'text-error': !row.nodeInfo.total}"
+      >{{ row.nodeInfo.total }}</span>
     </template>
   </ResourceTable>
 </template>

package/components/fleet/FleetIntro.vue

@@ -28,12 +28,15 @@ export default {
 </script>
 <template>
   <div class="intro-box">
-    <i class="icon icon-repository"></i>
+    <i class="icon icon-repository" />
     <div class="title">
       {{ t('fleet.gitRepo.repo.noRepos') }}
     </div>
     <div class="actions">
-      <n-link :to="formRoute" class="btn role-secondary">
+      <n-link
+        :to="formRoute"
+        class="btn role-secondary"
+      >
         {{ t('fleet.gitRepo.repo.addRepo') }}
       </n-link>
     </div>

package/components/fleet/FleetRepos.vue

@@ -33,6 +33,11 @@ export default {
       type:     Boolean,
       required: false,
     },
+
+    useQueryParamsForSimpleFiltering: {
+      type:    Boolean,
+      default: false
+    }
   },
 
   computed: {
@@ -102,6 +107,7 @@ export default {
       :headers="headers"
       :rows="rows"
       :loading="loading"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       key-field="_key"
       v-on="$listeners"
     >
@@ -115,15 +121,28 @@ export default {
         />
         <template v-if="row.commitDisplay">
           <div class="text-muted">
-            <Shortened long-value-key="status.commit" :row="row" :value="row.commitDisplay" />
+            <Shortened
+              long-value-key="status.commit"
+              :row="row"
+              :value="row.commitDisplay"
+            />
           </div>
         </template>
       </template>
 
       <template #cell:clustersReady="{row}">
-        <span v-if="!row.clusterInfo" class="text-muted">&mdash;</span>
-        <span v-else-if="row.clusterInfo.unready" class="text-warning">{{ row.clusterInfo.ready }}/{{ row.clusterInfo.total }}</span>
-        <span v-else class="cluster-count-info">
+        <span
+          v-if="!row.clusterInfo"
+          class="text-muted"
+        >&mdash;</span>
+        <span
+          v-else-if="row.clusterInfo.unready"
+          class="text-warning"
+        >{{ row.clusterInfo.ready }}/{{ row.clusterInfo.total }}</span>
+        <span
+          v-else
+          class="cluster-count-info"
+        >
           {{ row.clusterInfo.ready }}/{{ row.clusterInfo.total }}
           <i
             v-if="!row.clusterInfo.total"

package/components/fleet/FleetStatus.vue

@@ -168,9 +168,18 @@ function toPercent(value, min, max) {
             <div class="meta-title">
               {{ meta.readyCount }} / {{ meta.total }} {{ title }} ready <i class="icon toggle icon-chevron-down" />
             </div>
-            <template slot="popover" class="resources-status-list">
-              <ul class="list-unstyled dropdown" @click.stop="showMenu(false)">
-                <li v-for="(val, idx) in values" :key="idx">
+            <template
+              slot="popover"
+              class="resources-status-list"
+            >
+              <ul
+                class="list-unstyled dropdown"
+                @click.stop="showMenu(false)"
+              >
+                <li
+                  v-for="(val, idx) in values"
+                  :key="idx"
+                >
                   <span>{{ val.label }}</span><span class="list-count">{{ val.count }}</span>
                 </li>
               </ul>
@@ -178,7 +187,10 @@ function toPercent(value, min, max) {
           </v-popover>
         </div>
       </div>
-      <div v-trim-whitespace :class="{progress: true, multi: pieces.length > 1}">
+      <div
+        v-trim-whitespace
+        :class="{progress: true, multi: pieces.length > 1}"
+      >
         <div
           v-for="(piece, idx) of pieces"
           :key="idx"

package/components/fleet/FleetSummary.vue

@@ -175,8 +175,16 @@ export default {
 
 <template>
   <div class="row flexwrap">
-    <FleetStatus title="Bundles" :values="bundleCounts" value-key="count" />
-    <FleetStatus title="Resources" :values="resourceCounts" value-key="count" />
+    <FleetStatus
+      title="Bundles"
+      :values="bundleCounts"
+      value-key="count"
+    />
+    <FleetStatus
+      title="Resources"
+      :values="resourceCounts"
+      value-key="count"
+    />
   </div>
 </template>
 <style lang="scss" scoped>

package/components/fleet/ForceDirectedTreeChart/index.vue

@@ -359,13 +359,15 @@ export default {
         <i class="mt-10 icon-spinner icon-spin" />
       </div>
       <!-- main div for svg container -->
-      <div id="tree">
-      </div>
+      <div id="tree" />
       <!-- info box -->
       <div class="more-info-container">
         <div class="more-info">
           <table>
-            <tr v-for="(item, i) in moreInfo" :key="i">
+            <tr
+              v-for="(item, i) in moreInfo"
+              :key="i"
+            >
               <td
                 v-if="item.type !== 'single-error'"
                 :class="{'align-middle': item.type === 'state-badge'}"

package/components/fleet/ResourcesSummary.vue

@@ -67,7 +67,11 @@ export default {
 
 <template>
   <div class="row flexwrap">
-    <div v-for="(v, k) in counts" :key="k" class="col countbox">
+    <div
+      v-for="(v, k) in counts"
+      :key="k"
+      class="col countbox"
+    >
       <CountBox
         :compact="true"
         :count="v['count']"

package/components/form/ArrayList.vue

@@ -225,11 +225,18 @@ export default {
 
 <template>
   <div>
-    <div v-if="title" class="clearfix">
+    <div
+      v-if="title"
+      class="clearfix"
+    >
       <slot name="title">
         <h3>
           {{ title }}
-          <i v-if="showProtip" v-tooltip="protip" class="icon icon-info" />
+          <i
+            v-if="showProtip"
+            v-tooltip="protip"
+            class="icon icon-info"
+          />
         </h3>
       </slot>
     </div>
@@ -293,11 +300,14 @@ export default {
                 :disabled="isView || disabled"
                 @paste="onPaste(idx, $event)"
                 @input="queueUpdate"
-              />
+              >
             </slot>
           </div>
         </slot>
-        <div v-if="showRemove" class="remove">
+        <div
+          v-if="showRemove"
+          class="remove"
+        >
           <slot
             name="remove-button"
             :remove="() => remove(row, idx)"
@@ -317,14 +327,24 @@ export default {
         </div>
       </div>
     </template>
-    <div v-else-if="mode==='view'" class="text-muted">
+    <div
+      v-else-if="mode==='view'"
+      class="text-muted"
+    >
       &mdash;
     </div>
     <div v-else>
       <slot name="empty" />
     </div>
-    <div v-if="showAdd && !isView" class="footer">
-      <slot v-if="showAdd" name="add" :add="add">
+    <div
+      v-if="showAdd && !isView"
+      class="footer"
+    >
+      <slot
+        v-if="showAdd"
+        name="add"
+        :add="add"
+      >
         <button
           type="button"
           class="btn role-tertiary add"
@@ -332,7 +352,10 @@ export default {
           data-testid="add-item"
           @click="add()"
         >
-          <i v-if="loading" class="mr-5 icon icon-spinner icon-spin icon-lg" />
+          <i
+            v-if="loading"
+            class="mr-5 icon icon-spinner icon-spin icon-lg"
+          />
           {{ addLabel }}
         </button>
       </slot>

package/components/form/ArrayListGrouped.vue

@@ -81,11 +81,17 @@ export default {
       >
         <i class="icon icon-2x icon-x" />
       </button>
-      <span v-else></span>
+      <span v-else />
     </template>
     <!-- Pass down templates provided by the caller -->
-    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
-      <slot :name="slot" v-bind="scope" />
+    <template
+      v-for="(_, slot) of $scopedSlots"
+      v-slot:[slot]="scope"
+    >
+      <slot
+        :name="slot"
+        v-bind="scope"
+      />
     </template>
   </ArrayList>
 </template>

package/components/form/ArrayListSelect.vue

@@ -65,7 +65,12 @@ export default {
     @input="$emit('input', $event)"
   >
     <template v-slot:columns="scope">
-      <Select :value="scope.row.value" v-bind="selectProps" :options="calculateOptions(scope.row.value)" @input="updateRow(scope.i, $event)" />
+      <Select
+        :value="scope.row.value"
+        v-bind="selectProps"
+        :options="calculateOptions(scope.row.value)"
+        @input="updateRow(scope.i, $event)"
+      />
     </template>
   </ArrayList>
 </template>

package/components/form/BannerSettings.vue

@@ -120,7 +120,10 @@ export default ({
           >
             {{ t('banner.consentFootnote') }}
           </p>
-          <div v-if="isConsentBanner" class="mt-10">
+          <div
+            v-if="isConsentBanner"
+            class="mt-10"
+          >
             <Checkbox
               v-model="showAsDialog"
               name="bannerDecoration"
@@ -150,7 +153,10 @@ export default ({
           <h3>
             {{ t('banner.bannerDecoration.label') }}
           </h3>
-          <div v-for="o in textDecorationOptions" :key="o.style">
+          <div
+            v-for="o in textDecorationOptions"
+            :key="o.style"
+          >
             <Checkbox
               v-model="value[bannerType][o.style]"
               name="bannerDecoration"

package/components/form/ChangePassword.vue

@@ -295,12 +295,30 @@ export default {
 </script>
 
 <template>
-  <div class="change-password" :class="{'change': isChange, 'create': isCreate, 'edit': isEdit}">
+  <div
+    class="change-password"
+    :class="{'change': isChange, 'create': isCreate, 'edit': isEdit}"
+  >
     <div class="form">
       <div class="fields">
-        <Checkbox v-if="isChange" v-model="form.deleteKeys" label-key="changePassword.deleteKeys.label" class="mt-10" />
-        <Checkbox v-if="isCreateEdit" v-model="userChangeOnLogin" label-key="changePassword.changeOnLogin.label" class="mt-10 type" />
-        <Checkbox v-if="isCreateEdit" v-model="isRandomGenerated" label-key="changePassword.generatePassword.label" class="mt-10 type" />
+        <Checkbox
+          v-if="isChange"
+          v-model="form.deleteKeys"
+          label-key="changePassword.deleteKeys.label"
+          class="mt-10"
+        />
+        <Checkbox
+          v-if="isCreateEdit"
+          v-model="userChangeOnLogin"
+          label-key="changePassword.changeOnLogin.label"
+          class="mt-10 type"
+        />
+        <Checkbox
+          v-if="isCreateEdit"
+          v-model="isRandomGenerated"
+          label-key="changePassword.generatePassword.label"
+          class="mt-10 type"
+        />
 
         <!-- Create two 'invisible fields' for password managers -->
         <input
@@ -327,8 +345,11 @@ export default {
           class="mt-10"
           :required="true"
           :label="t('changePassword.currentPassword.label')"
-        ></Password>
-        <div v-if="isRandomGenerated" :class="{'row': isCreateEdit}">
+        />
+        <div
+          v-if="isRandomGenerated"
+          :class="{'row': isCreateEdit}"
+        >
           <div :class="{'col': isCreateEdit, 'span-8': isCreateEdit}">
             <Password
               v-model="passwordGen"
@@ -339,7 +360,11 @@ export default {
             />
           </div>
         </div>
-        <div v-else class="userGen" :class="{'row': isCreateEdit}">
+        <div
+          v-else
+          class="userGen"
+          :class="{'row': isCreateEdit}"
+        >
           <div :class="{'col': isCreateEdit, 'span-4': isCreateEdit}">
             <Password
               v-model="passwordNew"
@@ -361,11 +386,26 @@ export default {
           </div>
         </div>
       </div>
-      <Checkbox v-if="isChange" v-model="isRandomGenerated" label-key="changePassword.generatePassword.label" class="mt-10 type" />
+      <Checkbox
+        v-if="isChange"
+        v-model="isRandomGenerated"
+        label-key="changePassword.generatePassword.label"
+        class="mt-10 type"
+      />
     </div>
-    <div v-if="errorMessages && errorMessages.length" class="text-error" :class="{'row': isCreateEdit}">
+    <div
+      v-if="errorMessages && errorMessages.length"
+      class="text-error"
+      :class="{'row': isCreateEdit}"
+    >
       <div :class="{'col': isCreateEdit, 'span-8': isCreateEdit}">
-        <Banner v-for="(err, i) in errorMessages" :key="i" color="error" :label="err" class="mb-0" />
+        <Banner
+          v-for="(err, i) in errorMessages"
+          :key="i"
+          color="error"
+          :label="err"
+          class="mb-0"
+        />
       </div>
     </div>
   </div>

package/components/form/ColorInput.vue

@@ -29,6 +29,15 @@ export default {
         return [_EDIT, _VIEW].includes(value);
       },
       default: _EDIT,
+    },
+
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'color-input'
     }
   },
 
@@ -56,17 +65,31 @@ export default {
 </script>
 
 <template>
-  <div class="color-input" :class="{[mode]:mode, disabled: mode !== editMode}">
-    <label class="text-label"><t v-if="labelKey" :k="labelKey" :raw="true" />{{ label }}</label>
-    <div class="preview-container" @click.stop="$refs.input.click($event)">
-      <span :style="{'background-color': inputValue}" class="color-display">
+  <div
+    class="color-input"
+    :class="{[mode]:mode, disabled: mode !== editMode}"
+    :data-testid="componentTestid + '-color-input'"
+  >
+    <label class="text-label"><t
+      v-if="labelKey"
+      :k="labelKey"
+      :raw="true"
+    />{{ label }}</label>
+    <div
+      class="preview-container"
+      @click.stop="$refs.input.click($event)"
+    >
+      <span
+        :style="{'background-color': inputValue}"
+        class="color-display"
+      >
         <input
           ref="input"
           type="color"
           :disabled="mode !== editMode"
           :value="inputValue"
           @input="$emit('input', $event.target.value)"
-        />
+        >
       </span>
       <span class="text-muted color-value">{{ inputValue }}</span>
     </div>

package/components/form/Command.vue

@@ -169,7 +169,10 @@ export default {
         />
       </div>
       <div class="col span-6">
-        <div :style="{ 'align-items': 'center' }" class="row">
+        <div
+          :style="{ 'align-items': 'center' }"
+          class="row"
+        >
           <div
             class="col span-6"
             data-testid="input-command-stdin"
@@ -197,7 +200,7 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer"></div>
+    <div class="spacer" />
     <h3>{{ t('workload.container.titles.env') }}</h3>
     <EnvVars
       :mode="mode"

package/components/form/EnvVars.vue

@@ -105,7 +105,10 @@ export default {
 </script>
 <template>
   <div :style="{'width':'100%'}">
-    <div v-for="(row, i) in allEnv" :key="row.id">
+    <div
+      v-for="(row, i) in allEnv"
+      :key="row.id"
+    >
       <ValueFromResource
         v-model="row.value"
         :all-secrets="secrets"

package/components/form/Error.vue

@@ -45,6 +45,14 @@ export default Vue.extend<any, any, any, any>({
 });
 </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>
+  <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/FileImageSelector.vue

@@ -71,7 +71,7 @@ export default {
       :src="value"
       class="loader__image"
     />
-    <i class="loader__clear icon icon-trash icon-lg"></i>
+    <i class="loader__clear icon icon-trash icon-lg" />
   </div>
 </template>
 

package/components/form/FileSelector.vue

@@ -137,7 +137,13 @@ export default {
 </script>
 
 <template>
-  <button v-if="!isView" :disabled="disabled" type="button" class="file-selector btn" @click="selectFile">
+  <button
+    v-if="!isView"
+    :disabled="disabled"
+    type="button"
+    class="file-selector btn"
+    @click="selectFile"
+  >
     <span>{{ label }}</span>
     <input
       ref="uploader"
@@ -146,6 +152,6 @@ export default {
       :multiple="multiple"
       :webkitdirectory="directory"
       @change="fileChange"
-    />
+    >
   </button>
 </template>

package/components/form/Footer.vue

@@ -47,10 +47,16 @@ export default Vue.extend({
 </script>
 <template>
   <div v-if="!isView">
-    <div class="spacer-small"></div>
+    <div class="spacer-small" />
 
-    <div v-for="(err,idx) in errors" :key="idx">
-      <Banner color="error" :label="err" />
+    <div
+      v-for="(err,idx) in errors"
+      :key="idx"
+    >
+      <Banner
+        color="error"
+        :label="err"
+      />
     </div>
     <div class="buttons">
       <div class="left">
@@ -58,7 +64,11 @@ export default Vue.extend({
       </div>
       <div class="right">
         <slot name="cancel">
-          <button type="button" class="btn role-secondary" @click="done">
+          <button
+            type="button"
+            class="btn role-secondary"
+            @click="done"
+          >
             <t k="generic.cancel" />
           </button>
         </slot>