@patternfly/quickstarts 2.2.1 → 2.2.4

package/src/styles/legacy-bootstrap/_variables.scss

@@ -0,0 +1,48 @@
+// PF4 overrides
+$font-size-base: 14px;
+$font-size-h1: var(--pf-global--FontSize--2xl);
+$font-size-h2: 20px; // must be literal value because of calculation in patternfly/dist/sass/patternfly/_list-view.scss
+$font-size-h3: var(--pf-global--FontSize--lg);
+$font-size-h4: var(--pf-global--FontSize--md);
+$font-size-h5: var(--pf-global--FontSize--md);
+$font-size-h6: var(--pf-global--FontSize--md);
+$grid-gutter-width: 30px;
+$headings-font-family: var(--pf-global--FontFamily--heading--sans-serif);
+$headings-font-weight: var(--pf-global--FontWeight--normal);
+
+// PF3 variables
+$color-pf-black:                 #030303 !default;
+$color-pf-black-600:             #72767b !default;
+$color-pf-white:                 #fff !default;
+$color-pf-black-150:             #f5f5f5 !default;
+$color-pf-blue-600:              #004368 !default;
+$color-pf-blue-50:               #def3ff !default;
+$color-pf-black-100:             #fafafa !default;
+
+// PF3 bootstrap overrides
+$line-height-base:                                                  1.66666667 !default; // 20/12
+$line-height-computed:                                              floor(($font-size-base * $line-height-base)) !default;
+$gray-light:                                                        lighten($color-pf-black, 60%) !default;   // #999
+$gray-lighter:                                                      lighten($color-pf-black, 93.5%) !default; // #eee
+$gray-dark:                                                         lighten($color-pf-black, 20%) !default;   // #333
+$font-family-monospace:                                             Menlo, Monaco, Consolas, monospace !default;
+$code-color:                                                        $color-pf-blue-600 !default;
+$code-bg:                                                           $color-pf-blue-50 !default;
+$pre-bg:                                                            $color-pf-black-100 !default;
+$border-radius-base:                                                1px !default;
+$table-cell-padding:                                                10px !default;
+
+// bootstrap variables
+$screen-sm:                  768px !default;
+$screen-sm-min:              $screen-sm !default;
+$grid-float-breakpoint:     $screen-sm-min !default;
+$screen-md:                  992px !default;
+$headings-line-height:    1.1 !default;
+$headings-color:          inherit !default;
+$gray-base:              #000 !default;
+$blockquote-font-size:        ($font-size-base * 1.25) !default;
+$blockquote-border-color:     $gray-lighter !default;
+$pre-color:                   $gray-dark !default;
+$pre-border-color:            #ccc !default;
+$table-bg:                      transparent !default;
+$text-muted:                  $gray-light !default;

package/src/styles/legacy-bootstrap.scss

@@ -0,0 +1,5 @@
+.pfext-markdown-view {
+  @import './legacy-bootstrap/type';
+  @import './legacy-bootstrap/code';
+  @import './legacy-bootstrap/tables';
+}

package/src/styles/patternfly-global-entry.ts

@@ -0,0 +1 @@
+import './patternfly-global.scss';

package/src/styles/patternfly-global.scss

@@ -0,0 +1,28 @@
+// pulls in the patternfly drawer styles, in case the consumer does not have them
+// which can happen when they're not using PatternFly, or a different (older) version
+// some global styles that quickstarts uses (Drawer, Popover, Modal, Backdrop, Bullseye)
+
+// TODO: Investigate if we can remove and/or nest these within patternfly-nested.css
+// what do we really need to expose globally?
+// here are the classes that exist outside the scope of .pfext-quick-start__base:
+// class="pf-c-popover pfext-quick-start__base pf-m-right"
+// class="pf-c-modal-box pfext-modal pfext-quick-start-drawer__modal pfext-quick-start__base pf-m-sm"
+// class="pf-c-backdrop__open"
+// class="pf-c-backdrop"
+// class="pf-l-bullseye"
+// class="pf-c-tooltip pf-m-top pfext-quick-start__base"
+
+@import '@patternfly/patternfly/sass-utilities/all';
+// gets added globally to :root
+@import '@patternfly/patternfly/base/variables';
+
+@import '@patternfly/patternfly/components/Drawer/drawer.scss';
+@import '@patternfly/patternfly/components/Popover/popover.scss';
+
+// for the 'Leave quick start?` modal
+@import '@patternfly/patternfly/components/ModalBox/modal-box.scss';
+@import '@patternfly/patternfly/components/Backdrop/backdrop.scss';
+@import '@patternfly/patternfly/layouts/Bullseye/bullseye.scss';
+
+// for the markdown extension that lets users copy text to clipboard
+@import '@patternfly/patternfly/components/Tooltip/tooltip.scss';

