set up for javascript

Signed-off-by: Hannah Hunter <hannahhunter@microsoft.com>

daprdocs/content/en/developing-applications/building-blocks/workflow/howto-author-workflow.md

@@ -34,7 +34,7 @@ The Dapr sidecar doesn’t load any workflow definitions. Rather, the sidecar si
 
 [Workflow activities]({{< ref "workflow-features-concepts.md#workflow-activites" >}}) are the basic unit of work in a workflow and are the tasks that get orchestrated in the business process.
 
-{{< tabs Python ".NET" Java >}}
+{{< tabs Python JavaScript ".NET" Java >}}
 
 {{% codetab %}}
 
@@ -52,6 +52,21 @@ def hello_act(ctx: WorkflowActivityContext, input):
 [See the `hello_act` workflow activity in context.](https://github.com/dapr/python-sdk/blob/master/examples/demo_workflow/app.py#LL40C1-L43C59)
 
 
+{{% /codetab %}}
+
+{{% codetab %}}
+
+<!--javascript-->
+
+Define the workflow activities you'd like your workflow to perform. Activities are a function definition and can take inputs and outputs. The following example creates a counter (activity) called `hello_act` that notifies users of the current counter value. `hello_act` is a function derived from a class called `WorkflowActivityContext`.
+
+```javascript
+
+```
+
+[See the workflow activity in context.](https://github.com/dapr/python-sdk/blob/master/examples/demo_workflow/app.py#LL40C1-L43C59)
+
+
 {{% /codetab %}}
 
 {{% codetab %}}
@@ -172,7 +187,7 @@ public class DemoWorkflowActivity implements WorkflowActivity {
 
 Next, register and call the activites in a workflow. 
 
-{{< tabs Python ".NET" Java >}}
+{{< tabs Python JavaScript ".NET" Java >}}
 
 {{% codetab %}}
 
@@ -193,6 +208,21 @@ def hello_world_wf(ctx: DaprWorkflowContext, input):
 [See the `hello_world_wf` workflow in context.](https://github.com/dapr/python-sdk/blob/master/examples/demo_workflow/app.py#LL32C1-L38C51)
 
 
+{{% /codetab %}}
+
+{{% codetab %}}
+
+<!--javascript-->
+
+The `hello_world_wf` function is derived from a class called `DaprWorkflowContext` with input and output parameter types. It also includes a `yield` statement that does the heavy lifting of the workflow and calls the workflow activities. 
+ 
+```javascript
+
+```
+
+[See the `hello_world_wf` workflow in context.](https://github.com/dapr/python-sdk/blob/master/examples/demo_workflow/app.py#LL32C1-L38C51)
+
+
 {{% /codetab %}}
 
 {{% codetab %}}
@@ -275,7 +305,7 @@ public class DemoWorkflowWorker {
 
 Finally, compose the application using the workflow.
 
-{{< tabs Python ".NET" Java >}}
+{{< tabs Python JavaScript ".NET" Java >}}
 
 {{% codetab %}}
 
@@ -364,6 +394,25 @@ if __name__ == '__main__':
 ```
 
 
+{{% /codetab %}}
+
+{{% codetab %}}
+
+<!--javascript-->
+
+[In the following example](https://github.com/dapr/python-sdk/blob/master/examples/demo_workflow/app.py), for a basic JavaScript hello world application using the Go SDK, your project code would include:
+
+- A JavaScript package called `todo` to receive the Go SDK capabilities.
+- A builder with extensions called:
+  - `WorkflowRuntime`: Allows you to register workflows and workflow activities
+  - `DaprWorkflowContext`: Allows you to [create workflows]({{< ref "#write-the-workflow" >}})
+  - `WorkflowActivityContext`: Allows you to [create workflow activities]({{< ref "#write-the-workflow-activities" >}})
+- API calls. In the example below, these calls start, pause, resume, purge, and terminate the workflow.
+ 
+```go
+
+```
+
 {{% /codetab %}}
 
 {{% codetab %}}
@@ -504,5 +553,6 @@ Now that you've authored a workflow, learn how to manage it.
 - [Workflow API reference]({{< ref workflow_api.md >}})
 - Try out the full SDK examples:
   - [Python example](https://github.com/dapr/python-sdk/tree/master/examples/demo_workflow)
+  - [JavaScript example](todo)
   - [.NET example](https://github.com/dapr/dotnet-sdk/tree/master/examples/Workflow)
   - [Java example](https://github.com/dapr/java-sdk/tree/master/examples/src/main/java/io/dapr/examples/workflows)

daprdocs/content/en/developing-applications/building-blocks/workflow/howto-manage-workflow.md

@@ -12,7 +12,7 @@ Dapr Workflow is currently in beta. [See known limitations for {{% dapr-latest-v
 
 Now that you've [authored the workflow and its activities in your application]({{< ref howto-author-workflow.md >}}), you can start, terminate, and get information about the workflow using HTTP API calls. For more information, read the [workflow API reference]({{< ref workflow_api.md >}}).
 
-{{< tabs Python ".NET" Java HTTP >}}
+{{< tabs Python JavaScript ".NET" Java HTTP >}}
 
 <!--Python-->
 {{% codetab %}}
@@ -63,6 +63,24 @@ d.terminate_workflow(instance_id=instanceId, workflow_component=workflowComponen
 
 {{% /codetab %}}
 
+<!--JavaScript-->
+{{% codetab %}}
+
+Manage your workflow within your code. In the workflow example from the [Author a workflow]({{< ref "howto-author-workflow.md#write-the-application" >}}) guide, the workflow is registered in the code using the following APIs:
+- **start_workflow**: Start an instance of a workflow
+- **get_workflow**: Get information on the status of the workflow
+- **pause_workflow**: Pauses or suspends a workflow instance that can later be resumed
+- **resume_workflow**: Resumes a paused workflow instance
+- **raise_workflow_event**: Raise an event on a workflow
+- **purge_workflow**: Removes all metadata related to a specific workflow instance
+- **terminate_workflow**: Terminate or stop a particular instance of a workflow
+
+```javascript
+
+```
+
+{{% /codetab %}}
+
 <!--NET-->
 {{% codetab %}}
 
@@ -242,6 +260,7 @@ Learn more about these HTTP calls in the [workflow API reference guide]({{< ref
 - [Try out the Workflow quickstart]({{< ref workflow-quickstart.md >}})
 - Try out the full SDK examples:
   - [Python example](https://github.com/dapr/python-sdk/blob/master/examples/demo_workflow/app.py)
+  - [JavaScript example](todo)
   - [.NET example](https://github.com/dapr/dotnet-sdk/tree/master/examples/Workflow)
   - [Java example](https://github.com/dapr/java-sdk/tree/master/examples/src/main/java/io/dapr/examples/workflows)
 

daprdocs/content/en/developing-applications/building-blocks/workflow/workflow-features-concepts.md

@@ -162,7 +162,15 @@ APIs that generate random numbers, random UUIDs, or the current date are _non-de
 
 For example, instead of this:
 
-{{< tabs ".NET" Java >}}
+{{< tabs JavaScript ".NET" Java >}}
+
+{{% codetab %}}
+
+```javascript
+// DON'T DO THIS!
+```
+
+{{% /codetab %}}
 
 {{% codetab %}}
 
@@ -190,7 +198,15 @@ string randomString = GetRandomString();
 
 Do this:
 
-{{< tabs ".NET" Java >}}
+{{< tabs JavaScript ".NET" Java >}}
+
+{{% codetab %}}
+
+```javascript
+// Do this!!
+```
+
+{{% /codetab %}}
 
 {{% codetab %}}
 
@@ -224,7 +240,14 @@ Instead, workflows should interact with external state _indirectly_ using workfl
 
 For example, instead of this:
 
-{{< tabs ".NET" Java >}}
+{{< tabs JavaScript ".NET" Java >}}
+
+{{% codetab %}}
+
+```javascript
+// DON'T DO THIS!
+```
+{{% /codetab %}}
 
 {{% codetab %}}
 
@@ -251,7 +274,15 @@ HttpResponse<String> response = HttpClient.newBuilder().build().send(request, Ht
 
 Do this:
 
-{{< tabs ".NET" Java >}}
+{{< tabs JavaScript ".NET" Java >}}
+
+{{% codetab %}}
+
+```javascript
+// Do this!!
+```
+
+{{% /codetab %}}
 
 {{% codetab %}}
 
@@ -285,7 +316,14 @@ Failure to follow this rule could result in undefined behavior. Any background p
 
 For example, instead of this:
 
-{{< tabs ".NET" Java >}}
+{{< tabs JavaScript ".NET" Java >}}
+
+{{% codetab %}}
+
+```javascript
+// DON'T DO THIS!
+```
+{{% /codetab %}}
 
 {{% codetab %}}
 
@@ -312,7 +350,15 @@ ctx.createTimer(Duration.ofSeconds(5)).await();
 
 Do this:
 
-{{< tabs ".NET" Java >}}
+{{< tabs JavaScript ".NET" Java >}}
+
+{{% codetab %}}
+
+```javascript
+// Do this!!
+```
+
+{{% /codetab %}}
 
 {{% codetab %}}
 

daprdocs/content/en/developing-applications/building-blocks/workflow/workflow-overview.md

@@ -73,16 +73,6 @@ Learn more about [different types of workflow patterns]({{< ref workflow-pattern
 
 The Dapr Workflow _authoring SDKs_ are language-specific SDKs that contain types and functions to implement workflow logic. The workflow logic lives in your application and is orchestrated by the Dapr Workflow engine running in the Dapr sidecar via a gRPC stream.
 
-### Supported SDKs
-
-You can use the following SDKs to author a workflow.
-
-| Language stack | Package |
-| - | - |
-| Python | [dapr-ext-workflow](https://github.com/dapr/python-sdk/tree/master/ext/dapr-ext-workflow) |
-| .NET | [Dapr.Workflow](https://www.nuget.org/profiles/dapr.io) |
-| Java | [io.dapr.workflows](https://dapr.github.io/java-sdk/io/dapr/workflows/package-summary.html) |
-
 ## Try out workflows
 
 ### Quickstarts and tutorials
@@ -93,18 +83,16 @@ Want to put workflows to the test? Walk through the following quickstart and tut
 | ------------------- | ----------- |
 | [Workflow quickstart]({{< ref workflow-quickstart.md >}}) | Run a workflow application with four workflow activities to see Dapr Workflow in action  |
 | [Workflow Python SDK example](https://github.com/dapr/python-sdk/tree/master/examples/demo_workflow) | Learn how to create a Dapr Workflow and invoke it using the Python `DaprClient` package. |
+| [Workflow JavaScript SDK example](todo) | Learn how to create a Dapr Workflow and invoke it using the JavaScript `todo` package. |
 | [Workflow .NET SDK example](https://github.com/dapr/dotnet-sdk/tree/master/examples/Workflow) | Learn how to create a Dapr Workflow and invoke it using ASP.NET Core web APIs. |
 | [Workflow Java SDK example](https://github.com/dapr/java-sdk/tree/master/examples/src/main/java/io/dapr/examples/workflows) | Learn how to create a Dapr Workflow and invoke it using the Java `io.dapr.workflows` package. |
 
-
 ### Start using workflows directly in your app
 
 Want to skip the quickstarts? Not a problem. You can try out the workflow building block directly in your application. After [Dapr is installed]({{< ref install-dapr-cli.md >}}), you can begin using  workflows, starting with [how to author a workflow]({{< ref howto-author-workflow.md >}}).
 
 ## Limitations
 
-With Dapr Workflow in beta stage comes the following limitation(s):
-
 - **State stores:** For the {{% dapr-latest-version cli="true" %}} beta release of Dapr Workflow, using the NoSQL databases as a state store results in limitations around storing internal states. For example, CosmosDB has a maximum single operation item limit of only 100 states in a single request.
 
 - **Horizontal scaling:** For the {{% dapr-latest-version cli="true" %}} beta release of Dapr Workflow, if you scale out Dapr sidecars or your application pods to more than 2, then the concurrency of the workflow execution drops. It is recommended to test with 1 or 2 instances, and no more than 2.
@@ -123,6 +111,7 @@ Watch [this video for an overview on Dapr Workflow](https://youtu.be/s1p9MNl4VGo
 
 - [Workflow API reference]({{< ref workflow_api.md >}})
 - Try out the full SDK examples:
-  - [.NET example](https://github.com/dapr/dotnet-sdk/tree/master/examples/Workflow)
   - [Python example](https://github.com/dapr/python-sdk/tree/master/examples/demo_workflow)
+  - [JavaScript example](todo)
+  - [.NET example](https://github.com/dapr/dotnet-sdk/tree/master/examples/Workflow)
   - [Java example](https://github.com/dapr/java-sdk/tree/master/examples/src/main/java/io/dapr/examples/workflows)

daprdocs/content/en/developing-applications/building-blocks/workflow/workflow-patterns.md

@@ -25,7 +25,7 @@ While the pattern is simple, there are many complexities hidden in the implement
 
 Dapr Workflow solves these complexities by allowing you to implement the task chaining pattern concisely as a simple function in the programming language of your choice, as shown in the following example.
 
-{{< tabs Python ".NET" Java >}}
+{{< tabs Python JavaScript ".NET" Java >}}
 
 {{% codetab %}}
 <!--python-->
@@ -72,6 +72,15 @@ def error_handler(ctx, error):
 
 {{% /codetab %}}
 
+{{% codetab %}}
+<!--javascript-->
+
+```javascript
+
+```
+
+{{% /codetab %}}
+
 {{% codetab %}}
 <!--dotnet-->
 
@@ -186,7 +195,7 @@ In addition to the challenges mentioned in [the previous pattern]({{< ref "workf
 
 Dapr Workflows provides a way to express the fan-out/fan-in pattern as a simple function, as shown in the following example:
 
-{{< tabs Python ".NET" Java >}}
+{{< tabs Python JavaScript ".NET" Java >}}
 
 {{% codetab %}}
 <!--python-->
@@ -228,6 +237,15 @@ def process_results(ctx, final_result: int):
 
 {{% /codetab %}}
 
+{{% codetab %}}
+<!--javascript-->
+
+```javascript
+
+```
+
+{{% /codetab %}}
+
 {{% codetab %}}
 <!--dotnet-->
 
@@ -379,7 +397,7 @@ Depending on the business needs, there may be a single monitor or there may be m
 
 Dapr Workflow supports this pattern natively by allowing you to implement _eternal workflows_. Rather than writing infinite while-loops ([which is an anti-pattern]({{< ref "workflow-features-concepts.md#infinite-loops-and-eternal-workflows" >}})), Dapr Workflow exposes a _continue-as-new_ API that workflow authors can use to restart a workflow function from the beginning with a new input.
 
-{{< tabs Python ".NET" Java >}}
+{{< tabs Python JavaScript ".NET" Java >}}
 
 {{% codetab %}}
 <!--python-->
@@ -428,6 +446,17 @@ def send_alert(ctx, message: str):
 
 {{% /codetab %}}
 
+{{% codetab %}}
+<!--javascript-->
+
+```javascript
+
+```
+
+> This example assumes you have a predefined `MyEntityState` class with a boolean `IsHealthy` property.
+
+{{% /codetab %}}
+
 {{% codetab %}}
 <!--dotnet-->
 
@@ -540,7 +569,7 @@ The following diagram illustrates this flow.
 
 The following example code shows how this pattern can be implemented using Dapr Workflow.
 
-{{< tabs Python ".NET" Java >}}
+{{< tabs Python JavaScript ".NET" Java >}}
 
 {{% codetab %}}
 <!--python-->
@@ -601,6 +630,15 @@ def place_order(_, order: Order) -> None:
 
 {{% /codetab %}}
 
+{{% codetab %}}
+<!--javascript-->
+
+```javascript
+
+```
+
+{{% /codetab %}}
+
 {{% codetab %}}
 <!--dotnet-->
 
@@ -686,7 +724,7 @@ public class ExternalSystemInteractionWorkflow extends Workflow {
 
 The code that delivers the event to resume the workflow execution is external to the workflow. Workflow events can be delivered to a waiting workflow instance using the [raise event]({{< ref "howto-manage-workflow.md#raise-an-event" >}}) workflow management API, as shown in the following example:
 
-{{< tabs Python ".NET" Java >}}
+{{< tabs Python JavaScript ".NET" Java >}}
 
 {{% codetab %}}
 <!--python-->
@@ -705,6 +743,15 @@ with DaprClient() as d:
 
 {{% /codetab %}}
 
+{{% codetab %}}
+<!--javascript-->
+
+```javascript
+// Raise the workflow event to the waiting workflow
+```
+
+{{% /codetab %}}
+
 {{% codetab %}}
 <!--dotnet-->
 
@@ -744,5 +791,6 @@ External events don't have to be directly triggered by humans. They can also be
 - [Workflow API reference]({{< ref workflow_api.md >}})
 - Try out the following examples: 
    - [Python](https://github.com/dapr/python-sdk/tree/master/examples/demo_workflow)
+   - [JavaScript](todo)
    - [.NET](https://github.com/dapr/dotnet-sdk/tree/master/examples/Workflow)
    - [Java](https://github.com/dapr/java-sdk/tree/master/examples/src/main/java/io/dapr/examples/workflows)

daprdocs/content/en/getting-started/quickstarts/workflow-quickstart.md

@@ -21,7 +21,7 @@ In this guide, you'll:
 <img src="/images/workflow-quickstart-overview.png" width=800 style="padding-bottom:15px;">
 
 
-{{< tabs "Python" ".NET" "Java" >}}
+{{< tabs "Python" "JavaScript" ".NET" "Java" >}}
 
  <!-- Python -->
 {{% codetab %}}
@@ -265,6 +265,113 @@ In `workflow.py`, the workflow is defined as a class with all of its associated
         message=f'Order {order_id} has completed!'))
     return OrderResult(processed=True) 
 ```
+{{% /codetab %}}
+
+ <!-- JavaScript -->
+{{% codetab %}}
+
+The `order-processor` console app starts and manages the lifecycle of an order processing workflow that stores and retrieves data in a state store. The workflow consists of four workflow activities, or tasks:
+- `NotifyActivity`: Utilizes a logger to print out messages throughout the workflow
+- `ReserveInventoryActivity`: Checks the state store to ensure that there is enough inventory for the purchase
+- `ProcessPaymentActivity`: Processes and authorizes the payment
+- `UpdateInventoryActivity`: Removes the requested items from the state store and updates the store with the new remaining inventory value
+
+
+### Step 1: Pre-requisites
+
+For this example, you will need:
+
+- [Dapr CLI and initialized environment](https://docs.dapr.io/getting-started).
+- [Latest Node.js installed](https://nodejs.org/download/).
+<!-- IGNORE_LINKS -->
+- [Docker Desktop](https://www.docker.com/products/docker-desktop)
+<!-- END_IGNORE -->
+
+### Step 2: Set up the environment
+
+Clone the [sample provided in the Quickstarts repo](https://github.com/dapr/quickstarts/tree/master/workflows).
+
+```bash
+git clone https://github.com/dapr/quickstarts.git
+```
+
+In a new terminal window, navigate to the `order-processor` directory:
+
+```bash
+cd workflows/javascript/sdk/order-processor
+```
+
+### Step 3: Run the order processor app
+
+In the terminal, start the order processor app alongside a Dapr sidecar:
+
+```bash
+dapr run 
+```
+
+This starts the `order-processor` app with unique workflow ID and runs the workflow activities. 
+
+Expected output:
+
+```
+
+```
+
+### (Optional) Step 4: View in Zipkin
+
+Running `dapr init` launches the [openzipkin/zipkin](https://hub.docker.com/r/openzipkin/zipkin/) Docker container. If the container has stopped running, launch the Zipkin Docker container with the following command:
+
+```
+docker run -d -p 9411:9411 openzipkin/zipkin
+```
+
+View the workflow trace spans in the Zipkin web UI (typically at `http://localhost:9411/zipkin/`). 
+
+<img src="/images/workflow-trace-spans-zipkin.png" width=800 style="padding-bottom:15px;">
+
+### What happened?
+
+When you ran `dapr run `:
+
+1. A unique order ID for the workflow is generated (in the above example, `6d2abcc9`) and the workflow is scheduled.
+1. The `NotifyActivity` workflow activity sends a notification saying an order for 10 cars has been received.
+1. The `ReserveInventoryActivity` workflow activity checks the inventory data, determines if you can supply the ordered item, and responds with the number of cars in stock.
+1. Your workflow starts and notifies you of its status.
+1. The `ProcessPaymentActivity` workflow activity begins processing payment for order `6d2abcc9` and confirms if successful.
+1. The `UpdateInventoryActivity` workflow activity updates the inventory with the current available cars after the order has been processed.
+1. The `NotifyActivity` workflow activity sends a notification saying that order `6d2abcc9` has completed.
+1. The workflow terminates as completed.
+
+#### `order-processor/index.js` 
+
+In the application's program file:
+- The unique workflow order ID is generated
+- The workflow is scheduled
+- The workflow status is retrieved
+- The workflow and the workflow activities it invokes are registered
+
+```javascript
+
+```
+
+#### `order-processor/Workflows/OrderProcessingWorkflow.js`
+
+In `OrderProcessingWorkflow.js`, the workflow is defined as a class with all of its associated tasks (determined by workflow activities).
+
+```javascript
+
+```
+
+#### `order-processor/Activities` directory
+
+The `Activities` directory holds the four workflow activities used by the workflow, defined in the following files:
+
+## Watch the demo
+
+Watch [this video to walk through the Dapr Workflow .NET demo](https://youtu.be/BxiKpEmchgQ?t=2564):
+
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/BxiKpEmchgQ?start=2564" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
 {{% /codetab %}}
 
  <!-- .NET -->