hale-commenting-system 2.1.1 → 2.2.1

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

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { GitHubUser, clearGitHubAuth, getStoredUser, storeGitHubAuth } from '../services/githubAdapter';
+
+interface GitHubAuthContextType {
+  user: GitHubUser | null;
+  isAuthenticated: boolean;
+  login: () => void;
+  logout: () => void;
+}
+
+const GitHubAuthContext = React.createContext<GitHubAuthContextType | undefined>(undefined);
+
+export const GitHubAuthProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => {
+  const [user, setUser] = React.useState<GitHubUser | null>(null);
+
+  React.useEffect(() => {
+    const stored = getStoredUser();
+    if (stored) setUser(stored);
+  }, []);
+
+  // Handle local dev OAuth callback via hash: /#/auth-callback?token=...&login=...&avatar=...
+  React.useEffect(() => {
+    const hash = window.location.hash;
+    if (!hash.includes('#/auth-callback')) return;
+
+    const query = hash.split('?')[1] || '';
+    const params = new URLSearchParams(query);
+    const token = params.get('token');
+    const login = params.get('login');
+    const avatar = params.get('avatar');
+
+    if (token && login && avatar) {
+      const decodedUser = { login, avatar: decodeURIComponent(avatar) };
+      storeGitHubAuth(token, decodedUser);
+      setUser(decodedUser);
+    }
+
+    // remove hash and return to home
+    window.location.hash = '/';
+  }, []);
+
+  const login = () => {
+    const clientId = process.env.VITE_GITHUB_CLIENT_ID;
+    if (!clientId) {
+      // eslint-disable-next-line no-alert
+      alert('GitHub login is not configured (missing VITE_GITHUB_CLIENT_ID).');
+      return;
+    }
+
+    const redirectUri = `${window.location.origin}/api/github-oauth-callback`;
+    // Use 'repo' scope for full access (works with both public and private repos)
+    // Use 'public_repo' only if you only need public repo access
+    const scope = 'repo';
+
+    const url =
+      `https://github.com/login/oauth/authorize?client_id=${encodeURIComponent(clientId)}` +
+      `&redirect_uri=${encodeURIComponent(redirectUri)}` +
+      `&scope=${encodeURIComponent(scope)}`;
+
+    console.log('🔑 GitHub OAuth URL:', url);
+    console.log('📋 Scope requested:', scope);
+
+    window.location.href = url;
+  };
+
+  const logout = () => {
+    clearGitHubAuth();
+    setUser(null);
+  };
+
+  return (
+    <GitHubAuthContext.Provider value={{ user, isAuthenticated: !!user, login, logout }}>
+      {children}
+    </GitHubAuthContext.Provider>
+  );
+};
+
+export const useGitHubAuth = (): GitHubAuthContextType => {
+  const ctx = React.useContext(GitHubAuthContext);
+  if (!ctx) throw new Error('useGitHubAuth must be used within a GitHubAuthProvider');
+  return ctx;
+};
+
+

package/{dist/index.d.ts → src/app/commenting-system/index.ts}

@@ -1,10 +1,11 @@
+// Contexts
 export { CommentProvider, useComments } from './contexts/CommentContext';
 export { GitHubAuthProvider, useGitHubAuth } from './contexts/GitHubAuthContext';
+
+// Components
 export { CommentOverlay } from './components/CommentOverlay';
 export { CommentPin } from './components/CommentPin';
 export { CommentPanel } from './components/CommentPanel';
-export { DetailsTab } from './components/DetailsTab';
-export { JiraTab } from './components/JiraTab';
-export { FloatingWidget } from './components/FloatingWidget';
-export { githubAdapter, isGitHubConfigured } from './services/githubAdapter';
+
+// Types
 export type { Comment, Thread, SyncStatus, ThreadStatus } from './types';

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

