From 59efbc2e93f55acd2596d46f28dab12ebdda63e0 Mon Sep 17 00:00:00 2001
From: Harish Mohan Raj <harish@airt.ai>
Date: Tue, 17 Sep 2024 10:19:23 +0530
Subject: [PATCH 1/2] Update auth callout packages (#729)

---
 auth_callout/package.json                     |  6 +--
 .../packages/auth-service/package.json        |  2 +-
 auth_callout/pnpm-lock.yaml                   | 50 +++++++++----------
 3 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/auth_callout/package.json b/auth_callout/package.json
index 05929753..190911c3 100644
--- a/auth_callout/package.json
+++ b/auth_callout/package.json
@@ -6,9 +6,9 @@
     "packages/*"
   ],
   "devDependencies": {
-    "tsx": "^4.19.0",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.3",
+    "tsx": "^4.19.1",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.5",
     "vite-plugin-checker": "^0.8.0"
   },
   "scripts": {
diff --git a/auth_callout/packages/auth-service/package.json b/auth_callout/packages/auth-service/package.json
index 311899a0..19da2131 100644
--- a/auth_callout/packages/auth-service/package.json
+++ b/auth_callout/packages/auth-service/package.json
@@ -8,7 +8,7 @@
   "type": "module",
   "main": "./lib/index.js",
   "devDependencies": {
-    "@types/node": "^22.5.3"
+    "@types/node": "^22.5.5"
   },
   "dependencies": {
     "@prisma/client": "^5.19.0",
diff --git a/auth_callout/pnpm-lock.yaml b/auth_callout/pnpm-lock.yaml
index 5c7cc6ab..a20b9701 100644
--- a/auth_callout/pnpm-lock.yaml
+++ b/auth_callout/pnpm-lock.yaml
@@ -9,17 +9,17 @@ importers:
   .:
     devDependencies:
       tsx:
-        specifier: ^4.19.0
-        version: 4.19.0
+        specifier: ^4.19.1
+        version: 4.19.1
       typescript:
-        specifier: ^5.5.4
-        version: 5.5.4
+        specifier: ^5.6.2
+        version: 5.6.2
       vite:
-        specifier: ^5.4.3
-        version: 5.4.3(@types/node@22.5.4)
+        specifier: ^5.4.5
+        version: 5.4.6(@types/node@22.5.5)
       vite-plugin-checker:
         specifier: ^0.8.0
-        version: 0.8.0(typescript@5.5.4)(vite@5.4.3(@types/node@22.5.4))
+        version: 0.8.0(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5))
 
   packages/auth-service:
     dependencies:
@@ -40,8 +40,8 @@ importers:
         version: 5.19.1
     devDependencies:
       '@types/node':
-        specifier: ^22.5.3
-        version: 22.5.4
+        specifier: ^22.5.5
+        version: 22.5.5
 
 packages:
 
@@ -458,8 +458,8 @@ packages:
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
-  '@types/node@22.5.4':
-    resolution: {integrity: sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==}
+  '@types/node@22.5.5':
+    resolution: {integrity: sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==}
 
   ansi-escapes@4.3.2:
     resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
@@ -710,8 +710,8 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
-  tsx@4.19.0:
-    resolution: {integrity: sha512-bV30kM7bsLZKZIOCHeMNVMJ32/LuJzLVajkQI/qf92J2Qr08ueLQvW00PUZGiuLPP760UINwupgUj8qrSCPUKg==}
+  tsx@4.19.1:
+    resolution: {integrity: sha512-0flMz1lh74BR4wOvBjuh9olbnwqCPc35OOlfyzHba0Dc+QNUeWX/Gq2YTbnwcWPO3BMd8fkzRVrHcsR+a7z7rA==}
     engines: {node: '>=18.0.0'}
     hasBin: true
 
@@ -722,8 +722,8 @@ packages:
     resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
     engines: {node: '>=10'}
 
-  typescript@5.5.4:
-    resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
+  typescript@5.6.2:
+    resolution: {integrity: sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
@@ -768,8 +768,8 @@ packages:
       vue-tsc:
         optional: true
 
-  vite@5.4.3:
-    resolution: {integrity: sha512-IH+nl64eq9lJjFqU+/yrRnrHPVTlgy42/+IzbOdaFDVlyLgI/wDlf+FCobXLX1cT0X5+7LMyH1mIy2xJdLfo8Q==}
+  vite@5.4.6:
+    resolution: {integrity: sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -1069,7 +1069,7 @@ snapshots:
 
   '@types/estree@1.0.5': {}
 
-  '@types/node@22.5.4':
+  '@types/node@22.5.5':
     dependencies:
       undici-types: 6.19.8
 
@@ -1371,7 +1371,7 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
-  tsx@4.19.0:
+  tsx@4.19.1:
     dependencies:
       esbuild: 0.23.1
       get-tsconfig: 4.7.6
@@ -1382,13 +1382,13 @@ snapshots:
 
   type-fest@0.21.3: {}
 
-  typescript@5.5.4: {}
+  typescript@5.6.2: {}
 
   undici-types@6.19.8: {}
 
   universalify@2.0.1: {}
 
-  vite-plugin-checker@0.8.0(typescript@5.5.4)(vite@5.4.3(@types/node@22.5.4)):
+  vite-plugin-checker@0.8.0(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5)):
     dependencies:
       '@babel/code-frame': 7.22.13
       ansi-escapes: 4.3.2
@@ -1400,21 +1400,21 @@ snapshots:
       npm-run-path: 4.0.1
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.1
-      vite: 5.4.3(@types/node@22.5.4)
+      vite: 5.4.6(@types/node@22.5.5)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.11
       vscode-uri: 3.0.8
     optionalDependencies:
-      typescript: 5.5.4
+      typescript: 5.6.2
 
-  vite@5.4.3(@types/node@22.5.4):
+  vite@5.4.6(@types/node@22.5.5):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.45
       rollup: 4.21.1
     optionalDependencies:
-      '@types/node': 22.5.4
+      '@types/node': 22.5.5
       fsevents: 2.3.3
 
   vscode-jsonrpc@6.0.0: {}

From 99ea194143c7732c807039c4465521bd779c84fe Mon Sep 17 00:00:00 2001
From: Harish Mohan Raj <harish@airt.ai>
Date: Tue, 17 Sep 2024 19:32:57 +0530
Subject: [PATCH 2/2] Mark specific form fields as non-editable while editing
 the property (#723)

* WIP

* WIP

* WIP

* WIP

* Polishing and code refactoring

* Add tooltips

* Fix pre-commit errors

* Polishing
---
 app/src/client/App.tsx                        |  16 +-
 .../components/buildPage/DynamicForm.tsx      | 119 ++--
 .../client/components/buildPage/FormField.tsx |  27 +-
 .../buildPage/PropertySchemaParser.ts         |  12 +
 .../buildPage/usePropertyManager.ts           |   5 +-
 app/src/client/components/form/TextArea.tsx   |   6 +-
 app/src/client/components/form/TextInput.tsx  |   6 +-
 .../client/interfaces/BuildPageInterfaces.ts  |   1 +
 .../client/tests/PropertySchemaParser.test.ts |  37 +-
 .../client/tests/UserProperty-e2e.test.tsx    | 132 +++-
 app/src/client/tests/mocks.ts                 | 616 +++++++++++++++++-
 app/src/client/utils/constants.ts             |   3 +-
 app/tailwind.config.cjs                       |   2 +
 13 files changed, 909 insertions(+), 73 deletions(-)

diff --git a/app/src/client/App.tsx b/app/src/client/App.tsx
index 1671beb4..d31a57b4 100644
--- a/app/src/client/App.tsx
+++ b/app/src/client/App.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useEffect, ReactNode, useState } from 'react';
 import { useLocation } from 'react-router-dom';
+import { ChakraProvider, extendTheme } from '@chakra-ui/react';
 
 import './Main.css';
 
@@ -12,6 +13,17 @@ import ServerNotRechableComponent from './components/ServerNotRechableComponent'
 import LoadingComponent from './components/LoadingComponent';
 import TosAndMarketingEmailsModal from './components/TosAndMarketingEmailsModal';
 
+const theme = extendTheme({
+  colors: {
+    brand: {
+      airtPrimary: '#003257',
+    },
+  },
+  zIndices: {
+    tooltip: 10000,
+  },
+});
+
 const addServerErrorClass = () => {
   if (!document.body.classList.contains('server-error')) {
     document.body.classList.add('server-error');
@@ -114,7 +126,7 @@ export default function App({ children }: { children: ReactNode }) {
   }, [location]);
 
   return (
-    <>
+    <ChakraProvider theme={theme}>
       <div className='bg-gradient-to-b from-airt-hero-gradient-start via-airt-hero-gradient-middle to-airt-secondary min-h-screen dark:text-white dark:bg-boxdark-2'>
         {isError && (addServerErrorClass(), (<ServerNotRechableComponent />))}
         {isAdminDashboard || isPlayGroundPage || isBuildPage ? (
@@ -153,7 +165,7 @@ export default function App({ children }: { children: ReactNode }) {
           </div>
         )}
       </div>
-    </>
+    </ChakraProvider>
   );
 }
 
diff --git a/app/src/client/components/buildPage/DynamicForm.tsx b/app/src/client/components/buildPage/DynamicForm.tsx
index 30fba07c..9c40fec9 100644
--- a/app/src/client/components/buildPage/DynamicForm.tsx
+++ b/app/src/client/components/buildPage/DynamicForm.tsx
@@ -75,6 +75,18 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
     popFromStackWithFormState,
   } = usePropertyManager(parser, updateFormStack, refetchUserProperties, popFromStack);
 
+  const propertyName = parser?.getPropertyName() || '';
+  const isDeploymentProperty = propertyName === 'deployment';
+
+  const flow = parser?.getFlow();
+  const isAddModelFlow = flow === Flow.ADD_MODEL;
+  const isUpdateModelFlow = flow === Flow.UPDATE_MODEL;
+
+  const shouldShowDeploymentPrerequisites = isDeploymentProperty && isAddModelFlow && !successResponse;
+  const isDeploymentCreatedSuccessfully = isDeploymentProperty && isAddModelFlow && successResponse;
+  const shouldShowDeploymentInstructions = isDeploymentProperty && isUpdateModelFlow;
+  const checkForImmutableFields = isDeploymentCreatedSuccessfully || isUpdateModelFlow;
+
   const addPropertyHandler = (modelName: string, propertyName: string, fieldKey: string) => {
     popFromStackWithFormState(modelName, propertyName, fieldKey);
   };
@@ -87,17 +99,26 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
         }
         const isReferenceField = parser?.checkIfRefField(property);
         let propertyCopy = Object.assign({}, property);
+
         let isOptionalRefField = false;
         if (isReferenceField) {
           const refFields = parser?.getRefFields();
           if (refFields && refFields[key]) {
             propertyCopy = refFields[key].htmlForSelectBox;
             isOptionalRefField = refFields[key].isOptional;
+            const metadata = refFields[key]?.metadata;
+            if (metadata) {
+              propertyCopy.metadata = metadata;
+            }
           }
         } else {
           const isNonRefButDropDownFields = parser?.getNonRefButDropdownFields();
           if (isNonRefButDropDownFields && isNonRefButDropDownFields[key]) {
             propertyCopy = isNonRefButDropDownFields[key].htmlForSelectBox;
+            const metadata = isNonRefButDropDownFields[key]?.metadata;
+            if (metadata) {
+              propertyCopy.metadata = metadata;
+            }
           }
         }
         return (
@@ -111,6 +132,7 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
                 fieldKey={key}
                 isOptionalRefField={isOptionalRefField}
                 addPropertyHandler={addPropertyHandler}
+                checkForImmutableFields={checkForImmutableFields}
               />
             )}
             validators={{
@@ -122,7 +144,7 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
     } else {
       return null;
     }
-  }, [schema, form]);
+  }, [schema, form, checkForImmutableFields]);
 
   const cancelButtonRef = useRef<HTMLButtonElement>(null);
   useEscapeKeyHandler(cancelButtonRef);