package/src/styles/patternfly-nested-entry.ts

@@ -0,0 +1 @@
+import './patternfly-nested.scss';

package/src/styles/patternfly-nested.scss

@@ -0,0 +1,18 @@
+// pulls in the patternfly styles, in case the consumer does not have them
+// which can happen when they're not using PatternFly, or a different (older) version
+// that could be incompatible with the version of PatternFly that we're using
+
+@import '@patternfly/patternfly/sass-utilities/all';
+
+.pfext-quick-start__base {
+    $pf-global--enable-reset: false;
+    @import '@patternfly/patternfly/base/common';
+    @import '@patternfly/patternfly/utilities/Accessibility/accessibility.scss';
+
+    // it's okay that we include everything since we'll purge the unused styles
+    @import '@patternfly/patternfly/components/all';
+    @import '@patternfly/patternfly/layouts/all';
+
+    // some apps globally set text-align: center
+    text-align: left;
+}

package/src/styles/quickstarts-standalone-entry.ts

@@ -0,0 +1 @@
+import './quickstarts-standalone.scss';

package/src/styles/quickstarts-standalone.scss

@@ -0,0 +1,7 @@
+.pfext-quick-start__base {
+    @import './style.scss';
+    @import '../*.scss';
+    @import '../catalog/**/*.scss';
+    @import '../controller/**/*.scss';
+    @import './vendor.scss';
+}

package/src/styles/style.scss

@@ -0,0 +1,12 @@
+@import '@patternfly/patternfly/sass-utilities/all';
+@import './legacy-bootstrap/variables';
+
+@import './base';
+@import './dark-custom-override';
+
+// React Components
+@import '../ConsoleInternal/**/*.scss';
+@import '../ConsoleShared/**/*.scss';
+
+// legacy bootstrap typography styles for markdown content
+@import './legacy-bootstrap.scss';

package/src/styles/vendor-entry.ts

@@ -0,0 +1 @@
+import './vendor.scss';

package/src/styles/vendor.scss

@@ -0,0 +1,7 @@
+// be careful about adding additional stylesheets here, they are bundled into the quickstarts.css
+
+@import '@patternfly/patternfly/sass-utilities/all';
+
+@import '@patternfly/react-catalog-view-extension/dist/sass/react-catalog-view-extension.scss';
+@import '@patternfly/patternfly/components/ClipboardCopy/clipboard-copy.scss';
+@import '@patternfly/patternfly/components/CodeBlock/code-block.scss';

package/src/utils/PluralResolver.ts

