feat: woekspace switch modal

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;

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 (
+    <StyledWrapper>
+      <Modal
+        size="sm"
+        title={title || "Select Workspace"}
+        hideFooter={true}
+        handleCancel={onClose}
+      >
+        <ul className="mb-2" >
+          {(workspaces && workspaces.length) ? workspaces.map((w) => (
+            <div className="workspace" key={w.uid} onClick={() => onSelect(w.uid)}>
+              <IconBox size={18} strokeWidth={1.5}/> <span className="ml-2">{w.name}</span>
+            </div>
+          )) : (
+            <div>No workspaces found</div>
+          )}
+        </ul>
+      </Modal>
+    </StyledWrapper>
+  );
+}
+
+export default WorkspaceSelectModal;

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) => {
+  const handleSelectWorkspace = (workspaceUid) => {
-    dispatch(selectWorkspace(workspace));
+    dispatch(selectWorkspace({workspaceUid: workspaceUid}));
-  }
+    setOpenSwitchWorkspaceModal(false);
+  };
 
   return (
     <StyledWrapper>
+      {openWorkspacesModal && <WorkspaceConfigurer onClose={() => setOpenWorkspacesModal(false)}/>}
+      {openSwitchWorkspaceModal && <WorkspaceSelectModal onSelect={handleSelectWorkspace} title="Switch Workspace" onClose={() => setOpenSwitchWorkspaceModal(false)}/>}
+
       <div className="items-center cursor-pointer relative">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement='bottom-end'>
-          {/* {workspaces && workspaces.length && workspaces.map((workspace) => (
+          <div className="dropdown-item" onClick={() => setOpenSwitchWorkspaceModal(true)}>
-            <div className="dropdown-item" onClick={() => handleSelectWorkspace(workspace)} key={workspace.uid}>
-              <span>{workspace.name}</span>
-            </div>
-          ))} */}
-          <div className="dropdown-item" onClick={() => handleSelectWorkspace(workspace)}>
             <div className="pr-2 text-gray-600">
               <IconSwitch3 size={18} strokeWidth={1.5}/>
             </div>
             <span>Switch Workspace</span>
           </div>
 
-          <div className="dropdown-item" onClick={() => handleSelectWorkspace(workspace)}>
+          <div className="dropdown-item" onClick={() => setOpenWorkspacesModal(true)}>
             <div className="pr-2 text-gray-600">
               <IconSettings size={18} strokeWidth={1.5}/>
             </div>
@@ -64,7 +65,6 @@ const WorkspaceSelector = () => {
           </div>
         </Dropdown>
       </div>
-      {openWorkspacesModal && <WorkspaceConfigurer onClose={() => setOpenWorkspacesModal(false)}/>}
     </StyledWrapper>
   );
 };

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;