refactor: code clone component

Author: tt-gideonaryeetey

src/ui/views/RepoDetails/RepoDetails.jsx

@@ -18,6 +18,8 @@ import AddUser from './Components/AddUser';
 import { Code, Delete, RemoveCircle, Visibility } from '@material-ui/icons';
 import { useNavigate, useParams } from 'react-router-dom';
 import { UserContext } from '../../../context';
+import CodeActionButton from '../../components/CustomButtons/CodeActionButton';
+import { Box } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -57,6 +59,9 @@ export default function RepoDetails() {
   if (isLoading) return <div>Loading...</div>;
   if (isError) return <div>Something went wrong ...</div>;
 
+  const { project: org, name } = data || {};
+  const cloneURL = `${import.meta.env.VITE_SERVER_URI}/${org}/${name}.git`;
+
   return (
     <GridContainer>
       <GridItem xs={12} sm={12} md={12}>
@@ -73,6 +78,10 @@ export default function RepoDetails() {
                 </Button>
               </div>
             )}
+
+            <Box mb={2} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+              <CodeActionButton cloneURL={cloneURL} />
+            </Box>
             <form className={classes.root} noValidate autoComplete='off'>
               <GridContainer>
                 <GridItem xs={1} sm={1} md={1}>
@@ -117,6 +126,7 @@ export default function RepoDetails() {
               </GridContainer>
             </form>
             <hr style={{ opacity: 0.2 }} />
+
             <GridContainer>
               <GridItem xs={12} sm={12} md={12}>
                 <h3>

src/ui/views/RepoList/Components/RepoOverview.jsx

@@ -5,16 +5,7 @@ import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 import GridContainer from '../../../components/Grid/GridContainer';
 import GridItem from '../../../components/Grid/GridItem';
-import {
-  CheckIcon,
-  ChevronDownIcon,
-  CodeIcon,
-  CodeReviewIcon,
-  CopyIcon,
-  LawIcon,
-  PeopleIcon,
-  TerminalIcon,
-} from '@primer/octicons-react';
+import { CodeReviewIcon, LawIcon, PeopleIcon } from '@primer/octicons-react';
 
 const colors = {
   '1C Enterprise': '#814CCC',
@@ -578,13 +569,9 @@ const colors = {
 
 import axios from 'axios';
 import moment from 'moment';
+import CodeActionButton from '../../../components/CustomButtons/CodeActionButton';
 
 export default function Repositories(props) {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [open, setOpen] = React.useState(false);
-  const [placement, setPlacement] = React.useState();
-  const [cloneURL, setCloneURL] = React.useState(null);
-  const [isCopied, setIsCopied] = React.useState(false);
   const [github, setGitHub] = React.useState({});
 
   useEffect(() => {
@@ -599,13 +586,8 @@ export default function Repositories(props) {
       });
   };
 
-  const handleClick = (newPlacement, org, name) => (event) => {
-    setIsCopied(false);
-    setAnchorEl(event.currentTarget);
-    setOpen((prev) => placement !== newPlacement || !prev);
-    setPlacement(newPlacement);
-    setCloneURL(`${import.meta.env.VITE_SERVER_URI}/${org}/${name}.git`);
-  };
+  const { project: org, name } = props?.data || {};
+  const cloneURL = `${import.meta.env.VITE_SERVER_URI}/${org}/${name}.git`;
 
   return (
     <TableRow>
@@ -686,95 +668,7 @@ export default function Repositories(props) {
       </TableCell>
       <TableCell align='right'>
         <div style={{ padding: '15px' }}>
-          {' '}
-          <span
-            style={{
-              background: '#2da44e',
-              borderRadius: '5px',
-              color: 'white',
-              padding: '8px 10px 8px 10px',
-              fontWeight: 'bold',
-              cursor: 'pointer',
-              border: '1px solid rgba(240,246,252,0.1)',
-              whiteSpace: 'nowrap',
-            }}
-            onClick={handleClick('bottom-end', props.data.project, props.data.name)}
-          >
-            <CodeIcon size='small' verticalAlign='middle' />{' '}
-            <span style={{ paddingLeft: '6px', paddingRight: '10px' }}>Code</span>
-            <ChevronDownIcon size='small' verticalAlign='text-top' />
-          </span>
-          <Popper
-            open={open}
-            anchorEl={anchorEl}
-            placement={placement}
-            style={{
-              border: '1px solid rgba(211, 211, 211, 0.3)',
-              borderRadius: '5px',
-              minWidth: '300px',
-              maxWidth: '450px',
-              zIndex: 99,
-            }}
-          >
-            <Paper>
-              <div style={{ padding: '15px', gap: '5px' }}>
-                <TerminalIcon size='small' verticalAlign='middle' />{' '}
-                <span style={{ paddingLeft: '5px', fontSize: '14px', fontWeight: 'bold' }}>
-                  Clone
-                </span>
-                <div style={{ marginTop: '5px', maxWidth: '299px' }}>
-                  <div
-                    style={{
-                      padding: '3px 8px 3px 8px',
-                      border: '1px solid gray',
-                      borderRadius: '5px',
-                      fontSize: '12px',
-                      minHeight: '22px',
-                    }}
-                  >
-                    <span
-                      style={{
-                        float: 'left',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        width: '90%',
-                      }}
-                    >
-                      {cloneURL}
-                    </span>
-                    <span
-                      style={{
-                        float: 'right',
-                      }}
-                    >
-                      {!isCopied && (
-                        <span
-                          style={{ cursor: 'pointer' }}
-                          onClick={() => {
-                            navigator.clipboard.writeText(`git clone ${cloneURL}`);
-                            setIsCopied(true);
-                          }}
-                        >
-                          <CopyIcon />
-                        </span>
-                      )}
-                      {isCopied && (
-                        <span style={{ color: 'green' }}>
-                          <CheckIcon />
-                        </span>
-                      )}
-                    </span>
-                  </div>
-                </div>
-                <div style={{ marginTop: '5px' }}>
-                  <span style={{ fontWeight: 'lighter', fontSize: '12px', opacity: 0.9 }}>
-                    Use Git and run this command in your IDE or Terminal 👍
-                  </span>
-                </div>
-              </div>
-            </Paper>
-          </Popper>
+          <CodeActionButton cloneURL={cloneURL} />
         </div>
       </TableCell>
     </TableRow>