From dc469afeea9269c3bf98155aae65d7c10a2e2c10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Ga=C4=BEa?= <152011588+fgalaf@users.noreply.github.com> Date: Sun, 15 Dec 2024 12:03:30 +0100 Subject: [PATCH] feat: folder documentation (#3206) * add docs, save not working yet * working folder docs * revert unrelated changes * prettier fix * allow save folder with command * include folder docs in `bruno-collection` json export * docs --------- Co-authored-by: Filip Gala Co-authored-by: lohit --- .../Documentation/StyledWrapper.js | 10 +++ .../FolderSettings/Documentation/index.js | 63 +++++++++++++++++++ .../src/components/FolderSettings/index.js | 7 +++ .../bruno-app/src/providers/Hotkeys/index.js | 13 +++- .../ReduxStore/slices/collections/index.js | 16 ++++- .../bruno-app/src/utils/collections/index.js | 7 ++- 6 files changed, 110 insertions(+), 6 deletions(-) create mode 100644 packages/bruno-app/src/components/FolderSettings/Documentation/StyledWrapper.js create mode 100644 packages/bruno-app/src/components/FolderSettings/Documentation/index.js diff --git a/packages/bruno-app/src/components/FolderSettings/Documentation/StyledWrapper.js b/packages/bruno-app/src/components/FolderSettings/Documentation/StyledWrapper.js new file mode 100644 index 000000000..f159d94dc --- /dev/null +++ b/packages/bruno-app/src/components/FolderSettings/Documentation/StyledWrapper.js @@ -0,0 +1,10 @@ +import styled from 'styled-components'; + +const StyledWrapper = styled.div` + .editing-mode { + cursor: pointer; + color: ${(props) => props.theme.colors.text.yellow}; + } +`; + +export default StyledWrapper; diff --git a/packages/bruno-app/src/components/FolderSettings/Documentation/index.js b/packages/bruno-app/src/components/FolderSettings/Documentation/index.js new file mode 100644 index 000000000..81a3ccd01 --- /dev/null +++ b/packages/bruno-app/src/components/FolderSettings/Documentation/index.js @@ -0,0 +1,63 @@ +import 'github-markdown-css/github-markdown.css'; +import get from 'lodash/get'; +import { updateFolderDocs } from 'providers/ReduxStore/slices/collections'; +import { useTheme } from 'providers/Theme'; +import { useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions'; +import Markdown from 'components/MarkDown'; +import CodeEditor from 'components/CodeEditor'; +import StyledWrapper from './StyledWrapper'; + +const Documentation = ({ collection, folder }) => { + const dispatch = useDispatch(); + const { displayedTheme } = useTheme(); + const preferences = useSelector((state) => state.app.preferences); + const [isEditing, setIsEditing] = useState(false); + const docs = get(folder, 'root.docs', ''); + + const toggleViewMode = () => { + setIsEditing((prev) => !prev); + }; + + const onEdit = (value) => { + dispatch( + updateFolderDocs({ + folderUid: folder.uid, + collectionUid: collection.uid, + docs: value + }) + ); + }; + + const onSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid)); + + if (!folder) { + return null; + } + + return ( + +
+ {isEditing ? 'Preview' : 'Edit'} +
+ + {isEditing ? ( + + ) : ( + + )} + + ); +}; + +export default Documentation; diff --git a/packages/bruno-app/src/components/FolderSettings/index.js b/packages/bruno-app/src/components/FolderSettings/index.js index 9c7dc087d..4e1eba753 100644 --- a/packages/bruno-app/src/components/FolderSettings/index.js +++ b/packages/bruno-app/src/components/FolderSettings/index.js @@ -7,6 +7,7 @@ import Script from './Script'; import Tests from './Tests'; import StyledWrapper from './StyledWrapper'; import Vars from './Vars'; +import Documentation from './Documentation'; import DotIcon from 'components/Icons/Dot'; const ContentIndicator = () => { @@ -60,6 +61,9 @@ const FolderSettings = ({ collection, folder }) => { case 'vars': { return ; } + case 'docs': { + return ; + } } }; @@ -89,6 +93,9 @@ const FolderSettings = ({ collection, folder }) => { Vars {activeVarsCount > 0 && {activeVarsCount}} +
setTab('docs')}> + Docs +
{getTabPanel(tab)}
diff --git a/packages/bruno-app/src/providers/Hotkeys/index.js b/packages/bruno-app/src/providers/Hotkeys/index.js index 87d187ddd..f9316eb94 100644 --- a/packages/bruno-app/src/providers/Hotkeys/index.js +++ b/packages/bruno-app/src/providers/Hotkeys/index.js @@ -6,7 +6,12 @@ import { useSelector, useDispatch } from 'react-redux'; import EnvironmentSettings from 'components/Environments/EnvironmentSettings'; import NetworkError from 'components/ResponsePane/NetworkError'; import NewRequest from 'components/Sidebar/NewRequest'; -import { sendRequest, saveRequest, saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions'; +import { + sendRequest, + saveRequest, + saveCollectionRoot, + saveFolderRoot +} from 'providers/ReduxStore/slices/collections/actions'; import { findCollectionByUid, findItemInCollection } from 'utils/collections'; import { closeTabs, switchTab } from 'providers/ReduxStore/slices/tabs'; import { getKeyBindingsForActionAllOS } from './keyMappings'; @@ -43,7 +48,11 @@ export const HotkeysProvider = (props) => { if (collection) { const item = findItemInCollection(collection, activeTab.uid); if (item && item.uid) { - dispatch(saveRequest(activeTab.uid, activeTab.collectionUid)); + if (activeTab.type === 'folder-settings') { + dispatch(saveFolderRoot(collection.uid, item.uid)); + } else { + dispatch(saveRequest(activeTab.uid, activeTab.collectionUid)); + } } else if (activeTab.type === 'collection-settings') { dispatch(saveCollectionRoot(collection.uid)); } diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js index b7ef2f86e..8e936fb68 100644 --- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js +++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js @@ -1,6 +1,5 @@ import { uuid } from 'utils/common'; -import path from 'path'; -import { find, map, forOwn, concat, filter, each, cloneDeep, get, set, debounce } from 'lodash'; +import { find, map, forOwn, concat, filter, each, cloneDeep, get, set } from 'lodash'; import { createSlice } from '@reduxjs/toolkit'; import { addDepth, @@ -13,6 +12,7 @@ import { findEnvironmentInCollection, findItemInCollection, findItemInCollectionByPathname, + isItemAFolder, isItemARequest } from 'utils/collections'; import { parsePathParams, parseQueryParams, splitOnFirst, stringifyQueryParams } from 'utils/url'; @@ -1733,6 +1733,15 @@ export const collectionsSlice = createSlice({ item.draft.request.docs = action.payload.docs; } } + }, + updateFolderDocs: (state, action) => { + const collection = findCollectionByUid(state.collections, action.payload.collectionUid); + const folder = collection ? findItemInCollection(collection, action.payload.folderUid) : null; + if (folder) { + if (isItemAFolder(folder)) { + set(folder, 'root.docs', action.payload.docs); + } + } } } }); @@ -1827,7 +1836,8 @@ export const { runRequestEvent, runFolderEvent, resetCollectionRunner, - updateRequestDocs + updateRequestDocs, + updateFolderDocs } = collectionsSlice.actions; export default collectionsSlice.reducer; diff --git a/packages/bruno-app/src/utils/collections/index.js b/packages/bruno-app/src/utils/collections/index.js index dcbb948e5..a88346a08 100644 --- a/packages/bruno-app/src/utils/collections/index.js +++ b/packages/bruno-app/src/utils/collections/index.js @@ -404,7 +404,7 @@ export const transformCollectionToSaveToExportAsFile = (collection, options = {} request: {} }; - let { request, meta } = si?.root || {}; + let { request, meta, docs } = si?.root || {}; let { headers, script = {}, vars = {}, tests } = request || {}; // folder level headers @@ -436,6 +436,11 @@ export const transformCollectionToSaveToExportAsFile = (collection, options = {} di.root.request.tests = tests; } + // folder level docs + if (docs?.length) { + di.root.docs = docs; + } + if (meta?.name) { di.root.meta = {}; di.root.meta.name = meta?.name;