show log in github from FE

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

@@ -142,5 +142,7 @@
   "filePanel.movingFolderFailedMsg": "Unexpected error while moving folder: {src}",
   "filePanel.workspaceActions": "Workspace actions",
   "filePanel.saveCodeSample": "This code-sample workspace will not be persisted. Click here to save it.",
+  "filePanel.logInGithub": "Log in to GitHub.",
+  "filePanel.gitHubLoggedAs": "Logged as {githubuser}",
   "filePanel.updateSubmodules": "Update all submodules of repository. Click to pull dependencies."
 }

libs/remix-ui/git/src/components/github/devicecode.tsx

@@ -4,8 +4,9 @@ import { gitPluginContext } from "../gitui";
 import axios from "axios";
 import { CopyToClipboard } from "@remix-ui/clipboard";
 import { Card } from "react-bootstrap";
+import { IGitUi } from '../../types'
 
-export const GetDeviceCode = () => {
+export const GetDeviceCode = (props: IGitUi) => {
   const context = React.useContext(gitPluginContext)
   const actions = React.useContext(gitActionsContext)
   const pluginActions = React.useContext(pluginActionsContext)
@@ -59,7 +60,6 @@ export const GetDeviceCode = () => {
       await pluginActions.saveToken(response.access_token)
       await actions.loadGitHubUserFromToken()
     }
-
   }
 
   const disconnect = async () => {
@@ -67,6 +67,7 @@ export const GetDeviceCode = () => {
     setGitHubResponse(null)
     await pluginActions.saveToken(null)
     await actions.loadGitHubUserFromToken()
+    props.plugin.emit('disconnectFromGithub')
   }
 
   return (

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

@@ -31,17 +31,11 @@ import { SourceControl } from './panels/sourcontrol'
 import { GitHubCredentials } from './panels/githubcredentials'
 import { Setup } from './panels/setup'
 import { Init } from './panels/init'
-import { CustomRemixApi } from "@remix-api";
-import { Plugin } from "@remixproject/engine";
 import { Disabled } from './disabled'
-
+import { IGitUi } from '../types'
 export const gitPluginContext = React.createContext<gitState>(defaultGitState)
 export const loaderContext = React.createContext<loaderState>(defaultLoaderState)
 
-interface IGitUi {
-  plugin: Plugin<any, CustomRemixApi>
-}
-
 export const GitUI = (props: IGitUi) => {
   const plugin = props.plugin
   const [gitState, gitDispatch] = useReducer(gitReducer, defaultGitState)
@@ -59,6 +53,7 @@ export const GitUI = (props: IGitUi) => {
     })
     setTimeout(() => {
       setAppLoaded(true)
+      plugin.on('filePanel', 'requestGitHubSignIn' as any, () => setActivePanel('0'))
     }, 2000)
   }, [])
 
@@ -171,21 +166,29 @@ export const GitUI = (props: IGitUi) => {
               <pluginActionsContext.Provider value={pluginActionsProviderValue}>
                 <BranchHeader />
 
-                {setup && !needsInit ? <Setup></Setup> : null}
+                {setup && !needsInit ? <Setup plugin={plugin} ></Setup> : null}
                 {needsInit ? <Init></Init> : null}
                 {!setup && !needsInit ?
-                  <Accordion activeKey={activePanel} defaultActiveKey="0">
-                    <SourceControlNavigation eventKey="0" activePanel={activePanel} callback={setActivePanel} />
-
+                  <Accordion activeKey={activePanel} defaultActiveKey="1">
+                    <GitHubNavigation eventKey="0" activePanel={activePanel} callback={setActivePanel} />
                     <Accordion.Collapse className='bg-light' eventKey="0">
+                      <>
+                        <GetDeviceCode plugin={plugin}></GetDeviceCode>
+                        <hr></hr>
+                        <GitHubCredentials plugin={plugin}></GitHubCredentials>
+                      </>
+                    </Accordion.Collapse>
+                    <hr></hr>
+                    <SourceControlNavigation eventKey="1" activePanel={activePanel} callback={setActivePanel} />
+                    <Accordion.Collapse className='bg-light' eventKey="1">
                       <>
                         <SourceControlBase><CommitMessage /></SourceControlBase>
                         <SourceControl />
                       </>
                     </Accordion.Collapse>
                     <hr></hr>
-                    <CommandsNavigation eventKey="1" activePanel={activePanel} callback={setActivePanel} />
-                    <Accordion.Collapse className='bg-light' eventKey="1">
+                    <CommandsNavigation eventKey="2" activePanel={activePanel} callback={setActivePanel} />
+                    <Accordion.Collapse className='bg-light' eventKey="2">
                       <>
                         <Commands></Commands>
                       </>
@@ -198,8 +201,8 @@ export const GitUI = (props: IGitUi) => {
                       </>
                     </Accordion.Collapse>
                     <hr></hr>
-                    <BranchesNavigation eventKey="2" activePanel={activePanel} callback={setActivePanel} />
-                    <Accordion.Collapse className='bg-light' eventKey="2">
+                    <BranchesNavigation eventKey="4" activePanel={activePanel} callback={setActivePanel} />
+                    <Accordion.Collapse className='bg-light' eventKey="4">
                       <>
                         <Branches /></>
                     </Accordion.Collapse>
@@ -211,23 +214,14 @@ export const GitUI = (props: IGitUi) => {
                       </>
                     </Accordion.Collapse>
                     <hr></hr>
-                    <CloneNavigation eventKey="4" activePanel={activePanel} callback={setActivePanel} />
-                    <Accordion.Collapse className='bg-light' eventKey="4">
+                    <CloneNavigation eventKey="6" activePanel={activePanel} callback={setActivePanel} />
+                    <Accordion.Collapse className='bg-light' eventKey="6">
                       <>
                         <Clone /></>
                     </Accordion.Collapse>
                     <hr></hr>
-                    <GitHubNavigation eventKey="7" activePanel={activePanel} callback={setActivePanel} />
+                    <LogNavigation eventKey="7" activePanel={activePanel} callback={setActivePanel} />
                     <Accordion.Collapse className='bg-light' eventKey="7">
-                      <>
-                        <GetDeviceCode></GetDeviceCode>
-                        <hr></hr>
-                        <GitHubCredentials></GitHubCredentials>
-                      </>
-                    </Accordion.Collapse>
-                    <hr></hr>
-                    <LogNavigation eventKey="6" activePanel={activePanel} callback={setActivePanel} />
-                    <Accordion.Collapse className='bg-light' eventKey="6">
                       <>
                         <LogViewer />
                       </>

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

@@ -5,8 +5,9 @@ import { CustomTooltip } from "@remix-ui/helper";
 
 import { useIntl, FormattedMessage } from "react-intl";
 import { CopyToClipboard } from "@remix-ui/clipboard";
+import { IGitUi } from '../../types'
 
-export const GitHubCredentials = () => {
+export const GitHubCredentials = (props: IGitUi) => {
   const context = React.useContext(gitPluginContext)
   const pluginactions = React.useContext(pluginActionsContext)
   const loader = React.useContext(loaderContext)
@@ -52,6 +53,7 @@ export const GitHubCredentials = () => {
     setGithubToken(credentials.token || '')
     setGithubUsername(credentials.username || '')
     setGithubEmail(credentials.email || '')
+    props.plugin.emit('loggedInGithubChanged')
   }
 
   function removeToken(): void {
@@ -63,6 +65,7 @@ export const GitHubCredentials = () => {
       email: '',
       token: ''
     })
+    props.plugin.emit('disconnectFromGithub')
   }
 
   return (

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

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react'
 import { GetDeviceCode } from '../github/devicecode'
 import { GitHubCredentials } from './githubcredentials'
+import { IGitUi } from '../../types'
 
-export const Setup = () => {
+export const Setup = (props: IGitUi) => {
 
   const [screen, setScreen] = useState(0)
 
@@ -15,9 +16,9 @@ export const Setup = () => {
           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>
+          <GetDeviceCode plugin={props.plugin}></GetDeviceCode>
           <hr></hr>
-          <GitHubCredentials></GitHubCredentials>
+          <GitHubCredentials plugin={props.plugin}></GitHubCredentials>
         </div>
       </>
     )
@@ -28,7 +29,7 @@ export const Setup = () => {
         <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>
+          <GitHubCredentials plugin={props.plugin}></GitHubCredentials>
         </div>
       </>
     )

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

@@ -2,9 +2,16 @@ import { Endpoints } from "@octokit/types"
 import { IRemixApi } from "@remixproject/plugin-api"
 import { LibraryProfile, StatusEvents } from "@remixproject/plugin-utils"
 import { CommitObject, ReadBlobResult, ReadCommitResult, StatusRow } from "isomorphic-git"
+import { CustomRemixApi } from "@remix-api";
+import { Plugin } from "@remixproject/engine";
+
 export type GitHubUser = Partial<Endpoints["GET /user"]["response"]['data']>
 export type userEmails = Endpoints["GET /user/emails"]["response"]["data"]
 
+export interface IGitUi {
+    plugin: Plugin<any, CustomRemixApi>
+}
+
 export interface IGitApi {
     events: {
         "checkout": () => void

libs/remix-ui/workspace/src/lib/css/file-explorer.css

@@ -69,3 +69,7 @@ ul {
 .remixui_icons:hover {
     color: var(--text);
 }
+
+.remixui_avatar_user {
+    border-radius: 50% !important;
+}

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

@@ -17,7 +17,7 @@ import { customAction } from '@remixproject/plugin-api'
 import { appPlatformTypes, platformContext } from '@remix-ui/app'
 import { ElectronMenu } from './components/electron-menu'
 import { ElectronWorkspaceName } from './components/electron-workspace-name'
-import { branch } from '@remix-ui/git'
+import { branch, GitHubUser, userEmails } from '@remix-ui/git'
 
 const _paq = (window._paq = window._paq || [])
 
@@ -72,9 +72,37 @@ export function Workspace() {
     showContextMenu: false,
     reservedKeywords: [ROOT_PATH],
     copyElement: [],
-    dragStatus: false
+    dragStatus: false,
+    loggedInGithub: false,
+    githubUser: null
   })
 
+  useEffect(() => {
+    const run = async () => {
+      const token = await global.plugin.call('config' as any, 'getAppParameter' as any, 'settings/gist-access-token')
+      const data: {
+        user: GitHubUser,
+        scopes: string[]
+        emails: userEmails
+      } = await global.plugin.call('dgitApi' as any, 'getGitHubUser', { token });
+
+      if (data.user) {
+        setState((prevState) => {
+          return { ...prevState, loggedInGithub: true, githubUser: data.user }
+        })
+      }      
+    }
+    global.plugin.on('dgit',  'disconnectFromGithub', () => {
+      setState((prevState) => {
+        return { ...prevState, loggedInGithub: false, githubUser: null }
+      })
+    })
+    global.plugin.on('dgit',  'loggedInGithubChanged', () => {
+      run()
+    }) 
+    run()
+  }, [])
+
   useEffect(() => {
     if (canPaste) {
       addMenuItems([
@@ -1053,6 +1081,14 @@ export function Workspace() {
       </>
     )
   }
+
+  const logInGithub = async () => {
+    await global.plugin.call('manager', 'activatePlugin', 'dgit')
+    await global.plugin.call('menuicons', 'select', 'dgit');
+    await global.plugin.emit('requestGitHubSignIn');
+    _paq.push(['trackEvent', 'Workspace', 'GIT', 'login'])
+  }
+
   return (
     <div className="d-flex flex-column justify-content-between h-100">
       <div
@@ -1125,8 +1161,34 @@ export function Workspace() {
                       <i className="remixui_copyIcon ml-2 fab fa-github text-info" aria-hidden="true" style={{ fontSize: '1.1rem', cursor: 'pointer' }} ></i>
                     </CopyToClipboard>
                     }
-
                   </span>
+                  <span className="d-flex">
+                      {
+                        !state.loggedInGithub && <CustomTooltip
+                        placement="right"
+                        tooltipId="githubNotLogged"
+                        tooltipClasses="text-nowrap"
+                        tooltipText={<FormattedMessage id="filePanel.logInGithub" />}
+                      >
+                        <i onClick={() => logInGithub() } className="fa-brands fa-github-alt text-success ml-2 align-self-center" style={{ fontSize: '1.1rem' }} aria-hidden="true"></i>
+                      </CustomTooltip>
+                      }
+
+                      {   
+                        !state.loggedInGithub && <span onClick={() => logInGithub() } className="ml-1 text-success"> Sign in </span>
+                      }
+
+                      {
+                        state.loggedInGithub && <CustomTooltip
+                        placement="right"
+                        tooltipId="githubLoggedIn"
+                        tooltipClasses="text-nowrap"
+                        tooltipText={state.githubUser && intl.formatMessage({ id: 'filePanel.gitHubLoggedAs' }, { githubuser: state.githubUser.login }) || ''}
+                      >
+                        <img width={20} height={20} data-id={`connected-img-${state.githubUser && state.githubUser.login}`} src={state.githubUser && state.githubUser.avatar_url} className="remixui_avatar_user ml-2" />
+                      </CustomTooltip>
+                      }
+                    </span>
                 </div>
                 <div className='mx-2'>
                   {(platform !== appPlatformTypes.desktop) ? (

libs/remix-ui/workspace/src/lib/types/index.ts

@@ -6,7 +6,7 @@ import { RemixAppManager } from 'libs/remix-ui/plugin-manager/src/types'
 import { ViewPlugin } from '@remixproject/engine-web'
 import { appPlatformTypes } from '@remix-ui/app'
 import { Placement } from 'react-bootstrap/esm/Overlay'
-import { branch } from '@remix-ui/git'
+import { branch, GitHubUser } from '@remix-ui/git'
 
 export type action = { name: string, type?: Array<WorkspaceElement>, path?: string[], extension?: string[], pattern?: string[], id: string, multiselect: boolean, label: string, sticky?: boolean, group: number, platform?: appPlatformTypes }
 export interface JSONStandardInput {
@@ -225,6 +225,8 @@ export interface WorkSpaceState {
     reservedKeywords: string[]
     copyElement: CopyElementType[]
     dragStatus: boolean
+    loggedInGithub: boolean
+    githubUser: GitHubUser
 }
 
 export type FileFocusContextType = {