feat(ui): Add info about choosing a network subnet for DLE deployment (https://gitlab.com/postgres-ai/platform/-/issues/244)

Author: Adrinlol

ui/packages/platform/src/components/DbLabInstanceForm/DbLabFormSteps/AnsibleInstance.tsx

@@ -11,6 +11,7 @@ import { getCloudImages } from 'api/cloud/getCloudImages'
 
 import {
   getGcpAccountContents,
+  getNetworkSubnet,
   getPlaybookCommandWithoutDocker,
 } from 'components/DbLabInstanceForm/utils'
 import {
@@ -53,6 +54,12 @@ export const formStyles = makeStyles({
     fontWeight: 600,
     margin: 0,
   },
+  containerMargin: {
+    margin: '20px 0',
+  },
+  smallMarginTop: {
+    marginBottom: '10px',
+  }
 })
 
 export const InstanceDocumentation = ({
@@ -232,6 +239,7 @@ export const AnsibleInstance = ({
               orgKey,
             )}
           />
+          {getNetworkSubnet(state.provider, classes)}
           <p className={classes.title}>
             7. After the code snippet runs successfully, follow the directions
             displayed in the resulting output to start using DLE AUI/API/CLI.

ui/packages/platform/src/components/DbLabInstanceForm/DbLabFormSteps/DockerInstance.tsx

@@ -10,6 +10,7 @@ import { getOrgKeys } from 'api/cloud/getOrgKeys'
 import { getCloudImages } from 'api/cloud/getCloudImages'
 
 import {
+  getNetworkSubnet,
   getGcpAccountContents,
   getPlaybookCommand,
 } from 'components/DbLabInstanceForm/utils'
@@ -143,6 +144,7 @@ export const DockerInstance = ({
           <SyntaxHighlight
             content={getPlaybookCommand(state, cloudImages[0], orgKey)}
           />
+          {getNetworkSubnet(state.provider, classes)}
           <p className={classes.title}>
             4. After the code snippet runs successfully, follow the directions
             displayed in the resulting output to start using DLE UI/API/CLI.