@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
365 lines (363 loc) • 11.9 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React, { useEffect, useState } from 'react';
import { makeStyles } from 'tss-react/mui';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import EditIcon from '@mui/icons-material/Edit';
import { defineMessages, useIntl } from 'react-intl';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import palette from '../../styles/palette';
const useStyles = makeStyles()((theme) => ({
review: {
maxWidth: '600px',
margin: 'auto'
},
section: {
marginBottom: '0'
},
bold: {
fontWeight: 'bold'
},
inline: {
display: 'inline'
},
edit: {
color: theme.palette.primary.main,
'& svg': {
fontSize: '1.2rem'
}
},
noDescription: {
color: palette.gray.medium2
},
showPassword: {
color: theme.palette.primary.main,
padding: '1px',
marginLeft: '5px',
'& svg': {
fontSize: '1rem'
}
}
}));
const messages = defineMessages({
siteInfo: {
id: 'createSiteDialog.siteInfo',
defaultMessage: 'Project Info'
},
blueprintStrategy: {
id: 'createSiteDialog.blueprintStrategy',
defaultMessage: 'Create from plugin'
},
gitStrategy: {
id: 'createSiteDialog.gitStrategy',
defaultMessage: 'Existing remote git repo clone'
},
creationStrategy: {
id: 'createSiteDialog.creationStrategy',
defaultMessage: 'Creation Strategy'
},
additionalOptions: {
id: 'createSiteDialog.additionalOptions',
defaultMessage: 'Additional Options'
},
remoteName: {
id: 'createSiteDialog.remoteName',
defaultMessage: 'Git Remote Name'
},
remoteURL: {
id: 'createSiteDialog.remoteURL',
defaultMessage: 'Git Repo URL'
},
siteId: {
id: 'createSiteDialog.siteId',
defaultMessage: 'Project ID'
},
siteName: {
id: 'createSiteDialog.siteName',
defaultMessage: 'Project Name'
},
gitBranch: {
id: 'createSiteDialog.gitBranch',
defaultMessage: 'Git Branch'
},
userNameAndPassword: {
id: 'createSiteDialog.userNameAndPassword',
defaultMessage: 'Username & Password'
},
token: {
id: 'createSiteDialog.token',
defaultMessage: 'Token'
},
privateKey: {
id: 'createSiteDialog.privateKey',
defaultMessage: 'Private Key'
},
authentication: {
id: 'createSiteDialog.authentication',
defaultMessage: 'Authentication'
},
noDescription: {
id: 'createSiteDialog.noDescription',
defaultMessage: 'No description supplied'
},
description: {
id: 'createSiteDialog.description',
defaultMessage: 'Description'
},
blueprint: {
id: 'createSiteDialog.plugin',
defaultMessage: 'Blueprint'
},
blueprintParameters: {
id: 'createSiteDialog.blueprintParameters',
defaultMessage: 'Blueprint Parameters'
},
useDefaultValue: {
id: 'createSiteDialog.useDefaultValue',
defaultMessage: 'use default value'
}
});
function BlueprintReview(props) {
const { classes } = useStyles();
const { onGoTo, inputs, blueprint } = props;
const [passwordFields, setPasswordFields] = useState(null);
const { formatMessage } = useIntl();
useEffect(() => {
if (blueprint.parameters) {
let fields = {};
blueprint.parameters.forEach((parameter) => {
if (parameter.type === 'PASSWORD') {
fields[parameter.name] = false;
}
});
setPasswordFields(fields);
}
}, [blueprint]);
function renderAuth(type) {
if (type === 'basic') {
return formatMessage(messages.userNameAndPassword);
} else if (type === 'token') {
return formatMessage(messages.token);
} else {
return formatMessage(messages.privateKey);
}
}
function showPassword(parameter) {
setPasswordFields({ ...passwordFields, [parameter.name]: !passwordFields[parameter.name] });
}
function renderSingleParameter(parameter) {
if (inputs.blueprintFields[parameter.name] && parameter.type === 'STRING') {
return inputs.blueprintFields[parameter.name];
} else if (parameter.type === 'STRING') {
return parameter.defaultValue;
} else if (inputs.blueprintFields[parameter.name] && parameter.type === 'PASSWORD') {
return React.createElement(
'span',
null,
passwordFields && passwordFields[parameter.name] ? inputs.blueprintFields[parameter.name] : '********',
React.createElement(
IconButton,
{
edge: 'end',
className: classes.showPassword,
'aria-label': 'toggle password visibility',
onClick: () => {
showPassword(parameter);
},
size: 'large'
},
passwordFields && passwordFields[parameter.name]
? React.createElement(VisibilityOff, null)
: React.createElement(Visibility, null)
)
);
} else {
return '********';
}
}
function renderBlueprintParameters() {
return blueprint.parameters.map((parameter, index) => {
return React.createElement(
Typography,
{ variant: 'body2', gutterBottom: true, key: index },
React.createElement('span', { className: classes.bold }, parameter.label, ': '),
renderSingleParameter(parameter)
);
});
}
function renderGitOptions() {
return React.createElement(
'div',
null,
inputs.repoUrl &&
React.createElement(
Typography,
{ variant: 'body2', gutterBottom: true },
React.createElement('span', { className: classes.bold }, formatMessage(messages.remoteURL), ': '),
' ',
inputs.repoUrl
),
React.createElement(
Typography,
{ variant: 'body2', gutterBottom: true },
React.createElement('span', { className: classes.bold }, formatMessage(messages.remoteName), ':'),
` ${inputs.repoRemoteName ? inputs.repoRemoteName : 'origin'}`
),
inputs.repoAuthentication !== 'none' &&
React.createElement(
Typography,
{ variant: 'body2', gutterBottom: true },
React.createElement('span', { className: classes.bold }, formatMessage(messages.authentication), ':'),
' ',
renderAuth(inputs.repoAuthentication)
)
);
}
return React.createElement(
'div',
{ className: classes.review },
React.createElement(
Grid,
{ container: true, spacing: 3 },
React.createElement(
Grid,
{ item: true, xs: 12 },
React.createElement(
Typography,
{ variant: 'h6', gutterBottom: true, className: classes.section },
formatMessage(messages.creationStrategy),
React.createElement(
IconButton,
{ 'aria-label': 'goto', className: classes.edit, onClick: () => onGoTo(0), size: 'large' },
React.createElement(EditIcon, null)
)
),
blueprint.id !== 'GIT'
? React.createElement(
'div',
null,
React.createElement(
Typography,
{ variant: 'body2', gutterBottom: true },
formatMessage(messages.blueprintStrategy)
),
React.createElement(
Typography,
{ variant: 'body2', gutterBottom: true },
React.createElement('span', { className: classes.bold }, formatMessage(messages.blueprint), ': '),
' ',
blueprint && blueprint.name
)
)
: React.createElement(
'div',
null,
React.createElement(
Typography,
{ variant: 'body2', gutterBottom: true },
formatMessage(messages.gitStrategy)
)
)
),
React.createElement(
Grid,
{ item: true, xs: 12 },
React.createElement(
Typography,
{ variant: 'h6', gutterBottom: true, className: classes.section },
formatMessage(messages.siteInfo),
React.createElement(
IconButton,
{ 'aria-label': 'goto', className: classes.edit, onClick: () => onGoTo(1), size: 'large' },
React.createElement(EditIcon, null)
)
),
React.createElement(
Typography,
{ variant: 'body2', gutterBottom: true, noWrap: true },
React.createElement('span', { className: classes.bold }, formatMessage(messages.siteName), ': '),
' ',
inputs.siteName
),
React.createElement(
Typography,
{ variant: 'body2', gutterBottom: true },
React.createElement('span', { className: classes.bold }, formatMessage(messages.siteId), ': '),
' ',
inputs.siteId
),
React.createElement(
Typography,
{ variant: 'body2', gutterBottom: true },
React.createElement('span', { className: classes.bold }, formatMessage(messages.description), ':'),
` `,
inputs.description
? inputs.description
: React.createElement(
'span',
{ className: classes.noDescription },
'(',
formatMessage(messages.noDescription),
')'
)
),
React.createElement(
Typography,
{ variant: 'body2', gutterBottom: true },
React.createElement('span', { className: classes.bold }, formatMessage(messages.gitBranch), ':'),
` ${inputs.gitBranch ? inputs.gitBranch : 'master'}`
),
blueprint.source !== 'GIT' && blueprint.id === 'GIT' && renderGitOptions()
),
blueprint.parameters &&
!!blueprint.parameters.length &&
React.createElement(
Grid,
{ item: true, xs: 12 },
React.createElement(
Typography,
{ variant: 'h6', gutterBottom: true, className: classes.section },
formatMessage(messages.blueprintParameters),
React.createElement(
IconButton,
{ 'aria-label': 'goto', className: classes.edit, onClick: () => onGoTo(1), size: 'large' },
React.createElement(EditIcon, null)
)
),
renderBlueprintParameters()
)
)
);
}
export default BlueprintReview;