feat(HMS-1245): UI AWS permission check #292
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,8 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import React from 'react'; | ||
| import { Form, FormGroup, Popover, Title, Button, FormAlert, Alert } from '@patternfly/react-core'; | ||
| import { HelpIcon } from '@patternfly/react-icons'; | ||
| import { useQuery } from 'react-query'; | ||
|
|
||
| import { AWS_PROVIDER } from '../../../../constants'; | ||
| import { imageProps } from '../../helpers'; | ||
|
|
@@ -11,13 +12,23 @@ import InstanceTypesSelect from '../../../InstanceTypesSelect'; | |
| import RegionsSelect from '../../../RegionsSelect'; | ||
| import { useWizardContext } from '../../../Common/WizardContext'; | ||
| import TemplatesSelect from '../../../TemplateSelect'; | ||
| import { checkPermissions } from '../../../../API'; | ||
|
|
||
| const AccountCustomizationsAWS = ({ setStepValidated, image }) => { | ||
| const [{ chosenSource, chosenRegion, chosenInstanceType }, setWizardContext] = useWizardContext(); | ||
| const { data: missingPermissions } = useQuery( | ||
| [`permissions`, `${chosenRegion}-${chosenSource}`], | ||
| () => checkPermissions(image.provider, chosenSource, chosenRegion), | ||
| { | ||
| select: (perm) => perm.missing_entities, | ||
| enabled: !!chosenRegion && !!chosenSource, | ||
| } | ||
| ); | ||
| const [validations, setValidation] = React.useState({ | ||
| sources: chosenSource ? ((missingPermissions || []).length == 0 ? 'success' : 'warning') : 'default', | ||
| types: chosenInstanceType ? 'success' : 'default', | ||
| amount: 'success', | ||
| region: 'default', | ||
| }); | ||
|
|
||
| const onRegionChange = ({ region, imageID }) => { | ||
|
|
@@ -34,18 +45,52 @@ const AccountCustomizationsAWS = ({ setStepValidated, image }) => { | |
| setStepValidated(!errorExists); | ||
| }, [validations]); | ||
|
|
||
| React.useEffect(() => { | ||
| if ((missingPermissions || []).length != 0) { | ||
avitova marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| if (validations.sources !== 'error') { | ||
| setValidation((prevValidations) => ({ | ||
| ...prevValidations, | ||
| sources: 'warning', | ||
| })); | ||
| } | ||
| if (validations.region !== 'error') { | ||
| setValidation((prevValidations) => ({ | ||
| ...prevValidations, | ||
| region: 'warning', | ||
| })); | ||
| } | ||
avitova marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } else { | ||
| setValidation((prevValidations) => ({ | ||
| ...prevValidations, | ||
| sources: chosenSource ? 'success' : 'default', | ||
| region: 'default', | ||
| })); | ||
| } | ||
| }, [missingPermissions]); | ||
|
|
||
| return ( | ||
| <Form> | ||
| <Title ouiaId="account_custom_title" headingLevel="h1" size="xl"> | ||
| Account and customizations | Amazon | ||
| </Title> | ||
| {(missingPermissions || []).length != 0 && ( | ||
| <FormAlert> | ||
| <Alert isExpandable isInline variant="warning" title={`Launch might fail due to missing permissions.`}> | ||
| <> | ||
| <p> | ||
| Check if <a href="https://console.aws.amazon.com/iam/">policies</a> in your {image.provider} account for the selected region are set | ||
| as{' '} | ||
| <a href="https://github.com/RHEnVision/provisioning-backend/blob/main/docs/configure-amazon-role.md#service-account-policy"> | ||
|
There was a problem hiding this comment. I guess it would be better to link to formal red hat docs, not dev docs There was a problem hiding this comment. I agree. We do not have the list in the RedHat docs, though. 🤔 And it is one more place we'd have to change in case of changed expected policy. We could use this link but that is quite a lot of steps to only access needed permission list. There was a problem hiding this comment. Could we ... in theory... have the permission list extracted to a file in the backend and load it in code here on the build time - or figure out how to load it to documentation on build time? We can also play with it as next step tho. I'd either link Sources directly with "Make sure you're following the steps while creating source", or link the official sources documentation with similar message 🤷 There was a problem hiding this comment. Linking to developer docs is not terrible, just not profesional, but given we are explaining the process quite deeply there I'm mostly worried customers might get confused by all the info there :) There was a problem hiding this comment. I am not sure how we'd want to show the long list here. The link seems like the only sensible option, but I am open if you see a way to show it. We could have one more expandable section with the required permissions if that makes sense. There was a problem hiding this comment. I was thinking of Popup, but I agree it's not great, let's just link the official doc, for now. Or split up the developer docs to User and Maintainer oriented docs 🤔 but honestly I think the best way is to link the official docs and as follow-up figure out how to pull the information there directly from our repo There was a problem hiding this comment. Do you suggest we hardcode the list of permissions to the official docs for now? Yeah, we could do that, and add it to the [https://github.com/RHEnVision/provisioning-backend/blob/main/CONTRIBUTING.md#basic-guidelines-for-code-contributions](list of places to change).
And we can try to eliminate some of these. 🤔 There was a problem hiding this comment. I'm suggesting to split the IAM policy: RHEnVision/provisioning-backend#682 and then include it on build time here. But I'm more then happy to leave it to a follow-up :) There was a problem hiding this comment. Contributing guide is perfect first step for sure :) |
||
| our documentation | ||
| </a>{' '} | ||
| recommends. Following permissions might be missing: | ||
| </p> | ||
| <p>{(missingPermissions || []).join(', ')}</p> | ||
| </> | ||
| </Alert> | ||
| </FormAlert> | ||
| )} | ||
| <FormGroup label="Select account" validated="warning" helperTextInvalid="Please pick a value" isRequired fieldId="aws-select-source"> | ||
| <SourcesSelect | ||
| image={image} | ||
| setValidation={(validation) => | ||
|
|
@@ -54,6 +99,7 @@ const AccountCustomizationsAWS = ({ setStepValidated, image }) => { | |
| sources: validation, | ||
| })) | ||
| } | ||
| validated={validations.sources} | ||
| /> | ||
| </FormGroup> | ||
| <FormGroup | ||
|
|
@@ -76,7 +122,13 @@ const AccountCustomizationsAWS = ({ setStepValidated, image }) => { | |
| </Popover> | ||
| } | ||
| > | ||
| <RegionsSelect | ||
| provider={AWS_PROVIDER} | ||
| onChange={onRegionChange} | ||
| composeID={image.id} | ||
| currentRegion={chosenRegion} | ||
| validated={validations.region} | ||
| /> | ||
| </FormGroup> | ||
| <FormGroup | ||
| label="Select instance type" | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Keep in mind that the
defaultvalidation means that the field is just set and is not validated yet. we use this validations state for the entire form validation, if one field is marked asdefaultorerrorthe form is not validated, and the Next button will be disabled.