@@ -0,0 +1,359 @@
+export interface GitHubUser {
+  login: string;
+  avatar: string;
+}
+
+export const GITHUB_TOKEN_STORAGE_KEY = 'github_access_token';
+export const GITHUB_USER_STORAGE_KEY = 'github_user';
+
+export const storeGitHubAuth = (token: string, user: GitHubUser) => {
+  localStorage.setItem(GITHUB_TOKEN_STORAGE_KEY, token);
+  localStorage.setItem(GITHUB_USER_STORAGE_KEY, JSON.stringify(user));
+};
+
+export const clearGitHubAuth = () => {
+  localStorage.removeItem(GITHUB_TOKEN_STORAGE_KEY);
+  localStorage.removeItem(GITHUB_USER_STORAGE_KEY);
+};
+
+export const getStoredToken = (): string | null => {
+  return localStorage.getItem(GITHUB_TOKEN_STORAGE_KEY);
+};
+
+export const getStoredUser = (): GitHubUser | null => {
+  const raw = localStorage.getItem(GITHUB_USER_STORAGE_KEY);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw) as GitHubUser;
+  } catch {
+    return null;
+  }
+};
+
+export const isGitHubConfigured = (): boolean => {
+  return Boolean(getStoredToken() && process.env.VITE_GITHUB_OWNER && process.env.VITE_GITHUB_REPO);
+};
+
+export const diagnoseGitHubSetup = () => {
+  const token = getStoredToken();
+  const user = getStoredUser();
+  const owner = process.env.VITE_GITHUB_OWNER;
+  const repo = process.env.VITE_GITHUB_REPO;
+
+  console.log('🔍 GitHub Configuration Diagnostic:');
+  console.log('  Token:', token ? `Present (${token.substring(0, 10)}...)` : 'Missing ❌');
+  console.log('  User:', user ? `${user.login}` : 'Not logged in ❌');
+  console.log('  Owner:', owner || 'Missing ❌');
+  console.log('  Repo:', repo || 'Missing ❌');
+  console.log('  Full repo path:', owner && repo ? `${owner}/${repo}` : 'Incomplete ❌');
+  console.log('\n💡 To fix 403 Forbidden error:');
+  console.log('  1. Make sure you have write access to the repository');
+  console.log('  2. Check that issues are enabled on the repository');
+  console.log('  3. Re-authenticate to get a fresh token with correct scopes');
+  console.log('  4. Token needs "repo" scope for private repos or "public_repo" for public repos');
+
+  return {
+    hasToken: !!token,
+    hasUser: !!user,
+    hasOwner: !!owner,
+    hasRepo: !!repo,
+    isComplete: !!(token && user && owner && repo)
+  };
+};
+
+export interface GitHubResult<T = any> {
+  success: boolean;
+  data?: T;
+  error?: string;
+}
+
+async function githubProxyRequest(method: string, endpoint: string, data?: any): Promise<any> {
+  const token = getStoredToken();
+  if (!token) {
+    throw new Error('Not authenticated with GitHub');
+  }
+
+  console.log(`🔵 GitHub API Request:`, { method, endpoint, hasData: !!data });
+
+  const resp = await fetch('/api/github-api', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ token, method, endpoint, data }),
+  });
+
+  const payload = await resp.json();
+
+  console.log(`🔵 GitHub API Response:`, {
+    status: resp.status,
+    ok: resp.ok,
+    payload
+  });
+
+  if (!resp.ok) {
+    const message = (payload && (payload.message || payload.error)) || `GitHub API error (${resp.status})`;
+
+    if (resp.status === 403) {
+      console.error(`❌ 403 Forbidden - Possible causes:
+        1. Token doesn't have 'repo' or 'public_repo' scope
+        2. You don't have write access to the repository
+        3. Issues are disabled on the repository
+        4. Token has expired or been revoked
+
+        Current config:
+        - Owner: ${process.env.VITE_GITHUB_OWNER}
+        - Repo: ${process.env.VITE_GITHUB_REPO}
+        - Endpoint: ${endpoint}
+      `);
+    }
+
+    throw new Error(message);
+  }
+  return payload;
+}
+
+const encodePath = (path: string): string => {
+  return path
+    .split('/')
+    .map((seg) => encodeURIComponent(seg))
+    .join('/');
+};
+
+const base64EncodeUtf8 = (input: string): string => {
+  // btoa expects latin1; convert safely for utf-8
+  return btoa(unescape(encodeURIComponent(input)));
+};
+
+const base64DecodeUtf8 = (input: string): string => {
+  return decodeURIComponent(escape(atob(input)));
+};
+
+const getLabelNames = (issue: any): string[] => {
+  const labels = issue?.labels;
+  if (!Array.isArray(labels)) return [];
+  return labels
+    .map((l: any) => (typeof l === 'string' ? l : l?.name))
+    .filter((n: any) => typeof n === 'string');
+};
+
+const issueHasAnyVersion = (issue: any): boolean => {
+  const labelNames = getLabelNames(issue);
+  if (labelNames.some((n) => n.startsWith('version:'))) return true;
+  const body: string = issue?.body || '';
+  return body.includes('Version:');
+};
+
+export const githubAdapter = {
+  async createIssue(params: {
+    title: string;
+    body: string;
+    route: string;
+    xPercent: number;
+    yPercent: number;
+    version?: string;
+  }): 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;
+
+    try {
+      const metadata = [
+        `- Route: \`${params.route}\``,
+        params.version ? `- Version: \`${params.version}\`` : null,
+        `- Coordinates: \`(${params.xPercent.toFixed(1)}%, ${params.yPercent.toFixed(1)}%)\``,
+      ]
+        .filter(Boolean)
+        .join('\n');
+
+      const issueBody = {
+        title: params.title,
+        body: `${params.body}\n\n---\n**Metadata:**\n${metadata}`,
+      };
+
+      const data = await githubProxyRequest('POST', `/repos/${owner}/${repo}/issues`, issueBody);
+
+      // Add helpful labels (non-fatal if it fails)
+      try {
+        const labels: string[] = [
+          'hale-comment',
+          `route:${params.route}`,
+          `coords:${Math.round(params.xPercent)},${Math.round(params.yPercent)}`,
+        ];
+        if (params.version) labels.push(`version:${params.version}`);
+        await githubProxyRequest('POST', `/repos/${owner}/${repo}/issues/${data.number}/labels`, { labels });
+      } catch {
+        // ignore label failures
+      }
+
+      return { success: true, data };
+    } catch (e: any) {
+      return { success: false, error: e?.message || 'Failed to create issue' };
+    }
+  },
+
+  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;
+
+    try {
+      const data = await githubProxyRequest('POST', `/repos/${owner}/${repo}/issues/${issueNumber}/comments`, { body });
+      return { success: true, data };
+    } catch (e: any) {
+      return { success: false, error: e?.message || 'Failed to create comment' };
+    }
+  },
+
+  async fetchIssuesForRoute(route: string): Promise<GitHubResult<any[]>> {
+    return githubAdapter.fetchIssuesForRouteAndVersion(route);
+  },
+
+  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;
+    try {
+      const data = await githubProxyRequest(
+        'GET',
+        `/repos/${owner}/${repo}/issues?state=all&per_page=100`,
+      );
+      // Filter by metadata OR labels (route:${route}), and optionally by version
+      const filtered = (Array.isArray(data) ? data : [])
+        .filter((issue: any) => {
+          const body: string = issue?.body || '';
+          const labels = getLabelNames(issue);
+          const bodyMatch = body.includes(`Route: \`${route}\``);
+          const labelMatch = labels.includes(`route:${route}`);
+          return bodyMatch || labelMatch;
+        })
+        .filter((issue: any) => {
+          if (!version) return true;
+
+          const labels = getLabelNames(issue);
+          const body: string = issue?.body || '';
+          const versionLabelMatch = labels.includes(`version:${version}`);
+          const bodyVersionMatch = body.includes(`Version: \`${version}\``);
+
+          // Back-compat: if an issue has no version metadata at all, treat it as default "1"
+          if (!issueHasAnyVersion(issue) && version === '1') return true;
+
+          return versionLabelMatch || bodyVersionMatch;
+        });
+      return { success: true, data: filtered };
+    } catch (e: any) {
+      return { success: false, error: e?.message || 'Failed to fetch issues' };
+    }
+  },
+
+  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;
+    try {
+      const data = await githubProxyRequest(
+        'GET',
+        `/repos/${owner}/${repo}/issues/${issueNumber}/comments?per_page=100`,
+      );
+      return { success: true, data };
+    } catch (e: any) {
+      return { success: false, error: e?.message || 'Failed to fetch issue comments' };
+    }
+  },
+
+  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;
+    try {
+      const data = await githubProxyRequest('PATCH', `/repos/${owner}/${repo}/issues/comments/${commentId}`, { body });
+      return { success: true, data };
+    } catch (e: any) {
+      return { success: false, error: e?.message || 'Failed to update comment' };
+    }
+  },
+
+  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;
+    try {
+      await githubProxyRequest('DELETE', `/repos/${owner}/${repo}/issues/comments/${commentId}`);
+      return { success: true, data: {} };
+    } catch (e: any) {
+      return { success: false, error: e?.message || 'Failed to delete comment' };
+    }
+  },
+
+  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;
+    try {
+      const data = await githubProxyRequest('PATCH', `/repos/${owner}/${repo}/issues/${issueNumber}`, { state: 'closed' });
+      return { success: true, data };
+    } catch (e: any) {
+      return { success: false, error: e?.message || 'Failed to close issue' };
+    }
+  },
+
+  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;
+    try {
+      const data = await githubProxyRequest('PATCH', `/repos/${owner}/${repo}/issues/${issueNumber}`, { state: 'open' });
+      return { success: true, data };
+    } catch (e: any) {
+      return { success: false, error: e?.message || 'Failed to reopen issue' };
+    }
+  },
+
+  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;
+    try {
+      const data = await githubProxyRequest('GET', `/repos/${owner}/${repo}/contents/${encodePath(path)}`);
+      const content = typeof data?.content === 'string' ? data.content.replace(/\n/g, '') : '';
+      const sha = data?.sha as string | undefined;
+      if (!content || !sha) return { success: true, data: null };
+      const text = base64DecodeUtf8(content);
+      return { success: true, data: { text, sha } };
+    } catch (e: any) {
+      // If file doesn't exist yet, treat as empty
+      if (String(e?.message || '').toLowerCase().includes('not found')) {
+        return { success: true, data: null };
+      }
+      return { success: false, error: e?.message || 'Failed to read repo file' };
+    }
+  },
+
+  async putRepoFile(params: {
+    path: string;
+    text: string;
+    message: string;
+    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;
+    try {
+      const payload: any = {
+        message: params.message,
+        content: base64EncodeUtf8(params.text),
+      };
+      if (params.sha) payload.sha = params.sha;
+      const data = await githubProxyRequest(
+        'PUT',
+        `/repos/${owner}/${repo}/contents/${encodePath(params.path)}`,
+        payload,
+      );
+      const newSha = data?.content?.sha as string | undefined;
+      return { success: true, data: { sha: newSha || params.sha || '' } };
+    } catch (e: any) {
+      return { success: false, error: e?.message || 'Failed to write repo file' };
+    }
+  },
+};
+
+

