Skip to content

Refactor deployment config file form #1148

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

Merged
pipecd-bot merged 1 commit into from
Nov 26, 2020
Merged

Refactor deployment config file form #1148

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
176 changes: 81 additions & 95 deletions pkg/app/web/src/components/deployment-config-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {
Box,
Button,
CircularProgress,
Divider,
IconButton,
Link,
Expand All @@ -24,18 +23,9 @@ import {
import { addToast } from "../modules/toasts";

const useStyles = makeStyles((theme) => ({
root: {
width: 600,
flex: 1,
display: "flex",
flexDirection: "column",
},
title: {
padding: theme.spacing(2),
},
content: {
padding: theme.spacing(2),
},
filename: {
marginTop: theme.spacing(2),
fontFamily: "Roboto Mono",
Expand All @@ -50,16 +40,6 @@ const useStyles = makeStyles((theme) => ({
verticalAlign: "text-bottom",
marginLeft: theme.spacing(0.5),
},
actions: {
marginTop: theme.spacing(1),
textAlign: "right",
},
loading: {
flex: 1,
display: "flex",
justifyContent: "center",
alignItems: "center",
},
}));

const TEXT = {
Expand All @@ -79,100 +59,106 @@ export const DeploymentConfigForm: FC<Props> = ({ applicationId, onSkip }) => {
const classes = useStyles();
const dispatch = useDispatch();
const [templateIndex, setTemplateIndex] = useState(0);
const templates = useSelector<
AppState,
DeploymentConfigTemplate.AsObject[] | null
>((state) => selectTemplatesByAppId(state.deploymentConfigs));
const [configValue, setConfigValue] = useState(TEXT.PLACEHOLDER);
const templates = useSelector<AppState, DeploymentConfigTemplate.AsObject[]>(
(state) => selectTemplatesByAppId(state.deploymentConfigs) || []
);

const template = templates && templates[templateIndex];
const template = templates[templateIndex];

const handleOnClickCopy = (): void => {
if (template) {
copy(template.content);
dispatch(addToast({ message: "Deployment config copied to clipboard" }));
}
copy(configValue);
dispatch(addToast({ message: "Deployment config copied to clipboard" }));
};

const handleTemplateChange = (
e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
): void => {
setTemplateIndex(parseInt(e.target.value, 10));
};

useEffect(() => {
dispatch(fetchTemplateList({ labels: [], applicationId }));
}, [dispatch, applicationId]);

useEffect(() => {
if (template) {
setConfigValue(template.content);
}
}, [setConfigValue, template]);

return (
<div className={classes.root}>
<Box width={600} flex={1} display="flex" flexDirection="column">
<Typography className={classes.title} variant="h6">
{TEXT.TITLE}
</Typography>

<Divider />

{templates === null ? (
<div className={classes.loading}>
<CircularProgress />
</div>
) : (
<div className={classes.content}>
<TextField
fullWidth
required
select
label="Template"
variant="outlined"
margin="dense"
onChange={(e) => setTemplateIndex(parseInt(e.target.value, 10))}
value={templateIndex}
style={{ flex: 1 }}
>
{templates.map(({ name }, index) => (
<MenuItem key={name} value={index}>
{name}
</MenuItem>
))}
</TextField>
<Box p={2}>
<TextField
fullWidth
required
select
label="Template"
variant="outlined"
margin="dense"
onChange={handleTemplateChange}
value={templateIndex}
style={{ flex: 1 }}
disabled={templates.length === 0}
>
{templates.map(({ name }, index) => (
<MenuItem key={name} value={index}>
{name}
</MenuItem>
))}
</TextField>

<Box
display="flex"
alignItems="flex-end"
justifyContent="space-between"
<Box
display="flex"
alignItems="flex-end"
justifyContent="space-between"
>
<Typography variant="subtitle1" className={classes.filename}>
{TEXT.CONFIGURATION_FILENAME}
</Typography>
<IconButton
size="small"
aria-label="Copy deployment config"
onClick={handleOnClickCopy}
>
<Typography variant="subtitle1" className={classes.filename}>
{TEXT.CONFIGURATION_FILENAME}
</Typography>
<IconButton
size="small"
aria-label="Copy deployment config"
onClick={handleOnClickCopy}
>
<CopyIcon fontSize="small" />
</IconButton>
</Box>
<TextField
multiline
fullWidth
variant="outlined"
margin="dense"
rows={30}
rowsMax={30}
value={template ? template.content : TEXT.PLACEHOLDER}
/>
<CopyIcon fontSize="small" />
</IconButton>
</Box>
<TextField
multiline
fullWidth
variant="outlined"
margin="dense"
rows={30}
rowsMax={30}
value={configValue}
onChange={(e) => setConfigValue(e.target.value)}
/>

{template && (
<Link
href={template.fileCreationUrl}
target="_blank"
rel="noreferrer"
>
{TEXT.CREATE_LINK}
<OpenInNewIcon className={classes.linkIcon} />
</Link>
)}
{template && (
<Link
href={template.fileCreationUrl}
target="_blank"
rel="noreferrer"
>
{TEXT.CREATE_LINK}
<OpenInNewIcon className={classes.linkIcon} />
</Link>
)}

<div className={classes.actions}>
<Button onClick={onSkip} variant="outlined">
SKIP
</Button>
</div>
</div>
)}
</div>
<Box mt={1} textAlign="right">
<Button onClick={onSkip} variant="outlined">
SKIP
</Button>
</Box>
</Box>
</Box>
);
};