@rancher/shell 0.2.4 → 0.3.0

package/rancher-components/components/Utils/DraggableZone/DraggableZone.vue

@@ -0,0 +1,181 @@
+<script lang="ts">
+import Vue from 'vue';
+import { mapState } from 'vuex';
+import { BOTTOM, CENTER, LEFT, RIGHT } from '@shell/utils/position';
+
+type Zone = null | typeof CENTER | typeof RIGHT | typeof BOTTOM | typeof LEFT;
+
+export interface Drag {
+  active: boolean;
+  zone: Zone;
+}
+
+interface Data {
+  drag: Drag;
+}
+
+export default Vue.extend({
+  data(): Data {
+    return {
+      drag: {
+        active: false,
+        zone:   CENTER,
+      },
+    };
+  },
+
+  computed: {
+
+    ...mapState('wm', ['userPin']),
+
+    pin: {
+      get(): Zone {
+        return this.userPin;
+      },
+
+      set(pin: Zone) {
+        if (pin === CENTER) {
+          return;
+        }
+        window.localStorage.setItem('wm-pin', pin as string);
+        this.$store.commit('wm/setUserPin', pin);
+      },
+    },
+
+  },
+
+  methods: {
+
+    onDragStart() {
+      this.drag.active = true;
+    },
+
+    onDragOver(event: DragEvent, zone: Zone) {
+      this.drag.zone = zone;
+      if (zone !== CENTER) {
+        event.preventDefault();
+      }
+    },
+
+    onDragEnd() {
+      this.pin = this.drag.zone;
+      this.drag = {
+        active: false,
+        zone:   CENTER,
+      };
+    },
+
+  }
+});
+</script>
+
+<template>
+  <div v-if="drag.active">
+    <span
+      v-if="drag.zone != pin"
+      class="pin-effect-area"
+      :class="drag.zone"
+    />
+    <span
+      class="drag-area center"
+      @dragover="onDragOver($event, 'center')"
+    />
+    <span
+      class="drag-area right"
+      @dragover="onDragOver($event, 'right')"
+    />
+    <span
+      class="drag-area bottom"
+      @dragover="onDragOver($event, 'bottom')"
+    />
+    <span
+      class="drag-area left"
+      @dragover="onDragOver($event, 'left')"
+    />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+
+  .pin-effect-area {
+    position: absolute;
+    z-index: 997;
+    width: 0;
+    height: 0;
+    border-style: hidden;
+
+    &.right {
+      top: 55px;
+      right: 0;
+      width: 300px;
+      transition: width .5s ease;
+      height: 100%;
+      background-image: linear-gradient(to right, var(--drag-over-outer-bg), var(--drag-over-inner-bg));
+      border-left: 1px;
+      border-style: hidden hidden hidden dashed;
+    }
+
+    &.left {
+      top: 55px;
+      left: 0;
+      width: 300px;
+      transition: width .5s ease;
+      height: 100%;
+      background-image: linear-gradient(to left, var(--drag-over-outer-bg), var(--drag-over-inner-bg));
+      border-right: 1px;
+      border-style: hidden dashed hidden hidden;
+    }
+
+    &.bottom {
+      bottom: 0;
+      height: 270px;
+      transition: height .5s ease;
+      width: 100%;
+      background-image: linear-gradient(to top, var(--drag-over-inner-bg), var(--drag-over-outer-bg));
+      border-top: 1px;
+      border-style: dashed hidden hidden hidden;
+    }
+
+    &.center {
+      width: 0;
+      height: 0;
+    }
+  }
+
+  // ToDo make height and width as input variable
+  .drag-area {
+    position: absolute;
+    z-index: 999;
+    width: 0;
+    height: 0;
+    opacity: 0;
+
+    &.center {
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 998;
+    }
+
+    &.right {
+      top: 55px;
+      right: 0;
+      width: 300px;
+      height: 100%;
+    }
+
+    &.left {
+      top: 55px;
+      left: 0;
+      width: 300px;
+      height: 100%;
+    }
+
+    &.bottom {
+      bottom: 0;
+      height: 270px;
+      width: 100%;
+    }
+  }
+</style>

