From c27f090583ddf6c8e27ca7c20288aa405661ba5d Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Thu, 28 Sep 2023 04:02:20 +0530 Subject: [PATCH] feat(#95): runner runs inside a tab of a collection view --- .../src/components/RequestTabPanel/index.js | 3 +- .../RequestTabs/CollectionToolBar/index.js | 7 +- .../RequestTabs/RequestTab/SpecialTab.js | 10 +- .../RequestTabs/RequestTab/index.js | 2 +- .../src/components/RequestTabs/index.js | 122 +++++++++--------- .../src/components/RunnerResults/index.js | 14 +- .../CollectionItem/RunCollectionItem/index.js | 9 +- .../Collection/CollectionItem/index.js | 7 +- .../Sidebar/Collections/Collection/index.js | 19 ++- .../ReduxStore/slices/collections/actions.js | 1 - .../ReduxStore/slices/collections/index.js | 32 +---- .../src/providers/ReduxStore/slices/tabs.js | 8 +- .../bruno-schema/src/collections/index.js | 1 - 13 files changed, 109 insertions(+), 126 deletions(-) diff --git a/packages/bruno-app/src/components/RequestTabPanel/index.js b/packages/bruno-app/src/components/RequestTabPanel/index.js index 24aefd2ca..65ae097b0 100644 --- a/packages/bruno-app/src/components/RequestTabPanel/index.js +++ b/packages/bruno-app/src/components/RequestTabPanel/index.js @@ -120,8 +120,7 @@ const RequestTabPanel = () => { return
Collection not found!
; } - const showRunner = collection.showRunner; - if (showRunner) { + if (focusedTab.type === 'collection-runner') { return ; } diff --git a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js index 2103499ce..c0818c97e 100644 --- a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js +++ b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js @@ -4,7 +4,6 @@ import { IconFiles, IconRun, IconEye, IconSettings } from '@tabler/icons'; import EnvironmentSelector from 'components/Environments/EnvironmentSelector'; import { addTab } from 'providers/ReduxStore/slices/tabs'; import { useDispatch } from 'react-redux'; -import { toggleRunnerView } from 'providers/ReduxStore/slices/collections'; import StyledWrapper from './StyledWrapper'; const CollectionToolBar = ({ collection }) => { @@ -12,8 +11,10 @@ const CollectionToolBar = ({ collection }) => { const handleRun = () => { dispatch( - toggleRunnerView({ - collectionUid: collection.uid + addTab({ + uid: uuid(), + collectionUid: collection.uid, + type: 'collection-runner' }) ); }; diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js index cb8dfe7e2..64a58addf 100644 --- a/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js +++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js @@ -1,5 +1,5 @@ import React from 'react'; -import { IconVariable, IconSettings } from '@tabler/icons'; +import { IconVariable, IconSettings, IconRun } from '@tabler/icons'; const SpecialTab = ({ handleCloseClick, type }) => { const getTabInfo = (type) => { @@ -20,6 +20,14 @@ const SpecialTab = ({ handleCloseClick, type }) => { ); } + case 'collection-runner': { + return ( + <> + + Runner + + ); + } } }; diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js index d7664b71d..429100fee 100644 --- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js +++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js @@ -57,7 +57,7 @@ const RequestTab = ({ tab, collection }) => { return color; }; - if (['collection-settings', 'variables'].includes(tab.type)) { + if (['collection-settings', 'variables', 'collection-runner'].includes(tab.type)) { return ( diff --git a/packages/bruno-app/src/components/RequestTabs/index.js b/packages/bruno-app/src/components/RequestTabs/index.js index c51da327f..7a8ed4a84 100644 --- a/packages/bruno-app/src/components/RequestTabs/index.js +++ b/packages/bruno-app/src/components/RequestTabs/index.js @@ -76,8 +76,6 @@ const RequestTabs = () => { }); }; - const showRunner = activeCollection && activeCollection.showRunner; - // Todo: Must support ephermal requests return ( @@ -87,72 +85,70 @@ const RequestTabs = () => { {collectionRequestTabs && collectionRequestTabs.length ? ( <> - {!showRunner ? ( -
-
    - {showChevrons ? ( -
  • -
    - -
    -
    • - ) : null} - {/* Moved to post mvp */} - {/*
  • -
    - -
    -
    • */} -
-
    - {collectionRequestTabs && collectionRequestTabs.length - ? collectionRequestTabs.map((tab, index) => { - return ( -
  • handleClick(tab)} - > - -
    • - ); - }) - : null} -
- -
    - {showChevrons ? ( -
  • -
    - -
    -
    • - ) : null} -
  • +
    +
      + {showChevrons ? ( +
    • - - - +
      • - {/* Moved to post mvp */} - {/*
    • + ) : null} + {/* Moved to post mvp */} + {/*
    • +
      + +
      +
      • */} +
    +
      + {collectionRequestTabs && collectionRequestTabs.length + ? collectionRequestTabs.map((tab, index) => { + return ( +
    • handleClick(tab)} + > + +
      • + ); + }) + : null} +
    + +
      + {showChevrons ? ( +
    • - - - +
      -
      • */} -
    -
    - ) : null} +
    • + ) : null} +
  • +
    + + + +
    +
    • + {/* Moved to post mvp */} + {/*
  • +
    + + + +
    +
    • */} +
+
) : null} diff --git a/packages/bruno-app/src/components/RunnerResults/index.js b/packages/bruno-app/src/components/RunnerResults/index.js index aa269df60..d66595ef1 100644 --- a/packages/bruno-app/src/components/RunnerResults/index.js +++ b/packages/bruno-app/src/components/RunnerResults/index.js @@ -3,7 +3,7 @@ import path from 'path'; import { useDispatch } from 'react-redux'; import { get, each, cloneDeep } from 'lodash'; import { runCollectionFolder } from 'providers/ReduxStore/slices/collections/actions'; -import { closeCollectionRunner } from 'providers/ReduxStore/slices/collections'; +import { resetCollectionRunner } from 'providers/ReduxStore/slices/collections'; import { findItemInCollection, getTotalRequestCountInCollection } from 'utils/collections'; import { IconRefresh, IconCircleCheck, IconCircleX, IconCheck, IconX, IconRun } from '@tabler/icons'; import slash from 'utils/common/slash'; @@ -69,9 +69,9 @@ export default function RunnerResults({ collection }) { dispatch(runCollectionFolder(collection.uid, runnerInfo.folderUid, runnerInfo.isRecursive)); }; - const closeRunner = () => { + const resetRunner = () => { dispatch( - closeCollectionRunner({ + resetCollectionRunner({ collectionUid: collection.uid }) ); @@ -101,8 +101,8 @@ export default function RunnerResults({ collection }) { Run Collection - ); @@ -202,8 +202,8 @@ export default function RunnerResults({ collection }) { - ) : null} diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js index 28b0f964b..8c3da90a7 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js @@ -1,9 +1,10 @@ import React from 'react'; import get from 'lodash/get'; +import { uuid } from 'utils/common'; import Modal from 'components/Modal'; import { useDispatch } from 'react-redux'; +import { addTab } from 'providers/ReduxStore/slices/tabs'; import { runCollectionFolder } from 'providers/ReduxStore/slices/collections/actions'; -import { showRunnerView } from 'providers/ReduxStore/slices/collections'; import { flattenItems } from 'utils/collections'; import StyledWrapper from './StyledWrapper'; @@ -12,8 +13,10 @@ const RunCollectionItem = ({ collection, item, onClose }) => { const onSubmit = (recursive) => { dispatch( - showRunnerView({ - collectionUid: collection.uid + addTab({ + uid: uuid(), + collectionUid: collection.uid, + type: 'collection-runner' }) ); dispatch(runCollectionFolder(collection.uid, item ? item.uid : null, recursive)); diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js index bb7fae621..3916cc2e6 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js @@ -6,7 +6,7 @@ import { useDrag, useDrop } from 'react-dnd'; import { IconChevronRight, IconDots } from '@tabler/icons'; import { useSelector, useDispatch } from 'react-redux'; import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs'; -import { collectionFolderClicked, hideRunnerView } from 'providers/ReduxStore/slices/collections'; +import { collectionFolderClicked } from 'providers/ReduxStore/slices/collections'; import { moveItem } from 'providers/ReduxStore/slices/collections/actions'; import Dropdown from 'components/Dropdown'; import NewRequest from 'components/Sidebar/NewRequest'; @@ -86,11 +86,6 @@ const CollectionItem = ({ item, collection, searchText }) => { }); const handleClick = (event) => { - dispatch( - hideRunnerView({ - collectionUid: collection.uid - }) - ); if (isItemARequest(item)) { if (itemIsOpenedInTabs(item, tabs)) { dispatch( diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js index e81b53a8e..b015df0aa 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js @@ -1,5 +1,6 @@ import React, { useState, forwardRef, useRef, useEffect } from 'react'; import classnames from 'classnames'; +import { uuid } from 'utils/common'; import filter from 'lodash/filter'; import cloneDeep from 'lodash/cloneDeep'; import { useDrop } from 'react-dnd'; @@ -8,12 +9,12 @@ import Dropdown from 'components/Dropdown'; import { collectionClicked } from 'providers/ReduxStore/slices/collections'; import { moveItemToRootOfCollection } from 'providers/ReduxStore/slices/collections/actions'; import { useDispatch } from 'react-redux'; +import { addTab } from 'providers/ReduxStore/slices/tabs'; import NewRequest from 'components/Sidebar/NewRequest'; import NewFolder from 'components/Sidebar/NewFolder'; import CollectionItem from './CollectionItem'; import RemoveCollection from './RemoveCollection'; import CollectionProperties from './CollectionProperties'; -import RunCollectionItem from './CollectionItem/RunCollectionItem'; import { doesCollectionHaveItemsMatchingSearchText } from 'utils/collections/search'; import { isItemAFolder, isItemARequest, transformCollectionToSaveToIdb } from 'utils/collections'; import exportCollection from 'utils/collections/export'; @@ -26,7 +27,6 @@ const Collection = ({ collection, searchText }) => { const [showNewRequestModal, setShowNewRequestModal] = useState(false); const [showRenameCollectionModal, setShowRenameCollectionModal] = useState(false); const [showRemoveCollectionModal, setShowRemoveCollectionModal] = useState(false); - const [showRunCollectionModal, setShowRunCollectionModal] = useState(false); const [collectionPropertiesModal, setCollectionPropertiesModal] = useState(false); const [collectionIsCollapsed, setCollectionIsCollapsed] = useState(collection.collapsed); const dispatch = useDispatch(); @@ -41,6 +41,16 @@ const Collection = ({ collection, searchText }) => { ); }); + const handleRun = () => { + dispatch( + addTab({ + uid: uuid(), + collectionUid: collection.uid, + type: 'collection-runner' + }) + ); + }; + useEffect(() => { if (searchText && searchText.length) { setCollectionIsCollapsed(false); @@ -105,9 +115,6 @@ const Collection = ({ collection, searchText }) => { {showRemoveCollectionModal && ( setShowRemoveCollectionModal(false)} /> )} - {showRunCollectionModal && ( - setShowRunCollectionModal(false)} /> - )} {collectionPropertiesModal && ( setCollectionPropertiesModal(false)} /> )} @@ -147,7 +154,7 @@ const Collection = ({ collection, searchText }) => { className="dropdown-item" onClick={(e) => { menuDropdownTippyRef.current.hide(); - setShowRunCollectionModal(true); + handleRun(); }} > Run diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js index 8cdfb03c9..cfede2a40 100644 --- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js +++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js @@ -769,7 +769,6 @@ export const openCollectionEvent = (uid, pathname, brunoConfig) => (dispatch, ge name: brunoConfig.name, pathname: pathname, items: [], - showRunner: false, collectionVariables: {}, brunoConfig: brunoConfig }; 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 762421822..ea22f1ded 100644 --- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js +++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js @@ -1016,30 +1016,6 @@ export const collectionsSlice = createSlice({ collection.name = newName; } }, - toggleRunnerView: (state, action) => { - const { collectionUid } = action.payload; - const collection = findCollectionByUid(state.collections, collectionUid); - - if (collection) { - collection.showRunner = !collection.showRunner; - } - }, - showRunnerView: (state, action) => { - const { collectionUid } = action.payload; - const collection = findCollectionByUid(state.collections, collectionUid); - - if (collection) { - collection.showRunner = true; - } - }, - hideRunnerView: (state, action) => { - const { collectionUid } = action.payload; - const collection = findCollectionByUid(state.collections, collectionUid); - - if (collection) { - collection.showRunner = false; - } - }, resetRunResults: (state, action) => { const { collectionUid } = action.payload; const collection = findCollectionByUid(state.collections, collectionUid); @@ -1149,13 +1125,12 @@ export const collectionsSlice = createSlice({ } } }, - closeCollectionRunner: (state, action) => { + resetCollectionRunner: (state, action) => { const { collectionUid } = action.payload; const collection = findCollectionByUid(state.collections, collectionUid); if (collection) { collection.runnerResult = null; - collection.showRunner = false; } } } @@ -1216,13 +1191,10 @@ export const { collectionUnlinkDirectoryEvent, collectionAddEnvFileEvent, collectionRenamedEvent, - toggleRunnerView, - showRunnerView, - hideRunnerView, resetRunResults, runRequestEvent, runFolderEvent, - closeCollectionRunner + resetCollectionRunner } = collectionsSlice.actions; export default collectionsSlice.reducer; diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js b/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js index ab575a2f3..3cf070d68 100644 --- a/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js +++ b/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js @@ -10,6 +10,10 @@ const initialState = { activeTabUid: null }; +const tabTypeAlreadyExists = (tabs, collectionUid, type) => { + return find(tabs, (tab) => tab.collectionUid === collectionUid && tab.type === type); +}; + export const tabsSlice = createSlice({ name: 'tabs', initialState, @@ -20,8 +24,8 @@ export const tabsSlice = createSlice({ return; } - if (action.payload.type === 'variables') { - const tab = find(state.tabs, (t) => t.collectionUid === action.payload.collectionUid && t.type === 'variables'); + if (['variables', 'collection-settings', 'collection-runner'].includes(action.payload.type)) { + const tab = tabTypeAlreadyExists(state.tabs, action.payload.collectionUid, action.payload.type); if (tab) { state.activeTabUid = tab.uid; return; diff --git a/packages/bruno-schema/src/collections/index.js b/packages/bruno-schema/src/collections/index.js index 6d6240639..7076175b5 100644 --- a/packages/bruno-schema/src/collections/index.js +++ b/packages/bruno-schema/src/collections/index.js @@ -124,7 +124,6 @@ const collectionSchema = Yup.object({ .nullable(), environments: environmentsSchema, pathname: Yup.string().nullable(), - showRunner: Yup.boolean(), runnerResult: Yup.object({ items: Yup.array() }),