From 2f4a0667b91b38aed06998d5a8098dd4ed42c843 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 2 Jul 2024 11:56:56 +0100
Subject: [PATCH] update props. update Token warning. update behaviour

---
 apps/remix-ide/src/app/plugins/git.tsx        |  4 +--
 .../github/selectandclonerepositories.tsx     |  3 +-
 libs/remix-ui/git/src/components/gitui.tsx    |  4 +--
 .../git/src/components/panels/clone.tsx       | 34 +++++++++++--------
 .../git/src/components/panels/remotes.tsx     | 20 ++++++-----
 .../src/components/panels/remotesimport.tsx   | 24 +++++++------
 .../src/components/panels/tokenWarning.tsx    | 18 +++++++---
 libs/remix-ui/git/src/style/index.css         | 10 +++++-
 8 files changed, 73 insertions(+), 44 deletions(-)

diff --git a/apps/remix-ide/src/app/plugins/git.tsx b/apps/remix-ide/src/app/plugins/git.tsx
index 73331d87ed..6ffa0f0835 100644
--- a/apps/remix-ide/src/app/plugins/git.tsx
+++ b/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 = {
diff --git a/libs/remix-ui/git/src/components/github/selectandclonerepositories.tsx b/libs/remix-ui/git/src/components/github/selectandclonerepositories.tsx
index 6183cccaa4..54054605a8 100644
--- a/libs/remix-ui/git/src/components/github/selectandclonerepositories.tsx
+++ b/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} />}
diff --git a/libs/remix-ui/git/src/components/gitui.tsx b/libs/remix-ui/git/src/components/gitui.tsx
index 1aacb099e3..3511e15047 100644
--- a/libs/remix-ui/git/src/components/gitui.tsx
+++ b/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} />
diff --git a/libs/remix-ui/git/src/components/panels/clone.tsx b/libs/remix-ui/git/src/components/panels/clone.tsx
index af30a52777..96d0388767 100644
--- a/libs/remix-ui/git/src/components/panels/clone.tsx
+++ b/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>
diff --git a/libs/remix-ui/git/src/components/panels/remotes.tsx b/libs/remix-ui/git/src/components/panels/remotes.tsx
index cf8ea2fc58..4a0728f3e4 100644
--- a/libs/remix-ui/git/src/components/panels/remotes.tsx
+++ b/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>
     </>)
-}
\ No newline at end of file
+}
diff --git a/libs/remix-ui/git/src/components/panels/remotesimport.tsx b/libs/remix-ui/git/src/components/panels/remotesimport.tsx
index 646546c1a4..9cbf4ec776 100644
--- a/libs/remix-ui/git/src/components/panels/remotesimport.tsx
+++ b/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 ?
diff --git a/libs/remix-ui/git/src/components/panels/tokenWarning.tsx b/libs/remix-ui/git/src/components/panels/tokenWarning.tsx
index 4188c07c93..7b713ea26a 100644
--- a/libs/remix-ui/git/src/components/panels/tokenWarning.tsx
+++ b/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>
     }
   </>
   )
-}
\ No newline at end of file
+}
diff --git a/libs/remix-ui/git/src/style/index.css b/libs/remix-ui/git/src/style/index.css
index 973889c15c..57df5f68c9 100644
--- a/libs/remix-ui/git/src/style/index.css
+++ b/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;
+}