package/rancher-components/components/Utils/DraggableZone/index.ts

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

package/scripts/publish-shell.sh

@@ -6,8 +6,14 @@ BASE_DIR="$(
   pwd
 )"
 SHELL_DIR=$BASE_DIR/shell/
+TMP_DIR=$BASE_DIR/tmp
 PUBLISH_ARGS="--no-git-tag-version --access public $PUBLISH_ARGS"
 
+if [ ! -d "${BASE_DIR}/node_modules" ]; then
+  echo "You need to run 'yarn install' first"
+  exit 1
+fi
+
 echo "Publishing Shell Packages"
 
 # We use the version from the shell package for the creator packages
@@ -20,6 +26,7 @@ PKG_DIST=$BASE_DIR/dist-pkg/creators
 mkdir -p ${PKG_DIST}
 rm -rf ${PKG_DIST}/app
 rm -rf ${PKG_DIST}/pkg
+rm -rf ${PKG_DIST}/update
 
 pushd ${SHELL_DIR} >/dev/null
 
@@ -30,12 +37,15 @@ echo "Publishing version: $PKG_VERSION"
 
 cp -R ${SHELL_DIR}/creators/app ${PKG_DIST}
 cp -R ${SHELL_DIR}/creators/pkg ${PKG_DIST}
+cp -R ${SHELL_DIR}/creators/update ${PKG_DIST}
 
 sed -i.bak -e "s/\"0.0.0/"\"$PKG_VERSION"/g" ${PKG_DIST}/app/package.json
 sed -i.bak -e "s/\"0.0.0/"\"$PKG_VERSION"/g" ${PKG_DIST}/pkg/package.json
+sed -i.bak -e "s/\"0.0.0/"\"$PKG_VERSION"/g" ${PKG_DIST}/update/package.json
 
 rm ${PKG_DIST}/app/package.json.bak
 rm ${PKG_DIST}/pkg/package.json.bak
