docs(web): update doc links (#5970)

novuhq · Jul 3, 2024 · d40ce2f · d40ce2f
1 parent 8c58678
commit d40ce2f
Show file tree

Hide file tree

Showing 12 changed files with 143 additions and 118 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -100,6 +100,8 @@
     "Consolas",
     "consts",
     "containerd",
+    "Mobishastra",
+    "mobishastra",
     "cpack",
     "Craco",
     "crossorigin",

diff --git a/apps/web/src/components/docs/docs.const.ts b/apps/web/src/components/docs/docs.const.ts
@@ -1,20 +1,14 @@
 import { ROUTES } from '../../constants/routes';
 
 export const PATHS: { [key in ROUTES]?: string } = {
-  [ROUTES.ACTIVITIES]: 'activity-feed/introduction',
-  [ROUTES.LAYOUT]: 'content-creation-design/layouts',
-  [ROUTES.CHANGES]: 'platform/environments',
-  [ROUTES.INTEGRATIONS]: 'channels-and-providers/integration-store',
-  [ROUTES.SUBSCRIBERS]: 'subscribers/subscribers',
-  [ROUTES.WORKFLOWS]: 'workflows/notification-workflows',
-  [ROUTES.TENANTS]: 'tenants/introduction',
-  [ROUTES.TRANSLATIONS]: 'content-creation-design/translations',
-  [ROUTES.STUDIO_ONBOARDING]: 'framework/quickstart',
-  [ROUTES.STUDIO_ONBOARDING_PREVIEW]: 'framework/concepts/workflows',
-  [ROUTES.STUDIO_FLOWS]: 'framework/concepts/workflows',
-  [ROUTES.STUDIO_FLOWS_VIEW]: 'framework/concepts/workflows',
-  [ROUTES.STUDIO_FLOWS_STEP_EDITOR]: 'framework/concepts/workflows',
-  [ROUTES.STUDIO_FLOWS_TEST]: 'framework/concepts/workflows',
+  // [ROUTES.INTEGRATIONS]: 'integrations/providers/introduction',
+  [ROUTES.SUBSCRIBERS]: 'concepts/subscribers',
+  [ROUTES.WORKFLOWS]: 'concepts/workflows',
+  [ROUTES.TENANTS]: 'concepts/tenants',
+  [ROUTES.STUDIO_ONBOARDING]: 'quickstart/nextjs',
+  [ROUTES.STUDIO_ONBOARDING_PREVIEW]: 'concepts/controls',
+  [ROUTES.STUDIO_FLOWS]: 'workflow/introduction',
+  [ROUTES.STUDIO_FLOWS_VIEW]: 'workflow/introduction',
 };
 
 export const DOCS_URL = 'https://docs.novu.co';

diff --git a/apps/web/src/components/layout/components/LocalStudioSidebar/LocalStudioSidebarContent.tsx b/apps/web/src/components/layout/components/LocalStudioSidebar/LocalStudioSidebarContent.tsx
@@ -8,11 +8,11 @@ import { NavMenuSection } from '../../../nav/NavMenuSection';
 import { LocalStudioSidebarOrganizationDisplay } from './LocalStudioSidebarOrganizationDisplay';
 import { LocalStudioSidebarToggleButton } from './LocalStudioSidebarToggleButtonProps';
 import { token } from '@novu/novui/tokens';
-import { DocsButton } from '../../../docs/DocsButton';
 import { css, cx } from '@novu/novui/css';
 import { useStudioState } from '../../../../studio/StudioStateProvider';
 import { WithLoadingSkeleton } from '@novu/novui';
 import { NavMenuButtonInner, rawButtonBaseStyles } from '../../../nav/NavMenuButton/NavMenuButton.shared';
+import { useDocsModal } from '../../../docs/useDocsModal';
 
 type LocalStudioSidebarContentProps = {
   workflows: IBridgeWorkflow[];
@@ -24,33 +24,43 @@ export const LocalStudioSidebarContent: WithLoadingSkeleton<FC<LocalStudioSideba
   isLoading,
 }) => {
   const { organizationName } = useStudioState();
+  const { Component, toggle, setPath } = useDocsModal();
 
   if (isLoading) {
     return <LoadingDisplay />;
   }
 
   return (
-    <NavMenu variant="root">
-      <LocalStudioSidebarOrganizationDisplay title={organizationName || 'Your organization '} subtitle="Local studio" />
-      <NavMenuSection>
-        <DocsButton
-          tooltip={'Open a guide'}
-          TriggerButton={({ onClick }) => (
-            <button onClick={onClick} className={css({ width: 'full' })}>
-              <NavMenuButtonInner
-                icon={<IconAdd />}
-                className={cx(css({ cursor: 'pointer', justifyContent: 'flex-start' }), css(rawButtonBaseStyles))}
-              >
-                Add a workflow
-              </NavMenuButtonInner>
-            </button>
-          )}
+    <>
+      <NavMenu variant="root">
+        <LocalStudioSidebarOrganizationDisplay
+          title={organizationName || 'Your organization '}
+          subtitle="Local studio"
         />
-        {workflows?.map((workflow) => (
-          <LocalStudioSidebarToggleButton key={workflow.workflowId} workflow={workflow} />
-        ))}
-      </NavMenuSection>
-    </NavMenu>
+        <NavMenuSection>
+          <button
+            onClick={(e) => {
+              e.preventDefault();
+              setPath('workflow/introduction');
+              toggle();
+            }}
+            className={css({ width: 'full' })}
+          >
+            <NavMenuButtonInner
+              icon={<IconAdd />}
+              className={cx(css({ cursor: 'pointer', justifyContent: 'flex-start' }), css(rawButtonBaseStyles))}
+            >
+              Add a workflow
+            </NavMenuButtonInner>
+          </button>
+
+          {workflows?.map((workflow) => (
+            <LocalStudioSidebarToggleButton key={workflow.workflowId} workflow={workflow} />
+          ))}
+        </NavMenuSection>
+      </NavMenu>
+      <Component />
+    </>
   );
 };
 