@@ -131,12 +153,6 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
     setNotification(null);
   };
 
-  const propertyName = parser?.getPropertyName() || '';
-  const isDeploymentProperty = propertyName === 'deployment';
-
-  const flow = parser?.getFlow();
-  const isAddUserFlow = flow === Flow.ADD_MODEL;
-
   return (
     <form
       onSubmit={(e) => {
@@ -148,56 +164,55 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
       {isLoading && <LoaderContainer />}
       {notification && <NotificationBox type='error' onClick={notificationOnClick} message={notification} />}
 
-      {isDeploymentProperty && isAddUserFlow && !successResponse && (
-        <DeploymentPrerequisites successResponse={successResponse} />
-      )}
+      {shouldShowDeploymentPrerequisites && <DeploymentPrerequisites successResponse={successResponse} />}
       {formFields}
-      {isDeploymentProperty && isAddUserFlow && successResponse && (
-        <DeploymentPrerequisites successResponse={successResponse} />
-      )}
-      {isDeploymentProperty && !isAddUserFlow && <DeploymentInstructions parser={parser} />}
+      {isDeploymentCreatedSuccessfully && <DeploymentPrerequisites successResponse={successResponse} />}
+      {shouldShowDeploymentInstructions && <DeploymentInstructions parser={parser} />}
 
       <form.Subscribe
         selector={(state) => [state.canSubmit, state.isSubmitting]}
-        children={([canSubmit, isSubmitting]) => (
-          <>
-            {isSubmitting && <LoaderContainer />}
-            <div className='col-span-full mt-7'>
-              <div className='float-right'>
-                <button
-                  className='rounded-md px-3.5 py-2.5 text-sm border border-airt-error text-airt-primary hover:bg-opacity-10 hover:bg-airt-error shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
-                  type='reset'
-                  onClick={() => handleCtaAction('cancel')}
-                  ref={cancelButtonRef}
-                  disabled={isSubmitting}
-                >
-                  Cancel
-                </button>
-                <button
-                  data-testid='form-submit-button'
-                  type='submit'
-                  className={`ml-3 rounded-md px-3.5 py-2.5 text-sm bg-airt-primary text-airt-font-base hover:bg-opacity-85 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ${
-                    !canSubmit ? 'cursor-not-allowed disabled' : ''
-                  }`}
-                  disabled={!canSubmit}
-                >
-                  {isSubmitting ? 'Saving...' : 'Save'}
-                </button>
+        children={([canSubmit, isSubmitting]) => {
+          const disableSaveButton = !canSubmit || isDeploymentCreatedSuccessfully;
+          return (
+            <>
+              {isSubmitting && <LoaderContainer />}
+              <div className='col-span-full mt-7'>
+                <div className='float-right'>
+                  <button
+                    className='rounded-md px-3.5 py-2.5 text-sm border border-airt-error text-airt-primary hover:bg-opacity-10 hover:bg-airt-error shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+                    type='reset'
+                    onClick={() => handleCtaAction('cancel')}
+                    ref={cancelButtonRef}
+                    disabled={isSubmitting}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    data-testid='form-submit-button'
+                    type='submit'
+                    className={`ml-3 rounded-md px-3.5 py-2.5 text-sm bg-airt-primary text-airt-font-base hover:bg-opacity-85 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ${
+                      disableSaveButton ? 'cursor-not-allowed disabled' : ''
+                    }`}
+                    disabled={disableSaveButton}
+                  >
+                    {isSubmitting ? 'Saving...' : 'Save'}
+                  </button>
+                </div>
+                {parser?.getFlow() === 'update_model' && (
+                  <button
+                    type='button'
+                    className='float-left rounded-md px-3.5 py-2.5 text-sm border bg-airt-error text-airt-font-base hover:bg-opacity-80 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+                    disabled={isSubmitting}
+                    data-testid='form-cancel-button'
+                    onClick={() => handleCtaAction('delete')}
+                  >
+                    Delete
+                  </button>
+                )}
               </div>
-              {parser?.getFlow() === 'update_model' && (
-                <button
-                  type='button'
-                  className='float-left rounded-md px-3.5 py-2.5 text-sm border bg-airt-error text-airt-font-base hover:bg-opacity-80 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
-                  disabled={isSubmitting}
-                  data-testid='form-cancel-button'
-                  onClick={() => handleCtaAction('delete')}
-                >
-                  Delete
-                </button>
-              )}
-            </div>
-          </>
-        )}
+            </>
+          );
+        }}
       />
     </form>
   );
diff --git a/app/src/client/components/buildPage/FormField.tsx b/app/src/client/components/buildPage/FormField.tsx
index b48706ce..757cabfa 100644
--- a/app/src/client/components/buildPage/FormField.tsx
+++ b/app/src/client/components/buildPage/FormField.tsx
@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react';
 import _ from 'lodash';
 import { FieldApi } from '@tanstack/react-form';
 import Select, { StylesConfig } from 'react-select';
+import { Tooltip } from '@chakra-ui/react';
+import { IoIosInformationCircleOutline } from 'react-icons/io';
 
 import { TextInput } from '../form/TextInput';
 import { SECRETS_TO_MASK } from '../../utils/constants';
@@ -37,6 +39,7 @@ interface FormFieldProps {
   fieldKey: string;
   isOptionalRefField: boolean;
   addPropertyHandler: AddPropertyHandler;
+  checkForImmutableFields: boolean;
 }
 
 function FieldInfo({ field }: { field: FieldApi<any, any, any, any> }) {
@@ -62,6 +65,7 @@ export const FormField: React.FC<FormFieldProps> = ({
   fieldKey,
   isOptionalRefField,
   addPropertyHandler,
+  checkForImmutableFields,
 }) => {
   const [selectOptions, setSelectOptions] = useState([]);
   const [defaultValue, setDefaultValue] = useState(null);
@@ -103,9 +107,27 @@ export const FormField: React.FC<FormFieldProps> = ({
     }
   };
 
+  const immutableAfterCreation = checkForImmutableFields && property.metadata?.immutable_after_creation;
+  const toolTipMessage = property.metadata?.tooltip_message;
+
   return (
     <div className='w-full mt-2'>
-      <label htmlFor={fieldKey}>{`${property.title} ${isOptionalRefField ? ' (Optional)' : ''}`}</label>
+      <label htmlFor={fieldKey} className='flex items-center'>
+        {`${property.title} ${isOptionalRefField ? ' (Optional)' : ''}`}
+        {toolTipMessage && (
+          <Tooltip
+            hasArrow
+            label={toolTipMessage}
+            className='bg-airt-secondary text-airt-font-base'
+            bg='brand.airtPrimary'
+            color='white'
+          >
+            <span className='ml-1 text-airt-primary' data-testid={`${fieldKey}-tooltip`}>
+              <IoIosInformationCircleOutline />
+            </span>
+          </Tooltip>
+        )}
+      </label>
       {property.enum ? (
         <Select
           key={key}
@@ -119,6 +141,7 @@ export const FormField: React.FC<FormFieldProps> = ({
           isSearchable={true}
           isClearable={isOptionalRefField}
           styles={markAddPropertyOption}
+          isDisabled={immutableAfterCreation}
         />
       ) : fieldKey === 'system_message' ? (
         <TextArea
@@ -126,6 +149,7 @@ export const FormField: React.FC<FormFieldProps> = ({
           value={field.state.value}
           placeholder={property.description || ''}
           onChange={(e) => field.handleChange(e)}
+          disabled={immutableAfterCreation}
         />
       ) : (
         <TextInput
@@ -134,6 +158,7 @@ export const FormField: React.FC<FormFieldProps> = ({
           onChange={(e) => field.handleChange(e)}
           type={getInputType()}
           placeholder={property.description || ''}
+          disabled={immutableAfterCreation}
         />
       )}
       <FieldInfo field={field} />
diff --git a/app/src/client/components/buildPage/PropertySchemaParser.ts b/app/src/client/components/buildPage/PropertySchemaParser.ts
index 6a57ff8b..0eae7484 100644
--- a/app/src/client/components/buildPage/PropertySchemaParser.ts
+++ b/app/src/client/components/buildPage/PropertySchemaParser.ts
@@ -83,6 +83,12 @@ export class PropertySchemaParser implements PropertySchemaParserInterface {
       .join(' ');
   }
 
+  private addMetadataIfExists(field: any, property: any): void {
+    if ('metadata' in property) {
+      field.metadata = property.metadata;
+    }
+  }
+
   public getSchemaForModel(): Schema | undefined {
     if (!this.activeModel) {
       return undefined;
@@ -164,6 +170,9 @@ export class PropertySchemaParser implements PropertySchemaParserInterface {
       initialFormValue: defaultValue?.value ?? null,
       isOptional: isOptional,
     };
+
+    this.addMetadataIfExists(this.refFields[key], property);
+
     defaultValues[key] = this.refFields[key].initialFormValue;
   }
 
@@ -213,6 +222,9 @@ export class PropertySchemaParser implements PropertySchemaParserInterface {
       },
       initialFormValue: defaultValue?.value ?? null,
     };
+
+    this.addMetadataIfExists(this.nonRefButDropdownFields[key], property);
+
     defaultValues[key] = this.nonRefButDropdownFields[key].initialFormValue;
   }
 
diff --git a/app/src/client/components/buildPage/usePropertyManager.ts b/app/src/client/components/buildPage/usePropertyManager.ts
index 3800fdd7..d5a0be8e 100644
--- a/app/src/client/components/buildPage/usePropertyManager.ts
+++ b/app/src/client/components/buildPage/usePropertyManager.ts
@@ -87,9 +87,10 @@ export const usePropertyManager = (
         const response = await onSuccessCallback(validatedData, propertyName, modelName, propertyUUIDToUpdate);
         await setSuccessResponse(response);
 
-        if (!isDeploymentProperty) {
-          await resetAndRefetchProperties(validatedData);
+        if (isDeploymentProperty && flow === Flow.ADD_MODEL) {
+          return;
         }
+        await resetAndRefetchProperties(validatedData);
       } catch (error: any) {
         try {
           const errorMsgObj = JSON.parse(error.message);
diff --git a/app/src/client/components/form/TextArea.tsx b/app/src/client/components/form/TextArea.tsx
index 438b31d2..ee109024 100644
--- a/app/src/client/components/form/TextArea.tsx
+++ b/app/src/client/components/form/TextArea.tsx
@@ -5,14 +5,16 @@ interface TextAreaProps {
   value: string;
   placeholder: string;
   onChange: (value: string) => void;
+  disabled?: boolean;
 }
 
-export const TextArea: React.FC<TextAreaProps> = ({ id, value, placeholder, onChange }) => (
+export const TextArea: React.FC<TextAreaProps> = ({ id, value, placeholder, onChange, disabled }) => (
   <textarea
     value={value}
     placeholder={placeholder}
     onChange={(e) => onChange(e.target.value)}
-    className='my-2 p-2 border rounded w-full h-40'
+    className='my-2 p-2 border rounded w-full h-40 disabled:bg-airt-disabled-input-bg disabled:text-airt-disabled-input-color'
     id={id}
+    disabled={disabled}
   />
 );
diff --git a/app/src/client/components/form/TextInput.tsx b/app/src/client/components/form/TextInput.tsx
index 2806d4b8..e2c9442e 100644
--- a/app/src/client/components/form/TextInput.tsx
+++ b/app/src/client/components/form/TextInput.tsx
@@ -6,15 +6,17 @@ interface TextInputProps {
   value: string;
   placeholder: string;
   onChange: (value: string) => void;
+  disabled?: boolean;
 }
 
-export const TextInput: React.FC<TextInputProps> = ({ id, type, value, placeholder, onChange }) => (
+export const TextInput: React.FC<TextInputProps> = ({ id, type, value, placeholder, onChange, disabled }) => (
   <input
     type={type}
     value={value}
     placeholder={placeholder}
     onChange={(e) => onChange(e.target.value)}
-    className='my-2 p-2 border rounded w-full'
+    className='my-2 p-2 border rounded w-full disabled:bg-airt-disabled-input-bg disabled:text-airt-disabled-input-color'
     id={id}
+    disabled={disabled}
   />
 );
diff --git a/app/src/client/interfaces/BuildPageInterfaces.ts b/app/src/client/interfaces/BuildPageInterfaces.ts
index 2f55d769..1527ca04 100644
--- a/app/src/client/interfaces/BuildPageInterfaces.ts
+++ b/app/src/client/interfaces/BuildPageInterfaces.ts
@@ -28,6 +28,7 @@ export interface Property {
   minimum?: number;
   anyOf?: SchemaReference[];
   $ref?: string;
+  metadata?: { [key: string]: any };
 }
 
 interface SchemaReference {
diff --git a/app/src/client/tests/PropertySchemaParser.test.ts b/app/src/client/tests/PropertySchemaParser.test.ts
index e50531b5..c0df775d 100644
--- a/app/src/client/tests/PropertySchemaParser.test.ts
+++ b/app/src/client/tests/PropertySchemaParser.test.ts
@@ -17,7 +17,15 @@ describe('PropertySchemaParser', () => {
       json_schema: {
         properties: {
           name: { description: 'The name of the item', minLength: 1, title: 'Name', type: 'string' },
-          api_key: { description: 'The API Key from Azure OpenAI', title: 'API Key', type: 'string' },
+          api_key: {
+            description: 'The API Key from Azure OpenAI',
+            metadata: {
+              tooltip_message:
+                'The API key specified here will be used to authenticate requests to Azure OpenAI services.',
+            },
+            title: 'API Key',
+            type: 'string',
+          },
         },
         required: ['name', 'api_key'],
         title: 'AzureOAIAPIKey',
@@ -55,7 +63,7 @@ describe('PropertySchemaParser', () => {
       name: '',
       model: 'gpt-3.5-turbo',
       api_key: 'b9714b3f-bb43-4f64-8732-bb9444d13f7b', // pragma: allowlist secret
-      base_url: 'https://api.openai.com/v1',
+      base_url: 'https://{your-resource-name}.openai.azure.com',
       api_type: 'azure',
       api_version: '2024-02-01',
       temperature: 0.8,
@@ -80,6 +88,9 @@ describe('PropertySchemaParser', () => {
           title: 'API Key',
         },
         isOptional: false,
+        metadata: {
+          tooltip_message: 'Choose the API key that will be used to authenticate requests to Azure OpenAI services.',
+        },
         initialFormValue: 'b9714b3f-bb43-4f64-8732-bb9444d13f7b',
       },
     });
@@ -239,6 +250,9 @@ describe('PropertySchemaParser', () => {
           title: 'API Key',
         },
         isOptional: false,
+        metadata: {
+          tooltip_message: 'Choose the API key that will be used to authenticate requests to Azure OpenAI services.',
+        },
         initialFormValue: 'a0014b3f-bb43-4f64-8732-bb9444d13f7b',
       },
     });
@@ -294,6 +308,10 @@ describe('PropertySchemaParser', () => {
             },
           ],
         },
+        metadata: {
+          tooltip_message:
+            'The version of the Azure OpenAI API that the LLM uses to interact with Azure OpenAI services.',
+        },
         initialFormValue: '2024-03-01-preview',
       },
     });
@@ -385,6 +403,9 @@ describe('PropertySchemaParser', () => {
           title: 'Model',
         },
         initialFormValue: 'claude-3-opus-20240229',
+        metadata: {
+          tooltip_message: 'Choose the model that the LLM should use to generate responses.',
+        },
       },
       api_type: {
         htmlForSelectBox: {
@@ -739,7 +760,7 @@ describe('PropertySchemaParser', () => {
           description: '',
           enum: [
             {
-              addPropertyForModel: 'OpenAPIAuth',
+              addPropertyForModel: 'OpenAPIAuthToken',
               label: 'Add new "Secret"',
               value: 'secret',
             },
@@ -749,6 +770,10 @@ describe('PropertySchemaParser', () => {
         },
         initialFormValue: null,
         isOptional: true,
+        metadata: {
+          tooltip_message:
+            'Choose the authentication method that will be used to authenticate requests to the above OpenAPI routes. Leave this field as it is if the OpenAPI routes do not require authentication.',
+        },
       },
     });
   });
@@ -786,7 +811,7 @@ describe('PropertySchemaParser', () => {
           enum: [
             { label: 'OpenAIAPI Auth Key', value: '06936c73-f22b-4c69-b107-6f8f9a4982bc' },
             {
-              addPropertyForModel: 'OpenAPIAuth',
+              addPropertyForModel: 'OpenAPIAuthToken',
               label: 'Add new "Secret"',
               value: 'secret',
             },
@@ -795,6 +820,10 @@ describe('PropertySchemaParser', () => {
           title: 'OpenAPI Auth',
         },
         initialFormValue: null,
+        metadata: {
+          tooltip_message:
+            'Choose the authentication method that will be used to authenticate requests to the above OpenAPI routes. Leave this field as it is if the OpenAPI routes do not require authentication.',
+        },
         isOptional: true,
       },
     });
diff --git a/app/src/client/tests/UserProperty-e2e.test.tsx b/app/src/client/tests/UserProperty-e2e.test.tsx
index 085d7d9c..dd42065b 100644
--- a/app/src/client/tests/UserProperty-e2e.test.tsx
+++ b/app/src/client/tests/UserProperty-e2e.test.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { describe, it, expect, vi, beforeEach, Mock } from 'vitest';
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, prettyDOM } from '@testing-library/react';
 import userEvent, { UserEvent } from '@testing-library/user-event';
 import { renderInContext } from 'wasp/client/test';
 import { useQuery } from 'wasp/client/operations';
-import { llmUserProperties, mockProps } from './mocks';
+import { deploymentUserProperties, llmUserProperties, mockProps } from './mocks';
 import _ from 'lodash';
 
 // Types
@@ -56,6 +56,16 @@ const createSecret = async (user: UserEvent): Promise<void> => {
   await user.click(screen.getByText('Add new "Secret"'));
   await waitFor(() => expect(screen.getByText('Select Secret')).toBeInTheDocument());
   expect(screen.getByText('AnthropicAPIKey')).toBeInTheDocument();
+
+  // Check Api Key Tooltip
+  const apiKeyTooltip = screen.getByTestId('api_key-tooltip');
+  await user.hover(apiKeyTooltip);
+  await waitFor(() => {
+    expect(
+      screen.getByText('The API key specified here will be used to authenticate requests to Anthropic services.')
+    ).toBeInTheDocument();
+  });
+
   await user.type(screen.getByLabelText('Name'), 'My AnthropicAPIKey Secret');
   await user.type(screen.getByLabelText('API Key'), 'My Api Key');
 
@@ -109,6 +119,24 @@ const createLLM = async (user: UserEvent): Promise<void> => {
   await waitFor(() => expect(screen.getByText('Select LLM')).toBeInTheDocument());
   await user.type(screen.getByLabelText('Name'), 'My Anthropic LLM');
 
+  // Check tooltips
+  const tooltips = {
+    api_key: 'Choose the API key that will be used to authenticate requests to Anthropic services.', // pragma: allowlist secret
+    model: 'Choose the model that the LLM should use to generate responses.',
+    base_url: 'The base URL that the LLM uses to interact with Anthropic services.',
+    temperature:
+      'Adjust the temperature to change the response style. Lower values lead to more consistent answers, while higher values make the responses more creative. The values must be between 0 and 2.',
+  };
+
+  // Check Tooltips
+  for (const [key, value] of Object.entries(tooltips)) {
+    const tooltip = screen.getByTestId(`${key}-tooltip`);
+    await user.hover(tooltip);
+    await waitFor(() => {
+      expect(screen.getByText(value)).toBeInTheDocument();
+    });
+  }
+
   await createSecret(user);
 
   mockValidateForm.mockResolvedValue({
@@ -415,4 +443,104 @@ describe('UserProperty Component Tests', () => {
     expect(mockUpdateUserModels).toHaveBeenCalledOnce();
     expect(screen.getByText('LLM')).toBeInTheDocument();
   });
+
+  it('Should mark specific form fields as non-editable while editing the property', async () => {
+    // The below test checks the following:
+    // 1. Create a new Deployment and save it
+    // 2. Open the saved deployment from the list and check if the form fields "Repo Name", "Fly App Name", "GH Token" and "FLY Token" are non-editable
+
+    const user = userEvent.setup();
+    const { UserProperty } = await import('../components/buildPage/UserProperty');
+
+    // Mock useQuery to return llmUserProperties
+    const data = _.cloneDeep(deploymentUserProperties);
+    (useQuery as Mock).mockReturnValue({
+      data: data,
+      refetch: vi.fn().mockResolvedValue({ data: data }),
+      isLoading: false,
+    });
+
+    const { container } = renderInContext(<UserProperty {...mockProps} activeProperty='deployment' />);
+
+    await user.click(screen.getByText('Add Deployment'));
+    expect(screen.getByText('Add a new Deployment')).toBeInTheDocument();
+
+    // Fill the deployment form
+    await user.type(screen.getByLabelText('Name'), 'My Deployment Name');
+    await user.type(screen.getByLabelText('Repo Name'), 'My Repo Name');
+    await user.type(screen.getByLabelText('Fly App Name'), 'My Fly App Name');
+
+    const mockValidateFormResponse = {
+      name: 'My Deployment Name',
+      team: {
+        name: 'TwoAgentTeam',
+        type: 'team',
+        uuid: '31273537-4cd5-4437-b5d0-222e3549259f',
+      },
+      gh_token: {
+        name: 'GitHubToken',
+        type: 'secret',
+        uuid: '42e34575-2029-4055-9460-3bf5e2745ddf',
+      },
+      fly_token: {
+        name: 'FlyToken',
+        type: 'secret',
+        uuid: 'e94cf6f2-f82a-4513-81dc-03adfe8ca9c9',
+      },
+      repo_name: 'My Repo Name',
+      gh_repo_url: 'https://github.com/harishmohanraj/my-deployment-name',
+      fly_app_name: 'My Fly App Name',
+      app_deploy_status: 'inprogress',
+      uuid: 'c5e3fbc7-70e0-4abe-b512-f11c0a77d330',
+    };
+
+    mockValidateForm.mockResolvedValue(mockValidateFormResponse);
+
+    const mockSuccessResponse = {
+      uuid: 'c5e3fbc7-70e0-4abe-b512-f11c0a77d330',
+      user_uuid: 'dae81928-8e99-48c2-be5d-61a5b422cf47',
+      type_name: 'deployment',
+      model_name: 'Deployment',
+      json_str: mockValidateFormResponse,
+      created_at: '2024-09-11T12:31:27.477000Z',
+      updated_at: '2024-09-11T12:31:27.477000Z',
+    };
+    mockAddUserModels.mockResolvedValue(mockSuccessResponse);
+    data.push(mockSuccessResponse);
+
+    // Mock useQuery to return llmUserProperties
+    (useQuery as Mock).mockReturnValue({
+      data,
+      refetch: vi.fn().mockResolvedValue({ data: data }),
+      isLoading: false,
+    });
+
+    // Save the deployment form
+    await user.click(screen.getByRole('button', { name: 'Save' }));
+    expect(mockAddUserModels).toHaveBeenCalledOnce();
+
+    // check if the form submit button is disabled
+    expect(screen.getByTestId('form-submit-button')).toBeDisabled();
+
+    // check if the form fields are non-editable
+    expect(screen.getByLabelText('Repo Name')).toBeDisabled();
+    expect(screen.getByLabelText('Fly App Name')).toBeDisabled();
+    expect(screen.getByLabelText('GH Token')).toBeDisabled();
+    expect(screen.getByLabelText('Fly Token')).toBeDisabled();
+
+    // Click on the cancel button
+    await user.click(screen.getByRole('button', { name: 'Cancel' }));
+
+    // Click on the deployment from the list
+    await user.click(screen.getByText('My Deployment Name'));
+
+    // Check if the form fields are non-editable
+    expect(screen.getByLabelText('Repo Name')).toBeDisabled();
+    expect(screen.getByLabelText('Fly App Name')).toBeDisabled();
+    expect(screen.getByLabelText('GH Token')).toBeDisabled();
+    expect(screen.getByLabelText('Fly Token')).toBeDisabled();
+
+    // Check if the form submit button is enabled
+    expect(screen.getByTestId('form-submit-button')).toBeEnabled();
+  });
 });
diff --git a/app/src/client/tests/mocks.ts b/app/src/client/tests/mocks.ts
index 87d7c00d..41f58886 100644
--- a/app/src/client/tests/mocks.ts
+++ b/app/src/client/tests/mocks.ts
@@ -3,6 +3,7 @@ import { vi } from 'vitest';
 import { ListOfSchemas, PropertiesSchema } from '../interfaces/BuildPageInterfaces';
 
 import { UserProperties } from '../components/buildPage/PropertySchemaParser';
+import _ from 'lodash';
 
 export const mockPropertieSchemas: PropertiesSchema = {
   list_of_schemas: [
@@ -21,6 +22,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
               },
               api_key: {
                 description: 'The API Key from Anthropic',
+                metadata: {
+                  tooltip_message:
+                    'The API key specified here will be used to authenticate requests to Anthropic services.',
+                },
                 title: 'API Key',
                 type: 'string',
               },
@@ -42,6 +47,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
               },
               api_key: {
                 description: 'The API Key from Azure OpenAI',
+                metadata: {
+                  tooltip_message:
+                    'The API key specified here will be used to authenticate requests to Azure OpenAI services.',
+                },
                 title: 'API Key',
                 type: 'string',
               },
@@ -63,6 +72,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
               },
               api_key: {
                 description: 'The API Key from OpenAI',
+                metadata: {
+                  tooltip_message:
+                    'The API key specified here will be used to authenticate requests to OpenAI services.',
+                },
                 title: 'API Key',
                 type: 'string',
               },
@@ -83,8 +96,12 @@ export const mockPropertieSchemas: PropertiesSchema = {
                 type: 'string',
               },
               api_key: {
-                description: 'The API Key from Together.ai',
+                description: 'The API Key from Together AI',
                 maxLength: 64,
+                metadata: {
+                  tooltip_message:
+                    'The API key specified here will be used to authenticate requests to Together AI services.',
+                },
                 minLength: 64,
                 title: 'API Key',
                 type: 'string',
@@ -95,6 +112,30 @@ export const mockPropertieSchemas: PropertiesSchema = {
             type: 'object',
           },
         },
+        {
+          name: 'OpenAPIAuthToken',
+          json_schema: {
+            properties: {
+              name: {
+                description: 'The name of the item',
+                minLength: 1,
+                title: 'Name',
+                type: 'string',
+              },
+              token: {
+                description: 'Authentication token for OpenAPI routes',
+                metadata: {
+                  tooltip_message: 'The token specified here will be used to authenticate requests to OpenAPI routes.',
+                },
+                title: 'Token',
+                type: 'string',
+              },
+            },
+            required: ['name', 'token'],
+            title: 'OpenAPIAuthToken',
+            type: 'object',
+          },
+        },
         {
           name: 'OpenAPIAuth',
           json_schema: {
@@ -133,6 +174,9 @@ export const mockPropertieSchemas: PropertiesSchema = {
               },
               api_key: {
                 description: 'The API Key from Bing',
+                metadata: {
+                  tooltip_message: 'The API key specified here will be used to authenticate requests to Bing services.',
+                },
                 title: 'API Key',
                 type: 'string',
               },
@@ -154,6 +198,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
               },
               fly_token: {
                 description: 'The Fly.io token to use for deploying the deployment',
+                metadata: {
+                  tooltip_message:
+                    'The token specified here will be used to authenticate your access to Fly.io services.',
+                },
                 title: 'Fly Token',
                 type: 'string',
               },
@@ -175,6 +223,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
               },
               gh_token: {
                 description: 'The GitHub token to use for creating a new repository',
+                metadata: {
+                  tooltip_message:
+                    'The token specified here will be used to authenticate your access to GitHub services.',
+                },
                 title: 'GH Token',
                 type: 'string',
               },
@@ -239,6 +291,9 @@ export const mockPropertieSchemas: PropertiesSchema = {
                   'claude-3-sonnet-20240229',
                   'claude-3-haiku-20240307',
                 ],
+                metadata: {
+                  tooltip_message: 'Choose the model that the LLM should use to generate responses.',
+                },
                 title: 'Model',
                 type: 'string',
               },
@@ -249,6 +304,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
                   },
                 ],
                 description: 'The API Key from Anthropic',
+                metadata: {
+                  tooltip_message:
+                    'Choose the API key that will be used to authenticate requests to Anthropic services.',
+                },
                 title: 'API Key',
               },
               base_url: {
@@ -256,8 +315,11 @@ export const mockPropertieSchemas: PropertiesSchema = {
                 description: 'The base URL of the Anthropic API',
                 format: 'uri',
                 maxLength: 2083,
+                metadata: {
+                  tooltip_message: 'The base URL that the LLM uses to interact with Anthropic services.',
+                },
                 minLength: 1,
-                title: 'Base Url',
+                title: 'Base URL',
                 type: 'string',
               },
               api_type: {
@@ -272,6 +334,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
                 default: 0.8,
                 description: 'The temperature to use for the model, must be between 0 and 2',
                 maximum: 2,
+                metadata: {
+                  tooltip_message:
+                    'Adjust the temperature to change the response style. Lower values lead to more consistent answers, while higher values make the responses more creative. The values must be between 0 and 2.',
+                },
                 minimum: 0,
                 title: 'Temperature',
                 type: 'number',
@@ -326,6 +392,9 @@ export const mockPropertieSchemas: PropertiesSchema = {
               model: {
                 default: 'gpt-3.5-turbo',
                 description: "The model to use for the Azure OpenAI API, e.g. 'gpt-3.5-turbo'",
+                metadata: {
+                  tooltip_message: 'The model that the LLM uses to interact with Azure OpenAI services.',
+                },
                 title: 'Model',
                 type: 'string',
               },
@@ -336,15 +405,22 @@ export const mockPropertieSchemas: PropertiesSchema = {
                   },
                 ],
                 description: 'The API Key from Azure OpenAI',
+                metadata: {
+                  tooltip_message:
+                    'Choose the API key that will be used to authenticate requests to Azure OpenAI services.',
+                },
                 title: 'API Key',
               },
               base_url: {
-                default: 'https://api.openai.com/v1',
+                default: 'https://{your-resource-name}.openai.azure.com',
                 description: 'The base URL of the Azure OpenAI API',
                 format: 'uri',
                 maxLength: 2083,
+                metadata: {
+                  tooltip_message: 'The base URL that the LLM uses to interact with Azure OpenAI services.',
+                },
                 minLength: 1,
-                title: 'Base Url',
+                title: 'Base URL',
                 type: 'string',
               },
               api_type: {
@@ -368,6 +444,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
                   '2024-05-01-preview',
                   '2024-02-01',
                 ],
+                metadata: {
+                  tooltip_message:
+                    'The version of the Azure OpenAI API that the LLM uses to interact with Azure OpenAI services.',
+                },
                 title: 'API Version',
                 type: 'string',
               },
@@ -375,6 +455,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
                 default: 0.8,
                 description: 'The temperature to use for the model, must be between 0 and 2',
                 maximum: 2,
+                metadata: {
+                  tooltip_message:
+                    'Adjust the temperature to change the response style. Lower values lead to more consistent answers, while higher values make the responses more creative. The values must be between 0 and 2.',
+                },
                 minimum: 0,
                 title: 'Temperature',
                 type: 'number',
@@ -423,6 +507,35 @@ export const mockPropertieSchemas: PropertiesSchema = {
                 title: 'OpenAPIAuthRef',
                 type: 'object',
               },
+              OpenAPIAuthTokenRef: {
+                properties: {
+                  type: {
+                    const: 'secret',
+                    default: 'secret',
+                    description: 'The name of the type of the data',
+                    enum: ['secret'],
+                    title: 'Type',
+                    type: 'string',
+                  },
+                  name: {
+                    const: 'OpenAPIAuthToken',
+                    default: 'OpenAPIAuthToken',
+                    description: 'The name of the data',
+                    enum: ['OpenAPIAuthToken'],
+                    title: 'Name',
+                    type: 'string',
+                  },
+                  uuid: {
+                    description: 'The unique identifier',
+                    format: 'uuid',
+                    title: 'UUID',
+                    type: 'string',
+                  },
+                },
+                required: ['uuid'],
+                title: 'OpenAPIAuthTokenRef',
+                type: 'object',
+              },
             },
             properties: {
               name: {
@@ -435,12 +548,19 @@ export const mockPropertieSchemas: PropertiesSchema = {
                 description: 'The URL of OpenAPI specification file',
                 format: 'uri',
                 maxLength: 2083,
+                metadata: {
+                  tooltip_message:
+                    "Enter the URL of the openapi.json file for your hosted OpenAPI docs. For example, if your docs are hosted at 'https://weather.tools.fastagency.ai/docs', enter 'https://weather.tools.fastagency.ai/openapi.json'.",
+                },
                 minLength: 1,
                 title: 'OpenAPI URL',
                 type: 'string',
               },
               openapi_auth: {
                 anyOf: [
+                  {
+                    $ref: '#/$defs/OpenAPIAuthTokenRef',
+                  },
                   {
                     $ref: '#/$defs/OpenAPIAuthRef',
                   },
@@ -450,6 +570,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
                 ],
                 default: null,
                 description: 'Authentication information for the API mentioned in the OpenAPI specification',
+                metadata: {
+                  tooltip_message:
+                    'Choose the authentication method that will be used to authenticate requests to the above OpenAPI routes. Leave this field as it is if the OpenAPI routes do not require authentication.',
+                },
                 title: 'OpenAPI Auth',
               },
             },
@@ -636,6 +760,9 @@ export const mockPropertieSchemas: PropertiesSchema = {
                   },
                 ],
                 description: 'LLM used by the agent for producing responses',
+                metadata: {
+                  tooltip_message: 'Choose the LLM the agent will use to generate responses.',
+                },
                 title: 'LLM',
               },
               toolbox_1: {
@@ -649,6 +776,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
                 ],
                 default: null,
                 description: 'Toolbox used by the agent for producing responses',
+                metadata: {
+                  tooltip_message:
+                    'Choose the toolbox that the agent will use automatically when needed to solve user queries.',
+                },
                 title: 'Toolbox',
               },
               toolbox_2: {
@@ -662,6 +793,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
                 ],
                 default: null,
                 description: 'Toolbox used by the agent for producing responses',
+                metadata: {
+                  tooltip_message:
+                    'Choose the toolbox that the agent will use automatically when needed to solve user queries.',
+                },
                 title: 'Toolbox',
               },
               toolbox_3: {
@@ -675,13 +810,21 @@ export const mockPropertieSchemas: PropertiesSchema = {
                 ],
                 default: null,
                 description: 'Toolbox used by the agent for producing responses',
+                metadata: {
+                  tooltip_message:
+                    'Choose the toolbox that the agent will use automatically when needed to solve user queries.',
+                },
                 title: 'Toolbox',
               },
               system_message: {
                 default:
-                  "You are a helpful assistant. After you successfully answer all questions and there are no new questions asked after your response (e.g. there is no specific direction or question asked after you give a response), terminate the chat by outputting 'TERMINATE'",
+                  "You are a helpful assistant. After you successfully answer all questions and there are no new questions asked after your response (e.g. there is no specific direction or question asked after you give a response), terminate the chat by outputting 'TERMINATE' (IMPORTANT: use all caps)",
                 description:
                   'The system message of the agent. This message is used to inform the agent about his role in the conversation',
+                metadata: {
+                  tooltip_message:
+                    "The system message defines the agent's role and influences its responses. For example, telling the agent 'You are an expert in travel advice' will make its responses focus on travel.",
+                },
                 title: 'System Message',
                 type: 'string',
               },
@@ -712,6 +855,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
                 ],
                 default: null,
                 description: 'The maximum number of consecutive auto-replies the agent can make',
+                metadata: {
+                  tooltip_message:
+                    'Set the maximum number of consecutive auto replies the agent can make before requiring human approval. A higher value gives the agent more autonomy, while leaving it blank prompts permission for each reply. For example, if you set this to 2, the agent will reply twice and then require human approval before replying again.',
+                },
                 title: 'Max Consecutive Auto Reply',
               },
             },
@@ -922,6 +1069,9 @@ export const mockPropertieSchemas: PropertiesSchema = {
                   },
                 ],
                 description: 'LLM used by the agent for producing responses',
+                metadata: {
+                  tooltip_message: 'Choose the LLM the agent will use to generate responses.',
+                },
                 title: 'LLM',
               },
               toolbox_1: {
@@ -935,6 +1085,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
                 ],
                 default: null,
                 description: 'Toolbox used by the agent for producing responses',
+                metadata: {
+                  tooltip_message:
+                    'Choose the toolbox that the agent will use automatically when needed to solve user queries.',
+                },
                 title: 'Toolbox',
               },
               toolbox_2: {
@@ -948,6 +1102,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
                 ],
                 default: null,
                 description: 'Toolbox used by the agent for producing responses',
+                metadata: {
+                  tooltip_message:
+                    'Choose the toolbox that the agent will use automatically when needed to solve user queries.',
+                },
                 title: 'Toolbox',
               },
               toolbox_3: {
@@ -961,6 +1119,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
                 ],
                 default: null,
                 description: 'Toolbox used by the agent for producing responses',