@@ -0,0 +1,356 @@
+/* eslint-disable */
+// @ts-nocheck
+// https://github.com/i18next/i18next/blob/master/src/PluralResolver.js
+
+const sets = [
+  {
+    lngs: [
+      'ach',
+      'ak',
+      'am',
+      'arn',
+      'br',
+      'fil',
+      'gun',
+      'ln',
+      'mfe',
+      'mg',
+      'mi',
+      'oc',
+      'pt',
+      'pt-BR',
+      'tg',
+      'tl',
+      'ti',
+      'tr',
+      'uz',
+      'wa',
+    ],
+    nr: [1, 2],
+    fc: 1,
+  },
+
+  {
+    lngs: [
+      'af',
+      'an',
+      'ast',
+      'az',
+      'bg',
+      'bn',
+      'ca',
+      'da',
+      'de',
+      'dev',
+      'el',
+      'en',
+      'eo',
+      'es',
+      'et',
+      'eu',
+      'fi',
+      'fo',
+      'fur',
+      'fy',
+      'gl',
+      'gu',
+      'ha',
+      'hi',
+      'hu',
+      'hy',
+      'ia',
+      'it',
+      'kk',
+      'kn',
+      'ku',
+      'lb',
+      'mai',
+      'ml',
+      'mn',
+      'mr',
+      'nah',
+      'nap',
+      'nb',
+      'ne',
+      'nl',
+      'nn',
+      'no',
+      'nso',
+      'pa',
+      'pap',
+      'pms',
+      'ps',
+      'pt-PT',
+      'rm',
+      'sco',
+      'se',
+      'si',
+      'so',
+      'son',
+      'sq',
+      'sv',
+      'sw',
+      'ta',
+      'te',
+      'tk',
+      'ur',
+      'yo',
+    ],
+    nr: [1, 2],
+    fc: 2,
+  },
+
+  {
+    lngs: [
+      'ay',
+      'bo',
+      'cgg',
+      'fa',
+      'ht',
+      'id',
+      'ja',
+      'jbo',
+      'ka',
+      'km',
+      'ko',
+      'ky',
+      'lo',
+      'ms',
+      'sah',
+      'su',
+      'th',
+      'tt',
+      'ug',
+      'vi',
+      'wo',
+      'zh',
+    ],
+    nr: [1],
+    fc: 3,
+  },
+
+  { lngs: ['be', 'bs', 'cnr', 'dz', 'hr', 'ru', 'sr', 'uk'], nr: [1, 2, 5], fc: 4 },
+
+  { lngs: ['ar'], nr: [0, 1, 2, 3, 11, 100], fc: 5 },
+  { lngs: ['cs', 'sk'], nr: [1, 2, 5], fc: 6 },
+  { lngs: ['csb', 'pl'], nr: [1, 2, 5], fc: 7 },
+  { lngs: ['cy'], nr: [1, 2, 3, 8], fc: 8 },
+  { lngs: ['fr'], nr: [1, 2], fc: 9 },
+  { lngs: ['ga'], nr: [1, 2, 3, 7, 11], fc: 10 },
+  { lngs: ['gd'], nr: [1, 2, 3, 20], fc: 11 },
+  { lngs: ['is'], nr: [1, 2], fc: 12 },
+  { lngs: ['jv'], nr: [0, 1], fc: 13 },
+  { lngs: ['kw'], nr: [1, 2, 3, 4], fc: 14 },
+  { lngs: ['lt'], nr: [1, 2, 10], fc: 15 },
+  { lngs: ['lv'], nr: [1, 2, 0], fc: 16 },
+  { lngs: ['mk'], nr: [1, 2], fc: 17 },
+  { lngs: ['mnk'], nr: [0, 1, 2], fc: 18 },
+  { lngs: ['mt'], nr: [1, 2, 11, 20], fc: 19 },
+  { lngs: ['or'], nr: [2, 1], fc: 2 },
+  { lngs: ['ro'], nr: [1, 2, 20], fc: 20 },
+  { lngs: ['sl'], nr: [5, 1, 2, 3], fc: 21 },
+  { lngs: ['he', 'iw'], nr: [1, 2, 20, 21], fc: 22 },
+];
+
+const _rulesPluralsTypes = {
+  1: function(n) {
+    return Number(n > 1);
+  },
+  2: function(n) {
+    return Number(n != 1);
+  },
+  3: function(n) {
+    return 0;
+  },
+  4: function(n) {
+    return Number(
+      n % 10 == 1 && n % 100 != 11
+        ? 0
+        : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20)
+        ? 1
+        : 2,
+    );
+  },
+  5: function(n) {
+    return Number(
+      n == 0
+        ? 0
+        : n == 1
+        ? 1
+        : n == 2
+        ? 2
+        : n % 100 >= 3 && n % 100 <= 10
+        ? 3
+        : n % 100 >= 11
+        ? 4
+        : 5,
+    );
+  },
+  6: function(n) {
+    return Number(n == 1 ? 0 : n >= 2 && n <= 4 ? 1 : 2);
+  },
+  7: function(n) {
+    return Number(
+      n == 1 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2,
+    );
+  },
+  8: function(n) {
+    return Number(n == 1 ? 0 : n == 2 ? 1 : n != 8 && n != 11 ? 2 : 3);
+  },
+  9: function(n) {
+    return Number(n >= 2);
+  },
+  10: function(n) {
+    return Number(n == 1 ? 0 : n == 2 ? 1 : n < 7 ? 2 : n < 11 ? 3 : 4);
+  },
+  11: function(n) {
+    return Number(n == 1 || n == 11 ? 0 : n == 2 || n == 12 ? 1 : n > 2 && n < 20 ? 2 : 3);
+  },
+  12: function(n) {
+    return Number(n % 10 != 1 || n % 100 == 11);
+  },
+  13: function(n) {
+    return Number(n !== 0);
+  },
+  14: function(n) {
+    return Number(n == 1 ? 0 : n == 2 ? 1 : n == 3 ? 2 : 3);
+  },
+  15: function(n) {
+    return Number(
+      n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2,
+    );
+  },
+  16: function(n) {
+    return Number(n % 10 == 1 && n % 100 != 11 ? 0 : n !== 0 ? 1 : 2);
+  },
+  17: function(n) {
+    return Number(n == 1 || (n % 10 == 1 && n % 100 != 11) ? 0 : 1);
+  },
+  18: function(n) {
+    return Number(n == 0 ? 0 : n == 1 ? 1 : 2);
+  },
+  19: function(n) {
+    return Number(
+      n == 1
+        ? 0
+        : n == 0 || (n % 100 > 1 && n % 100 < 11)
+        ? 1
+        : n % 100 > 10 && n % 100 < 20
+        ? 2
+        : 3,
+    );
+  },
+  20: function(n) {
+    return Number(n == 1 ? 0 : n == 0 || (n % 100 > 0 && n % 100 < 20) ? 1 : 2);
+  },
+  21: function(n) {
+    return Number(n % 100 == 1 ? 1 : n % 100 == 2 ? 2 : n % 100 == 3 || n % 100 == 4 ? 3 : 0);
+  },
+  22: function(n) {
+    return Number(n == 1 ? 0 : n == 2 ? 1 : (n < 0 || n > 10) && n % 10 == 0 ? 2 : 3);
+  },
+};
+
+function createRules() {
+  const rules = {};
+  sets.forEach((set) => {
+    set.lngs.forEach((l) => {
+      rules[l] = {
+        numbers: set.nr,
+        plurals: _rulesPluralsTypes[set.fc],
+      };
+    });
+  });
+  return rules;
+}
+
+class PluralResolver {
+  constructor(options = {}) {
+    this.options = options;
+
+    this.rules = createRules();
+  }
+
+  addRule(lng, obj) {
+    this.rules[lng] = obj;
+  }
+
+  getRule(code) {
+    return this.rules[code];
+  }
+
+  needsPlural(code) {
+    const rule = this.getRule(code);
+
+    return rule && rule.numbers.length > 1;
+  }
+
+  getPluralFormsOfKey(code, key) {
+    return this.getSuffixes(code).map((suffix) => key + suffix);
+  }
+
+  getSuffixes(code) {
+    const rule = this.getRule(code);
+
+    if (!rule) {
+      return [];
+    }
+
+    return rule.numbers.map((number) => this.getSuffix(code, number));
+  }
+
+  getSuffix(code, count) {
+    const rule = this.getRule(code);
+
+    if (rule) {
+      // if (rule.numbers.length === 1) return ''; // only singular
+
+      const idx = rule.noAbs ? rule.plurals(count) : rule.plurals(Math.abs(count));
+      let suffix = rule.numbers[idx];
+
+      // special treatment for lngs only having singular and plural
+      if (this.options.simplifyPluralSuffix && rule.numbers.length === 2 && rule.numbers[0] === 1) {
+        if (suffix === 2) {
+          suffix = 'plural';
+        } else if (suffix === 1) {
+          suffix = '';
+        }
+      }
+
+      const returnSuffix = () =>
+        this.options.prepend && suffix.toString()
+          ? this.options.prepend + suffix.toString()
+          : suffix.toString();
+
+      // COMPATIBILITY JSON
+      // v1
+      if (this.options.compatibilityJSON === 'v1') {
+        if (suffix === 1) {
+          return '';
+        }
+        if (typeof suffix === 'number') {
+          return `_plural_${suffix.toString()}`;
+        }
+        return returnSuffix();
+      }
+      if (/* v2 */ this.options.compatibilityJSON === 'v2') {
+        return returnSuffix();
+      }
+      if (
+        /* v3 - gettext index */ this.options.simplifyPluralSuffix &&
+        rule.numbers.length === 2 &&
+        rule.numbers[0] === 1
+      ) {
+        return returnSuffix();
+      }
+      return this.options.prepend && idx.toString()
+        ? this.options.prepend + idx.toString()
+        : idx.toString();
+    }
+
+    //   this.logger.warn(`no plural rule found for: ${code}`);
+    return '';
+  }
+}
+
+export default PluralResolver;

