hale-commenting-system 2.2.0 → 2.2.1

package/src/test/setup.ts

@@ -0,0 +1,33 @@
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+// Mock CSS imports
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn();
+  constructor(callback: ResizeObserverCallback) {}
+};
+
+// Mock IntersectionObserver
+global.IntersectionObserver = class IntersectionObserver {
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn();
+  constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {}
+} as any;

package/src/typings.d.ts

@@ -0,0 +1,12 @@
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.svg';
+declare module '*.css';
+declare module '*.wav';
+declare module '*.mp3';
+declare module '*.m4a';
+declare module '*.rdf';
+declare module '*.ttl';
+declare module '*.pdf';

package/stylePaths.js

@@ -0,0 +1,14 @@
+const path = require('path');
+module.exports = {
+  stylePaths: [
+    path.resolve(__dirname, 'src'),
+    path.resolve(__dirname, 'node_modules/patternfly'),
+    path.resolve(__dirname, 'node_modules/@patternfly/patternfly'),
+    path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css'),
+    path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/base.css'),
+    path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
+    path.resolve(__dirname, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
+    path.resolve(__dirname, 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
+    path.resolve(__dirname, 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css')
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "outDir": "dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "paths": {
+      "@app/*": ["src/app/*"],
+      "@assets/*": ["node_modules/@patternfly/react-core/dist/styles/assets/*"]
+    },
+    "importHelpers": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.jsx",
+    "**/*.js"
+  ],
+  "exclude": ["node_modules"]
+}

package/vitest.config.ts

@@ -0,0 +1,19 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    globals: true,
+    css: true,
+  },
+  resolve: {
+    alias: {
+      '@app': path.resolve(__dirname, './src/app'),
+    },
+  },
+});

package/webpack.common.js

@@ -0,0 +1,139 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const Dotenv = require('dotenv-webpack');
+const BG_IMAGES_DIRNAME = 'bgimages';
+const ASSET_PATH = process.env.ASSET_PATH || '/';
+module.exports = (env) => {
+  return {
+    module: {
+      rules: [
+        {
+          test: /\.(tsx|ts|jsx)?$/,
+          use: [
+            {
+              loader: 'ts-loader',
+              options: {
+                transpileOnly: true,
+                experimentalWatchApi: true,
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(svg|ttf|eot|woff|woff2)$/,
+          type: 'asset/resource',
+          // only process modules with this loader
+          // if they live under a 'fonts' or 'pficon' directory
+          include: [
+            path.resolve(__dirname, 'node_modules/patternfly/dist/fonts'),
+            path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/fonts'),
+            path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/pficon'),
+            path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/fonts'),
+            path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/pficon'),
+          ],
+        },
+        {
+          test: /\.svg$/,
+          type: 'asset/inline',
+          include: (input) => input.indexOf('background-filter.svg') > 1,
+          use: [
+            {
+              options: {
+                limit: 5000,
+                outputPath: 'svgs',
+                name: '[name].[ext]',
+              },
+            },
+          ],
+        },
+        {
+          test: /\.svg$/,
+          // only process SVG modules with this loader if they live under a 'bgimages' directory
+          // this is primarily useful when applying a CSS background using an SVG
+          include: (input) => input.indexOf(BG_IMAGES_DIRNAME) > -1,
+          type: 'asset/inline',
+        },
+        {
+          test: /\.svg$/,
+          // only process SVG modules with this loader when they don't live under a 'bgimages',
+          // 'fonts', or 'pficon' directory, those are handled with other loaders
+          include: (input) =>
+            input.indexOf(BG_IMAGES_DIRNAME) === -1 &&
+            input.indexOf('fonts') === -1 &&
+            input.indexOf('background-filter') === -1 &&
+            input.indexOf('pficon') === -1,
+          use: {
+            loader: 'raw-loader',
+            options: {},
+          },
+        },
+        {
+          test: /\.(jpg|jpeg|png|gif)$/i,
+          include: [
+            path.resolve(__dirname, 'src'),
+            path.resolve(__dirname, 'node_modules/patternfly'),
+            path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/images'),
+            path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css/assets/images'),
+            path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/images'),
+            path.resolve(
+              __dirname,
+              'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images'
+            ),
+            path.resolve(
+              __dirname,
+              'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css/assets/images'
+            ),
+            path.resolve(
+              __dirname,
+              'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css/assets/images'
+            ),
+          ],
+          type: 'asset/inline',
+          use: [
+            {
+              options: {
+                limit: 5000,
+                outputPath: 'images',
+                name: '[name].[ext]',
+              },
+            },
+          ],
+        },
+      ],
+    },
+    output: {
+      filename: '[name].bundle.js',
+      path: path.resolve(__dirname, 'dist'),
+      publicPath: ASSET_PATH,
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, 'src', 'index.html'),
+      }),
+      new Dotenv({
+        // IMPORTANT: do not inline system env vars into the browser bundle.
+        // Keep `.env` for public/client-side config only (e.g. VITE_GITHUB_CLIENT_ID).
+        // Server-side secrets should be provided via server runtime env (functions) instead.
+        systemvars: false,
+        silent: true,
+      }),
+      new CopyPlugin({
+        patterns: [{ from: './src/favicon.png', to: 'images' }],
+      }),
+    ],
+    resolve: {
+      extensions: ['.js', '.ts', '.tsx', '.jsx'],
+      plugins: [
+        new TsconfigPathsPlugin({
+          configFile: path.resolve(__dirname, './tsconfig.json'),
+        }),
+      ],
+      symlinks: false,
+      cacheWithContext: false,
+    },
+  };
+};

