@rancher/shell 0.4.0 → 0.5.1

package/scripts/test-plugins-build.sh

@@ -7,6 +7,9 @@ echo "Checking plugin build"
 SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
 BASE_DIR="$( cd $SCRIPT_DIR && cd ../.. & pwd)"
 SHELL_DIR=$BASE_DIR/shell/
+SHELL_VERSION="99.99.99"
+DEFAULT_YARN_REGISTRY="https://registry.npmjs.org"
+VERDACCIO_YARN_REGISTRY="http://localhost:4873"
 
 echo ${SCRIPT_DIR}
 
@@ -66,21 +69,24 @@ else
   rm -rf ~/.config/verdaccio/storage/@rancher/*
 fi
 
-export YARN_REGISTRY=http://localhost:4873
+export YARN_REGISTRY=$VERDACCIO_YARN_REGISTRY
 export NUXT_TELEMETRY_DISABLED=1
 
 # Remove test package from previous run, if present
-rm -rf ${BASE_DIR}/pkg/test-pkg
+if [ $TEST_PERSIST_BUILD != "true" ]; then
+  echo "Removing folder ${BASE_DIR}/pkg/test-pkg"
+  rm -rf ${BASE_DIR}/pkg/test-pkg
+fi
 
 # 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
+sed -i.bak -e "s/\"version\": \"[0-9]*.[0-9]*.[0-9]*\(-alpha\.[0-9]*\|-release[0-9]*.[0-9]*.[0-9]*\|-rc\.[0-9]*\)\{0,1\}\",/\"version\": \"${SHELL_VERSION}\",/g" ${SHELL_DIR}/package.json
 rm ${SHELL_DIR}/package.json.bak
 
 # Same as above for Rancher Components
 # We might have bumped the version number but its not published yet, so this will fail
-sed -i.bak -e "s/\"version\": \"[0-9]*.[0-9]*.[0-9]*\",/\"version\": \"7.7.7\",/g" ${BASE_DIR}/pkg/rancher-components/package.json
+sed -i.bak -e "s/\"version\": \"[0-9]*.[0-9]*.[0-9]*\(-alpha\.[0-9]*\|-release[0-9]*.[0-9]*.[0-9]*\|-rc\.[0-9]*\)\{0,1\}\",/\"version\": \"${SHELL_VERSION}\",/g" ${BASE_DIR}/pkg/rancher-components/package.json
 
 # Publish shell
 echo "Publishing shell packages to local registry"
@@ -108,6 +114,7 @@ if [ "${SKIP_STANDALONE}" == "false" ]; then
   yarn install
 
   echo "Building skeleton app"
+
   FORCE_COLOR=true yarn build | cat
 
   # Package creator
@@ -127,22 +134,91 @@ if [ "${SKIP_STANDALONE}" == "false" ]; then
   echo "Cleaning temporary dir"
   popd > /dev/null
 
-  rm -rf ${DIR}
+  if [ $TEST_PERSIST_BUILD != "true" ]; then
+    echo "Removing folder ${DIR}"
+    rm -rf ${DIR}
+  fi
 fi
 
 pushd $BASE_DIR
-pwd
-ls
 
 # Now try a plugin within the dashboard codebase
 echo "Validating in-tree package"
 
 yarn install
 
-rm -rf ./pkg/test-pkg
+if [ $TEST_PERSIST_BUILD != "true" ]; then
+  echo "Removing folder ./pkg/test-pkg"
+  rm -rf ./pkg/test-pkg
+fi
+
 yarn create @rancher/pkg test-pkg -t
 cp ${SHELL_DIR}/list/catalog.cattle.io.clusterrepo.vue ./pkg/test-pkg/list
 FORCE_COLOR=true yarn build-pkg test-pkg | cat
-rm -rf ./pkg/test-pkg
+if [ $TEST_PERSIST_BUILD != "true" ]; then
+  echo "Removing folder ./pkg/test-pkg"
+  rm -rf ./pkg/test-pkg
+fi
+
+# function to clone repos and install dependencies (including the newly published shell version)
+function clone_repo_test_extension_build() {
+  REPO_NAME=$1
+  PKG_NAME=$2
+
+  echo -e "\nSetting up $REPO_NAME repository locally\n"
+
+  # set registry to default (to install all of the other dependencies)
+  yarn config set registry ${DEFAULT_YARN_REGISTRY}
+
+  if [ $TEST_PERSIST_BUILD != "true" ]; then
+    echo "Removing folder ${BASE_DIR}/$REPO_NAME"
+    rm -rf ${BASE_DIR}/$REPO_NAME
+  fi
+
+  # cloning repo
+  git clone https://github.com/rancher/$REPO_NAME.git
+  pushd ${BASE_DIR}/$REPO_NAME
+
+  echo -e "\nInstalling dependencies for $REPO_NAME\n"
+  yarn install
+
+  # set registry to local verdaccio (to install new shell)
+  yarn config set registry ${VERDACCIO_YARN_REGISTRY}
+
+  # update package.json to use a specific version of shell
+  sed -i.bak -e "s/\"\@rancher\/shell\": \"[0-9]*.[0-9]*.[0-9]*\",/\"\@rancher\/shell\": \"${SHELL_VERSION}\",/g" package.json
+  rm package.json.bak
+
+  # we need to remove yarn.lock, otherwise it would install a version that we don't want
+  rm yarn.lock
+
+  echo -e "\nInstalling newly built shell version\n"
+
+  # installing new version of shell
+  yarn add @rancher/shell@${SHELL_VERSION}
+
+  # test build-pkg
+  FORCE_COLOR=true yarn build-pkg $PKG_NAME | cat
+
+  # kubewarden has some unit tests and they should be quick to run... Let's check them as well
+  if [ "${REPO_NAME}" == "kubewarden-ui" ]; then
+    yarn test:ci
+  fi
+
+  # return back to the base path
+  popd
+
+  # delete folder
+  if [ $TEST_PERSIST_BUILD != "true" ]; then
+    echo "Removing folder ${BASE_DIR}/$REPO_NAME"
+    rm -rf ${BASE_DIR}/$REPO_NAME
+  fi
+  yarn config set registry ${DEFAULT_YARN_REGISTRY}
+}
+
+# Here we just add the extension that we want to include as a check (all our official extensions should be included here)
+# Don't forget to add the unit tests exception to clone_repo_test_extension_build function if a new extension has those
+clone_repo_test_extension_build "kubewarden-ui" "kubewarden"
+clone_repo_test_extension_build "elemental-ui" "elemental"
 
 echo "All done"

package/server/har-file.js

@@ -0,0 +1,183 @@
+const fs = require('fs');
+const path = require('path');
+
+// When we receive a request to this URL we will reset the session to replay again from the HAR file
+// This allows the user to refresh the browser and replay the HAR file again
+const RESET_URL = '/api/v1/namespaces/cattle-ui-plugin-system/services/http:ui-plugin-operator:80/proxy/index.json';
+
+const EXCLUDES_QS = '?exclude=metadata.managedFields';
+
+/**
+ * Load the network requests/responses from the har file
+ * @param name name/path of the file
+ * @param port port that the local dev server is running on
+ * @returns har file data
+ */
+function loadFile(name, port, dashboard) {
+  const newBase = `https://127.0.0.1:${ port }`;
+  const data = {};
+
+  console.log(`Loading HAR file: ${ name }`); // eslint-disable-line no-console
+
+  const rawData = fs.readFileSync(name);
+  const har = JSON.parse(rawData);
+  let base = '';
+  let uri = '';
+
+  if (har?.log?.pages) {
+    const page = har.log.pages.find((page) => page.title.includes('/dashboard/'));
+
+    if (page) {
+      const parts = page.title.split('/dashboard');
+
+      base = parts[0];
+      uri = parts[1];
+    }
+  }
+
+  if (har?.log?.entries) {
+    console.log('Network requests:'); // eslint-disable-line no-console
+
+    har.log.entries.forEach((r) => {
+      const mimeType = r.response.content.mimeType;
+
+      // Only cache json responses
+      if (mimeType === 'application/json' || mimeType === 'text/plain') {
+        let url = r.request.url;
+
+        if (url.startsWith(base)) {
+          url = url.substr(base.length);
+        }
+
+        console.log(`    ${ r.request.method } ${ decodeURIComponent(url) }`); // eslint-disable-line no-console
+
+        data[url] = data[url] || {};
+        data[url][r.request.method] = data[url][r.request.method] || [];
+
+        const item = {
+          status:     r.response.status,
+          statusText: r.response.statusText,
+          headers:    r.response.headers,
+          content:    r.response.content
+        };
+
+        if (item.content.text) {
+          item.content.text = item.content.text.replaceAll(base, newBase);
+          data[url][r.request.method].push(item);
+        } else {
+          console.log('        Warning: Omitting this response as there is no content - UI may not work as expected'); // eslint-disable-line no-console
+        }
+      }
+    });
+  }
+
+  console.log('Page:'); // eslint-disable-line no-console
+  console.log(`    ${ newBase }${ dashboard }${ uri }`); // eslint-disable-line no-console
+  console.log(''); // eslint-disable-line no-console
+
+  return data;
+}
+
+function exportToFiles(data, folder) {
+  console.log(`Exporting request data to ${ folder }`); // eslint-disable-line no-console
+
+  Object.keys(data).forEach((r) => {
+    const out = path.join(folder, `.${ r }`);
+    const dir = path.dirname(out);
+
+    console.log(r); // eslint-disable-line no-console
+
+    Object.keys(data[r]).forEach((method) => {
+      const name = `${ path.basename(out) }.${ method.toLowerCase() }.json`;
+
+      fs.mkdirSync(dir, { recursive: true });
+
+      data[r][method].forEach((request) => {
+        const formatted = JSON.stringify(JSON.parse(request.content.text), null, 2);
+
+        fs.writeFileSync(path.join(dir, name), formatted);
+      });
+    });
+  });
+}
+
+function harProxy(responses, folder) {
+  let session = JSON.parse(JSON.stringify(responses));
+
+  return (req, res, next) => {
+    if (req.originalUrl === RESET_URL) {
+      session = JSON.parse(JSON.stringify(responses));
+      console.log('>>>>>>>> Reset session replay from har file'); // eslint-disable-line no-console
+    }
+
+    const url = decodeURIComponent(req.originalUrl);
+    let playback = session[req.originalUrl];
+
+    // If it did not match, try without the metadata excludes query string that was adding in 2.8.0
+    // This might allow HAR captures with Rancher < 2.8.0 to be replayed on >= 2.8.0
+    if (!playback && req.originalUrl.endsWith(EXCLUDES_QS)) {
+      playback = session[req.originalUrl.slice(0, -EXCLUDES_QS.length)];
+    }
+
+    if (playback && playback[req.method] && playback[req.method].length) {
+      const resp = playback[req.method][0];
+
+      if (playback[req.method].length > 1) {
+        playback[req.method].shift();
+      }
+
+      const body = resp.content?.text || '';
+
+      res.type(resp.content.mimeType);
+      res.status(resp.status);
+      res.send(Buffer.from(body));
+      res.end();
+
+      const char = !!resp.used ? '*' : ' ';
+
+      console.log(`${ req.method }${ char } ${ resp.status } ${ url }`); // eslint-disable-line no-console
+
+      resp.used = true;
+
+      return;
+    }
+
+    if (req.originalUrl.startsWith('/v1/') || req.originalUrl.startsWith('/v3/') || req.originalUrl.startsWith('/k8s/')) {
+      // If we have been configured with a folder, look for a file with the contents to use for the request
+      if (folder) {
+        // Remove query string
+        const name = req.originalUrl.split('?')[0];
+        const requestFile = path.join(folder, `.${ name }.${ req.method.toLowerCase() }.json`);
+
+        if (fs.existsSync(requestFile)) {
+          const data = fs.readFileSync(requestFile);
+
+          console.log(`${ req.method }f 200 ${ url }`); // eslint-disable-line no-console
+
+          res.type('application/json');
+          res.status(200);
+          res.send(data);
+
+          return res.end();
+        }
+      }
+
+      // Fallback to sending a 404 response
+      res.status(404);
+      res.send('Not Found');
+
+      console.log(`${ req.method }? 404 ${ url }`); // eslint-disable-line no-console
+
+      return res.end();
+    }
+
+    // Continue on to serve up other resources
+    return next();
+  };
+}
+
+module.exports = {
+  loadFile,
+  harProxy,
+  exportToFiles,
+};

