dashboard-shell-shell 1.0.10000011122 → 1.6.0-alpha.2

package/scripts/typegen.sh

@@ -2,53 +2,69 @@
 
 SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
 BASE_DIR="$(git rev-parse --show-toplevel)"
-CLOUD_SHELL_DIR=$BASE_DIR/cloud-shell
+SHELL_DIR=$BASE_DIR/shell
 
-echo "Generating typescript definitions in ${CLOUD_SHELL_DIR}"
+echo "Generating typescript definitions"
 
-# 清理 tmp 并创建目录
-rm -rf ${CLOUD_SHELL_DIR}/tmp
-mkdir -p ${CLOUD_SHELL_DIR}/tmp
+rm -rf ${SHELL_DIR}/tmp
+mkdir -p ${SHELL_DIR}/tmp
 
 echo "Generating ..."
 
 # utils
-${BASE_DIR}/node_modules/.bin/tsc ${CLOUD_SHELL_DIR}/utils/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${CLOUD_SHELL_DIR}/tmp/utils > /dev/null
-${BASE_DIR}/node_modules/.bin/tsc ${CLOUD_SHELL_DIR}/utils/validators/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${CLOUD_SHELL_DIR}/tmp/utils/validators > /dev/null
-${BASE_DIR}/node_modules/.bin/tsc ${CLOUD_SHELL_DIR}/utils/crypto/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${CLOUD_SHELL_DIR}/tmp/utils/crypto > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/utils/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/utils > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/utils/validators/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/utils/validators > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/utils/crypto/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/utils/crypto > /dev/null
 
 # config
-${BASE_DIR}/node_modules/.bin/tsc ${CLOUD_SHELL_DIR}/config/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${CLOUD_SHELL_DIR}/tmp/config > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/config/query-params.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/config/table-headers.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/config/types.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/config/labels-annotations.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/config/version.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
 
-# store
-${BASE_DIR}/node_modules/.bin/tsc ${CLOUD_SHELL_DIR}/store/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${CLOUD_SHELL_DIR}/tmp/store > /dev/null
+# # store
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/store/features.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/store > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/store/prefs.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/store > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/store/plugins.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/store > /dev/null
 
-# plugins
-${BASE_DIR}/node_modules/.bin/tsc ${CLOUD_SHELL_DIR}/plugins/dashboard-store/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${CLOUD_SHELL_DIR}/tmp/plugins/dashboard-store/ > /dev/null
-${BASE_DIR}/node_modules/.bin/tsc ${CLOUD_SHELL_DIR}/plugins/steve/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${CLOUD_SHELL_DIR}/tmp/plugins/steve/ > /dev/null
+# # plugins
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/dashboard-store/normalize.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store/ > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/dashboard-store/resource-class.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store/ > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/dashboard-store/classify.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store/ > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/dashboard-store/actions.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store/ > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/steve/steve-class.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/steve/ > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/steve/hybrid-class.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/steve/ > /dev/null
 
-# mixins
-${BASE_DIR}/node_modules/.bin/tsc ${CLOUD_SHELL_DIR}/mixins/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${CLOUD_SHELL_DIR}/tmp/mixins > /dev/null
+# # mixins
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/mixins/create-edit-view/index.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/mixins/create-edit-view > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/mixins/resource-fetch.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/mixins > /dev/null
 
-# models
-${BASE_DIR}/node_modules/.bin/tsc ${CLOUD_SHELL_DIR}/models/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${CLOUD_SHELL_DIR}/tmp/models/ > /dev/null
+# # models
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/models/namespace.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/models/ > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/models/networking.k8s.io.ingress.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/models/ > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/models/catalog.cattle.io.clusterrepo.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/models/ > /dev/null
 
-echo "Contents of ${CLOUD_SHELL_DIR}/tmp after tsc commands:"
-find ${CLOUD_SHELL_DIR}/tmp
+#./node_modules/.bin/tsc ${SHELL_DIR}/plugins/dashboard-store/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store
+
+# Go through all of the folders and combine by wrapping with 'declare module'
+
+echo "Contents of ${SHELL_DIR}/tmp after tsc commands:"
+find ${SHELL_DIR}/tmp
 
 echo "Combining type definitions ..."
 
