diff --git a/packages/bruno-app/src/components/Workspaces/WorkspaceSelectModal/StyledWrapper.js b/packages/bruno-app/src/components/Workspaces/WorkspaceSelectModal/StyledWrapper.js new file mode 100644 index 000000000..0f282f392 --- /dev/null +++ b/packages/bruno-app/src/components/Workspaces/WorkspaceSelectModal/StyledWrapper.js @@ -0,0 +1,18 @@ +import styled from 'styled-components'; + +const StyledWrapper = styled.div` + div.workspace { + padding: 4px 6px; + padding-left: 8px; + display: flex; + align-items: center; + border-radius: 3px; + cursor: pointer; + + &:hover { + background-color: #f4f4f4; + } + } +`; + +export default StyledWrapper; \ No newline at end of file diff --git a/packages/bruno-app/src/components/Workspaces/WorkspaceSelectModal/index.js b/packages/bruno-app/src/components/Workspaces/WorkspaceSelectModal/index.js new file mode 100644 index 000000000..6fc598533 --- /dev/null +++ b/packages/bruno-app/src/components/Workspaces/WorkspaceSelectModal/index.js @@ -0,0 +1,32 @@ +import React from "react"; +import Modal from "components/Modal/index"; +import { IconBox } from '@tabler/icons'; +import { useSelector } from "react-redux"; +import StyledWrapper from './StyledWrapper'; + +const WorkspaceSelectModal = ({onClose, onSelect, title}) => { + const { workspaces } = useSelector((state) => state.workspaces); + + return ( + + + + + + ); +} + +export default WorkspaceSelectModal; diff --git a/packages/bruno-app/src/components/Workspaces/WorkspaceSelector/index.js b/packages/bruno-app/src/components/Workspaces/WorkspaceSelector/index.js index 16f8b3236..fba4e1114 100644 --- a/packages/bruno-app/src/components/Workspaces/WorkspaceSelector/index.js +++ b/packages/bruno-app/src/components/Workspaces/WorkspaceSelector/index.js @@ -1,7 +1,8 @@ import React, { useRef, forwardRef, useState, useEffect } from 'react'; import Dropdown from 'components/Dropdown'; -import { IconCaretDown, IconBox, IconSwitch3, IconSettings, IconFolders } from '@tabler/icons'; +import { IconCaretDown, IconBox, IconSwitch3, IconSettings } from '@tabler/icons'; import WorkspaceConfigurer from "../WorkspaceConfigurer"; +import WorkspaceSelectModal from "../WorkspaceSelectModal"; import { useDispatch, useSelector } from 'react-redux'; import { selectWorkspace } from 'providers/ReduxStore/slices/workspaces'; import StyledWrapper from './StyledWrapper'; @@ -9,6 +10,7 @@ import StyledWrapper from './StyledWrapper'; const WorkspaceSelector = () => { const dropdownTippyRef = useRef(); const [openWorkspacesModal, setOpenWorkspacesModal] = useState(false); + const [openSwitchWorkspaceModal, setOpenSwitchWorkspaceModal] = useState(false); const [activeWorkspace, setActiveWorkspace] = useState({}); const dispatch = useDispatch(); @@ -36,27 +38,26 @@ const WorkspaceSelector = () => { const onDropdownCreate = (ref) => dropdownTippyRef.current = ref; - const handleSelectWorkspace = (workspace) => { - dispatch(selectWorkspace(workspace)); - } + const handleSelectWorkspace = (workspaceUid) => { + dispatch(selectWorkspace({workspaceUid: workspaceUid})); + setOpenSwitchWorkspaceModal(false); + }; return ( + {openWorkspacesModal && setOpenWorkspacesModal(false)}/>} + {openSwitchWorkspaceModal && setOpenSwitchWorkspaceModal(false)}/>} +
} placement='bottom-end'> - {/* {workspaces && workspaces.length && workspaces.map((workspace) => ( -
handleSelectWorkspace(workspace)} key={workspace.uid}> - {workspace.name} -
- ))} */} -
handleSelectWorkspace(workspace)}> +
setOpenSwitchWorkspaceModal(true)}>
Switch Workspace
-
handleSelectWorkspace(workspace)}> +
setOpenWorkspacesModal(true)}>
@@ -64,7 +65,6 @@ const WorkspaceSelector = () => {
- {openWorkspacesModal && setOpenWorkspacesModal(false)}/>} ); }; diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/workspaces/index.js b/packages/bruno-app/src/providers/ReduxStore/slices/workspaces/index.js index fd80e4969..6a478c3ab 100644 --- a/packages/bruno-app/src/providers/ReduxStore/slices/workspaces/index.js +++ b/packages/bruno-app/src/providers/ReduxStore/slices/workspaces/index.js @@ -20,7 +20,7 @@ export const workspacesSlice = createSlice({ } }, selectWorkspace: (state, action) => { - state.activeWorkspaceUid = action.payload.uid; + state.activeWorkspaceUid = action.payload.workspaceUid; }, renameWorkspace: (state, action) => { const { name, uid } = action.payload;