forked from novuhq/novu
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(web): Local studio being local (novuhq#5812)
* feat(web): Load local studio via npm run dev * feat: Add back button via header --------- Co-authored-by: Denis Kralj <[email protected]> Co-authored-by: Joel Anton <[email protected]> Co-authored-by: Dima Grossman <[email protected]>
- Loading branch information
4 people
authored
Jun 26, 2024
1 parent
452c5b8
commit 0e4c0e3
Showing
49 changed files
with
1,071 additions
and
344 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -361,6 +361,7 @@ | |
| "npmjs", | ||
| "npmrc", | ||
| "nrwl", | ||
| "ntfr", | ||
| "ntoa", | ||
| "ntvs", | ||
| "nunito", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import axios from 'axios'; | ||
|
|
||
| export type StepPreviewParams = { | ||
| workflowId: string; | ||
| stepId: string; | ||
| payload: Record<string, unknown>; | ||
| controls: Record<string, unknown>; | ||
| }; | ||
|
|
||
| export type TriggerParams = { | ||
| workflowId: string; | ||
| bridgeUrl?: string; | ||
| to: { subscriberId: string; email: string }; | ||
| payload: Record<string, unknown>; | ||
| }; | ||
|
|
||
| export function buildBridgeHTTPClient(baseURL: string) { | ||
| const httpClient = axios.create({ | ||
| baseURL, | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| // Required for localtunnel.it | ||
| 'Bypass-Tunnel-Reminder': true, | ||
| }, | ||
| }); | ||
|
|
||
| const get = async (url, params = {}) => { | ||
| try { | ||
| const response = await httpClient.get(url, { params }); | ||
|
|
||
| return response.data; | ||
| } catch (error) { | ||
| // TODO: Handle error?.response?.data || error?.response || error; | ||
| throw error; | ||
| } | ||
| }; | ||
|
|
||
| // POST method | ||
| const post = async (url, data = {}) => { | ||
| try { | ||
| const response = await httpClient.post(url, data); | ||
|
|
||
| return response.data; | ||
| } catch (error) { | ||
| // TODO: Handle error?.response?.data || error?.response || error; | ||
| throw error; | ||
| } | ||
| }; | ||
|
|
||
| return { | ||
| /** | ||
| * TODO: Use framework shared types | ||
| */ | ||
| async discover(): Promise<{ workflows: any[] }> { | ||
| return get('', { | ||
| action: 'discover', | ||
| }); | ||
| }, | ||
|
|
||
| /** | ||
| * TODO: Use framework shared types | ||
| */ | ||
| async getWorkflow(workflowId: string): Promise<any> { | ||
| const { workflows } = await this.discover(); | ||
|
|
||
| return workflows.find((workflow) => workflow.workflowId === workflowId); | ||
| }, | ||
|
|
||
| /** | ||
| * TODO: Use framework shared types | ||
| */ | ||
| async getStepPreview({ workflowId, stepId, controls, payload }: StepPreviewParams): Promise<any> { | ||
| return post(`${baseURL}?action=preview&workflowId=${workflowId}&stepId=${stepId}`, { | ||
| // TODO: Rename to controls | ||
| inputs: controls || {}, | ||
| // TODO: Rename to payload | ||
| data: payload || {}, | ||
| }); | ||
| }, | ||
|
|
||
| /** | ||
| * TODO: Use framework shared types | ||
| */ | ||
| async trigger({ workflowId, bridgeUrl, to, payload }: TriggerParams): Promise<any> { | ||
| payload = payload || {}; | ||
| payload.__source = 'studio-test-workflow'; | ||
|
|
||
| return post(`${baseURL}?action=trigger&workflowId=${workflowId}`, { | ||
| bridgeUrl, | ||
| to, | ||
| payload, | ||
| }); | ||
| }, | ||
| }; | ||
| } |
43 changes: 43 additions & 0 deletions
43
apps/web/src/components/layout/components/LocalStudioHeader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { Header } from '@mantine/core'; | ||
| import { Text } from '@novu/novui'; | ||
| import { IconOutlineArrowBack } from '@novu/novui/icons'; | ||
| import { hstack } from '@novu/novui/patterns'; | ||
| import { FC } from 'react'; | ||
| import { useLocation, useNavigate } from 'react-router-dom'; | ||
| import { HEADER_NAV_HEIGHT } from '../constants'; | ||
|
|
||
| export const LocalStudioHeader: FC = () => { | ||
| const navigate = useNavigate(); | ||
|
|
||
| return ( | ||
| <Header | ||
| height={`${HEADER_NAV_HEIGHT}px`} | ||
| className={hstack({ | ||
| position: 'sticky', | ||
| top: 0, | ||
| borderBottom: 'none !important', | ||
| // TODO: fix when we re-do z-index across the app | ||
| zIndex: 199, | ||
| padding: '50', | ||
| justifyContent: 'flex-start', | ||
| })} | ||
| > | ||
| {/** TODO temporary back-button. To be refined later */} | ||
| <button | ||
| className={hstack({ | ||
| cursor: 'pointer', | ||
| gap: 'margins.icons.Icon20-txt', | ||
| px: '75', | ||
| py: '25', | ||
| _hover: { opacity: 'hover' }, | ||
| })} | ||
| onClick={() => navigate(-1)} | ||
| > | ||
| <IconOutlineArrowBack /> | ||
| <Text fontWeight="strong" color="typography.text.secondary"> | ||
| Back | ||
| </Text> | ||
| </button> | ||
| </Header> | ||
| ); | ||
| }; |
47 changes: 47 additions & 0 deletions
47
apps/web/src/components/layout/components/LocalStudioPageLayout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import * as Sentry from '@sentry/react'; | ||
| import { Outlet } from 'react-router-dom'; | ||
| import styled from '@emotion/styled'; | ||
| import { css } from '@novu/novui/css'; | ||
| import { LocalStudioHeader } from './LocalStudioHeader'; | ||
|
|
||
| const AppShell = styled.div` | ||
| display: flex; | ||
| width: 100vw; | ||
| height: 100vh; | ||
| min-width: 1024px; | ||
| `; | ||
|
|
||
| const ContentShell = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex: 1 1 0%; | ||
| overflow: hidden; // for appropriate scroll | ||
| `; | ||
|
|
||
| export function LocalStudioPageLayout() { | ||
| return ( | ||
| <Sentry.ErrorBoundary | ||
| fallback={({ error, eventId }) => ( | ||
| <> | ||
| Sorry, but something went wrong. <br /> | ||
| Our team has been notified and we are investigating. | ||
| <br /> | ||
| <code> | ||
| <small style={{ color: 'lightGrey' }}> | ||
| Event Id: {eventId}. | ||
| <br /> | ||
| {error.toString()} | ||
| </small> | ||
| </code> | ||
| </> | ||
| )} | ||
| > | ||
| <AppShell className={css({ '& *': { colorPalette: 'mode.local' } })}> | ||
| <ContentShell> | ||
| <LocalStudioHeader /> | ||
| <Outlet /> | ||
| </ContentShell> | ||
| </AppShell> | ||
| </Sentry.ErrorBoundary> | ||
| ); | ||
| } |
Oops, something went wrong.