From cebedeb9d9b060959c5f8b3f9a673b2394e42484 Mon Sep 17 00:00:00 2001 From: Tim Nguyen <thingut@amazon.com> Date: Mon, 9 Aug 2021 16:58:14 -0400 Subject: [PATCH 1/2] Update onboard account instructions --- .../parts/accounts/AwsAccountUpdateContent.js | 69 ++++++++++++++++--- 1 file changed, 59 insertions(+), 10 deletions(-) diff --git a/addons/addon-base-raas-ui/packages/base-raas-ui/src/parts/accounts/AwsAccountUpdateContent.js b/addons/addon-base-raas-ui/packages/base-raas-ui/src/parts/accounts/AwsAccountUpdateContent.js index 370b55d7cb..760dc69ee8 100644 --- a/addons/addon-base-raas-ui/packages/base-raas-ui/src/parts/accounts/AwsAccountUpdateContent.js +++ b/addons/addon-base-raas-ui/packages/base-raas-ui/src/parts/accounts/AwsAccountUpdateContent.js @@ -23,7 +23,7 @@ import TimeAgo from 'react-timeago'; import YesNo from '@aws-ee/base-ui/dist/parts/helpers/fields/YesNo'; import SelectionButtons from '@aws-ee/base-ui/dist/parts/helpers/fields/SelectionButtons'; import { createLink } from '@aws-ee/base-ui/dist/helpers/routing'; - +import { isAppStreamEnabled } from '../../helpers/settings'; import CopyToClipboard from '../helpers/CopyToClipboard'; import { createForm } from '../../helpers/form'; @@ -52,6 +52,8 @@ class AwsAccountUpdateContent extends React.Component { const account = this.account || {}; this.shouldShowWarning = account.permissionStatus !== 'NEEDS_ONBOARD'; this.warningAcknowledged = false; + this.accessAppStreamAcknowledged = false; + this.startedAppStreamFleetAcknowledged = false; const needsOnboard = account.permissionStatus === 'NEEDS_ONBOARD' || account.permissionStatus === 'PENDING' || @@ -113,7 +115,20 @@ class AwsAccountUpdateContent extends React.Component { this.warningAcknowledged = checked; }; + handleAccessAppStreamAcknowledgment = (e, { checked }) => { + this.accessAppStreamAcknowledged = checked; + }; + + handleStartedAppStreamFleetAcknowledgment = (e, { checked }) => { + this.startedAppStreamFleetAcknowledged = checked; + }; + render() { + let shouldDisableDoneButton = this.shouldShowWarning && !this.warningAcknowledged; + if (isAppStreamEnabled) { + shouldDisableDoneButton = + shouldDisableDoneButton || !this.accessAppStreamAcknowledged || !this.startedAppStreamFleetAcknowledged; + } return ( <Container className="mt3 animated fadeIn"> <div className="mt2 animated fadeIn"> @@ -122,7 +137,13 @@ class AwsAccountUpdateContent extends React.Component { </Header> <div className="mt3 ml3 mr3 animated fadeIn">{this.renderMain()}</div> <div className="mt3"> - <Button floated="right" onClick={this.handleGoBack} color="orange" content="Go Back" /> + <Button + disabled={shouldDisableDoneButton} + floated="right" + onClick={this.handleGoBack} + color="blue" + content="Done" + /> </div> </div> </Container> @@ -214,6 +235,11 @@ class AwsAccountUpdateContent extends React.Component { const { accountId } = account; const { createStackUrl, region } = stackInfo; + let shouldDisableCreateStackButton = shouldShowWarning && !warningAcknowledged; + if (isAppStreamEnabled) { + shouldDisableCreateStackButton = shouldDisableCreateStackButton || !this.accessAppStreamAcknowledged; + } + return ( <div className="animated fadeIn"> <List ordered size={textSize}> @@ -226,7 +252,7 @@ class AwsAccountUpdateContent extends React.Component { </p> </Message> </List.Item> - {process.env.REACT_APP_IS_APP_STREAM_ENABLED === 'true' && this.renderEnableFirstUseAppStreamInstructions()} + {isAppStreamEnabled && this.renderEnableFirstUseAppStreamInstructions()} <List.Item> Click on the <b>Create Stack</b> button, this opens a separate browser tab and takes you to the CloudFormation console where you can review the stack information and provision it. @@ -256,7 +282,7 @@ class AwsAccountUpdateContent extends React.Component { as="a" target="_blank" href={createStackUrl} - disabled={shouldShowWarning && !warningAcknowledged} + disabled={shouldDisableCreateStackButton} rel="noopener noreferrer" color="blue" > @@ -274,12 +300,15 @@ class AwsAccountUpdateContent extends React.Component { </div> </div> </List.Item> - <List.Item> - After creating the CFN stack, SWB will wait for the stack to finish deploying and then onboard your account. - During this time, it is safe to navigate away from this page and/or leave SWB. You can check the status of - your account at any time in the AWS Accounts list page. - </List.Item> - {process.env.REACT_APP_IS_APP_STREAM_ENABLED === 'true' && this.renderStartAppStreamInstructions()} + {isAppStreamEnabled ? ( + this.renderStartAppStreamInstructions() + ) : ( + <List.Item> + After creating the CFN stack, SWB will wait for the stack to finish deploying and then onboard your + account. You can click the "Done" button below to be taken back to the Accounts page while you + wait. + </List.Item> + )} </List> </div> ); @@ -291,6 +320,14 @@ class AwsAccountUpdateContent extends React.Component { If you have not access AppStream from the console yet, you will need to do so. This will enable AppStream for your account. Go to AppStream 2.0 services, and click 'Get Started'. This will take you to a screen asking if you want to try out some templates. At this screen click 'Next' + <div className="mt2 mb2"> + <b> + <Checkbox + label="I have accessed AppStream in the AWS Console" + onClick={this.handleAccessAppStreamAcknowledgment} + /> + </b> + </div> </List.Item> ); } @@ -300,6 +337,14 @@ class AwsAccountUpdateContent extends React.Component { <List.Item> After the Cloudformation Stack has been created, go to AppStream on the AWS console. Go to Fleet and then click on the newly created fleet. Choose Action>Start to start the fleet. + <div className="mt2 mb2"> + <b> + <Checkbox + label="I have started the AppStream fleet" + onClick={this.handleStartedAppStreamFleetAcknowledgment} + /> + </b> + </div> </List.Item> ); } @@ -417,6 +462,10 @@ decorate(AwsAccountUpdateContent, { gotBackToAccountsPage: action, handleClickAcknowledgement: action, warningAcknowledged: observable, + handleAccessAppStreamAcknowledgment: action, + accessAppStreamAcknowledged: observable, + handleStartedAppStreamFleetAcknowledgment: action, + startedAppStreamFleetAcknowledged: observable, }); export default inject('awsAccountsStore')(withRouter(observer(AwsAccountUpdateContent))); From f72da860ebc249a7d98c79e4dbdee258738f2724 Mon Sep 17 00:00:00 2001 From: Tim Nguyen <thingut@amazon.com> Date: Mon, 9 Aug 2021 17:05:42 -0400 Subject: [PATCH 2/2] Trigger notification