hale-commenting-system 3.7.1 → 3.8.0

package/README.md

@@ -2,7 +2,7 @@
 
 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.
 
-![Default Widget](./screenshots/defaultWidget.png)
+![Default Widget](https://raw.githubusercontent.com/JustinXHale/pfseed-commenting-system/main/screenshots/defaultWidget.png)
 
 ## 🚨 Important: Proper Uninstall Required
 
@@ -92,7 +92,7 @@ npm uninstall hale-commenting-system
 2. **Click** to attach a comment pin - the system detects React components automatically
 3. **View** component details in the panel including name, type, tree path, and props
 
-![Component Details](./screenshots/DesignDetails1.png)
+![Component Details](https://raw.githubusercontent.com/JustinXHale/pfseed-commenting-system/main/screenshots/DesignDetails1.png)
 
 ### Managing Comments
 
@@ -127,7 +127,7 @@ The system uses a **hybrid approach**:
 - View ticket details in the commenting panel
 - Track design work alongside development
 
-![Jira Integration](./screenshots/jira.png)
+![Jira Integration](https://raw.githubusercontent.com/JustinXHale/pfseed-commenting-system/main/screenshots/jira.png)
 
 ## Configuration
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hale-commenting-system",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "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

@@ -369,12 +369,34 @@ function generateFiles(config) {
 
 `;
 
-  if (config.github && config.github.clientId) {
+  // Provider configuration (GitHub or GitLab)
+  if (config.provider && config.provider.type === 'gitlab') {
+    envContent += `# Provider Type
+VITE_PROVIDER_TYPE=gitlab
+
+# GitLab OAuth (client-side; safe to expose)
+VITE_GITLAB_CLIENT_ID=${config.provider.clientId}
+VITE_GITLAB_BASE_URL=${config.provider.baseUrl}
+
+# Target project for Issues/Comments
+VITE_GITLAB_PROJECT_PATH=${config.provider.projectPath}
+
+`;
+  } else if (config.provider && config.provider.type === 'github') {
+    envContent += `# Provider Type
+VITE_PROVIDER_TYPE=github
+
+# GitHub OAuth (client-side; safe to expose)
+VITE_GITHUB_CLIENT_ID=${config.provider.clientId}
+
+# Target repo for Issues/Comments
+VITE_GITHUB_OWNER=${config.provider.owner || config.owner}
+VITE_GITHUB_REPO=${config.provider.repo || config.repo}
+
+`;
+  } else if (config.github && config.github.clientId) {
+    // Backward compatibility: old GitHub-only config
     envContent += `# GitHub OAuth (client-side; safe to expose)
-# Get your Client ID from: https://github.com/settings/developers
-# 1. Click "New OAuth App"
-# 2. Fill in the form (Homepage: http://localhost:9000, Callback: http://localhost:9000/api/github-oauth-callback)
-# 3. Copy the Client ID
 VITE_GITHUB_CLIENT_ID=${config.github.clientId}
 
 # Target repo for Issues/Comments
@@ -385,14 +407,11 @@ VITE_GITHUB_REPO=${config.github.repo || config.repo}
   } else {
     envContent += `# GitHub OAuth (client-side; safe to expose)
 # Get your Client ID from: https://github.com/settings/developers
-# 1. Click "New OAuth App"
-# 2. Fill in the form (Homepage: http://localhost:9000, Callback: http://localhost:9000/api/github-oauth-callback)
-# 3. Copy the Client ID
 VITE_GITHUB_CLIENT_ID=
 
 # Target repo for Issues/Comments
-VITE_GITHUB_OWNER=${config.owner}
-VITE_GITHUB_REPO=${config.repo}
+VITE_GITHUB_OWNER=${config.owner || ''}
+VITE_GITHUB_REPO=${config.repo || ''}
 
 `;
   }
@@ -457,7 +476,19 @@ VITE_JIRA_BASE_URL=
 
 `;
 
-  if (config.github && config.github.clientSecret) {
+  // Provider secrets (GitHub or GitLab)
+  if (config.provider && config.provider.type === 'gitlab' && config.provider.clientSecret) {
+    envServerContent += `# GitLab OAuth Application Secret (server-only)
+GITLAB_CLIENT_SECRET=${config.provider.clientSecret}
+
+`;
+  } else if (config.provider && config.provider.type === 'github' && config.provider.clientSecret) {
+    envServerContent += `# GitHub OAuth Client Secret (server-only)
+GITHUB_CLIENT_SECRET=${config.provider.clientSecret}
+
+`;
+  } else if (config.github && config.github.clientSecret) {
+    // Backward compatibility: old GitHub-only config
     envServerContent += `# GitHub OAuth Client Secret (server-only)
 # Get this from your GitHub OAuth App settings: https://github.com/settings/developers
 # Click on your OAuth App, then "Generate a new client secret"
@@ -1355,24 +1386,35 @@ async function main() {
     }
   }
 
-  // Step 2: GitHub OAuth Setup (Optional)
-  console.log('\n📦 Step 2: GitHub Integration (Optional)\n');
-  console.log('GitHub integration allows comments to sync with GitHub Issues.');
-  console.log('You can set this up now or add it later.\n');
-  
-  const setupGitHub = await prompt([
+  // Step 2: Issue Tracking Integration
+  console.log('\n📦 Step 2: Issue Tracking Integration\n');
+  console.log('Comments can sync with GitHub or GitLab Issues.');
+  console.log('This allows comments to persist and be managed like regular issues.\n');
+  console.log('Options:');
+  console.log('  • GitHub - Sync with GitHub Issues');
+  console.log('  • GitLab - Sync with GitLab Issues (supports self-hosted)');
+  console.log('  • Skip - Set up later (you can still use local comments)\n');
+
+  const platformChoice = await prompt([
     {
-      type: 'confirm',
-      name: 'setup',
-      message: 'Do you want to set up GitHub integration now?',
-      default: true
+      type: 'list',
+      name: 'platform',
+      message: 'Select your issue tracking platform:',
+      choices: [
+        { name: 'GitHub', value: 'github' },
+        { name: 'GitLab', value: 'gitlab' },
+        { name: 'Skip (set up later)', value: 'skip' }
+      ],
+      default: 'github'
     }
   ]);
 
-  let githubConfig = null;
-  let githubValid = false;
+  const selectedPlatform = platformChoice.platform; // 'github', 'gitlab', or 'skip'
 
-  if (setupGitHub.setup) {
+  let providerConfig = null;
+  let providerValid = false;
+
+  if (selectedPlatform === 'github') {
     console.log('\nTo sync comments with GitHub Issues, we need to authenticate with GitHub.');
     console.log('This requires creating a GitHub OAuth App.\n');
     console.log('Instructions:');
@@ -1610,14 +1652,112 @@ async function main() {
     }
     console.log('✅ GitHub credentials validated!\n');
 
-    githubConfig = {
+    providerConfig = {
+      type: 'github',
       clientId: githubAnswers.clientId,
       clientSecret: githubAnswers.clientSecret,
       owner: targetOwner,
       repo: targetRepo
     };
-  } else {
-    console.log('\n⏭️  Skipping GitHub setup. You can add it later by editing .env and .env.server files.\n');
+    providerValid = githubValid;
+  } else if (selectedPlatform === 'gitlab') {
+    // GitLab setup flow
+    console.log('\nTo sync comments with GitLab Issues, we need to authenticate with GitLab.');
+    console.log('This requires creating a GitLab OAuth Application.\n');
+
+    // Prompt for GitLab instance URL
+    console.log('💡 This supports both gitlab.com and self-hosted GitLab instances.');
+    console.log('   Examples:');
+    console.log('   • https://gitlab.com (public GitLab)');
+    console.log('   • https://gitlab.cee.redhat.com (Red Hat internal)\n');
+
+    const gitlabInstanceAnswer = await prompt([
+      {
+        type: 'input',
+        name: 'baseUrl',
+        message: 'GitLab instance URL:',
+        default: 'https://gitlab.com',
+        validate: (input) => {
+          if (!input.trim()) return 'Base URL is required';
+          try {
+            new URL(input);
+            return true;
+          } catch {
+            return 'Invalid URL format (must start with https://)';
+          }
+        }
+      }
+    ]);
+
+    const baseUrl = gitlabInstanceAnswer.baseUrl.replace(/\/+$/, '');
+    const isSelfHosted = !baseUrl.includes('gitlab.com');
+
+    console.log('\nInstructions:');
+    console.log(`1. Visit: ${baseUrl}/-/user_settings/applications`);
+    console.log('2. Click "Add new application"');
+    console.log('3. Fill in the form:');
+    console.log('   - Name: Your app name (e.g., "My Design Comments")');
+    console.log('   - Redirect URI: http://localhost:9000/api/gitlab-oauth-callback');
+    console.log('   - Confidential: ✓ (checked)');
+    console.log('   - Scopes: ✓ api (full API access)');
+    console.log('4. Click "Save application"');
+    console.log('5. Copy the Application ID and Secret\n');
+
+    const gitlabAnswers = await prompt([
+      {
+        type: 'input',
+        name: 'clientId',
+        message: 'GitLab Application ID:',
+        validate: (input) => {
+          if (!input.trim()) return 'Application ID is required';
+          return true;
+        }
+      },
+      {
+        type: 'password',
+        name: 'clientSecret',
+        message: 'GitLab Application Secret:',
+        mask: '*',
+        validate: (input) => {
+          if (!input.trim()) return 'Application Secret is required';
+          return true;
+        }
+      }
+    ]);
+
+    // Prompt for project path
+    console.log('\nWhere do you want to store comments as GitLab Issues?');
+    console.log('This should be a project you have maintainer/owner access to.');
+    console.log('Format: group/project or namespace/group/project\n');
+
+    const projectPathAnswer = await prompt([
+      {
+        type: 'input',
+        name: 'projectPath',
+        message: 'GitLab project path (e.g., mygroup/myproject):',
+        validate: (input) => {
+          if (!input.trim()) return 'Project path is required';
+          if (!input.includes('/')) return 'Project path must include at least one slash (e.g., group/project)';
+          return true;
+        }
+      }
+    ]);
+
+    // Note: GitLab credential validation would require more complex setup
+    console.log('\n⚠️  Note: GitLab credentials will not be validated automatically.');
+    console.log('Please ensure you have maintainer/owner access to the project and the OAuth app is configured correctly.\n');
+
+    providerConfig = {
+      type: 'gitlab',
+      clientId: gitlabAnswers.clientId,
+      clientSecret: gitlabAnswers.clientSecret,
+      baseUrl: baseUrl,
+      projectPath: projectPathAnswer.projectPath
+    };
+    providerValid = true; // Assume valid since we can't validate GitLab easily
+  } else if (selectedPlatform === 'skip') {
+    console.log('\n⏭️  Skipping issue tracking setup. Comments will work locally only.');
+    console.log('You can add GitHub or GitLab integration later by editing .env and .env.server files.\n');
   }
 
   // Step 3: Jira Setup (Optional)
@@ -1702,10 +1842,11 @@ async function main() {
   // Step 4: Generate files
   console.log('📝 Step 4: Generating configuration files...\n');
   generateFiles({
-    github: githubConfig,
+    provider: providerConfig,
+    github: providerConfig && providerConfig.type === 'github' ? providerConfig : null, // For backward compat
     jira: jiraConfig,
-    owner: githubConfig ? githubConfig.owner : owner,
-    repo: githubConfig ? githubConfig.repo : repo
+    owner: providerConfig && providerConfig.type === 'github' ? providerConfig.owner : owner,
+    repo: providerConfig && providerConfig.type === 'github' ? providerConfig.repo : repo
   });
 
   // Step 5: Integrate into project
@@ -1785,10 +1926,10 @@ async function main() {
     console.log('   4. Restart your dev server\n');
   }
 
-  if (!githubConfig || !jiraConfig) {
+  if (!providerConfig || !jiraConfig) {
     console.log('📝 To add integrations later:');
-    if (!githubConfig) {
-      console.log('   • GitHub: Edit .env and .env.server files (see comments in files for instructions)');
+    if (!providerConfig) {
+      console.log('   • GitHub/GitLab: Edit .env and .env.server files (see comments in files for instructions)');
     }
     if (!jiraConfig) {
       console.log('   • Jira: Edit .env and .env.server files (see comments in files for instructions)');

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

@@ -17,8 +17,9 @@ import {
   TextArea,
   Title,
 } from '@patternfly/react-core';
-import { ExternalLinkAltIcon, GithubIcon, InfoCircleIcon, TrashIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon, GithubIcon, GitlabIcon, InfoCircleIcon, TrashIcon } from '@patternfly/react-icons';
 import { useComments } from '../contexts/CommentContext';
+import { useProviderAuth } from '../contexts/ProviderAuthContext';
 import { DetailsTab } from './DetailsTab';
 import { JiraTab } from './JiraTab';
 import { FloatingWidget } from './FloatingWidget';
@@ -41,6 +42,8 @@ export const CommentPanel: React.FunctionComponent<CommentPanelProps> = ({ child
     removePin,
     retrySync,
   } = useComments();
+  const { providerType } = useProviderAuth();
+  const ProviderIcon = providerType === 'gitlab' ? GitlabIcon : GithubIcon;
   const location = useLocation();
   const detectedVersion = getVersionFromPathOrQuery(location.pathname, location.search);
   const [newCommentText, setNewCommentText] = React.useState('');
@@ -170,7 +173,7 @@ export const CommentPanel: React.FunctionComponent<CommentPanelProps> = ({ child
     switch (status) {
       case 'synced':
         return (
-          <Label color="green" icon={<GithubIcon />}>
+          <Label color="green" icon={<ProviderIcon />}>
             Synced
           </Label>
         );
@@ -293,13 +296,13 @@ export const CommentPanel: React.FunctionComponent<CommentPanelProps> = ({ child
                               rel="noopener noreferrer"
                               style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
                             >
-                              <GithubIcon />
+                              <ProviderIcon />
                               Issue #{selectedThread.issueNumber}
                               <ExternalLinkAltIcon style={{ fontSize: '0.75rem' }} />
                             </a>
                           ) : (
                             <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem', color: 'var(--pf-t--global--text--color--subtle)' }}>
-                              <GithubIcon />
+                              <ProviderIcon />
                               Issue pending…
                             </span>
                           )}

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { Button, Switch, Title } from '@patternfly/react-core';
-import { GripVerticalIcon, WindowMinimizeIcon, GithubIcon, ArrowsAltVIcon } from '@patternfly/react-icons';
+import { Button, Dropdown, DropdownItem, DropdownList, MenuToggle, Switch, Title } from '@patternfly/react-core';
+import { GripVerticalIcon, WindowMinimizeIcon, GithubIcon, GitlabIcon, ArrowsAltVIcon } from '@patternfly/react-icons';
 import { useComments } from '../contexts/CommentContext';
-import { useGitHubAuth } from '../contexts/GitHubAuthContext';
+import { useProviderAuth } from '../contexts/ProviderAuthContext';
 
 interface FloatingWidgetProps {
   children: React.ReactNode;
@@ -23,7 +23,10 @@ export const FloatingWidget: React.FunctionComponent<FloatingWidgetProps> = ({ c
   const resizeHandleRef = React.useRef<HTMLDivElement>(null);
 
   const { commentsEnabled, setCommentsEnabled, showPinsEnabled, setShowPinsEnabled } = useComments();
-  const { isAuthenticated, user, login, logout } = useGitHubAuth();
+  const { isAuthenticated, user, login, logout, providerType, providerDisplayName, availableProviders } = useProviderAuth();
+  const ProviderIcon = providerType === 'gitlab' ? GitlabIcon : GithubIcon;
+  const [isSignInOpen, setIsSignInOpen] = React.useState(false);
+  const showProviderMenu = availableProviders.length > 1;
 
   const handleMouseDown = (e: React.MouseEvent) => {
     if (!widgetRef.current) return;
@@ -211,16 +214,58 @@ export const FloatingWidget: React.FunctionComponent<FloatingWidgetProps> = ({ c
             {isAuthenticated ? (
               <>
                 <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem', fontSize: 'var(--pf-t--global--font--size--sm)' }}>
-                  <GithubIcon />
+                  <ProviderIcon />
                   {user?.login ? `@${user.login}` : 'Signed in'}
                 </span>
                 <Button variant="link" isInline onClick={logout} style={{ fontSize: 'var(--pf-t--global--font--size--sm)' }}>
                   Sign out
                 </Button>
               </>
+            ) : showProviderMenu ? (
+              <Dropdown
+                isOpen={isSignInOpen}
+                onSelect={() => setIsSignInOpen(false)}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    variant="plain"
+                    isExpanded={isSignInOpen}
+                    onClick={() => setIsSignInOpen((prev) => !prev)}
+                    style={{ fontSize: 'var(--pf-t--global--font--size--sm)' }}
+                    aria-label="Sign in menu"
+                  >
+                    Sign in
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>
+                  {availableProviders.includes('github') && (
+                    <DropdownItem
+                      onClick={() => {
+                        setIsSignInOpen(false);
+                        login('github');
+                      }}
+                      icon={<GithubIcon />}
+                    >
+                      Sign in with GitHub
+                    </DropdownItem>
+                  )}
+                  {availableProviders.includes('gitlab') && (
+                    <DropdownItem
+                      onClick={() => {
+                        setIsSignInOpen(false);
+                        login('gitlab');
+                      }}
+                      icon={<GitlabIcon />}
+                    >
+                      Sign in with GitLab
+                    </DropdownItem>
+                  )}
+                </DropdownList>
+              </Dropdown>
             ) : (
-              <Button variant="link" isInline icon={<GithubIcon />} onClick={login} style={{ fontSize: 'var(--pf-t--global--font--size--sm)' }}>
-                Sign in with GitHub
+              <Button variant="link" isInline icon={<ProviderIcon />} onClick={() => login()} style={{ fontSize: 'var(--pf-t--global--font--size--sm)' }}>
+                Sign in with {providerDisplayName}
               </Button>
             )}
           </div>