package/store/catalog.js

@@ -354,7 +354,7 @@ export const actions = {
 
     // As per comment above, when there are no clusters this will be management. Store it such that it can be used for those cases
     commit('setInStore', inStore);
-    hash.cluster = hash.cluster.filter((repo) => !(repo?.metadata?.annotations?.[CATALOG_ANNOTATIONS.HIDDEN_REPO] === 'true'));
+    hash.cluster = hash.cluster?.filter((repo) => !(repo?.metadata?.annotations?.[CATALOG_ANNOTATIONS.HIDDEN_REPO] === 'true'));
 
     commit('setRepos', hash);
 

package/store/features.js

@@ -27,6 +27,7 @@ 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/i18n.js

@@ -308,6 +308,17 @@ export const actions = {
           p.push(dispatch('mergeLoad', { locale, module: fn }));
         });
 
+        // load all of the default locales from the plugins for fallback
+        if (locale !== DEFAULT_LOCALE) {
+          const defaultI18nExt = rootState.$plugin?.getDynamic('l10n', DEFAULT_LOCALE);
+
+          if (defaultI18nExt && defaultI18nExt.length) {
+            defaultI18nExt.forEach((fn) => {
+              p.push(dispatch('mergeLoad', { locale: DEFAULT_LOCALE, module: fn }));
+            });
+          }
+        }
+
         try {
           await Promise.all(p);
         } catch (e) {

package/store/index.js

@@ -713,10 +713,7 @@ export const actions = {
 
     const promises = {
       // Clusters guaranteed always available or your money back
-      clusters: dispatch('management/findAll', {
-        type: MANAGEMENT.CLUSTER,
-        opt:  { url: MANAGEMENT.CLUSTER }
-      }),
+      clusters: dispatch('management/findAll', { type: MANAGEMENT.CLUSTER }),
 
       // Features checks on its own if they are available
       features: dispatch('features/loadServer'),
@@ -887,6 +884,10 @@ export const actions = {
     // Try and wait until the schema exists before proceeding
     await dispatch('management/waitForSchema', { type: MANAGEMENT.CLUSTER });
 
+    // Similar to above, we're still waiting on loadManagement to fetch required resources
+    // If we don't have all mgmt clusters yet a request to fetch this cluster and then all clusters (in cleanNamespaces) is kicked off
+    await dispatch('management/waitForHaveAll', { type: MANAGEMENT.CLUSTER });
+
     // See if it really exists
     try {
       const cluster = await dispatch('management/find', {
@@ -1046,15 +1047,13 @@ export const actions = {
     if ( route.name === 'index' ) {
       router.replace('/auth/login');
     } else {
-      if (!process.server) {
-        const backTo = window.localStorage.getItem(BACK_TO);
+      const backTo = window.localStorage.getItem(BACK_TO);
 
-        const isLogin = route.name === 'auth-login' || route.path === '/login'; // Cover dashboard and case of log out from ember;
-        const isLogout = route.name === 'auth-logout';
+      const isLogin = route.name === 'auth-login' || route.path === '/login'; // Cover dashboard and case of log out from ember;
+      const isLogout = route.name === 'auth-logout';
 
-        if (!backTo && !isLogin && !isLogout) {
-          window.localStorage.setItem(BACK_TO, window.location.href);
-        }
+      if (!backTo && !isLogin && !isLogout) {
+        window.localStorage.setItem(BACK_TO, window.location.href);
       }
 
       const QUERY = (LOGGED_OUT in route.query) ? LOGGED_OUT : TIMED_OUT;

package/store/prefs.js

@@ -345,46 +345,44 @@ export const actions = {
     commit('cookiesLoaded');
   },
 
-  loadTheme({ state, dispatch }) {
-    if ( process.client ) {
-      const watchDark = window.matchMedia('(prefers-color-scheme: dark)');
-      const watchLight = window.matchMedia('(prefers-color-scheme: light)');
-      const watchNone = window.matchMedia('(prefers-color-scheme: no-preference)');
-
-      const interval = 30 * 60 * 1000;
-      const nextHalfHour = interval - Math.round(new Date().getTime()) % interval;
-
-      setTimeout(() => {
-        dispatch('loadTheme');
-      }, nextHalfHour);
-      // console.log('Update theme in', nextHalfHour, 'ms');
+  loadTheme({ dispatch }) {
+    const watchDark = window.matchMedia('(prefers-color-scheme: dark)');
+    const watchLight = window.matchMedia('(prefers-color-scheme: light)');
+    const watchNone = window.matchMedia('(prefers-color-scheme: no-preference)');
+
+    const interval = 30 * 60 * 1000;
+    const nextHalfHour = interval - Math.round(new Date().getTime()) % interval;
+
+    setTimeout(() => {
+      dispatch('loadTheme');
+    }, nextHalfHour);
+    // console.log('Update theme in', nextHalfHour, 'ms');
+
+    if ( watchDark.matches ) {
+      changed('dark');
+    } else if ( watchLight.matches ) {
+      changed('light');
+    } else {
+      changed(fromClock());
+    }
 
-      if ( watchDark.matches ) {
+    watchDark.addListener((e) => {
+      if ( e.matches ) {
         changed('dark');
-      } else if ( watchLight.matches ) {
-        changed('light');
-      } else {
-        changed(fromClock());
       }
+    });
 
-      watchDark.addListener((e) => {
-        if ( e.matches ) {
-          changed('dark');
-        }
-      });
-
-      watchLight.addListener((e) => {
-        if ( e.matches ) {
-          changed('light');
-        }
-      });
+    watchLight.addListener((e) => {
+      if ( e.matches ) {
+        changed('light');
+      }
+    });
 
-      watchNone.addListener((e) => {
-        if ( e.matches ) {
-          changed(fromClock());
-        }
-      });
-    }
+    watchNone.addListener((e) => {
+      if ( e.matches ) {
+        changed(fromClock());
+      }
+    });
 
     function changed(value) {
       // console.log('Prefers Theme:', value);

package/store/type-map.js

@@ -912,6 +912,10 @@ export const getters = {
             continue;
           }
 
+          if (item.ifFeature && !rootGetters['features/get'](item.ifFeature)) {
+            continue;
+          }
+
           if ( isBasic && !getters.groupForBasicType(product, id) ) {
             continue;
           } else if ( mode === FAVORITE && !getters.isFavorite(id) ) {
@@ -1844,15 +1848,12 @@ function _rowValueGetter(col) {
   // We will use JsonPath to look up this value, which is costly - so if we can detect this format
   // Use a more efficient function to get the value
   const value = col.field.startsWith('.') ? `$${ col.field }` : col.field;
+  const found = value.match(FIELD_REGEX);
 
-  if (process.client) {
-    const found = value.match(FIELD_REGEX);
+  if (found && found.length === 2) {
+    const fieldIndex = parseInt(found[1], 10);
 
-    if (found && found.length === 2) {
-      const fieldIndex = parseInt(found[1], 10);
-
-      return (row) => row.metadata?.fields?.[fieldIndex];
-    }
+    return (row) => row.metadata?.fields?.[fieldIndex];
   }
 
   return value;

package/tsconfig.json

@@ -1,16 +1,42 @@
 {
-  "extends": "./tsconfig.default.json",
+  "extends": "./tsconfig.paths.json",
   "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "lib": [
+      "ESNext",
+      "ESNext.AsyncIterable",
+      "DOM"
+    ],
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noEmit": false,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "rootDir": ".",
     "types": [
-      "@types/node",
-      "@types/jest",
-      "@nuxt/types",
-    ]
+      "node",
+      "jest",
+    ],
+    "typeRoots": [
+      "./node_modules/@types",
+      "../node_modules/@types"
+    ],
   },
   "exclude": [
-    "cypress",
-    "./cypress.config.ts",
-    "**/*.test.ts",
-    "**/*.spec.ts"
+    "node_modules",
+    ".nuxt",
+    "dist",
+    "dist-pkg",
+    "../dist",
+    "../dist-pkg",
+    "../creators",
+    "../scripts",
+    "../cypress",
+    "../cypress.config.ts",
+    "../docusaurus",
+    "../**/*.spec.ts"
   ]
 }

package/tsconfig.paths.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "~/*": [
+        "../*"
+      ],
+      "@/*": [
+        "../*"
+      ],
+      "@shell/*": [
+        "../shell/*"
+      ],
+      "@pkg/*": [
+        "../shell/pkg/*"
+      ]
+    },
+  },
+}