+rm ${PKG_DIST}/update/package.json.bak
 
 function publish() {
   NAME=$1
@@ -47,12 +57,30 @@ function publish() {
   # For now, copy the rancher components into the shell and ship them with it
   if [ "$NAME" == "Shell" ]; then
     echo "Adding Rancher Components"
-    rm -rf ${SHELL_DIR}/rancher-components
-    cp -R ${BASE_DIR}/pkg/rancher-components/src/components ${SHELL_DIR}/rancher-components/
+    cp -R ${BASE_DIR}/pkg/rancher-components/src/components ./rancher-components/
+  fi
+
+  if [ "$NAME" == "Update" ]; then
+    # Add files from the app and pkg creators to the update package
+    mkdir -p ./app
+    mkdir -p ./pkg
+    cp -R ${BASE_DIR}/shell/creators/app/* ./app
+    cp -R ${BASE_DIR}/shell/creators/pkg/* ./pkg
+    # Remove index.ts from pkg files, as we don't want to replace that
+    rm -f ./pkg/files/index.ts
+
+    # Update the package.json for the app
+    cd app
+    node ${SCRIPT_DIR}/record-deps.js
+    cd ..
   fi
 
+  # Make a note of dependency versions, if required
+  node ${SCRIPT_DIR}/record-deps.js
+
   yarn publish . --new-version ${PKG_VERSION} ${PUBLISH_ARGS}
   RET=$?
+
   popd >/dev/null
 
   if [ $RET -ne 0 ]; then
@@ -61,10 +89,15 @@ function publish() {
   fi
 }
 
+# Generate the type definitions for the shell
+${SCRIPT_DIR}/typegen.sh
+
 # Publish the packages - don't tag the git repo and don't auto-increment the version number
 publish "Shell" ${SHELL_DIR}
-
-publish "Application creator" ${PKG_DIST}/app
-publish "Package creator" ${PKG_DIST}/pkg
+publish "Application creator" ${PKG_DIST}/app/
+publish "Package creator" ${PKG_DIST}/pkg/
+publish "Update" ${PKG_DIST}/update/
 
 echo "Done"
+
+

package/scripts/record-deps.js

@@ -0,0 +1,37 @@
+const fs = require('fs');
+const path = require('path');
+
+// Script lives in shell/scripts, so work out top-level dir from there
+const topDir = path.resolve(__dirname, '..', '..');
+const dir = process.cwd();
+
+// Read the package.json file
+const topPkgFile = path.join(topDir, 'package.json');
+const pkgFile = path.join(dir, 'package.json');
+
+const topPkg = JSON.parse(fs.readFileSync(topPkgFile));
+const mainPkg = JSON.parse(fs.readFileSync(pkgFile));
+
+// Look to see if we specify the deps we require
+if (mainPkg._requires) {
+  // Map each one to the same version as the main package
+  const out = {};
+
+  mainPkg._requires.forEach((name) => {
+    let ver = topPkg.dependencies?.[name] || topPkg.devDependencies?.[name];
+
+    if (name === '@rancher/components') {
+      const componentsPkgFile = path.join(topDir, 'pkg', 'rancher-components', 'package.json');
+      const componentsPkg = JSON.parse(fs.readFileSync(componentsPkgFile));
+
+      ver = componentsPkg.version;
+    }
+
+    out[name] = ver;
+  });
+
+  mainPkg._pkgs = out;
+  delete mainPkg._requires;
+
+  fs.writeFileSync(pkgFile, JSON.stringify(mainPkg, null, 2), 'utf-8');
+}

package/scripts/test-plugins-build.sh

@@ -30,7 +30,7 @@ if [ $SKIP_SETUP == "false" ]; then
   fi
 
   set +e
-  RUNNING=$(ps -A | grep Verdaccio -c)
+  RUNNING=$(pgrep Verdaccio | wc -l | xargs)
   set -e
 
   if [ $RUNNING -eq 0 ]; then
@@ -45,7 +45,7 @@ if [ $SKIP_SETUP == "false" ]; then
 
     # Remove existing admin if already there
     if [ -f ~/.config/verdaccio/htpasswd ]; then
-      sed -i '/^admin:/d' ~/.config/verdaccio/htpasswd
+      sed -i.bak -e '/^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
@@ -67,7 +67,10 @@ else
 fi
 
 export YARN_REGISTRY=http://localhost:4873
-export NEXT_TELEMETRY_DISABLED=1
+export NUXT_TELEMETRY_DISABLED=1
+
+# Remove test package from previous run, if present
+rm -rf ${BASE_DIR}/pkg/test-pkg
 
 # 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
@@ -77,6 +80,7 @@ rm ${SHELL_DIR}/package.json.bak
 
 # Publish shell
 echo "Publishing shell packages to local registry"
+yarn install
 ${SHELL_DIR}/scripts/publish-shell.sh
 
 if [ "${SKIP_STANDALONE}" == "false" ]; then
@@ -92,21 +96,21 @@ if [ "${SKIP_STANDALONE}" == "false" ]; then
   yarn install
 
   echo "Building skeleton app"
-  yarn build
+  FORCE_COLOR=true yarn build | cat
 
   # Package creator
   echo "Verifying package creator package"
   yarn create @rancher/pkg test-pkg
 
   echo "Building test package"
-  yarn build-pkg test-pkg
+  FORCE_COLOR=true yarn build-pkg test-pkg | cat
 
   # Add test list component to the test package
   # Validates rancher-components imports
   mkdir pkg/test-pkg/list
   cp ${SHELL_DIR}/list/catalog.cattle.io.clusterrepo.vue pkg/test-pkg/list
 
-  yarn build-pkg test-pkg
+  FORCE_COLOR=true yarn build-pkg test-pkg | cat
 
   echo "Cleaning temporary dir"
   popd > /dev/null
@@ -126,7 +130,7 @@ yarn install
 rm -rf ./pkg/test-pkg
 yarn create @rancher/pkg test-pkg -t
 cp ${SHELL_DIR}/list/catalog.cattle.io.clusterrepo.vue ./pkg/test-pkg/list
-yarn build-pkg test-pkg
+FORCE_COLOR=true yarn build-pkg test-pkg | cat
 rm -rf ./pkg/test-pkg
 
 echo "All done"

package/scripts/typegen.sh

@@ -0,0 +1,84 @@
+#!/usr/bin/env bash
+
+SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
+BASE_DIR="$( cd $SCRIPT_DIR && cd ../.. & pwd)"
+SHELL_DIR=$BASE_DIR/shell
+
+echo "Generating typescript definitions"
+
+rm -rf ${SHELL_DIR}/tmp
+mkdir -p ${SHELL_DIR}/tmp
+
+echo "Generating ..."
+
+# utils
+${BASE_DIR}/node_modules/.bin/tsc shell/utils/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/utils > /dev/null
+
+# config
+${BASE_DIR}/node_modules/.bin/tsc shell/config/query-params.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc shell/config/table-headers.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc shell/config/types.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
+
+# store
+${BASE_DIR}/node_modules/.bin/tsc shell/store/features.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/store > /dev/null
+
+# plugins
+${BASE_DIR}/node_modules/.bin/tsc shell/plugins/dashboard-store/normalize.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store/ > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc shell/plugins/dashboard-store/resource-class.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store/ > /dev/null
+
+
+# mkixins
+${BASE_DIR}/node_modules/.bin/tsc shell/mixins/create-edit-view/index.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/mixins/create-edit-view > /dev/null
+
+#./node_modules/.bin/tsc shell/plugins/dashboard-store/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store > /dev/null
+
+# Go through all of the folders and combine by wrapping with 'declare module'
+
+echo "Combining type definitions ..."
+
+DEST=${SHELL_DIR}/types/shell
+mkdir -p ${DEST}
+
+INDEX=${DEST}/index.d.ts
+rm -rf ${INDEX}
+
+echo "// Auto-generated type definitions for shell" > ${INDEX}
+echo "// Do not modify this file as changes will get overwritten" >> ${INDEX}
+
+# Copy in the vue shim type definitions
+if [ -f "$BASE_DIR/shell/types/vue-shim.d" ]; then
+  cat "$BASE_DIR/shell/types/vue-shim.d" >> ${INDEX}
+fi
+
+function processDir() {
+  local dir=$1
+  local basePkg=$2
+
+  for entry in $1/*
+  do
+    local filename=$(basename $entry)
+
+    if [ -d $entry ]; then
+      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}
+        fi
+
+        echo -e "\n// ${module}\n" >> ${INDEX}
+        echo "declare module '${module}' {" >> ${INDEX}
+        cat $entry >> ${INDEX}
+        echo -e "}" >> ${INDEX}
+      fi
+    fi
+  done
+}
+
+processDir ${SHELL_DIR}/tmp @shell
+
+rm -rf ${SHELL_DIR}/tmp

package/store/action-menu.js

@@ -22,9 +22,9 @@ export const state = function() {
 };
 
 export const getters = {
-  showing:       state => state.show,
-  elem:          state => state.elem,
-  event:         state => state.event,
+  showing: state => state.show,
+  elem:    state => state.elem,
+  event:   state => state.event,
 
   options(state) {
     let selected = state.resources;

package/store/auth.js

@@ -216,8 +216,8 @@ export const actions = {
     let url = removeParam(redirectUrl, GITHUB_SCOPE);
 
     const params = {
-      [GITHUB_SCOPE]:    scopes.join(','),
-      [GITHUB_NONCE]:   base64Encode(nonce, 'url')
+      [GITHUB_SCOPE]: scopes.join(','),
+      [GITHUB_NONCE]: base64Encode(nonce, 'url')
     };
 
     if (!url.includes(GITHUB_REDIRECT)) {
@@ -276,8 +276,8 @@ export const actions = {
         const url = await dispatch('redirectTo', {
           provider,
           redirectUrl,
-          test:        true,
-          redirect:    false
+          test:     true,
+          redirect: false
         });
 
         return openAuthPopup(url, provider);

package/store/aws.js

@@ -44,8 +44,8 @@ function credentialDefaultProvider(accessKey, secretKey) {
     // The SDK will complain if these aren't set, so fill them with something
     // even though the cloudCredential will be used eventually
     const out = {
-      accessKeyId:         accessKey || randomStr(),
-      secretAccessKey:     secretKey || randomStr(),
+      accessKeyId:     accessKey || randomStr(),
+      secretAccessKey: secretKey || randomStr(),
     };
 
     return out;
@@ -164,8 +164,8 @@ export const actions = {
         memoryBytes:       row.MemoryInfo.SizeInMiB * 1024 * 1024,
         label:             rootGetters['i18n/t']('cluster.machineConfig.aws.sizeLabel', {
           apiName,
-          cpu:          row.VCpuInfo.DefaultVCpus,
-          memory:       row.MemoryInfo.SizeInMiB / 1024,
+          cpu:    row.VCpuInfo.DefaultVCpus,
+          memory: row.MemoryInfo.SizeInMiB / 1024,
           storageSize,
           storageUnit,
           storageType,

package/store/catalog.js

@@ -503,32 +503,32 @@ function addChart(ctx, map, chart, repo) {
     if ( ctx ) { }
     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,
-      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],
+      repoKey:             repo._key,
+      versions:            [],
+      categories:          filterCategories(chart.keywords),
+      deprecated:          !!chart.deprecated,
+      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')
     });
 
     map[key] = obj;

package/store/index.js

@@ -795,10 +795,10 @@ export const actions = {
     };
 
     const res = await allHash({
-      projects:          fetchProjects(),
-      counts:            dispatch('cluster/findAll', { type: COUNT }),
-      namespaces:        dispatch('cluster/findAll', { type: NAMESPACE }),
-      navLinks:          !!getters['cluster/schemaFor'](UI.NAV_LINK) && dispatch('cluster/findAll', { type: UI.NAV_LINK }),
+      projects:   fetchProjects(),
+      counts:     dispatch('cluster/findAll', { type: COUNT }),
+      namespaces: dispatch('cluster/findAll', { type: NAMESPACE }),
+      navLinks:   !!getters['cluster/schemaFor'](UI.NAV_LINK) && dispatch('cluster/findAll', { type: UI.NAV_LINK }),
     });
 
     await dispatch('cleanNamespaces');

package/store/plugins.js

@@ -5,7 +5,7 @@ export function simplify(key) {
 }
 
 const credentialOptions = {
-  aws:          {
+  aws: {
     publicKey:  'accessKey',
     publicMode: 'full',
     keys:       ['region', 'accessKey', 'secretKey']
@@ -15,7 +15,7 @@ const credentialOptions = {
     publicMode: 'prefix',
     keys:       'accessToken'
   },
-  azure:        {
+  azure: {
     publicKey:  'clientId',
     publicMode: 'full',
     keys:       ['subscriptionId', 'tenantId', 'clientId', 'clientSecret']

package/store/prefs.js

@@ -470,11 +470,19 @@ export const actions = {
     return server;
   },
 
-  setLastVisited({ state, dispatch }, route) {
+  setLastVisited({ state, dispatch, getters }, route) {
     if (!route) {
       return;
     }
 
+    // Only save the last visited page if the user has that set as the login route preference
+    const afterLoginRoutePref = getters['get'](AFTER_LOGIN_ROUTE);
+    const doNotTrackLastVisited = typeof afterLoginRoutePref !== 'string' || afterLoginRoutePref !== 'last-visited';
+
+    if (doNotTrackLastVisited) {
+      return;
+    }
+
     const toSave = getLoginRoute(route);
 
     return dispatch('set', { key: LAST_VISITED, value: toSave });