Merge remote-tracking branch 'internal/main'

CHANGELOG.md

@@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file.
 ### Upgrade Notes
 
 - Updated the Power SAP HANA template to have current images for zone
+- When using the Terraform deploy scripts as part of environment setup, workspace GUID values will no longer be wrapped in quotes
 
 ### Features
 
@@ -18,6 +19,7 @@ All notable changes to this project will be documented in this file.
 - CRAIG Power VS Images API endpoints now have more robust logging
 - Users can now use `PLACEHOLDER` as a placeholder certificate value on the VPN Servers page
 - Users can now specify a peer address using the VPN Gateway connection subform
+- Users can now import a Power VS SSH Key from data even when the parent workspace is not imported
 
 ### Fixes
 
@@ -26,6 +28,9 @@ All notable changes to this project will be documented in this file.
 - Fixed an issue causing Power VS Subnet Terraform imported from data to have incorrect references
 - Fixed an issue causing Power VS Subnets to not be able to be created when importing an existing subnet
 - Fixed an issue causing Power VS Volumes created using count to not have the correct attachments in Terraform
+- Fixed an issue causing VPC ACLs and Public Gateways to not update resource group when changing a resource group name
+- Fixed an error causing VPN Gateway page to crash when a gateway has additional prefixes with a deleted subnet
+- Fixed an issue causing invalid Terraform to be generated when COS instance and bucket are unencrypted
 
 ## 1.8.0
 
@@ -167,7 +172,7 @@ All notable changes to this project will be documented in this file.
 ### Features
 
 - Users can now fetch Power VS images and storage pools by using the API endpoint `/api/power/:region/:component` for a Power VS workspace.
-- Users can now use a beta version of a new cloud services page at `/beta/services`
+- Users can now use a beta version of a new cloud services page at `/v2/services`
 - Added Oracle Single Instance template
 - Users can now create policy-based VPN Gateways using the VPN Gateway form
 - Users can now create a Power VS SSH key with the same public key as a VPC SSH key

README.md

@@ -1,6 +1,6 @@
 # Cloud Resource and Infrastructure-as-code Generator (CRAIG)
 
-Cloud Resource and Infrastructure-as-Code Generator (or **CRAIG**) allows users to generate Terraform Deployable Architectures to create a fully customizable environment on IBM Cloud.
+Cloud Resource and Infrastructure-as-Code Generator (or **CRAIG**) allows users to generate and deploy Terraform Architectures to create a fully customizable environment on IBM Cloud.
 
 CRAIG simplifies the process of creating IaC through its GUI, which manages and updates interconnected resources as they are created.
 

client/src/App.js

