hale-commenting-system 3.4.0 → 3.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hale-commenting-system",
-  "version": "3.4.0",
+  "version": "3.4.3",
   "description": "A commenting system for PatternFly React applications that allows designers and developers to add comments directly on design pages, sync with GitHub Issues, and link Jira tickets.",
   "homepage": "https://www.npmjs.com/package/hale-commenting-system",
   "license": "MIT",

package/scripts/integrate.js

@@ -1266,12 +1266,13 @@ async function main() {
       console.log(`\n✅ Detected repository: ${owner}/${repo}\n`);
     }
   } else if (projectSetup === 'cloned') {
-    console.log('\n📝 Since you cloned the repo, you\'ll need to create your own GitHub repository.\n');
-    console.log('Steps:');
+    console.log('\n📝 Since you cloned the repo, you can create your own GitHub repository to store comments.\n');
+    console.log('Note: This is optional! You can test the system locally first and add GitHub integration later.\n');
+    console.log('Steps to create a GitHub repository (optional):');
     console.log('1. Create a new repository on GitHub');
     console.log('2. Add it as a remote: git remote add origin <your-repo-url>');
     console.log('3. Push your code: git push -u origin main\n');
-    
+
     const hasCreated = await prompt([
       {
         type: 'confirm',
@@ -1282,34 +1283,36 @@ async function main() {
     ]);
 
     if (!hasCreated.created) {
-      console.log('\nPlease complete the steps above and run this setup again.');
-      rl.close();
-      return;
-    }
-
-    // Ask for owner/repo
-    const repoAnswers = await prompt([
-      {
-        type: 'input',
-        name: 'owner',
-        message: 'What is your GitHub username or organization name?',
-        validate: (input) => {
-          if (!input.trim()) return 'Owner is required';
-          return true;
-        }
-      },
-      {
-        type: 'input',
-        name: 'repo',
-        message: 'What is the name of your GitHub repository?',
-        validate: (input) => {
-          if (!input.trim()) return 'Repository name is required';
-          return true;
+      console.log('\n⏭️  No problem! You can set up the GitHub repository later.');
+      console.log('   The system will still work locally for testing.\n');
+      // Set placeholder values that can be updated later
+      owner = 'YOUR_GITHUB_USERNAME';
+      repo = 'YOUR_REPO_NAME';
+    } else {
+      // Ask for owner/repo
+      const repoAnswers = await prompt([
+        {
+          type: 'input',
+          name: 'owner',
+          message: 'What is your GitHub username or organization name?',
+          validate: (input) => {
+            if (!input.trim()) return 'Owner is required';
+            return true;
+          }
+        },
+        {
+          type: 'input',
+          name: 'repo',
+          message: 'What is the name of your GitHub repository?',
+          validate: (input) => {
+            if (!input.trim()) return 'Repository name is required';
+            return true;
+          }
         }
-      }
-    ]);
-    owner = repoAnswers.owner;
-    repo = repoAnswers.repo;
+      ]);
+      owner = repoAnswers.owner;
+      repo = repoAnswers.repo;
+    }
   } else if (projectSetup === 'unknown') {
     // Try to detect from git
     if (gitInfo && gitInfo.owner && gitInfo.repo) {
@@ -1761,6 +1764,18 @@ async function main() {
   console.log('   (If it\'s already running, restart it to load the new configuration)');
   console.log('2. The commenting system will be available in your app!\n');
 
+  // Check if placeholders were used
+  const hasPlaceholders = owner === 'YOUR_GITHUB_USERNAME' || repo === 'YOUR_REPO_NAME';
+
+  if (hasPlaceholders) {
+    console.log('⚠️  Important: Placeholder values were used for GitHub repository.');
+    console.log('   The UI will work for testing, but comments won\'t sync to GitHub until you:');
+    console.log('   1. Create a GitHub repository');
+    console.log('   2. Update VITE_GITHUB_OWNER and VITE_GITHUB_REPO in .env');
+    console.log('   3. Set up GitHub OAuth (optional - for authentication)');
+    console.log('   4. Restart your dev server\n');
+  }
+
   if (!githubConfig || !jiraConfig) {
     console.log('📝 To add integrations later:');
     if (!githubConfig) {

package/src/app/commenting-system/components/CommentOverlay.tsx

@@ -72,10 +72,13 @@ export const CommentOverlay: React.FunctionComponent = () => {
         position: 'absolute',
         top: 0,
         left: 0,
+        right: 0,
+        bottom: 0,
         width: '100%',
         height: '100%',
         pointerEvents: 'none',
         zIndex: 999,
+        overflow: 'visible', // Ensure pins can be visible even if slightly outside
       }}
     >
       {currentThreads.map((thread) => (

package/src/app/commenting-system/components/JiraTab.tsx

@@ -530,7 +530,13 @@ export const JiraTab: React.FunctionComponent = () => {
   const scopeLabel =
     source === 'page' ? 'This page' : source === 'section' ? `Section (${sectionRoute}/*)` : null;
   const key = record.jiraKey || '';
-  const url = issue?.url || (process.env.VITE_JIRA_BASE_URL ? `${process.env.VITE_JIRA_BASE_URL}/browse/${key}` : '');
+  let jiraBaseUrl: string | undefined;
+  try {
+    jiraBaseUrl = typeof process !== 'undefined' && process.env ? process.env.VITE_JIRA_BASE_URL : undefined;
+  } catch (e) {
+    jiraBaseUrl = undefined;
+  }
+  const url = issue?.url || (jiraBaseUrl ? `${jiraBaseUrl}/browse/${key}` : '');
 
   const parsedSections = parseJiraTemplateSections(issue?.description || '');
   const byTitle = new Map(parsedSections.map((s) => [s.title, s.body]));

package/src/app/commenting-system/contexts/CommentContext.tsx

@@ -463,14 +463,18 @@ export const CommentProvider: React.FunctionComponent<{ children: React.ReactNod
             };
           });
 
+          // Track which issue numbers were returned from GitHub
+          const githubIssueNumbers = new Set(ghThreads.map(gt => gt.issueNumber).filter((n): n is number => !!n));
+
           // Keep local threads on this route/version that:
           // 1. Don't have an issueNumber yet, OR
-          // 2. Are actively syncing (prevents race condition where issue was created but GitHub API hasn't returned it yet)
+          // 2. Are actively syncing (prevents race condition where issue was created but GitHub API hasn't returned it yet), OR
+          // 3. Have an issueNumber but GitHub didn't return it (preserve existing threads even if GitHub API fails or issue is hidden)
           const localUnlinked = prev.filter(
             (t) =>
               t.route === route &&
               (t.version ?? '1') === (version ?? '1') &&
-              (!t.issueNumber || t.syncStatus === 'syncing'),
+              (!t.issueNumber || t.syncStatus === 'syncing' || !githubIssueNumbers.has(t.issueNumber)),
           );
 
           // Remove duplicates: if a thread is both in localUnlinked and merged, prefer the merged version

package/src/app/commenting-system/contexts/GitHubAuthContext.tsx

@@ -40,7 +40,12 @@ export const GitHubAuthProvider: React.FunctionComponent<{ children: React.React
   }, []);
 
   const login = () => {
-    const clientId = process.env.VITE_GITHUB_CLIENT_ID;
+    let clientId: string | undefined;
+    try {
+      clientId = typeof process !== 'undefined' && process.env ? process.env.VITE_GITHUB_CLIENT_ID : undefined;
+    } catch (e) {
+      clientId = undefined;
+    }
     if (!clientId) {
       // eslint-disable-next-line no-alert
       alert('GitHub login is not configured (missing VITE_GITHUB_CLIENT_ID).');

package/src/app/commenting-system/services/githubAdapter.ts

@@ -1,3 +1,5 @@
+import { getEnv } from '../utils/env';
+
 export interface GitHubUser {
   login: string;
   avatar: string;
@@ -31,14 +33,16 @@ export const getStoredUser = (): GitHubUser | null => {
 };
 
 export const isGitHubConfigured = (): boolean => {
-  return Boolean(getStoredToken() && process.env.VITE_GITHUB_OWNER && process.env.VITE_GITHUB_REPO);
+  const owner = getEnv('VITE_GITHUB_OWNER');
+  const repo = getEnv('VITE_GITHUB_REPO');
+  return Boolean(getStoredToken() && owner && repo);
 };
 
 export const diagnoseGitHubSetup = () => {
   const token = getStoredToken();
   const user = getStoredUser();
-  const owner = process.env.VITE_GITHUB_OWNER;
-  const repo = process.env.VITE_GITHUB_REPO;
+  const owner = getEnv('VITE_GITHUB_OWNER');
+  const repo = getEnv('VITE_GITHUB_REPO');
 
   console.log('🔍 GitHub Configuration Diagnostic:');
   console.log('  Token:', token ? `Present (${token.substring(0, 10)}...)` : 'Missing ❌');
@@ -100,8 +104,8 @@ async function githubProxyRequest(method: string, endpoint: string, data?: any):
         4. Token has expired or been revoked
 
         Current config:
-        - Owner: ${process.env.VITE_GITHUB_OWNER}
-        - Repo: ${process.env.VITE_GITHUB_REPO}
+        - Owner: ${getEnv('VITE_GITHUB_OWNER')}
+        - Repo: ${getEnv('VITE_GITHUB_REPO')}
         - Endpoint: ${endpoint}
       `);
     }
@@ -153,8 +157,8 @@ export const githubAdapter = {
   }): Promise<GitHubResult<{ number: number; html_url: string }>> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
 
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
 
     try {
       const metadata = [
@@ -193,8 +197,8 @@ export const githubAdapter = {
 
   async createComment(issueNumber: number, body: string): Promise<GitHubResult> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
 
     try {
       const data = await githubProxyRequest('POST', `/repos/${owner}/${repo}/issues/${issueNumber}/comments`, { body });
@@ -210,8 +214,8 @@ export const githubAdapter = {
 
   async fetchIssuesForRouteAndVersion(route: string, version?: string): Promise<GitHubResult<any[]>> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       const data = await githubProxyRequest(
         'GET',
@@ -247,8 +251,8 @@ export const githubAdapter = {
 
   async fetchIssueComments(issueNumber: number): Promise<GitHubResult<any[]>> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       const data = await githubProxyRequest(
         'GET',
@@ -262,8 +266,8 @@ export const githubAdapter = {
 
   async updateComment(commentId: number, body: string): Promise<GitHubResult> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       const data = await githubProxyRequest('PATCH', `/repos/${owner}/${repo}/issues/comments/${commentId}`, { body });
       return { success: true, data };
@@ -274,8 +278,8 @@ export const githubAdapter = {
 
   async deleteComment(commentId: number): Promise<GitHubResult> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       await githubProxyRequest('DELETE', `/repos/${owner}/${repo}/issues/comments/${commentId}`);
       return { success: true, data: {} };
@@ -286,8 +290,8 @@ export const githubAdapter = {
 
   async closeIssue(issueNumber: number): Promise<GitHubResult> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       const data = await githubProxyRequest('PATCH', `/repos/${owner}/${repo}/issues/${issueNumber}`, { state: 'closed' });
       return { success: true, data };
@@ -298,8 +302,8 @@ export const githubAdapter = {
 
   async reopenIssue(issueNumber: number): Promise<GitHubResult> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       const data = await githubProxyRequest('PATCH', `/repos/${owner}/${repo}/issues/${issueNumber}`, { state: 'open' });
       return { success: true, data };
@@ -310,8 +314,8 @@ export const githubAdapter = {
 
   async getRepoFile(path: string): Promise<GitHubResult<{ text: string; sha: string } | null>> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       const data = await githubProxyRequest('GET', `/repos/${owner}/${repo}/contents/${encodePath(path)}`);
       const content = typeof data?.content === 'string' ? data.content.replace(/\n/g, '') : '';
@@ -335,8 +339,8 @@ export const githubAdapter = {
     sha?: string;
   }): Promise<GitHubResult<{ sha: string }>> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       const payload: any = {
         message: params.message,

package/src/app/commenting-system/utils/env.ts

@@ -0,0 +1,15 @@
+/**
+ * Safely access environment variables
+ * Returns undefined if process or env vars are not available
+ */
+export const getEnv = (key: string): string | undefined => {
+  // Check if running in an environment with process.env (webpack with DefinePlugin or similar)
+  try {
+    if (typeof process !== 'undefined' && process.env) {
+      return process.env[key];
+    }
+  } catch (e) {
+    // process might be defined but accessing it throws an error
+  }
+  return undefined;
+};