Skip to content

Commit 3370064

Browse files
JamieSlomeJamieSlome
authored
Merge pull request finos#639 from tt-gideonaryeetey/630-add-code-clone-component-to-repository-page
refactor: code clone component
2 parents e850caf + 051c7a9 commit 3370064

File tree

3 files changed

+132
-113
lines changed

3 files changed

+132
-113
lines changed

‎src/ui/components/CustomButtons/CodeActionButton.jsx

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import Popper from '@material-ui/core/Popper';
2+
import Paper from '@material-ui/core/Paper';
3+
import {
4+
CheckIcon,
5+
ChevronDownIcon,
6+
CodeIcon,
7+
CopyIcon,
8+
TerminalIcon,
9+
} from '@primer/octicons-react';
10+
import React, { useState } from 'react';
11+
12+
const CodeActionButton = ({ cloneURL }) => {
13+
const [anchorEl, setAnchorEl] = useState(null);
14+
const [open, setOpen] = useState(false);
15+
const [placement, setPlacement] = useState();
16+
const [isCopied, setIsCopied] = useState(false);
17+
18+
const handleClick = (newPlacement) => (event) => {
19+
setIsCopied(false);
20+
setAnchorEl(event.currentTarget);
21+
setOpen((prev) => placement !== newPlacement || !prev);
22+
setPlacement(newPlacement);
23+
};
24+
25+
return (
26+
<>
27+
<span
28+
style={{
29+
background: '#2da44e',
30+
borderRadius: '5px',
31+
color: 'white',
32+
padding: '8px 10px 8px 10px',
33+
fontWeight: 'bold',
34+
cursor: 'pointer',
35+
border: '1px solid rgba(240,246,252,0.1)',
36+
whiteSpace: 'nowrap',
37+
}}
38+
onClick={handleClick('bottom-end')}
39+
>
40+
<CodeIcon size='small' verticalAlign='middle' />{' '}
41+
<span style={{ paddingLeft: '6px', paddingRight: '10px' }}>Code</span>
42+
<ChevronDownIcon size='small' verticalAlign='text-top' />
43+
</span>
44+
<Popper
45+
open={open}
46+
anchorEl={anchorEl}
47+
placement={placement}
48+
style={{
49+
border: '1px solid rgba(211, 211, 211, 0.3)',
50+
borderRadius: '5px',
51+
minWidth: '300px',
52+
maxWidth: '450px',
53+
zIndex: 99,
54+
}}
55+
>
56+
<Paper>
57+
<div style={{ padding: '15px', gap: '5px' }}>
58+
<TerminalIcon size='small' verticalAlign='middle' />{' '}
59+
<span style={{ paddingLeft: '5px', fontSize: '14px', fontWeight: 'bold' }}>Clone</span>
60+
<div style={{ marginTop: '5px', maxWidth: '299px' }}>
61+
<div
62+
style={{
63+
padding: '3px 8px 3px 8px',
64+
border: '1px solid gray',
65+
borderRadius: '5px',
66+
fontSize: '12px',
67+
minHeight: '22px',
68+
}}
69+
>
70+
<span
71+
style={{
72+
float: 'left',
73+
overflow: 'hidden',
74+
textOverflow: 'ellipsis',
75+
whiteSpace: 'nowrap',
76+
width: '90%',
77+
}}
78+
>
79+
{cloneURL}
80+
</span>
81+
<span
82+
style={{
83+
float: 'right',
84+
}}
85+
>
86+
{!isCopied && (
87+
<span
88+
style={{ cursor: 'pointer' }}
89+
onClick={() => {
90+
navigator.clipboard.writeText(`git clone ${cloneURL}`);
91+
setIsCopied(true);
92+
}}
93+
>
94+
<CopyIcon />
95+
</span>
96+
)}
97+
{isCopied && (
98+
<span style={{ color: 'green' }}>
99+
<CheckIcon />
100+
</span>
101+
)}
102+
</span>
103+
</div>
104+
</div>
105+
<div style={{ marginTop: '5px' }}>
106+
<span style={{ fontWeight: 'lighter', fontSize: '12px', opacity: 0.9 }}>
107+
Use Git and run this command in your IDE or Terminal 👍
108+
</span>
109+
</div>
110+
</div>
111+
</Paper>
112+
</Popper>
113+
</>
114+
);
115+
};
116+
117+
export default CodeActionButton;

