Fix linter only

Author: loris-olivier-obi

.env.development

@@ -1,3 +1,6 @@
+# GitHub API Token for notebook fetching (optional but recommended)
+GITHUB_TOKEN=your_github_token_here
+
 KEYCLOAK_ISSUER=https://staging.openbraininstitute.org/auth/realms/SBO
 KEYCLOAK_CLIENT_ID=obp-core-web-app-dev
 KEYCLOAK_CLIENT_SECRET=dummy-secret

src/ui/segments/notebooks/table.tsx

@@ -2,7 +2,7 @@
 
 import { ConfigProvider } from 'antd';
 
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { LoadingOutlined } from '@ant-design/icons';
 import Table from 'antd/es/table';
@@ -44,24 +44,33 @@ function NotebookTable({
   const [currentNotebook, setCurrentNotebook] = useState<Notebook | null>(null);
   const [display, setDisplay] = useState<'notebook' | 'readme' | null>(null);
 
-  if (serverError)
+  // Trigger notifications after render to avoid setState during render warnings
+  const hasWarnedFailedRef = useRef(false);
+
+  useEffect(() => {
+    if (!serverError) return;
     notification.error({
       message: serverError,
       key: 'notebooks-server-error',
       placement: 'topRight',
     });
+  }, [serverError, notification]);
 
-  const resetModal = () => {
-    setCurrentNotebook(null);
-    setDisplay(null);
-  };
-
-  if (failed && failed.length)
+  useEffect(() => {
+    if (!failed || failed.length === 0) return;
+    if (hasWarnedFailedRef.current) return; // prevent duplicate toast on re-renders
     notification.warning({
       message:
         "Failed to fetch some repositories, ensure they're public and contain valid metadata for each notebook",
       placement: 'topRight',
     });
+    hasWarnedFailedRef.current = true;
+  }, [failed, notification]);
+
+  const resetModal = () => {
+    setCurrentNotebook(null);
+    setDisplay(null);
+  };
 
   const { filteredColumns, toggleColumn, isColumnHidden } = useToggleColumns(columns);
 

src/util/virtual-lab/fetchNotebooks.ts

@@ -37,7 +37,17 @@ export default async function fetchNotebooks(repoUrl: string, withDate = false)
     });
 
     if (!response.ok) {
-      throw new Error(`Cannot fetch the repository ${repoUrl}, ensure the repository is public.`);
+      if (response.status === 403) {
+        const errorData = await response.json().catch(() => ({ message: 'Unknown error' }));
+        if (errorData.message?.includes('rate limit')) {
+          throw new Error(
+            `GitHub API rate limit exceeded when fetching ${repoUrl}. Please add a GITHUB_TOKEN to your environment or wait before trying again.`
+          );
+        }
+      }
+      throw new Error(
+        `Cannot fetch the repository ${repoUrl}, ensure the repository is public. (Status: ${response.status})`
+      );
     }
 
     const tree: { tree: Item[] } = await response.json();

src/util/virtual-lab/github.ts

@@ -56,7 +56,21 @@ export async function fetchGithubFile(url: string) {
   const response = await fetch(url, options);
 
   if (!response.ok) {
-    throw new Error(`Failed to fetch file ${url}`);
+    if (response.status === 403) {
+      const errorData = await response.json().catch(() => ({ message: 'Unknown error' }));
+      if (errorData.message?.includes('rate limit')) {
+        throw new Error(
+          `GitHub API rate limit exceeded. Please add a GITHUB_TOKEN to your environment or wait before trying again. ${url}`
+        );
+      }
+      throw new Error(
+        `GitHub API access forbidden. Check permissions or add GITHUB_TOKEN to environment. ${url}`
+      );
+    }
+    if (response.status === 404) {
+      throw new Error(`GitHub file not found: ${url}`);
+    }
+    throw new Error(`Failed to fetch file ${url} (Status: ${response.status})`);
   }
 
   const data = await response.json();