feat: front end and back end cidr update changes (#269)

* feat: front end and back end cidr update changes

* fix: removing unnecessary code

* doc: changing dropdown placeholder

* feat: "Add My IP" for CIDR update implemented

* doc: adding comment for future users of component

* fix: cidr was updated to empty list while prov

* feat: changes per code review

* feat: added unit tests

* fix: code cleanup

* feat: avoid swallowing exceptions

* feat: adding validation checks and unit tests cidr

* feat: adding json schema validation and tests

* feat: changes per code review

* feat: added unit tests for envSc authz

* fix: lint fixes

* feat: error message on the UI for no SG - cidr

* feat: adding empty ingress array test

* feat: validating against additional props - cidr

CHANGELOG.md

@@ -2,24 +2,27 @@
 
 All notable changes to this project will be documented in this file.
 
-## [1.4.7] - 2021-01-28
+## [2.0.0] - TBD
 
 ### Added 
-- fix: Fix a bug on the update user API
+- feat: Adding ability to manage CIDR blocks of workspace's configured security group
 
-We recommend to apply this patch as soon as possible
+Note:
+1. This feature has added permissions to the onboard-account template and requires re-onboarding existing member accounts. Please contact your system administrator for the same.
+2. For RStudio instances, please allow 2-5 minutes for CIDR changes to take effect.
+3. For SageMaker instances, currently application admins and workspace owners have ability to access the SageMaker platform directly, irrespective of CIDR inclusion.
 
-## [1.4.6] - 2021-01-15
+## [1.4.7] - 2021-01-28
 
 ### Added 
-- fix: Add tables back to cloudformation and don't authorize API Keys
+- fix: Fix a bug on the update user API
 
 We recommend to apply this patch as soon as possible
 
-## [1.4.5] - 2021-01-14
+## [1.4.6] - 2021-01-15
 
 ### Added 
-- fix: remove API Keys functionality
+- fix: Add tables back to cloudformation and don't authorize API Keys
 
 We recommend to apply this patch as soon as possible
 

addons/addon-base-raas-ui/packages/base-raas-ui/src/helpers/api.js

@@ -270,6 +270,10 @@ function startScEnvironment(id) {
   return httpApiPut(`api/workspaces/service-catalog/${id}/start`);
 }
 
+function updateScEnvironmentCidrs(id, updateRequest) {
+  return httpApiPost(`api/workspaces/service-catalog/${id}/cidr`, { data: updateRequest });
+}
+
 function getScEnvironmentConnections(envId) {
   return httpApiGet(`api/workspaces/service-catalog/${envId}/connections/`);
 }
@@ -344,6 +348,7 @@ export {
   startScEnvironment,
   getScEnvironment,
   getScEnvironmentConnections,
+  updateScEnvironmentCidrs,
   sendSshKey,
   getWindowsRpInfo,
 };

addons/addon-base-raas-ui/packages/base-raas-ui/src/helpers/form.js

@@ -48,6 +48,11 @@ function createForm(fields, pluginsParam, optionsParam) {
   return new MobxReactForm({ fields }, { plugins, options });
 }
 
+function createFormSeparatedFormat(definitions, pluginsParam, optionsParam) {
+  const plugins = pluginsParam || formPlugins;
+  const options = optionsParam || formOptions;
+  return new MobxReactForm(definitions, { plugins, options });
+}
 const createSingleFieldForm = baseFormHelper.createSingleFieldForm;
 
-export { formPlugins, formOptions, createForm, createSingleFieldForm };
+export { formPlugins, formOptions, createForm, createSingleFieldForm, createFormSeparatedFormat };

addons/addon-base-raas-ui/packages/base-raas-ui/src/models/environments-sc/ScEnvironment.js

@@ -150,14 +150,15 @@ const ScEnvironment = types
     connections: types.frozen([]),
     hasConnections: false,
     studyIds: types.frozen([]),
-    cidr: '',
+    cidr: types.frozen([]),
     outputs: types.frozen([]),
   })
   .actions(self => ({
     setScEnvironment(rawEnvironment) {
       // Note: if you have partial data vs full data, you need to replace the applySnapshot() with
       // the appropriate logic
       const raw = { ...rawEnvironment, connections: self.connections || [] };
+      if (_.isString(raw.cidr) && _.isArray(self.cidr)) raw.cidr = self.cidr;
       applySnapshot(self, raw);
     },
     setStatus(status) {

addons/addon-base-raas-ui/packages/base-raas-ui/src/models/environments-sc/ScEnvironmentsStore.js

@@ -10,6 +10,7 @@ import {
   deleteScEnvironment,
   startScEnvironment,
   stopScEnvironment,
+  updateScEnvironmentCidrs,
 } from '../../helpers/api';
 import { ScEnvironment } from './ScEnvironment';
 import { ScEnvironmentStore } from './ScEnvironmentStore';
@@ -58,8 +59,8 @@ const ScEnvironmentsStore = BaseStore.named('ScEnvironmentsStore')
       async doLoad() {
         const environments = await getScEnvironments();
         self.runInAction(() => {
-          consolidateToMap(self.environments, environments, (exiting, newItem) => {
-            exiting.setScEnvironment(newItem);
+          consolidateToMap(self.environments, environments, (existing, newItem) => {
+            existing.setScEnvironment(newItem);
           });
         });
       },
@@ -75,8 +76,14 @@ const ScEnvironmentsStore = BaseStore.named('ScEnvironmentsStore')
         }
       },
 
+      async updateScEnvironmentCidrs(envId, updateRequest) {
+        const result = await updateScEnvironmentCidrs(envId, updateRequest);
+        const env = self.getScEnvironment(envId);
+        env.setScEnvironment(result);
+        return env;
+      },
+
       async createScEnvironment(environment) {
-        // environment = { name, description, projectId, envTypeId, envTypeConfigId, studyIds (optional) }
         const result = await createScEnvironment(environment);
         self.addScEnvironment(result);
         return self.getScEnvironment(result.id);

addons/addon-base-raas-ui/packages/base-raas-ui/src/models/forms/CreateCidrFormModel.js

@@ -0,0 +1,51 @@
+/*
+ *  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License").
+ *  You may not use this file except in compliance with the License.
+ *  A copy of the License is located at
+ *
+ *  http://aws.amazon.com/apache2.0
+ *
+ *  or in the "license" file accompanying this file. This file is distributed
+ *  on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ *  express or implied. See the License for the specific language governing
+ *  permissions and limitations under the License.
+ */
+
+import { createFormSeparatedFormat } from '../../helpers/form';
+
+const createCidrFormModel = ({ existingValues }) => {
+  const fields = ['cidr', 'cidr[].fromPort', 'cidr[].toPort', 'cidr[].protocol', 'cidr[].cidrBlocks'];
+
+  const labels = {
+    'cidr': 'cidr',
+    'cidr[].fromPort': 'From Port',
+    'cidr[].toPort': 'To Port',
+    'cidr[].protocol': 'Protocol',
+    'cidr[].cidrBlocks': 'Allowed CIDR Blocks',
+  };
+
+  const placeholders = {
+    'cidr[].cidrBlocks': 'Enter CIDR ranges here',
+  };
+
+  const extra = {};
+
+  const rules = {
+    'cidr': 'required',
+    'cidr[].fromPort': 'required|integer',
+    'cidr[].toPort': 'required|integer',
+    'cidr[].protocol': 'required',
+    'cidr[].cidrBlocks': 'array',
+  };
+
+  const values = {
+    cidr: existingValues,
+  };
+
+  return createFormSeparatedFormat({ fields, labels, placeholders, extra, rules, values });
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export { createCidrFormModel };

addons/addon-base-raas-ui/packages/base-raas-ui/src/parts/environments-sc/ScEnvironmentCard.js

@@ -63,6 +63,7 @@ class ScEnvironmentCard extends React.Component {
   renderDetailTable(env) {
     const studyCount = _.size(_.get(env, 'studyIds', []));
     const envType = this.envType || {};
+
     const renderRow = (key, value) => (
       <Table.Row>
         <Table.Cell width={5}>{key}</Table.Cell>
@@ -78,7 +79,6 @@ class ScEnvironmentCard extends React.Component {
           {renderRow('Owner', <By uid={env.createdBy} skipPrefix />)}
           {renderRow('Studies', studyCount === 0 ? 'No studies linked to this workspace' : niceNumber(studyCount))}
           {renderRow('Project', _.isEmpty(env.projectId) ? 'N/A' : env.projectId)}
-          {renderRow('Restricted CIDR', _.isEmpty(env.cidr) ? 'N/A' : env.cidr)}
           {renderRow('Workspace Type', envType.name)}
         </Table.Body>
       </Table>

addons/addon-base-raas-ui/packages/base-raas-ui/src/parts/environments-sc/ScEnvironmentDetailPage.js

@@ -165,7 +165,6 @@ class ScEnvironmentDetailPage extends React.Component {
           {renderRow('Owner', <By uid={env.createdBy} skipPrefix />)}
           {renderRow('Studies', studyCount === 0 ? 'No studies linked to this workspace' : studyIds.join(', '))}
           {renderRow('Project', _.isEmpty(env.projectId) ? 'N/A' : env.projectId)}
-          {renderRow('Restricted CIDR', _.isEmpty(env.cidr) ? 'N/A' : env.cidr)}
           {renderRow('Workspace Type', <ScEnvironmentTypeName envTypeId={env.envTypeId} />)}
         </Table.Body>
       </Table>

addons/addon-base-raas-ui/packages/base-raas-ui/src/parts/environments-sc/parts/ScEnvironmentButtons.js

@@ -8,6 +8,7 @@ import { gotoFn } from '@aws-ee/base-ui/dist/helpers/routing';
 import { displayError } from '@aws-ee/base-ui/dist/helpers/notification';
 
 import ScEnvironmentConnections from './ScEnvironmentConnections';
+import ScEnvironmentUpdateCidrs from './ScEnvironmentUpdateCidrs';
 
 // expected props
 // - scEnvironment (via prop)
@@ -21,6 +22,8 @@ class ScEnvironmentButtons extends React.Component {
       this.processing = false;
       // A flag to indicate if the connections button is active
       this.connectionsButtonActive = false;
+      // A flag to indicate if the cidr edit button is active
+      this.editCidrButtonActive = false;
     });
   }
 
@@ -79,12 +82,17 @@ class ScEnvironmentButtons extends React.Component {
     this.connectionsButtonActive = !this.connectionsButtonActive;
   };
 
+  handleCidrEditToggle = () => {
+    this.editCidrButtonActive = !this.editCidrButtonActive;
+  };
+
   render() {
     const env = this.environment;
     const state = env.state;
     const processing = this.processing;
     const showDetailButton = this.props.showDetailButton;
     const connectionsButtonActive = this.connectionsButtonActive;
+    const editCidrButtonActive = this.editCidrButtonActive;
     const canConnect = state.canConnect;
     const canStart = state.canStart && this.canChangeState();
     const canStop = state.canStop && this.canChangeState();
@@ -163,8 +171,22 @@ class ScEnvironmentButtons extends React.Component {
               View Detail
             </Button>
           )}
+          {state.canTerminate && !state.key.includes('FAILED') && (
+            <Button
+              floated="left"
+              basic
+              size="mini"
+              className="mt1 mb1 ml2"
+              toggle
+              active={editCidrButtonActive}
+              onClick={this.handleCidrEditToggle}
+            >
+              Edit CIDRs
+            </Button>
+          )}
         </div>
         {canConnect && connectionsButtonActive && <ScEnvironmentConnections scEnvironment={env} />}
+        {editCidrButtonActive && <ScEnvironmentUpdateCidrs scEnvironment={env} onCancel={this.handleCidrEditToggle} />}
       </>
     );
   }
@@ -176,9 +198,11 @@ decorate(ScEnvironmentButtons, {
   environment: computed,
   processing: observable,
   connectionsButtonActive: observable,
+  editCidrButtonActive: observable,
   handleViewDetail: action,
   handleAction: action,
   handleToggle: action,
+  handleCidrEditToggle: action,
 });
 
 export default inject('scEnvironmentsStore')(withRouter(observer(ScEnvironmentButtons)));