-DEST=${CLOUD_SHELL_DIR}/types/cloud-shell
+DEST=${SHELL_DIR}/types/shell
 mkdir -p ${DEST}
 
 INDEX=${DEST}/index.d.ts
 rm -rf ${INDEX}
 
-echo "// Auto-generated type definitions for cloud-shell" > ${INDEX}
+echo "// Auto-generated type definitions for shell" > ${INDEX}
 echo "// Do not modify this file as changes will get overwritten" >> ${INDEX}
 
-echo "/// <reference types=\"@rancher/cloud-shell/types/vue-shim\" />" >> ${INDEX}
-echo "/// <reference types=\"@rancher/cloud-shell/types/global-vue\" />" >> ${INDEX}
+echo "/// <reference types=\"@rancher/shell/types/vue-shim\" />" >> ${INDEX}
+echo "/// <reference types=\"@rancher/shell/types/global-vue\" />" >> ${INDEX}
 
 function processDir() {
   local dir=$1
@@ -62,7 +78,9 @@ function processDir() {
       processDir $entry $basePkg/$filename
     else
       if [[ $filename == *.d.ts ]]; then
+        # We use convoluted mechanism here to ensure this works on mac with bash 3.x
         local name=$(echo $filename | rev | cut -c6- | rev)
+
         local module=${basePkg}/${name}
         if [ "${name}" == "index" ]; then
           module=${basePkg}
@@ -77,8 +95,6 @@ function processDir() {
   done
 }
 
-processDir ${CLOUD_SHELL_DIR}/tmp @cloud-shell
-
-rm -rf ${CLOUD_SHELL_DIR}/tmp
+processDir ${SHELL_DIR}/tmp @shell
 
-echo "Type generation completed in ${CLOUD_SHELL_DIR}"
+rm -rf ${SHELL_DIR}/tmp

package/static/loading-indicator.html

@@ -22,7 +22,7 @@
   height: 80px;
   margin: 0 auto;
   width: 80px;
-}
+}}
 
 @keyframes initial-load-animate {
   0% {

package/store/action-menu.js

@@ -2,31 +2,26 @@ import { filterBy, isArray } from '@shell/utils/array';
 
 export const state = function() {
   return {
-    show:              false,
-    resources:         [],
-    elem:              null,
-    event:             null,
-    showPromptMove:    false,
-    showPromptRemove:  false,
-    showPromptRestore: false,
-    showAssignTo:      false,
-    showPromptUpdate:  false,
-    showModal:         false,
-    toMove:            [],
-    toRemove:          [],
-    toRestore:         [],
-    toAssign:          [],
-    toUpdate:          [],
-    modalData:         {},
+    show:                false,
+    resources:           [],
+    elem:                null,
+    event:               null,
+    showPromptRemove:    false,
+    showPromptRestore:   false,
+    showModal:           false,
+    performCallbackData: undefined,
+    toRemove:            [],
+    toRestore:           [],
+    modalData:           {},
   };
 };
 
 export const getters = {
-  showing:   (state) => state.show,
-  elem:      (state) => state.elem,
-  event:     (state) => state.event,
-  resources: (state) => state.resources,
-
+  showing:             (state) => state.show,
+  elem:                (state) => state.elem,
+  event:               (state) => state.event,
+  resources:           (state) => state.resources,
+  performCallbackData: (state) => state.performCallbackData,
   optionsArray(state) {
     let selected = state.resources;
 
@@ -89,16 +84,6 @@ export const mutations = {
     state.toRemove = resources;
   },
 
-  togglePromptMove(state, resources) {
-    if (!resources) {
-      state.showPromptMove = false;
-      resources = [];
-    } else {
-      state.showPromptMove = !state.showPromptMove;
-      state.toMove = Array.isArray(resources) ? resources : [resources];
-    }
-  },
-
   togglePromptRestore(state, resources) {
     if (!resources) {
       state.showPromptRestore = false;
@@ -112,35 +97,13 @@ export const mutations = {
     state.toRestore = resources;
   },
 
-  toggleAssignTo(state, resources) {
-    state.showAssignTo = !state.showAssignTo;
-
-    if (!isArray(resources)) {
-      resources = [resources];
-    }
-
-    state.toAssign = resources;
-  },
-
-  togglePromptUpdate(state, resources) {
-    if (!resources) {
-      // Clearing the resources also hides the prompt
-      state.showPromptUpdate = false;
-    } else {
-      state.showPromptUpdate = !state.showPromptUpdate;
-    }
-
-    if (!isArray(resources)) {
-      resources = [resources];
-    }
-
-    state.toUpdate = resources;
-  },
-
   togglePromptModal(state, data) {
     if (!data) {
       // Clearing the resources also hides the prompt
       state.showModal = false;
+    } else if (data.performCallback) {
+      state.performCallbackData = data;
+      state.showModal = false;
     } else {
       state.showModal = true;
     }
@@ -148,6 +111,10 @@ export const mutations = {
     state.modalData = data;
   },
 
+  clearCallbackData(state) {
+    state.performCallbackData = undefined;
+  },
+
   SET_RESOURCE(state, resources) {
     state.resources = !isArray(resources) ? [resources] : resources;
   }
@@ -159,6 +126,9 @@ export const actions = {
   },
   setResource({ commit }, resource) {
     commit('SET_RESOURCE', resource);
+  },
+  clearCallbackData({ commit }) {
+    commit('clearCallbackData');
   }
 };
 

package/store/auth.js

@@ -14,6 +14,7 @@ export const BASE_SCOPES = {
   azuread:      [],
   keycloakoidc: ['openid profile email'],
   genericoidc:  ['openid profile email'],
+  cognito:      ['openid email'],
 };
 
 const KEY = 'rc_nonce';
@@ -355,6 +356,8 @@ export const actions = {
 
     commit('loggedOut');
     dispatch('onLogout', null, { root: true });
+
+    dispatch('uiplugins/setReady', false, { root: true });
   },
 
   async logout({ dispatch, getters, rootState }, options = {}) {

package/store/catalog.js

@@ -1,4 +1,4 @@
-import { CATALOG, EXPERIMENTAL, DEPRECATED } from '@shell/config/types';
+import { CATALOG, EXPERIMENTAL, DEPRECATED, CATALOG_SORT_OPTIONS } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { addParams } from '@shell/utils/url';
 import { allHash, allHashSettled } from '@shell/utils/promise';
@@ -31,6 +31,12 @@ const CERTIFIED_SORTS = {
   other:                               3,
 };
 
+export const APP_STATUS = {
+  INSTALLED:   'installed',
+  DEPRECATED:  'deprecated',
+  UPGRADEABLE: 'upgradeable'
+};
+
 export const APP_UPGRADE_STATUS = {
   NOT_APPLICABLE:    'not_applicable', // managed by fleet
   NO_UPGRADE:        'no_upgrade', // no upgrade found
@@ -498,35 +504,52 @@ function addChart(ctx, map, chart, repo) {
 
   if ( !obj ) {
     if ( ctx ) { }
+    const experimental = !!chart.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL];
+    const windowsIncompatible = !(chart.annotations?.[CATALOG_ANNOTATIONS.PERMITTED_OS] || '').includes('windows');
+    const deploysOnWindows = (chart.annotations?.[CATALOG_ANNOTATIONS.DEPLOYED_OS] || '').includes('windows');
+    const tags = [];
+
+    if (experimental) {
+      tags.push(ctx.rootGetters['i18n/withFallback']('generic.experimental'));
+    }
+    if (windowsIncompatible) {
+      tags.push(ctx.rootGetters['i18n/withFallback']('catalog.charts.windowsIncompatible'));
+    }
+    if (deploysOnWindows) {
+      tags.push(ctx.rootGetters['i18n/withFallback']('catalog.charts.deploysOnWindows'));
+    }
+
     obj = classify(ctx, {
       key,
-      type:                'chart',
-      id:                  key,
+      type:             'chart',
+      id:               key,
       certified,
       sideLabel,
       repoType,
       repoName,
-      repoNameDisplay:     ctx.rootGetters['i18n/withFallback'](`catalog.repo.name."${ repoName }"`, null, repoName),
-      certifiedSort:       CERTIFIED_SORTS[certified] || 99,
-      icon:                chart.icon,
-      color:               repo.color,
-      chartType:           chart.annotations?.[CATALOG_ANNOTATIONS.TYPE] || CATALOG_ANNOTATIONS._APP,
-      chartName:           chart.name,
-      chartNameDisplay:    chart.annotations?.[CATALOG_ANNOTATIONS.DISPLAY_NAME] || chart.name,
-      chartDescription:    chart.description,
-      featured:            chart.annotations?.[CATALOG_ANNOTATIONS.FEATURED],
-      repoKey:             repo._key,
-      versions:            [],
-      categories:          filterCategories(chart.keywords),
-      deprecated:          !!chart.deprecated,
-      experimental:        !!chart.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL],
-      hidden:              !!chart.annotations?.[CATALOG_ANNOTATIONS.HIDDEN],
-      targetNamespace:     chart.annotations?.[CATALOG_ANNOTATIONS.NAMESPACE],
-      targetName:          chart.annotations?.[CATALOG_ANNOTATIONS.RELEASE_NAME],
-      scope:               chart.annotations?.[CATALOG_ANNOTATIONS.SCOPE],
-      provides:            [],
-      windowsIncompatible: !(chart.annotations?.[CATALOG_ANNOTATIONS.PERMITTED_OS] || '').includes('windows'),
-      deploysOnWindows:    (chart.annotations?.[CATALOG_ANNOTATIONS.DEPLOYED_OS] || '').includes('windows')
+      repoNameDisplay:  ctx.rootGetters['i18n/withFallback'](`catalog.repo.name."${ repoName }"`, null, repoName),
+      certifiedSort:    CERTIFIED_SORTS[certified] || 99,
+      icon:             chart.icon,
+      color:            repo.color,
+      chartType:        chart.annotations?.[CATALOG_ANNOTATIONS.TYPE] || CATALOG_ANNOTATIONS._APP,
+      chartName:        chart.name,
+      chartNameDisplay: chart.annotations?.[CATALOG_ANNOTATIONS.DISPLAY_NAME] || chart.name,
+      chartDescription: chart.description,
+      featured:         chart.annotations?.[CATALOG_ANNOTATIONS.FEATURED],
+      featuredIndex:    chart.annotations?.[CATALOG_ANNOTATIONS.FEATURED] ? Number(chart.annotations?.[CATALOG_ANNOTATIONS.FEATURED]) : Number.MAX_SAFE_INTEGER,
+      repoKey:          repo._key,
+      versions:         [],
+      categories:       filterCategories(chart.keywords),
+      deprecated:       !!chart.deprecated,
+      experimental,
+      hidden:           !!chart.annotations?.[CATALOG_ANNOTATIONS.HIDDEN],
+      targetNamespace:  chart.annotations?.[CATALOG_ANNOTATIONS.NAMESPACE],
+      targetName:       chart.annotations?.[CATALOG_ANNOTATIONS.RELEASE_NAME],
+      scope:            chart.annotations?.[CATALOG_ANNOTATIONS.SCOPE],
+      provides:         [],
+      windowsIncompatible,
+      deploysOnWindows,
+      tags
     });
 
     map[key] = obj;
@@ -543,6 +566,10 @@ function addChart(ctx, map, chart, repo) {
   }
 
   obj.versions.push(chart);
+
+  if (!obj.durationSinceRelease) {
+    obj.durationSinceRelease = Date.now() - new Date(obj.versions[0].created).getTime();
+  }
 }
 
 function preferSameRepo(matching, repoType, repoName) {
@@ -582,6 +609,16 @@ function normalizeCategory(c) {
   return c.replace(/\s+/g, '').toLowerCase();
 }
 
+export function normalizeFilterQuery(value) {
+  if (Array.isArray(value)) {
+    return value.map((v) => v.toLowerCase());
+  } else if (value) {
+    return [value.toLowerCase()];
+  }
+
+  return undefined;
+}
+
 /*
 catalog.cattle.io/deplys-on-os: OS -> requires global.cattle.OS.enabled: true
   default: nothing
@@ -614,7 +651,9 @@ export function filterAndArrangeCharts(charts, {
   clusterProvider = '',
   operatingSystems,
   category,
+  tag,
   searchQuery,
+  sort,
   showDeprecated = false,
   showHidden = false,
   showPrerelease = true,
@@ -641,11 +680,16 @@ export function filterAndArrangeCharts(charts, {
       return false;
     }
 
-    if ( category && !c.categories.includes(category) ) {
+    if (category?.length && !c.categories.some((cat) => category.includes(cat.toLowerCase()))) {
       // The category filter doesn't match
       return false;
     }
 
+    if (tag?.length && !c.tags.some((t) => tag.includes(t.toLowerCase()))) {
+      // The tag filter doesn't match
+      return false;
+    }
+
     if ( searchQuery ) {
       // The search filter doesn't match
       const searchTokens = searchQuery.split(/\s*[, ]\s*/).map((x) => ensureRegex(x, false));
@@ -662,5 +706,21 @@ export function filterAndArrangeCharts(charts, {
     return true;
   });
 
+  if (sort === CATALOG_SORT_OPTIONS.RECOMMENDED) {
+    return sortBy(out, ['featuredIndex', 'certifiedSort', 'repoName', 'chartNameDisplay']);
+  }
+
+  if (sort === CATALOG_SORT_OPTIONS.LAST_UPDATED_DESC) {
+    return sortBy(out, ['durationSinceRelease', 'featuredIndex', 'certifiedSort', 'repoName', 'chartNameDisplay']);
+  }
+
+  if (sort === CATALOG_SORT_OPTIONS.ALPHABETICAL_ASC) {
+    return sortBy(out, ['chartNameDisplay', 'featuredIndex', 'certifiedSort', 'repoName']);
+  }
+
+  if (sort === CATALOG_SORT_OPTIONS.ALPHABETICAL_DESC) {
+    return sortBy(out, ['chartNameDisplay'], true);
+  }
+
   return sortBy(out, ['certifiedSort', 'repoName', 'chartNameDisplay']);
 }

package/store/features.js

@@ -28,7 +28,6 @@ export const mapFeature = function(name) {
 export const MULTI_CLUSTER = create('multi-cluster-management', true);
 export const LEGACY = create('legacy', false);
 export const RKE2 = create('rke2', true);
-export const RKE1_UI = create('rke1-ui', true);
 export const UNSUPPORTED_STORAGE_DRIVERS = create('unsupported-storage-drivers', false);
 export const FLEET = create('continuous-delivery', true);
 export const HARVESTER = create('harvester', true);

package/store/growl.js

@@ -1,8 +1,11 @@
 import { clear, findBy, removeObject } from '@shell/utils/array';
 import { stringify } from '@shell/utils/error';
+import { NotificationLevel } from '@shell/types/notifications';
 
 const DEFAULT_TIMEOUT = 5000;
 
+const MAX_GROWLS = 5;
+
 export const state = function() {
   return {
     nextId: 1,
@@ -13,18 +16,28 @@ export const state = function() {
 export const getters = {
   find: (state) => ({ key, val }) => {
     return findBy(state.stack, key, val);
+  },
+
+  // findBy is slow, so more efficient getter for id
+  byId: (state) => (id) => {
+    return state.stack.find((item) => item.id === id);
   }
 };
 
 export const mutations = {
   add(state, data) {
+    if (state.stack.length === MAX_GROWLS) {
+      // Remove the last one
+      state.stack.pop();
+    }
+
     state.stack = [
-      ...state.stack,
       {
         id:      state.nextId++,
         started: (new Date().getTime()),
         ...data
-      }
+      },
+      ...state.stack
     ];
   },
 
@@ -50,11 +63,29 @@ export const actions = {
     commit('remove', id);
   },
 
-  success({ commit }, data) {
+  async close({ commit, dispatch, getters }, id ) {
+    const growl = getters.byId(id);
+
+    commit('remove', id);
+
+    // If the growl has a notification, mark it as read if the user dismisses the growl
+    if (growl.notification) {
+      await dispatch('notifications/markRead', growl.notification, { root: true });
+    }
+  },
+
+  async success({ commit, dispatch }, data) {
+    // Send a notification for the growl
+    const notification = await dispatch('notifications/fromGrowl', {
+      ...data,
+      level: NotificationLevel.Success
+    }, { root: true });
+
     commit('add', {
       color:   'success',
       icon:    'checkmark',
       timeout: DEFAULT_TIMEOUT,
+      notification,
       ...data
     });
   },
@@ -68,31 +99,89 @@ export const actions = {
     });
   },
 
-  warning({ commit }, data) {
+  async warning({ commit, dispatch }, data) {
+    // Send a notification for the growl
+    const notification = await dispatch('notifications/fromGrowl', {
+      ...data,
+      level: NotificationLevel.Warning
+    }, { root: true });
+
     commit('add', {
       color:   'warning',
       icon:    'warning',
       timeout: DEFAULT_TIMEOUT,
+      notification,
       ...data
     });
   },
 
-  error({ commit }, data) {
+  async error({ commit, dispatch }, data) {
+    // Send a notification for the growl
+    const notification = await dispatch('notifications/fromGrowl', {
+      ...data,
+      level: NotificationLevel.Error
+    }, { root: true });
+
     commit('add', {
       color:   'error',
       icon:    'error',
-      timeout: 0, // Errors don't timeout
+      timeout: DEFAULT_TIMEOUT, // Errors timeout since they will be available as a notification
+      notification,
       ...data
     });
   },
 
-  fromError({ commit }, { title, err }) {
+  async fromError({ commit, dispatch }, { title, err }) {
+    // Send a notification for the growl
+    const notification = await dispatch('notifications/fromGrowl', {
+      title,
+      message: stringify(err),
+      level:   NotificationLevel.Error
+    }, { root: true });
+
     commit('add', {
       color:   'error',
       icon:    'error',
-      timeout: 0, // Errors don't timeout
+      timeout: DEFAULT_TIMEOUT, // Errors timeout since they will be available as a notification
+      notification,
       title,
       message: stringify(err),
     });
+  },
+
+  /**
+   * Used to create a growl when a notification is sent
+   *
+   * Growls are only shown for Success, Warning and Error notifications
+   */
+  notification({ commit }, notification) {
+    const growl = {
+      title:        notification.title,
+      message:      notification.message,
+      notification: notification.id,
+      timeout:      DEFAULT_TIMEOUT,
+    };
+
+    switch (notification.level) {
+    case NotificationLevel.Success:
+      growl.color = 'success';
+      growl.icon = 'checkmark';
+      break;
+    case NotificationLevel.Warning:
+      growl.color = 'warning';
+      growl.icon = 'warning';
+      break;
+    case NotificationLevel.Error:
+      growl.color = 'error';
+      growl.icon = 'error';
+      break;
+    default:
+      growl.skip = true;
+    }
+
+    // We don't show growls for info, announcement, task
+    if (!growl.skip) {
+      commit('add', growl);
+    }
   }
 };

package/store/i18n.js

@@ -1,12 +1,12 @@
 import merge from 'lodash/merge';
 import IntlMessageFormat from 'intl-messageformat';
 import { get } from '@shell/utils/object';
-import zh from '@shell/assets/translations/zh-hans.yaml';
+import en from '@shell/assets/translations/en-us.yaml';
 import { getProduct, getVendor, DOCS_BASE } from '@shell/config/private-label';
 import { loadTranslation } from '@shell/utils/dynamic-importer';
 
 const NONE = 'none';
-const DEFAULT_LOCALE = 'zh-hans';
+const DEFAULT_LOCALE = 'en-us';
 
 // Formatters can't be serialized into state
 const intlCache = {};
@@ -18,14 +18,14 @@ export const state = function() {
   // const available = translationContext.keys().map(path => path.replace(/^.*\/([^\/]+)\.[^.]+$/, '$1'));
   // Using require.context() forces them to all be in the same webpack chunk name... just hardcode the list for now so zh-hans
   // gets generated as it's own chunk instead of being loaded all the time.
-  const available = [DEFAULT_LOCALE, 'zh-hans'];
+  const available = ['zh-hans', DEFAULT_LOCALE];
 
   const out = {
     default:      DEFAULT_LOCALE,
     selected:     null,
     previous:     null,
     available,
-    translations: { [DEFAULT_LOCALE]: zh },
+    translations: { [DEFAULT_LOCALE]: en },
   };
 
   return out;
@@ -108,6 +108,7 @@ export const getters = {
         ...args
       };
 
+      moreArgs['count'] = moreArgs['count'] !== undefined ? moreArgs['count'] : 1
       return formatter.format(moreArgs);
     } else {
       return '?';
@@ -229,8 +230,11 @@ export const actions = {
     const exists = !!state.available.find((loc) => loc === selected);
 
     if ( !selected || !exists) {
-      selected = state.default;
+      selected = 'zh-hans';
     }
+    
+    // selected = 'none'
+    selected = 'zh-hans'
 
     return dispatch('switchTo', selected);
   },