Merge remote-tracking branch 'internal/main'

CHANGELOG.md

@@ -10,11 +10,15 @@ All notable changes to this project will be documented in this file.
 ### Features
 
 - Users can now use the `Trial` plan for secrets manager
+- Users can now disable the VPN Server to Secrets Manager Authorization policy from the Options form
+- Users can now add existing Subnets to VPCs from a data source
+- Users can now provide project names that use only uppercase letters (ex: `ACRONYM`)
 
 ### Fixes
 
 - Fixed an issue causing the VPN Server page to crash when opening the creation modal
 - Fixed an issue causing Secrets Manager data sources to always be invalid on validation
+- Various visual bug fixes
 
 ## 1.12.0
 

client/src/app.scss

@@ -1276,11 +1276,11 @@ div .sgFormTopMargin {
 }
 
 .marginBottomNone {
-  margin-bottom: 0rem;
+  margin-bottom: 0rem !important;
 }
 
 .marginTop1Rem {
-  margin-top: 1rem;
+  margin-top: 1rem !important;
 }
 
 .marginLeftHalfRem {
@@ -1328,6 +1328,10 @@ div .sgFormTopMargin {
   width: 33%;
 }
 
+.minWidth6Rem {
+  min-width: 6rem;
+}
+
 .powerSubnetBox {
   margin-top: 1rem;
   border: 2px solid #00882b;

client/src/components/forms/DynamicForm.js

@@ -434,9 +434,12 @@ class DynamicForm extends React.Component {
                     type: this.props.isMiddleForm ? "subForm" : "formInSubForm",
                     noDeleteButton: subForm.noDeleteButton,
                     // add classname to middle form children for consistent spacing
-                    wrapperClassName: this.props.isMiddleForm
-                      ? "marginBottomSmall"
-                      : "",
+                    // and between title headings for sub forms
+                    wrapperClassName:
+                      this.props.isMiddleForm ||
+                      subFormIndex + 1 < this.props.form.subForms.length
+                        ? "marginBottomSmall"
+                        : "",
                     // here for testing
                     // hide: false,
                   }}

client/src/components/forms/dynamic-form/PowerInterfaces.js

@@ -7,12 +7,17 @@ import { CraigFormGroup } from "../utils";
 
 export const PowerInterfaces = (props) => {
   return contains(["Power Instances", "VTL"], props.componentProps.formName) ? (
-    <div className="formInSubForm">
+    <div className="formInSubForm marginTop1Rem">
       {props.stateData.network.map((nw, index) => {
         return (
           <CraigFormGroup
             key={nw.name + "-group"}
-            className="alignItemsCenter marginBottomSmall"
+            className={
+              "alignItemsCenter " +
+              (index + 1 === props.stateData.network.length
+                ? "marginBottomNone"
+                : "")
+            }
           >
             <Network_3 className="powerIpMargin" />
             <div className="powerIpMargin fieldWidth">

client/src/components/forms/dynamic-form/SubnetTileSubForm.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { disableSave, propsMatchState } from "../../../lib";
 import { Tile } from "@carbon/react";
-import { CraigFormHeading, PrimaryButton } from "../utils";
+import { CraigFormHeading, PrimaryButton, SecondaryButton } from "../utils";
 import { getSubnetData } from "../../../lib/forms/dynamic-subnet-tile-sub-form";
 import DynamicForm from "../DynamicForm";
 
@@ -14,20 +14,35 @@ export const SubnetTileTitle = (props) => {
         props.parentProps.isModal ? (
           ""
         ) : (
-          <PrimaryButton
-            noDeleteButton
-            name={props.parentProps.data.name || "New Subnet"}
-            disabled={
-              disableSave("subnet", props.parentState, props.parentProps) ||
-              propsMatchState("subnet", props.parentState, props.parentProps)
-            }
-            onClick={() => {
-              props.parentProps.craig.vpcs.subnets.save(
-                props.parentState,
-                props.parentProps
-              );
-            }}
-          />
+          <>
+            <PrimaryButton
+              noDeleteButton={props.parentProps.importedSubnet !== true}
+              name={props.parentProps.data.name || "New Subnet"}
+              disabled={
+                disableSave("subnet", props.parentState, props.parentProps) ||
+                propsMatchState("subnet", props.parentState, props.parentProps)
+              }
+              onClick={() => {
+                props.parentProps.craig.vpcs.subnets.save(
+                  props.parentState,
+                  props.parentProps
+                );
+              }}
+            />
+            {props.parentProps.importedSubnet ? (
+              <SecondaryButton
+                name={props.parentProps.data.name}
+                onClick={() => {
+                  props.parentProps.craig.vpcs.subnets.delete(
+                    props.parentState,
+                    props.parentProps
+                  );
+                }}
+              />
+            ) : (
+              ""
+            )}
+          </>
         )
       }
     />
@@ -50,7 +65,7 @@ export const SubnetTileSubForm = (props) => {
           : props.parentProps.isModal
           ? "subForm"
           : "formInSubForm"
-      } marginTop1Rem ${props.parentProps.isModal ? "marginBottomNone" : ""}`}
+      } marginTop1Rem marginBottomNone`}
     >
       <CraigFormHeading name="Subnets" type="subHeading" noMarginBottom />
       <div className="displayFlex">

client/src/components/forms/dynamic-form/tiles.js

@@ -1,6 +1,7 @@
 import { Add, CloudAlerting } from "@carbon/icons-react";
 import { Tile } from "@carbon/react";
 import { contains } from "lazy-z";
+import { RenderForm } from "../utils";
 
 export const ClassicDisabledTile = (isSubComponent) => {
   return (
@@ -91,7 +92,10 @@ export const CraigEmptyResourceTile = (props) => {
       ) : (
         <>
           Click
-          <Add size="24" className="inlineIconMargin" />
+          {RenderForm(props.customIcon ? props.customIcon : Add, {
+            size: "24",
+            className: "inlineIconMargin",
+          })}
           button to add one.
         </>
       )}

client/src/components/forms/utils/ToggleForm.js

@@ -354,7 +354,10 @@ class CraigToggleForm extends React.Component {
                         </span>
                         <br />
                         <br />
-                        <span className="bold">This cannot be undone</span>
+                        <span className="bold">
+                          This will disable CRAIG managed subnets. This cannot
+                          be undone
+                        </span>
                       </>
                     }
                     onModalClose={this.dismissImportConfirmationChanges}

client/src/components/pages/FormPages.js

@@ -5,7 +5,7 @@ import { arraySplatIndex, contains, transpose } from "lazy-z";
 import { disableSshKeyDelete } from "../../lib/forms";
 import { CopyRuleForm } from "../forms";
 import { Tile } from "@carbon/react";
-import { CloudAlerting } from "@carbon/icons-react";
+import { CloudAlerting, FetchUploadCloud } from "@carbon/icons-react";
 import powerStoragePoolRegionMap from "../../lib/docs/power-storage-pool-map.json";
 import DynamicForm from "../forms/DynamicForm";
 import {
@@ -21,6 +21,7 @@ import {
   DynamicFormModal,
   RenderForm,
   StatefulTabs,
+  StatelessFormWrapper,
 } from "../forms/utils";
 import { craigForms } from "./CraigForms";
 import { DynamicAclForm } from "./vpc/DynamicAclForm";
@@ -949,9 +950,11 @@ const SubnetsPage = (craig) => {
       this.state = {
         shownForms: [],
         showModal: false,
+        showSubnetModal: false,
       };
       this.onModalSubmit = this.onModalSubmit.bind(this);
       this.onShowToggle = this.onShowToggle.bind(this);
+      this.onImportModalSubmit = this.onImportModalSubmit.bind(this);
     }
 
     onModalSubmit(data) {
@@ -961,6 +964,13 @@ const SubnetsPage = (craig) => {
       this.setState({ showModal: false });
     }
 
+    onImportModalSubmit(data) {
+      this.props.craig.vpcs.subnets.create(data, {
+        name: this.props.data.name,
+      });
+      this.setState({ showSubnetModal: false });
+    }
+
     onShowToggle(index) {
       let forms = [...this.state.shownForms];
       if (!contains(this.state.shownForms, index)) {
@@ -978,6 +988,46 @@ const SubnetsPage = (craig) => {
       let craig = this.props.craig;
       return (
         <>
+          {this.state.showSubnetModal ? (
+            <DynamicFormModal
+              name={`Import a Subnet in ${this.props.data.name} VPC`}
+              show
+              beginDisabled
+              submissionFieldName="subnets"
+              onRequestSubmit={this.onImportModalSubmit}
+              onRequestClose={() => {
+                this.setState({ showSubnetModal: false });
+              }}
+            >
+              {RenderForm(DynamicForm, {
+                craig: craig,
+                vpc_name: this.props.data.name,
+                shouldDisableSubmit: function () {
+                  // see abovec
+                  this.props.setRefUpstream(this.state);
+                  if (disableSave("subnet", this.state, this.props) === false) {
+                    this.props.enableModal();
+                  } else {
+                    this.props.disableModal();
+                  }
+                },
+                data: {
+                  use_data: true,
+                  name: "",
+                  has_prefix: false,
+                },
+                form: {
+                  groups: [
+                    {
+                      name: craig.vpcs.subnets.name,
+                    },
+                  ],
+                },
+              })}
+            </DynamicFormModal>
+          ) : (
+            ""
+          )}
           {this.state.showModal ? (
             <DynamicFormModal
               name={`Create a Subnet Tier in ${this.props.data.name} VPC`}
@@ -1019,7 +1069,7 @@ const SubnetsPage = (craig) => {
           ) : (
             ""
           )}
-          {this.props.data.acls.length === 0 ? (
+          {this.props.data.acls.length === 0 && !this.props.data.use_data ? (
             <CraigEmptyResourceTile
               name="Network ACLs"
               customClick={
@@ -1034,13 +1084,31 @@ const SubnetsPage = (craig) => {
               type="subHeading"
               className={tiers.length === 0 ? "" : "marginBottomSmall"}
               buttons={
-                <PrimaryButton
-                  type="add"
-                  noDeleteButton
-                  onClick={() => {
-                    this.setState({ showModal: true });
-                  }}
-                />
+                <>
+                  {this.props.data.acls.length === 0 ? (
+                    ""
+                  ) : (
+                    <PrimaryButton
+                      type="add"
+                      noDeleteButton={this.props.data.use_data !== true}
+                      onClick={() => {
+                        this.setState({ showModal: true });
+                      }}
+                      hoverText="Create a Subnet Tier"
+                    />
+                  )}
+                  {this.props.data.use_data && (
+                    <PrimaryButton
+                      type="custom"
+                      customIcon={FetchUploadCloud}
+                      noDeleteButton
+                      hoverText="Import Existing Subnet"
+                      onClick={() => {
+                        this.setState({ showSubnetModal: true });
+                      }}
+                    />
+                  )}
+                </>
               }
             />
           )}
@@ -1059,8 +1127,70 @@ const SubnetsPage = (craig) => {
               formInSubForm
               onShowToggle={this.onShowToggle}
               hide={!contains(this.state.shownForms, tierIndex)}
+              isLast={tierIndex + 1 === tiers.length}
             />
           ))}
+          {this.props.data.use_data ? (
+            <div className="marginTop1Rem">
+              <StatelessFormWrapper
+                onIconClick={() => {
+                  this.onShowToggle(tiers.length);
+                }}
+                hide={!contains(this.state.shownForms, tiers.length)}
+                className="formInSubForm"
+                name="Imported Subnets"
+              >
+                <div
+                  className="formInSubForm displayFlex"
+                  style={{ marginTop: "-2rem" }}
+                >
+                  {this.props.data.subnets.filter((subnet) => {
+                    if (subnet.use_data) return subnet;
+                  }).length === 0 ? (
+                    <CraigEmptyResourceTile
+                      name="Imported Subnets"
+                      customIcon={FetchUploadCloud}
+                      className="widthOneHundredPercent"
+                    />
+                  ) : (
+                    this.props.data.subnets
+                      .filter((subnet) => {
+                        if (subnet.use_data) return subnet;
+                      })
+                      .map((subnet) => {
+                        return (
+                          <Tile
+                            key={subnet.name}
+                            className="marginRightSubnetTile marginBottomNone subForm"
+                            style={{
+                              width: "50%",
+                            }}
+                          >
+                            <DynamicForm
+                              importedSubnet
+                              vpc_name={this.props.data.name}
+                              formName="subnet"
+                              data={subnet}
+                              craig={craig}
+                              form={{
+                                groups: [
+                                  {
+                                    name: craig.vpcs.subnets.name,
+                                  },
+                                ],
+                              }}
+                              name={this.props.data.name}
+                            />
+                          </Tile>
+                        );
+                      })
+                  )}
+                </div>
+              </StatelessFormWrapper>
+            </div>
+          ) : (
+            ""
+          )}
         </>
       );
     }