@rancher/shell 0.2.2 → 0.2.4

package/pages/auth/login.vue

@@ -284,7 +284,7 @@ export default {
 </script>
 
 <template>
-  <main class="login">
+  <main class="main-layout login">
     <div class="row gutless mb-20">
       <div class="col span-6 p-20">
         <p class="text-center">
@@ -294,11 +294,21 @@ export default {
           {{ t('login.welcome', {vendor}) }}
         </h1>
         <div class="login-messages">
-          <Banner v-if="errorToDisplay" :label="errorToDisplay" color="error" />
-          <h4 v-else-if="loggedOut" class="text-success text-center">
+          <Banner
+            v-if="errorToDisplay"
+            :label="errorToDisplay"
+            color="error"
+          />
+          <h4
+            v-else-if="loggedOut"
+            class="text-success text-center"
+          >
             {{ t('login.loggedOut') }}
           </h4>
-          <h4 v-else-if="timedOut" class="text-error text-center">
+          <h4
+            v-else-if="timedOut"
+            class="text-error text-center"
+          >
             {{ t('login.loginAgain') }}
           </h4>
         </div>
@@ -308,12 +318,23 @@ export default {
           data-testid="first-login-message"
         >
           <InfoBox color="info">
-            <t k="setup.defaultPassword.intro" :raw="true" />
-
-            <div><t k="setup.defaultPassword.dockerPrefix" :raw="true" /></div>
+            <t
+              k="setup.defaultPassword.intro"
+              :raw="true"
+            />
+
+            <div>
+              <t
+                k="setup.defaultPassword.dockerPrefix"
+                :raw="true"
+              />
+            </div>
             <ul>
               <li>
-                <t k="setup.defaultPassword.dockerPs" :raw="true" />
+                <t
+                  k="setup.defaultPassword.dockerPs"
+                  :raw="true"
+                />
               </li>
               <li>
                 <CopyCode>
@@ -321,20 +342,38 @@ export default {
                 </CopyCode>
               </li>
             </ul>
-            <div><t k="setup.defaultPassword.dockerSuffix" :raw="true" /></div>
+            <div>
+              <t
+                k="setup.defaultPassword.dockerSuffix"
+                :raw="true"
+              />
+            </div>
 
-            <br />
-            <div><t k="setup.defaultPassword.helmPrefix" :raw="true" /></div>
-            <br />
+            <br>
+            <div>
+              <t
+                k="setup.defaultPassword.helmPrefix"
+                :raw="true"
+              />
+            </div>
+            <br>
             <CopyCode>
               {{ kubectlCmd }}
             </CopyCode>
-            <br />
-            <div><t k="setup.defaultPassword.helmSuffix" :raw="true" /></div>
+            <br>
+            <div>
+              <t
+                k="setup.defaultPassword.helmSuffix"
+                :raw="true"
+              />
+            </div>
           </InfoBox>
         </div>
 
-        <div v-if="(!hasLocal || (hasLocal && !showLocal)) && providers.length" class="mt-30">
+        <div
+          v-if="(!hasLocal || (hasLocal && !showLocal)) && providers.length"
+          class="mt-30"
+        >
           <component
             :is="providerComponents[idx]"
             v-for="(name, idx) in providers"
@@ -347,7 +386,10 @@ export default {
           />
         </div>
         <template v-if="hasLocal">
-          <form v-if="showLocal" class="mt-40">
+          <form
+            v-if="showLocal"
+            class="mt-40"
+          >
             <div class="span-6 offset-3">
               <div class="mb-20">
                 <LabeledInput
@@ -383,13 +425,23 @@ export default {
                   :error-label="t('asyncButton.default.error')"
                   @click="loginLocal"
                 />
-                <div v-if="!firstLogin" class="mt-20">
-                  <Checkbox v-model="remember" :label="t('login.remember.label')" type="checkbox" />
+                <div
+                  v-if="!firstLogin"
+                  class="mt-20"
+                >
+                  <Checkbox
+                    v-model="remember"
+                    :label="t('login.remember.label')"
+                    type="checkbox"
+                  />
                 </div>
               </div>
             </div>
           </form>
-          <div v-if="hasLocal && !showLocal" class="mt-20 text-center">
+          <div
+            v-if="hasLocal && !showLocal"
+            class="mt-20 text-center"
+          >
             <a
               id="login-useLocal"
               data-testid="login-useLocal"
@@ -399,8 +451,14 @@ export default {
               {{ t('login.useLocal') }}
             </a>
           </div>
-          <div v-if="hasLocal && showLocal && providers.length" class="mt-20 text-center">
-            <a role="button" @click="toggleLocal">
+          <div
+            v-if="hasLocal && showLocal && providers.length"
+            class="mt-20 text-center"
+          >
+            <a
+              role="button"
+              @click="toggleLocal"
+            >
               {{ nonLocalPrompt }}
             </a>
           </div>
@@ -410,7 +468,10 @@ export default {
         </template>
       </div>
 
-      <BrandImage class="col span-6 landscape" file-name="login-landscape.svg" />
+      <BrandImage
+        class="col span-6 landscape"
+        file-name="login-landscape.svg"
+      />
     </div>
   </main>
 </template>

package/pages/auth/logout.vue

@@ -10,7 +10,7 @@ export default {
 </script>
 
 <template>
-  <main>
+  <main class="main-layout">
     <h1 class="text-center mt-50">
       Logging Out&hellip;
     </h1>

package/pages/auth/setup.vue

@@ -9,7 +9,8 @@ import { findBy } from '@shell/utils/array';
 import { Checkbox } from '@components/Form/Checkbox';
 import { getVendor, getProduct, setVendor } from '@shell/config/private-label';
 import { RadioGroup } from '@components/Form/Radio';
-import { setSetting, SETTING } from '@shell/config/settings';
+import { setSetting } from '@shell/utils/settings';
+import { SETTING } from '@shell/config/settings';
 import { _ALL_IF_AUTHED } from '@shell/plugins/dashboard-store/actions';
 import { isDevBuild } from '@shell/utils/version';
 import { exceptionToErrorsArray } from '@shell/utils/error';
@@ -282,7 +283,7 @@ export default {
             <p
               class="text-center mb-20 mt-20 setup-title"
               v-html="t(isFirstLogin ? 'setup.setPassword' : 'setup.newUserSetPassword', { username }, true)"
-            ></p>
+            />
 
             <Password
               v-if="!haveCurrent"
@@ -295,7 +296,12 @@ export default {
             />
 
             <!-- For password managers... -->
-            <input type="hidden" name="username" autocomplete="username" :value="username" />
+            <input
+              type="hidden"
+              name="username"
+              autocomplete="username"
+              :value="username"
+            >
             <div class="mb-20">
               <RadioGroup
                 v-model="useRandom"
@@ -314,9 +320,18 @@ export default {
                 data-testid="setup-password-random"
                 label-key="setup.newPassword"
               >
-                <template v-if="useRandom" #suffix>
-                  <div class="addon" style="padding: 0 0 0 12px;">
-                    <CopyToClipboard :text="password" class="btn-sm" />
+                <template
+                  v-if="useRandom"
+                  #suffix
+                >
+                  <div
+                    class="addon"
+                    style="padding: 0 0 0 12px;"
+                  >
+                    <CopyToClipboard
+                      :text="password"
+                      class="btn-sm"
+                    />
                   </div>
                 </template>
               </LabeledInput>
@@ -341,9 +356,15 @@ export default {
 
           <template v-if="isFirstLogin">
             <template v-if="mcmEnabled">
-              <hr v-if="mustChangePassword" class="mt-20 mb-20" />
+              <hr
+                v-if="mustChangePassword"
+                class="mt-20 mb-20"
+              >
               <p>
-                <t k="setup.serverUrl.tip" :raw="true" />
+                <t
+                  k="setup.serverUrl.tip"
+                  :raw="true"
+                />
               </p>
               <div class="mt-20">
                 <LabeledInput
@@ -355,9 +376,16 @@ export default {
             </template>
 
             <div class="checkbox mt-40">
-              <Checkbox id="checkbox-telemetry" v-model="telemetry">
+              <Checkbox
+                id="checkbox-telemetry"
+                v-model="telemetry"
+              >
                 <template #label>
-                  <t k="setup.telemetry" :raw="true" :name="productName" />
+                  <t
+                    k="setup.telemetry"
+                    :raw="true"
+                    :name="productName"
+                  />
                 </template>
               </Checkbox>
             </div>
@@ -368,7 +396,11 @@ export default {
                 data-testid="setup-agreement"
               >
                 <template #label>
-                  <t k="setup.eula" :raw="true" :name="productName" />
+                  <t
+                    k="setup.eula"
+                    :raw="true"
+                    :name="productName"
+                  />
                 </template>
               </Checkbox>
             </div>
@@ -389,7 +421,11 @@ export default {
           </div>
 
           <div class="setup-errors mt-20">
-            <h4 v-for="err in errors" :key="err" class="text-error text-center">
+            <h4
+              v-for="err in errors"
+              :key="err"
+              class="text-error text-center"
+            >
               {{ err }}
             </h4>
           </div>

package/pages/auth/verify.vue

@@ -130,7 +130,7 @@ export default {
 </script>
 
 <template>
-  <main>
+  <main class="main-layout">
     <h1 class="text-center mt-50">
       <span v-if="testing">
         Testing Configuration&hellip;

package/pages/c/_cluster/_product/members/index.vue

@@ -3,4 +3,6 @@ import ExplorerMembers from '@shell/components/ExplorerMembers';
 export default { components: { ExplorerMembers } };
 </script>
 
-<template><ExplorerMembers v-bind="$attrs" /></template>
+<template>
+  <ExplorerMembers v-bind="$attrs" />
+</template>

package/pages/c/_cluster/_product/namespaces.vue

@@ -68,7 +68,10 @@ export default {
     >
       <template #cell:project="{row}">
         <span v-if="row.project">{{ row.project.nameDisplay }}</span>
-        <span v-else class="text-muted">&ndash;</span>
+        <span
+          v-else
+          class="text-muted"
+        >&ndash;</span>
       </template>
     </ResourceTable>
   </div>

package/pages/c/_cluster/apps/charts/chart.vue

@@ -117,11 +117,17 @@ export default {
   <div v-else>
     <TypeDescription resource="chart" />
 
-    <div v-if="chart" class="chart-header">
+    <div
+      v-if="chart"
+      class="chart-header"
+    >
       <div class="name-logo-install">
         <div class="name-logo">
           <div class="logo-bg">
-            <LazyImage :src="chart.icon" class="logo" />
+            <LazyImage
+              :src="chart.icon"
+              class="logo"
+            />
           </div>
           <h1>
             <nuxt-link :to="{ name: 'c-cluster-apps-charts' }">
@@ -130,57 +136,111 @@ export default {
             {{ chart.chartNameDisplay }} ({{ targetVersion }})
           </h1>
         </div>
-        <button v-if="!requires.length" type="button" class="btn role-primary" @click.prevent="install">
+        <button
+          v-if="!requires.length"
+          type="button"
+          class="btn role-primary"
+          @click.prevent="install"
+        >
           {{ t(`asyncButton.${action}.action` ) }}
         </button>
       </div>
-      <div v-if="chart.windowsIncompatible" class="mt-5">
+      <div
+        v-if="chart.windowsIncompatible"
+        class="mt-5"
+      >
         <label class="os-label">{{ t('catalog.charts.windowsIncompatible') }}</label>
       </div>
-      <div v-if="requires.length || warnings.length || targetedAppWarning || osWarning" class="mt-20">
-        <Banner v-if="osWarning" color="error">
+      <div
+        v-if="requires.length || warnings.length || targetedAppWarning || osWarning"
+        class="mt-20"
+      >
+        <Banner
+          v-if="osWarning"
+          color="error"
+        >
           <span v-html="osWarning" />
         </Banner>
-        <Banner v-for="msg in requires" :key="msg" color="error">
+        <Banner
+          v-for="msg in requires"
+          :key="msg"
+          color="error"
+        >
           <span v-html="msg" />
         </Banner>
 
-        <Banner v-for="msg in warnings" :key="msg" color="warning">
+        <Banner
+          v-for="msg in warnings"
+          :key="msg"
+          color="warning"
+        >
           <span v-html="msg" />
         </Banner>
 
-        <Banner v-if="targetedAppWarning" color="warning">
+        <Banner
+          v-if="targetedAppWarning"
+          color="warning"
+        >
           <span v-html="targetedAppWarning" />
         </Banner>
       </div>
-      <div v-else-if="version && version.description" class="description mt-10">
+      <div
+        v-else-if="version && version.description"
+        class="description mt-10"
+      >
         <p>
           {{ version.description }}
         </p>
       </div>
     </div>
 
-    <div class="spacer"></div>
+    <div class="spacer" />
 
     <div class="chart-content">
-      <ChartReadme v-if="hasReadme" :version-info="versionInfo" class="chart-content__tabs" />
-      <div v-else class="chart-content__tabs">
+      <ChartReadme
+        v-if="hasReadme"
+        :version-info="versionInfo"
+        class="chart-content__tabs"
+      />
+      <div
+        v-else
+        class="chart-content__tabs"
+      >
         {{ t('catalog.install.appReadmeMissing', {}, true) }}
       </div>
-      <div v-if="version" class="chart-content__right-bar ml-20">
+      <div
+        v-if="version"
+        class="chart-content__right-bar ml-20"
+      >
         <div class="chart-content__right-bar__section">
           <h3>
             {{ t('catalog.chart.info.chartVersions.label') }}
           </h3>
-          <div v-for="vers of versions" :key="vers.id" class="chart-content__right-bar__section--cVersion">
+          <div
+            v-for="vers of versions"
+            :key="vers.id"
+            class="chart-content__right-bar__section--cVersion"
+          >
             <b v-if="vers.originalVersion === version.version">{{ vers.originalVersion === currentVersion ? t('catalog.install.versions.current', { ver: currentVersion }): vers.shortLabel }}</b>
-            <a v-else v-tooltip="vers.label.length > 16 ? vers.label : null" @click.prevent="selectVersion(vers)">
+            <a
+              v-else
+              v-tooltip="vers.label.length > 16 ? vers.label : null"
+              @click.prevent="selectVersion(vers)"
+            >
               {{ vers.originalVersion === currentVersion ? t('catalog.install.versions.current', { ver: currentVersion }): vers.shortLabel }}
             </a>
-            <DateFormatter :value="vers.created" :show-time="false" />
+            <DateFormatter
+              :value="vers.created"
+              :show-time="false"
+            />
           </div>
           <div class="mt-10 chart-content__right-bar__section--showMore">
-            <button v-if="mappedVersions.length > showLastVersions" type="button" class="btn btn-sm role-link" @click="showMoreVersions = !showMoreVersions">
+            <button
+              v-if="mappedVersions.length > showLastVersions"
+              type="button"
+              class="btn btn-sm role-link"
+              @click="showMoreVersions = !showMoreVersions"
+            >
               {{ t(`catalog.chart.info.chartVersions.${showMoreVersions ? 'showLess' : 'showMore'}`) }}
             </button>
           </div>
@@ -191,23 +251,60 @@ export default {
           </h3>
           {{ version.appVersion }}
         </div>
-        <div v-if="version.home" class="chart-content__right-bar__section">
+        <div
+          v-if="version.home"
+          class="chart-content__right-bar__section"
+        >
           <h3>{{ t('catalog.chart.info.home') }}</h3>
-          <a :href="version.home" rel="nofollow noopener noreferrer" target="_blank">{{ version.home }}</a>
+          <a
+            :href="version.home"
+            rel="nofollow noopener noreferrer"
+            target="_blank"
+          >{{ version.home }}</a>
         </div>
-        <div v-if="version.maintainers" class="chart-content__right-bar__section">
+        <div
+          v-if="version.maintainers"
+          class="chart-content__right-bar__section"
+        >
           <h3>{{ t('catalog.chart.info.maintainers') }}</h3>
-          <a v-for="m of maintainers" :key="m.id" :href="m.url" rel="nofollow noopener noreferrer" target="_blank">{{ m.text }}</a>
+          <a
+            v-for="m of maintainers"
+            :key="m.id"
+            :href="m.url"
+            rel="nofollow noopener noreferrer"
+            target="_blank"
+          >{{ m.text }}</a>
         </div>
-        <div v-if="version.sources" class="chart-content__right-bar__section">
+        <div
+          v-if="version.sources"
+          class="chart-content__right-bar__section"
+        >
           <h3>{{ t('catalog.chart.info.related') }}</h3>
-          <a v-for="s of version.sources" :key="s" :href="s" rel="nofollow noopener noreferrer" target="_blank">{{ s }}</a>
+          <a
+            v-for="s of version.sources"
+            :key="s"
+            :href="s"
+            rel="nofollow noopener noreferrer"
+            target="_blank"
+          >{{ s }}</a>
         </div>
-        <div v-if="version.urls" class="chart-content__right-bar__section">
+        <div
+          v-if="version.urls"
+          class="chart-content__right-bar__section"
+        >
           <h3>{{ t('catalog.chart.info.chartUrls') }}</h3>
-          <a v-for="url of version.urls" :key="url" :href="url" rel="nofollow noopener noreferrer" target="_blank">{{ version.urls.length === 1 ? 'Download': url }}</a>
+          <a
+            v-for="url of version.urls"
+            :key="url"
+            :href="url"
+            rel="nofollow noopener noreferrer"
+            target="_blank"
+          >{{ version.urls.length === 1 ? 'Download': url }}</a>
         </div>
-        <div v-if="version.keywords" class="chart-content__right-bar__section chart-content__right-bar__section--keywords">
+        <div
+          v-if="version.keywords"
+          class="chart-content__right-bar__section chart-content__right-bar__section--keywords"
+        >
           <h3>{{ t('catalog.chart.info.keywords') }}</h3>
           {{ version.keywords.join(', ') }}
         </div>

package/pages/c/_cluster/apps/charts/index.vue

@@ -339,13 +339,16 @@ export default {
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else>
-    <header>
+    <header class="header-layout">
       <div class="title">
         <h1 class="m-0">
           {{ t('catalog.charts.header') }}
         </h1>
       </div>
-      <div v-if="getFeaturedCharts.length > 0" class="actions-container">
+      <div
+        v-if="getFeaturedCharts.length > 0"
+        class="actions-container"
+      >
         <ButtonGroup
           v-model="chartMode"
           :options="chartOptions"
@@ -381,7 +384,11 @@ export default {
             :color="repo.color"
           >
             <template #label>
-              <span>{{ repo.label }}</span><i v-if="!repo.all" class=" pl-5 icon icon-dot icon-sm" :class="{[repo.color]: true}" />
+              <span>{{ repo.label }}</span><i
+                v-if="!repo.all"
+                class=" pl-5 icon icon-dot icon-sm"
+                :class="{[repo.color]: true}"
+              />
             </template>
           </Checkbox>
         </template>
@@ -411,15 +418,32 @@ export default {
           :placeholder="t('catalog.charts.search')"
         >
 
-        <button v-shortkey.once="['/']" class="hide" @shortkey="focusSearch()" />
-        <AsyncButton class="refresh-btn" mode="refresh" size="sm" @click="refresh" />
+        <button
+          v-shortkey.once="['/']"
+          class="hide"
+          @shortkey="focusSearch()"
+        />
+        <AsyncButton
+          class="refresh-btn"
+          mode="refresh"
+          size="sm"
+          @click="refresh"
+        />
       </div>
     </div>
 
-    <Banner v-for="err in loadingErrors" :key="err" color="error" :label="err" />
+    <Banner
+      v-for="err in loadingErrors"
+      :key="err"
+      color="error"
+      :label="err"
+    />
 
     <div v-if="allCharts.length">
-      <div v-if="filteredCharts.length === 0" style="width: 100%;">
+      <div
+        v-if="filteredCharts.length === 0"
+        style="width: 100%;"
+      >
         <div class="m-50 text-center">
           <h1>{{ t('catalog.charts.noCharts') }}</h1>
         </div>
@@ -433,7 +457,10 @@ export default {
         @clicked="(row) => selectChart(row)"
       />
     </div>
-    <div v-else class="m-50 text-center">
+    <div
+      v-else
+      class="m-50 text-center"
+    >
       <h1>{{ t('catalog.charts.noCharts') }}</h1>
     </div>
   </div>