diff --git a/packages/bruno-app/src/components/AppView/EmptyAppState.js b/packages/bruno-app/src/components/AppView/EmptyAppState.js index cc9d267a8..9c14e43e5 100644 --- a/packages/bruno-app/src/components/AppView/EmptyAppState.js +++ b/packages/bruno-app/src/components/AppView/EmptyAppState.js @@ -33,14 +33,23 @@ const Wrapper = styled.div` font-size: 12px; line-height: 1.4; } + + .empty-app-actions { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + margin-top: 0.5rem; + } `; -const EmptyAppState = ({ title = 'No app yet', hint }) => ( +const EmptyAppState = ({ title = 'No app yet', hint, actions }) => ( {title} {hint ? {hint} : null} + {actions ? {actions} : null} ); diff --git a/packages/bruno-app/src/components/AppView/index.js b/packages/bruno-app/src/components/AppView/index.js index 718f49639..521e58283 100644 --- a/packages/bruno-app/src/components/AppView/index.js +++ b/packages/bruno-app/src/components/AppView/index.js @@ -13,8 +13,10 @@ import { toggleAppMode, initRunRequestEvent } from 'providers/ReduxStore/slices/collections'; +import { updateRequestPaneTab } from 'providers/ReduxStore/slices/tabs'; import { uuid } from 'utils/common'; import { useTheme } from 'providers/Theme'; +import Button from 'ui/Button'; import StyledWrapper from './StyledWrapper'; import EmptyAppState from './EmptyAppState'; import { @@ -287,6 +289,15 @@ const AppView = ({ item, collection, code }) => { dispatch(toggleAppMode({ enabled: false, itemUid: item.uid, collectionUid: collection.uid })); }, [dispatch, item.uid, collection.uid]); + const goToAppTab = useCallback(() => { + dispatch(updateRequestPaneTab({ uid: item.uid, requestPaneTab: 'app' })); + dispatch(toggleAppMode({ enabled: false, itemUid: item.uid, collectionUid: collection.uid })); + }, [dispatch, item.uid, collection.uid]); + + const openAppsDocs = useCallback(() => { + window?.ipcRenderer?.openExternal('https://link.usebruno.com/apps'); + }, []); + return ( @@ -308,7 +319,29 @@ const AppView = ({ item, collection, code }) => { ) : ( + + Add app code + + + Learn more + + > + )} /> )}