package/src/utils/asciidoc-procedure-parser.ts

@@ -0,0 +1,132 @@
+/* eslint-disable */
+// Brought in from dev to publish this with QS module
+// Dev now imports from here
+
+import { QuickStart, QuickStartTask } from './quick-start-types';
+
+export const ProcQuickStartParser = (
+  quickStart: QuickStart & {
+    spec: {
+      tasks: undefined | QuickStartTask[] | string[];
+    };
+  },
+  environmentVariables?: { [name: string]: string },
+) => {
+  const replaceEnvironmentVariables = (s: string | undefined) =>
+    s?.replace(/\${(\w+)}/, (substring, name) => {
+      return environmentVariables ? ([name] ? environmentVariables[name] : substring) : substring;
+    });
+
+  quickStart.spec.tasks = quickStart.spec.tasks?.map((task: QuickStartTask | string, index) => {
+    let proc: string;
+    let answer: QuickStartTask;
+    if (typeof task === 'string') {
+      proc = task;
+      answer = {};
+    } else {
+      // @ts-ignore
+      proc = task.proc;
+      answer = task;
+      // @ts-ignore
+      delete task.proc;
+    }
+
+    let description = '',
+      procedure,
+      verification,
+      title,
+      summaryFailed,
+      success,
+      reviewFailed: string | undefined,
+      prerequisites;
+    if (proc) {
+      const taskDOM = document.createElement('div');
+      taskDOM.innerHTML = proc;
+
+      // remove the screencapture images
+      taskDOM.querySelectorAll('.imageblock.screencapture').forEach((node) => {
+        node.parentElement?.removeChild(node);
+      });
+
+      title = taskDOM
+        .querySelector('h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child')
+        ?.innerHTML.trim();
+      let sectionBody = taskDOM.querySelector('.sectionbody');
+      if (!sectionBody?.hasChildNodes()) {
+        // possibly in other templates, where we want to look for article
+        sectionBody = taskDOM.querySelector('article');
+      }
+      if (sectionBody) {
+        for (let i = 0; i < sectionBody.children.length || 0; i++) {
+          /**
+          child typically looks like:
+
+          <div class="paragraph|olist|ulist|admonitionblock">
+             <div class="title">Procedure|Prerequisites|Verification|Note|Warning</div>
+             <ol|ul class="arabic">
+               <li>
+               <li>...
+             </ol|ul>
+          </div>
+
+          And the below code extracts the <ol> or <ul>
+          Except for when there is no <div class="title|heading"/>, then the description is extracted
+          in the else if below
+          */
+          const child = sectionBody.children.item(i);
+          // find the title
+          const sectionTitle = child?.querySelector('.heading,.title');
+          // should this section be assigned to a specific section
+          const sectionTitleText = sectionTitle?.textContent?.trim();
+          const isKnownSection = ['Procedure', 'Verification', 'Prerequisites'].includes(
+            sectionTitle?.textContent?.trim(),
+          );
+          if (isKnownSection) {
+            switch (sectionTitleText) {
+              case 'Procedure':
+                procedure = child?.querySelector(':not(.heading):not(.title)')?.outerHTML.trim();
+                break;
+              case 'Verification':
+                verification = child?.querySelector(':not(.heading):not(.title)')?.outerHTML.trim();
+                break;
+              case 'Prerequisites':
+                prerequisites = child
+                  ?.querySelector(':not(.heading):not(.title)')
+                  ?.outerHTML.trim();
+                break;
+            }
+          } else if (!procedure) {
+            // Otherwise if it comes before a procedure it's part of the description
+            description = description + child?.outerHTML.trim();
+          }
+        }
+      }
+      success = taskDOM.querySelector('.qs-summary.success')?.innerHTML.trim();
+      reviewFailed = taskDOM.querySelector('.qs-review.failed')?.innerHTML.trim();
+      summaryFailed = taskDOM.querySelector('.qs-summary.failed')?.innerHTML.trim();
+    }
+
+    answer.title = replaceEnvironmentVariables(answer.title || title);
+    answer.description = replaceEnvironmentVariables(
+      answer.description || `${description} ${prerequisites || ''} ${procedure}`,
+    );
+    answer.review = answer.review || {};
+    answer.review.instructions = replaceEnvironmentVariables(
+      answer.review?.instructions || verification || 'Have you completed these steps?',
+    );
+    answer.review.failedTaskHelp = replaceEnvironmentVariables(
+      answer.review.failedTaskHelp ||
+      reviewFailed ||
+      'This task isn’t verified yet. Try the task again.',
+    );
+    answer.summary = answer.summary || {};
+    answer.summary.success = replaceEnvironmentVariables(
+      answer.summary.success || success || 'You have completed this task!',
+    );
+    answer.summary.failed = replaceEnvironmentVariables(
+      answer.summary.failed || summaryFailed || 'Try the steps again.',
+    );
+    return answer;
+  });
+  return quickStart;
+};

package/src/utils/const.ts

@@ -0,0 +1,10 @@
+import { QuickStartTaskStatus } from './quick-start-types';
+
+export const QUICKSTART_SEARCH_FILTER_KEY = 'keyword';
+export const QUICKSTART_STATUS_FILTER_KEY = 'status';
+export const QUICKSTART_ID_FILTER_KEY = 'quickstart';
+export const QUICKSTART_TASKS_INITIAL_STATES = [
+  QuickStartTaskStatus.INIT,
+  QuickStartTaskStatus.VISITED,
+];
+export const HELP_TOPIC_NAME_KEY = 'topic';