fix: enhance GitHub sync Modal with need-auth modal for new user

Author: Musicminion

services/web/modules/github-sync/app/src/GitHubSyncController.mjs

@@ -23,7 +23,6 @@ async function getStatus(req, res) {
   if (!status) {
     return res.json({ enabled: false })
   }
-
   res.json(status)
 }
 
@@ -62,6 +61,16 @@ async function getProjectStatus(req, res) {
       status.owner = owner
     }
 
+    // check if owner's GitHub credentials are still valid. If not, return enabled: false to trigger re-auth flow in frontend
+    const credentials = await GitHubSyncHandler.promises.getGitHubAccessTokenForUser(ownerId)
+    if (!credentials) {
+      status.enabled = false
+      return res.json({
+        enabled: false
+      }
+      )
+    }
+
     // remove status. last_sync_sha and .last_sync_version
     if (status.last_sync_sha)
       delete status.last_sync_sha

services/web/modules/github-sync/app/src/GitHubSyncHandler.mjs

@@ -15,6 +15,16 @@ async function getUserGitHubStatus(userId) {
   if (!credentials) {
     return { available: true, enabled: false }
   }
+
+  // test if the token is still valid by making an API call to GitHub
+  const token = await SecretsHelper.decryptAccessToken(credentials.auth_token_encrypted)
+  try {
+    await GitHubApiClient.listRepos(token, { per_page: 1 })
+  } catch (err) {
+    logger.warn({ userId, err }, 'GitHub token invalid, treating as not connected')
+    return { available: true, enabled: false }
+  }
+
   return {
     available: true,
     enabled: true

services/web/modules/github-sync/frontend/js/components/github-integration-card.tsx

@@ -31,7 +31,44 @@ import { useEditorManagerContext } from '@/features/ide-react/context/editor-man
 import { Trans } from 'react-i18next'
 
 
-type GitHubSyncModalStatus = 'loading' | 'export' | 'merge' | 'pushSubmit' | 'syncing' | 'conflict'
+type GitHubSyncModalStatus = 'loading' | 'export' | 'merge' | 'pushSubmit' | 'syncing' | 'conflict' | 'need-auth'
+
+type GitHubSyncModalNeedAuthProps = {
+  handleHide: () => void
+}
+
+const GitHubSyncModalNeedAuth = ({ handleHide }: GitHubSyncModalNeedAuthProps) => {
+  const { t } = useTranslation()
+  const { appName } = getMeta('ol-ExposedSettings')
+  return (
+    <>
+      <OLModalBody>
+        <p>{t('link_to_github_description', { appName })}</p>
+      </OLModalBody>
+      <OLModalFooter>
+        <OLButton
+          variant="secondary"
+          onClick={handleHide}
+        >
+          {t('close')}
+        </OLButton>
+
+        <OLButton
+          variant="primary"
+          onClick={() => {
+            window.open(
+              '/github-sync/beginAuth',
+              'githubAuth',
+              'width=600,height=700'
+            )
+          }}
+        >
+          {t('link_to_github')}
+        </OLButton>
+      </OLModalFooter>
+    </>
+  )
+}
 
 type GitHubSyncModalSyncingProps = {
   handleHide: () => void
@@ -607,27 +644,53 @@ function GitHubSyncModal({
     if (!show || !project || modalStatus !== 'loading') {
       return
     }
-    const fetchGitHubSyncStatus = async () => {
+
+    const fetchUserGitHubSyncStatus = async () => {
       try {
-        const data = await getJSON(`/project/${projectId}/github-sync/status`)
-        if (data.enabled && data.merge_status === 'success') {
-          setModalStatus('merge')
-          setProjectSyncStatus(data)
-        } else if (data.enabled && data.merge_status === 'failure') {
-          setModalStatus('conflict')
-          setProjectSyncStatus(data)
-        }
-        else {
-          setModalStatus('export')
+        const data = await getJSON('/user/github-sync/status')
+        if (data.enabled) {
+          // fetch project github sync status
+          const projectStatus = await getJSON(`/project/${projectId}/github-sync/status`)
+          if (projectStatus.enabled && projectStatus.merge_status === 'success') {
+            setModalStatus('merge')
+            setProjectSyncStatus(projectStatus)
+          } else if (projectStatus.enabled && projectStatus.merge_status === 'failure') {
+            setModalStatus('conflict')
+            setProjectSyncStatus(projectStatus)
+          } else {
+            setModalStatus('export')
+          }
+        } else {
+          setModalStatus('need-auth')
         }
       } catch (err: any) {
         console.error('Failed to fetch GitHub sync status', err)
       }
     }
 
-    fetchGitHubSyncStatus()
+    // const fetchGitHubSyncStatus = async () => {
+    //   try {
+    //     const data = await getJSON(`/project/${projectId}/github-sync/status`)
+    //     if (data.enabled && data.merge_status === 'success') {
+    //       setModalStatus('merge')
+    //       setProjectSyncStatus(data)
+    //     } else if (data.enabled && data.merge_status === 'failure') {
+    //       setModalStatus('conflict')
+    //       setProjectSyncStatus(data)
+    //     }
+    //     else {
+    //       setModalStatus('export')
+    //     }
+    //   } catch (err: any) {
+    //     console.error('Failed to fetch GitHub sync status', err)
+    //   }
+    // }
+
+    fetchUserGitHubSyncStatus()
   }, [show, modalStatus])
 
+
+
   useEffect(() => {
     if (!show)
       setCommitMessage('')
@@ -662,6 +725,9 @@ function GitHubSyncModal({
           setModalStatus={setModalStatus}
         />
       }
+      {
+        modalStatus === 'need-auth' && <GitHubSyncModalNeedAuth handleHide={handleHide} />
+      }
 
     </OLModal >
   )