diff --git a/apps/web/src/components/layout/components/v2/BridgeUpdateModal.tsx b/apps/web/src/components/layout/components/v2/BridgeUpdateModal.tsx
@@ -1,30 +1,33 @@
 import { Modal, successMessage } from '@novu/design-system';
 import { css } from '@novu/novui/css';
-import { Button, Input, Title, Text } from '@novu/novui';
+import { text } from '@novu/novui/recipes';
+import { Button, Input, Title } from '@novu/novui';
 import { IconOutlineMenuBook } from '@novu/novui/icons';
-import { HStack, Box } from '@novu/novui/jsx';
+import { HStack, Box, styled } from '@novu/novui/jsx';
 import { FC, useEffect, useState } from 'react';
 import { validateBridgeUrl } from '../../../../api/bridge';
-import { updateBridgeUrl } from '../../../../api/environment';
-import { useEnvironment } from '../../../../hooks/useEnvironment';
-import { DocsButton } from '../../../docs/DocsButton';
-import { hstack } from '@novu/novui/patterns';
-import { validateURL } from '../../../../utils/url';
+import { updateBridgeUrl } from '../../../../api';
+import { useEnvironment } from '../../../../hooks';
+import { validateURL } from '../../../../utils';
 import { useStudioState } from '../../../../studio/StudioStateProvider';
 import { buildBridgeHTTPClient } from '../../../../bridgeApi/bridgeApi.client';
 import { useTelemetry } from '../../../../hooks/useNovuAPI';
+import { useDocsModal } from '../../../docs/useDocsModal';
+import { DOCS_URL } from '../../../docs/docs.const';
 
 export type BridgeUpdateModalProps = {
   isOpen: boolean;
   toggleOpen: () => void;
 };
