Merge pull request #639 from tt-gideonaryeetey/630-add-code-clone-com…

…ponent-to-repository-page refactor: code clone component
finos · Oct 2, 2024 · 3370064 · 3370064
2 parents e850caf + 051c7a9
commit 3370064
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 113 deletions.
diff --git a/src/ui/components/CustomButtons/CodeActionButton.jsx b/src/ui/components/CustomButtons/CodeActionButton.jsx
@@ -0,0 +1,117 @@
+import Popper from '@material-ui/core/Popper';
+import Paper from '@material-ui/core/Paper';
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  CodeIcon,
+  CopyIcon,
+  TerminalIcon,
+} from '@primer/octicons-react';
+import React, { useState } from 'react';
+
+const CodeActionButton = ({ cloneURL }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [placement, setPlacement] = useState();
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleClick = (newPlacement) => (event) => {
+    setIsCopied(false);
+    setAnchorEl(event.currentTarget);
+    setOpen((prev) => placement !== newPlacement || !prev);
+    setPlacement(newPlacement);
+  };
+
+  return (
+    <>
+      <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')}
+      >
+        <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>
+    </>
+  );
+};
+
+export default CodeActionButton;
diff --git a/src/ui/views/RepoDetails/RepoDetails.jsx b/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>

diff --git a/src/ui/views/RepoList/Components/RepoOverview.jsx b/src/ui/views/RepoList/Components/RepoOverview.jsx
@@ -1,20 +1,9 @@
 import React, { useEffect } from 'react';
 import TableCell from '@material-ui/core/TableCell';
-import Popper from '@material-ui/core/Popper';
 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 +567,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 +584,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 +666,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>