@rancher/shell 0.3.0 → 0.3.2

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

@@ -103,6 +103,15 @@ export default {
 
     ...mapGetters({ uiplugins: 'uiplugins/plugins' }),
     ...mapGetters({ uiErrors: 'uiplugins/errors' }),
+    ...mapGetters({ theme: 'prefs/theme' }),
+
+    applyDarkModeBg() {
+      if (this.theme === 'dark') {
+        return { 'dark-mode': true };
+      }
+
+      return {};
+    },
 
     menuActions() {
       const menuActions = [];
@@ -483,10 +492,13 @@ export default {
 <template>
   <div class="plugins">
     <div class="plugin-header">
-      <h2>{{ t('plugins.title') }}</h2>
+      <h2 data-testid="extensions-page-title">
+        {{ t('plugins.title') }}
+      </h2>
       <div
         v-if="reloadRequired"
         class="plugin-reload-banner mr-20"
+        data-testid="extension-reload-banner"
       >
         <i class="icon icon-checkmark mr-10" />
         <span>
@@ -494,6 +506,7 @@ export default {
         </span>
         <button
           class="ml-10 btn btn-sm role-primary"
+          data-testid="extension-reload-banner-reload-btn"
           @click="reload()"
         >
           {{ t('generic.reload') }}
@@ -505,6 +518,7 @@ export default {
         aria-haspopup="true"
         type="button"
         class="btn actions role-secondary"
+        data-testid="extensions-page-menu"
         @click="setMenu"
       >
         <i class="icon icon-actions" />
@@ -546,15 +560,18 @@ export default {
       <Tabbed
         ref="tabs"
         :tabs-only="true"
+        data-testid="extension-tabs"
         @changed="filterChanged"
       >
         <Tab
           name="installed"
+          data-testid="extension-tab-installed"
           label-key="plugins.tabs.installed"
           :weight="20"
         />
         <Tab
           name="available"
+          data-testid="extension-tab-available"
           label-key="plugins.tabs.available"
           :weight="19"
         />
@@ -597,9 +614,13 @@ export default {
             v-for="plugin in list"
             :key="plugin.name"
             class="plugin"
+            :data-testid="`extension-card-${plugin.name}`"
             @click="showPluginDetail(plugin)"
           >
-            <div class="plugin-icon">
+            <div
+              class="plugin-icon"
+              :class="applyDarkModeBg"
+            >
               <LazyImage
                 v-if="plugin.icon"
                 :initial-src="defaultIcon"
@@ -697,6 +718,7 @@ export default {
                   <button
                     v-if="!plugin.builtin"
                     class="btn role-secondary"
+                    :data-testid="`extension-card-uninstall-btn-${plugin.name}`"
                     @click="showUninstallDialog(plugin, $event)"
                   >
                     {{ t('plugins.uninstall.label') }}
@@ -704,6 +726,7 @@ export default {
                   <button
                     v-if="plugin.upgrade"
                     class="btn role-secondary"
+                    :data-testid="`extension-card-update-btn-${plugin.name}`"
                     @click="showInstallDialog(plugin, 'update', $event)"
                   >
                     {{ t('plugins.update.label') }}
@@ -711,6 +734,7 @@ export default {
                   <button
                     v-if="!plugin.upgrade && plugin.versions.length > 1"
                     class="btn role-secondary"
+                    :data-testid="`extension-card-rollback-btn-${plugin.name}`"
                     @click="showInstallDialog(plugin, 'rollback', $event)"
                   >
                     {{ t('plugins.rollback.label') }}
@@ -722,6 +746,7 @@ export default {
                 >
                   <button
                     class="btn role-secondary"
+                    :data-testid="`extension-card-install-btn-${plugin.name}`"
                     @click="showInstallDialog(plugin, 'install', $event)"
                   >
                     {{ t('plugins.install.label') }}
@@ -781,7 +806,7 @@ export default {
 
     > i {
       color: var(--success);
-      font-size: 20px;
+      font-size: 14px;
       font-weight: bold;
     }
 
@@ -841,10 +866,23 @@ export default {
       font-size: 40px;
       margin-right:10px;
       color: #888;
+      width: 44px;
+      height: 44px;
+
+      &.dark-mode {
+        border-radius: calc(2 * var(--border-radius));
+        overflow: hidden;
+        background-color: white;
+      }
 
       .plugin-icon-img {
         height: 40px;
         width: 40px;
+        -o-object-fit: contain;
+        object-fit: contain;
+        position: relative;
+        top: 2px;
+        left: 2px;
       }
     }
 
@@ -875,6 +913,7 @@ export default {
       font-size: 16px;
       font-weight: bold;
       margin-bottom: 5px;
+      text-transform: capitalize;
     }
 
     .plugin-badges {

package/pages/diagnostic.vue

@@ -284,12 +284,13 @@ export default {
     },
 
     promptDownload(btnCb) {
-      const resources = [{ downloadData: this.downloadData, gatherResponseTimes: this.gatherResponseTimes }];
-
       if ( !this.responseTimes ) {
         this.$store.dispatch('management/promptModal', {
-          component: 'DiagnosticTimingsDialog',
-          resources
+          component:      'DiagnosticTimingsDialog',
+          componentProps: {
+            downloadData:        this.downloadData,
+            gatherResponseTimes: this.gatherResponseTimes
+          }
         })
           .then(() => btnCb(true))
           .catch(() => btnCb(false));

package/pages/home.vue

@@ -40,6 +40,14 @@ export default {
   fetch() {
     this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
     this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
+
+    if ( this.$store.getters['management/canList'](CAPI.MACHINE) ) {
+      this.$store.dispatch('management/findAll', { type: CAPI.MACHINE });
+    }
+
+    if ( this.$store.getters['management/canList'](MANAGEMENT.NODE) ) {
+      this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
+    }
   },
 
   data() {
@@ -71,12 +79,30 @@ export default {
       return this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER);
     },
 
+    // User can go to Cluster Management if they can see the cluster schema
+    canManageClusters() {
+      const schema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
+
+      return !!schema;
+    },
+
     canCreateCluster() {
       const schema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
 
       return !!schema?.collectionMethods.find(x => x.toLowerCase() === 'post');
     },
 
+    manageLocation() {
+      return {
+        name:   'c-cluster-product-resource',
+        params: {
+          product:  MANAGER,
+          cluster:  BLANK_CLUSTER,
+          resource: CAPI.RANCHER_CLUSTER
+        },
+      };
+    },
+
     createLocation() {
       return {
         name:   'c-cluster-product-resource-create',
@@ -176,6 +202,12 @@ export default {
     markSeenReleaseNotes(this.$store);
   },
 
+  // Forget the types when we leave the page
+  beforeDestroy() {
+    this.$store.dispatch('management/forgetType', CAPI.MACHINE);
+    this.$store.dispatch('management/forgetType', MANAGEMENT.NODE);
+  },
+
   methods: {
     /**
      * Define actions for each navigation link
@@ -269,7 +301,9 @@ export default {
             data-testid="changelog-banner"
             color="info whats-new"
           >
-            <div>{{ t('landing.seeWhatsNew') }}</div>
+            <div>
+              {{ t('landing.seeWhatsNew') }}
+            </div>
             <a
               class="hand"
               @click.prevent.stop="showWhatsNew"
@@ -286,11 +320,13 @@ export default {
           >
             <div class="col span-12">
               <Banner
-                color="set-login-page"
+                color="set-login-page mt-0"
                 :closable="true"
                 @close="closeSetLoginBanner()"
               >
-                <div>{{ t('landing.landingPrefs.title') }}</div>
+                <div>
+                  {{ t('landing.landingPrefs.title') }}
+                </div>
                 <a
                   class="hand mr-20"
                   @click.prevent.stop="showUserPrefs"
@@ -324,19 +360,28 @@ export default {
                   </div>
                 </template>
                 <template
-                  v-if="canCreateCluster"
+                  v-if="canCreateCluster || canManageClusters"
                   #header-middle
                 >
                   <div class="table-heading">
                     <n-link
+                      v-if="canManageClusters"
+                      :to="manageLocation"
+                      class="btn btn-sm role-secondary"
+                    >
+                      {{ t('cluster.manageAction') }}
+                    </n-link>
+                    <n-link
+                      v-if="canCreateCluster"
                       :to="importLocation"
-                      class="btn role-primary"
+                      class="btn btn-sm role-primary"
                     >
                       {{ t('cluster.importAction') }}
                     </n-link>
                     <n-link
+                      v-if="canCreateCluster"
                       :to="createLocation"
-                      class="btn role-primary"
+                      class="btn btn-sm role-primary"
                     >
                       {{ t('generic.create') }}
                     </n-link>
@@ -344,15 +389,22 @@ export default {
                 </template>
                 <template #col:name="{row}">
                   <td>
-                    <span v-if="row.mgmt">
-                      <n-link
-                        v-if="row.mgmt.isReady && !row.hasError"
-                        :to="{ name: 'c-cluster-explorer', params: { cluster: row.mgmt.id }}"
-                      >
-                        {{ row.nameDisplay }}
-                      </n-link>
-                      <span v-else>{{ row.nameDisplay }}</span>
-                    </span>
+                    <div class="list-cluster-name">
+                      <span v-if="row.mgmt">
+                        <n-link
+                          v-if="row.mgmt.isReady && !row.hasError"
+                          :to="{ name: 'c-cluster-explorer', params: { cluster: row.mgmt.id }}"
+                        >
+                          {{ row.nameDisplay }}
+                        </n-link>
+                        <span v-else>{{ row.nameDisplay }}</span>
+                      </span>
+                      <i
+                        v-if="row.unavailableMachines"
+                        v-tooltip="row.unavailableMachines"
+                        class="conditions-alert-icon icon-alert icon"
+                      />
+                    </div>
                   </td>
                 </template>
                 <template #col:cpu="{row}">
@@ -410,19 +462,19 @@ export default {
     }
   }
 
-  .banner.info.whats-new, .banner.set-login-page {
-    border: 0;
-    margin-top: 0;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    > div {
-      flex: 1;
-    }
-    > a {
-      align-self: flex-end;
+  .set-login-page, .whats-new {
+    > ::v-deep .banner__content {
+      display: flex;
+
+      > div {
+        flex: 1;
+      }
+      > a {
+        align-self: flex-end;
+      }
     }
   }
+
   .banner.set-login-page {
     border: 1px solid var(--border);
   }
@@ -432,7 +484,7 @@ export default {
     height: 39px;
 
     & > a {
-      margin-left: 5px;
+      margin-left: 10px;
     }
   }
   .panel:not(:first-child) {
@@ -451,12 +503,35 @@ export default {
     display: contents;
     white-space: nowrap;
   }
+
+  .list-cluster-name {
+    align-items: center;
+    display: flex;
+
+    .conditions-alert-icon {
+      color: var(--error);
+      margin-left: 4px;
+    }
+  }
+
+  // Hide the side-panel showing links when the screen is small
+  @media screen and (max-width: 996px) {
+    .side-panel {
+      display: none;
+    }
+  }
 </style>
 <style lang="scss">
 .home-page {
-  .search > INPUT {
-    background-color: transparent;
-    padding: 8px;
+  .search {
+    align-items: center;
+    display: flex;
+
+    > INPUT {
+      background-color: transparent;
+      height: 30px;
+      padding: 8px;
+    }
   }
 
   h2 {

package/pages/prefs.vue

@@ -9,7 +9,7 @@ import { Checkbox } from '@components/Form/Checkbox';
 import LandingPagePreference from '@shell/components/LandingPagePreference';
 import {
   mapPref, THEME, KEYMAP, DATE_FORMAT, TIME_FORMAT, ROWS_PER_PAGE, HIDE_DESC, SHOW_PRE_RELEASE, MENU_MAX_CLUSTERS,
-  VIEW_IN_API, ALL_NAMESPACES, THEME_SHORTCUT, PLUGIN_DEVELOPER
+  VIEW_IN_API, ALL_NAMESPACES, THEME_SHORTCUT, PLUGIN_DEVELOPER, SCALE_POOL_PROMPT
 } from '@shell/store/prefs';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { addObject } from '@shell/utils/array';
@@ -25,17 +25,18 @@ export default {
     return { admin: isAdminUser(this.$store.getters) };
   },
   computed: {
-    keymap:          mapPref(KEYMAP),
-    viewInApi:       mapPref(VIEW_IN_API),
-    allNamespaces:   mapPref(ALL_NAMESPACES),
-    themeShortcut:   mapPref(THEME_SHORTCUT),
-    dateFormat:      mapPref(DATE_FORMAT),
-    timeFormat:      mapPref(TIME_FORMAT),
-    perPage:         mapPref(ROWS_PER_PAGE),
-    hideDesc:        mapPref(HIDE_DESC),
-    showPreRelease:  mapPref(SHOW_PRE_RELEASE),
-    menuMaxClusters: mapPref(MENU_MAX_CLUSTERS),
-    pluginDeveloper: mapPref(PLUGIN_DEVELOPER),
+    keymap:            mapPref(KEYMAP),
+    viewInApi:         mapPref(VIEW_IN_API),
+    allNamespaces:     mapPref(ALL_NAMESPACES),
+    themeShortcut:     mapPref(THEME_SHORTCUT),
+    dateFormat:        mapPref(DATE_FORMAT),
+    timeFormat:        mapPref(TIME_FORMAT),
+    perPage:           mapPref(ROWS_PER_PAGE),
+    hideDesc:          mapPref(HIDE_DESC),
+    showPreRelease:    mapPref(SHOW_PRE_RELEASE),
+    menuMaxClusters:   mapPref(MENU_MAX_CLUSTERS),
+    pluginDeveloper:   mapPref(PLUGIN_DEVELOPER),
+    scalingDownPrompt: mapPref(SCALE_POOL_PROMPT),
 
     ...mapGetters(['isSingleProduct']),
 
@@ -238,6 +239,16 @@ export default {
         </div>
       </div>
     </div>
+    <!-- Confirmation setting -->
+    <div class="col adv-features mt-10 mb-10">
+      <hr>
+      <h4 v-t="'prefs.confirmationSetting.title'" />
+      <Checkbox
+        v-model="scalingDownPrompt"
+        :label="t('prefs.confirmationSetting.scalingDownPrompt')"
+        class="mt-10"
+      />
+    </div>
     <!-- Advanced Features -->
     <div class="col adv-features mt-10 mb-10">
       <hr>

package/pages/rio/mesh.vue

@@ -408,7 +408,7 @@ export default {
 </script>
 <template>
   <div class="mesh">
-    <header class="header-layout">
+    <header>
       <h1>App Mesh</h1>
     </header>
 

package/pkg/dynamic-importer.lib.js

@@ -72,3 +72,11 @@ export function importWindowComponent(name) {
 export function resolveWindowComponent(key) {
   return undefined;
 }
+
+export function resolveMachineConfigComponent(key) {
+  return undefined;
+}
+
+export function resolveCloudCredentialComponent(key) {
+  return undefined;
+}

package/pkg/vue.config.js

@@ -45,14 +45,18 @@ module.exports = function(dir) {
     },
 
     configureWebpack: (config) => {
+      const pkgName = dir.replace(`${ path.dirname(dir) }/`, '');
+
       // Alias updates
       config.resolve.alias['@shell'] = path.join(dir, '.shell');
       config.resolve.alias['~shell'] = path.join(dir, '.shell');
       // This should be udpated once we move to rancher-components as a dependency
       config.resolve.alias['@components'] = COMPONENTS_DIR;
       config.resolve.alias['./node_modules'] = path.join(maindir, 'node_modules');
+      config.resolve.alias[`@pkg/${ pkgName }`] = dir;
       config.resolve.alias['@pkg'] = dir;
       config.resolve.alias['~pkg'] = dir;
+      config.resolve.alias['~'] = maindir;
       delete config.resolve.alias['@'];
 
       // Prevent the dynamic importer and the model-loader-require from importing anything dynamically - we don't want all of the