@rancher/shell 0.3.8 → 0.3.9

package/plugins/codemirror.js

@@ -167,3 +167,161 @@ CodeMirror.registerHelper('fold', 'yamlcomments', (cm, start) => {
     };
   }
 });
+
+/**
+ * It display a dot for each space character in the text;
+ * used in combination with 'as-text-area' css properties in CodeMirror.vue to display line break markdowns
+ */
+CodeMirror.defineOption('showMarkdownLineBreaks', false, (codeMirror) => {
+  codeMirror.addOverlay({
+    name:  'show-markdown-line-breaks',
+    token: (stream) => {
+      if (stream.string[stream.pos].match(/\s/)) {
+        stream.next();
+
+        return stream.pos % 2 === 0 ? 'markdown-single-trailing-space-even' : 'markdown-single-trailing-space-odd';
+      }
+
+      stream.next();
+
+      return null;
+    }
+  });
+});
+
+/**
+ * It enables the text color selection in CodeMirror.vue
+ * references:
+ *   demo:   https://codemirror.net/5/demo/markselection.html#
+ *   add-on: https://codemirror.net/5/doc/manual.html#addon_mark-selection
+ *   source: https://codemirror.net/5/addon/selection/mark-selection.js
+ */
+CodeMirror.defineOption('styleSelectedText', false, (cm, val, old) => {
+  const prev = old && old !== CodeMirror.Init;
+
+  if (val && !prev) {
+    cm.state.markedSelection = [];
+    cm.state.markedSelectionStyle = typeof val === 'string' ? val : 'CodeMirror-selectedtext';
+    reset(cm);
+    cm.on('cursorActivity', onCursorActivity);
+    cm.on('change', onChange);
+  } else if (!val && prev) {
+    cm.off('cursorActivity', onCursorActivity);
+    cm.off('change', onChange);
+    clear(cm);
+    cm.state.markedSelection = cm.state.markedSelectionStyle = null;
+  }
+});
+
+function onCursorActivity(cm) {
+  if (cm.state.markedSelection) {
+    cm.operation(() => {
+      update(cm);
+    });
+  }
+}
+
+function onChange(cm) {
+  if (cm.state.markedSelection && cm.state.markedSelection.length) {
+    cm.operation(() => {
+      clear(cm);
+    });
+  }
+}
+
+const CHUNK_SIZE = 8;
+const Pos = CodeMirror.Pos;
+const cmp = CodeMirror.cmpPos;
+
+function coverRange(cm, from, to, addAt) {
+  if (cmp(from, to) === 0) {
+    return;
+  }
+  const array = cm.state.markedSelection;
+  const cls = cm.state.markedSelectionStyle;
+
+  for (let line = from.line;;) {
+    const start = line === from.line ? from : Pos(line, 0);
+    const endLine = line + CHUNK_SIZE; const atEnd = endLine >= to.line;
+    const end = atEnd ? to : Pos(endLine, 0);
+    const mark = cm.markText(start, end, { className: cls });
+
+    if (addAt === null || addAt === undefined) {
+      array.push(mark);
+    } else {
+      array.splice(addAt++, 0, mark);
+    }
+    if (atEnd) {
+      break;
+    }
+    line = endLine;
+  }
+}
+
+function clear(cm) {
+  const array = cm.state.markedSelection;
+
+  for (let i = 0; i < array.length; ++i) {
+    array[i].clear();
+  }
+  array.length = 0;
+}
+
+function reset(cm) {
+  clear(cm);
+  const ranges = cm.listSelections();
+
+  for (let i = 0; i < ranges.length; i++) {
+    coverRange(cm, ranges[i].from(), ranges[i].to());
+  }
+}
+
+function update(cm) {
+  if (!cm.somethingSelected()) {
+    return clear(cm);
+  }
+  if (cm.listSelections().length > 1) {
+    return reset(cm);
+  }
+
+  const from = cm.getCursor('start'); const to = cm.getCursor('end');
+
+  const array = cm.state.markedSelection;
+
+  if (!array.length) {
+    return coverRange(cm, from, to);
+  }
+
+  let coverStart = array[0].find(); let coverEnd = array[array.length - 1].find();
+
+  if (!coverStart || !coverEnd || to.line - from.line <= CHUNK_SIZE ||
+      cmp(from, coverEnd.to) >= 0 || cmp(to, coverStart.from) <= 0) {
+    return reset(cm);
+  }
+
+  while (cmp(from, coverStart.from) > 0) {
+    array.shift().clear();
+    coverStart = array[0].find();
+  }
+  if (cmp(from, coverStart.from) < 0) {
+    if (coverStart.to.line - from.line < CHUNK_SIZE) {
+      array.shift().clear();
+      coverRange(cm, from, coverStart.to, 0);
+    } else {
+      coverRange(cm, from, coverStart.from, 0);
+    }
+  }
+
+  while (cmp(to, coverEnd.to) < 0) {
+    array.pop().clear();
+    coverEnd = array[array.length - 1].find();
+  }
+  if (cmp(to, coverEnd.to) > 0) {
+    if (to.line - coverEnd.from.line < CHUNK_SIZE) {
+      array.pop().clear();
+      coverRange(cm, coverEnd.from, to);
+    } else {
+      coverRange(cm, coverEnd.to, to);
+    }
+  }
+}