+                metadata: {
+                  tooltip_message:
+                    'Choose the toolbox that the agent will use automatically when needed to solve user queries.',
+                },
                 title: 'Toolbox',
               },
               summarizer_llm: {
@@ -979,11 +1141,19 @@ export const mockPropertieSchemas: PropertiesSchema = {
                   },
                 ],
                 description: 'This LLM will be used to generated summary of all pages visited',
+                metadata: {
+                  tooltip_message:
+                    'Select the summarizer LLM, which is used for generating precise and accurate summaries of web pages, while the LLM chosen above is used for handling regular web searches.',
+                },
                 title: 'Summarizer LLM',
               },
               viewport_size: {
                 default: 4096,
                 description: 'The viewport size of the browser',
+                metadata: {
+                  tooltip_message:
+                    'Viewport size refers to the visible area of a webpage in the browser. Default is 4096. Modify only if a custom size is needed.',
+                },
                 title: 'Viewport Size',
                 type: 'integer',
               },
@@ -998,6 +1168,10 @@ export const mockPropertieSchemas: PropertiesSchema = {
                 ],
                 default: null,
                 description: 'The Bing API key for the browser',
+                metadata: {
+                  tooltip_message:
+                    "Choose a Bing API key to allow the browser to access Bing's search and data services, improving information retrieval.",
+                },
                 title: 'Bing API Key',
               },
             },
