Merge branch 'main' into carlos/fix-numbers-img-path

Author: Alek99

assets/ai_builder/integrations/databricks_integration_oauth_1.webp

@@ -50,7 +50,41 @@ rx.el.div(
 )
 ```
 
-3 - Generate a **Personal Access Token** (**DATABRICKS_TOKEN**):
+
+3 - Get your **DATABRICKS_CATALOG** and **DATABRICKS_SCHEMA**:
+   - Click the SQL Editor from the sidebar.
+   - Choose the **DATABRICKS_CATALOG** and **DATABRICKS_SCHEMA** from the dropdowns as shown below.
+
+
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/databricks_integration_4.webp",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
+)
+```
+
+```python eval
+rx.box(height="2rem")
+```
+
+4 - Obtain your authentication credentials:
+
+There are two methods to authenticate your app with Databricks: using a **Personal Access Token** or via **OAuth**. Choose one of the methods below to obtain the necessary credentials.
+
+
+---md tabs
+
+--tab Personal Access Token
+## Generate a Personal Access Token (DATABRICKS_TOKEN)
+
+
    - Click on your profile icon → **Settings**.
    - Click **Developer**.
    - Click **Manage** in Access Tokens.
@@ -86,16 +120,21 @@ rx.el.div(
 )
 ```
 
-4 - Get your **DATABRICKS_CATALOG** and **DATABRICKS_SCHEMA**:
-   - Click the SQL Editor from the sidebar.
-   - Choose the **DATABRICKS_CATALOG** and **DATABRICKS_SCHEMA** from the dropdowns as shown below.
+
+
+
+--
+--tab OAuth
+## Use OAuth (DATABRICKS_CLIENT_ID and DATABRICKS_CLIENT_SECRET)
+
+- Open the dropdown in the top right corner and select **Manage Account**.
 
 
 ```python eval
 rx.el.div(
     image_zoom(
         rx.image(
-            src="/ai_builder/integrations/databricks_integration_4.webp",
+            src="/ai_builder/integrations/databricks_integration_oauth_1.webp",
             class_name="p-2 rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
@@ -105,6 +144,107 @@ rx.el.div(
 )
 ```
 
+- Select `Users and Groups`
+
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/databricks_integration_oauth_2.webp",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
+)
+```
+
+- Select the `Service Principals` tab and click `Add Service Principal`.
+
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/databricks_integration_oauth_3.webp",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
+)
+```
+
+- Fill in the details and click `Add Service Principal`.
+
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/databricks_integration_oauth_4.webp",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
+)
+```
+
+- Click the `Credentials and Secrets` tab and click `Generate Secret`.
+
+
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/databricks_integration_oauth_5.webp",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
+)
+```
+
+- Set a lifetime for the secrets and click `Generate`.
+
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/databricks_integration_oauth_6.webp",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
+)
+```
+
+- Copy the generated **DATABRICKS_CLIENT_ID** and **DATABRICKS_CLIENT_SECRET**.
+
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/databricks_integration_oauth_7.webp",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
+)
+```
+
+--
+
+---
+
 
 
 ## Step 2: Configure the Integration in Your App

assets/ai_builder/integrations/databricks_integration_oauth_2.webp

@@ -2,7 +2,7 @@
 
 import reflex as rx
 import reflex_ui as ui
-from reflex_ui.blocks.lemcal import lemcal_dialog
+from reflex_ui.blocks.demo_form import demo_form_dialog
 
 from pcweb.components.hosting_banner import hosting_banner
 from pcweb.constants import REFLEX_BUILD_URL, REFLEX_CLOUD_URL
@@ -548,7 +548,7 @@ def new_component_section() -> rx.Component:
                 class_name="desktop-only",
             ),
             ui.navigation_menu.item(
-                render_=lemcal_dialog(
+                render_=demo_form_dialog(
                     ui.button(
                         "Book a Demo",
                         size="sm",

assets/ai_builder/integrations/databricks_integration_oauth_3.webp

@@ -1,6 +1,6 @@
 import reflex as rx
 import reflex_ui as ui
-from reflex_ui.blocks.lemcal import lemcal_dialog
+from reflex_ui.blocks.demo_form import demo_form_dialog
 
 VIDEO_URL = "https://youtu.be/Hy3uhBVRdtk?si=Z5szIyInkBfeG2lk&t=92s"
 
@@ -37,7 +37,7 @@ def text() -> rx.Component:
             ),
             class_name="text-slate-12 lg:text-3xl text-2xl font-semibold max-w-[57rem]",
         ),
-        lemcal_dialog(
+        demo_form_dialog(
             ui.button(
                 "Get Personalized Walkthrough",
                 size="lg",