@rancher/shell 0.2.2 → 0.2.4

package/cloud-credential/s3.vue

@@ -60,7 +60,10 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" :delayed="true" />
+  <Loading
+    v-if="$fetchState.pending"
+    :delayed="true"
+  />
   <div v-else>
     <div class="row">
       <div class="col span-6">

package/components/ActionDropdown.vue

@@ -68,7 +68,10 @@ export default {
         :disabled="disableButton"
         :popper-options="{modifiers: { flip: { enabled: false } } }"
       >
-        <slot name="button-content" :buttonSize="buttonSize">
+        <slot
+          name="button-content"
+          :buttonSize="buttonSize"
+        >
           <button
             ref="popoverButton"
             class="icon-container bg-primary no-left-border-radius"

package/components/ActionMenu.vue

@@ -230,8 +230,15 @@ export default {
 
 <template>
   <div v-if="showing || open">
-    <div class="background" @click="hide" @contextmenu.prevent></div>
-    <ul class="list-unstyled menu" :style="style">
+    <div
+      class="background"
+      @click="hide"
+      @contextmenu.prevent
+    />
+    <ul
+      class="list-unstyled menu"
+      :style="style"
+    >
       <li
         v-for="(opt, i) in menuOptions"
         :key="opt.action"
@@ -240,10 +247,16 @@ export default {
         :data-testid="componentTestid + '-' + i + '-item'"
         @click="execute(opt, $event)"
       >
-        <i v-if="opt.icon" :class="{icon: true, [opt.icon]: true}" />
+        <i
+          v-if="opt.icon"
+          :class="{icon: true, [opt.icon]: true}"
+        />
         <span v-html="opt.label" />
       </li>
-      <li v-if="!hasOptions(menuOptions)" class="no-actions">
+      <li
+        v-if="!hasOptions(menuOptions)"
+        class="no-actions"
+      >
         <span v-t="'sortableTable.noActions'" />
       </li>
     </ul>

package/components/AdvancedSection.vue

@@ -21,7 +21,12 @@ export default {
 
 <template>
   <div class="mt-20">
-    <a v-t="show ? 'generic.hideAdvanced' : 'generic.showAdvanced'" class="hand block" :class="{'mb-10': show}" @click="toggle" />
+    <a
+      v-t="show ? 'generic.hideAdvanced' : 'generic.showAdvanced'"
+      class="hand block"
+      :class="{'mb-10': show}"
+      @click="toggle"
+    />
 
     <slot v-if="show" />
   </div>

package/components/Alert.vue

@@ -47,5 +47,9 @@ export default {
 </script>
 
 <template>
-  <BadgeState :label="message" :color="color" :icon="icon" />
+  <BadgeState
+    :label="message"
+    :color="color"
+    :icon="icon"
+  />
 </template>

package/components/AssignTo.vue

@@ -112,10 +112,20 @@ export default {
     height="auto"
     :scrollable="true"
   >
-    <Card v-if="loaded" :show-highlight-border="false">
-      <h4 slot="title" class="text-default-text" v-html="t('assignTo.title', {count: resourceCount}, true)" />
-
-      <div slot="body" class="pl-10 pr-10">
+    <Card
+      v-if="loaded"
+      :show-highlight-border="false"
+    >
+      <h4
+        slot="title"
+        class="text-default-text"
+        v-html="t('assignTo.title', {count: resourceCount}, true)"
+      />
+
+      <div
+        slot="body"
+        class="pl-10 pr-10"
+      >
         <form>
           <LabeledSelect
             v-model="moveTo"
@@ -132,12 +142,20 @@ export default {
             :read-allowed="false"
           />
 
-          <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+          <Banner
+            v-for="(err, i) in errors"
+            :key="i"
+            color="error"
+            :label="err"
+          />
         </form>
       </div>
 
       <div slot="actions">
-        <button class="btn role-secondary" @click="close">
+        <button
+          class="btn role-secondary"
+          @click="close"
+        >
           {{ t('generic.cancel') }}
         </button>
 

package/components/AsyncButton.vue

@@ -97,6 +97,15 @@ export default Vue.extend({
       default: ASYNC_BUTTON_STATES.ACTION,
     },
 
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'action-button'
+    },
+
     manual: {
       type:    Boolean,
       default: false,
@@ -261,6 +270,7 @@ export default Vue.extend({
     :type="type"
     :disabled="isDisabled"
     :tab-index="tabIndex"
+    :data-testid="componentTestid + '-async-button'"
     @click="clicked"
   >
     <i

package/components/AwsComplianceBanner.vue

@@ -24,7 +24,10 @@ export default {
 </script>
 
 <template>
-  <div v-if="awsNotification" class="aws-compliance">
+  <div
+    v-if="awsNotification"
+    class="aws-compliance"
+  >
     {{ awsNotification.message }}
   </div>
 </template>

package/components/BackLink.vue

@@ -9,7 +9,11 @@ export default {
 };
 </script>
 <template>
-  <nuxt-link v-if="link && link.name" :to="link" class="back-link">
+  <nuxt-link
+    v-if="link && link.name"
+    :to="link"
+    class="back-link"
+  >
     <i class="icon icon-chevron-left" /> {{ t('generic.back') }}
   </nuxt-link>
 </template>

package/components/BannerGraphic.vue

@@ -25,9 +25,17 @@ export default {
 </script>
 
 <template>
-  <div v-if="shown" class="banner-graphic" :class="{'small': small}">
+  <div
+    v-if="shown"
+    class="banner-graphic"
+    :class="{'small': small}"
+  >
     <div class="graphic">
-      <BrandImage class="banner" file-name="banner.svg" :draggable="false" />
+      <BrandImage
+        class="banner"
+        file-name="banner.svg"
+        :draggable="false"
+      />
     </div>
     <div
       v-if="titleKey"
@@ -41,8 +49,12 @@ export default {
       data-testid="banner-title"
       class="title"
       v-html="title"
-    ></h1>
-    <div v-if="pref" class="close-button" @click="hide()">
+    />
+    <div
+      v-if="pref"
+      class="close-button"
+      @click="hide()"
+    >
       <i class="icon icon-close" />
     </div>
   </div>

package/components/BrandImage.vue

@@ -81,5 +81,8 @@ export default {
 };
 </script>
 <template>
-  <img v-bind="$attrs" :src="pathToBrandedImage" />
+  <img
+    v-bind="$attrs"
+    :src="pathToBrandedImage"
+  >
 </template>

package/components/ButtonDropdown.vue

@@ -195,7 +195,7 @@ export default {
     @input="$emit('click-action', $event)"
   >
     <template slot="no-options">
-      <slot name="no-options"></slot>
+      <slot name="no-options" />
     </template>
 
     <template #selected-option="option">
@@ -210,8 +210,15 @@ export default {
       </button>
     </template>
     <!-- Pass down templates provided by the caller -->
-    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
-      <slot v-if="slot !== 'selected-option'" :name="slot" v-bind="scope" />
+    <template
+      v-for="(_, slot) of $scopedSlots"
+      v-slot:[slot]="scope"
+    >
+      <slot
+        v-if="slot !== 'selected-option'"
+        :name="slot"
+        v-bind="scope"
+      />
     </template>
   </v-select>
 </template>

package/components/ButtonGroup.vue

@@ -68,7 +68,10 @@ export default {
 </script>
 
 <template>
-  <div v-trim-whitespace class="btn-group">
+  <div
+    v-trim-whitespace
+    class="btn-group"
+  >
     <button
       v-for="(opt,idx) in optionObjects"
       :key="idx"
@@ -78,9 +81,19 @@ export default {
       :disabled="disabled || opt.disabled"
       @click="change(opt.value)"
     >
-      <slot name="option" :label="opt.label" :value="opt.value">
-        <i v-if="opt.icon" :class="{icon: true, [opt.icon]: true, [`icon-${iconSize}`]: !!iconSize }" />
-        <t v-if="opt.labelKey" :k="opt.labelKey" />
+      <slot
+        name="option"
+        :label="opt.label"
+        :value="opt.value"
+      >
+        <i
+          v-if="opt.icon"
+          :class="{icon: true, [opt.icon]: true, [`icon-${iconSize}`]: !!iconSize }"
+        />
+        <t
+          v-if="opt.labelKey"
+          :k="opt.labelKey"
+        />
         <span v-else-if="opt.label">{{ opt.label }}</span>
       </slot>
     </button>

package/components/Carousel.vue

@@ -128,7 +128,12 @@ export default {
 
 <template>
   <div class="slider">
-    <div id="slide-track" ref="slider" :style="trackStyle" class="slide-track">
+    <div
+      id="slide-track"
+      ref="slider"
+      :style="trackStyle"
+      class="slide-track"
+    >
       <div
         :is="asLink ? 'a' : 'div'"
         v-for="(slide, i) in sliders"
@@ -143,10 +148,13 @@ export default {
       >
         <div class="slide-content">
           <div class="slide-img">
-            <img :src="slide.icon ? slide.icon : `/_nuxt/shell/assets/images/generic-catalog.svg`" />
+            <img :src="slide.icon ? slide.icon : `/_nuxt/shell/assets/images/generic-catalog.svg`">
           </div>
           <div class="slide-content-right">
-            <BadgeState :label="slide.repoName" color="slider-badge mb-20" />
+            <BadgeState
+              :label="slide.repoName"
+              color="slider-badge mb-20"
+            />
             <h1>{{ slide.chartNameDisplay }}</h1>
             <p>{{ slide.chartDescription }}</p>
           </div>
@@ -160,13 +168,23 @@ export default {
         class="control-item"
         :class="{'active': activeItemId === i}"
         @click="scrollSlide(i, slider.length)"
-      ></div>
+      />
     </div>
-    <div ref="prev" class="prev" :class="[activeItemId === 0 ? 'disabled' : 'prev']" @click="nextPrev('prev')">
-      <i class="icon icon-chevron-left icon-4x"></i>
+    <div
+      ref="prev"
+      class="prev"
+      :class="[activeItemId === 0 ? 'disabled' : 'prev']"
+      @click="nextPrev('prev')"
+    >
+      <i class="icon icon-chevron-left icon-4x" />
     </div>
-    <div ref="next" class="next" :class="[activeItemId === slider.length - 1 ? 'disabled' : 'next']" @click="nextPrev('next')">
-      <i class="icon icon-chevron-right icon-4x"></i>
+    <div
+      ref="next"
+      class="next"
+      :class="[activeItemId === slider.length - 1 ? 'disabled' : 'next']"
+      @click="nextPrev('next')"
+    >
+      <i class="icon icon-chevron-right icon-4x" />
     </div>
   </div>
 </template>

package/components/ChartHeading.vue

@@ -16,6 +16,10 @@ export default {
 <template>
   <div class="chart-heading">
     <h1>{{ t('chartHeading.overview') }}</h1>
-    {{ t('chartHeading.poweredBy') }} <a :href="url" rel="nofollow noopener noreferrer" target="_blank">{{ label }}</a>
+    {{ t('chartHeading.poweredBy') }} <a
+      :href="url"
+      rel="nofollow noopener noreferrer"
+      target="_blank"
+    >{{ label }}</a>
   </div>
 </template>

package/components/ChartReadme.vue

@@ -29,14 +29,26 @@ export default {
 <template>
   <div class="wrapper">
     <div class="chart-readmes">
-      <Markdown v-if="appReadme" v-model="appReadme" class="md md-desc mb-20" @loaded="appReadmeLoaded = true" />
-      <h1 v-if="appReadme && readme && appReadmeLoaded && readmeLoaded" class="pt-10">
+      <Markdown
+        v-if="appReadme"
+        v-model="appReadme"
+        class="md md-desc mb-20"
+        @loaded="appReadmeLoaded = true"
+      />
+      <h1
+        v-if="appReadme && readme && appReadmeLoaded && readmeLoaded"
+        class="pt-10"
+      >
         {{ t('catalog.install.appReadmeTitle') }}
       </h1>
-      <Markdown v-if="readme" v-model="readme" class="md md-desc" @loaded="readmeLoaded = true" />
-    </div>
-    <div>
+      <Markdown
+        v-if="readme"
+        v-model="readme"
+        class="md md-desc"
+        @loaded="readmeLoaded = true"
+      />
     </div>
+    <div />
   </div>
 </template>
 

package/components/ClusterBadge.vue

@@ -16,7 +16,11 @@ export default {
 </script>
 
 <template>
-  <div v-if="hasBadge" :style="{ backgroundColor: cluster.badge.color, color: cluster.badge.textColor }" class="cluster-badge">
+  <div
+    v-if="hasBadge"
+    :style="{ backgroundColor: cluster.badge.color, color: cluster.badge.textColor }"
+    class="cluster-badge"
+  >
     {{ cluster.badge.text }}
   </div>
 </template>

package/components/ClusterProviderIcon.vue

@@ -20,8 +20,16 @@ export default {
 </script>
 
 <template>
-  <div v-if="cluster" class="cluster-icon" :class="{'cluster-icon-small': small}">
-    <div v-if="useForIcon" class="cluster-badge-logo" :style="{ backgroundColor: cluster.badge.color, color: cluster.badge.textColor }">
+  <div
+    v-if="cluster"
+    class="cluster-icon"
+    :class="{'cluster-icon-small': small}"
+  >
+    <div
+      v-if="useForIcon"
+      class="cluster-badge-logo"
+      :style="{ backgroundColor: cluster.badge.color, color: cluster.badge.textColor }"
+    >
       {{ cluster.badge.iconText }}
     </div>
     <!-- eslint-disable -->
@@ -44,7 +52,11 @@ export default {
       </g>
     </svg>
     <!-- eslint-enable -->
-    <img v-else-if="cluster.providerNavLogo" class="cluster-os-logo" :src="cluster.providerNavLogo" />
+    <img
+      v-else-if="cluster.providerNavLogo"
+      class="cluster-os-logo"
+      :src="cluster.providerNavLogo"
+    >
   </div>
 </template>
 

package/components/Collapse.vue

@@ -24,15 +24,27 @@ export default {
 <template>
   <div class="collapse">
     <slot name="title">
-      <div class="advanced text-link" @click="showAdvanced">
-        <i v-if="open" class="icon icon-chevron-down"></i>
-        <i v-else class="icon icon-chevron-right"></i>
+      <div
+        class="advanced text-link"
+        @click="showAdvanced"
+      >
+        <i
+          v-if="open"
+          class="icon icon-chevron-down"
+        />
+        <i
+          v-else
+          class="icon icon-chevron-right"
+        />
         {{ title }}
       </div>
     </slot>
 
-    <div v-if="open" class="content">
-      <slot></slot>
+    <div
+      v-if="open"
+      class="content"
+    >
+      <slot />
     </div>
   </div>
 </template>

package/components/CollapsibleCard.vue

@@ -30,8 +30,14 @@ export default {
 </script>
 
 <template>
-  <div class="collapsible-card" :class="{isCollapsed: isCollapsed}">
-    <div class="collapsible-card-header" @click="toggleCollapse">
+  <div
+    class="collapsible-card"
+    :class="{isCollapsed: isCollapsed}"
+  >
+    <div
+      class="collapsible-card-header"
+      @click="toggleCollapse"
+    >
       <h2 class="mb-0">
         <span
           :class="{isTitleClickable: isTitleClickable}"
@@ -39,7 +45,7 @@ export default {
         >{{ title }}</span>
       </h2>
       <div>
-        <slot name="header-right"></slot>
+        <slot name="header-right" />
         <i
           class="collapsible-card-collapse-icon"
           :class="{
@@ -50,7 +56,7 @@ export default {
       </div>
     </div>
     <div class="collapsible-card-body">
-      <slot name="content"></slot>
+      <slot name="content" />
     </div>
   </div>
 </template>

package/components/CommunityLinks.vue

@@ -91,21 +91,42 @@ export default {
 
 <template>
   <div v-if="hasOptions">
-    <SimpleBox :pref="pref" :pref-key="prefKey">
+    <SimpleBox
+      :pref="pref"
+      :pref-key="prefKey"
+    >
       <template #title>
         <h2>
           {{ t('customLinks.displayTitle') }}
         </h2>
       </template>
-      <div v-for="link in options" :key="link.label" class="support-link">
-        <n-link v-if="link.value.startsWith('/') " :to="link.value">
+      <div
+        v-for="link in options"
+        :key="link.label"
+        class="support-link"
+      >
+        <n-link
+          v-if="link.value.startsWith('/') "
+          :to="link.value"
+        >
           {{ link.label }}
         </n-link>
-        <a v-else :href="link.value" rel="noopener noreferrer nofollow" target="_blank"> {{ link.label }} </a>
+        <a
+          v-else
+          :href="link.value"
+          rel="noopener noreferrer nofollow"
+          target="_blank"
+        > {{ link.label }} </a>
       </div>
       <slot />
-      <div v-if="selectedLocaleLabel === t('locale.zh-hans')" class="support-link">
-        <a class="link" @click="show">
+      <div
+        v-if="selectedLocaleLabel === t('locale.zh-hans')"
+        class="support-link"
+      >
+        <a
+          class="link"
+          @click="show"
+        >
           {{ t('footer.wechat.title') }}
         </a>
       </div>
@@ -117,10 +138,12 @@ export default {
     >
       <div class="wechat-modal">
         <h1>{{ t('footer.wechat.modalText') }}</h1>
-        <div class="qr-img">
-        </div>
+        <div class="qr-img" />
         <div>
-          <button class="btn role-primary" @click="close">
+          <button
+            class="btn role-primary"
+            @click="close"
+          >
             {{ t('generic.close') }}
           </button>
         </div>

package/components/CompoundStatusBadge.vue

@@ -28,7 +28,10 @@ export default {
     class="compound-cluster-badge"
     :class="`bg-${badgeClass}`"
   >
-    <i v-if="icon" :class="`icon-${icon}`" />
+    <i
+      v-if="icon"
+      :class="`icon-${icon}`"
+    />
     <span>{{ value }}</span>
   </div>
 </template>

package/components/ContainerResourceLimit.vue

@@ -153,10 +153,19 @@ export default {
 <template>
   <div>
     <div class="row">
-      <div v-if="showTip" class="col span-12">
+      <div
+        v-if="showTip"
+        class="col span-12"
+      >
         <p class="helper-text mb-10">
-          <t v-if="mode === viewMode" k="containerResourceLimit.helpTextDetail" />
-          <t v-else k="containerResourceLimit.helpText" />
+          <t
+            v-if="mode === viewMode"
+            k="containerResourceLimit.helpTextDetail"
+          />
+          <t
+            v-else
+            k="containerResourceLimit.helpText"
+          />
         </p>
       </div>
     </div>

package/components/CopyToClipboardText.vue

@@ -38,8 +38,16 @@ export default {
 </script>
 
 <template>
-  <a class="copy-to-clipboard-text" :class="{ 'copied': copied, 'plain': plain}" href="#" @click="clicked">
-    {{ text }} <i class="icon" :class="{ 'icon-copy': !copied, 'icon-checkmark': copied}" />
+  <a
+    class="copy-to-clipboard-text"
+    :class="{ 'copied': copied, 'plain': plain}"
+    href="#"
+    @click="clicked"
+  >
+    {{ text }} <i
+      class="icon"
+      :class="{ 'icon-copy': !copied, 'icon-checkmark': copied}"
+    />
   </a>
 </template>
 <style lang="scss" scoped>