+const LinkText = styled('a', text);
 
 export const BridgeUpdateModal: FC<BridgeUpdateModalProps> = ({ isOpen, toggleOpen }) => {
   const track = useTelemetry();
   const { isLocalStudio, bridgeURL, setBridgeURL } = useStudioState();
   const [urlError, setUrlError] = useState<string>('');
   const [url, setUrl] = useState(bridgeURL);
   const [isUpdating, setIsUpdating] = useState(false);
+  const { Component, toggle, setPath } = useDocsModal();
 
   const { environment, isLoading: isLoadingEnvironment } = useEnvironment();
 
@@ -99,34 +102,43 @@ export const BridgeUpdateModal: FC<BridgeUpdateModalProps> = ({ isOpen, toggleOp
   const isLoading = isLoadingEnvironment || isUpdating;
 
   return (
-    <Modal opened={isOpen} title={<Title variant="section">Update Novu Endpoint URL</Title>} onClose={toggleOpen}>
-      <Box colorPalette={'mode.local'}>
-        <Input
-          label={'Novu Endpoint URL'}
-          description={
-            'This url should be a full URL to the Novu Endpoint including the /api/novu path, e.g. https://your.api.com/api/novu'
-          }
-          onChange={onBridgeUrlChange}
-          value={url}
-          disabled={isLoading}
-          variant="preventLayoutShift"
-          error={urlError}
-          className={css({ marginBottom: '16px' })}
-        />
-        <HStack justify={'space-between'}>
-          <DocsButton
-            TriggerButton={({ onClick }) => (
-              <button onClick={onClick} className={hstack({ gap: 'margins.icons.Icon20-txt', cursor: 'pointer' })}>
-                <IconOutlineMenuBook />
-                <Text variant="secondary">Learn more in the docs</Text>
-              </button>
-            )}
+    <>
+      <Modal opened={isOpen} title={<Title variant="section">Update Novu Endpoint URL</Title>} onClose={toggleOpen}>
+        <Box colorPalette={'mode.local'}>
+          <Input
+            label={'Novu Endpoint URL'}
+            description={
+              'This url should be a full URL to the Novu Endpoint including the /api/novu path, e.g. https://your.api.com/api/novu'
+            }
+            onChange={onBridgeUrlChange}
+            value={url}
+            disabled={isLoading}
+            variant="preventLayoutShift"
+            error={urlError}
+            className={css({ marginBottom: '16px' })}
           />
-          <Button size={'md'} loading={isLoading} onClick={onUpdateClick}>
-            Update
-          </Button>
-        </HStack>
-      </Box>
-    </Modal>
+          <HStack justify={'space-between'}>
+            <div>
+              <HStack gap="50" className={css({ color: 'typography.text.secondary' })}>
+                <IconOutlineMenuBook />
+                <LinkText
+                  onClick={(e) => {
+                    e.preventDefault();
+                    window.open(`${DOCS_URL}/concepts/endpoint`, '_blank');
+                  }}
+                  href=""
+                >
+                  Learn more in our docs
+                </LinkText>
+              </HStack>
+            </div>
+            <Button size={'md'} loading={isLoading} onClick={onUpdateClick}>
+              Update
+            </Button>
+          </HStack>
+        </Box>
+      </Modal>
+      <Component />
+    </>
   );
 };
diff --git a/apps/web/src/pages/settings/WebhookPage/WebhookAdditionalInformationLink.tsx b/apps/web/src/pages/settings/WebhookPage/WebhookAdditionalInformationLink.tsx
@@ -12,7 +12,7 @@ export const WebhookAdditionalInformationLink: FC = () => {
         justifyContent: 'flex-start',
         gap: '50',
       })}
-      href="https://docs.novu.co/platform/inbound-parse-webhook"
+      href="https://v0.x-docs.novu.co/platform/inbound-parse-webhook"
       target="_blank"
       rel="noopener noreferrer"
     >

diff --git a/apps/web/src/pages/studio-onboarding/components/Footer.tsx b/apps/web/src/pages/studio-onboarding/components/Footer.tsx
@@ -8,6 +8,7 @@ import { When } from '../../../components/utils/When';
 import { DocsButton } from '../../../components/docs/DocsButton';
 import { Button } from '@novu/novui';
 import { useTelemetry } from '../../../hooks/useNovuAPI';
+import { DOCS_URL, PATHS } from '../../../components/docs/docs.const';
 
 const Text = styled('a', text);
 
@@ -61,7 +62,7 @@ export const Footer = ({
                         track('Documentation linked clicked - [Onboarding - Signup]', {
                           step: pathname,
                         });
-                        onDocsClick();
+                        window.open(`${DOCS_URL}/${PATHS[pathname]}`, '_blank');
                       }}
                       href=""
                     >

diff --git a/apps/web/src/studio/components/GetStartedPageV2/index.tsx b/apps/web/src/studio/components/GetStartedPageV2/index.tsx
@@ -49,6 +49,7 @@ const BadgeButton = ({
           paddingRight: '50',
           fontSize: '75',
           borderRadius: 's',
+          cursor: 'pointer',
         }),
         className
       )}
