@rancher/shell 1.2.0 → 2.0.0

package/pages/support/index.vue

@@ -8,14 +8,15 @@ import { SETTING } from '@shell/config/settings';
 import { addParam } from '@shell/utils/url';
 import { isRancherPrime } from '@shell/config/version';
 import { hasCspAdapter } from 'mixins/brand';
+import TabTitle from '@shell/components/TabTitle';
 
 export default {
-  layout: 'home',
 
   components: {
     BannerGraphic,
     IndentedPanel,
-    CommunityLinks
+    CommunityLinks,
+    TabTitle
   },
 
   async fetch() {
@@ -59,6 +60,10 @@ export default {
       uiIssuesSetting: null,
       serverSetting:   null,
       settings:        null,
+      // i18n-uses support.promos.one.*
+      // i18n-uses support.promos.two.*
+      // i18n-uses support.promos.three.*
+      // i18n-uses support.promos.four.*
       promos:          [
         'support.promos.one',
         'support.promos.two',
@@ -82,13 +87,8 @@ export default {
     },
 
     serverUrl() {
-      if (process.client) {
-        // Client-side rendered: use the current window location
-        return window.location.origin;
-      }
-
-      // Server-side rendered
-      return this.serverSetting?.value || '';
+      // Client-side rendered: use the current window location
+      return window.location.origin;
     },
 
     supportConfigLink() {
@@ -124,7 +124,11 @@ export default {
       <div class="content mt-20">
         <div class="promo col main-panel">
           <div class="box mb-20 box-primary">
-            <h2>{{ t('support.suse.access.title') }}</h2>
+            <h2>
+              <TabTitle breadcrumb="vendor-only">
+                {{ t('support.suse.access.title') }}
+              </TabTitle>
+            </h2>
             <div
               v-if="!hasSupport"
               class="external support-links mt-20"

package/pkg/auto-import.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-const contextFolders = ['chart', 'cloud-credential', 'content', 'detail', 'edit', 'layouts', 'list', 'machine-config', 'models', 'promptRemove', 'l10n', 'windowComponents', 'dialog', 'formatters', 'login'];
+const contextFolders = ['chart', 'cloud-credential', 'content', 'detail', 'edit', 'list', 'machine-config', 'models', 'promptRemove', 'l10n', 'windowComponents', 'dialog', 'formatters', 'login'];
 const contextMap = contextFolders.reduce((map, obj) => {
   map[obj] = true;
 

package/plugins/axios.js

@@ -1,7 +1,5 @@
 import https from 'https';
 import { CSRF } from '@shell/config/cookies';
-import { parse as setCookieParser } from 'set-cookie-parser';
-import pkg from '../package.json';
 
 export default function({
   $axios, $cookies, isDev, req
@@ -15,42 +13,8 @@ export default function({
     if ( csrf ) {
       config.headers['x-api-csrf'] = csrf;
     }
-
-    if ( process.server ) {
-      config.headers.common['access-control-expose-headers'] = `set-cookie`;
-      config.headers.common['user-agent'] = `Dashboard (Mozilla) v${ pkg.version }`;
-
-      if ( req.headers.cookie ) {
-        config.headers.common['cookies'] = req.headers.cookie;
-      }
-
-      if ( config.url.startsWith('/') ) {
-        config.baseURL = `${ req.protocol || 'https' }://${ req.headers.host }`;
-      }
-    }
   });
 
-  if ( process.server ) {
-    $axios.onResponse((res) => {
-      const parsed = setCookieParser(res.headers['set-cookie'] || []);
-
-      for ( const opt of parsed ) {
-        const key = opt.name;
-        const value = opt.value;
-
-        delete opt.name;
-        delete opt.value;
-
-        opt.encode = (x) => x;
-        opt.sameSite = true;
-        opt.path = '/';
-        opt.secure = true;
-
-        $cookies.set(key, value, opt);
-      }
-    });
-  }
-
   if ( isDev ) {
     // https://github.com/nuxt-community/axios-module/blob/dev/lib/module.js#L78
     // forces localhost to http, for no obvious reason.

package/plugins/back-button.js

@@ -1,5 +1,3 @@
-if ( process.client ) {
-  window.addEventListener('popstate', () => {
-    window._popStateDetected = true;
-  });
-}
+window.addEventListener('popstate', () => {
+  window._popStateDetected = true;
+});

package/plugins/clean-html-directive.js

@@ -1,34 +1,9 @@
 import Vue from 'vue';
-import DOMPurify from 'dompurify';
+import cleanHtmlDirective from '@shell/directives/clean-html';
 
-const ALLOWED_TAGS = [
-  'code',
-  'li',
-  'a',
-  'p',
-  'b',
-  'br',
-  'ul',
-  'pre',
-  'span',
-  'div',
-  'i',
-  'em',
-  'strong',
-];
-
-export const purifyHTML = (value) => DOMPurify.sanitize(value, { ALLOWED_TAGS });
-
-export const cleanHtmlDirective = {
-  inserted(el, binding) {
-    el.innerHTML = purifyHTML(binding.value);
-  },
-  componentUpdated(el, binding) {
-    el.innerHTML = purifyHTML(binding.value);
-  },
-  unbind(el) {
-    el.innerHTML = '';
-  }
-};
+export default cleanHtmlDirective;
 
+/* eslint-disable-next-line no-console */
+console.warn(`Importing cleanHtmlDirective from plugins has been deprecated, use shell/directives/clean-html.js instead.  
+Make sure to invoke Vue.directive('clean-html', cleanHtmlDirective) to maintain compatibility.`);
 Vue.directive('clean-html', cleanHtmlDirective);

package/plugins/clean-html.js

@@ -0,0 +1,53 @@
+import DOMPurify from 'dompurify';
+import { uniq } from '@shell/utils/array';
+
+const ALLOWED_TAGS = [
+  'code',
+  'li',
+  'a',
+  'p',
+  'b',
+  'br',
+  'ul',
+  'pre',
+  'span',
+  'div',
+  'i',
+  'em',
+  'strong',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'table',
+  'thead',
+  'tr',
+  'th',
+  'tbody',
+  'td',
+  'blockquote'
+];
+
+// Allow 'A' tags to keep the target=_blank attribute if they have it
+DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
+  if (node.tagName === 'A' && data.attrName === 'target' && data.attrValue === '_blank') {
+    data.forceKeepAttr = true;
+  }
+});
+
+// Ensure if an 'A' tag has target=_blank that we add noopener, noreferrer and nofollow to the 'rel' attribute
+DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+  if (node.tagName === 'A' && node?.target === '_blank') {
+    const rel = ['noopener', 'noreferrer', 'nofollow'];
+    const existingRel = node.rel?.length ? node.rel.split(' ') : [];
+    const combined = uniq([...rel, ...existingRel]);
+
+    node.setAttribute('rel', combined.join(' '));
+  }
+});
+
+export const purifyHTML = (value, options = { ALLOWED_TAGS }) => {
+  return DOMPurify.sanitize(value, options);
+};

package/plugins/clean-tooltip-directive.js

@@ -1,33 +1,8 @@
 import Vue from 'vue';
-import { VTooltip } from 'v-tooltip';
-import { purifyHTML } from './clean-html-directive';
+import cleanTooltipDirective from '@shell/directives/clean-tooltip';
 
-function purifyContent(value) {
-  const type = typeof value;
-
-  if (type === 'string') {
-    return purifyHTML(value);
-  } else if (value && type === 'object' && typeof value.content === 'string') {
-    return { ...value, content: purifyHTML(value.content) };
-  } else {
-    return value;
-  }
-}
-
-function bind(el, { value, oldValue, modifiers }) {
-  const purifiedValue = purifyContent(value);
-
-  VTooltip.bind(
-    el,
-    {
-      value: purifiedValue, oldValue, modifiers
-    });
-}
-
-export const VCleanTooltip = {
-  ...VTooltip,
-  bind,
-  update: bind,
-};
-
-Vue.directive('clean-tooltip', VCleanTooltip);
+export default cleanTooltipDirective;
+/* eslint-disable-next-line no-console */
+console.warn(`Importing cleanTooltipDirective from plugins has been deprecated, use shell/directives/clean-tooltip.js instead.
+Make sure to invoke it using Vue.directive('clean-tooltip', cleanTooltipDirective ) to maintain compatibility.`);
+Vue.directive('clean-tooltip', cleanTooltipDirective);

package/plugins/codemirror-loader.js

@@ -1,5 +1,5 @@
 // Share codemirror with plugins
 
-if ( process.client && !window.__codeMirrorLoader ) {
+if ( !window.__codeMirrorLoader ) {
   window.__codeMirrorLoader = () => import(/* webpackChunkName: "codemirror" */ '@shell/plugins/codemirror');
 }

package/plugins/codemirror.js

@@ -3,18 +3,12 @@
  * so that it doesn't all get loaded put into vendor.js
  */
 
-import Vue from 'vue';
-import VueCodemirror from 'vue-codemirror';
 import CodeMirror from 'codemirror';
 
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/yaml/yaml.js';
 import 'codemirror/mode/javascript/javascript.js';
 
-// import 'codemirror/mode/dockerfile/dockerfile.js';
-// import 'codemirror/mode/shell/shell.js';
-// import 'codemirror/mode/markdown/markdown.js';
-
 import 'codemirror/theme/base16-light.css';
 import 'codemirror/theme/base16-dark.css';
 
@@ -35,9 +29,6 @@ import 'codemirror/addon/hint/anyword-hint.js';
 
 import { strPad } from '@shell/utils/string';
 
-Vue.use(VueCodemirror);
-export default VueCodemirror;
-
 function isLineComment(cm, lineNo) {
   return /\bcomment\b/.test(cm.getTokenTypeAt(CodeMirror.Pos(lineNo, 0)));
 }
@@ -125,6 +116,47 @@ CodeMirror.defineExtension('foldLinesMatching', function(regex) {
   });
 });
 
+function countSpaces(line) {
+  for (let i = 0; i < line.length; i++) {
+    if (line[i] !== ' ') {
+      return i;
+    }
+  }
+
+  return line.length;
+}
+
+CodeMirror.defineExtension('foldYaml', function(path) {
+  this.operation(() => {
+    let elements = [];
+
+    for (let i = this.firstLine(), e = this.lastLine(); i <= e; i++) {
+      const line = this.getLine(i);
+      const index = countSpaces(line);
+      const trimmed = line.trim();
+
+      if (trimmed.endsWith(':') || trimmed.endsWith(': >-')) {
+        const name = trimmed.split(':')[0].substr(0, trimmed.length - 1);
+
+        // Remove all elements of the same are greater index
+        elements = elements.filter((e) => e.index < index);
+
+        // Add on this one
+        elements.push({
+          index,
+          name
+        });
+
+        const currentPath = elements.map((e) => e.name).join('.');
+
+        if (currentPath === path) {
+          this.foldCode(CodeMirror.Pos(i, 0), null, 'fold');
+        }
+      }
+    }
+  });
+});
+
 CodeMirror.registerHelper('fold', 'yamlcomments', (cm, start) => {
   if ( !isLineComment(cm, start.line) ) {
     return;