Merge pull request #295 from airtai/dev

Dev #285, #259, #287, #288, #289, #293, #294
airtai · Jun 5, 2024 · 45130b5 · 45130b5
2 parents f78a3c5 + 8172893
commit 45130b5
Show file tree

Hide file tree

Showing 66 changed files with 1,716 additions and 436 deletions.
diff --git a/.secrets.baseline b/.secrets.baseline
@@ -129,7 +129,17 @@
         "line_number": 73,
         "is_secret": false
       }
+    ],
+    "tests/secrets/test_openapi_auth.py": [
+      {
+        "type": "Secret Keyword",
+        "filename": "tests/secrets/test_openapi_auth.py",
+        "hashed_secret": "5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8",
+        "is_verified": false,
+        "line_number": 21,
+        "is_secret": false
+      }
     ]
   },
-  "generated_at": "2024-05-16T16:39:55Z"
+  "generated_at": "2024-05-29T09:18:25Z"
 }
diff --git a/app/src/client/components/CustomSidebar.tsx b/app/src/client/components/CustomSidebar.tsx
@@ -54,6 +54,49 @@ export const navLinkItems: NavLinkItem[] = [
     ),
     componentName: 'llm',
   },
+  {
+    label: 'ToolBoxes',
+    svgIcon: (
+      <svg className='fill-current -mt-1' width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'>
+        <g transform='scale(0.03515625)'>
+          <g>
+            <g>
+              <path
+                d='M500.23,270.051h-74.54V212.66c0-6.501-5.271-11.77-11.77-11.77h-48.1l27.688-47.958l64.046,36.977
+            c1.804,1.043,3.837,1.577,5.885,1.577c1.019,0,2.044-0.133,3.046-0.401c3.017-0.809,5.586-2.78,7.147-5.484l20.598-35.678
+            c2.533-4.388,1.975-9.906-1.389-13.696C445.913,83.333,394.793,29.371,331.424,1.649c-5.491-2.402-11.913-0.294-14.91,4.899
+            l-38.253,66.256c-3.251,5.63-1.322,12.828,4.308,16.078l39.586,22.855l-69.394,120.189l-78.893-116.953l-2.194-16.818
+            c-0.237-1.813-0.892-3.544-1.914-5.059l-29.837-44.232c-3.636-5.39-10.952-6.81-16.339-3.176l-53.66,36.193
+            c-2.588,1.746-4.377,4.448-4.973,7.512c-0.596,3.064,0.051,6.24,1.796,8.828l29.837,44.232c1.02,1.513,2.379,2.767,3.968,3.665
+            l14.769,8.345l77.97,115.587H147.67l-46.458-95.485c-2.845-5.845-9.89-8.277-15.733-5.434c-5.845,2.845-8.278,9.888-5.434,15.733
+            l41.447,85.186H91.712l-18.556-42.205c-2.618-5.951-9.566-8.653-15.512-6.037c-5.951,2.616-8.655,9.561-6.038,15.512
+            l14.39,32.732H11.77c-6.5,0-11.77,5.269-11.77,11.77v64.736c0,6.501,5.271,11.77,11.77,11.77h20.598v141.241
+            c0,6.501,5.271,11.77,11.77,11.77h423.724c6.499,0,11.77-5.269,11.77-11.77V358.328h20.598c6.5,0,11.77-5.269,11.77-11.77
+            v-64.736C512,275.32,506.729,270.051,500.23,270.051z M402.15,224.43v45.621h-76.259l26.338-45.621H402.15z M304.533,74.381
+            l26.982-46.734c52.385,25.827,96.917,71.78,138.08,117.868l-10.464,18.122L304.533,74.381z M263.734,260.013
+            c0.005-0.008,0.007-0.016,0.012-0.025l78.799-136.482l30.578,17.654l-74.412,128.89h-40.774L263.734,260.013z M133.285,139
+            c-1.02-1.512-2.379-2.767-3.968-3.665l-14.769-8.345L92.846,94.815l34.144-23.029l21.702,32.171l2.194,16.818
+            c0.237,1.813,0.892,3.544,1.914,5.059l86.868,128.772l-8.917,15.444h-9.063L133.285,139z M456.092,438.952h-48.846
+            c-6.499,0-11.77,5.269-11.77,11.77s5.271,11.77,11.77,11.77h48.846v25.306H55.908v-25.306h48.846
+            c6.499,0,11.77-5.269,11.77-11.77s-5.271-11.77-11.77-11.77H55.908v-80.625h135.356v41.195c0,6.501,5.271,11.77,11.77,11.77
+            h105.931c6.499,0,11.77-5.269,11.77-11.77v-41.195h135.356V438.952z M214.805,387.752v-29.425h82.391v29.425H214.805z
+             M488.46,334.787H23.54v-41.195h464.92V334.787z'
+              />
+              <path
+                d='M149.677,438.952H148.5c-6.499,0-11.77,5.269-11.77,11.77s5.271,11.77,11.77,11.77h1.177
+            c6.499,0,11.77-5.269,11.77-11.77S156.176,438.952,149.677,438.952z'
+              />
+              <path
+                d='M362.323,462.492h1.177c6.499,0,11.77-5.269,11.77-11.77s-5.271-11.77-11.77-11.77h-1.177
+            c-6.499,0-11.77,5.269-11.77,11.77S355.824,462.492,362.323,462.492z'
+              />
+            </g>
+          </g>
+        </g>
+      </svg>
+    ),
+    componentName: 'toolbox',
+  },
   {
     label: 'Agents',
     svgIcon: (
@@ -142,49 +185,6 @@ export const navLinkItems: NavLinkItem[] = [
     ),
     componentName: 'team',
   },
-  {
-    label: 'ToolBoxes',
-    svgIcon: (
-      <svg className='fill-current -mt-1' width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'>
-        <g transform='scale(0.03515625)'>
-          <g>
-            <g>
-              <path
-                d='M500.23,270.051h-74.54V212.66c0-6.501-5.271-11.77-11.77-11.77h-48.1l27.688-47.958l64.046,36.977
-            c1.804,1.043,3.837,1.577,5.885,1.577c1.019,0,2.044-0.133,3.046-0.401c3.017-0.809,5.586-2.78,7.147-5.484l20.598-35.678
-            c2.533-4.388,1.975-9.906-1.389-13.696C445.913,83.333,394.793,29.371,331.424,1.649c-5.491-2.402-11.913-0.294-14.91,4.899
-            l-38.253,66.256c-3.251,5.63-1.322,12.828,4.308,16.078l39.586,22.855l-69.394,120.189l-78.893-116.953l-2.194-16.818
-            c-0.237-1.813-0.892-3.544-1.914-5.059l-29.837-44.232c-3.636-5.39-10.952-6.81-16.339-3.176l-53.66,36.193
-            c-2.588,1.746-4.377,4.448-4.973,7.512c-0.596,3.064,0.051,6.24,1.796,8.828l29.837,44.232c1.02,1.513,2.379,2.767,3.968,3.665
-            l14.769,8.345l77.97,115.587H147.67l-46.458-95.485c-2.845-5.845-9.89-8.277-15.733-5.434c-5.845,2.845-8.278,9.888-5.434,15.733
-            l41.447,85.186H91.712l-18.556-42.205c-2.618-5.951-9.566-8.653-15.512-6.037c-5.951,2.616-8.655,9.561-6.038,15.512
-            l14.39,32.732H11.77c-6.5,0-11.77,5.269-11.77,11.77v64.736c0,6.501,5.271,11.77,11.77,11.77h20.598v141.241
-            c0,6.501,5.271,11.77,11.77,11.77h423.724c6.499,0,11.77-5.269,11.77-11.77V358.328h20.598c6.5,0,11.77-5.269,11.77-11.77
-            v-64.736C512,275.32,506.729,270.051,500.23,270.051z M402.15,224.43v45.621h-76.259l26.338-45.621H402.15z M304.533,74.381
-            l26.982-46.734c52.385,25.827,96.917,71.78,138.08,117.868l-10.464,18.122L304.533,74.381z M263.734,260.013
-            c0.005-0.008,0.007-0.016,0.012-0.025l78.799-136.482l30.578,17.654l-74.412,128.89h-40.774L263.734,260.013z M133.285,139
-            c-1.02-1.512-2.379-2.767-3.968-3.665l-14.769-8.345L92.846,94.815l34.144-23.029l21.702,32.171l2.194,16.818
-            c0.237,1.813,0.892,3.544,1.914,5.059l86.868,128.772l-8.917,15.444h-9.063L133.285,139z M456.092,438.952h-48.846
-            c-6.499,0-11.77,5.269-11.77,11.77s5.271,11.77,11.77,11.77h48.846v25.306H55.908v-25.306h48.846
-            c6.499,0,11.77-5.269,11.77-11.77s-5.271-11.77-11.77-11.77H55.908v-80.625h135.356v41.195c0,6.501,5.271,11.77,11.77,11.77
-            h105.931c6.499,0,11.77-5.269,11.77-11.77v-41.195h135.356V438.952z M214.805,387.752v-29.425h82.391v29.425H214.805z
-             M488.46,334.787H23.54v-41.195h464.92V334.787z'
-              />
-              <path
-                d='M149.677,438.952H148.5c-6.499,0-11.77,5.269-11.77,11.77s5.271,11.77,11.77,11.77h1.177
-            c6.499,0,11.77-5.269,11.77-11.77S156.176,438.952,149.677,438.952z'
-              />
-              <path
-                d='M362.323,462.492h1.177c6.499,0,11.77-5.269,11.77-11.77s-5.271-11.77-11.77-11.77h-1.177
-            c-6.499,0-11.77,5.269-11.77,11.77S355.824,462.492,362.323,462.492z'
-              />
-            </g>
-          </g>
-        </g>
-      </svg>
-    ),
-    componentName: 'toolbox',
-  },
   {
     label: 'Applications',
     svgIcon: (

diff --git a/app/src/client/components/DynamicFormBuilder.tsx b/app/src/client/components/DynamicFormBuilder.tsx
@@ -62,6 +62,10 @@ const DynamicFormBuilder: React.FC<DynamicFormBuilderProps> = ({
 
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
+    // Avoid creating duplicate applications
+    if (instructionForApplication && !updateExistingModel) {
+      return;
+    }
     setIsLoading(true);
     const isSecretUpdate = type_name === 'secret' && !!updateExistingModel;
     let formDataToSubmit: any = {};
@@ -153,47 +157,61 @@ The application is based on <a class="underline" href="https://wasp-lang.dev/" t
 <span class="text-xl inline-block my-2 underline">Prerequisites: </span>
 Before you begin, ensure you have the following:
 <span class="ml-5">1. Fly.io account:</span>
-<span class="ml-10">- Fly provides free allowances for up to 3 VMs (so deploying a Wasp app to a new account is free), but all plans</span>
-<span class="ml-10">require you to add your credit card information before you can proceed. If you don't, the deployment will fail.</span>
+<span class="ml-10">- If you don't have a Fly.io account, you can create one <a class="underline" href="https://fly.io/app/sign-up" target="_blank" rel="noopener noreferrer">here</a>.</span>
+<span class="ml-10">- Fly provides free allowances for up to 3 VMs (so deploying a Wasp app to a new account is free), <u><b>but all plans</b></u></span>
+<span class="ml-10"><u><b>require you to add your credit card information</b></u> before you can proceed. If you don't, the deployment will fail.</span>
+
+<span class="ml-10"><b><u>Important</u></b>: If you already have a Fly.io account and created more than one organization, make sure you choose "Personal" as the organization </span>
+<span class="ml-10"> while creating the Fly.io API Token in the deployment steps below.</span>
+
 <span class="text-xl inline-block my-2 underline">Deployment Steps: </span>
 <span class="text-l inline-block my-2 underline">Step 1: Fork the GitHub Repository:</span>
 <span class="ml-5">1.1 Fork <a class="underline" href="https://github.com/airtai/fastagency-wasp-app-template" target="_blank" rel="noopener noreferrer">this</a> GitHub Repository to your account. Ensure the checkbox "Copy the main branch only" is checked.</span>
-<span class="text-l inline-block my-2 underline">Step 2: Generate Fly.io API Token::</span>
-<span class="ml-5">2.1 Go to your Fly.io dashboard and click on the <b>Tokens</b> tab.</span>
+<span class="text-l inline-block my-2 underline">Step 2: Generate Fly.io API Token:</span>
+<span class="ml-5">2.1 Go to your <a class="underline" href="https://fly.io/dashboard" target="_blank" rel="noopener noreferrer">Fly.io</a> dashboard and click on the <b>Tokens</b> tab (the one on the left sidebar).</span>
 <span class="ml-5">2.2 Enter a name and set the <b>Optional Expiration</b> to 999999h, then click on <b>Create Organization Token</b> to generate a token.</span>
 <span class="ml-5">2.3 Copy the token, including the "FlyV1 " prefix and space at the beginning.</span>
 <span class="text-l inline-block my-2 underline">Step 3: Set necessary GitHub action secrets:</span>
 <span class="ml-5">3.1 Create the below two "repository secrets" in your forked GitHub repository.</span>
 <span class="ml-10">Note: If you don't know how to create a secret, follow <a class="underline" href="https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions#creating-secrets-for-a-repository" target="_blank" rel="noopener noreferrer">this</a> guide.</span>
-<span class="ml-10">======================================================================</span>
-<span class="ml-10">FLY_API_TOKEN: <span class="ml-35">paste the value you copied from 2.3</span></span>
+<span class="ml-10">==================================================================================</span>
+<span class="ml-10">FLY_API_TOKEN: <span class="ml-35"><--- paste the value you copied from 2.3 ---></span></span>
 <span class="ml-10">FASTAGENCY_APPLICATION_UUID: <span class="ml-10">${instructionForApplication}</span></span>
-<span class="ml-10">======================================================================</span>
+<span class="ml-10">==================================================================================</span>
 <span class="text-l inline-block my-2 underline">Step 4: Set up applications Fly.io:</span>
 <span class="ml-5">4.1 Go to the <b>Actions</b> tab in your forked repository on GitHub and click the</span>
 <span class="ml-12"><b>I understand my workflows, go ahead and enable them</b> button.</span>
 <span class="ml-5">4.2 On the left-hand side, you will see options like: All workflows, Fly Deployment Pipeline, Pipeline.</span>
 <span class="ml-5">4.3 Click on the <b>Fly Deployment Pipeline</b> option and and then click the <b>Run workflow</b> button against the main branch.</span>
-<span class="ml-5">4.4 Wait for the workflow to complete. Once completed, you will see the Client, Server, and Database apps</span>
+<span class="ml-5">4.4 Wait for the workflow to complete (approx. 2 mins). Once completed, you will see the Client, Server, and Database apps</span>
 <span class="ml-13">created on <a class="underline" href="https://fly.io/dashboard/personal" target="_blank" rel="noopener noreferrer">Fly.io dashboard</a>.</span>
 <span class="ml-5">4.5 The workflow will only set up the applications in Fly.io and not deploy the actual application code which</span>
 <span class="ml-13">will be done in the next step.</span>
 <span class="text-l inline-block my-2 underline">Step 5: Deploy the Application:</span>
 <span class="ml-5">5.1 The above workflow might have also created a pull request in your GitHub repository to update the <b>fly.toml</b> files.</span>
 <span class="ml-5">5.2 Go to the <b>Pull requests</b> tab in your forked repository on GitHub and merge the PR named "Add Fly.io configuration files".
 <span class="ml-5">5.3 It will trigger the below workflows in sequence:</span>
-<span class="ml-13">- Pipeline to run tests and verify the build</span>
+<span class="ml-13">- Pipeline to run tests and verify the build (approx. 2 mins).</span>
 <span class="ml-13">- Pipeline to deploy the tested application to Fly.io (approx. 5 - 10 mins).</span>
 <span class="ml-5">5.4 Once the workflow is completed, you can access your application using the hostname provided in the Fly.io dashboard.</span>
 <span class="ml-5">5.5 Go to fly dashboard and click on the client application (similar to: fastagency-app-******-client). </span>
 <span class="ml-5">5.6 The hostname is the URL of your application. Open the URL in your browser to launch your application.</span>
+<span class="text-xl inline-block my-2 underline">Application customization (Optional): </span>
+<span class="ml-5">- You can perform basic customization such as changing the app name and adding a support email address in the generated application by</span>
+<span class="ml-9"> setting the below optional "repository variables" (not repository secrets). Click <a class="underline" href="https://docs.github.com/en/actions/learn-github-actions/variables" target="_blank" rel="noopener noreferrer">here</a> to learn how to set repository variables.</span>
+<span class="ml-10">==================================================================================</span>
+<span class="ml-10">REACT_APP_NAME: <span class="ml-35"> <--- Your App Name ---> </span></span>
+<span class="ml-10">REACT_APP_SUPPORT_EMAIL: <span class="ml-19"> <--- Your Support Email Address ---> </span></span>
+<span class="ml-10">==================================================================================</span>
+<span class="ml-5">- After setting the repository variables, you can manualy trigger the <b>Fly Deployment Pipeline</b> workflow (refer 4.2 and 4.3) to deploy the changes.</span>
+<span class="ml-5">- For further customization, you can refer to the <a class="underline" href="https://wasp-lang.dev/docs/" target="_blank" rel="noopener noreferrer">Wasp documentation</a>.</span>
 <span class="text-xl inline-block my-2 underline">Troubleshooting: </span>
 <span class="ml-5">If you encounter any issues during the deployment, check the following common problems:</span>
 <span class="ml-10 underline">Deployment Failures: </span>
 <span class="ml-10">- Make sure you have added a payment method to your Fly.io account. Else, the deployment will fail.</span>
 <span class="ml-10">- Review the deployment logs on Fly.io for any error messages. You can access the logs by clicking on the</span>
 <span class="ml-15">server application on the Fly.io dashboard and then clicking on the Live Logs tab.</span>
-<span class="ml-5">- If you need any help, please reach out to us on <a class="underline" href="https://discord.gg/CJWmYpyFbc" target="_blank" rel="noopener noreferrer">discord</a>.</span>
+<span class="ml-5">- If you need any help, please reach out to us on <a class="underline" href="https://discord.gg/KgtGKbsh" target="_blank" rel="noopener noreferrer">discord</a>.</span>
 </div>
 `
     : '';

diff --git a/app/src/client/components/TosAndMarketingEmailsModal.tsx b/app/src/client/components/TosAndMarketingEmailsModal.tsx
@@ -48,7 +48,7 @@ const TosAndMarketingEmailsModal = () => {
           hasSubscribedToMarketingEmails: marketingEmailsChecked,
         }),
       });
-      history.push('/playground');
+      history.push('/build');
     } else {
       setErrorMessage(checkBoxErrMsg);
     }

diff --git a/app/src/client/components/buildPage/Applications.tsx b/app/src/client/components/buildPage/Applications.tsx
@@ -6,7 +6,7 @@ import { SecretsProps } from '../../interfaces/BuildPageInterfaces';
 const Applications = ({ data }: SecretsProps) => {
   return (
     <>
-      <CustomBreadcrumb pageName='Application' />
+      <CustomBreadcrumb pageName='Applications' />
       <div className='flex flex-col gap-10'>
         <div className='flex flex-col gap-4'>
           <div className='rounded-lg border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark min-h-[300px] sm:min-h-[600px]'>

diff --git a/app/src/client/components/buildPage/ToolBoxes.tsx b/app/src/client/components/buildPage/ToolBoxes.tsx
@@ -1,17 +1,16 @@
+import React from 'react';
 import CustomBreadcrumb from '../CustomBreadcrumb';
-const ToolBoxes = () => {
+import UserPropertyHandler from './UserPropertyHandler';
+import { SecretsProps } from '../../interfaces/BuildPageInterfaces';
+
+const ToolBoxes = ({ data }: SecretsProps) => {
   return (
     <>
       <CustomBreadcrumb pageName='ToolBoxes' />
       <div className='flex flex-col gap-10'>
         <div className='flex flex-col gap-4'>
-          <div className='rounded-lg border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark'>
-            <div
-              className='flex-col flex items-start justify-between p-6 gap-3 w-full'
-              style={{ width: '1000px', height: '600px' }}
-            >
-              <span className='text-sm font-medium text-airt-primary'>Coming soon...</span>
-            </div>
+          <div className='rounded-lg border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark min-h-[300px] sm:min-h-[600px]'>
+            <UserPropertyHandler data={data} />
           </div>
         </div>
       </div>

diff --git a/app/src/client/static/open-saas-banner.png b/app/src/client/static/open-saas-banner.png
diff --git a/app/src/client/tests/TosAndMarketingEmailsModal.test.tsx b/app/src/client/tests/TosAndMarketingEmailsModal.test.tsx
@@ -69,6 +69,6 @@ describe('TosAndMarketingEmailsModal', () => {
     const saveButton = screen.getByRole('button', { name: /Save/i });
     fireEvent.click(saveButton);
 
-    expect(mockHistoryPush).toHaveBeenCalledWith('/playground');
+    expect(mockHistoryPush).toHaveBeenCalledWith('/build');
   });
 });
diff --git a/app/src/client/utils/constants.ts b/app/src/client/utils/constants.ts
@@ -17,6 +17,7 @@ function deepFreeze(object: any) {
 export const propertyDependencyMap: PropertyDependencyMapProps = deepFreeze({
   secret: [''],
   llm: ['secret'],
+  toolbox: [''],
   agent: ['secret', 'llm'],
   team: ['secret', 'llm', 'agent'],
   application: ['secret', 'llm', 'agent', 'team'],

diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -18,6 +18,7 @@ services:
     container_name: ${container_name}
     ports:
       - "8000:8000"
+      - "9001:9001"
     environment:
       - DOMAIN=${DOMAIN}
       - DATABASE_URL=${DATABASE_URL}