more fields

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

@@ -71,10 +71,11 @@ export const GetDeviceCode = () => {
 
   return (
     <>
-      {(context.gitHubUser && context.gitHubUser.login) ? null :
+      {(context.gitHubUser && context.gitHubUser.login) ? null : <>
+        <label className="text-uppercase">Connect to GitHub</label>
         <button className='btn btn-secondary mt-1 w-100' onClick={async () => {
           await getDeviceCodeFromGitHub()
-        }}><i className="fab fa-github mr-1"></i>Login in with github</button>
+        }}><i className="fab fa-github mr-1"></i>Login in with github</button></>
       }
       {gitHubResponse && !authorized &&
         <div className="pt-2">
@@ -109,15 +110,15 @@ export const GetDeviceCode = () => {
           <div className="pt-2">
             <Card>
               <Card.Body className="p-2">
-              <div className="mb-1" data-id={`connected-as-${context.gitHubUser.login}`}>Connected as {context.gitHubUser.login}</div>
+                <div className="mb-1" data-id={`connected-as-${context.gitHubUser.login}`}>Connected as {context.gitHubUser.login}</div>
                 <Card.Text>
                   <img data-id={`connected-img-${context.gitHubUser.login}`} src={context.gitHubUser.avatar_url} className="w-25" />
                   <br></br>
-                  
-                    <a data-id={`connected-link-${context.gitHubUser.login}`} href={context.gitHubUser.html_url}>{context.gitHubUser.html_url}</a>
-                    {context.userEmails && context.userEmails.filter((email: any) => email.primary).map((email: any) => {
-                      return <span key={email.email}><br></br>{email.email}</span>
-                    })}
+
+                  <a data-id={`connected-link-${context.gitHubUser.login}`} href={context.gitHubUser.html_url}>{context.gitHubUser.html_url}</a>
+                  {context.userEmails && context.userEmails.filter((email: any) => email.primary).map((email: any) => {
+                    return <span key={email.email}><br></br>{email.email}</span>
+                  })}
                 </Card.Text>
               </Card.Body>
             </Card>

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

@@ -18,6 +18,7 @@ const RepositorySelect = (props: RepositorySelectProps) => {
   const actions = React.useContext(gitActionsContext)
   const [loading, setLoading] = useState(false)
   const [show, setShow] = useState(false)
+  const [selected, setSelected] = useState<any>(null)
 
   useEffect(() => {
     if (context.repositories && context.repositories.length > 0) {
@@ -39,6 +40,7 @@ const RepositorySelect = (props: RepositorySelectProps) => {
   const selectRepo = async (e: any) => {
     if (!e || !e.value) {
       props.select(null)
+      setSelected(null)
       return
     }
     const value = e && e.value
@@ -49,6 +51,7 @@ const RepositorySelect = (props: RepositorySelectProps) => {
 
     if (repo) {
       props.select(repo)
+      setSelected(repo)
       await actions.remoteBranches(repo.owner.login, repo.name)
     }
   }
@@ -70,17 +73,20 @@ const RepositorySelect = (props: RepositorySelectProps) => {
     </button>
     {
       show ?
-        <Select
-          options={repoOtions}
-          className="mt-1"
-          id="repository-select"
-          onChange={(e: any) => selectRepo(e)}
-          theme={selectTheme}
-          styles={selectStyles}
-          isClearable={true}
-          placeholder="Type to search for a repository..."
-          isLoading={loading}
-        /> : null
+        <>
+          <Select
+            options={repoOtions}
+            className="mt-1"
+            id="repository-select"
+            onChange={(e: any) => selectRepo(e)}
+            theme={selectTheme}
+            styles={selectStyles}
+            isClearable={true}
+            placeholder="Type to search for a repository..."
+            isLoading={loading}
+          />
+          { selected ? null : <label className="text-warning mt-2">Please select a repository</label> }
+        </>: null
     }</>
   );
 };

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

@@ -18,7 +18,7 @@ export const SelectAndCloneRepositories = (props: RepositoriesProps) => {
   const [branch, setBranch] = useState({ name: "" });
   const [repo, setRepo] = useState<repository>(null);
 
-  const selectRemoteBranch = async (branch:{ name: string }) => {
+  const selectRemoteBranch = async (branch: { name: string }) => {
     setBranch(branch)
   }
 
@@ -46,12 +46,15 @@ export const SelectAndCloneRepositories = (props: RepositoriesProps) => {
       <RepositorySelect title="Load from GitHub" select={selectRepo} />
       <TokenWarning />
 
-      { repo && <BranchSelect select={selectRemoteBranch} /> }
+      {repo && <BranchSelect select={selectRemoteBranch} />}
 
-      { repo && branch && branch.name && branch.name !== '0' ?
+      {repo && branch && branch.name && branch.name !== '0' ?
         <button data-id={`clonebtn-${repo.full_name}-${branch.name}`} className='btn btn-primary mt-1 w-100' onClick={async () => {
           await clone()
-        }}>clone {repo.full_name}:{branch.name}</button> : null }
+        }}>clone {repo.full_name}:{branch.name}</button> : null}
+
+      {repo && (!branch || branch.name === '0') ?
+        <label className="text-warning">Please select a branch to clone</label> : null}
 
     </>
   )

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

@@ -8,7 +8,12 @@ import { SelectAndCloneRepositories } from "../github/selectandclonerepositories
 import { RemixUiCheckbox } from "@remix-ui/checkbox"
 import GitUIButton from "../buttons/gituibutton"
 
-export const Clone = () => {
+interface CloneProps {
+  hideLoadFromGitHub?: boolean
+}
+
+export const Clone = (props: CloneProps) => {
+  const { hideLoadFromGitHub } = props
   const context = React.useContext(gitPluginContext)
   const actions = React.useContext(gitActionsContext)
   const [cloneUrl, setCloneUrl] = useLocalStorage(
@@ -64,9 +69,10 @@ export const Clone = () => {
   return (
     <>
       <div data-id="clone-panel-content">
-        <label className="text-uppercase">Clone from GitHub</label>
-        <SelectAndCloneRepositories cloneAllBranches={cloneAllBranches} cloneDepth={cloneDepth} />
-        <hr />
+        {!hideLoadFromGitHub ? <>
+          <label className="text-uppercase">Clone from GitHub</label>
+          <SelectAndCloneRepositories cloneAllBranches={cloneAllBranches} cloneDepth={cloneDepth} />
+          <hr /></> : null}
         <label className="text-uppercase">Clone from URL</label>
         <InputGroup className="mb-2">
           <FormControl data-id="clone-url" id="cloneulr" placeholder="url" name='cloneurl' value={cloneUrl} onChange={e => onGitHubCloneUrlChange(e.target.value)} aria-describedby="urlprepend" />

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

@@ -68,14 +68,19 @@ export const GitHubCredentials = () => {
   return (
     <>
       <label className="text-uppercase">Enter GitHub credentials manually</label>
+      <br></br>
+
+      <label>Git username&nbsp;<small>(required)</small></label>
+      <input data-id='gitubUsername' name='githubUsername' onChange={e => handleChangeUserNameState(e.target.value)} value={githubUsername} className="form-control mb-3" placeholder="* Git username" type="text" id="githubUsername" />
+      <label>Git email&nbsp;<small>(required)</small></label>
+      <input data-id='githubEmail' name='githubEmail' onChange={e => handleChangeEmailState(e.target.value)} value={githubEmail} className="form-control mb-3" placeholder="* Git email" type="text" id="githubEmail" />
+      <label>GitHub token&nbsp;<small>(optional)</small></label>
       <div className="input-group text-secondary mb-3 h6">
         <input data-id='githubToken' type="password" autoComplete="off" value={githubToken} placeholder="GitHub token" className="form-control" name='githubToken' onChange={e => handleChangeTokenState(e.target.value)} />
         <div className="input-group-append">
           <CopyToClipboard content={githubToken} data-id='copyToClipboardCopyIcon' className='far fa-copy ml-1 p-2 mt-1' direction={"top"} />
         </div>
       </div>
-      <input data-id='gitubUsername' name='githubUsername' onChange={e => handleChangeUserNameState(e.target.value)} value={githubUsername} className="form-control mb-3" placeholder="* Git username" type="text" id="githubUsername" />
-      <input data-id='githubEmail' name='githubEmail' onChange={e => handleChangeEmailState(e.target.value)} value={githubEmail} className="form-control mb-3" placeholder="* Git email" type="text" id="githubEmail" />
       <div className="d-flex justify-content-between">
         <button data-id='saveGitHubCredentials' className="btn btn-primary w-100" onClick={saveGithubToken}>
           <FormattedMessage id="save" defaultMessage="Save" />

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

@@ -4,6 +4,7 @@ import React, { useContext } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { gitActionsContext } from '../../state/context';
 import GitUIButton from '../buttons/gituibutton';
+import { Clone } from './clone';
 
 export const Init = () => {
 
@@ -15,15 +16,20 @@ export const Init = () => {
 
   return (
     <>
+
       <div>
         <div className='mt-1 mb-2'>
+          <h5>INITIALIZE</h5>
           <GitUIButton
             onClick={init}
             className="btn w-md-25 w-100 btn-primary"
             data-id="initgit-btn"
-          ><FormattedMessage id='git.init'/></GitUIButton>
+          ><FormattedMessage id='git.init' /></GitUIButton>
         </div>
       </div>
+      <hr></hr>
+      <h5>CLONE</h5>
+      <Clone></Clone>
     </>
   )
 }

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

@@ -75,6 +75,9 @@ export const RemotesImport = () => {
           await addRemote()
         }}>add {remoteName}:{repo.full_name}</button> : null}
 
+      {repo && !remoteName ?
+        <label className="text-warning">Please enter a remote name</label> : null}
+
     </>
   )
 }

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { GetDeviceCode } from '../github/devicecode'
 import { GitHubCredentials } from './githubcredentials'
+import { Clone } from './clone'
 
 export const Setup = () => {
 
@@ -19,6 +20,8 @@ export const Setup = () => {
           <hr></hr>
           <GitHubCredentials></GitHubCredentials>
         </div>
+        <h5>CLONE</h5>
+        <Clone hideLoadFromGitHub={true}></Clone>
       </>
     )
   } else if (screen === 1) {

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

@@ -6,7 +6,7 @@ export const TokenWarning = () => {
   return (<>
     {(context.gitHubUser && context.gitHubUser.login) ? null :
       <span className="text-warning text-left">
-        <span>Generate and add a Git token to use this plugin. Tokens are added in </span><span className=" text-decoration-line-through messageTip" onClick={async () => {
+        <span>Generate and add a Git token or login with GitHub. Tokens are added in </span><span className=" text-decoration-line-through messageTip" onClick={async () => {
         }}>settings.</span>
       </span>
     }

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

@@ -322,6 +322,8 @@ export const clone = async (input: cloneInputType) => {
       message: `Cloned ${input.url} to ${repoNameWithTimestamp}`
     })
 
+    plugin.call('notification', 'toast', `Cloned ${input.url} to ${repoNameWithTimestamp}`)
+
   } catch (e: any) {
     await parseError(e)
   }