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": "Click here to log in 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,14 +60,14 @@ export const GetDeviceCode = () => {
       await pluginActions.saveToken(response.access_token)
       await actions.loadGitHubUserFromToken()
     }
-
   }
 
   const disconnect = async () => {
     setAuthorized(false)
     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)
@@ -171,7 +165,7 @@ 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">
@@ -220,9 +214,9 @@ export const GitUI = (props: IGitUi) => {
                     <GitHubNavigation eventKey="7" activePanel={activePanel} callback={setActivePanel} />
                     <Accordion.Collapse className='bg-light' eventKey="7">
                       <>
-                        <GetDeviceCode></GetDeviceCode>
+                        <GetDeviceCode plugin={plugin}></GetDeviceCode>
                         <hr></hr>
-                        <GitHubCredentials></GitHubCredentials>
+                        <GitHubCredentials plugin={plugin}></GitHubCredentials>
                       </>
                     </Accordion.Collapse>
                     <hr></hr>

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,13 @@ export function Workspace() {
       </>
     )
   }
+
+  const logInGithub = async () => {
+    await global.plugin.call('manager', 'activatePlugin', 'dgit')
+    global.plugin.call('menuicons', 'select', 'dgit');
+    _paq.push(['trackEvent', 'Workspace', 'GIT', 'login'])
+  }
+
   return (
     <div className="d-flex flex-column justify-content-between h-100">
       <div
@@ -1125,8 +1160,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 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 = {