package/src/app/commenting-system/types/index.ts

@@ -0,0 +1,27 @@
+export interface Comment {
+  id: string;
+  author?: string;
+  text: string;
+  createdAt: string;
+  githubCommentId?: number;
+  parentCommentId?: string; // local id of parent comment
+  parentGitHubCommentId?: number; // GitHub comment id of parent (if known)
+}
+
+export type SyncStatus = 'synced' | 'local' | 'pending' | 'syncing' | 'error';
+export type ThreadStatus = 'open' | 'closed';
+
+export interface Thread {
+  id: string;
+  xPercent: number; // Percentage from left (0-100)
+  yPercent: number; // Percentage from top (0-100)
+  route: string;
+  version?: string;
+  comments: Comment[];
+  issueNumber?: number;
+  issueUrl?: string;
+  provider?: 'github';
+  syncStatus?: SyncStatus;
+  syncError?: string;
+  status?: ThreadStatus; // open or closed (mirrors GitHub issue state)
+}

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

@@ -0,0 +1,19 @@
+export const getVersionFromPathOrQuery = (pathname: string, search: string): string | undefined => {
+  try {
+    const params = new URLSearchParams(search || '');
+    const fromQuery = params.get('version') || params.get('v');
+    if (fromQuery && String(fromQuery).trim()) return String(fromQuery).trim();
+
+    // Common pattern: /v3/... or /version/3/...
+    const m1 = pathname.match(/^\/v(\d+)(?:\/|$)/i);
+    if (m1?.[1]) return m1[1];
+
+    const m2 = pathname.match(/\/version\/(\d+)(?:\/|$)/i);
+    if (m2?.[1]) return m2[1];
+  } catch {
+    // ignore
+  }
+  return undefined;
+};
+
+

