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

feat: custom env linking text #828

Closed
wants to merge 4 commits into from
Closed

feat: custom env linking text #828

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ce0c395
adding a way to define custom env linking prerequisites
zsaltys Oct 24, 2023
c0f54f9
fixing merge conflict
zsaltys Dec 18, 2023
137aada
adding support for dompurify to sanitize html
zsaltys Dec 18, 2023
7eb0d00
updating package-lock.json because npm ci is failing
zsaltys Dec 18, 2023
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
334 changes: 178 additions & 156 deletions frontend/src/modules/Environments/views/EnvironmentCreateForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ import {
getCDKExecPolicyPresignedUrl
} from '../services';
import { AwsRegions } from 'utils';
import config from '../../../generated/config.json';

const EnvironmentCreateForm = (props) => {
const dispatch = useDispatch();
Expand Down Expand Up @@ -298,171 +299,192 @@ const EnvironmentCreateForm = (props) => {
<CardHeader title="Prerequisite Steps" />
<Divider />
<CardContent>
<Box>
<Typography color="textSecondary" variant="subtitle2">
1. (OPTIONAL) As part of setting up your AWS Environment with
CDK you need to specify a IAM Policy that gives permission for
CDK to create AWS Resources via CloudFormation (i.e. CDK
Execution Policy). You optionally can use the below
CloudFormation template to create the custom IAM policy that
is more restrictive than the default{' '}
<b>AdministratorAccess</b> policy.
</Typography>
<Button
color="primary"
startIcon={<CloudDownloadOutlined fontSize="small" />}
sx={{ mt: 1, mb: 2, ml: 2 }}
variant="outlined"
onClick={() => {
getCDKExecPolicyUrl().catch((e) =>
dispatch({ type: SET_ERROR, error: e.message })
);
}}
>
CloudFormation stack for CDK custom execution policy
</Button>
</Box>
<Box>
<Typography color="textSecondary" variant="subtitle2">
2. Bootstrap your AWS account with AWS CDK
</Typography>
<Grid
container
rowSpacing={1}
columnSpacing={{ xs: 1, sm: 2, md: 3 }}
>
<Grid item xs={6}>
<Card>
<CardContent>
<Typography
sx={{ fontSize: 14 }}
color="text.secondary"
gutterBottom
>
If Using Default CDK Execution Policy:
</Typography>
<Typography color="textPrimary" variant="subtitle2">
<CopyToClipboard
onCopy={() => copyNotification()}
text={`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::aws:policy/AdministratorAccess aws://ACCOUNT_ID/REGION`}
>
<IconButton>
<CopyAllOutlined
sx={{
color:
theme.palette.mode === 'dark'
? theme.palette.primary.contrastText
: theme.palette.primary.main
}}
/>
</IconButton>
</CopyToClipboard>
{`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::aws:policy/AdministratorAccess aws://ACCOUNT_ID/REGION`}
</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={6}>
<Card>
<CardContent>
<Typography
sx={{ fontSize: 14 }}
color="text.secondary"
gutterBottom
>
If Using Custom CDK Execution Policy (From Step 1):
</Typography>
<Typography color="textPrimary" variant="subtitle2">
<CopyToClipboard
onCopy={() => copyNotification()}
text={`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::ACCOUNT_ID:policy/DataAllCustomCDKPolicy aws://ACCOUNT_ID/REGION`}
>
<IconButton>
<CopyAllOutlined
sx={{
color:
theme.palette.mode === 'dark'
? theme.palette.primary.contrastText
: theme.palette.primary.main
}}
/>
</IconButton>
</CopyToClipboard>
{`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::ACCOUNT_ID:policy/DataAllCustomCDKPolicy aws://ACCOUNT_ID/REGION`}
</Typography>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
{process.env.REACT_APP_ENABLE_PIVOT_ROLE_AUTO_CREATE ===
'True' ? (
{config.core.custom_env_linking_text !== undefined ? (
zsaltys marked this conversation as resolved.
Show resolved Hide resolved
<Box>
<Typography color="textSecondary" variant="subtitle2">
3. As part of the environment CloudFormation stack data.all
will create an IAM role (Pivot Role) to manage AWS
operations in the environment AWS Account.
</Typography>
<Typography
color="textSecondary"
variant="subtitle2"
dangerouslySetInnerHTML={{
zsaltys marked this conversation as resolved.
Show resolved Hide resolved
__html: config.core.custom_env_linking_text
}}
/>
</Box>
) : (
<Box>
<>
<Box>
<Typography color="textSecondary" variant="subtitle2">
3. Create an IAM role named <b>{pivotRoleName}</b> using
the AWS CloudFormation stack below
1. (OPTIONAL) As part of setting up your AWS Environment
with CDK you need to specify a IAM Policy that gives
permission for CDK to create AWS Resources via
CloudFormation (i.e. CDK Execution Policy). You optionally
can use the below CloudFormation template to create the
custom IAM policy that is more restrictive than the
default <b>AdministratorAccess</b> policy.
</Typography>
<Button
color="primary"
startIcon={<CloudDownloadOutlined fontSize="small" />}
sx={{ mt: 1, mb: 2, ml: 2 }}
variant="outlined"
onClick={() => {
getCDKExecPolicyUrl().catch((e) =>
dispatch({ type: SET_ERROR, error: e.message })
);
}}
>
CloudFormation stack for CDK custom execution policy
</Button>
</Box>
<Grid container justifyContent="space-between" spacing={3}>
<Grid item lg={6} xl={6} xs={6}>
<Button
color="primary"
startIcon={<CloudDownloadOutlined fontSize="small" />}
sx={{ mt: 1, mb: 2, ml: 2 }}
variant="outlined"
onClick={() => {
getPivotRoleUrl().catch((e) =>
dispatch({ type: SET_ERROR, error: e.message })
);
}}
>
CloudFormation stack
</Button>
<Button
color="primary"
startIcon={<CopyAllOutlined fontSize="small" />}
sx={{ mt: 1, mb: 2, ml: 2 }}
variant="outlined"
onClick={() => {
copyPivotRoleName().catch((e) =>
dispatch({ type: SET_ERROR, error: e.message })
);
}}
>
Pivot role name
</Button>
<Button
color="primary"
startIcon={<CopyAllOutlined fontSize="small" />}
sx={{ mt: 1, mb: 2, ml: 2 }}
variant="outlined"
onClick={() => {
getExternalId().catch((e) =>
dispatch({ type: SET_ERROR, error: e.message })
);
}}
>
External Id
</Button>
<Box>
<Typography color="textSecondary" variant="subtitle2">
2. Bootstrap your AWS account with AWS CDK
</Typography>
<Grid
container
rowSpacing={1}
columnSpacing={{ xs: 1, sm: 2, md: 3 }}
>
<Grid item xs={6}>
<Card>
<CardContent>
<Typography
sx={{ fontSize: 14 }}
color="text.secondary"
gutterBottom
>
If Using Default CDK Execution Policy:
</Typography>
<Typography color="textPrimary" variant="subtitle2">
<CopyToClipboard
onCopy={() => copyNotification()}
text={`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::aws:policy/AdministratorAccess aws://ACCOUNT_ID/REGION`}
>
<IconButton>
<CopyAllOutlined
sx={{
color:
theme.palette.mode === 'dark'
? theme.palette.primary.contrastText
: theme.palette.primary.main
}}
/>
</IconButton>
</CopyToClipboard>
{`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::aws:policy/AdministratorAccess aws://ACCOUNT_ID/REGION`}
</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={6}>
<Card>
<CardContent>
<Typography
sx={{ fontSize: 14 }}
color="text.secondary"
gutterBottom
>
If Using Custom CDK Execution Policy (From Step
1):
</Typography>
<Typography color="textPrimary" variant="subtitle2">
<CopyToClipboard
onCopy={() => copyNotification()}
text={`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::ACCOUNT_ID:policy/DataAllCustomCDKPolicy aws://ACCOUNT_ID/REGION`}
>
<IconButton>
<CopyAllOutlined
sx={{
color:
theme.palette.mode === 'dark'
? theme.palette.primary.contrastText
: theme.palette.primary.main
}}
/>
</IconButton>
</CopyToClipboard>
{`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::ACCOUNT_ID:policy/DataAllCustomCDKPolicy aws://ACCOUNT_ID/REGION`}
</Typography>
</CardContent>
</Card>
</Grid>
</Grid>
</Grid>
</Box>
</Box>
{process.env.REACT_APP_ENABLE_PIVOT_ROLE_AUTO_CREATE ===
'True' ? (
<Box>
<Typography color="textSecondary" variant="subtitle2">
3. As part of the environment CloudFormation stack
data.all will create an IAM role (Pivot Role) to manage
AWS operations in the environment AWS Account.
</Typography>
</Box>
) : (
<Box>
<Box>
<Typography color="textSecondary" variant="subtitle2">
3. Create an IAM role named <b>{pivotRoleName}</b>{' '}
using the AWS CloudFormation stack below
</Typography>
</Box>
<Grid
container
justifyContent="space-between"
spacing={3}
>
<Grid item lg={6} xl={6} xs={6}>
<Button
color="primary"
startIcon={
<CloudDownloadOutlined fontSize="small" />
}
sx={{ mt: 1, mb: 2, ml: 2 }}
variant="outlined"
onClick={() => {
getPivotRoleUrl().catch((e) =>
dispatch({ type: SET_ERROR, error: e.message })
);
}}
>
CloudFormation stack
</Button>
<Button
color="primary"
startIcon={<CopyAllOutlined fontSize="small" />}
sx={{ mt: 1, mb: 2, ml: 2 }}
variant="outlined"
onClick={() => {
copyPivotRoleName().catch((e) =>
dispatch({ type: SET_ERROR, error: e.message })
);
}}
>
Pivot role name
</Button>
<Button
color="primary"
startIcon={<CopyAllOutlined fontSize="small" />}
sx={{ mt: 1, mb: 2, ml: 2 }}
variant="outlined"
onClick={() => {
getExternalId().catch((e) =>
dispatch({ type: SET_ERROR, error: e.message })
);
}}
>
External Id
</Button>
</Grid>
</Grid>
</Box>
)}
<Box>
<Typography color="textSecondary" variant="subtitle2">
Make sure that the services needed for the selected
environment features are available in your AWS Account.
</Typography>
</Box>
</>
)}
<Box>
<Typography color="textSecondary" variant="subtitle2">
Make sure that the services needed for the selected
environment features are available in your AWS Account.
</Typography>
</Box>
</CardContent>
</Card>
<Box sx={{ mt: 3 }}>
Expand Down