GoogleCloudPlatform · acolver · Sep 29, 2023 · Sep 15, 2023 · Sep 20, 2023 · Sep 22, 2023
@@ -18,7 +18,7 @@
   "dependencies": {
     "@google-cloud/iam-credentials": "^2.0.0",
     "@google-cloud/pubsub": "^3.0.1",
-    "@google-cloud/secret-manager": "^4.1.3",
+    "@google-cloud/secret-manager": "^4.2.2",
     "@google-cloud/storage": "^6.2.3",
     "@headlessui/react": "^1.4.3",
     "@heroicons/react": "^1.0.5",
@@ -28,13 +28,15 @@
     "firebase": "^9.6.5",
     "firebase-admin": "^11.0.1",
     "formik": "^2.2.9",
+    "handlebars": "^4.7.8",
     "hcl2-parser": "^1.0.3",
     "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
     "next": "^12.0.8",
     "next-i18next": "^10.2.0",
     "next-seo": "^4.29.0",
     "next-swagger-doc": "^0.3.4",
+    "nodemailer": "^6.9.5",
     "nookies": "^2.5.2",
     "ramda": "^0.28.0",
     "react": "^17.0.2",
@@ -57,6 +59,7 @@
     "@types/lodash.debounce": "^4.0.6",
     "@types/lunr": "^2.3.4",
     "@types/node": "^17.0.45",
+    "@types/nodemailer": "^6.4.10",
     "@types/ramda": "^0.28.11",
     "@types/react": "^17.0.38",
     "@types/uuid": "^8.3.4",

@@ -0,0 +1,23 @@
+<html>
+  <head>
+    <style></style>
+  </head>
+  <body>
+    <h3>Hello!</h3>
+    <p>
+      RAD Lab Module with deployment ID -
+      <a href="{{{deployment_link}}}" style="border: 0" target="_blank">
+        {{deploymentId}}</a
+      >
+      has been successfully deleted!
+    </p>
+
+    <br />
+    <p>Thank you<br /></p>
+    <img
+      style="width: 8rem; height: 2rem"
+      src="https://github.com/GPS-Demos/rad-lab/blob/main/radlab-ui/webapp/public/assets/images/logo.png?raw=true"
+    />
+    <p>P.S:- This is an auto generated email. Please do not reply!</p>
+  </body>
+</html>
@@ -0,0 +1,60 @@
+<html>
+  <head>
+    <style>
+      table {
+        font-family: arial, sans-serif;
+        border-collapse: collapse;
+        width: 40%;
+      }
+
+      td,
+      th {
+        border: 1px solid #dddddd;
+        text-align: left;
+        padding: 8px;
+      }
+    </style>
+  </head>
+  <body>
+    <h3>Hello!</h3>
+    <p>{{mailBodyTitle}}</p>
+    <p>Please use below details to access the same.</p>
+
+    <table id="myTable">
+      <tr>
+        <th>Name</th>
+        <th>value</th>
+      </tr>
+      <tr>
+        <td>Project Id</td>
+        <td>
+          <a href="{{{gcp_project_link}}}" style="border: 0" target="_blank"
+            >{{projectId}}</a
+          >
+        </td>
+      </tr>
+      <tr>
+        <td>Deployment Id</td>
+        <td>
+          <a href="{{{deployment_link}}}" style="border: 0" target="_blank"
+            >{{deploymentId}}</a
+          >
+        </td>
+      </tr>
+      {{#outputs}}
+      <tr>
+        <td>{{name}}</td>
+        <td>{{value}}</td>
+      </tr>
+      {{/outputs}}
+    </table>
+
+    <br />
+    <p>Thank you<br /></p>
+    <img
+      style="width: 8rem; height: 2rem"
+      src="https://github.com/GPS-Demos/rad-lab/blob/main/radlab-ui/webapp/public/assets/images/logo.png?raw=true"
+    />
+    <p>P.S:- This is an auto generated email. Please do not reply!</p>
+  </body>
+</html>
@@ -6,11 +6,13 @@ import {
   ALERT_TYPE,
   Dictionary,
   IFormData,
+  ISecretManagerReq,
   IUIVariable,
   IVariables,
 } from "@/utils/types"
 import { mergeAllSafe } from "@/utils/variables"
 import axios from "axios"
+import { FormikValues } from "formik"
 import { useTranslation } from "next-i18next"
 import React, { useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
@@ -34,9 +36,20 @@ const DefaultCreateForm: React.FC<IDefaultCreateFormProps> = ({
   const setAlert = alertStore((state) => state.setAlert)
   const user = userStore((state) => state.user)
   const navigate = useNavigate()
+  const [answerValueData, setAnswerValueData] = useState<FormikValues>({})
 
   const handleSubmit = async (values: IFormData) => {
     handleLoading(true)
+
+    if (values.email_notifications) {
+      const secretManagerPayload: ISecretManagerReq = {
+        key: "mailBoxCred",
+        value: values.mail_box_password,
+      }
+      await saveMailBoxCred(secretManagerPayload)
+    }
+
+    delete values.mail_box_password
     const payload = Object.assign(values, {
       email: user?.email,
     })
@@ -75,14 +88,55 @@ const DefaultCreateForm: React.FC<IDefaultCreateFormProps> = ({
     return mergeAllSafe([initialFormData, defaultSettingVariables])
   }
 
+  const saveMailBoxCred = async (payload: ISecretManagerReq) => {
+    try {
+      await axios.post("/api/secret", payload)
+    } catch (error: any) {
+      setAlert({
+        message: error.message,
+        type: ALERT_TYPE.ERROR,
+      })
+    }
+  }
+
+  const handleChangeValues = (answerValues: FormikValues) => {
+    setAnswerValueData(answerValues)
+  }
+
+  const formatDependsVariables = (
+    formVariablesData: IUIVariable[],
+    currentAnswerValueData: FormikValues,
+  ) => {
+    const allNonDependsVars = formVariablesData.filter(
+      (formVariableData) =>
+        formVariableData.name !== "mail_box_email" &&
+        formVariableData.name !== "mail_box_password",
+    )
+    const allDependsVars = formVariablesData.filter(
+      (formVariableData) =>
+        formVariableData.name === "mail_box_email" ||
+        formVariableData.name === "mail_box_password",
+    )
+
+    const notificationAnswer = currentAnswerValueData.email_notifications
+    const releventParse = allNonDependsVars.concat(
+      notificationAnswer ? allDependsVars : [],
+    )
+    return releventParse
+  }
+
   useEffect(() => {
     if (formVariables.length > 0) {
       const initialFormVariable = setDefaultSettingVariables()
       setInitialData(initialFormVariable)
-      const groupedVariableList = groupVariables(formVariables)
+      const releventParse = formatDependsVariables(
+        formVariables,
+        answerValueData,
+      )
+      const groupedVariableList = groupVariables(releventParse)
       setFormData(groupedVariableList)
     }
-  }, formVariables)
+  }, [formVariables, answerValueData])
 
   return (
     <div className="w-full">
@@ -98,6 +152,7 @@ const DefaultCreateForm: React.FC<IDefaultCreateFormProps> = ({
                 variableList={group}
                 idx={index}
                 key={grpId}
+                handleChangeValues={handleChangeValues}
               />
             ) : (
               <></>

@@ -2,17 +2,22 @@ import sortBy from "lodash/sortBy"
 import { FormikStep } from "@/components/forms/FormikStepper"
 import { IUIVariable } from "@/utils/types"
 import StringField from "@/components/forms/fields/StringField"
+import BooleanField from "@/components/forms/fields/BooleanField"
+import { useFormikContext } from "formik"
+import { useEffect } from "react"
 
 interface IDefaultStepCreatorProps {
   variableList: IUIVariable[]
   idx: number
+  handleChangeValues: Function
 }
 
 type IFieldValidateValue = { value: string | number | boolean }
 
 const DefaultStepCreator: React.FC<IDefaultStepCreatorProps> = ({
   variableList,
   idx,
+  handleChangeValues,
 }) => {
   const sortedList = sortBy(variableList, "order")
 
@@ -24,8 +29,21 @@ const DefaultStepCreator: React.FC<IDefaultStepCreatorProps> = ({
     return error
   }
 
+  const { values } = useFormikContext()
+
+  useEffect(() => {
+    handleChangeValues(values)
+  }, [values])
+
   const renderControls = (variable: IUIVariable) => {
-    return <StringField variable={variable} validate={validateRequired} />
+    switch (variable.type) {
+      case "string":
+        return <StringField variable={variable} validate={validateRequired} />
+      case "bool":
+        return <BooleanField variable={variable} />
+      default:
+        return <StringField variable={variable} validate={validateRequired} />
+    }
   }
 
   return (