[projects] handle private GitHub projects on Config Page

Author: AlexTugarev

components/dashboard/src/projects/ConfigureProject.tsx

@@ -73,7 +73,7 @@ export default function () {
     const [prebuildInstance, setPrebuildInstance] = useState<WorkspaceInstance | undefined>();
     const { isDark } = useContext(ThemeContext);
 
-    const [showAuthBanner, setShowAuthBanner] = useState<{ host: string } | undefined>(undefined);
+    const [showAuthBanner, setShowAuthBanner] = useState<{ host: string, scope?: string } | undefined>(undefined);
 
     useEffect(() => {
         // Disable editing while loading, or when the config comes from Git.
@@ -99,7 +99,11 @@ export default function () {
             try {
                 await detectProjectConfiguration(project);
             } catch (error) {
-                if (error && error.code === ErrorCodes.NOT_AUTHENTICATED) {
+                if (error && error.message && error.message.includes("NotFound")) {
+                    const host = new URL(project.cloneUrl).hostname;
+                    const scope: string | undefined = host === "github.com" ? "repo" : undefined;
+                    setShowAuthBanner({ host: new URL(project.cloneUrl).hostname, scope });
+                } else if (error && error.code === ErrorCodes.NOT_AUTHENTICATED) {
                     setShowAuthBanner({ host: new URL(project.cloneUrl).hostname });
                 } else {
                     console.error('Getting project configuration failed', error);
@@ -135,12 +139,12 @@ export default function () {
         setGitpodYml(TASKS.Other);
     }
 
-    // @ts-ignore
-    const tryAuthorize = async (host: string, onSuccess: () => void) => {
+    const tryAuthorize = async (params: {host: string, scope?: string, onSuccess: () => void}) => {
         try {
             await openAuthorizeWindow({
-                host,
-                onSuccess,
+                host: params.host,
+                onSuccess: params.onSuccess,
+                scopes: params.scope ? [params.scope] : undefined,
                 onError: (error) => {
                     console.log(error);
                 }
@@ -150,17 +154,17 @@ export default function () {
         }
     };
 
-    const onConfirmShowAuthModal = async (host: string) => {
+    const onConfirmShowAuthModal = async (host: string, scope?: string) => {
         setShowAuthBanner(undefined);
-        await tryAuthorize(host, async () => {
+        await tryAuthorize({host, onSuccess: async () => {
             // update remote session
             await getGitpodService().reconnect();
 
             // retry fetching branches
             if (project) {
                 detectProjectConfiguration(project);
             }
-        });
+        }});
     };
 
     const buildProject = async (event: React.MouseEvent) => {
@@ -215,9 +219,9 @@ export default function () {
                                     No Access
                                 </div>
                                 <div className="text-center dark:text-gray-400 pb-3">
-                                    Authorize {showAuthBanner.host} <br />to access project configuration.
+                                    Authorize {showAuthBanner.host} <br />{showAuthBanner.scope ? (<>and grant <strong>{showAuthBanner.scope}</strong> permission</>) : ""} to access project configuration.
                                 </div>
-                                <button className={`primary mr-2 py-2`} onClick={() => onConfirmShowAuthModal(showAuthBanner.host)}>Authorize Provider</button>
+                                <button className={`primary mr-2 py-2`} onClick={() => onConfirmShowAuthModal(showAuthBanner.host, showAuthBanner.scope)}>Authorize Provider</button>
                             </div>
                         </div>
                     ) : (<>