Merge pull request #715 from novuhq/nv-4489-align-workflowid-and-work…

…flowname-between-dashboard docs(framework): Add workflow `name` and `description` documentation
novuhq · Oct 21, 2024 · 56eae6d · 56eae6d
2 parents e3c9267 + 9c09374
commit 56eae6d
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git a/images/inbox/framework-preferences-name.png b/images/inbox/framework-preferences-name.png
diff --git a/inbox/react/localization.mdx b/inbox/react/localization.mdx
@@ -34,4 +34,27 @@ function Novu() {
     />
   );
 }
-```
+```
+
+### Specifying the workflow name using Framework
+
+In addition to specifying a workflow name in the `<Inbox />` component, you can also specify the workflow name in your Framework definition. The `name` property is optional, so if you don't specify it, the `workflowId` will be used as the name.
+
+```typescript
+import { workflow } from '@novu/framework';
+
+const weeklyCommentsWorkflow = workflow(
+  'comment-on-post',
+  async ({ step }) => {
+    ...
+  });
+}, {
+  name: 'Post comments', // 👈 name is optional
+});
+```
+
+Now, your specified workflow name will be displayed in the `<Inbox />` component:
+
+<Frame caption="Localized workflow name">
+  <img src="/images/inbox/framework-preferences-name.png" />
+</Frame>
diff --git a/sdks/framework/typescript/steps/introduction.mdx b/sdks/framework/typescript/steps/introduction.mdx
@@ -110,7 +110,7 @@ This is an optional configuration object that defines: [Controls Schema](/framew
   from executing.
 </ResponseField>
 
-<ResponseField name="controlSchema" type="JSON Schema | Zod">
+<ResponseField name="controlSchema" type="JsonSchema | ZodSchema">
   This defined the UI Controls exposed in the dashboard for the step. They can
   be nested and of any JSON Schema supported structure.
 </ResponseField>

diff --git a/sdks/framework/typescript/workflow.mdx b/sdks/framework/typescript/workflow.mdx
@@ -16,12 +16,15 @@ sidebarTitle: "Workflow"
     }, {
       payloadSchema: z.object({
         body: z.string(),
-      },
+      }),
+      name: "My Workflow",
+      description: "This is a workflow",
+      tags: ["business", "critical"],
       preferences: {
         channels: {
           inApp: { enabled: true }
         },
-      }
+      },
     });
     ```
 </RequestExample>
@@ -51,10 +54,16 @@ workflow(
 <ParamField path="options" type="WorkflowOptions">
     An optional options object for workflow level configurations
 
-    <Expandable title="properties">
-        <ParamField path="payloadSchema" type="JSON Schema | Zod">
+    <Expandable title="properties" defaultOpen>
+        <ParamField path="payloadSchema" type="JsonSchema | ZodSchema">
             The schema to validate the event payload against, can be used to provide default values.
         </ParamField>
+        <ParamField path="name" type="string">
+            The name of the workflow. This is used to display a human-friendly name for the workflow in the Dashboard and `<Inbox />` component. If no value is specified, the `workflowId` will be used as the name.
+        </ParamField>
+        <ParamField path="description" type="string">
+            The description of the workflow. This is used to provide a brief overview of the workflow in the Dashboard.
+        </ParamField>
         <ParamField path="tags" type="string[]">
             The tags assigned to the workflow. Tags can be used to filter workflows in the dashboard, and can be used by channels such as Inbox to sort Notifications into different categories for a better user experience.
         </ParamField>