package/src/app/index.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import '@patternfly/react-core/dist/styles/base.css';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { AppLayout } from '@app/AppLayout/AppLayout';
+import { AppRoutes } from '@app/routes';
+import { CommentProvider } from '@app/commenting-system';
+import { GitHubAuthProvider } from '@app/commenting-system';
+import '@app/app.css';
+
+const App: React.FunctionComponent = () => (
+  <Router>
+    <GitHubAuthProvider>
+      <CommentProvider>
+        <AppLayout>
+          <AppRoutes />
+        </AppLayout>
+      </CommentProvider>
+    </GitHubAuthProvider>
+  </Router>
+);
+
+export default App;

package/src/app/routes.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import { Dashboard } from '@app/Dashboard/Dashboard';
+import { Support } from '@app/Support/Support';
+import { GeneralSettings } from '@app/Settings/General/GeneralSettings';
+import { ProfileSettings } from '@app/Settings/Profile/ProfileSettings';
+import { NotFound } from '@app/NotFound/NotFound';
+
+export interface IAppRoute {
+  label?: string; // Excluding the label will exclude the route from the nav sidebar in AppLayout
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  element: React.ReactElement;
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+  exact?: boolean;
+  path: string;
+  title: string;
+  routes?: undefined;
+}
+
+export interface IAppRouteGroup {
+  label: string;
+  routes: IAppRoute[];
+}
+
+export type AppRouteConfig = IAppRoute | IAppRouteGroup;
+
+const routes: AppRouteConfig[] = [
+  {
+    element: <Dashboard />,
+    exact: true,
+    label: 'Dashboard',
+    path: '/',
+    title: 'Hale Commenting System | Main Dashboard',
+  },
+  {
+    element: <Support />,
+    exact: true,
+    label: 'Support',
+    path: '/support',
+    title: 'Hale Commenting System | Support Page',
+  },
+  {
+    label: 'Settings',
+    routes: [
+      {
+        element: <GeneralSettings />,
+        exact: true,
+        label: 'General',
+        path: '/settings/general',
+        title: 'Hale Commenting System | General Settings',
+      },
+      {
+        element: <ProfileSettings />,
+        exact: true,
+        label: 'Profile',
+        path: '/settings/profile',
+        title: 'Hale Commenting System | Profile Settings',
+      },
+    ],
+  },
+  {
+    label: 'Comments',
+    routes: [],
+  },
+];
+
+const flattenedRoutes: IAppRoute[] = routes.reduce(
+  (flattened, route) => [...flattened, ...(route.routes ? route.routes : [route])],
+  [] as IAppRoute[],
+);
+
+const AppRoutes = (): React.ReactElement => (
+  <Routes>
+    {flattenedRoutes.map(({ path, element }, idx) => (
+      <Route path={path} element={element} key={idx} />
+    ))}
+    <Route element={<NotFound />} />
+  </Routes>
+);
+
+export { AppRoutes, routes };

package/src/app/utils/useDocumentTitle.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+// a custom hook for setting the page title
+export function useDocumentTitle(title: string) {
+  React.useEffect(() => {
+    const originalTitle = document.title;
+    document.title = title;
+
+    return () => {
+      document.title = originalTitle;
+    };
+  }, [title]);
+}

package/src/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+
+<head>
+  <meta charset="utf-8">
+  <title>Hale Commenting System</title>
+  <meta id="appName" name="application-name" content="Hale Commenting System">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/svg+xml" href="/images/favicon.png">
+  <base href="/">
+</head>
+
+<body>
+  <noscript>Enabling JavaScript is required to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>

package/src/index.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from '@app/index';
+
+if (process.env.NODE_ENV !== "production") {
+  const config = {
+    rules: [
+      {
+        id: 'color-contrast',
+        enabled: false
+      }
+    ]
+  };
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const axe = require("react-axe");
+  axe(React, ReactDOM, 1000, config);
+}
+
+const root = ReactDOM.createRoot(document.getElementById("root") as Element);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)