@rancher/shell 0.2.2 → 0.2.4

package/pages/c/_cluster/monitoring/index.vue

@@ -140,20 +140,29 @@ export default {
 
 <template>
   <section>
-    <header class="row">
+    <header class="header-layout row">
       <div class="col span-12">
         <h1>
           <t k="monitoring.overview.title" />
         </h1>
         <div>
-          <t k="monitoring.overview.subtitle" :raw="true" />
+          <t
+            k="monitoring.overview.subtitle"
+            :raw="true"
+          />
         </div>
       </div>
     </header>
     <div>
-      <Banner v-if="v1Installed" color="warning">
+      <Banner
+        v-if="v1Installed"
+        color="warning"
+      >
         <template #default>
-          <t k="monitoring.v1Warning" :raw="true" />
+          <t
+            k="monitoring.v1Warning"
+            :raw="true"
+          />
         </template>
       </Banner>
       <div class="create-resource-container">
@@ -184,7 +193,7 @@ export default {
                   <i class="icon icon-external-link" />
                 </div>
               </div>
-              <hr />
+              <hr>
               <div class="description">
                 <span>
                   <t :k="fel.description" />

package/pages/c/_cluster/monitoring/monitor/index.vue

@@ -53,19 +53,37 @@ export default {
     <div class="row header mb-40">
       <h1>  {{ t('monitoring.monitors') }}</h1>
       <div>
-        <button class="btn btn-lg role-primary float right" @click="$router.push(createRoute)">
+        <button
+          class="btn btn-lg role-primary float right"
+          @click="$router.push(createRoute)"
+        >
           {{ t('resourceList.head.createFromYaml') }}
         </button>
       </div>
     </div>
-    <Tabbed ref="tabs" :default-tab="initTab">
-      <Tab :name="podMonitorSchema.id" :label="$store.getters['type-map/labelFor'](podMonitorSchema, 2)">
+    <Tabbed
+      ref="tabs"
+      :default-tab="initTab"
+    >
+      <Tab
+        :name="podMonitorSchema.id"
+        :label="$store.getters['type-map/labelFor'](podMonitorSchema, 2)"
+      >
         <TypeDescription :resource="podMonitorSchema.id" />
-        <ResourceTable :schema="podMonitorSchema" :rows="podMonitors" />
+        <ResourceTable
+          :schema="podMonitorSchema"
+          :rows="podMonitors"
+        />
       </Tab>
-      <Tab :name="serviceMonitorSchema.id" :label="$store.getters['type-map/labelFor'](serviceMonitorSchema, 2)">
+      <Tab
+        :name="serviceMonitorSchema.id"
+        :label="$store.getters['type-map/labelFor'](serviceMonitorSchema, 2)"
+      >
         <TypeDescription :resource="serviceMonitorSchema.id" />
-        <ResourceTable :schema="serviceMonitorSchema" :rows="serviceMonitors" />
+        <ResourceTable
+          :schema="serviceMonitorSchema"
+          :rows="serviceMonitors"
+        />
       </Tab>
     </Tabbed>
   </div>

package/pages/c/_cluster/monitoring/route-receiver/index.vue

@@ -76,7 +76,10 @@ export default {
     <div class="row header mb-10">
       <h1>  {{ t('monitoring.routesAndReceivers') }}</h1>
       <div>
-        <button class="btn btn-lg role-primary float right" @click="$router.push(createRoute)">
+        <button
+          class="btn btn-lg role-primary float right"
+          @click="$router.push(createRoute)"
+        >
           {{ t('resourceList.head.create') }}
         </button>
       </div>
@@ -87,18 +90,34 @@ export default {
         :label="t('monitoring.alertmanagerConfig.deprecationWarning')"
       />
     </div>
-    <Tabbed ref="tabs" :default-tab="initTab">
-      <Tab :name="routeSchema.id" :label="$store.getters['type-map/labelFor'](routeSchema, 2)">
+    <Tabbed
+      ref="tabs"
+      :default-tab="initTab"
+    >
+      <Tab
+        :name="routeSchema.id"
+        :label="$store.getters['type-map/labelFor'](routeSchema, 2)"
+      >
         <div v-if="secretTo">
           We don't support the current route format stored in alertmanager.yaml. Click
           <nuxt-link :to="secretTo">
             here
           </nuxt-link> to update manually.
         </div>
-        <ResourceTable v-else :schema="routeSchema" :rows="routes" />
+        <ResourceTable
+          v-else
+          :schema="routeSchema"
+          :rows="routes"
+        />
       </Tab>
-      <Tab :name="receiverSchema.id" :label="$store.getters['type-map/labelFor'](receiverSchema, 2)">
-        <ResourceTable :schema="receiverSchema" :rows="receivers" />
+      <Tab
+        :name="receiverSchema.id"
+        :label="$store.getters['type-map/labelFor'](receiverSchema, 2)"
+      >
+        <ResourceTable
+          :schema="receiverSchema"
+          :rows="receivers"
+        />
       </Tab>
     </Tabbed>
   </div>

package/pages/c/_cluster/neuvector/index.vue

@@ -37,26 +37,37 @@ export default {
 
 <template>
   <section>
-    <header class="row">
+    <header class="header-layout row">
       <div class="col span-12">
         <h1>
           <t k="neuvector.overview.title" />
         </h1>
         <div>
-          <t k="neuvector.overview.subtitle" :raw="true" />
+          <t
+            k="neuvector.overview.subtitle"
+            :raw="true"
+          />
         </div>
       </div>
     </header>
     <div class="links">
-      <div v-for="fel in externalLinks" :key="fel.label" class="link-container">
-        <a :href="fel.link" target="_blank" rel="noopener noreferrer">
+      <div
+        v-for="fel in externalLinks"
+        :key="fel.label"
+        class="link-container"
+      >
+        <a
+          :href="fel.link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <div class="link-logo">
             <LazyImage :src="fel.iconSrc" />
           </div>
           <div class="link-content">
             <t :k="fel.label" />
             <i class="icon icon-external-link pull-right" />
-            <hr />
+            <hr>
             <div class="description"><t :k="fel.description" /></div>
           </div>
         </a>

package/pages/c/_cluster/settings/DefaultLinksEditor.vue

@@ -54,22 +54,40 @@ export default {
       <label class="text-label">
         {{ t('customLinks.settings.valueLabel') }}
       </label>
-      <label class="text-label">
-      </label>
+      <label class="text-label" />
 
       <template v-for="(row,i) in value">
-        <div :key="i+'key'" class="kv-item key" :class="{'link-hidden': !row.enabled}">
+        <div
+          :key="i+'key'"
+          class="kv-item key"
+          :class="{'link-hidden': !row.enabled}"
+        >
           <span>{{ row.label }}</span>
         </div>
 
-        <div :key="i+'value'" class="kv-item value" :class="{'link-hidden': !row.enabled}">
+        <div
+          :key="i+'value'"
+          class="kv-item value"
+          :class="{'link-hidden': !row.enabled}"
+        >
           <span>{{ row.value }}</span>
         </div>
 
-        <div v-if="!row.readonly && !isView" :key="i+'show'">
-          <Checkbox v-if="!isView" v-model="row.enabled" label-key="customLinks.settings.showLabel" @input="showhide(row, i, $event)" />
+        <div
+          v-if="!row.readonly && !isView"
+          :key="i+'show'"
+        >
+          <Checkbox
+            v-if="!isView"
+            v-model="row.enabled"
+            label-key="customLinks.settings.showLabel"
+            @input="showhide(row, i, $event)"
+          />
         </div>
-        <div v-else :key="i+'show'"></div>
+        <div
+          v-else
+          :key="i+'show'"
+        />
       </template>
     </div>
   </div>

package/pages/c/_cluster/settings/banners.vue

@@ -258,10 +258,18 @@ export default {
       />
     </div>
     <template v-for="err in errors">
-      <Banner :key="err" color="error" :label="err" />
+      <Banner
+        :key="err"
+        color="error"
+        :label="err"
+      />
     </template>
     <div v-if="mode === 'edit'">
-      <AsyncButton class="pull-right mt-20" mode="apply" @click="save" />
+      <AsyncButton
+        class="pull-right mt-20"
+        mode="apply"
+        @click="save"
+      />
     </div>
   </div>
 </template>

package/pages/c/_cluster/settings/brand.vue

@@ -12,7 +12,8 @@ import { Banner } from '@components/Banner';
 import { allHash } from '@shell/utils/promise';
 import { MANAGEMENT } from '@shell/config/types';
 import { getVendor, setVendor } from '@shell/config/private-label';
-import { SETTING, fetchOrCreateSetting } from '@shell/config/settings';
+import { fetchOrCreateSetting } from '@shell/utils/settings';
+import { SETTING } from '@shell/config/settings';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { setFavIcon } from '@shell/utils/favicon';
 
@@ -192,7 +193,12 @@ export default {
     <div>
       <div class="row mb-20">
         <div class="col span-6">
-          <LabeledInput v-model="uiPLSetting.value" :label="t('branding.uiPL.label')" :mode="mode" :maxlength="100" />
+          <LabeledInput
+            v-model="uiPLSetting.value"
+            :label="t('branding.uiPL.label')"
+            :mode="mode"
+            :maxlength="100"
+          />
         </div>
       </div>
       <h3 class="mt-20 mb-5 pb-5">
@@ -203,10 +209,17 @@ export default {
       </label>
 
       <div class="row mt-10 mb-20">
-        <Checkbox v-model="customizeLogo" :label="t('branding.logos.useCustom')" :mode="mode" />
+        <Checkbox
+          v-model="customizeLogo"
+          :label="t('branding.logos.useCustom')"
+          :mode="mode"
+        />
       </div>
 
-      <div v-if="customizeLogo" class="row mb-20">
+      <div
+        v-if="customizeLogo"
+        class="row mb-20"
+      >
         <div class="col logo-container span-6">
           <div class="mb-10">
             <FileSelector
@@ -219,9 +232,15 @@ export default {
               @selected="updateLogo($event, 'uiLogoLight')"
             />
           </div>
-          <SimpleBox v-if="uiLogoLight || uiLogoDark" class="theme-light  mb-10">
+          <SimpleBox
+            v-if="uiLogoLight || uiLogoDark"
+            class="theme-light  mb-10"
+          >
             <label class="text-muted">{{ t('branding.logos.lightPreview') }}</label>
-            <img class="logo-preview" :src="uiLogoLight ? uiLogoLight : uiLogoDark" />
+            <img
+              class="logo-preview"
+              :src="uiLogoLight ? uiLogoLight : uiLogoDark"
+            >
           </SimpleBox>
         </div>
         <div class="col logo-container span-6">
@@ -236,9 +255,15 @@ export default {
               @selected="updateLogo($event, 'uiLogoDark')"
             />
           </div>
-          <SimpleBox v-if="uiLogoDark || uiLogoLight" class="theme-dark  mb-10">
+          <SimpleBox
+            v-if="uiLogoDark || uiLogoLight"
+            class="theme-dark  mb-10"
+          >
             <label class="text-muted">{{ t('branding.logos.darkPreview') }}</label>
-            <img class="logo-preview" :src="uiLogoDark ? uiLogoDark : uiLogoLight" />
+            <img
+              class="logo-preview"
+              :src="uiLogoDark ? uiLogoDark : uiLogoLight"
+            >
           </SimpleBox>
         </div>
       </div>
@@ -251,10 +276,17 @@ export default {
       </label>
 
       <div class="row mt-10 mb-20">
-        <Checkbox v-model="customizeFavicon" :label="t('branding.favicon.useCustom')" :mode="mode" />
+        <Checkbox
+          v-model="customizeFavicon"
+          :label="t('branding.favicon.useCustom')"
+          :mode="mode"
+        />
       </div>
 
-      <div v-if="customizeFavicon" class="row mb-20">
+      <div
+        v-if="customizeFavicon"
+        class="row mb-20"
+      >
         <div class="col logo-container span-12">
           <div class="mb-10">
             <FileSelector
@@ -269,7 +301,10 @@ export default {
           </div>
           <SimpleBox v-if="uiFavicon">
             <label class="text-muted">{{ t('branding.favicon.preview') }}</label>
-            <img class="logo-preview" :src="uiFavicon" />
+            <img
+              class="logo-preview"
+              :src="uiFavicon"
+            >
           </SimpleBox>
         </div>
       </div>
@@ -281,10 +316,20 @@ export default {
         {{ t('branding.color.tip', {}, true) }}
       </label>
       <div class="row mt-20">
-        <Checkbox v-model="customizeColor" :label="t('branding.color.useCustom')" :mode="mode" />
+        <Checkbox
+          v-model="customizeColor"
+          :label="t('branding.color.useCustom')"
+          :mode="mode"
+        />
       </div>
-      <div v-if="customizeColor" class="row mt-20 mb-20">
-        <ColorInput v-model="uiColor" />
+      <div
+        v-if="customizeColor"
+        class="row mt-20 mb-20"
+      >
+        <ColorInput
+          v-model="uiColor"
+          component-testid="primary"
+        />
       </div>
 
       <h3 class="mt-40 mb-5 pb-0">
@@ -300,10 +345,14 @@ export default {
           :mode="mode"
         />
       </div>
-      <div v-if="customizeLinkColor" class="row mt-20 mb-20">
+      <div
+        v-if="customizeLinkColor"
+        class="row mt-20 mb-20"
+      >
         <ColorInput
           v-model="uiLinkColor"
           class="col"
+          component-testid="link"
         />
         <span class="col link-example">
           <a>
@@ -313,10 +362,19 @@ export default {
       </div>
     </div>
     <template v-for="err in errors">
-      <Banner :key="err" color="error" :label="err" />
+      <Banner
+        :key="err"
+        color="error"
+        :label="err"
+      />
     </template>
     <div v-if="mode === 'edit'">
-      <AsyncButton class="pull-right mt-20" mode="apply" @click="save" />
+      <AsyncButton
+        component-testid="branding-apply"
+        class="pull-right mt-20"
+        mode="apply"
+        @click="save"
+      />
     </div>
   </div>
 </template>

package/pages/c/_cluster/settings/links.vue

@@ -3,13 +3,14 @@ import Loading from '@shell/components/Loading';
 import AsyncButton from '@shell/components/AsyncButton';
 import Banner from '@components/Banner/Banner.vue';
 import { MANAGEMENT } from '@shell/config/types';
+import { fetchOrCreateSetting } from '@shell/utils/settings';
+import { SETTING } from '@shell/config/settings';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import KeyValue from '@shell/components/form/KeyValue';
 import { mapGetters } from 'vuex';
 import { isRancherPrime } from '@shell/config/version';
 import DefaultLinksEditor from './DefaultLinksEditor';
 import { CUSTOM_LINKS_VERSION, fetchLinks } from '@shell/config/home-links';
-import { SETTING, fetchOrCreateSetting } from '@shell/config/settings';
 
 export default {
   layout:     'authenticated',
@@ -116,10 +117,21 @@ export default {
       />
     </div>
     <template v-for="err in errors">
-      <Banner :key="err" color="error" :label="err" />
+      <Banner
+        :key="err"
+        color="error"
+        :label="err"
+      />
     </template>
-    <div v-if="mode === 'edit'" class="mt-20">
-      <AsyncButton class="pull-right" mode="apply" @click="save" />
+    <div
+      v-if="mode === 'edit'"
+      class="mt-20"
+    >
+      <AsyncButton
+        class="pull-right"
+        mode="apply"
+        @click="save"
+      />
     </div>
   </div>
 </template>

package/pages/c/_cluster/settings/performance.vue

@@ -131,7 +131,10 @@ export default {
         <div class="mt-40">
           <h2 v-t="'performance.manualRefresh.label'" />
           <p>{{ t('performance.manualRefresh.description') }}</p>
-          <Banner color="error" label-key="performance.manualRefresh.banner" />
+          <Banner
+            color="error"
+            label-key="performance.manualRefresh.banner"
+          />
           <Checkbox
             v-model="value.manualRefresh.enabled"
             :mode="mode"
@@ -158,7 +161,10 @@ export default {
         <div class="mt-40">
           <h2 v-t="'performance.gc.label'" />
           <p>{{ t('performance.gc.description') }}</p>
-          <Banner color="error" label-key="performance.gc.banner" />
+          <Banner
+            color="error"
+            label-key="performance.gc.banner"
+          />
           <Checkbox
             v-model="value.garbageCollection.enabled"
             :mode="mode"
@@ -213,7 +219,10 @@ export default {
                 min="30"
                 class="input"
               />
-              <p class="mt-20" :class="{ 'text-muted': !value.garbageCollection.enabled }">
+              <p
+                class="mt-20"
+                :class="{ 'text-muted': !value.garbageCollection.enabled }"
+              >
                 {{ t('performance.gc.howRun.count.description') }}
               </p>
               <LabeledInput
@@ -231,10 +240,18 @@ export default {
       </div>
     </div>
     <template v-for="err in errors">
-      <Banner :key="err" color="error" :label="err" />
+      <Banner
+        :key="err"
+        color="error"
+        :label="err"
+      />
     </template>
     <div v-if="mode === 'edit'">
-      <AsyncButton class="pull-right mt-20" mode="apply" @click="save" />
+      <AsyncButton
+        class="pull-right mt-20"
+        mode="apply"
+        @click="save"
+      />
     </div>
   </div>
 </template>

package/pages/c/_cluster/uiplugins/DeveloperInstallDialog.vue

@@ -156,18 +156,33 @@ export default {
       </p>
       <div class="custom mt-10">
         <div class="fields">
-          <LabeledInput v-model="location" v-focus label-key="plugins.developer.fields.url" @input="updateLocation" />
+          <LabeledInput
+            v-model="location"
+            v-focus
+            label-key="plugins.developer.fields.url"
+            @input="updateLocation"
+          />
         </div>
       </div>
       <div class="custom mt-10">
         <div class="fields">
-          <LabeledInput v-model="name" label-key="plugins.developer.fields.name" @input="updateName" />
+          <LabeledInput
+            v-model="name"
+            label-key="plugins.developer.fields.name"
+            @input="updateName"
+          />
         </div>
         <div class="fields mt-10">
-          <Checkbox v-model="persist" label-key="plugins.developer.fields.persist" />
+          <Checkbox
+            v-model="persist"
+            label-key="plugins.developer.fields.persist"
+          />
         </div>
         <div class="dialog-buttons mt-20">
-          <button class="btn role-secondary" @click="closeDialog()">
+          <button
+            class="btn role-secondary"
+            @click="closeDialog()"
+          >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton

package/pages/c/_cluster/uiplugins/InstallDialog.vue

@@ -220,7 +220,10 @@ export default {
     height="auto"
     :scrollable="true"
   >
-    <div v-if="plugin" class="plugin-install-dialog">
+    <div
+      v-if="plugin"
+      class="plugin-install-dialog"
+    >
       <h4 class="mt-10">
         {{ t(`plugins.${ mode }.title`, { name: plugin.label }) }}
       </h4>
@@ -229,7 +232,11 @@ export default {
           <p>
             {{ t(`plugins.${ mode }.prompt`) }}
           </p>
-          <Banner v-if="!plugin.certified" color="warning" :label="t('plugins.install.warnNotCertified')" />
+          <Banner
+            v-if="!plugin.certified"
+            color="warning"
+            :label="t('plugins.install.warnNotCertified')"
+          />
           <LabeledSelect
             v-if="showVersionSelector"
             v-model="version"
@@ -242,7 +249,11 @@ export default {
           </div>
         </div>
         <div class="dialog-buttons">
-          <button :disabled="busy" class="btn role-secondary" @click="closeDialog(false)">
+          <button
+            :disabled="busy"
+            class="btn role-secondary"
+            @click="closeDialog(false)"
+          >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton