@rancher/shell 0.1.2 → 0.1.4

package/rancher-components/Form/Checkbox/Checkbox.test.ts

@@ -0,0 +1,77 @@
+import { shallowMount } from '@vue/test-utils';
+import { Checkbox } from './index';
+
+describe('Checkbox.vue', () => {
+  it('is unchecked by default', () => {
+    const wrapper = shallowMount(Checkbox);
+    const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
+
+    expect(cbInput.checked).toBe(false);
+  });
+
+  it('renders a true value', () => {
+    const wrapper = shallowMount(Checkbox, { propsData: { value: true } });
+    const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
+
+    expect(cbInput.checked).toBe(true);
+  });
+
+  it('updates from false to true when props change', async () => {
+    const wrapper = shallowMount(Checkbox);
+    const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
+
+    expect(cbInput.checked).toBe(false);
+
+    await wrapper.setProps({ value: true });
+
+    expect(cbInput.checked).toBe(true);
+  });
+
+  it('emits an input event with a true value', async () => {
+    const wrapper = shallowMount(Checkbox);
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
+
+    (wrapper.vm as any).clicked(event);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.length).toBe(1);
+    expect(wrapper.emitted().input?.[0][0]).toBe(true);
+  });
+
+  it('emits an input event with a custom valueWhenTrue', async () => {
+    const valueWhenTrue = 'BIG IF TRUE';
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
+
+    const wrapper = shallowMount(Checkbox, { propsData: { value: false, valueWhenTrue } });
+
+    (wrapper.vm as any).clicked(event);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.length).toBe(1);
+    expect(wrapper.emitted().input?.[0][0]).toBe(valueWhenTrue);
+  });
+
+  it('updates from valueWhenTrue to falsy', async () => {
+    const valueWhenTrue = 'REAL HUGE IF FALSE';
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
+
+    const wrapper = shallowMount(Checkbox, { propsData: { value: valueWhenTrue, valueWhenTrue } });
+
+    (wrapper.vm as any).clicked(event);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.[0][0]).toBe(null);
+  })
+});

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -9,7 +9,7 @@ export default Vue.extend({
      * The checkbox value.
      */
     value: {
-      type:    [Boolean, Array] as PropType<boolean | boolean[]>,
+      type:    [Boolean, Array, String] as PropType<boolean | boolean[] | string>,
       default: false
     },
 
@@ -169,6 +169,12 @@ export default Vue.extend({
           addObject(this.value, this.valueWhenTrue);
         }
         this.$emit('input', this.value);
+      } else if (this.isString(this.valueWhenTrue)) {
+        if (this.isChecked) {
+          this.$emit('input', null);
+        } else {
+          this.$emit('input', this.valueWhenTrue);
+        }
       } else {
         this.$emit('input', !this.value);
         this.$el.dispatchEvent(click);
@@ -178,10 +184,14 @@ export default Vue.extend({
     /**
      * Determines if there are multiple values for the checkbox.
      */
-    isMulti(value: boolean | boolean[]): value is boolean[] {
+    isMulti(value: boolean | boolean[] | string): value is boolean[] {
       return Array.isArray(value);
     },
 
+    isString(value: boolean | number | string): value is boolean {
+      return typeof value === 'string';
+    },
+
     /**
      * Finds the first true value for multiple checkboxes.
      * @param value A collection of values for the checkbox.

package/scripts/build-pkg.sh

@@ -4,6 +4,20 @@ SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
 BASE_DIR="$( cd $SCRIPT_DIR && cd ../.. & pwd)"
 SHELL_DIR=$BASE_DIR/shell/
 EXIT_CODE=0
+FORMATS="umd-min"
+
+while getopts "df:" opt; do
+  case $opt in
+    d)
+      FORMATS="umd"
+      ;;
+    f)
+      FORMATS=$OPTARG
+      ;;      
+  esac
+done
+
+shift $((OPTIND-1))
 
 # Use shell folder in node modules when we have @rancher/shell installed as a node module
 # rather than the use-case of the mono-repo with the shell folder at the top-level
@@ -12,7 +26,12 @@ if [ ! -d ${SHELL_DIR} ]; then
   SHELL_DIR=$(cd -P ${SHELL_DIR} && pwd)
 fi
 
-VERSION=$(cd pkg/$1; node -p -e "require('./package.json').version")
+CREATE_TARBALL=${2}
+
+if [ -z "$VERSION" ]; then
+  VERSION=$(cd pkg/$1; node -p -e "require('./package.json').version")
+fi
+
 NAME=${1}-${VERSION}
 PKG_DIST=${BASE_DIR}/dist-pkg/${NAME}
 
@@ -20,6 +39,7 @@ if [ -d "${BASE_DIR}/pkg/${1}" ]; then
   echo "Building UI Package $1"
   echo "  Package name:    ${NAME}"
   echo "  Package version: ${VERSION}"
+  echo "  Output formats:  ${FORMATS}"
   rm -rf ${PKG_DIST}
   mkdir -p ${PKG_DIST}
 
@@ -42,7 +62,11 @@ if [ -d "${BASE_DIR}/pkg/${1}" ]; then
     FILE=index.ts
   fi
 
-  ${BASE_DIR}/node_modules/.bin/vue-cli-service build --name ${NAME} --target lib ${FILE} --dest ${PKG_DIST} --formats umd-min --filename ${NAME}
+  if [ -n "$COMMIT" ]; then
+    echo ${COMMIT} > ${PKG_DIST}/version
+  fi
+
+  ${BASE_DIR}/node_modules/.bin/vue-cli-service build --name ${NAME} --target lib ${FILE} --dest ${PKG_DIST} --formats ${FORMATS} --filename ${NAME}
   EXIT_CODE=$?
   cp -f ./package.json ${PKG_DIST}/package.json
   node ${SCRIPT_DIR}/pkgfile.js ${PKG_DIST}/package.json
@@ -52,4 +76,26 @@ if [ -d "${BASE_DIR}/pkg/${1}" ]; then
   popd  
 fi
 
+if [ $EXIT_CODE -ne 0 ]; then
+  exit $EXIT_CODE
+fi
+
+
+if [ -n "${CREATE_TARBALL}" ]; then
+  echo $COMMIT $COMMIT_BRANCH > ${PKG_DIST}/version-commit.txt
+
+  TARBALL=${NAME}.tar.gz
+
+  pushd ${PKG_DIST}
+
+  rm -f ../$TARBALL
+
+  echo "Compressing to ${TARBALL}..."
+
+  tar -czf ../${TARBALL} .
+
+  popd
+
+fi
+
 exit $EXIT_CODE

package/scripts/drone-build-pkg.sh

@@ -0,0 +1,31 @@
+#!/usr/bin/env bash
+
+yarn --pure-lockfile install
+
+source scripts/version
+
+if [[ $COMMIT_BRANCH == "master" ]]; then
+  VERSION="latest"
+else
+  VERSION=$(cd pkg/$1; node -p -e "require('./package.json').version")
+fi
+
+echo "Drone Build Args"
+echo "COMMIT: ${COMMIT}"
+echo "COMMIT_BRANCH: ${COMMIT_BRANCH}"
+echo "VERSION: ${VERSION}"
+echo ""
+
+# package, override version, commit for file in pkg root
+# Note - in the future env vars should be moved to args and build-pkg should use getopts
+COMMIT=$COMMIT COMMIT_BRANCH=$COMMIT_BRANCH VERSION=$VERSION ./shell/scripts/build-pkg.sh ${1} "true"
+EXIT_CODE=$?
+
+export PKG_NAME=${1}-${VERSION}
+export PKG_TARBALL=${PKG_NAME}.tar.gz
+
+echo "Drone Build Artefacts"
+echo "Package Directory: ${PKG_NAME}"
+echo "Package Tarball: ${PKG_TARBALL}"
+
+exit $EXIT_CODE

package/scripts/publish-shell.sh

@@ -1,9 +1,12 @@
 #!/usr/bin/env bash
 
-SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
-BASE_DIR="$( cd $SCRIPT_DIR && cd ../.. & pwd)"
+SCRIPT_DIR="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" &>/dev/null && pwd)"
+BASE_DIR="$(
+  cd $SCRIPT_DIR && cd ../.. &
+  pwd
+)"
 SHELL_DIR=$BASE_DIR/shell/
-PUBLISH_ARGS="--no-git-tag-version --access public"
+PUBLISH_ARGS="--no-git-tag-version --access public $PUBLISH_ARGS"
 
 echo "Publishing Shell Packages"
 
@@ -18,10 +21,10 @@ mkdir -p ${PKG_DIST}
 rm -rf ${PKG_DIST}/app
 rm -rf ${PKG_DIST}/pkg
 
-pushd ${SHELL_DIR} > /dev/null
+pushd ${SHELL_DIR} >/dev/null
 
-PKG_VERSION=`node -p "require('./package.json').version"`
-popd > /dev/null
+PKG_VERSION=$(node -p "require('./package.json').version")
+popd >/dev/null
 
 echo "Publishing version: $PKG_VERSION"
 
@@ -39,7 +42,7 @@ function publish() {
   FOLDER=$2
 
   echo "Publishing ${NAME} from ${FOLDER}"
-  pushd ${FOLDER} > /dev/null
+  pushd ${FOLDER} >/dev/null
 
   # For now, copy the rancher components into the shell and ship them with it
   if [ "$NAME" == "Shell" ]; then
@@ -50,11 +53,7 @@ function publish() {
 
   yarn publish . --new-version ${PKG_VERSION} ${PUBLISH_ARGS}
   RET=$?
-
-  # Remove the rancher-components folder if we created it
-  rm -rf ${SHELL_DIR}/rancher-components
-
-  popd > /dev/null
+  popd >/dev/null
 
   if [ $RET -ne 0 ]; then
     echo "Error publishing package ${NAME}"

package/scripts/serve-pkgs

@@ -9,13 +9,14 @@ const dir = path.resolve('.');
 const pkgs = path.join(dir, 'dist-pkg');
 let port = 4500;
 
-var express = require('express')
-var serveStatic = require('serve-static');
- 
-var app = express()
+const express = require('express');
+const serveStatic = require('serve-static');
+
+const app = express();
 
 function catalog(res) {
   const response = [];
+
   fs.readdirSync(pkgs).forEach((f) => {
     const pkgFile = path.join(pkgs, f, 'package.json');
 
@@ -27,7 +28,7 @@ function catalog(res) {
     }
   });
 
-  res.json(response)
+  res.json(response);
 }
 
 app.use('/', (req, res, next) => {
@@ -37,7 +38,7 @@ app.use('/', (req, res, next) => {
 
   return next();
 });
- 
+
 app.use(serveStatic(pkgs));
 
 if (process.env.PORT) {
@@ -47,16 +48,22 @@ if (process.env.PORT) {
 const base = `http://127.0.0.1:${ port }`;
 
 console.log('');
-console.log(`Serving catalog on ${ base }`)
+console.log(`Serving catalog on ${ base }`);
 console.log('');
 console.log(`Serving packages:`);
 console.log('');
 fs.readdirSync(pkgs).forEach((f) => {
-  const main = `${ f }.umd.min.js`;
+  let main = `${ f }.umd.min.js`;
 
   if (fs.existsSync(path.join(pkgs, f, main))) {
     console.log(`  ${ f } available at: ${ base }/${ f }/${ main }`);
+  } else {
+    main = `${ f }.umd.js`;
+
+    if (fs.existsSync(path.join(pkgs, f, main))) {
+      console.log(`  ${ f } available at: ${ base }/${ f }/${ main }`);
+    }
   }
 });
- 
-app.listen(port)
+
+app.listen(port);

package/scripts/sync-shell-deps

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+
+const fs = require('fs-extra');
+const path = require('path');
+
+console.log(__dirname);
+
+const dir = path.resolve('.');
+
+console.log('Syncing shell dependencies');
+
+const topFile = path.join(dir, 'package.json');
+const shellFile = path.join(dir, 'shell', 'package.json');
+
+console.log(topFile);
+console.log(shellFile);
+
+const mainPkg = JSON.parse(fs.readFileSync(topFile));
+
+console.log(mainPkg.version);
+
+const shellPkg = JSON.parse(fs.readFileSync(shellFile));
+
+console.log(shellPkg.version);
+
+Object.keys(shellPkg.dependencies).forEach(k => {
+  const version = mainPkg.dependencies[k] || mainPkg.devDependencies[k];
+  const current = shellPkg.dependencies[k];
+
+  if (version) {
+    console.log(`Syncing ${ k } -> ${ version } was ${ current }`);
+    shellPkg.dependencies[k] = version;
+  }
+});
+
+fs.writeFileSync(shellFile, JSON.stringify(shellPkg, undefined, 2));
+

package/store/catalog.js

@@ -61,6 +61,11 @@ export const getters = {
     return [...clustered, ...namespaced];
   },
 
+  // Raw charts
+  rawCharts(state) {
+    return state.charts;
+  },
+
   repo(state, getters) {
     return ({ repoType, repoName }) => {
       const ary = (repoType === 'cluster' ? state.clusterRepos : state.namespacedRepos);
@@ -250,19 +255,13 @@ export const getters = {
 
   haveComponent() {
     return (name) => {
-      try {
-        require.resolve(`@shell/chart/${ name }`);
-
-        return true;
-      } catch (e) {
-        return false;
-      }
+      return getters['type-map/hasCustomChart'](name);
     };
   },
 
   importComponent(state, getters) {
     return (name) => {
-      return importChart(name);
+      return getters['type-map/importChart'](name);
     };
   },
 
@@ -340,6 +339,7 @@ export const actions = {
     // Installing an app? This is fine (in cluster store)
     // Fetching list of cluster templates? This is fine (in management store)
     // Installing a cluster template? This isn't fine (in cluster store as per installing app, but if there is no cluster we need to default to management)
+
     const inStore = rootGetters['currentCluster'] ? rootGetters['currentProduct'].inStore : 'management';
 
     if ( rootGetters[`${ inStore }/schemaFor`](CATALOG.CLUSTER_REPO) ) {
@@ -517,6 +517,7 @@ function addChart(ctx, map, chart, repo) {
       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),
@@ -652,7 +653,9 @@ export function filterAndArrangeCharts(charts, {
       const searchTokens = searchQuery.split(/\s*[, ]\s*/).map(x => ensureRegex(x, false));
 
       for ( const token of searchTokens ) {
-        if ( !c.chartNameDisplay.match(token) && (c.chartDescription && !c.chartDescription.match(token)) ) {
+        const chartDescription = c.chartDescription || '';
+
+        if ( !c.chartNameDisplay.match(token) && !chartDescription.match(token) ) {
           return false;
         }
       }

package/store/i18n.js

@@ -1,6 +1,5 @@
 import merge from 'lodash/merge';
 import IntlMessageFormat from 'intl-messageformat';
-import { LOCALE } from '@shell/config/cookies';
 import { get } from '@shell/utils/object';
 import en from '@shell/assets/translations/en-us.yaml';
 import { getProduct, getVendor, DOCS_BASE } from '@shell/config/private-label';
@@ -140,6 +139,14 @@ export const getters = {
     return state.default;
   },
 
+  multiWithFallback: (state, getters) => (items, key = 'key') => {
+    return items.map((item) => {
+      item[key] = getters.withFallback(item[key], null, item[key]);
+
+      return item;
+    });
+  },
+
   withFallback: (state, getters) => (key, args, fallback, fallbackIsKey = false) => {
     // Support withFallback(key,fallback) when no args
     if ( !fallback && typeof args === 'string' ) {
@@ -154,7 +161,8 @@ export const getters = {
     } else {
       return fallback;
     }
-  }
+  },
+
 };
 
 export const mutations = {
@@ -208,8 +216,10 @@ export const mutations = {
 };
 
 export const actions = {
-  init({ state, commit, dispatch }) {
-    let selected = this.$cookies.get(LOCALE, { parseJSON: false });
+  init({
+    state, commit, dispatch, rootGetters
+  }) {
+    let selected = rootGetters['prefs/get']('locale');
 
     // We might be using a locale that is loaded by a plugin that is no longer loaded
     const exists = !!state.available.find(loc => loc === selected);
@@ -259,8 +269,11 @@ export const actions = {
     state,
     rootState,
     commit,
-    dispatch
+    dispatch,
+    getters
   }, locale) {
+    const currentLocale = getters['current']();
+
     if ( locale === NONE ) {
       commit('setSelected', locale);
 
@@ -308,13 +321,14 @@ export const actions = {
     }
 
     commit('setSelected', locale);
-    this.$cookies.set(LOCALE, locale, {
-      encode:   x => x,
-      maxAge:   86400 * 365,
-      path:     '/',
-      sameSite: true,
-      secure:   true,
-    });
+
+    // Ony update the preference if the locale changed
+    if (currentLocale !== locale) {
+      dispatch('prefs/set', {
+        key:   'locale',
+        value: state.selected
+      }, { root: true });
+    }
   },
 
   toggleNone({ state, dispatch }) {