Merge branch 'main' into snyk-upgrade-fb803ffb9c5a0368b52977e5be2cf6a7

nicolethoen · web-flow · commit 1919e9a7b91e · 2025-12-02T21:31:59.000-05:00
diff --git a/.github/workflows/a11y.yml b/.github/workflows/a11y.yml
@@ -13,10 +13,11 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v2
-      - name: Use Node.js 18
+      - name: Use Node.js 20
         uses: actions/setup-node@v2
         with:
-          node-version: 18
+          node-version: 20
+      - run: corepack enable
       - name: Install
         run: yarn install
       - name: Build
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -15,14 +15,15 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
 
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
+      - run: corepack enable
       - run: yarn install
       - run: yarn build
       - run: yarn lint
diff --git a/.github/workflows/promote.yml b/.github/workflows/promote.yml
@@ -14,12 +14,13 @@ jobs:
       NPM_CONFIG_LEGACY_PEER_DEPS: true
     steps:
       - uses: actions/checkout@v2
-      - name: Build for promotion
-        run: yarn install --frozen-lockfile && yarn build
       - uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
+      - run: corepack enable
+      - name: Build for promotion
+        run: yarn install --immutable && yarn build
       - name: GitHub Tag Name example
         run: |
           echo "Tag name from GITHUB_REF_NAME: $GITHUB_REF_NAME"
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -14,7 +14,8 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 18
+          node-version: 20
+      - run: corepack enable
       - uses: actions/cache@v4
         id: yarn-cache
         name: Cache npm deps
@@ -24,7 +25,7 @@ jobs:
             **/node_modules
             ~/.cache/Cypress
           key: ${{ runner.os }}-yarn-16-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }}
-      - run: yarn install --frozen-lockfile
+      - run: yarn install --immutable
         if: steps.yarn-cache.outputs.cache-hit != 'true'
       - uses: actions/cache@v4
         id: dist
diff --git a/.gitignore b/.gitignore
@@ -9,5 +9,6 @@ storybook-static
 .env
 stats.html
 .history
+.yarn
 
 .cache
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/package.json b/package.json
@@ -64,7 +64,8 @@
     "victory": "37.3.2"
   },
   "resolutions": {
-    "chromedriver": "^104"
+    "chromedriver": "^104",
+    "express": "^4.22.1"
   },
   "jest": {
     "moduleFileExtensions": [
@@ -118,5 +119,5 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "packageManager": "yarn@4.10.3"
 }
diff --git a/packages/dev/package.json b/packages/dev/package.json
@@ -16,12 +16,12 @@
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-parser": "^9.3.0",
     "i18next-pseudo": "^2.2.0",
+    "lodash-es": "^4.17.21",
+    "marked": "^15.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^15.5.3",
-    "react-router-dom": "^6.11.2",
-    "marked": "^15.0.6",
-    "lodash-es": "^4.17.21"
+    "react-router-dom": "^6.11.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.79",
@@ -44,7 +44,7 @@
     "tsconfig-paths-webpack-plugin": "^3.3.0",
     "webpack": "^5.95.0",
     "webpack-cli": "^5.1.1",
-    "webpack-dev-server": "^5.2.1",
+    "webpack-dev-server": "^5.2.2",
     "yaml": "^1.10.2",
     "yaml-loader": "^0.6.0"
   }
diff --git a/packages/dev/src/common/Page.tsx b/packages/dev/src/common/Page.tsx
@@ -31,6 +31,7 @@ import { SettingsModal } from '../SettingsModal';
 const AppToolbar = () => {
   const [isModalOpen, setModalOpen] = React.useState(false);
   const [isDarkTheme, setDarkTheme] = React.useState(false);
+  const [isHighContrast, setHighContrast] = React.useState(false);
   const onModalClose = () => setModalOpen(!isModalOpen);
 
   const qsContext = React.useContext(QuickStartContext);
@@ -45,6 +46,15 @@ const AppToolbar = () => {
     }
   };
 