@@ -69,7 +69,7 @@ class App extends Component {
           <Route path="/resetState" element={<ResetState />} />
           <Route path="/" element={<Craig craigRouter={this.craigRouter} />} />
           <Route
-            path="/beta/:betaPage"
+            path="/v2/:v2Page"
             element={<Craig craigRouter={this.craigRouter} />}
           />
           <Route
@@ -90,7 +90,7 @@ class App extends Component {
             element={<Craig craigRouter={this.craigRouter} />}
           />
           <Route
-            path="/beta"
+            path="/v2"
             element={<Craig craigRouter={this.craigRouter} />}
           />
           <Route path="*" element={<PageNotFound />} />

client/src/Craig.js

@@ -407,7 +407,7 @@ class Craig extends React.Component {
           craig={craig}
           onProjectSave={this.onProjectSave}
           saveAndSendNotification={this.saveAndSendNotification}
-          beta={this.props.params.betaPage}
+          beta={this.props.params.v2Page}
         >
           {this.props.params.doc ? (
             this.props.params.doc === "about" ? (
@@ -420,8 +420,8 @@ class Craig extends React.Component {
               <PageNotFound />
             )
           ) : window.location.pathname === "/projects" ||
-            window.location.pathname === "/beta/projects" ||
-            window.location.pathname === "/beta" ? (
+            window.location.pathname === "/v2/projects" ||
+            window.location.pathname === "/v2" ? (
             <Projects
               current_project={craig.store.project_name}
               projects={this.state.projects}
@@ -435,7 +435,7 @@ class Craig extends React.Component {
               }}
             />
           ) : window.location.pathname === "/" ||
-            window.location.pathname === "/beta/settings" ? (
+            window.location.pathname === "/v2/settings" ? (
             <Home craig={craig} />
           ) : window.location.pathname === "/summary" ? (
             <Summary
@@ -444,19 +444,19 @@ class Craig extends React.Component {
               projects={this.state.projects}
               nav={this.props.craigRouter.nav}
             />
-          ) : window.location.pathname === "/beta/services" ? (
+          ) : window.location.pathname === "/v2/services" ? (
             <CloudServicesPage craig={craig} />
-          ) : window.location.pathname === "/beta/vpc" ? (
+          ) : window.location.pathname === "/v2/vpc" ? (
             <VpcDiagramPage craig={craig} />
-          ) : window.location.pathname === "/beta/vpcDeployments" ? (
+          ) : window.location.pathname === "/v2/vpcDeployments" ? (
             <VpcDeploymentsDiagramPage craig={craig} />
-          ) : window.location.pathname === "/beta/connectivity" ? (
+          ) : window.location.pathname === "/v2/connectivity" ? (
             <VpcConnectivityPage craig={craig} />
-          ) : window.location.pathname === "/beta/power" ? (
+          ) : window.location.pathname === "/v2/power" ? (
             <PowerDiagram craig={craig} />
-          ) : window.location.pathname === "/beta/classic" ? (
+          ) : window.location.pathname === "/v2/classic" ? (
             <ClassicDiagram craig={craig} />
-          ) : window.location.pathname === "/beta/overview" ? (
+          ) : window.location.pathname === "/v2/overview" ? (
             <Overview craig={craig} />
           ) : window.location.pathname === "/form/observability" ? (
             <ObservabilityForm craig={craig} />

client/src/components/forms/DynamicForm.js

@@ -1,7 +1,6 @@
 import React from "react";
 import {
   buildFormFunctions,
-  DynamicToolTipWrapper,
   IcseFormTemplate,
   RenderForm,
 } from "icse-react-assets";
@@ -16,6 +15,7 @@ import {
   PowerInterfaces,
   PerCloudConnections,
   DynamicDatePicker,
+  DynamicToolTipWrapper,
 } from "./dynamic-form";
 import {
   eachKey,

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

@@ -6,7 +6,7 @@ import { contains } from "lazy-z";
 
 export const OptionsButton = (props) => {
   return props.parentProps.formName === "options" &&
-    !contains(window.location.pathname, "/beta") ? (
+    !contains(window.location.pathname, "/v2") ? (
     <Button
       disabled={disableSave("options", props.parentState, props.parentProps)}
       className="marginTop"

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

@@ -39,7 +39,7 @@ export const PowerInterfaces = (props) => {
 PowerInterfaces.propTypes = {
   stateData: PropTypes.shape({}).isRequired,
   componentProps: PropTypes.shape({
-    craig: PropTypes.shape({}).isRequired,
+    craig: PropTypes.shape({}),
   }).isRequired,
   handleInputChange: PropTypes.func.isRequired,
 };

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

@@ -22,6 +22,8 @@ import {
 import PropTypes from "prop-types";
 import { dynamicPasswordInputProps } from "../../../lib/forms/dynamic-form-fields/password-input";
 import { contains, deepEqual, isNullOrEmptyString } from "lazy-z";
+import { RenderForm } from "../utils/ToggleFormComponents";
+import { ToolTipWrapper } from "../utils/ToolTip";
 const tagColors = ["red", "magenta", "purple", "blue", "cyan", "teal", "green"];
 
 const DynamicFormTextInput = (props) => {
@@ -383,6 +385,32 @@ const DynamicDatePicker = (props) => {
   );
 };
 
+const DynamicToolTipWrapper = (props) => {
+  //make sure that either children or innerForm are passed as a prop
+  if (props.children === undefined && props.innerForm === undefined) {
+    throw new Error(
+      "DynamicToolTipWrapper expects either `props.children` or `props.innerForm` when rendering ToolTipWrapper, got neither."
+    );
+  }
+  return props.tooltip ? (
+    <ToolTipWrapper {...props} />
+  ) : props.children ? (
+    props.children
+  ) : (
+    RenderForm(props.innerForm, {})
+  );
+};
+
+DynamicToolTipWrapper.propTypes = {
+  tooltip: PropTypes.shape({
+    content: PropTypes.string,
+    link: PropTypes.string,
+  }),
+  isModal: PropTypes.bool,
+  children: PropTypes.node,
+  innerForm: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+};
+
 export {
   DynamicFormTextInput,
   DynamicFormSelect,
@@ -391,5 +419,6 @@ export {
   DynamicMultiSelect,
   DynamicPublicKey,
   DynamicDatePicker,
+  DynamicToolTipWrapper,
   tagColors,
 };

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

@@ -6,6 +6,7 @@ export {
   DynamicTextArea,
   DynamicPublicKey,
   DynamicDatePicker,
+  DynamicToolTipWrapper,
 } from "./components";
 export { PowerInterfaces } from "./PowerInterfaces";
 export { SubFormOverrideTile } from "./SubFormOverrideTile";

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

@@ -102,15 +102,15 @@ export const CraigEmptyResourceTile = (props) => {
 };
 
 export const NoPowerNetworkTile = () => {
-  let isBetaPage =
-    contains(window.location.pathname, "beta") ||
-    contains(window.location.search, "beta");
+  let isV2Page =
+    contains(window.location.pathname, "/v2") ||
+    contains(window.location.search, "v2");
   return (
     <Tile className="tileBackground displayFlex alignItemsCenter wrap marginTop">
       <CloudAlerting size="24" className="iconMargin" /> Power VS is not
       enabled. Return to the
-      <a className="no-secrets-link" href={isBetaPage ? "/beta/settings" : "/"}>
-        {isBetaPage ? "Settings Page" : "Options Page"}
+      <a className="no-secrets-link" href={isV2Page ? "/v2/settings" : "/"}>
+        {isV2Page ? "Settings Page" : "Options Page"}
       </a>{" "}
       to enable Power VS.
     </Tile>

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

@@ -8,6 +8,7 @@ import {
 import { kebabCase } from "lazy-z";
 import PropTypes from "prop-types";
 import { tabPanelProps } from "../../../lib/components/toggle-form-components";
+import { CarbonCodeMirror } from "carbon-react-code-mirror";
 
 class StatefulTabs extends React.Component {
   constructor(props) {
@@ -30,16 +31,21 @@ class StatefulTabs extends React.Component {
     let props = tabPanelProps(this.state, this.props);
     return (
       <>
+        <div
+          style={{
+            marginBottom: this.props.recursive ? "1rem" : undefined,
+          }}
+        />
         {props.hideHeading ? (
           ""
         ) : (
           <CraigFormHeading
-            icon={this.props.icon}
             name={this.props.name}
             type={this.props.headingType}
             className={this.props.className}
             tooltip={this.props.tooltip}
             h2={this.props.h2}
+            icon={this.props.icon}
             buttons={
               <DynamicRender
                 hide={this.props.hideButtons}
@@ -56,6 +62,11 @@ class StatefulTabs extends React.Component {
             }
           />
         )}
+        <div
+          style={{
+            marginBottom: this.props.recursive ? "0.5rem" : undefined,
+          }}
+        />
         {this.props.hideAbout ? (
           this.props.form
         ) : (
@@ -72,14 +83,23 @@ class StatefulTabs extends React.Component {
               <TabList aria-label="formTabs">
                 <Tab>{this.props.formName || "Create"}</Tab>
                 <Tab>{this.props.formName ? "Documentation" : "About"}</Tab>
+                {this.props.tfTabs ? <Tab>Terraform</Tab> : ""}
               </TabList>
             )}
             {this.props.overrideTabs ? (
               <TabPanels>
                 {this.props.overrideTabs.map((tab, tabIndex) => {
                   return (
                     <TabPanel className="doc" key={`tab-panel-${tabIndex}`}>
-                      {tab.about()}
+                      {this.props.codeMirror ? (
+                        <CarbonCodeMirror
+                          code={
+                            tab.tf === "" ? "# No Terraform Resources" : tab.tf
+                          }
+                        />
+                      ) : (
+                        tab.about()
+                      )}
                     </TabPanel>
                   );
                 })}
@@ -93,13 +113,27 @@ class StatefulTabs extends React.Component {
                       name={this.props.name + " Documentation"}
                       overrideTabs={this.props.nestedDocs}
                       headingType="subHeading"
+                      recursive
                     />
                   ) : this.props.about ? (
                     this.props.about
                   ) : (
                     ""
                   )}
                 </TabPanel>
+                {this.props.tfTabs ? (
+                  <TabPanel className="doc">
+                    <StatefulTabs
+                      name={this.props.name + " Terraform"}
+                      headingType="subHeading"
+                      recursive
+                      codeMirror
+                      overrideTabs={this.props.tfTabs}
+                    />
+                  </TabPanel>
+                ) : (
+                  ""
+                )}
               </TabPanels>
             )}
           </Tabs>

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

@@ -352,7 +352,7 @@ CraigToggleForm.propTypes = {
   onShowToggle: PropTypes.func,
   index: PropTypes.number.isRequired,
   hide: PropTypes.bool.isRequired,
-  submissionFieldName: PropTypes.string.isRequired,
+  submissionFieldName: PropTypes.string,
   forceOpen: PropTypes.func, // can be null
   deleteDisabled: PropTypes.func, // can be null
   disableDeleteMessage: PropTypes.func, // can be null

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

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { PopoverWrapper, DynamicToolTipWrapper } from "icse-react-assets";
+import { PopoverWrapper } from "icse-react-assets";
 import {
   Add,
   Save,
@@ -15,6 +15,7 @@ import {
   statelessWrapperProps,
 } from "../../../lib/components/toggle-form-components";
 import { kebabCase } from "lazy-z";
+import { DynamicToolTipWrapper } from "../dynamic-form/components";
 
 /**
  * generate save icon