Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: code clone component #639

Merged
merged 4 commits into from
Oct 2, 2024
Merged

refactor: code clone component #639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a64d5d2
refactor: code clone component
tt-gideonaryeetey Jul 9, 2024
c7cb51f
refactor: code clone component
tt-gideonaryeetey Jul 9, 2024
3b08e63
Merge branch 'main' into 630-add-code-clone-component-to-repository-page
JamieSlome Jul 15, 2024
051c7a9
Merge branch 'main' into 630-add-code-clone-component-to-repository-page
JamieSlome Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 117 additions & 0 deletions src/ui/components/CustomButtons/CodeActionButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
10 changes: 10 additions & 0 deletions src/ui/views/RepoDetails/RepoDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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}>
Expand All @@ -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}>
Expand Down Expand Up @@ -117,6 +126,7 @@ export default function RepoDetails() {
</GridContainer>
</form>
<hr style={{ opacity: 0.2 }} />

<GridContainer>
<GridItem xs={12} sm={12} md={12}>
<h3>
Expand Down
118 changes: 5 additions & 113 deletions src/ui/views/RepoList/Components/RepoOverview.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -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(() => {
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading