feat(web): add docs for add workflow button (#5789)

apps/web/src/components/docs/docs.const.ts

@@ -11,6 +11,7 @@ export const PATHS: { [key in ROUTES]?: string } = {
   [ROUTES.TRANSLATIONS]: 'content-creation-design/translations',
   [ROUTES.STUDIO_ONBOARDING]: 'echo/quickstart',
   [ROUTES.STUDIO_ONBOARDING_PREVIEW]: 'echo/concepts/workflows',
+  [ROUTES.STUDIO_FLOWS]: 'echo/concepts/workflows',
 };
 
 export const DOCS_URL = 'https://docs.novu.co';

apps/web/src/components/docs/useDocsModal.tsx

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import { DocsModal } from './DocsModal';
+
+export const useDocsModal = () => {
+  const [docsOpen, setDocsOpen] = useState<boolean>(false);
+  const [path, setPath] = useState<string>('');
+
+  const toggleDocs = () => {
+    setDocsOpen((prevOpen) => !prevOpen);
+  };
+
+  return {
+    toggle: toggleDocs,
+    setPath,
+    Component: () => <DocsModal open={docsOpen} toggle={toggleDocs} path={path} />,
+  };
+};

apps/web/src/studio/components/workflows/list/WorkflowsListPage.tsx

@@ -6,6 +6,7 @@ import { PageTemplate } from '../../../layout/index';
 import { WorkflowsTable } from '../table/index';
 import { useQuery } from '@tanstack/react-query';
 import { bridgeApi } from '../../../../api/bridge/bridge.api';
+import { DocsButton } from '../../../../components/docs/DocsButton';
 
 export const WorkflowsListPage = () => {
   const { data, isLoading } = useQuery(['bridge-workflows'], async () => {
@@ -15,9 +16,13 @@ export const WorkflowsListPage = () => {
   return (
     <PageTemplate title="Workflows">
       <Flex justify={'space-between'}>
-        <Button onClick={() => alert('Add workflow!')} Icon={IconAddBox} size={'sm'} variant="transparent">
-          Add workflow
-        </Button>
+        <DocsButton
+          TriggerButton={({ onClick }) => (
+            <Button onClick={onClick} Icon={IconAddBox} size={'sm'} variant="transparent">
+              Add workflow
+            </Button>
+          )}
+        />
         <SearchInput placeholder="Type name or identifier..." />
       </Flex>
       <WorkflowsTable workflows={data?.workflows || []} isLoading={isLoading} />

apps/web/src/studio/components/workflows/node-view/WorkflowFloatingMenu.tsx

@@ -14,18 +14,13 @@ import {
 } from '@novu/novui/icons';
 import { VStack } from '@novu/novui/jsx';
 import { vstack } from '@novu/novui/patterns';
-import { FC, PropsWithChildren, useState } from 'react';
-import { DocsModal } from '../../../../components/docs/DocsModal';
+import { FC, PropsWithChildren } from 'react';
+import { useDocsModal } from '../../../../components/docs/useDocsModal';
 
 type IWorkflowFloatingMenuProps = CoreProps;
 
 export const WorkflowFloatingMenu: FC<IWorkflowFloatingMenuProps> = ({ className }) => {
-  const [docsOpen, setDocsOpen] = useState<boolean>(false);
-  const [path, setPath] = useState<string>('');
-
-  const toggle = () => {
-    setDocsOpen((prevOpen) => !prevOpen);
-  };
+  const { Component: DocsModal, setPath, toggle } = useDocsModal();
 
   const handleClick = (pathToSet: string) => () => {
     setPath('echo/steps/' + pathToSet);
@@ -80,7 +75,7 @@ export const WorkflowFloatingMenu: FC<IWorkflowFloatingMenuProps> = ({ className
           />
         </WorkflowFloatingMenuSection>
       </menu>
-      <DocsModal open={docsOpen} toggle={toggle} path={path} />
+      <DocsModal />
     </>
   );
 };