package/public/index.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="shortcut icon" type="image/x-icon" href="/public/favicon.png">
+    <link rel="shortcut icon" type="image/x-icon" href="/favicon.png">
     <title>Rancher</title>
 </head>
 

package/types/shell/index.d.ts

@@ -2491,10 +2491,29 @@ export default _default;
 // @shell/utils/create-yaml
 
 declare module '@shell/utils/create-yaml' {
-export function createYaml(schemas: any, type: any, data: any, processAlwaysAdd?: boolean, depth?: number, path?: string, rootType?: any): string;
+export function createYamlWithOptions(schemas: any, type: any, data: any, options: any): string;
+export function createYaml(schemas: any, type: any, data: any, processAlwaysAdd?: boolean, depth?: number, path?: string, rootType?: any, dataOptions?: {}): string;
 export function typeRef(type: any, str: any): any;
 export function typeMunge(type: any): any;
 export function saferDump(obj: any): any;
+/**
+ * Handles newlines indicators in the multiline blocks.
+ *
+ * this is required since jsyaml.dump doesn't support chomping and scalar style at the moment.
+ * see: https://github.com/nodeca/js-yaml/issues/171
+ *
+ * @param {*} data the multiline block
+ * @param {*} options blocks indicators, see: https://yaml-multiline.info
+ *
+ * - scalarStyle:
+ *     one of '|', '>'
+ *     default '|'
+ * - chomping:
+ *     one of: null, '-', '+'
+ *     default: null
+ * @returns the result of jsyaml.dump with the addition of multiline indicators
+ */
+export function dumpBlock(data: any, options?: any): any;
 export const SIMPLE_TYPES: string[];
 export const NEVER_ADD: string[];
 export const ACTIVELY_REMOVE: string[];

package/utils/create-yaml.js

@@ -65,7 +65,26 @@ export const ACTIVELY_REMOVE = [
 
 const INDENT = 2;
 
-export function createYaml(schemas, type, data, processAlwaysAdd = true, depth = 0, path = '', rootType = null) {
+export function createYamlWithOptions(schemas, type, data, options) {
+  return createYaml(
+    schemas,
+    type,
+    data,
+    true, 0, '', null,
+    options
+  );
+}
+
+export function createYaml(
+  schemas,
+  type,
+  data,
+  processAlwaysAdd = true,
+  depth = 0,
+  path = '',
+  rootType = null,
+  dataOptions = {}
+) {
   const schema = findBy(schemas, 'id', type);
 
   if ( !rootType ) {
@@ -220,25 +239,25 @@ export function createYaml(schemas, type, data, processAlwaysAdd = true, depth =
       if (data[key]) {
         try {
           const cleaned = cleanUp(data);
-          const parsedData = jsyaml.dump(cleaned[key]);
+          const parsedData = dumpBlock(cleaned[key], dataOptions[key]);
 
-          out += `\n${ indent(parsedData.trim()) }`;
+          out += `\n${ indent(parsedData) }`;
         } catch (e) {
           console.error(`Error: Unable to parse map data for yaml of type: ${ type }`, e); // eslint-disable-line no-console
         }
       }
 
       if ( SIMPLE_TYPES.includes(mapOf) ) {
-        out += `\n#  key: ${ mapOf }`;
+        out += `#  key: ${ mapOf }`;
       } else {
         // If not a simple type ie some sort of object/array, recusively build out commented fields (note data = null here) per the type's (mapOf's) schema
-        const chunk = createYaml(schemas, mapOf, null, processAlwaysAdd, depth + 1, (path ? `${ path }.${ key }` : key), rootType);
+        const chunk = createYaml(schemas, mapOf, null, processAlwaysAdd, depth + 1, (path ? `${ path }.${ key }` : key), rootType, dataOptions);
         let indented = indent(chunk);
 
         // convert "#    foo" to "#foo"
         indented = indented.replace(/^(#)?\s\s\s\s/, '$1');
 
-        out += `\n${ indented }`;
+        out += `${ indented }`;
       }
 
       return out;
@@ -263,7 +282,7 @@ export function createYaml(schemas, type, data, processAlwaysAdd = true, depth =
       if ( SIMPLE_TYPES.includes(arrayOf) ) {
         out += `\n#  - ${ arrayOf }`;
       } else {
-        const chunk = createYaml(schemas, arrayOf, null, false, depth + 1, (path ? `${ path }.${ key }` : key), rootType);
+        const chunk = createYaml(schemas, arrayOf, null, false, depth + 1, (path ? `${ path }.${ key }` : key), rootType, dataOptions);
         let indented = indent(chunk, 2);
 
         // turn "#        foo" into "#  - foo"
@@ -318,7 +337,7 @@ export function createYaml(schemas, type, data, processAlwaysAdd = true, depth =
       let chunk;
 
       if (subDef?.resourceFields && !isEmpty(subDef?.resourceFields)) {
-        chunk = createYaml(schemas, type, data[key], processAlwaysAdd, depth + 1, (path ? `${ path }.${ key }` : key), rootType);
+        chunk = createYaml(schemas, type, data[key], processAlwaysAdd, depth + 1, (path ? `${ path }.${ key }` : key), rootType, dataOptions);
       } else if (data[key]) {
         // if there are no fields defined on the schema but there are in the data, just format data as yaml and add to output yaml
         try {
@@ -351,6 +370,43 @@ function serializeSimpleValue(data) {
   return jsyaml.dump(data).trim();
 }
 
+function getBlockDescriptor(value, key) {
+  const header = getBlockHeader(value, key);
+
+  return {
+    header,
+    indentation: getBlockIndentation(header),
+  };
+}
+
+/**
+ *
+ * @param {string} value the block of text to be parsed
+ * @param {*} blockKey the key of the block
+ * @returns the key + the block scalar indicators, see https://yaml-multiline.info - Block Scalars
+ */
+function getBlockHeader(value, blockKey) {
+  const card = `(${ blockKey })[\\:][\\s|\\t]+[\\|\\>][\\d]*[\\-\\+]?`;
+  const re = new RegExp(card, 'gi');
+
+  const found = value.match(re);
+
+  return found?.[0] || '';
+}
+
+/**
+ *
+ * @param {string} blockHeader the key + the block scalar indicators
+ * @returns the indentation indicator from the block header, see https://yaml-multiline.info - Indentation
+ */
+function getBlockIndentation(blockHeader) {
+  const blockScalars = blockHeader.substr(blockHeader.indexOf(':') + 1);
+
+  const indentation = blockScalars.match(/\d+/);
+
+  return indentation?.[0] || '';
+}
+
 export function typeRef(type, str) {
   const re = new RegExp(`^${ type }\\[(.*)\\]$`);
   const match = str.match(re);
@@ -381,3 +437,44 @@ export function saferDump(obj) {
 
   return out;
 }
+
+/**
+ * Handles newlines indicators in the multiline blocks.
+ *
+ * this is required since jsyaml.dump doesn't support chomping and scalar style at the moment.
+ * see: https://github.com/nodeca/js-yaml/issues/171
+ *
+ * @param {*} data the multiline block
+ * @param {*} options blocks indicators, see: https://yaml-multiline.info
+ *
+ * - scalarStyle:
+ *     one of '|', '>'
+ *     default '|'
+ * - chomping:
+ *     one of: null, '-', '+'
+ *     default: null
+ * @returns the result of jsyaml.dump with the addition of multiline indicators
+ */
+export function dumpBlock(data, options = {}) {
+  const parsed = jsyaml.dump(data);
+
+  let out = parsed;
+
+  const blockFields = Object.keys(data).filter(k => data[k].includes('\n'));
+
+  if (blockFields.length) {
+    for (const key of blockFields) {
+      const scalarStyle = options[key]?.scalarStyle ?? '|';
+      const chomping = options[key]?.chomping ?? '';
+
+      const desc = getBlockDescriptor(out, key);
+
+      /**
+       * Replace the original block indicators with the ones provided in the options param
+       */
+      out = out.replace(desc.header, `${ key }: ${ scalarStyle }${ chomping }${ desc.indentation }`);
+    }
+  }
+
+  return out;
+}

package/utils/settings.ts

@@ -22,6 +22,18 @@ export const fetchOrCreateSetting = async(store: Store<any>, id: string, val: st
   return setting;
 };
 
+/**
+  * Fetch a specific setting that might not exist
+  * We fetch all settings - reality is Rancher will have done this already, so there's no overhead in doing
+  * this - but if we fetch a specific setting that does not exist, we will get a 404, which we don't want
+  */
+export const fetchSetting = async(store: Store<any>, id: string) => {
+  const all = await store.dispatch('management/findAll', { type: MANAGEMENT.SETTING });
+  const setting = (all || []).find((setting: any) => setting.id === id);
+
+  return setting;
+};
+
 export const setSetting = async(store: Store<any>, id: string, val: string): Promise<any> => {
   const setting = await fetchOrCreateSetting(store, id, val, false);
 

package/vue.config.js

@@ -408,8 +408,8 @@ module.exports = function(dir, _appConfig) {
         }),
       }));
 
-      // The static assets need to be in the built public folder in order to get served (primarily the favicon for now)
-      config.plugins.push(new CopyWebpackPlugin([{ from: path.join(SHELL_ABS, 'static'), to: 'public' }]));
+      // The static assets need to be in the built assets directory in order to get served (primarily the favicon)
+      config.plugins.push(new CopyWebpackPlugin([{ from: path.join(SHELL_ABS, 'static'), to: '.' }]));
 
       config.resolve.extensions.push(...['.tsx', '.ts', '.js', '.vue', '.scss']);
       config.watchOptions = config.watchOptions || {};