start setup

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

@@ -29,6 +29,7 @@ import { SourceControlBase } from './buttons/sourceControlBase'
 import { BranchHeader } from './branchHeader'
 import { SourceControl } from './panels/sourcontrol'
 import { GitHubCredentials } from './panels/githubcredentials'
+import { Setup } from './panels/setup'
 
 export const gitPluginContext = React.createContext<gitState>(defaultGitState)
 export const loaderContext = React.createContext<loaderState>(defaultLoaderState)
@@ -127,7 +128,7 @@ export const GitUI = (props: IGitUi) => {
           <gitActionsContext.Provider value={gitActionsProviderValue}>
             <BranchHeader/>
             <pluginActionsContext.Provider value={pluginActionsProviderValue}>
-              
+              <Setup></Setup>
               <Accordion activeKey={activePanel} defaultActiveKey="0">
                 <SourceControlNavigation eventKey="0" activePanel={activePanel} callback={setActivePanel} />
                 

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

@@ -1,4 +1,3 @@
-import { checkout, clone, ReadCommitResult } from "isomorphic-git";
 import React, { useEffect } from "react";
 import { gitActionsContext, pluginActionsContext } from "../../state/context";
 import { gitPluginContext, loaderContext } from "../gitui";
@@ -6,7 +5,6 @@ import { CustomTooltip } from "@remix-ui/helper";
 
 import { useIntl, FormattedMessage } from "react-intl";
 import { CopyToClipboard } from "@remix-ui/clipboard";
-import { FormControl, InputGroup } from "react-bootstrap";
 
 export const GitHubCredentials = () => {
   const context = React.useContext(gitPluginContext)
@@ -69,8 +67,8 @@ export const GitHubCredentials = () => {
           <CopyToClipboard content={githubToken} data-id='copyToClipboardCopyIcon' className='far fa-copy ml-1 p-2 mt-1' direction={"top"} />
         </div>
       </div>
-      <input name='githubUsername' onChange={e => handleChangeUserNameState(e.target.value)} value={githubUsername} className="form-control mb-1" placeholder="GitHub username" type="text" id="githubUsername" />
-      <input name='githubEmail' onChange={e => handleChangeEmailState(e.target.value)} value={githubEmail} className="form-control mb-1" placeholder="GitHub email" type="text" id="githubEmail" />
+      <input name='githubUsername' onChange={e => handleChangeUserNameState(e.target.value)} value={githubUsername} className="form-control mb-1" placeholder="Git username" type="text" id="githubUsername" />
+      <input name='githubEmail' onChange={e => handleChangeEmailState(e.target.value)} value={githubEmail} className="form-control mb-1" placeholder="Git email" type="text" id="githubEmail" />
       <div className="d-flex justify-content-between">
         <button className="btn btn-primary w-100" onClick={saveGithubToken}>
           <FormattedMessage id="save" defaultMessage="Save" />

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

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react'
+import { GitHubCredentials } from './githubcredentials'
+
+export const Setup = () => {
+
+  const [screen, setScreen] = useState(0)
+
+
+  if (screen === 0) {
+    return (
+      <>
+        <h5>SETUP - STEP 1</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>
+          <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>
+      </>
+    )
+  }
+}

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

@@ -524,9 +524,9 @@ export const remoteCommits = async (url: string, branch: string, length: number)
 
 export const saveGitHubCredentials = async (credentials: { username: string, email: string, token: string }) => {
   try {
-    await plugin.call('config' as any, 'setAppParameter' as any, 'settings/github-user-name', credentials.username)
-    await plugin.call('config' as any, 'setAppParameter' as any, 'settings/github-email', credentials.email)
-    await plugin.call('config' as any, 'setAppParameter' as any, 'settings/gist-access-token', credentials.token)
+    await plugin.call('config', 'setAppParameter', 'settings/github-user-name', credentials.username)
+    await plugin.call('config', 'setAppParameter', 'settings/github-email', credentials.email)
+    await plugin.call('config', 'setAppParameter', 'settings/gist-access-token', credentials.token)
   } catch (e) {
     console.log(e)
   }
@@ -535,9 +535,9 @@ export const saveGitHubCredentials = async (credentials: { username: string, ema
 export const getGitHubCredentials = async () => {
   if (!plugin) return
   try {
-    const username = await plugin.call('config' as any, 'getAppParameter' as any, 'settings/github-user-name')
-    const email = await plugin.call('config' as any, 'getAppParameter' as any, 'settings/github-email')
-    const token = await plugin.call('config' as any, 'getAppParameter' as any, 'settings/gist-access-token')
+    const username = await plugin.call('config', 'getAppParameter', 'settings/github-user-name')
+    const email = await plugin.call('config', 'getAppParameter', 'settings/github-email')
+    const token = await plugin.call('config', 'getAppParameter', 'settings/gist-access-token')
     return {
       username,
       email,