@@ -1008,6 +1182,353 @@ export const mockPropertieSchemas: PropertiesSchema = {
         },
       ],
     },
+    {
+      name: 'team',
+      schemas: [
+        {
+          name: 'TwoAgentTeam',
+          json_schema: {
+            $defs: {
+              AssistantAgentRef: {
+                properties: {
+                  type: {
+                    const: 'agent',
+                    default: 'agent',
+                    description: 'The name of the type of the data',
+                    enum: ['agent'],
+                    title: 'Type',
+                    type: 'string',
+                  },
+                  name: {
+                    const: 'AssistantAgent',
+                    default: 'AssistantAgent',
+                    description: 'The name of the data',
+                    enum: ['AssistantAgent'],
+                    title: 'Name',
+                    type: 'string',
+                  },
+                  uuid: {
+                    description: 'The unique identifier',
+                    format: 'uuid',
+                    title: 'UUID',
+                    type: 'string',
+                  },
+                },
+                required: ['uuid'],
+                title: 'AssistantAgentRef',
+                type: 'object',
+              },
+              UserProxyAgentRef: {
+                properties: {
+                  type: {
+                    const: 'agent',
+                    default: 'agent',
+                    description: 'The name of the type of the data',
+                    enum: ['agent'],
+                    title: 'Type',
+                    type: 'string',
+                  },
+                  name: {
+                    const: 'UserProxyAgent',
+                    default: 'UserProxyAgent',
+                    description: 'The name of the data',
+                    enum: ['UserProxyAgent'],
+                    title: 'Name',
+                    type: 'string',
+                  },
+                  uuid: {
+                    description: 'The unique identifier',
+                    format: 'uuid',
+                    title: 'UUID',
+                    type: 'string',
+                  },
+                },
+                required: ['uuid'],
+                title: 'UserProxyAgentRef',
+                type: 'object',
+              },
+              WebSurferAgentRef: {
+                properties: {
+                  type: {
+                    const: 'agent',
+                    default: 'agent',
+                    description: 'The name of the type of the data',
+                    enum: ['agent'],
+                    title: 'Type',
+                    type: 'string',
+                  },
+                  name: {
+                    const: 'WebSurferAgent',
+                    default: 'WebSurferAgent',
+                    description: 'The name of the data',
+                    enum: ['WebSurferAgent'],
+                    title: 'Name',
+                    type: 'string',
+                  },
+                  uuid: {
+                    description: 'The unique identifier',
+                    format: 'uuid',
+                    title: 'UUID',
+                    type: 'string',
+                  },
+                },
+                required: ['uuid'],
+                title: 'WebSurferAgentRef',
+                type: 'object',
+              },
+            },
+            properties: {
+              name: {
+                description: 'The name of the item',
+                minLength: 1,
+                title: 'Name',
+                type: 'string',
+              },
+              is_termination_msg_regex: {
+                default: 'TERMINATE',
+                description:
+                  'Whether the message is a termination message or not. If it is a termination message, the chat will terminate.',
+                metadata: {
+                  tooltip_message:
+                    'The termination message regular expression format. The LLM uses this pattern to decide when to end the chat if the message matches.',
+                },
+                title: 'Is Termination Msg Regex',
+                type: 'string',
+              },
+              human_input_mode: {
+                default: 'ALWAYS',
+                description: 'Mode for human input',
+                enum: ['ALWAYS', 'TERMINATE', 'NEVER'],
+                metadata: {
+                  tooltip_message:
+                    'Select the human input mode to control the level of human involvement. Modes include NEVER (full autonomy), TERMINATE (human input requested upon termination), and ALWAYS (input required after every message).',
+                },
+                title: 'Human Input Mode',
+                type: 'string',
+              },
+              initial_agent: {
+                anyOf: [
+                  {
+                    $ref: '#/$defs/AssistantAgentRef',
+                  },
+                  {
+                    $ref: '#/$defs/UserProxyAgentRef',
+                  },
+                  {
+                    $ref: '#/$defs/WebSurferAgentRef',
+                  },
+                ],
+                description: 'Agent that starts the conversation',
+                metadata: {
+                  tooltip_message:
+                    'Select the Initial Agent, the agent responsible for task orchestration. It interacts with users and assigns tasks to Secondary Agent, enhancing the efficiency of complex operations.',
+                },
+                title: 'Initial Agent',
+              },
+              secondary_agent: {
+                anyOf: [
+                  {
+                    $ref: '#/$defs/AssistantAgentRef',
+                  },
+                  {
+                    $ref: '#/$defs/UserProxyAgentRef',
+                  },
+                  {
+                    $ref: '#/$defs/WebSurferAgentRef',
+                  },
+                ],
+                description: 'Agent that continues the conversation',
+                metadata: {
+                  tooltip_message:
+                    'Select the Secondary Agent, the agent responsible for collaborating with the Initial Agent in performing specialized tasks. Secondary Agents enhance efficiency by focusing on specific roles, such as data analysis or code execution.',
+                },
+                title: 'Secondary Agent',
+              },
+            },
+            required: ['name', 'initial_agent', 'secondary_agent'],
+            title: 'TwoAgentTeam',
+            type: 'object',
+          },
+        },
+      ],
+    },
+    {
+      name: 'deployment',
+      schemas: [
+        {
+          name: 'Deployment',
+          json_schema: {
+            $defs: {
+              FlyTokenRef: {
+                properties: {
+                  type: {
+                    const: 'secret',
+                    default: 'secret',
+                    description: 'The name of the type of the data',
+                    enum: ['secret'],
+                    title: 'Type',
+                    type: 'string',
+                  },
+                  name: {
+                    const: 'FlyToken',
+                    default: 'FlyToken',
+                    description: 'The name of the data',
+                    enum: ['FlyToken'],
+                    title: 'Name',
+                    type: 'string',
+                  },
+                  uuid: {
+                    description: 'The unique identifier',
+                    format: 'uuid',
+                    title: 'UUID',
+                    type: 'string',
+                  },
+                },
+                required: ['uuid'],
+                title: 'FlyTokenRef',
+                type: 'object',
+              },
+              GitHubTokenRef: {
+                properties: {
+                  type: {
+                    const: 'secret',
+                    default: 'secret',
+                    description: 'The name of the type of the data',
+                    enum: ['secret'],
+                    title: 'Type',
+                    type: 'string',
+                  },
+                  name: {
+                    const: 'GitHubToken',
+                    default: 'GitHubToken',
+                    description: 'The name of the data',
+                    enum: ['GitHubToken'],
+                    title: 'Name',
+                    type: 'string',
+                  },
+                  uuid: {
+                    description: 'The unique identifier',
+                    format: 'uuid',
+                    title: 'UUID',
+                    type: 'string',
+                  },
+                },
+                required: ['uuid'],
+                title: 'GitHubTokenRef',
+                type: 'object',
+              },
+              TwoAgentTeamRef: {
+                properties: {
+                  type: {
+                    const: 'team',
+                    default: 'team',
+                    description: 'The name of the type of the data',
+                    enum: ['team'],
+                    title: 'Type',
+                    type: 'string',
+                  },
+                  name: {
+                    const: 'TwoAgentTeam',
+                    default: 'TwoAgentTeam',
+                    description: 'The name of the data',
+                    enum: ['TwoAgentTeam'],
+                    title: 'Name',
+                    type: 'string',
+                  },
+                  uuid: {
+                    description: 'The unique identifier',
+                    format: 'uuid',
+                    title: 'UUID',
+                    type: 'string',
+                  },
+                },
+                required: ['uuid'],
+                title: 'TwoAgentTeamRef',
+                type: 'object',
+              },
+            },
+            properties: {
+              name: {
+                description: 'The name of the SaaS application.',
+                metadata: {
+                  tooltip_message: 'The application name to be used in the deployed SaaS application.',
+                },
+                minLength: 1,
+                title: 'Name',
+                type: 'string',
+              },
+              repo_name: {
+                description: 'The name of the GitHub repository.',
+                metadata: {
+                  immutable_after_creation: true,
+                  tooltip_message:
+                    'The GitHub repository to be created. If the name contains spaces or special characters, GitHub will adjust it according to its naming rules. A random suffix will be added if the repository name already exists.',
+                },
+                minLength: 1,
+                title: 'Repo Name',
+                type: 'string',
+              },
+              fly_app_name: {
+                description: 'The name of the Fly.io application.',
+                maxLength: 30,
+                metadata: {
+                  immutable_after_creation: true,
+                  tooltip_message:
+                    'The Fly.io application. This will be used to create and deploy your React, Node.js, and PostgreSQL apps to Fly.io.',
+                },
+                minLength: 1,
+                title: 'Fly App Name',
+                type: 'string',
+              },
+              team: {
+                allOf: [
+                  {
+                    $ref: '#/$defs/TwoAgentTeamRef',
+                  },
+                ],
+                description: 'The team that is used in the deployment',
+                metadata: {
+                  tooltip_message:
+                    "Choose the team to be used for deployment. User messages are sent to the Initial agent of the chosen team, and the agent's responses are sent back to the user. This field can be updated anytime to switch teams, with changes reflected in real-time in your deployments.",
+                },
+                title: 'Team Name',
+              },
+              gh_token: {
+                allOf: [
+                  {
+                    $ref: '#/$defs/GitHubTokenRef',
+                  },
+                ],
+                description: 'The GitHub token to use for creating a new repository',
+                metadata: {
+                  immutable_after_creation: true,
+                  tooltip_message:
+                    'Choose the GitHub token used for authenticating and managing access to your GitHub account.',
+                },
+                title: 'GH Token',
+              },
+              fly_token: {
+                allOf: [
+                  {
+                    $ref: '#/$defs/FlyTokenRef',
+                  },
+                ],
+                description: 'The Fly.io token to use for deploying the deployment',
+                metadata: {
+                  immutable_after_creation: true,
+                  tooltip_message:
+                    'Choose the Fly.io token used for authenticating and managing access to your Fly.io account.',
+                },
+                title: 'Fly Token',
+              },
+            },
+            required: ['name', 'repo_name', 'fly_app_name', 'team', 'gh_token', 'fly_token'],
+            title: 'Deployment',
+            type: 'object',
+          },
+        },
+      ],
+    },
   ],
 };
 
