add visual editor docs (#5603)

this pr adds the visual editor docs, announced in the launch showcase
event. more additions required as eng and pm review.

[ ] pm review required
[ ] eng review required

<!-- vercel-deployment-preview -->
---
🚀 Deployment available! Here are the direct links to the updated files:


-
https://docs-getdbt-com-git-mwong-add-visual-editor-dbt-labs.vercel.app/docs/cloud/about-cloud/about-dbt-cloud
-
https://docs-getdbt-com-git-mwong-add-visual-editor-dbt-labs.vercel.app/docs/cloud/about-develop-dbt
-
https://docs-getdbt-com-git-mwong-add-visual-editor-dbt-labs.vercel.app/docs/cloud/use-visual-editor
-
https://docs-getdbt-com-git-mwong-add-visual-editor-dbt-labs.vercel.app/docs/cloud/visual-editor-interface
-
https://docs-getdbt-com-git-mwong-add-visual-editor-dbt-labs.vercel.app/docs/cloud/visual-editor

<!-- end-vercel-deployment-preview -->

---------

Co-authored-by: Matt Shaver <[email protected]>

website/docs/docs/cloud/about-cloud/about-dbt-cloud.md

@@ -28,6 +28,12 @@ dbt Cloud's [flexible plans](https://www.getdbt.com/pricing/) and features make
     link="/docs/cloud/dbt-cloud-ide/develop-in-the-cloud"
     icon="dbt-bit"/>
 
+<Card
+    title="Visual editor (beta)"
+    body="Develop with the visual editor, a seamless drag-and-drop experience that helps analysts quickly create and visualize dbt models in dbt Cloud."
+    link="/docs/cloud/visual-editor"
+    icon="dbt-bit"/>
+
 <Card
     title="Manage environments"
     body="Set up and manage separate production and development environments in dbt Cloud to help engineers develop and test code more efficiently, without impacting users or data."
@@ -99,6 +105,6 @@ dbt Cloud's [flexible plans](https://www.getdbt.com/pricing/) and features make
 ## Related docs
 
 - [dbt Cloud plans and pricing](https://www.getdbt.com/pricing/)
-- [Quickstart guides](/guides)
+- [Quickstart guides](/docs/get-started-dbt)
 - [dbt Cloud IDE](/docs/cloud/dbt-cloud-ide/develop-in-the-cloud)
 

website/docs/docs/cloud/about-develop-dbt.md

@@ -9,9 +9,9 @@ hide_table_of_contents: true
 
 Develop dbt projects using dbt Cloud, which offers a fast and reliable way to work on your dbt project. It runs dbt Core in a hosted (single or multi-tenant) environment.
 
-You can develop in your browser using an integrated development environment (IDE) or in a dbt Cloud-powered command line interface (CLI).
+You can develop in your browser using an integrated development environment (IDE), a dbt Cloud-powered command line interface (CLI), or visual editor.
 
-<div className="grid--2-col" >
+<div className="grid--3-col" >
 
 <Card
     title="dbt Cloud CLI"
@@ -25,6 +25,12 @@ You can develop in your browser using an integrated development environment (IDE
     link="/docs/cloud/dbt-cloud-ide/develop-in-the-cloud"
     icon="dbt-bit"/>
 
+   <Card
+    title="Visual editor (beta)"
+    body="Develop with the visual editor, a seamless drag-and-drop experience that helps analysts quickly create and visualize dbt models in dbt Cloud."
+    link="/docs/cloud/visual-editor"
+    icon="dbt-bit"/>
+
 </div><br />
 
 To get started, you'll need a [dbt Cloud](https://www.getdbt.com/signup) account and a developer seat. For a more comprehensive guide about developing in dbt, refer to the [quickstart guides](/docs/get-started-dbt).

website/docs/docs/cloud/use-visual-editor.md

@@ -0,0 +1,84 @@
+---
+title: "Edit and create dbt models" 
+id: use-visual-editor      
+sidebar_label: "Edit and create dbt models" 
+description: "Access and use the visual editor to create or edit dbt models through a visual, drag-and-drop experience inside of dbt Cloud." 
+pagination_prev: "docs/cloud/visual-editor-interface"
+---
+
+# Edit and create dbt models <Lifecycle status='beta'/> 
+
+<p style={{ color: '#717d7d', fontSize: '1.1em' }}>
+Access and use the dbt Cloud visual editor to create or edit dbt models through a visual, drag-and-drop experience. Use the built-in AI for custom code generation in your development experience.
+</p>
+
+:::tip Beta feature
+The visual editor provides users with a seamless and drag-and-drop experience inside of dbt Cloud. It's available in private beta for [dbt Cloud Enterprise accounts](https://www.getdbt.com/pricing). 
+
+To join the private beta, [register your interest](https://docs.google.com/forms/d/e/1FAIpQLScPjRGyrtgfmdY919Pf3kgqI5E95xxPXz-8JoVruw-L9jVtxg/viewform) or reach out to your account team to begin this process.
+:::
+
+## Prerequisites
+- You have a [dbt Cloud Enterprise](https://www.getdbt.com/pricing) account
+- You have a [developer license](/docs/cloud/manage-access/seats-and-users) with developer credentials set up
+- You have an existing dbt Cloud project already created
+- You are [Keep on latest](/docs/dbt-versions/upgrade-dbt-version-in-cloud#keep-on-latest-version) for a versionless experience
+- Successful job run on Production or Staging [environment](/docs/dbt-cloud-environments)
+- Have AI-powered features toggle enabled
+
+## Access visual editor
+
+Before accessing the editor, you should have a dbt Cloud project already set up. This includes a Git repository, data platform connection, environments, and developer credentials. If you don't have this set up, please contact your dbt Cloud Admin.
+
+To access the visual editor:
+- Type in the following URL, replacing the ACCOUNT_ID and ENVIRONMENT_ID with your own account and environment ID: `https://ACCESS_URL/visual-editor/ACCOUNT_ID/env/ENVIRONMENT_ID/`
+  - The environment ID must have had runs that generated catalogs in it.
+
+- For example, if my region is North America multi-tenant, account ID is 10, environment ID with a generated catalog run is 100, my URL should be:
+
+  - `https://cloud.getdbt.com/visual-editor/10/env/100/`
+
+<Lightbox src="/img/docs/dbt-cloud/visual-editor/visual-editor.png" width="80%" title="Visual editor interface that contains a node toolbar and canvas." />
+
+## Create a model
+To create a dbt SQL model, click on **Create a new model** and perform the following steps. Note that you can't create source models in the visual editor. This is because you need to have production run with sources already created.
+
+1. Drag an operator from the operator toolbar and drop it onto the canvas.
+2. Click on the operator to open its configuration panel:
+	- **Model**: Select the model and columns you want to use.
+	- **Join**: Define the join conditions and choose columns from both tables.
+	- **Select**: Pick the columns you need from the model.
+	- **Aggregate**: Specify the aggregation functions and the columns they apply to.
+	- **Formula**: Add the formula to create a new column. Use the built-AI code generator to help generate SQL code by clicking on the question mark (?) icon. Enter your prompt and wait to see the results.
+	- **Filter**: Set the conditions to filter data.
+	- **Order**: Select the columns to sort by and the sort order.
+	- **Limit**: Set the maximum number of rows you want to return.
+3. View the **Output** and **SQL Code** tabs. 
+	- Each operator has an Output tab that allows you to preview the data from that configured node.
+	- The Code tab displays the SQL code generated by the node's configuration. Use this to see the SQL for your visual model config.
+4. Connect the operators by using the connector by dragging your cursor between the operator's "+" start point and linking it to the other operators you want to connect to. This should create a connector line. 
+	- Doing this allows the data to flow from the source table through various transformations you configured, to the final output.
+5. Keep building your dbt model and ensure you confirm the out through the **Output** tab.
+
+<!-- 
+### Configure nodes
+- Built-in AI code generator
+
+### View output
+-->
+
+## Edit an existing model
+To edit an existing model, navigate to the Visual Editor, click on the **Get Started** button on the upper right, and click **Edit existing model**. This will allow you to select the model you'd like to edit.
+
+<Lightbox src="/img/docs/dbt-cloud/visual-editor/edit-model.png" width="90%" title="Edit a model in the visual editor using the 'Edit a model' button." />
+
+## Version control
+
+Testing and documenting your models is an important part of the development process.  
+
+Stay tuned! Coming very soon, you'll be able to version control your dbt modes in the visual editor. This ensures you can track changes and revert to previous versions if needed.
+
+<!-- leaving this section here in case there's more to add later if needed
+## Limitations
+Are there limitations here?
+-->

website/docs/docs/cloud/visual-editor-interface.md

@@ -0,0 +1,84 @@
+--- 
+title: "Navigate the interface" 
+id: visual-editor-interface      
+sidebar_label: "Navigate the interface" 
+description: "The visual editor interface contains an operator toolbar, operators, and a canvas to help you create dbt models through a seamless drag-and-drop experience in dbt Cloud." 
+pagination_next: "docs/cloud/use-visual-editor"
+pagination_prev: "docs/cloud/visual-editor"
+
+---
+
+# Navigate the interface <Lifecycle status='beta'/> 
+
+<p style={{ color: '#717d7d', fontSize: '1.1em' }}>
+The visual editor interface contains an operator toolbar, operators, canvas, built-in AI, and more to help you create dbt models through a seamless drag-and-drop experience in dbt Cloud.
+</p>
+
+:::tip Beta feature
+The visual editor provides users with a seamless and visual, drag-and-drop experience inside dbt Cloud. It's available in private beta for [dbt Cloud Enterprise accounts](https://www.getdbt.com/pricing). 
+
+To join the private beta, [register your interest](https://docs.google.com/forms/d/e/1FAIpQLScPjRGyrtgfmdY919Pf3kgqI5E95xxPXz-8JoVruw-L9jVtxg/viewform) or reach out to your account team to begin this process.
+:::
+
+This page offers comprehensive definitions and terminology of user interface elements, allowing you to navigate the dbt Cloud visual editor landscape with ease.
+
+The visual editor interface is composed of:
+
+- **Operator toolbar** &mdash; Located at the top of the interface, the toolbar displays all the nodes available. Use the toggle on the left of the toolbar to display or hide it.
+- **Operators** &mdash; perform specific transformations or configurations (such as model, join, aggregate, filter, and so on). Use connectors to link the operators and build a complete data transformation pipeline. 
+- **Canvas** &mdash; The main whiteboard space below the node toolbar. The canvas allows you to create or modify models through a sleek drag-and-drop experience.
+- **Configuration panel** &mdash; Each operator has a configuration panel that opens when you click on it. The configuration panel allows you to configure the operator, review the current model, preview changes to the table, view the SQL code for the node, and delete the operator.
+
+## Operators
+
+The operator toolbar above the canvas contains the different transformation operators available to use. Use each operator to configure or perform specific tasks, like adding filters or joining models by dragging an operator onto the canvas. You can connect operators using the connector line, which allows you to form a complete dbt model for your data transformation.
+
+<Lightbox src="/img/docs/dbt-cloud/visual-editor/edit-model.png" width="90%" title="Use the operator toolbar to perform different transformation operations." />
+
+Here the following operators are available:
+- **Model**: This represents a data model. Use this to select the source table and the columns you want to include. There are no limits to the number of models you can have in a session.
+- **Join**: Join two models and configure the join conditions by selecting which columns to include from each table. Requires two inputs. For example, you might want to join both tables using the 'ID' column found in both tables.
+- **Select**: Use this to 'select' specific columns from a table.
+- **Aggregate**: Allows you to perform aggregations like GROUP, SUM, AVG, COUNT, and so on.
+- **Formula**: Create new columns using custom SQL formulas. Use a built-in AI code generator to generate SQL by clicking the ? icon. For example, you can use the formula node to only extract the email domain and ask the AI code generator to help you write the SQL for that code extraction.
+- **Filter**: Filter data based on conditions you set.
+- **Order**: Sort data by specific columns.
+- **Limit**: Limits the number of rows returned back.
+
+When you click on each operator, it opens a configuration panel. The configuration panel allows you to configure the operator, review the current model, preview changes to the model, view the SQL code for the node, and delete the operator.
+
+<Lightbox src="/img/docs/dbt-cloud/visual-editor/visual-editor.png" width="90%" title="Visual editor interface that contains a node toolbar and canvas." />
+
+If you have any feedback on additional operators that you might need, we'd love to hear it! Please contact your dbt Labs account team and share your thoughts.
+
+## Canvas
+
+The visual editor has a sleek drag-and-drop canvas interface that allows you to create or modify dbt SQL models. It's like a digital whiteboard space that allows analysts to deliver trustworthy data. Use the canvas to:
+
+- Drag-and-drop operators to create and configure your model(s)
+- Generate SQL code using the built-in AI generator
+- Zoom in or out for better visualization
+- Version-control your dbt models
+- [Coming soon] Test and document your created models
+
+<Lightbox src="/img/docs/dbt-cloud/visual-editor/operator.png" width="90%" title="The operator toolbar allows you to select different nodes to configure or perform specific tasks, like adding filters or joining models." />
+
+### Connector
+
+Connectors allow you to connect your operators to create dbt models. Once you've added operators to the canvas:
+- Hover over the "+" sign next to the operator and click. 
+- Drag your cursor between the operator's "+" start point to the other node you want to connect to. This should create a connector line.
+- As an example, to create a join, connect one operator to the "L" (Left) and the other to the "R" (Right). The endpoints are located to the left of the operator so you can easily drag the connectors to the endpoint.
+
+<Lightbox src="/img/docs/dbt-cloud/visual-editor/connector.png" width="100%" title="Click and drag your cursor to connect operators." />
+
+## Configuration panel
+Each operator has a configuration side panel that opens when you click on it. The configuration panel allows you to configure the operator, review the current model, preview changes, view the SQL code for the operator, and delete the operator.
+
+The configuration side panel has the following:
+- Configure tab &mdash; This section allows you to configure the operator to your specified requirements, such as using the built-in AI code generator to generate SQL.
+- Input tab &mdash; This section allows you to view the data for the current source table. Not available for model operators.
+- Output tab &mdash; This section allows you to preview the data for the modified source model.
+- Code &mdash; This section allows you to view the underlying SQL code for the data transformation.
+
+<Lightbox src="/img/docs/dbt-cloud/visual-editor/config-panel.png" width="90%" title="A sleek drag-and-drop canvas interface that allows you to create or modify dbt SQL models." />

website/docs/docs/cloud/visual-editor.md

@@ -0,0 +1,37 @@
+--- 
+title: "About the visual editor" 
+id: visual-editor       
+sidebar_label: "About the visual editor" 
+description: "The visual editor enables analysts to quickly create and visualize dbt models through a visual, drag-and-drop experience inside of dbt Cloud." 
+pagination_next: "docs/cloud/visual-editor-interface"
+pagination_prev: null
+---
+
+# About the visual editor <Lifecycle status='beta'/> 
+
+<p style={{ color: '#717d7d', fontSize: '1.1em' }}>
+The dbt Cloud visual editor helps analysts quickly create, edit, and visualize dbt models through a visual, drag-and-drop experience and with a built-in AI for custom code generation.
+</p>
+
+:::tip Beta feature
+The visual editor in dbt Cloud provides users with a seamless and visual, drag-and-drop experience inside dbt Cloud. It's available in private beta for [dbt Cloud Enterprise accounts](https://www.getdbt.com/pricing). 
+
+To join the private beta, [register your interest](https://docs.google.com/forms/d/e/1FAIpQLScPjRGyrtgfmdY919Pf3kgqI5E95xxPXz-8JoVruw-L9jVtxg/viewform) or reach out to your account team to begin this process.
+:::
+
+The visual editor allows organizations to enjoy the many benefits of code-driven development—such as increased precision, ease of debugging, and ease of validation &mdash; while retaining the flexibility to have different contributors develop wherever they are most comfortable. Users can also take advantage of built-in AI for custom code generation, making it an end-to-end frictionless experience.
+
+These models compile directly to SQL and are indistinguishable from other dbt models in your projects:
+- Visual models are version-controlled in your backing Git provider.
+- All models are accessible across projects in [dbt Mesh](/best-practices/how-we-mesh/mesh-1-intro).
+- Models can be materialized into production through [dbt Cloud orchestration](/docs/deploy/deployments), or be built directly into a user's development schema.
+- Integrate with [dbt Explorer](/docs/collaborate/explore-projects) and the [dbt Cloud IDE](/docs/cloud/dbt-cloud-ide/develop-in-the-cloud).
+
+<Lightbox src="/img/docs/dbt-cloud/visual-editor/visual-editor.png" width="90%" title="Create or edit dbt models with the Visual editor, enabling everyone to develop with dbt through a drag-and-drop experience inside of dbt Cloud." />
+
+## Feedback
+
+Please note, always review AI-generated code and content as it may produce incorrect results. The visual editor features and/or functionality may be added or eliminated as part of the beta trial.
+
+To give feedback, please reach out to your dbt Labs account team. We appreciate your feedback and suggestions as we improve the visual editor.
+

website/sidebars.js

@@ -302,9 +302,9 @@ const sidebarSettings = {
             },
           ],
         },
-      ],
-    },
-    {
+        ],
+      },
+      {
       type: "category",
       label: "Build dbt projects",
       collapsed: true,