+  const handleHighContrastChange = (isChecked: boolean) => {
+    setHighContrast(isChecked);
+    if (isChecked) {
+      document.documentElement.classList.add('pf-v6-theme-high-contrast');
+    } else {
+      document.documentElement.classList.remove('pf-v6-theme-high-contrast');
+    }
+  };
+
   return (
     <Toolbar id="toolbar">
       <ToolbarContent>
@@ -58,6 +68,15 @@ const AppToolbar = () => {
               onChange={(_event, isChecked: boolean) => handleDarkThemeChange(isChecked)}
             />
           </ToolbarItem>
+          <ToolbarItem>
+            <Switch
+              id="high-contrast-theme-switch"
+              aria-label="Toggle high contrast"
+              label="High contrast theme"
+              isChecked={isHighContrast}
+              onChange={(_event, isChecked: boolean) => handleHighContrastChange(isChecked)}
+            />
+          </ToolbarItem>
           <ToolbarItem>
             <Button
               aria-label="Toggle quick start"
diff --git a/packages/module/package.json b/packages/module/package.json
@@ -46,23 +46,23 @@
   },
   "peerDependencies": {
     "@patternfly/react-core": "^6.0.0",
+    "marked": "^15.0.6",
     "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19",
-    "marked": "^15.0.6"
+    "react-dom": "^17 || ^18 || ^19"
   },
   "dependencies": {
     "dompurify": "^3.2.4",
     "history": "^5.0.0"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^6.0.6",
+    "@patternfly/documentation-framework": "^6.28.8",
     "@patternfly/patternfly": "^6.0.0",
+    "@patternfly/react-code-editor": "^6.0.0",
+    "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-icons": "^6.0.0",
     "@patternfly/react-styles": "^6.0.0",
-    "@patternfly/react-tokens": "^6.0.0",
     "@patternfly/react-table": "^6.0.0",
-    "@patternfly/react-code-editor": "^6.0.0",
-    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-tokens": "^6.0.0",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.1.0",
diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/design-guidelines.md b/packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/design-guidelines.md
@@ -17,9 +17,9 @@ sourceLink: https://github.com/patternfly/patternfly-quickstarts/blob/main/packa
 <img src="./img/qs-context.png" alt="A quick start in context of a UI" width="1680"/>
 
 Quick start screens contain a few different components:
-- [Catalog view](/#catalog-view) 
-- [Cards](/#cards) 
-- [Drawer:](/#drawer) Contains an introduction screen, tasks, and a “check your work” module.
+- [Catalog view](/extensions/catalog-view/catalog-item-header) 
+- [Cards](/components/cards) 
+- [Drawer:](/components/drawer) Contains an introduction screen, tasks, and a “check your work” module.
 
 ## Catalog view
 Multiple quick starts are often presented to users in a catalog view of multiple cards.
diff --git a/packages/module/patternfly-docs/patternfly-docs.config.js b/packages/module/patternfly-docs/patternfly-docs.config.js
@@ -4,4 +4,5 @@ module.exports = {
   topNavItems: [],
   port: 8006,
   hasThemeSwitcher: true,
+  hasHighContrastSwitcher: true,
 };
diff --git a/packages/vscode/package.json b/packages/vscode/package.json
@@ -56,16 +56,16 @@
     "ts-loader": "^9.4.2",
     "tslint": "^6.1.3",
     "vscode": "^1.1.37",
-    "webpack": "^5.83.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.1.1"
   },
   "dependencies": {
-    "@cloudmosaic/quickstarts": "^0.0.15",
-    "@patternfly/patternfly": "^6.0.0",
+    "@patternfly/patternfly": "^6.3.1",
+    "@patternfly/quickstarts": "^6.0.0-prerelease.0",
     "i18next-parser": "^9.3.0",
-    "js-base64": "^3.6.0",
+    "js-base64": "3.7.8",
     "js-yaml": "^4.0.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }
 }
diff --git a/packages/vscode/src/extension.ts b/packages/vscode/src/extension.ts
@@ -19,9 +19,14 @@ export function activate(context: vscode.ExtensionContext) {
   const disposable = vscode.commands.registerCommand(
     "extension.qsPreview",
     () => {
+      const activeEditor = vscode.window.activeTextEditor;
+      if (!activeEditor) {
+        vscode.window.showWarningMessage("Please open a file first to preview quick starts.");
+        return;
+      }
       view = new ViewLoader(
-        vscode.window.activeTextEditor?.document.getText() as string,
-        vscode.window.activeTextEditor?.document.fileName as string,
+        activeEditor.document.getText(),
+        activeEditor.document.fileName,
         context.extensionPath
       );
     }
diff --git a/packages/vscode/src/view/ViewLoader.ts b/packages/vscode/src/view/ViewLoader.ts
@@ -52,11 +52,18 @@ export default class ViewLoader {
   }
 
   private getWebviewContent(config: string, filePath: string): string {
+    if (!this._panel) {
+      return "";
+    }
     // Local path to main script run in the webview
     const reactAppPathOnDisk = vscode.Uri.file(
       path.join(this._extensionPath, "quickstartsPreview", "quickstartsPreview.js")
     );
+    // Use vscode-resource scheme for older VS Code API compatibility
     const reactAppUri = reactAppPathOnDisk.with({ scheme: "vscode-resource" });
+    // Escape the config and filePath for HTML to prevent XSS and syntax errors
+    const escapedConfig = config.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\n").replace(/\r/g, "\\r");
+    const escapedFilePath = filePath.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
     const html = `<!DOCTYPE html>
     <html lang="en">
     <head>
@@ -72,8 +79,8 @@ export default class ViewLoader {
 
         <script>
           window.acquireVsCodeApi = acquireVsCodeApi;
-          window.initialData = "${config}";
-          window.filePath = "${filePath}";
+          window.initialData = "${escapedConfig}";
+          window.filePath = "${escapedFilePath}";
         </script>
     </head>
     <body>
@@ -86,7 +93,7 @@ export default class ViewLoader {
   }
 
   private encodeContent(text: string, fileName: string): any {
-    if (fileName.endsWith(".yaml")) {
+    if (fileName && fileName.endsWith(".yaml")) {
       return Base64.encode(JSON.stringify(yamlLoad(text)));
     }
     return Base64.encode(text);
diff --git a/packages/vscode/src/view/app/index.tsx b/packages/vscode/src/view/app/index.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { QuickStartsPreview } from './quickstarts';
 
@@ -11,14 +12,27 @@ declare global {
   }
 }
 
-const vscode = window.acquireVsCodeApi();
-
-const root = createRoot(document.getElementById('root'));
-
-root.render(
-  <QuickStartsPreview
-    vscode={vscode}
-    initialData={window.initialData}
-    filePath={window.filePath}
-  />,
-);
+try {
+  const vscode = window.acquireVsCodeApi();
+  const rootElement = document.getElementById('root');
+  if (!rootElement) {
+    console.error('Root element not found!');
+  } else {
+    const root = createRoot(rootElement);
+    root.render(
+      <QuickStartsPreview
+        vscode={vscode}
+        initialData={window.initialData}
+        filePath={window.filePath}
+      />,
+    );
+  }
+} catch (error) {
+  console.error('Error in webview:', error);
+  document.body.innerHTML = `<div style="padding: 20px; color: red;">
+    <h2>Error loading preview</h2>
+    <pre>${error instanceof Error ? error.stack : String(error)}</pre>
+    <p>initialData: ${window.initialData ? 'present (' + window.initialData.length + ' chars)' : 'missing'}</p>
+    <p>filePath: ${window.filePath || 'missing'}</p>
+  </div>`;
+}
diff --git a/packages/vscode/src/view/app/quickstarts.tsx b/packages/vscode/src/view/app/quickstarts.tsx
diff --git a/packages/vscode/src/view/app/tsconfig.json b/packages/vscode/src/view/app/tsconfig.json
diff --git a/packages/vscode/webpack.config.js b/packages/vscode/webpack.config.js
diff --git a/packages/vscode/yarn.lock b/packages/vscode/yarn.lock
diff --git a/yarn.lock b/yarn.lock
