@rancher/shell 0.3.3 → 0.3.5

package/core/plugin-helpers.js

@@ -94,78 +94,81 @@ function checkExtensionRouteBinding($route, locationConfig) {
 export function getApplicableExtensionEnhancements(pluginCtx, actionType, uiArea, currRoute, translationCtx = pluginCtx) {
   const extensionEnhancements = [];
 
-  const actions = pluginCtx.$plugin.getUIConfig(actionType, uiArea);
-
-  actions.forEach((action, i) => {
-    if (checkExtensionRouteBinding(currRoute, action.locationConfig)) {
-      // ADD CARD PLUGIN UI ENHANCEMENT
-      if (actionType === ExtensionPoint.CARD) {
-        // intercept to apply translation
-        if (uiArea === CardLocation.CLUSTER_DASHBOARD_CARD && action.labelKey) {
-          actions[i].label = translationCtx.t(action.labelKey);
-        }
-
-      // ADD ACTION PLUGIN UI ENHANCEMENT
-      } else if (actionType === ExtensionPoint.ACTION) {
-        // TABLE ACTION
-        if (uiArea === ActionLocation.TABLE) {
+  // gate it so that we prevent errors on older versions of dashboard
+  if (pluginCtx.$plugin?.getUIConfig) {
+    const actions = pluginCtx.$plugin.getUIConfig(actionType, uiArea);
+
+    actions.forEach((action, i) => {
+      if (checkExtensionRouteBinding(currRoute, action.locationConfig)) {
+        // ADD CARD PLUGIN UI ENHANCEMENT
+        if (actionType === ExtensionPoint.CARD) {
           // intercept to apply translation
-          if (action.labelKey) {
+          if (uiArea === CardLocation.CLUSTER_DASHBOARD_CARD && action.labelKey) {
             actions[i].label = translationCtx.t(action.labelKey);
           }
 
-          // sets the enabled flag to true if omitted on the config
-          if (!Object.keys(action).includes('enabled')) {
-            actions[i].enabled = true;
-          }
-
-          // bulkable flag
-          actions[i].bulkable = actions[i].multiple || actions[i].bulkable;
-
-          // populate action identifier to prevent errors
-          if (!actions[i].action) {
-            actions[i].action = `custom-table-action-${ randomStr(10).toLowerCase() }`;
+        // ADD ACTION PLUGIN UI ENHANCEMENT
+        } else if (actionType === ExtensionPoint.ACTION) {
+          // TABLE ACTION
+          if (uiArea === ActionLocation.TABLE) {
+            // intercept to apply translation
+            if (action.labelKey) {
+              actions[i].label = translationCtx.t(action.labelKey);
+            }
+
+            // sets the enabled flag to true if omitted on the config
+            if (!Object.keys(action).includes('enabled')) {
+              actions[i].enabled = true;
+            }
+
+            // bulkable flag
+            actions[i].bulkable = actions[i].multiple || actions[i].bulkable;
+
+            // populate action identifier to prevent errors
+            if (!actions[i].action) {
+              actions[i].action = `custom-table-action-${ randomStr(10).toLowerCase() }`;
+            }
           }
-        }
 
-        // extract simplified shortcut definition on plugin - HEADER ACTION
-        if (uiArea === ActionLocation.HEADER && action.shortcut) {
-          // if it's a string, then assume CTRL for windows and META for mac
-          if (typeof action.shortcut === 'string') {
-            actions[i].shortcutLabel = () => {
-              return isMac ? `(\u2318-${ action.shortcut.toUpperCase() })` : `(Ctrl-${ action.shortcut.toUpperCase() })`;
-            };
-            actions[i].shortcutKey = { windows: ['ctrl', action.shortcut], mac: ['meta', action.shortcut] };
-          // correct check for an Object type in JS... handle the object passed
-          } else if (typeof action.shortcut === 'object' && !Array.isArray(action.shortcut) && action.shortcut !== null) {
-            actions[i].shortcutKey = action.shortcut;
-            const keyboardCombo = isMac ? actions[i].shortcut.mac : actions[i].shortcut.windows ? actions[i].shortcut.windows : [];
-            let scLabel = '';
-
-            keyboardCombo.forEach((key, i) => {
-              if (i < keyboardCombo.length - 1) {
-                if (key === 'meta') {
-                  key = '\u2318';
+          // extract simplified shortcut definition on plugin - HEADER ACTION
+          if (uiArea === ActionLocation.HEADER && action.shortcut) {
+            // if it's a string, then assume CTRL for windows and META for mac
+            if (typeof action.shortcut === 'string') {
+              actions[i].shortcutLabel = () => {
+                return isMac ? `(\u2318-${ action.shortcut.toUpperCase() })` : `(Ctrl-${ action.shortcut.toUpperCase() })`;
+              };
+              actions[i].shortcutKey = { windows: ['ctrl', action.shortcut], mac: ['meta', action.shortcut] };
+            // correct check for an Object type in JS... handle the object passed
+            } else if (typeof action.shortcut === 'object' && !Array.isArray(action.shortcut) && action.shortcut !== null) {
+              actions[i].shortcutKey = action.shortcut;
+              const keyboardCombo = isMac ? actions[i].shortcut.mac : actions[i].shortcut.windows ? actions[i].shortcut.windows : [];
+              let scLabel = '';
+
+              keyboardCombo.forEach((key, i) => {
+                if (i < keyboardCombo.length - 1) {
+                  if (key === 'meta') {
+                    key = '\u2318';
+                  } else {
+                    key = ucFirst(key);
+                  }
+                  scLabel += `${ key }`;
+                  scLabel += '-';
                 } else {
-                  key = ucFirst(key);
+                  scLabel += `${ key.toUpperCase() }`;
                 }
-                scLabel += `${ key }`;
-                scLabel += '-';
-              } else {
-                scLabel += `${ key.toUpperCase() }`;
-              }
-            });
-
-            actions[i].shortcutLabel = () => {
-              return `(${ scLabel })`;
-            };
+              });
+
+              actions[i].shortcutLabel = () => {
+                return `(${ scLabel })`;
+              };
+            }
           }
         }
-      }
 
-      extensionEnhancements.push(actions[i]);
-    }
-  });
+        extensionEnhancements.push(actions[i]);
+      }
+    });
+  }
 
   return extensionEnhancements;
 }

package/core/plugin-routes.ts

@@ -89,6 +89,29 @@ export class PluginRoutes {
     // Despite what the docs say, routes are not replaced, so we use a workaround
     // Remove all routes that are being replaced
     routes.forEach((r: RouteInfo) => {
+      // Patch colliding legacy routes that start /:product
+      if (r.route.path?.startsWith('/:product')) {
+        // Legacy pattern used by extensions - routes may collide, so modify them not to
+        let productName;
+
+        // If the route has a name (which is always the case for the extensions we have written), use it to get the product name
+        if (r.route.name) {
+          const nameParts = r.route.name.split('-');
+
+          // First part of the route name is the product name
+          productName = nameParts[0];
+        }
+
+        // Use the plugin name as the product, if the route does not have a name
+        productName = productName || plugin.name;
+
+        // Replace the path - removing :product and using the actual product name instead - this avoids route collisions
+        r.route.path = `/${ productName }${ r.route.path.substr(9) }`;
+        r.route.meta = r.route.meta || {};
+
+        r.route.meta.product = r.route.meta.product || productName;
+      }
+
       // See if the route exists
       let existing: any;
 

package/creators/app/app.package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {},
   "resolutions": {
-    "**/webpack": "4"
+    "**/webpack": "4",
+    "@types/node": "^16"
   }  
 }

package/creators/app/files/.eslintrc.js

@@ -30,7 +30,7 @@ module.exports = {
     'unicorn/no-new-buffer':    'off',
     'vue/html-self-closing':    'off',
     'vue/no-unused-components': 'warn',
-    'vue/no-v-html':            'off',
+    'vue/no-v-html':            'error',
     'wrap-iife':                'off',
 
     'array-bracket-spacing':             'warn',

package/creators/app/files/babel.config.js

@@ -1,18 +1 @@
-module.exports = {
-  env: {
-    test: {
-      plugins: [
-        [
-          'module-resolver',
-          {
-            root:  ['.'],
-            alias: {
-              '@': '.',
-              '~': '.',
-            },
-          },
-        ],
-      ],
-    },
-  },
-};
+module.exports = require('@rancher/shell/babel.config.js');

package/creators/app/files/vue.config.js

@@ -0,0 +1,7 @@
+const config = require('@rancher/shell/vue.config');
+
+module.exports = config(__dirname, {
+  excludes: [],
+  // excludes: ['fleet', 'example']
+  // autoLoad: ['fleet', 'example']
+});

package/creators/app/init

@@ -4,14 +4,14 @@ const path = require('path');
 const fs = require('fs-extra');
 
 const targets = {
-  dev:   './node_modules/.bin/nuxt dev',
-  nuxt:  './node_modules/.bin/nuxt',
-  build: './node_modules/.bin/nuxt build'
+  dev:   'NODE_ENV=dev ./node_modules/.bin/vue-cli-service serve',
+  build: './node_modules/.bin/vue-cli-service build',
+  clean: './node_modules/@rancher/shell/scripts/clean'
 };
 
 const files = [
   'tsconfig.json',
-  'nuxt.config.js',
+  'vue.config.js',
   '.eslintignore',
   '.eslintrc.js',
   'babel.config.js',
@@ -24,7 +24,7 @@ console.log('Creating Skeleton Application');
 const args = process.argv;
 let appFolder = path.resolve('.');
 
-if (args.length == 3) {
+if (args.length === 3) {
   const name = args[2];
   const folder = path.resolve('.');
 

package/creators/pkg/files/.github/workflows/build-extension.yml

@@ -0,0 +1,111 @@
+name: Build and Release Extension
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+env:
+  ACTIONS_RUNNER_DEBUG: false
+  CI_COMMIT_MESSAGE: CI Build Artifacts
+
+defaults:
+  run:
+    shell: bash
+    working-directory: ./
+
+jobs:
+  build:
+    name: Build extension artifact
+    runs-on: ubuntu-latest
+    permissions: write-all
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Configure Git
+        run: |
+          git config user.name "$GITHUB_ACTOR"
+          git config user.email "$GITHUB_ACTOR@users.noreply.github.com"
+
+      - name: Setup Helm
+        uses: azure/setup-helm@v3
+        with:
+          version: v3.8.0
+
+      - name: Setup yq
+        uses: chrisdickinson/setup-yq@v1.0.1
+        with:
+          yq-version: v4.28.2
+
+      - name: Setup Nodejs and npm
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Setup yarn
+        run: npm install -g yarn
+
+      - name: Setup Nodejs with yarn caching
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Run build script
+        shell: bash
+        id: build_script
+        run: |
+          yarn publish-pkgs -s "${{ github.repository }}" -b main
+
+      - name: Upload charts artifact
+        if: github.ref == 'refs/heads/main' && github.event_name != 'pull_request'
+        uses: actions/upload-artifact@v3
+        with:
+          name: charts
+          path: tmp
+
+  release:
+    name: Release Build
+    if: github.ref == 'refs/heads/main' && github.event_name != 'pull_request'
+    needs: build
+    runs-on: ubuntu-latest
+    permissions: write-all
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: main
+
+      - name: Configure Git
+        run: |
+          git config user.name "$GITHUB_ACTOR"
+          git config user.email "$GITHUB_ACTOR@users.noreply.github.com"
+
+      - name: Download build artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: charts
+
+      - name: Commit build
+        run: |
+          git add ./{assets,charts,extensions,index.yaml}
+          git commit -a -m "${{ env.CI_COMMIT_MESSAGE }}"
+          git push
+
+      - name: Run chart-releaser
+        uses: helm/chart-releaser-action@v1.4.1
+        with:
+          charts_dir: ./charts
+        env:
+          CR_TOKEN: '${{ secrets.GITHUB_TOKEN }}'
+          CR_SKIP_EXISTING: true

package/creators/pkg/init

@@ -16,12 +16,13 @@ const files = [
 ];
 
 const topLevelScripts = {
-  'build-pkg':  './node_modules/@rancher/shell/scripts/build-pkg.sh',
-  'serve-pkgs': './node_modules/@rancher/shell/scripts/serve-pkgs',
+  'build-pkg':    './node_modules/@rancher/shell/scripts/build-pkg.sh',
+  'serve-pkgs':   './node_modules/@rancher/shell/scripts/serve-pkgs',
+  'publish-pkgs': './node_modules/@rancher/shell/scripts/extension/publish',
 };
 
 const typeFolders = [
-  'i18n',
+  'l10n',
   'models',
   'edit',
   'list',
@@ -42,9 +43,21 @@ const folder = path.resolve('.');
 const pkgFolder = path.join(folder, 'pkg', name);
 
 let addTypeFolders = false;
+let addWorkflowFolder = false;
 
 if (args.length > 3) {
-  addTypeFolders = args[3] === '-t';
+  for (let i = 3; i < args.length; i++) {
+    switch (args[i]) {
+    case '-t':
+      addTypeFolders = true;
+      break;
+    case '-w':
+      addWorkflowFolder = true;
+      break;
+    default:
+      break;
+    }
+  }
 }
 
 const isNodeModulesShell = !fs.existsSync(path.join(folder, 'shell'));
@@ -93,6 +106,24 @@ if (addTypeFolders) {
   });
 }
 
+// Add workflow folder if needed
+if (addWorkflowFolder) {
+  const workflowDir = path.join(folder, '.github/workflows');
+
+  if (!fs.existsSync(workflowDir)) {
+    fs.mkdirSync(workflowDir, { recursive: true });
+  }
+
+  const workflowFile = path.join(workflowDir, 'build-extension.yml');
+
+  if (!fs.existsSync(workflowFile)) {
+    const src = path.join(__dirname, 'files/.github/workflows', 'build-extension.yml');
+
+    console.log(`  Adding file 'build-extension.yml' to root workflows`);
+    fs.copySync(src, workflowFile);
+  }
+}
+
 // Copy base files
 files.forEach((file) => {
   const src = path.join(__dirname, 'files', file);

package/creators/update/init

@@ -38,7 +38,7 @@ Object.keys(latestPackage._pkgs).forEach((key) => {
   appPackage.dependencies[key] = latestPackage._pkgs[key];
 });
 
-// Add in the weback resolution
+// Add in the webpack resolution
 appPackage.resolutions = appPackage.resolutions || {};
 appPackage.resolutions['**/webpack'] = '4';
 

package/detail/constraints.gatekeeper.sh.constraint.vue

@@ -1,38 +1,48 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
 import SortableTable from '@shell/components/SortableTable';
+import Banner from '@components/Banner/Banner.vue';
 import { CONSTRAINT_VIOLATION_RESOURCE_LINK, CONSTRAINT_VIOLATION_MESSAGE, CONSTRAINT_VIOLATION_TYPE } from '@shell/config/table-headers';
 
 export default {
-  components: { SortableTable },
+  components: { Banner, SortableTable },
   mixins:     [CreateEditView],
-  data(ctx) {
+  data() {
     return {
       headers: [
         CONSTRAINT_VIOLATION_TYPE,
         CONSTRAINT_VIOLATION_RESOURCE_LINK,
         CONSTRAINT_VIOLATION_MESSAGE
       ],
-      violations: this.value.violations
-        .map((violation, i) => ({ ...violation, id: i }))
+      violations: this.value.violations.map((violation, i) => ({ ...violation, id: i }))
     };
   }
 };
 </script>
 <template>
   <div>
-    <div
-      v-if="value.spec.enforcementAction"
-      class="row mt-40"
+    <div
+      v-if="value.spec.enforcementAction"
+      class="row mt-20"
     >
       <div class="col span-12">
-        <h3>Enforcement Action</h3>
+        <h3>
+          {{ t('gatekeeperConstraint.enforcement.action') }}
+        </h3>
         {{ value.spec.enforcementAction }}
       </div>
     </div>
-    <div class="row mt-40">
+    <div class="row mt-20">
       <div class="col span-12">
-        <h3>{{ t('gatekeeperConstraint.violations.title') }}</h3>
+        <h3 class="mb-20">
+          {{ t('gatekeeperConstraint.violations.title', { total: value.totalViolations }) }}
+        </h3>
+        <Banner
+          v-if="value.totalViolations !== value.violations.length"
+          color="info"
+        >
+          {{ t('gatekeeperConstraint.violations.notAll', { shown: value.violations.length }) }}
+        </Banner>
         <SortableTable
           :headers="headers"
           :rows="violations"

package/detail/fleet.cattle.io.gitrepo.vue

@@ -8,7 +8,7 @@ import { FLEET } from '@shell/config/types';
 import { isHarvesterCluster } from '@shell/utils/cluster';
 import FleetBundles from '@shell/components/fleet/FleetBundles.vue';
 import { resourceCounts } from '@shell/components/ResourceSummary.vue';
-import { allHash } from '~shell/utils/promise';
+import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 
 export default {
   name: 'DetailGitRepo',
@@ -74,16 +74,23 @@ export default {
     },
   },
   async fetch() {
-    const { $store } = this;
-
-    const allDispatches = await allHash({
-      allBundles:    $store.dispatch('management/findAll', { type: FLEET.BUNDLE }),
-      allFleet:      $store.dispatch('management/findAll', { type: FLEET.CLUSTER }),
-      clusterGroups: $store.dispatch('management/findAll', { type: FLEET.CLUSTER_GROUP }),
-    });
-
-    this.allBundles = allDispatches.allBundles;
-    this.allFleet = allDispatches.allFleet;
+    const allDispatches = await checkSchemasForFindAllHash({
+      allBundles: {
+        inStoreType: 'management',
+        type:        FLEET.BUNDLE
+      },
+      allFleet: {
+        inStoreType: 'management',
+        type:        FLEET.CLUSTER
+      },
+      clusterGroups: {
+        inStoreType: 'management',
+        type:        FLEET.CLUSTER_GROUP
+      }
+    }, this.$store);
+
+    this.allBundles = allDispatches.allBundles || [];
+    this.allFleet = allDispatches.allFleet || [];
   },
 
 };
@@ -111,6 +118,7 @@ export default {
       :need-related="false"
     >
       <Tab
+        v-if="!!allBundles.length"
         label="Bundles"
         name="bundles"
         :weight="30"

package/detail/harvesterhci.io.management.cluster.vue

@@ -81,17 +81,17 @@ export default {
       class="p-10"
     >
       <h4
-        v-html="t('cluster.harvester.registration.step1', null, true)"
+        v-clean-html="t('cluster.harvester.registration.step1', null, true)"
       />
 
       <h4
+        v-clean-html="t('cluster.harvester.registration.step2', null, true)"
         class="mt-10"
-        v-html="t('cluster.harvester.registration.step2', null, true)"
       />
 
       <h4
+        v-clean-html="t('cluster.harvester.registration.step3', null, true)"
         class="mt-10"
-        v-html="t('cluster.harvester.registration.step3', null, true)"
       />
       <CopyCode class="m-10 p-10">
         {{ registrationURL }}