@@ -192,7 +193,7 @@ export const GetStartedPageV2 = () => {
               <BadgeButton
                 onClick={() => {
                   track('Examples link clicked - [Workflows empty state]');
-                  window.open('http://docs.novu.co/how-to/introduction', '_blank');
+                  window.open('https://docs.novu.co/guides/workflows/introduction', '_blank');
                 }}
                 className={css({
                   marginBottom: '150',

diff --git a/apps/web/src/studio/components/workflows/node-view/WorkflowFloatingMenu.tsx b/apps/web/src/studio/components/workflows/node-view/WorkflowFloatingMenu.tsx
@@ -16,15 +16,15 @@ import { VStack } from '@novu/novui/jsx';
 import { vstack } from '@novu/novui/patterns';
 import { FC, PropsWithChildren } from 'react';
 import { useDocsModal } from '../../../../components/docs/useDocsModal';
+import { DOCS_URL } from '../../../../components/docs/docs.const';
 
 type IWorkflowFloatingMenuProps = CoreProps;
 
 export const WorkflowFloatingMenu: FC<IWorkflowFloatingMenuProps> = ({ className }) => {
   const { Component: DocsModal, setPath, toggle } = useDocsModal();
 
   const handleClick = (pathToSet: string) => () => {
-    setPath('framework/steps/' + pathToSet);
-    toggle();
+    window.open(`${DOCS_URL}/sdks/framework/typescript/steps/${pathToSet}`, '_blank');
   };
 
   return (
@@ -41,12 +41,17 @@ export const WorkflowFloatingMenu: FC<IWorkflowFloatingMenuProps> = ({ className
             tooltipLabel="Guide of how to add a Delay step for embedding in code"
             onClick={handleClick('delay')}
           />
+          <WorkflowFloatingMenuButton
+            Icon={IconOutlineBolt}
+            tooltipLabel="Guide of how to add a Custom step for embedding in code"
+            onClick={handleClick('custom')}
+          />
         </WorkflowFloatingMenuSection>
         <WorkflowFloatingMenuSection title="Channels">
           <WorkflowFloatingMenuButton
             Icon={IconOutlineNotifications}
             tooltipLabel="Guide of how to add an In-app step for embedding in code"
-            onClick={handleClick('in-app')}
+            onClick={handleClick('inbox')}
           />
           <WorkflowFloatingMenuButton
             Icon={IconOutlineEmail}
@@ -68,11 +73,6 @@ export const WorkflowFloatingMenu: FC<IWorkflowFloatingMenuProps> = ({ className
             tooltipLabel="Guide of how to add a Chat step for embedding in code"
             onClick={handleClick('chat')}
           />
-          <WorkflowFloatingMenuButton
-            Icon={IconOutlineBolt}
-            tooltipLabel="Guide of how to add a Custom step for embedding in code"
-            onClick={handleClick('custom')}
-          />
         </WorkflowFloatingMenuSection>
       </menu>
       <DocsModal />

diff --git a/apps/web/src/studio/components/workflows/step-editor/WorkflowStepEditorControlsPanel.tsx b/apps/web/src/studio/components/workflows/step-editor/WorkflowStepEditorControlsPanel.tsx
@@ -34,8 +34,12 @@ export const WorkflowStepEditorControlsPanel: FC<IWorkflowStepEditorControlsPane
   const { Component, toggle, setPath } = useDocsModal();
   const havePayloadProperties = useMemo(() => {
     return (
-      Object.keys(workflow?.payload?.schema || workflow?.options?.payloadSchema || workflow?.payloadSchema || {})
-        .length > 0
+      Object.keys(
+        workflow?.payload?.schema?.properties ||
+          workflow?.options?.payloadSchema?.properties ||
+          workflow?.payloadSchema?.properties ||
+          {}
+      ).length > 0
     );
   }, [workflow?.payload?.schema, workflow?.options?.payloadSchema, workflow?.payloadSchema]);
 
@@ -88,7 +92,7 @@ export const WorkflowStepEditorControlsPanel: FC<IWorkflowStepEditorControlsPane
                   <ControlsEmptyPanel
                     content="Modifiable controls defined by the code schema."
                     onDocsClick={() => {
-                      setPath('framework/concepts/controls');
+                      setPath('concepts/controls');
                       toggle();
                     }}
                   />
@@ -115,7 +119,7 @@ export const WorkflowStepEditorControlsPanel: FC<IWorkflowStepEditorControlsPane
                   <ControlsEmptyPanel
                     content="Payload ensures correct formatting and data validity."
                     onDocsClick={() => {
-                      setPath('framework/concepts/payload');
+                      setPath('workflow/introduction#payload-schema');
                       toggle();
                     }}
                   />

diff --git a/apps/web/src/studio/components/workflows/test-workflow/WorkflowTestControlsPanel.tsx b/apps/web/src/studio/components/workflows/test-workflow/WorkflowTestControlsPanel.tsx
@@ -6,6 +6,7 @@ import { ChannelTypeEnum } from '@novu/shared';
 import { FC, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { When } from '../../../../components/utils/When';
+import { formContainerClassName } from '../step-editor/WorkflowStepEditorControlsPanel';
 
 export type ToSubscriber = {
   subscriberId: string;
@@ -43,7 +44,7 @@ export const WorkflowTestControlsPanel: FC<IWorkflowTestControlsPanelProps> = ({
   }, [watch]);
 
   return (
-    <Stack gap="margins.layout.page.vertical">
+    <Stack gap="margins.layout.page.vertical" className={formContainerClassName}>
       <Box>
         <HStack gap="50" mb="margins.layout.page.sub-section.titleBottom">
           <IconOutlineSend />