package/webpack.dev.js

@@ -0,0 +1,318 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const { stylePaths } = require('./stylePaths');
+const HOST = process.env.HOST || 'localhost';
+const PORT = process.env.PORT || '9000';
+
+module.exports = merge(common('development'), {
+  mode: 'development',
+  devtool: 'eval-source-map',
+  devServer: {
+    host: HOST,
+    port: PORT,
+    historyApiFallback: true,
+    open: true,
+    static: {
+      directory: path.resolve(__dirname, 'dist'),
+    },
+    client: {
+      overlay: true,
+    },
+    setupMiddlewares: (middlewares, devServer) => {
+      if (!devServer || !devServer.app) {
+        return middlewares;
+      }
+
+      // Load env vars for local OAuth/token exchange without bundling secrets into the client.
+      // `.env` is for client-safe values (e.g. VITE_GITHUB_CLIENT_ID, owner/repo).
+      // `.env.server` is for server-only secrets (e.g. GITHUB_CLIENT_SECRET).
+      try {
+        // eslint-disable-next-line global-require
+        const dotenv = require('dotenv');
+        dotenv.config({ path: path.resolve(__dirname, '.env') });
+        // IMPORTANT: allow server-only secrets to override anything accidentally present in `.env` or the shell env.
+        dotenv.config({ path: path.resolve(__dirname, '.env.server'), override: true });
+      } catch (e) {
+        // no-op
+      }
+
+      // eslint-disable-next-line global-require
+      const express = require('express');
+      devServer.app.use(express.json());
+
+      devServer.app.get('/api/github-oauth-callback', async (req, res) => {
+        try {
+          const code = req.query.code;
+          if (!code) {
+            return res.status(400).send('Missing ?code from GitHub OAuth callback.');
+          }
+
+          const clientId = process.env.VITE_GITHUB_CLIENT_ID;
+          const clientSecret = process.env.GITHUB_CLIENT_SECRET;
+
+          if (!clientId) {
+            return res.status(500).send('Missing VITE_GITHUB_CLIENT_ID (client id).');
+          }
+          if (!clientSecret) {
+            return res.status(500).send(
+              'Missing GITHUB_CLIENT_SECRET. For local dev, put it in .env.server (gitignored).'
+            );
+          }
+
+          // Exchange code -> access token
+          const tokenResp = await fetch('https://github.com/login/oauth/access_token', {
+            method: 'POST',
+            headers: {
+              'Accept': 'application/json',
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              client_id: clientId,
+              client_secret: clientSecret,
+              code,
+            }),
+          });
+
+          const tokenData = await tokenResp.json();
+          if (!tokenResp.ok || tokenData.error) {
+            return res
+              .status(500)
+              .send(`OAuth token exchange failed: ${tokenData.error || tokenResp.statusText}`);
+          }
+
+          const accessToken = tokenData.access_token;
+          if (!accessToken) {
+            return res.status(500).send('OAuth token exchange did not return an access_token.');
+          }
+
+          // Fetch user
+          const userResp = await fetch('https://api.github.com/user', {
+            headers: {
+              'Accept': 'application/vnd.github+json',
+              'Authorization': `token ${accessToken}`,
+              'User-Agent': 'pfseed-commenting-system',
+            },
+          });
+          const user = await userResp.json();
+          if (!userResp.ok) {
+            return res.status(500).send(`Failed to fetch GitHub user: ${user.message || userResp.statusText}`);
+          }
+
+          const login = encodeURIComponent(user.login || '');
+          const avatar = encodeURIComponent(user.avatar_url || '');
+          const token = encodeURIComponent(accessToken);
+
+          // Redirect back into the SPA; GitHubAuthContext will read these and store them.
+          return res.redirect(`/#/auth-callback?token=${token}&login=${login}&avatar=${avatar}`);
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.error(err);
+          return res.status(500).send('Unhandled OAuth callback error. See dev server logs.');
+        }
+      });
+
+      devServer.app.post('/api/github-api', async (req, res) => {
+        try {
+          const { token, method, endpoint, data } = req.body || {};
+          if (!token) return res.status(401).json({ message: 'Missing token' });
+          if (!method || !endpoint) return res.status(400).json({ message: 'Missing method or endpoint' });
+
+          const url = `https://api.github.com${endpoint}`;
+          const resp = await fetch(url, {
+            method,
+            headers: {
+              'Accept': 'application/vnd.github+json',
+              'Authorization': `token ${token}`,
+              'User-Agent': 'pfseed-commenting-system',
+              ...(data ? { 'Content-Type': 'application/json' } : {}),
+            },
+            body: data ? JSON.stringify(data) : undefined,
+          });
+
+          const text = await resp.text();
+          const maybeJson = (() => {
+            try {
+              return JSON.parse(text);
+            } catch {
+              return text;
+            }
+          })();
+
+          return res.status(resp.status).json(maybeJson);
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.error(err);
+          return res.status(500).json({ message: 'Unhandled github-api proxy error. See dev server logs.' });
+        }
+      });
+
+      devServer.app.get('/api/jira-issue', async (req, res) => {
+        try {
+          const key = String(req.query.key || '').trim();
+          if (!key) return res.status(400).json({ message: 'Missing ?key (e.g. ABC-123)' });
+
+          const baseUrl = (process.env.VITE_JIRA_BASE_URL || 'https://issues.redhat.com').replace(/\/+$/, '');
+          const email = process.env.JIRA_EMAIL;
+          const token = process.env.JIRA_API_TOKEN;
+
+          if (!token) {
+            return res.status(500).json({
+              message:
+                'Missing JIRA_API_TOKEN. For local dev, put it in .env.server (gitignored).',
+            });
+          }
+
+          const authHeader = email
+            ? `Basic ${Buffer.from(`${email}:${token}`).toString('base64')}` // Jira Cloud API token style
+            : `Bearer ${token}`; // Jira Server/DC PAT style
+
+          const adfToText = (node) => {
+            if (!node) return '';
+            if (typeof node === 'string') return node;
+            if (Array.isArray(node)) return node.map(adfToText).join('');
+            if (typeof node !== 'object') return '';
+            if (typeof node.text === 'string') return node.text;
+            const content = Array.isArray(node.content) ? node.content : [];
+            // Join blocks with newlines to preserve basic readability.
+            const joined = content.map(adfToText).join(node.type === 'paragraph' ? '' : '\n');
+            return joined;
+          };
+
+          const stripHtmlTags = (input) => {
+            if (!input) return '';
+            return String(input)
+              .replace(/<[^>]*>/g, '')
+              .replace(/\r\n/g, '\n')
+              .trim();
+          };
+
+          const buildUrl = (apiVersion) =>
+            `${baseUrl}/rest/api/${apiVersion}/issue/${encodeURIComponent(key)}?fields=summary,status,assignee,issuetype,priority,created,updated,description&expand=renderedFields`;
+
+          const commonHeaders = {
+            'Accept': 'application/json',
+            'Authorization': authHeader,
+            'User-Agent': 'pfseed-commenting-system',
+          };
+
+          const fetchOnce = async (apiVersion) => {
+            const r = await fetch(buildUrl(apiVersion), { headers: commonHeaders, redirect: 'manual' });
+            const text = await r.text();
+            const contentType = String(r.headers.get('content-type') || '');
+            const looksLikeHtml =
+              contentType.includes('text/html') ||
+              String(text || '').trim().startsWith('<');
+            return { r, text, contentType, looksLikeHtml };
+          };
+
+          // Red Hat Jira (issues.redhat.com) commonly works reliably on REST API v2.
+          // More generally: fall back across versions when we detect SSO redirects (302),
+          // HTML payloads, or auth failures that might be version-specific.
+          const preferV2 = baseUrl.includes('issues.redhat.com');
+          const firstVersion = preferV2 ? '2' : '3';
+          const secondVersion = preferV2 ? '3' : '2';
+
+          let attempt = await fetchOnce(firstVersion);
+          if (
+            attempt.r.status === 404 ||
+            attempt.r.status === 302 ||
+            attempt.looksLikeHtml ||
+            attempt.r.status === 401 ||
+            attempt.r.status === 403
+          ) {
+            const fallback = await fetchOnce(secondVersion);
+            // Prefer the fallback if it succeeded, or if the first attempt clearly looked like SSO/HTML.
+            if (fallback.r.ok || attempt.looksLikeHtml || attempt.r.status === 302) {
+              attempt = fallback;
+            }
+          }
+
+          const resp = attempt.r;
+          const payloadText = attempt.text;
+          const contentType = attempt.contentType;
+
+          const payload = (() => {
+            try {
+              return JSON.parse(payloadText);
+            } catch {
+              return { message: payloadText };
+            }
+          })();
+
+          if (!resp.ok) {
+            // Many SSO flows return HTML (login page) instead of JSON; never dump that into the UI.
+            const looksLikeHtml =
+              contentType.includes('text/html') ||
+              String(payloadText || '').trim().startsWith('<');
+
+            if (looksLikeHtml) {
+              return res.status(resp.status).json({
+                message:
+                  resp.status === 401 || resp.status === 403
+                    ? 'Unauthorized to Jira. Your token/auth scheme may be incorrect for this Jira instance.'
+                    : `Jira request failed (${resp.status}).`,
+                hint: email
+                  ? 'You are using Basic auth (JIRA_EMAIL + JIRA_API_TOKEN). If this Jira uses PAT/Bearer tokens, remove JIRA_EMAIL and set only JIRA_API_TOKEN.'
+                  : baseUrl.includes('issues.redhat.com')
+                    ? 'You are using Bearer auth (JIRA_API_TOKEN). For issues.redhat.com, ensure you are using a PAT that works with REST API v2 and that JIRA_EMAIL is NOT set.'
+                    : 'You are using Bearer auth (JIRA_API_TOKEN). If this Jira uses Jira Cloud API tokens, set JIRA_EMAIL as well.',
+              });
+            }
+
+            return res.status(resp.status).json({
+              message: payload?.message || `Jira request failed (${resp.status}).`,
+            });
+          }
+
+          const issue = payload;
+          const fields = issue.fields || {};
+
+          const descriptionRaw = fields.description;
+          const descriptionText =
+            typeof descriptionRaw === 'string'
+              ? descriptionRaw
+              : typeof descriptionRaw === 'object'
+                ? adfToText(descriptionRaw)
+                : '';
+
+          const renderedDescription = issue?.renderedFields?.description;
+          const renderedDescriptionText = stripHtmlTags(renderedDescription || '');
+
+          const finalDescription =
+            (stripHtmlTags(descriptionText) || renderedDescriptionText || '').trim();
+
+          return res.json({
+            key: issue.key,
+            url: `${baseUrl}/browse/${issue.key}`,
+            summary: fields.summary || '',
+            status: fields.status?.name || '',
+            assignee: fields.assignee?.displayName || '',
+            issueType: fields.issuetype?.name || '',
+            priority: fields.priority?.name || '',
+            created: fields.created || '',
+            updated: fields.updated || '',
+            description: finalDescription || '',
+          });
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.error(err);
+          return res.status(500).json({ message: 'Unhandled jira-issue proxy error. See dev server logs.' });
+        }
+      });
+
+      return middlewares;
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        include: [...stylePaths],
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+});

package/webpack.prod.js

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const { stylePaths } = require('./stylePaths');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserJSPlugin = require('terser-webpack-plugin');
+
+module.exports = merge(common('production'), {
+  mode: 'production',
+  devtool: 'source-map',
+  optimization: {
+    minimizer: [
+      new TerserJSPlugin({}),
+      new CssMinimizerPlugin({
+        minimizerOptions: {
+          preset: ['default', { mergeLonghand: false }],
+        },
+      }),
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[name].bundle.css',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        include: [...stylePaths],
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+    ],
+  },
+});

package/bin/detect.d.ts

@@ -1,10 +0,0 @@
-export declare function detectPatternFlySeed(): boolean;
-export interface GitRemoteInfo {
-    owner?: string;
-    repo?: string;
-    url?: string;
-    isFork?: boolean;
-}
-export declare function detectGitRemote(): GitRemoteInfo | null;
-export type ProjectSetupType = 'forked' | 'cloned' | 'unknown' | 'none';
-export declare function detectProjectSetup(): ProjectSetupType;