‎src/ui/views/RepoDetails/RepoDetails.jsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import AddUser from './Components/AddUser';
1818
import { Code, Delete, RemoveCircle, Visibility } from '@material-ui/icons';
1919
import { useNavigate, useParams } from 'react-router-dom';
2020
import { UserContext } from '../../../context';
21+
import CodeActionButton from '../../components/CustomButtons/CodeActionButton';
22+
import { Box } from '@material-ui/core';
2123

2224
const useStyles = makeStyles((theme) => ({
2325
root: {
@@ -57,6 +59,9 @@ export default function RepoDetails() {
5759
if (isLoading) return <div>Loading...</div>;
5860
if (isError) return <div>Something went wrong ...</div>;
5961

62+
const { project: org, name } = data || {};
63+
const cloneURL = `${import.meta.env.VITE_SERVER_URI}/${org}/${name}.git`;
64+
6065
return (
6166
<GridContainer>
6267
<GridItem xs={12} sm={12} md={12}>
@@ -73,6 +78,10 @@ export default function RepoDetails() {
7378
</Button>
7479
</div>
7580
)}
81+
82+
<Box mb={2} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
83+
<CodeActionButton cloneURL={cloneURL} />
84+
</Box>
7685
<form className={classes.root} noValidate autoComplete='off'>
7786
<GridContainer>
7887
<GridItem xs={1} sm={1} md={1}>
@@ -117,6 +126,7 @@ export default function RepoDetails() {
117126
</GridContainer>
118127
</form>
119128
<hr style={{ opacity: 0.2 }} />
129+
120130
<GridContainer>
121131
<GridItem xs={12} sm={12} md={12}>
122132
<h3>

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

Lines changed: 5 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,9 @@
11
import React, { useEffect } from 'react';
22
import TableCell from '@material-ui/core/TableCell';
3-
import Popper from '@material-ui/core/Popper';
43
import TableRow from '@material-ui/core/TableRow';
5-
import Paper from '@material-ui/core/Paper';
64
import GridContainer from '../../../components/Grid/GridContainer';
75
import GridItem from '../../../components/Grid/GridItem';
8-
import {
9-
CheckIcon,
10-
ChevronDownIcon,
11-
CodeIcon,
12-
CodeReviewIcon,
13-
CopyIcon,
14-
LawIcon,
15-
PeopleIcon,
16-
TerminalIcon,
17-
} from '@primer/octicons-react';
6+
import { CodeReviewIcon, LawIcon, PeopleIcon } from '@primer/octicons-react';
187

198
const colors = {
209
'1C Enterprise': '#814CCC',
@@ -578,13 +567,9 @@ const colors = {
578567

579568
import axios from 'axios';
580569
import moment from 'moment';
570+
import CodeActionButton from '../../../components/CustomButtons/CodeActionButton';
581571

582572
export default function Repositories(props) {
583-
const [anchorEl, setAnchorEl] = React.useState(null);
584-
const [open, setOpen] = React.useState(false);
585-
const [placement, setPlacement] = React.useState();
586-
const [cloneURL, setCloneURL] = React.useState(null);
587-
const [isCopied, setIsCopied] = React.useState(false);
588573
const [github, setGitHub] = React.useState({});
589574

590575
useEffect(() => {
@@ -599,13 +584,8 @@ export default function Repositories(props) {
599584
});
600585
};
601586

602-
const handleClick = (newPlacement, org, name) => (event) => {
603-
setIsCopied(false);
604-
setAnchorEl(event.currentTarget);
605-
setOpen((prev) => placement !== newPlacement || !prev);
606-
setPlacement(newPlacement);
607-
setCloneURL(`${import.meta.env.VITE_SERVER_URI}/${org}/${name}.git`);
608-
};
587+
const { project: org, name } = props?.data || {};
588+
const cloneURL = `${import.meta.env.VITE_SERVER_URI}/${org}/${name}.git`;
609589

610590
return (
611591
<TableRow>
@@ -686,95 +666,7 @@ export default function Repositories(props) {
686666
</TableCell>
687667
<TableCell align='right'>
688668
<div style={{ padding: '15px' }}>
689-
{' '}
690-
<span
691-
style={{
692-
background: '#2da44e',
693-
borderRadius: '5px',
694-
color: 'white',
695-
padding: '8px 10px 8px 10px',
696-
fontWeight: 'bold',
697-
cursor: 'pointer',
698-
border: '1px solid rgba(240,246,252,0.1)',
699-
whiteSpace: 'nowrap',
700-
}}
701-
onClick={handleClick('bottom-end', props.data.project, props.data.name)}
702-
>
703-
<CodeIcon size='small' verticalAlign='middle' />{' '}
704-
<span style={{ paddingLeft: '6px', paddingRight: '10px' }}>Code</span>
705-
<ChevronDownIcon size='small' verticalAlign='text-top' />
706-
</span>
707-
<Popper
708-
open={open}
709-
anchorEl={anchorEl}
710-
placement={placement}
711-
style={{
712-
border: '1px solid rgba(211, 211, 211, 0.3)',
713-
borderRadius: '5px',
714-
minWidth: '300px',
715-
maxWidth: '450px',
716-
zIndex: 99,
717-
}}
718-
>
719-
<Paper>
720-
<div style={{ padding: '15px', gap: '5px' }}>
721-
<TerminalIcon size='small' verticalAlign='middle' />{' '}
722-
<span style={{ paddingLeft: '5px', fontSize: '14px', fontWeight: 'bold' }}>
723-
Clone
724-
</span>
725-
<div style={{ marginTop: '5px', maxWidth: '299px' }}>
726-
<div
727-
style={{
728-
padding: '3px 8px 3px 8px',
729-
border: '1px solid gray',
730-
borderRadius: '5px',
731-
fontSize: '12px',
732-
minHeight: '22px',
733-
}}
734-
>
735-
<span
736-
style={{
737-
float: 'left',
738-
overflow: 'hidden',
739-
textOverflow: 'ellipsis',
740-
whiteSpace: 'nowrap',
741-
width: '90%',
742-
}}
743-
>
744-
{cloneURL}
745-
</span>
746-
<span
747-
style={{
748-
float: 'right',
749-
}}
750-
>
751-
{!isCopied && (
752-
<span
753-
style={{ cursor: 'pointer' }}
754-
onClick={() => {
755-
navigator.clipboard.writeText(`git clone ${cloneURL}`);
756-
setIsCopied(true);
757-
}}
758-
>
759-
<CopyIcon />
760-
</span>
761-
)}
762-
{isCopied && (
763-
<span style={{ color: 'green' }}>
764-
<CheckIcon />
765-
</span>
766-
)}
767-
</span>
768-
</div>
769-
</div>
770-
<div style={{ marginTop: '5px' }}>
771-
<span style={{ fontWeight: 'lighter', fontSize: '12px', opacity: 0.9 }}>
772-
Use Git and run this command in your IDE or Terminal 👍
773-
</span>
774-
</div>
775-
</div>
776-
</Paper>
777-
</Popper>
669+
<CodeActionButton cloneURL={cloneURL} />
778670
</div>
779671
</TableCell>
780672
</TableRow>

0 commit comments

Comments
 (0)