update props. update Token warning. update behaviour

apps/remix-ide/src/app/plugins/git.tsx

@@ -1,7 +1,7 @@
 'use strict'
-import { ViewPlugin } from '@remixproject/engine-web';
+import { ViewPlugin } from '@remixproject/engine-web'
 import React from 'react' // eslint-disable-line
-import { gitState, GitUI } from '@remix-ui/git';
+import { gitState, GitUI } from '@remix-ui/git'
 import * as packageJson from '../../../../../package.json'
 
 const profile = {

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

@@ -9,6 +9,7 @@ import { TokenWarning } from "../panels/tokenWarning";
 interface RepositoriesProps {
   cloneDepth?: number
   cloneAllBranches?: boolean
+  plugin: any
 }
 
 export const SelectAndCloneRepositories = (props: RepositoriesProps) => {
@@ -43,7 +44,7 @@ export const SelectAndCloneRepositories = (props: RepositoriesProps) => {
 
   return (
     <>
-      <TokenWarning />
+      <TokenWarning plugin={props.plugin} />
       <RepositorySelect select={selectRepo} />
 
       {repo &&<BranchSelect select={selectRemoteBranch} />}

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

@@ -207,14 +207,14 @@ export const GitUI = (props: IGitUi) => {
                     <RemotesNavigation eventKey="5" activePanel={activePanel} callback={setActivePanel} />
                     <Accordion.Collapse className='bg-light' eventKey="5">
                       <>
-                        <Remotes></Remotes>
+                        <Remotes plugin={plugin}></Remotes>
                       </>
                     </Accordion.Collapse>
                     <hr></hr>
                     <CloneNavigation eventKey="4" activePanel={activePanel} callback={setActivePanel} />
                     <Accordion.Collapse className='bg-light' eventKey="4">
                       <>
-                        <Clone /></>
+                        <Clone plugin={plugin} /></>
                     </Accordion.Collapse>
                     <hr></hr>
                     <GitHubNavigation eventKey="7" activePanel={activePanel} callback={setActivePanel} />

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

@@ -1,14 +1,18 @@
 
-import React, { useState } from "react";
-import { Alert, Form, FormControl, InputGroup } from "react-bootstrap";
-import { useLocalStorage } from "../../hooks/useLocalStorage";
-import { gitActionsContext } from "../../state/context";
-import { gitPluginContext } from "../gitui";
-import { SelectAndCloneRepositories } from "../github/selectandclonerepositories";
-import { RemixUiCheckbox } from "@remix-ui/checkbox";
-import GitUIButton from "../buttons/gituibutton";
-
-export const Clone = () => {
+import React, { useState } from "react"
+import { Alert, Form, FormControl, InputGroup } from "react-bootstrap"
+import { useLocalStorage } from "../../hooks/useLocalStorage"
+import { gitActionsContext } from "../../state/context"
+import { gitPluginContext } from "../gitui"
+import { SelectAndCloneRepositories } from "../github/selectandclonerepositories"
+import { RemixUiCheckbox } from "@remix-ui/checkbox"
+import GitUIButton from "../buttons/gituibutton"
+
+export interface CloneProps {
+  plugin: any
+}
+
+export const Clone = ({ plugin }: CloneProps) => {
   const context = React.useContext(gitPluginContext)
   const actions = React.useContext(gitActionsContext)
   const [cloneUrl, setCloneUrl] = useLocalStorage(
@@ -64,20 +68,20 @@ export const Clone = () => {
   return (
     <>
       <div data-id="clone-panel-content" className="px-3 py-2">
-        <InputGroup className="mb-1">
+        <InputGroup className="mb-2 pb-1">
           <FormControl data-id="clone-url" id="cloneulr" placeholder="url" name='cloneurl' value={cloneUrl} onChange={e => onGitHubCloneUrlChange(e.target.value)} aria-describedby="urlprepend" />
         </InputGroup>
 
-        <input name='clonebranch' onChange={e => onCloneBranchChange(e.target.value)} value={cloneBranch} className="form-control mb-1 mt-2" placeholder="branch" type="text" id="clonebranch" />
+        <input name='clonebranch' onChange={e => onCloneBranchChange(e.target.value)} value={cloneBranch} className="form-control mb-2 mt-2" placeholder="branch" type="text" id="clonebranch" />
         <GitUIButton disabledCondition={!cloneUrl} data-id='clone-btn' className='btn btn-primary mt-1 w-100' onClick={async () => {
           clone()
         }}>clone</GitUIButton>
         <hr />
-        <SelectAndCloneRepositories cloneAllBranches={cloneAllBranches} cloneDepth={cloneDepth} />
+        <SelectAndCloneRepositories cloneAllBranches={cloneAllBranches} cloneDepth={cloneDepth} plugin={plugin} />
         <hr />
-        <label>options</label>
+        <label>Options</label>
         <InputGroup className="mt-1 mb-1">
-          <InputGroup.Prepend>
+          <InputGroup.Prepend className="bg-secondary">
             <InputGroup.Text id="clonedepthprepend">
               --depth
             </InputGroup.Text>

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

@@ -1,10 +1,14 @@
-import React, { useEffect } from "react";
-import { gitActionsContext } from "../../state/context";
-import { gitPluginContext } from "../gitui";
-import { Remoteselect } from "./remoteselect";
-import { RemotesImport } from "./remotesimport";
+import React, { useEffect } from "react"
+import { gitActionsContext } from "../../state/context"
+import { gitPluginContext } from "../gitui"
+import { Remoteselect } from "./remoteselect"
+import { RemotesImport } from "./remotesimport"
 
-export const Remotes = () => {
+export interface RemotesProps {
+  plugin: any
+}
+
+export const Remotes = (props: RemotesProps) => {
   const context = React.useContext(gitPluginContext)
   const actions = React.useContext(gitActionsContext)
   const [remoteName, setRemoteName] = React.useState<string>('')
@@ -46,8 +50,8 @@ export const Remotes = () => {
           addRemote();
         }}>add remote</button>
         <hr />
-        <RemotesImport />
+        <RemotesImport plugin={props.plugin} />
         <hr />
       </div>
     </>)
-}
+}

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

@@ -1,14 +1,18 @@
-import React, { useEffect, useState } from "react";
-import { Alert, Button } from "react-bootstrap";
-import { gitActionsContext } from "../../state/context";
-import { repository } from "../../types";
-import { gitPluginContext } from "../gitui";
+import React, { useEffect, useState } from "react"
+import { Alert, Button } from "react-bootstrap"
+import { gitActionsContext } from "../../state/context"
+import { repository } from "../../types"
+import { gitPluginContext } from "../gitui"
 import Select from 'react-select'
-import { selectStyles, selectTheme } from "../../types/styles";
-import { TokenWarning } from "./tokenWarning";
-import RepositorySelect from "../github/repositoryselect";
+import { selectStyles, selectTheme } from "../../types/styles"
+import { TokenWarning } from "./tokenWarning"
+import RepositorySelect from "../github/repositoryselect"
 
-export const RemotesImport = () => {
+export interface RemotesImportProps {
+  plugin: any
+}
+
+export const RemotesImport = (props: RemotesImportProps) => {
   const context = React.useContext(gitPluginContext)
   const actions = React.useContext(gitActionsContext)
   const [repo, setRepo] = useState<repository>(null);
@@ -64,7 +68,7 @@ export const RemotesImport = () => {
 
   return (
     <>
-      <TokenWarning />
+      <TokenWarning plugin={props.plugin} />
       <RepositorySelect select={selectRepo} />
 
       {repo ?

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

@@ -1,12 +1,20 @@
 import { gitPluginContext } from "../gitui"
-import React, { useEffect, useState } from "react";
-export const TokenWarning = () => {
+import React, { useEffect, useState } from "react"
+
+export interface TokenWarningProps {
+  plugin: any
+}
+
+export const TokenWarning = (props: TokenWarningProps) => {
   const context = React.useContext(gitPluginContext)
   return (<>
     {(context.gitHubUser && context.gitHubUser.login) ? null :
-      <li className="text-warning list-group-item d-flex justify-content-between align-items-center">
-        To use add a GitHub token to the settings.</li>
+      <li className="text-warning list-group-item text-left">
+        <span>Generate and add a Git token to use this plugin. Tokens are found in </span><span className=" text-decoration-line-through messageTip" onClick={async () => {
+          await props.plugin.call('menuicons', 'select', 'settings')
+        }}>settings</span><span> of the IDE.</span>
+      </li>
     }
   </>
   )
-}
+}

libs/remix-ui/git/src/style/index.css

@@ -28,9 +28,17 @@
 .gitfile:hover              {
     background-color             : var(--custom-select);
 }
-  
+
 hr {
     background-color: var(--custom-select);
 }
 
+.messageTip {
+
+}
+
+.messageTip:hover {
+    cursor: pointer;
+    text-decoration: underline;
+}