refactor

apps/remix-ide/src/app/files/dgitProvider.ts

@@ -1060,9 +1060,18 @@ class DGitProvider extends Plugin {
       const emails = await octokit.request('GET /user/emails')
 
       const scopes = user.headers['x-oauth-scopes'] || ''
+      console.log(scopes)
+
+      const scopesArr = scopes.split(',').map(scope => scope.trim())
 
       return {
-        user: user.data,
+        user: {...user.data, isConnected: 
+          scopes 
+          && scopesArr.includes('repo')
+          && scopesArr.includes('read:user')
+          && scopesArr.includes('user:email')
+          && scopesArr.includes('gist')
+        },
         emails: emails.data,
         scopes: scopes && scopes.split(',')
       }

apps/remix-ide/src/app/tabs/locales/en/git.json

@@ -16,5 +16,6 @@
   "git.unstageall": "unstage all",
   "git.stageall": "stage all",
   "git.noremote": "this repo has no remotes",
-  "git.init": "Initialize repository"
+  "git.init": "Initialize repository",
+  "git.setup": "Setup git"
 }

libs/remix-ui/git/src/components/gitui.tsx

@@ -175,6 +175,7 @@ export const GitUI = (props: IGitUi) => {
             <gitActionsContext.Provider value={gitActionsProviderValue}>
               <pluginActionsContext.Provider value={pluginActionsProviderValue}>
                 <BranchHeader />
+                {setup ? <Setup callback={setActivePanel}></Setup> : null}
                 <Accordion activeKey={activePanel} defaultActiveKey="0" className="">
                   {!setup && !needsInit ? <>
                     <SourceControlNavigation eventKey={gitUIPanels.SOURCECONTROL} activePanel={activePanel} callback={setActivePanel} />

libs/remix-ui/git/src/components/panels/githubcredentials.tsx

@@ -22,7 +22,7 @@ export const GitHubCredentials = () => {
   useEffect(() => {
     refresh()
     if (context.gitHubUser) {
-      setScopeWarning(!(context.gitHubScopes && context.gitHubScopes.length > 0))
+      setScopeWarning(!context.gitHubUser.isConnected)
     } else {
       setScopeWarning(false)
     }

libs/remix-ui/git/src/components/panels/setup.tsx

@@ -1,37 +1,29 @@
 import React, { useEffect, useState } from 'react'
-import { GetDeviceCode } from '../github/devicecode'
-import { GitHubCredentials } from './githubcredentials'
-import { Clone } from './clone'
+import { gitUIPanels } from '../../types'
+import GitUIButton from '../buttons/gituibutton'
+import { FormattedMessage } from 'react-intl'
 
-export const Setup = () => {
+export const Setup = ({ callback }) => {
 
-  const [screen, setScreen] = useState(0)
 
-  if (screen === 0) {
-    return (
-      <>
-        <h5>SETUP</h5>
-        <div>
-          <div className='mt-1 mb-2'>
-          To ensure that your commits are properly attributed in Git, you need to configure a username and email address.
-          These will be used to identify the author of the commit.
-          </div>
-          <GetDeviceCode></GetDeviceCode>
-          <hr></hr>
-          <GitHubCredentials></GitHubCredentials>
-        </div>
-      </>
-    )
-  } else if (screen === 1) {
-    return (
-      <>
-        <h5>SETUP</h5>
-        <h6>Step 2</h6>
-        <div>
-          To ensure that your commits are properly attributed in Git, you need to configure your username and email address.
-          <GitHubCredentials></GitHubCredentials>
-        </div>
-      </>
-    )
+  const startSetingUp = () => {
+    callback(gitUIPanels.GITHUB)
   }
+
+  return (
+    <>
+      <h5>SETUP REQUIRED</h5>
+      <div>
+        <div className='mt-1 mb-2'>
+          To ensure that your commits are properly attributed in Git, you need to <a href='#' onClick={startSetingUp} className='cursor-pointer mr-1'>configure a username and email address or connect to GitHub.</a>
+          These credentials will be used to identify the author of the commit.
+
+          <a href='#' onClick={startSetingUp} className='ml-1 cursor-pointer'>
+            <FormattedMessage id='git.setup' /></a>
+        </div>
+        <hr></hr>
+      </div>
+    </>
+  )
+
 }

libs/remix-ui/git/src/lib/gitactions.ts

@@ -574,8 +574,9 @@ export const saveGitHubCredentials = async (credentials: { username: string, ema
       }
       dispatch(setGitHubUser({
         login: credentials.username,
+        isConnected: false
       }))
-      appDispatcher({ type: appActionTypes.setGitHubUser, payload: { login: credentials.username } })
+      appDispatcher({ type: appActionTypes.setGitHubUser, payload: { login: credentials.username, isConnected: false } })
       dispatch(setUserEmails([{
         email: credentials.email,
         primary: true,

libs/remix-ui/git/src/types/index.ts

@@ -5,7 +5,10 @@ import { CommitObject, ReadBlobResult, ReadCommitResult, StatusRow } from "isomo
 import { CustomRemixApi } from "@remix-api";
 import { Plugin } from "@remixproject/engine";
 
-export type GitHubUser = Partial<Endpoints["GET /user"]["response"]['data']>
+export type GitHubUser = Partial<Endpoints["GET /user"]["response"]['data']> & {
+    isConnected: boolean
+}
+
 export type userEmails = Endpoints["GET /user/emails"]["response"]["data"]
 
 export interface IGitUi {

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -971,7 +971,7 @@ export function Workspace() {
                     </span>
                     <span className="d-flex">
                       {
-                        !appContext.appState.gitHubUser && <CustomTooltip
+                        (!appContext.appState.gitHubUser || !appContext.appState.gitHubUser.isConnected) && <CustomTooltip
                           placement="right"
                           tooltipId="githubNotLogged"
                           tooltipClasses="text-nowrap"
@@ -984,7 +984,7 @@ export function Workspace() {
                         </CustomTooltip>
                       }
                       {
-                        appContext.appState.gitHubUser && <CustomTooltip
+                        appContext.appState.gitHubUser && appContext.appState.gitHubUser.isConnected && <CustomTooltip
                           placement="right"
                           tooltipId="githubLoggedIn"
                           tooltipClasses="text-nowrap"