@@ -1047,3 +1568,88 @@ export const llmUserProperties: UserProperties[] = [
     updated_at: '2024-08-08T09:09:52.523000Z',
   },
 ];
+
+// @ts-ignore
+export const deploymentUserProperties: UserProperties[] = [
+  ..._.cloneDeep(llmUserProperties),
+  {
+    uuid: '42e34575-2029-4055-9460-3bf5e2745ddf',
+    user_uuid: 'dae81928-8e99-48c2-be5d-61a5b422cf47',
+    type_name: 'secret',
+    model_name: 'GitHubToken',
+    json_str: {
+      name: 'GitHub Token',
+      gh_token: 'ghp-someRadomToken', // pragma: allowlist secret
+    },
+    created_at: '2024-09-11T10:00:26.817000Z',
+    updated_at: '2024-09-11T10:00:26.817000Z',
+  },
+  {
+    uuid: 'e94cf6f2-f82a-4513-81dc-03adfe8ca9c9',
+    user_uuid: 'dae81928-8e99-48c2-be5d-61a5b422cf47',
+    type_name: 'secret',
+    model_name: 'FlyToken',
+    json_str: {
+      name: 'Fly Token',
+      fly_token: 'Fly-someRadomToken', // pragma: allowlist secret
+    },
+    created_at: '2024-09-11T10:00:40.198000Z',
+    updated_at: '2024-09-11T10:00:40.198000Z',
+  },
+  {
+    uuid: 'b36dabf6-cc06-4673-8060-68d7b58f6c4e',
+    user_uuid: 'dae81928-8e99-48c2-be5d-61a5b422cf47',
+    type_name: 'agent',
+    model_name: 'AssistantAgent',
+    json_str: {
+      llm: {
+        name: 'AzureOAI',
+        type: 'llm',
+        uuid: 'db945991-c142-4863-a96b-d81cc03e99de',
+      },
+      name: 'Standup_Comedian',
+      toolbox_1: null,
+      toolbox_2: null,
+      toolbox_3: null,
+      system_message:
+        'As a standup comedian, your task is to deliver short jokes in response to user questions. Whenever people ask who are you or what you do, just say you are "standup comedian"',
+    },
+    created_at: '2024-09-11T09:50:24.914000Z',
+    updated_at: '2024-09-11T09:50:24.914000Z',
+  },
+  {
+    uuid: '2329d22e-ced3-417a-9ff6-b09964512344',
+    user_uuid: 'dae81928-8e99-48c2-be5d-61a5b422cf47',
+    type_name: 'agent',
+    model_name: 'UserProxyAgent',
+    json_str: {
+      name: 'UserProxy_Agent',
+      max_consecutive_auto_reply: null,
+    },
+    created_at: '2024-09-11T09:50:34.719000Z',
+    updated_at: '2024-09-11T09:50:34.719000Z',
+  },
+  {
+    uuid: '31273537-4cd5-4437-b5d0-222e3549259f',
+    user_uuid: 'dae81928-8e99-48c2-be5d-61a5b422cf47',
+    type_name: 'team',
+    model_name: 'TwoAgentTeam',
+    json_str: {
+      name: 'Standup Comedian',
+      initial_agent: {
+        name: 'UserProxyAgent',
+        type: 'agent',
+        uuid: '2329d22e-ced3-417a-9ff6-b09964512344',
+      },
+      secondary_agent: {
+        name: 'AssistantAgent',
+        type: 'agent',
+        uuid: 'b36dabf6-cc06-4673-8060-68d7b58f6c4e',
+      },
+      human_input_mode: 'ALWAYS',
+      is_termination_msg_regex: 'TERMINATE',
+    },
+    created_at: '2024-09-11T09:50:44.674000Z',
+    updated_at: '2024-09-11T09:50:44.674000Z',
+  },
+];
diff --git a/app/src/client/utils/constants.ts b/app/src/client/utils/constants.ts
index 50c6435a..4004589b 100644
--- a/app/src/client/utils/constants.ts
+++ b/app/src/client/utils/constants.ts
@@ -16,7 +16,8 @@ function deepFreeze(object: any) {
 
 export const SECRETS_TO_MASK = ['api_key', 'gh_token', 'fly_token', 'password'];
 
-export const DEPLOYMENT_INSTRUCTIONS = `<div class="leading-loose ml-2 mr-2"><span class="text-l inline-block my-2 underline">GitHub Repository Created</span>
+export const DEPLOYMENT_INSTRUCTIONS = `<div class="leading-loose ml-2 mr-2"><span class="text-l inline-block my-2">Hurray!!! The deployment is successful. Please follow the below instructions for further details.</span>
+<span class="text-l inline-block my-2 underline">GitHub Repository Created</span>
 <span class="ml-5">- We have created a new <a class="underline" href="<gh_repo_url>" target="_blank" rel="noopener noreferrer">GitHub repository</a> in your GitHub account.</span>
 <span class="ml-5">- The application code will be pushed to this repository in a few seconds.</span>
 <span class="text-l inline-block my-2 underline">Checking Deployment Status</span>
diff --git a/app/tailwind.config.cjs b/app/tailwind.config.cjs
index 27e10944..b769f513 100644
--- a/app/tailwind.config.cjs
+++ b/app/tailwind.config.cjs
@@ -19,6 +19,8 @@ module.exports = {
         'airt-hero-gradient-middle': '#5cbae0',
         'airt-footer-copyrights': '#003a60',
         'airt-error': '#EF5C00',
+        'airt-disabled-input-bg': '#F2F2F2',
+        'airt-disabled-input-color': '#999999',
         current: 'currentColor',
         transparent: 'transparent',
         // white: '#FFFFFF',