@rancher/shell 0.1.1 → 0.1.3

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/rancher-components/Form/LabeledInput/LabeledInput.test.ts

@@ -1,8 +1,6 @@
 
 import { mount } from '@vue/test-utils';
 import { LabeledInput } from './index';
-import Vue from 'vue';
-import Vuex from 'vuex';
 
 describe('component: LabeledInput', () => {
   it('should emit input only once', () => {

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

@@ -126,6 +126,8 @@ export default (
       if (this.hasTooltip) {
         return this.tooltipKey ? this.t(this.tooltipKey) : this.tooltip
       }
+
+      return undefined;
     },
 
     /**

package/rancher-components/Form/Radio/RadioButton.vue

@@ -88,7 +88,14 @@ export default Vue.extend({
     muteLabel(): boolean {
       // Don't mute the label if the mode is view and the button is checked
       return this.disabled && !(this.mode === _VIEW && this.isChecked);
-    }
+    },
+
+    /**
+     * Determines if the description slot is in use.
+     */
+    hasDescriptionSlot(): boolean {
+      return !!this.$slots.description;
+    },
   },
 
   watch: {
@@ -155,6 +162,12 @@ export default Vue.extend({
           {{ description }}
         </template>
       </div>
+      <div
+        v-else-if="hasDescriptionSlot"
+        class="radio-button-outer-container-description"
+      >
+        <slot name="description" />
+      </div>
     </div>
   </label>
 </template>

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

@@ -0,0 +1,107 @@
+import { shallowMount } from '@vue/test-utils';
+import { ToggleSwitch } from './index';
+
+describe('ToggleSwitch.vue', () => {
+  it('renders falsy by default', () => {
+    const wrapper = shallowMount(ToggleSwitch);
+
+    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement
+
+    expect(toggleInput.checked).toBeFalsy();
+  });
+
+  it('renders a true value', () => {
+    const wrapper = shallowMount(
+      ToggleSwitch,
+      {
+        propsData: {
+          value: true
+        }
+      });
+
+    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement
+
+    expect(toggleInput.checked).toBe(true);
+  });
+
+  it('updates from falsy to truthy when props change', async () => {
+    const wrapper = shallowMount(ToggleSwitch);
+  
+    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement
+
+    expect(toggleInput.checked).toBe(false);
+
+    await wrapper.setProps({ value: true });
+  
+    expect(toggleInput.checked).toBe(true);
+  });
+
+  it('emits an input event with a true value', async () => {
+    const wrapper = shallowMount(ToggleSwitch);
+
+    (wrapper.vm as any).toggle(true);
+
+    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 false value', async () => {
+    const wrapper = shallowMount(
+      ToggleSwitch,
+      {
+        propsData: {
+          value: true
+        }
+      }
+    );
+
+    (wrapper.vm as any).toggle(false);
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.length).toBe(1);
+    expect(wrapper.emitted().input?.[0][0]).toBe(false);
+  })
+
+  it('emits an input event with a custom onValue', async () => {
+    const onValue = 'THE TRUTH';
+
+    const wrapper = shallowMount(
+      ToggleSwitch,
+      {
+        propsData: {
+          onValue,
+        }
+      });
+
+    (wrapper.vm as any).toggle(true);
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.length).toBe(1);
+    expect(wrapper.emitted().input?.[0][0]).toBe(onValue);
+  });
+
+  it('emits an input event with a custom offValue', async () => {
+    const offValue = 'NOT THE TRUTH';
+
+    const wrapper = shallowMount(
+      ToggleSwitch,
+      {
+        propsData: {
+          value: true,
+          offValue,
+        }
+      });
+
+    (wrapper.vm as any).toggle(false);
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.length).toBe(1);
+    expect(wrapper.emitted().input?.[0][0]).toBe(offValue);
+  })
+});

package/{components/form → rancher-components/Form/ToggleSwitch}/ToggleSwitch.vue

@@ -1,18 +1,19 @@
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
   props: {
     value: {
-      type:    null,
+      type:    [Boolean, String, Number],
       default: false
     },
 
     offValue: {
-      type:    null,
+      type:    [Boolean, String, Number],
       default: false,
     },
 
     onValue: {
-      type:    null,
+      type:    [Boolean, String, Number],
       default: true,
     },
 
@@ -27,16 +28,25 @@ export default {
     },
   },
   data() {
-    return { state: this.value === this.onValue };
+    return { state: false as boolean | string | number };
   },
 
   methods: {
-    toggle(neu) {
+    toggle(neu: boolean | string | number) {
       this.state = neu === null ? !this.state : neu;
       this.$emit('input', this.state ? this.onValue : this.offValue);
     }
+  },
+
+  watch: {
+    value: {
+      handler() {
+        this.state = this.value === this.onValue;
+      },
+      immediate: true
+    }
   }
-};
+});
 </script>
 
 <template>

package/rancher-components/Form/ToggleSwitch/index.ts

@@ -0,0 +1 @@
+export { default as ToggleSwitch } from './ToggleSwitch.vue';

package/rancher-components/Form/index.ts

@@ -2,3 +2,4 @@ export * from './Checkbox';
 export * from './LabeledInput';
 export * from './Radio';
 export * from './TextArea';
+export * from './ToggleSwitch';

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,7 +1,10 @@
 #!/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"
 
@@ -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/test-plugins-build.sh

@@ -42,6 +42,12 @@ if [ $SKIP_SETUP == "false" ]; then
     sleep 10
 
     echo "Configuring Verdaccio user"
+
+    # Remove existing admin if already there
+    if [ -f ~/.config/verdaccio/htpasswd ]; then
+      sed -i '/^admin:/d' ~/.config/verdaccio/htpasswd
+    fi
+
     curl -XPUT -H "Content-type: application/json" -d '{ "name": "admin", "password": "admin" }' 'http://localhost:4873/-/user/admin' > login.json
     TOKEN=$(jq -r .token login.json)
     rm login.json
@@ -54,9 +60,20 @@ EOF
   fi
 fi
 
-rm -rf ~/.local/share/verdaccio/storage/@rancher/*
+if [ -d ~/.local/share/verdaccio/storage/@rancher ]; then 
+  rm -rf ~/.local/share/verdaccio/storage/@rancher/*
+else
+  rm -rf ~/.config/verdaccio/storage/@rancher/*
+fi
 
 export YARN_REGISTRY=http://localhost:4873
+export NEXT_TELEMETRY_DISABLED=1
+
+# We need to patch the version number of the shell, otherwise if we are running
+# with the currently published version, things will fail as those versions
+# are already published and Verdaccio will check, since it is a read-through cache
+sed -i.bak -e "s/\"version\": \"[0-9]*.[0-9]*.[0-9]*\",/\"version\": \"7.7.7\",/g" ${SHELL_DIR}/package.json
+rm ${SHELL_DIR}/package.json.bak
 
 # Publish shell
 echo "Publishing shell packages to local registry"

package/store/catalog.js

@@ -652,7 +652,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';
@@ -208,8 +207,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 +260,11 @@ export const actions = {
     state,
     rootState,
     commit,
-    dispatch
+    dispatch,
+    getters
   }, locale) {
+    const currentLocale = getters['current']();
+
     if ( locale === NONE ) {
       commit('setSelected', locale);
 
@@ -308,13 +312,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 }) {