+
dispatch(showHomePage())} title="Home">
+
+
+ {setShowSearch && (
+
+
+ )}
+
+
+ Collections
{
setCreateCollectionModalOpen(true);
- menuDropdownTippyRef.current.hide();
+ actionsDropdownTippyRef.current?.hide();
}}
>
-
-
- Create Collection
+
+ {
+ actionsDropdownTippyRef.current?.hide();
+ setImportCollectionModalOpen(true);
+ }}
+ >
+
{
handleOpenCollection();
- menuDropdownTippyRef.current.hide();
+ actionsDropdownTippyRef.current?.hide();
}}
>
-
-
- Open
-
- {
- menuDropdownTippyRef.current.hide();
- setImportCollectionModalOpen(true);
- }}
- >
-
-
- Import
+
{
- menuDropdownTippyRef.current.hide();
+ actionsDropdownTippyRef.current?.hide();
openDevTools();
}}
>
-
-
+
diff --git a/packages/bruno-app/src/components/Welcome/StyledWrapper.js b/packages/bruno-app/src/components/Welcome/StyledWrapper.js
deleted file mode 100644
index d586f7782..000000000
--- a/packages/bruno-app/src/components/Welcome/StyledWrapper.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
- .heading {
- color: ${(props) => props.theme.welcome.heading};
- font-size: ${(props) => props.theme.font.size.base};
- }
-
- .muted {
- color: ${(props) => props.theme.welcome.muted};
- }
-
- .collection-options {
- cursor: pointer;
-
- svg {
- position: relative;
- top: -1px;
- }
-
- .label {
- &:hover {
- text-decoration: underline;
- }
- }
- }
-
- .keycap {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- padding: 1px 6px;
- border: 1px solid ${(props) => props.theme.modal.input.border};
- border-radius: 4px;
- background: ${(props) =>
- props.theme.mode === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'};
- font-size: ${(props) => props.theme.font.size.base};
- font-weight: 500;
- font-family: inherit;
- line-height: 1;
- color: ${(props) => props.theme.text};
- }
-`;
-
-export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/Welcome/index.js b/packages/bruno-app/src/components/Welcome/index.js
deleted file mode 100644
index 24982aae8..000000000
--- a/packages/bruno-app/src/components/Welcome/index.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import { useDispatch, useSelector } from 'react-redux';
-import { useTranslation } from 'react-i18next';
-import { openCollection, importCollection } from 'providers/ReduxStore/slices/collections/actions';
-
-import { IconBrandGithub, IconPlus, IconDownload, IconFolders, IconSpeakerphone, IconBook } from '@tabler/icons';
-
-import Bruno from 'components/Bruno';
-import CreateCollection from 'components/Sidebar/CreateCollection';
-import ImportCollection from 'components/Sidebar/ImportCollection';
-import ImportCollectionLocation from 'components/Sidebar/ImportCollectionLocation';
-import StyledWrapper from './StyledWrapper';
-
-const Welcome = () => {
- const dispatch = useDispatch();
- const { t } = useTranslation();
- const sidebarCollapsed = useSelector((state) => state.app.sidebarCollapsed);
- const collections = useSelector((state) => state.collections.collections);
- const [importData, setImportData] = useState(null);
- const [createCollectionModalOpen, setCreateCollectionModalOpen] = useState(false);
- const [importCollectionModalOpen, setImportCollectionModalOpen] = useState(false);
- const [importCollectionLocationModalOpen, setImportCollectionLocationModalOpen] = useState(false);
-
- const handleOpenCollection = () => {
- dispatch(openCollection())
- .catch((err) => {
- console.error(err);
- toast.error(t('WELCOME.COLLECTION_OPEN_ERROR'));
- });
- };
-
- const handleImportCollection = ({ rawData, type }) => {
- setImportData({ rawData, type });
- setImportCollectionModalOpen(false);
- setImportCollectionLocationModalOpen(true);
- };
-
- const handleImportCollectionLocation = (convertedCollection, collectionLocation) => {
- dispatch(importCollection(convertedCollection, collectionLocation))
- .then(() => {
- setImportCollectionLocationModalOpen(false);
- setImportData(null);
- toast.success(t('WELCOME.COLLECTION_IMPORT_SUCCESS'));
- })
- .catch((err) => {
- setImportCollectionLocationModalOpen(false);
- console.error(err);
- toast.error(t('WELCOME.COLLECTION_IMPORT_ERROR'));
- });
- };
-
- return (
-
- {createCollectionModalOpen ? setCreateCollectionModalOpen(false)} /> : null}
- {importCollectionModalOpen ? (
- setImportCollectionModalOpen(false)} handleSubmit={handleImportCollection} />
- ) : null}
- {importCollectionLocationModalOpen && importData ? (
- setImportCollectionLocationModalOpen(false)}
- handleSubmit={handleImportCollectionLocation}
- />
- ) : null}
-
-
-
- bruno
- {t('WELCOME.ABOUT_BRUNO')}
-
- {t('COMMON.COLLECTIONS')}
-
- setCreateCollectionModalOpen(true)}
- aria-label={t('WELCOME.CREATE_COLLECTION')}
- >
-
- {t('WELCOME.CREATE_COLLECTION')}
-
-
-
-
- {t('WELCOME.OPEN_COLLECTION')}
-
-
- setImportCollectionModalOpen(true)}
- aria-label={t('WELCOME.IMPORT_COLLECTION')}
- >
-
- {t('WELCOME.IMPORT_COLLECTION')}
-
-
-
-
- {t('WELCOME.LINKS')}
-
-
-
-
-
-
- {t('WELCOME.GLOBAL_SEARCH_TIP_PART1')} ⌘ {' '}K {' '}
- {t('WELCOME.GLOBAL_SEARCH_TIP_PART2')} Ctrl {' '}K {' '}
- {t('WELCOME.GLOBAL_SEARCH_TIP_PART3')}
-
-
- );
-};
-
-export default Welcome;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/StyledWrapper.js
new file mode 100644
index 000000000..7e800b754
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/StyledWrapper.js
@@ -0,0 +1,134 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+ .workspace-header {
+ position: relative;
+ }
+
+ .workspace-rename-container {
+ height: 28px;
+ display: flex;
+ align-items: center;
+ background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+ gap: 8px;
+ border-radius: 4px;
+ }
+
+ .workspace-name-input {
+ padding: 0 8px;
+ font-size: 18px;
+ font-weight: 600;
+ border-radius: 4px;
+ background: transparent;
+ color: ${(props) => props.theme.text.primary};
+ outline: none;
+ min-width: 200px;
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ .inline-actions {
+ display: flex;
+ gap: 4px;
+ }
+
+ .inline-action-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 4px;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.2s;
+
+ &.save {
+ color: ${(props) => props.theme.colors.text.green};
+
+ &:hover {
+ background: ${(props) => props.theme.colors.bg.green};
+ }
+ }
+
+ &.cancel {
+ color: ${(props) => props.theme.colors.text.red};
+
+ &:hover {
+ background: ${(props) => props.theme.colors.bg.red};
+ }
+ }
+ }
+
+ .workspace-error {
+ position: absolute;
+ top: 100%;
+ left: 16px;
+ margin-top: 4px;
+ font-size: 12px;
+ color: ${(props) => props.theme.colors.text.red};
+ }
+
+ .workspace-menu-dropdown {
+ min-width: 150px;
+ }
+
+ .dropdown-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 12px;
+ cursor: pointer;
+ transition: background 0.2s;
+ color: ${(props) => props.theme.text.primary};
+
+ &.disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+ }
+
+ .tabs-container {
+ border-bottom: 1px solid ${(props) => props.theme.workspace.border};
+ background: ${(props) => props.theme.bg.primary};
+ }
+
+ .tab-item {
+ position: relative;
+ cursor: pointer;
+ color: var(--color-tab-inactive);
+ border-bottom: 2px solid transparent;
+ transition: all 0.15s ease;
+
+ &:hover {
+ color: ${(props) => props.theme.text.primary};
+ border-bottom-color: ${(props) => props.theme.colors.border};
+ }
+
+ &.active {
+ border-bottom-color: ${(props) => props.theme.colors.text.yellow};
+ color: ${(props) => props.theme.tabs.active.color};
+ }
+ }
+
+ .workspace-action-buttons {
+ gap: 4px;
+ }
+
+ .workspace-button {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ padding: 4px 8px;
+ font-size: 12px;
+ border-radius: 8px;
+ color: ${(props) => props.theme.text.primary};
+ cursor: pointer;
+
+ &:hover {
+ background-color: ${(props) => props.theme.workspace.button.bg};
+ }
+ }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceCollections/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceCollections/StyledWrapper.js
new file mode 100644
index 000000000..1c464a0d6
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceCollections/StyledWrapper.js
@@ -0,0 +1,154 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+ .collections-table {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ font-size: ${(props) => props.theme.font.size.base};
+ }
+
+ .collections-header {
+ display: grid;
+ gap: 16px;
+ padding: 10px 16px;
+ border-bottom: ${(props) => props.theme.workspace.collection.header.indentBorder};
+ position: sticky;
+ top: 0;
+ z-index: 10;
+
+ &:has(.header-git) {
+ grid-template-columns: 1fr 3fr 1fr 1.5fr;
+ }
+
+ &:not(:has(.header-git)) {
+ grid-template-columns: 1fr 3fr 1.5fr;
+ }
+ }
+
+ .header-cell {
+ font-weight: 600;
+ font-size: ${(props) => props.theme.font.size.xs};
+ color: ${(props) => props.theme.text.muted};
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ display: flex;
+ align-items: center;
+ }
+
+ .collections-body {
+ flex: 1;
+ overflow-y: auto;
+ }
+
+ .collection-row {
+ display: grid;
+ gap: 16px;
+ padding: 8px 16px;
+ border-bottom: ${(props) => props.theme.workspace.collection.item.indentBorder};
+ transition: background-color 0.15s ease;
+ cursor: pointer;
+ grid-template-columns: 1fr 3fr 1.5fr;
+
+ &:hover {
+ background-color: ${(props) => props.theme.sidebar.bg};
+ }
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+
+ .row-cell {
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ }
+
+ .cell-name {
+ .collection-icon {
+ color: ${(props) => props.theme.workspace.accent};
+ flex-shrink: 0;
+ }
+
+ .collection-info {
+ min-width: 0;
+ flex: 1;
+ }
+
+ .collection-name {
+ font-weight: 400;
+ color: ${(props) => props.theme.text};
+ font-size: ${(props) => props.theme.font.size.base};
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .collection-subtitle {
+ font-size: ${(props) => props.theme.font.size.xs};
+ color: ${(props) => props.theme.text.muted};
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-top: 2px;
+ }
+ }
+
+ .cell-location {
+ .location-text {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.text.muted};
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 100%;
+ }
+ }
+
+ .cell-actions {
+ justify-content: flex-end;
+
+ .action-buttons {
+ display: flex;
+ gap: 4px;
+ }
+ }
+
+ .action-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 30px;
+ height: 30px;
+ border: none;
+ background: transparent;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background 0.15s ease, color 0.15s ease;
+ color: ${(props) => props.theme.text.muted};
+
+ &:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ }
+
+ &:hover:not(:disabled) {
+ background-color: ${(props) => props.theme.listItem.hoverBg};
+
+ &.action-edit {
+ color: ${(props) => props.theme.text};
+ }
+
+ &.action-share {
+ color: #3B82F6;
+ }
+
+ &.action-delete {
+ color: #EF4444;
+ }
+ }
+ }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceCollections/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceCollections/index.js
new file mode 100644
index 000000000..89b1349c9
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceCollections/index.js
@@ -0,0 +1,343 @@
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { IconBox, IconTrash, IconEdit, IconShare } from '@tabler/icons';
+import { removeCollectionFromWorkspaceAction, importCollectionInWorkspace } from 'providers/ReduxStore/slices/workspaces/actions';
+import { addTab } from 'providers/ReduxStore/slices/tabs';
+import { hideHomePage } from 'providers/ReduxStore/slices/app';
+import toast from 'react-hot-toast';
+import Modal from 'components/Modal';
+import CreateCollection from 'components/Sidebar/CreateCollection';
+import ImportCollection from 'components/Sidebar/ImportCollection';
+import RenameCollection from 'components/Sidebar/Collections/Collection/RenameCollection';
+import ShareCollection from 'components/ShareCollection';
+import StyledWrapper from './StyledWrapper';
+import { mountCollection } from 'providers/ReduxStore/slices/collections/actions';
+
+const WorkspaceCollections = ({ workspace, onImportCollection }) => {
+ const dispatch = useDispatch();
+ const { collections } = useSelector((state) => state.collections);
+ const [collectionToRemove, setCollectionToRemove] = useState(null);
+ const [renameCollectionModalOpen, setRenameCollectionModalOpen] = useState(false);
+ const [shareCollectionModalOpen, setShareCollectionModalOpen] = useState(false);
+ const [selectedCollectionUid, setSelectedCollectionUid] = useState(null);
+
+ const [createCollectionModalOpen, setCreateCollectionModalOpen] = useState(false);
+ const [importCollectionModalOpen, setImportCollectionModalOpen] = useState(false);
+
+ const handleImportCollection = ({ rawData, type }) => {
+ if (onImportCollection) {
+ onImportCollection();
+ return;
+ }
+
+ setImportCollectionModalOpen(false);
+ dispatch(importCollectionInWorkspace(rawData, workspace.uid, undefined, type))
+ .catch((err) => {
+ console.error(err);
+ toast.error('An error occurred while importing the collection');
+ });
+ };
+
+ const workspaceCollections = React.useMemo(() => {
+ if (!workspace.collections || workspace.collections.length === 0) {
+ return [];
+ }
+
+ const result = [];
+
+ workspace.collections.forEach((wc) => {
+ const loadedCollection = collections.find((c) => c.pathname === wc.path);
+
+ if (loadedCollection) {
+ result.push({
+ ...loadedCollection,
+ isGitBacked: !!wc.remote,
+ gitRemoteUrl: wc.remote
+ });
+ } else {
+ result.push({
+ uid: `unloaded-${wc.path}`,
+ name: wc.name,
+ pathname: wc.path,
+ items: [],
+ environments: [],
+ isGitBacked: !!wc.remote,
+ isLoaded: false,
+ gitRemoteUrl: wc.remote,
+ git: { gitRootPath: null },
+ brunoConfig: {},
+ root: {
+ request: {
+ headers: [],
+ auth: { mode: 'none' },
+ vars: { req: [], res: [] },
+ script: { req: '', res: '' },
+ tests: ''
+ },
+ docs: ''
+ }
+ });
+ }
+ });
+
+ return result;
+ }, [workspace.collections, collections, workspace.pathname]);
+
+ const handleOpenCollectionClick = (collection, event) => {
+ if (event.target.closest('.action-buttons')) {
+ return;
+ }
+
+ if (collection.isLoaded === false) {
+ if (collection.isGitBacked) {
+ toast.error(`Collection "${collection.name}" needs to be cloned first`);
+ } else {
+ toast.error(`Collection "${collection.name}" does not exist on disk`);
+ }
+ return;
+ }
+
+ dispatch(mountCollection({
+ collectionUid: collection.uid,
+ collectionPathname: collection.pathname,
+ brunoConfig: collection.brunoConfig
+ }));
+
+ dispatch(hideHomePage());
+
+ dispatch(addTab({
+ uid: collection.uid,
+ collectionUid: collection.uid,
+ type: 'collection-settings'
+ }));
+ };
+
+ const handleRenameCollection = (collection) => {
+ if (collection.isLoaded === false) {
+ toast.error('Cannot rename collections that are not cloned yet');
+ return;
+ }
+
+ setSelectedCollectionUid(collection.uid);
+ setRenameCollectionModalOpen(true);
+ };
+
+ const handleShareCollection = (collection) => {
+ if (collection.isLoaded === false) {
+ toast.error('Please clone this collection first before sharing it');
+ return;
+ }
+
+ dispatch(mountCollection({
+ collectionUid: collection.uid,
+ collectionPathname: collection.pathname,
+ brunoConfig: collection.brunoConfig
+ }));
+
+ setSelectedCollectionUid(collection.uid);
+ setShareCollectionModalOpen(true);
+ };
+
+ const handleRemoveCollection = (collection) => {
+ setCollectionToRemove(collection);
+ };
+
+ const confirmRemoveCollection = async () => {
+ if (!collectionToRemove) return;
+
+ try {
+ await dispatch(removeCollectionFromWorkspaceAction(workspace.uid, collectionToRemove.pathname));
+
+ const collectionInfo = getCollectionWorkspaceInfo(collectionToRemove);
+
+ if (collectionInfo.isLoaded && !collectionInfo.isGitBacked) {
+ toast.success(`Deleted "${collectionToRemove.name}" collection`);
+ } else if (collectionInfo.isGitBacked) {
+ toast.success(`Removed git-backed collection "${collectionToRemove.name}" from workspace`);
+ } else {
+ toast.success(`Removed "${collectionToRemove.name}" from workspace`);
+ }
+
+ setCollectionToRemove(null);
+ } catch (error) {
+ console.error('Error removing collection:', error);
+ toast.error(error.message || 'Failed to remove collection from workspace');
+ }
+ };
+
+ const getCollectionWorkspaceInfo = (collection) => {
+ if (collection.hasOwnProperty('isGitBacked')) {
+ return {
+ isGitBacked: collection.isGitBacked,
+ gitRemoteUrl: collection.gitRemoteUrl,
+ isLoaded: collection.isLoaded !== false
+ };
+ }
+
+ const workspaceCollection = workspace.collections?.find((wc) => {
+ return collection.pathname === wc.path;
+ });
+
+ return {
+ isGitBacked: !!workspaceCollection?.remote,
+ gitRemoteUrl: workspaceCollection?.remote,
+ isLoaded: true
+ };
+ };
+
+ return (
+
+
+
+ {createCollectionModalOpen && (
+
setCreateCollectionModalOpen(false)}
+ />
+ )}
+
+ {importCollectionModalOpen && (
+ setImportCollectionModalOpen(false)}
+ handleSubmit={handleImportCollection}
+ />
+ )}
+
+ {renameCollectionModalOpen && selectedCollectionUid && (
+ {
+ setRenameCollectionModalOpen(false);
+ setSelectedCollectionUid(null);
+ }}
+ />
+ )}
+
+ {shareCollectionModalOpen && selectedCollectionUid && (
+ {
+ setShareCollectionModalOpen(false);
+ setSelectedCollectionUid(null);
+ }}
+ />
+ )}
+
+ {collectionToRemove && (
+ setCollectionToRemove(null)}
+ handleConfirm={confirmRemoveCollection}
+ confirmText="Delete Collection"
+ cancelText="Cancel"
+ style="new"
+ >
+
+ Are you sure you want to delete "{collectionToRemove.name}" ?
+
+
+ {(() => {
+ const collectionInfo = getCollectionWorkspaceInfo(collectionToRemove);
+
+ if (collectionInfo.isGitBacked) {
+ return 'This will remove the git-backed collection reference from workspace.yml. Local files (if any) will not be deleted.';
+ } else {
+ return 'This will permanently delete the collection files from the workspace collections folder.';
+ }
+ })()}
+
+
+ )}
+
+
+ {workspaceCollections.length === 0 ? (
+
+
+
+
No collections yet
+
+ Create your first collection or open an existing one to get started.
+
+
+ ) : (
+
+
+
Collection
+
Location
+
Actions
+
+
+
+ {workspaceCollections.map((collection, index) => {
+ return (
+
handleOpenCollectionClick(collection, e)}
+ >
+
+
+
+
+
{collection.name}
+ {collection.brunoConfig?.name && collection.brunoConfig.name !== collection.name && (
+
{collection.brunoConfig.name}
+ )}
+
+
+
+
+
+
+ {collection.pathname}
+
+
+
+
+
+ {
+ e.stopPropagation();
+ handleRenameCollection(collection);
+ }}
+ className="action-btn action-edit"
+ title="Rename collection"
+ >
+
+ {
+ e.stopPropagation();
+ handleShareCollection(collection);
+ }}
+ className="action-btn action-share"
+ title="Share collection"
+ >
+
+ {
+ e.stopPropagation();
+ handleRemoveCollection(collection);
+ }}
+ className="action-btn action-delete"
+ title="Remove from workspace"
+ >
+
+
+
+
+ );
+ })}
+
+
+ )}
+
+ );
+};
+
+export default WorkspaceCollections;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js
new file mode 100644
index 000000000..af80d4c08
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+ .editing-mode {
+ cursor: pointer;
+ }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js
new file mode 100644
index 000000000..f676070ca
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js
@@ -0,0 +1,147 @@
+import 'github-markdown-css/github-markdown.css';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { saveWorkspaceDocs } from 'providers/ReduxStore/slices/workspaces/actions';
+import Markdown from 'components/MarkDown';
+import CodeEditor from 'components/CodeEditor';
+import StyledWrapper from './StyledWrapper';
+import { IconEdit, IconX, IconFileText } from '@tabler/icons';
+import toast from 'react-hot-toast';
+
+const WorkspaceDocs = ({ workspace }) => {
+ const dispatch = useDispatch();
+ const { displayedTheme } = useTheme();
+ const [isEditing, setIsEditing] = useState(false);
+ const [localDocs, setLocalDocs] = useState(workspace?.docs || '');
+ const preferences = useSelector((state) => state.app.preferences);
+
+ useEffect(() => {
+ setLocalDocs(workspace?.docs || '');
+ setIsEditing(false);
+ }, [workspace?.uid, workspace?.docs]);
+
+ const toggleViewMode = () => {
+ setIsEditing((prev) => !prev);
+ };
+
+ const onEdit = (value) => {
+ setLocalDocs(value);
+ };
+
+ const handleDiscardChanges = () => {
+ setLocalDocs(workspace?.docs || '');
+ toggleViewMode();
+ };
+
+ const onSave = async () => {
+ if (!workspace) {
+ toast.error('Workspace not found');
+ return;
+ }
+
+ try {
+ await dispatch(saveWorkspaceDocs(workspace.uid, localDocs));
+ toast.success('Documentation saved successfully');
+ toggleViewMode();
+ } catch (error) {
+ console.error('Error saving workspace docs:', error);
+ toast.error('Failed to save documentation');
+ }
+ };
+
+ return (
+
+
+
+
+
+ {isEditing ? (
+ <>
+
+
+
+ Save
+
+
+ ) : (
+
+
+ )}
+
+
+
+ {
+ localDocs?.length > 0
+ ?
+
+ );
+};
+
+export default WorkspaceDocs;
+
+const workspaceDocumentationPlaceholder = `
+# Welcome to your Workspace Documentation
+
+This is your workspace documentation area where you can document your entire project, team guidelines, and shared resources.
+
+## What to Document Here
+
+### Project Overview
+- Project goals and objectives
+- Architecture overview
+- Key stakeholders and team members
+- Project timeline and milestones
+
+### Development Guidelines
+- Coding standards and conventions
+- Git workflow and branching strategy
+- Code review process
+- Testing guidelines
+
+### API Documentation
+- Authentication methods
+- Base URLs and environments
+- Common headers and parameters
+- Error handling standards
+
+### Team Resources
+- Useful links and references
+- Development environment setup
+- Deployment procedures
+- Troubleshooting guides
+
+## Markdown Support
+
+This documentation supports full Markdown formatting:
+
+- **Bold** and *italic* text
+- \`inline code\` and code blocks
+- Lists and tables
+- [Links](https://usebruno.com) and images
+- Headers and sections
+
+**Tip:** Double-click anywhere in this area to start editing!
+`;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/CopyEnvironment/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/CopyEnvironment/index.js
new file mode 100644
index 000000000..cb967a34e
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/CopyEnvironment/index.js
@@ -0,0 +1,78 @@
+import Modal from 'components/Modal/index';
+import Portal from 'components/Portal/index';
+import { useFormik } from 'formik';
+import { copyGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import { useEffect, useRef } from 'react';
+import toast from 'react-hot-toast';
+import { useDispatch } from 'react-redux';
+import * as Yup from 'yup';
+
+const CopyEnvironment = ({ environment, onClose }) => {
+ const dispatch = useDispatch();
+ const inputRef = useRef();
+ const formik = useFormik({
+ enableReinitialize: true,
+ initialValues: {
+ name: environment.name + ' - Copy'
+ },
+ validationSchema: Yup.object({
+ name: Yup.string()
+ .min(1, 'must be at least 1 character')
+ .max(50, 'must be 50 characters or less')
+ .required('name is required')
+ }),
+ onSubmit: (values) => {
+ dispatch(copyGlobalEnvironment({ name: values.name, environmentUid: environment.uid }))
+ .then(() => {
+ toast.success('Environment created!');
+ onClose();
+ })
+ .catch((error) => {
+ toast.error('An error occurred while creating the environment');
+ console.error(error);
+ });
+ }
+ });
+
+ useEffect(() => {
+ if (inputRef && inputRef.current) {
+ inputRef.current.focus();
+ }
+ }, [inputRef]);
+
+ const onSubmit = () => {
+ formik.handleSubmit();
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default CopyEnvironment;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/CreateEnvironment/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/CreateEnvironment/index.js
new file mode 100644
index 000000000..7899c807a
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/CreateEnvironment/index.js
@@ -0,0 +1,100 @@
+import React, { useEffect, useRef } from 'react';
+import toast from 'react-hot-toast';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { useDispatch, useSelector } from 'react-redux';
+import Portal from 'components/Portal';
+import Modal from 'components/Modal';
+import { addGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import { validateName, validateNameError } from 'utils/common/regex';
+
+const CreateEnvironment = ({ onClose, onEnvironmentCreated }) => {
+ const globalEnvs = useSelector((state) => state?.globalEnvironments?.globalEnvironments);
+
+ const validateEnvironmentName = (name) => {
+ const trimmedName = name?.toLowerCase().trim();
+ return (globalEnvs || []).every((env) => env?.name?.toLowerCase().trim() !== trimmedName);
+ };
+
+ const dispatch = useDispatch();
+ const inputRef = useRef();
+ const formik = useFormik({
+ enableReinitialize: true,
+ initialValues: {
+ name: ''
+ },
+ validationSchema: Yup.object({
+ name: Yup.string()
+ .min(1, 'Must be at least 1 character')
+ .max(255, 'Must be 255 characters or less')
+ .test('is-valid-filename', function (value) {
+ const isValid = validateName(value);
+ return isValid ? true : this.createError({ message: validateNameError(value) });
+ })
+ .required('Name is required')
+ .test('duplicate-name', 'Environment already exists', validateEnvironmentName)
+ }),
+ onSubmit: (values) => {
+ dispatch(addGlobalEnvironment({ name: values.name }))
+ .then(() => {
+ toast.success('Environment created!');
+ onClose();
+ // Call the callback if provided
+ if (onEnvironmentCreated) {
+ onEnvironmentCreated();
+ }
+ })
+ .catch(() => toast.error('An error occurred while creating the environment'));
+ }
+ });
+
+ useEffect(() => {
+ if (inputRef && inputRef.current) {
+ inputRef.current.focus();
+ }
+ }, [inputRef]);
+
+ const onSubmit = () => {
+ formik.handleSubmit();
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default CreateEnvironment;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/DeleteEnvironment/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/DeleteEnvironment/StyledWrapper.js
new file mode 100644
index 000000000..48b874214
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/DeleteEnvironment/StyledWrapper.js
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ button.submit {
+ color: white;
+ background-color: var(--color-background-danger) !important;
+ border: inherit !important;
+
+ &:hover {
+ border: inherit !important;
+ }
+ }
+`;
+
+export default Wrapper;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/DeleteEnvironment/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/DeleteEnvironment/index.js
new file mode 100644
index 000000000..766215d66
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/DeleteEnvironment/index.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import Portal from 'components/Portal/index';
+import toast from 'react-hot-toast';
+import Modal from 'components/Modal/index';
+import { useDispatch } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
+import { deleteGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+
+const DeleteEnvironment = ({ onClose, environment }) => {
+ const dispatch = useDispatch();
+ const onConfirm = () => {
+ dispatch(deleteGlobalEnvironment({ environmentUid: environment.uid }))
+ .then(() => {
+ toast.success('Environment deleted successfully');
+ onClose();
+ })
+ .catch(() => toast.error('An error occurred while deleting the environment'));
+ };
+
+ return (
+
+
+
+ Are you sure you want to delete {environment.name} ?
+
+
+
+ );
+};
+
+export default DeleteEnvironment;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js
new file mode 100644
index 000000000..82bc985bf
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { IconAlertTriangle } from '@tabler/icons';
+import Modal from 'components/Modal';
+import { createPortal } from 'react-dom';
+
+const ConfirmSwitchEnv = ({ onCancel }) => {
+ const modalContent = (
+
{
+ e.stopPropagation();
+ e.preventDefault();
+ }}
+ hideFooter={true}
+ >
+
+
Hold on..
+
+ You have unsaved changes in this environment.
+
+
+
+ );
+
+ return createPortal(modalContent, document.body);
+};
+
+export default ConfirmSwitchEnv;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
new file mode 100644
index 000000000..88d57a40f
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -0,0 +1,195 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow: hidden;
+
+ .table-container {
+ overflow-y: auto;
+ border-radius: 8px;
+ border: ${(props) => props.theme.workspace.environments.indentBorder};
+ }
+
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ table-layout: fixed;
+ font-size: 12px;
+
+ thead,
+ td {
+ padding: 4px 12px;
+
+ &:nth-child(1),
+ &:nth-child(4) {
+ width: 80px;
+ }
+ &:nth-child(5) {
+ width: 60px;
+ }
+
+ &:nth-child(2) {
+ width: 30%;
+ }
+ }
+
+ thead {
+ color: ${(props) => props.theme.colors.text.muted};
+ background: ${(props) => props.theme.sidebar.bg};
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.3px;
+ user-select: none;
+
+ td {
+ padding: 8px 10px;
+ border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
+ border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+ font-weight: 600;
+
+ &:last-child {
+ border-right: none;
+ }
+ }
+ }
+
+ tbody {
+ tr {
+ transition: background 0.1s ease;
+
+ &:hover {
+ background: ${(props) => props.theme.sidebar.bg};
+ }
+
+ &:last-child td {
+ border-bottom: none;
+ }
+
+ td {
+ border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
+ border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+
+ &:last-child {
+ border-right: none;
+ }
+ }
+ }
+ }
+ }
+
+ .btn-add-param {
+ font-size: 12px;
+ color: ${(props) => props.theme.textLink};
+ font-weight: 500;
+ padding: 7px 14px;
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ border-radius: 6px;
+ border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
+ background: transparent;
+ transition: all 0.15s ease;
+
+ &:hover {
+ background: ${(props) => props.theme.listItem.hoverBg};
+ border-color: ${(props) => props.theme.textLink};
+ }
+ }
+
+ .tooltip-mod {
+ font-size: 11px !important;
+ max-width: 200px !important;
+ }
+
+ input[type='text'] {
+ width: 100%;
+ border: 1px solid transparent;
+ outline: none !important;
+ background-color: transparent;
+ color: ${(props) => props.theme.text};
+ padding: 5px 8px;
+ font-size: 12px;
+ border-radius: 4px;
+ transition: all 0.15s ease;
+
+ &:focus {
+ outline: none !important;
+ }
+ }
+
+ input[type='checkbox'] {
+ cursor: pointer;
+ width: 14px;
+ height: 14px;
+ accent-color: ${(props) => props.theme.workspace.accent};
+ }
+
+ button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 4px;
+ color: ${(props) => props.theme.colors.text.muted};
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ border-radius: 4px;
+ transition: color 0.15s ease, background 0.15s ease;
+ }
+
+ .button-container {
+ padding: 12px 0;
+ background: ${(props) => props.theme.bg};
+ flex-shrink: 0;
+ display: flex;
+ gap: 8px;
+ }
+
+ .submit {
+ padding: 7px 16px;
+ font-size: 12px;
+ font-weight: 500;
+ border-radius: 6px;
+ border: none;
+ background: ${(props) => props.theme.workspace.accent};
+ color: ${(props) => props.theme.bg};
+ cursor: pointer;
+ transition: opacity 0.15s ease;
+
+ &:hover {
+ opacity: 0.9;
+ }
+ }
+
+ .reset {
+ background: transparent;
+ padding: 6px 16px;
+ border: 1px solid ${(props) => props.theme.workspace.accent};
+ color: ${(props) => props.theme.workspace.accent};
+ &:hover {
+ opacity: 0.9;
+ }
+ }
+
+ .discard {
+ padding: 7px 16px;
+ font-size: 12px;
+ font-weight: 500;
+ border-radius: 6px;
+ background: transparent;
+ color: ${(props) => props.theme.text};
+ border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
+ cursor: pointer;
+ transition: all 0.15s ease;
+
+ &:hover {
+ background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+ }
+ }
+`;
+
+export default Wrapper;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
new file mode 100644
index 000000000..e173b765c
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -0,0 +1,344 @@
+import React from 'react';
+import cloneDeep from 'lodash/cloneDeep';
+import { IconTrash, IconAlertCircle, IconInfoCircle } from '@tabler/icons';
+import { useTheme } from 'providers/Theme';
+import { useDispatch, useSelector } from 'react-redux';
+import MultiLineEditor from 'components/MultiLineEditor/index';
+import StyledWrapper from './StyledWrapper';
+import { uuid } from 'utils/common';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { variableNameRegex } from 'utils/common/regex';
+import toast from 'react-hot-toast';
+import { saveGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import { Tooltip } from 'react-tooltip';
+import { getGlobalEnvironmentVariables } from 'utils/collections';
+
+const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentVariables, collection }) => {
+ const dispatch = useDispatch();
+ const { storedTheme } = useTheme();
+ const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector((state) => state.globalEnvironments);
+
+ let _collection = collection ? cloneDeep(collection) : {};
+
+ const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
+ if (_collection) {
+ _collection.globalEnvironmentVariables = globalEnvironmentVariables;
+ }
+
+ const initialValues = React.useMemo(() => {
+ const vars = environment.variables || [];
+ return [
+ ...vars,
+ {
+ uid: uuid(),
+ name: '',
+ value: '',
+ type: 'text',
+ secret: false,
+ enabled: true
+ }
+ ];
+ }, [environment.uid, environment.variables]);
+
+ const formik = useFormik({
+ enableReinitialize: true,
+ initialValues: initialValues,
+ validationSchema: Yup.array().of(Yup.object({
+ enabled: Yup.boolean(),
+ name: Yup.string()
+ .when('$isLastRow', {
+ is: true,
+ then: (schema) => schema.optional(),
+ otherwise: (schema) => schema
+ .required('Name cannot be empty')
+ .matches(variableNameRegex,
+ 'Name contains invalid characters. Must only contain alphanumeric characters, "-", "_", "." and cannot start with a digit.')
+ .trim()
+ }),
+ secret: Yup.boolean(),
+ type: Yup.string(),
+ uid: Yup.string(),
+ value: Yup.mixed().nullable()
+ })),
+ validate: (values) => {
+ const errors = {};
+ values.forEach((variable, index) => {
+ const isLastRow = index === values.length - 1;
+ const isEmptyRow = !variable.name || variable.name.trim() === '';
+
+ // Skip validation for the last empty row
+ if (isLastRow && isEmptyRow) {
+ return;
+ }
+
+ // Validate name for non-empty rows
+ if (!variable.name || variable.name.trim() === '') {
+ if (!errors[index]) errors[index] = {};
+ errors[index].name = 'Name cannot be empty';
+ } else if (!variableNameRegex.test(variable.name)) {
+ if (!errors[index]) errors[index] = {};
+ errors[index].name = 'Name contains invalid characters. Must only contain alphanumeric characters, "-", "_", "." and cannot start with a digit.';
+ }
+ });
+ return Object.keys(errors).length > 0 ? errors : {};
+ },
+ onSubmit: () => {}
+ });
+
+ React.useEffect(() => {
+ const currentValues = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
+ const savedValues = environment.variables || [];
+
+ const hasActualChanges = JSON.stringify(currentValues) !== JSON.stringify(savedValues);
+
+ setIsModified(hasActualChanges);
+ }, [formik.values, environment.variables, setIsModified]);
+
+ const ErrorMessage = ({ name, index }) => {
+ const meta = formik.getFieldMeta(name);
+ const id = `error-${name}-${index}`;
+
+ // Don't show error for the last empty row
+ const isLastRow = index === formik.values.length - 1;
+ const variable = formik.values[index];
+ const isEmptyRow = !variable?.name || variable.name.trim() === '';
+
+ if (isLastRow && isEmptyRow) {
+ return null;
+ }
+
+ if (!meta.error || !meta.touched) {
+ return null;
+ }
+ return (
+
+
+ );
+ };
+
+ const handleRemoveVar = (id) => {
+ const filteredValues = formik.values.filter((variable) => variable.uid !== id);
+
+ const lastRow = formik.values[formik.values.length - 1];
+ const isLastEmptyRow = lastRow.uid === id && (!lastRow.name || lastRow.name.trim() === '');
+
+ if (isLastEmptyRow) {
+ return;
+ }
+
+ const hasEmptyLastRow = filteredValues.length > 0
+ && (!filteredValues[filteredValues.length - 1].name
+ || filteredValues[filteredValues.length - 1].name.trim() === '');
+
+ if (!hasEmptyLastRow) {
+ filteredValues.push({
+ uid: uuid(),
+ name: '',
+ value: '',
+ type: 'text',
+ secret: false,
+ enabled: true
+ });
+ }
+
+ formik.setValues(filteredValues);
+ };
+
+ const handleNameChange = (index, e) => {
+ formik.handleChange(e);
+ const isLastRow = index === formik.values.length - 1;
+
+ // If typing in the last row, add a new empty row
+ if (isLastRow) {
+ const newVariable = {
+ uid: uuid(),
+ name: '',
+ value: '',
+ type: 'text',
+ secret: false,
+ enabled: true
+ };
+ // Use setTimeout to ensure the change is processed first
+ setTimeout(() => {
+ formik.setFieldValue(formik.values.length, newVariable, false);
+ }, 0);
+ }
+ };
+
+ const handleSave = () => {
+ const variablesToSave = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
+
+ const hasValidationErrors = variablesToSave.some((variable) => {
+ if (!variable.name || variable.name.trim() === '') {
+ return true;
+ }
+ if (!variableNameRegex.test(variable.name)) {
+ return true;
+ }
+ return false;
+ });
+
+ if (hasValidationErrors) {
+ toast.error('Please fix validation errors before saving');
+ return;
+ }
+
+ dispatch(saveGlobalEnvironment({ environmentUid: environment.uid, variables: cloneDeep(variablesToSave) }))
+ .then(() => {
+ toast.success('Changes saved successfully');
+ const newValues = [
+ ...variablesToSave,
+ {
+ uid: uuid(),
+ name: '',
+ value: '',
+ type: 'text',
+ secret: false,
+ enabled: true
+ }
+ ];
+ formik.resetForm({ values: newValues });
+ setIsModified(false);
+ })
+ .catch((error) => {
+ console.error(error);
+ toast.error('An error occurred while saving the changes');
+ });
+ };
+
+ const handleReset = () => {
+ const originalVars = environment.variables || [];
+ const resetValues = [
+ ...originalVars,
+ {
+ uid: uuid(),
+ name: '',
+ value: '',
+ type: 'text',
+ secret: false,
+ enabled: true
+ }
+ ];
+ formik.resetForm({ values: resetValues });
+ };
+
+ return (
+
+
+
+
+
+
+ Save
+
+
+ Reset
+
+
+
+ );
+};
+export default EnvironmentVariables;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js
new file mode 100644
index 000000000..230457af6
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js
@@ -0,0 +1,316 @@
+import { IconCopy, IconEdit, IconTrash, IconCheck, IconX } from '@tabler/icons';
+import { useState, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { renameGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import { validateName, validateNameError } from 'utils/common/regex';
+import toast from 'react-hot-toast';
+import styled from 'styled-components';
+import CopyEnvironment from '../../CopyEnvironment';
+import DeleteEnvironment from '../../DeleteEnvironment';
+import EnvironmentVariables from './EnvironmentVariables';
+
+const StyledWrapper = styled.div`
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ background: ${(props) => props.theme.bg};
+
+ .header {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 20px 12px 20px;
+ flex-shrink: 0;
+
+ .title {
+ font-size: 15px;
+ font-weight: 600;
+ color: ${(props) => props.theme.text};
+ margin: 0;
+ }
+
+ .title-container {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ flex: 1;
+
+ &.renaming {
+ .title-input {
+ flex: 1;
+ background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+ outline: none;
+ color: ${(props) => props.theme.text};
+ font-size: 15px;
+ font-weight: 600;
+ padding: 4px 8px;
+ border-radius: 5px;
+ }
+
+ .inline-actions {
+ display: flex;
+ gap: 2px;
+ }
+
+ .inline-action-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 26px;
+ height: 26px;
+ padding: 0;
+ background: transparent;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.15s ease;
+
+ &.save {
+ color: ${(props) => props.theme.textLink};
+
+ &:hover {
+ background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+ }
+ }
+
+ &.cancel {
+ color: ${(props) => props.theme.colors.text.muted};
+
+ &:hover {
+ background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+ color: ${(props) => props.theme.text};
+ }
+ }
+ }
+ }
+ }
+
+ .title-error {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ margin-top: 4px;
+ padding: 4px 8px;
+ font-size: 11px;
+ color: ${(props) => props.theme.colors.text.danger};
+ background: ${(props) => `${props.theme.colors.text.danger}15`};
+ border-radius: 4px;
+ white-space: nowrap;
+ }
+
+ .actions {
+ display: flex;
+ gap: 2px;
+
+ button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ padding: 0;
+ color: ${(props) => props.theme.colors.text.muted};
+ background: transparent;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: all 0.15s ease;
+
+ &:hover {
+ background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+ color: ${(props) => props.theme.text};
+ }
+
+ &:last-child:hover {
+ color: ${(props) => props.theme.colors.text.danger};
+ }
+ }
+ }
+ }
+
+ .content {
+ flex: 1;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ padding: 0 20px 20px 20px;
+ }
+`;
+
+const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
+ const dispatch = useDispatch();
+ const globalEnvs = useSelector((state) => state?.globalEnvironments?.globalEnvironments);
+
+ const [openDeleteModal, setOpenDeleteModal] = useState(false);
+ const [openCopyModal, setOpenCopyModal] = useState(false);
+ const [isRenaming, setIsRenaming] = useState(false);
+ const [newName, setNewName] = useState('');
+ const [nameError, setNameError] = useState('');
+ const inputRef = useRef(null);
+
+ const validateEnvironmentName = (name) => {
+ if (!name || name.trim() === '') {
+ return 'Name is required';
+ }
+
+ if (name.length < 1) {
+ return 'Must be at least 1 character';
+ }
+
+ if (name.length > 255) {
+ return 'Must be 255 characters or less';
+ }
+
+ if (!validateName(name)) {
+ return validateNameError(name);
+ }
+
+ const trimmedName = name.toLowerCase().trim();
+ const isDuplicate = (globalEnvs || []).some((env) =>
+ env?.uid !== environment.uid && env?.name?.toLowerCase().trim() === trimmedName);
+ if (isDuplicate) {
+ return 'Environment already exists';
+ }
+
+ return null;
+ };
+
+ const handleRenameClick = () => {
+ setIsRenaming(true);
+ setNewName(environment.name);
+ setNameError('');
+ setTimeout(() => {
+ inputRef.current?.focus();
+ inputRef.current?.select();
+ }, 50);
+ };
+
+ const handleSaveRename = () => {
+ const error = validateEnvironmentName(newName);
+ if (error) {
+ setNameError(error);
+ return;
+ }
+
+ dispatch(renameGlobalEnvironment({ name: newName, environmentUid: environment.uid }))
+ .then(() => {
+ toast.success('Environment renamed!');
+ setIsRenaming(false);
+ setNewName('');
+ setNameError('');
+ })
+ .catch(() => {
+ toast.error('An error occurred while renaming the environment');
+ });
+ };
+
+ const handleCancelRename = () => {
+ setIsRenaming(false);
+ setNewName('');
+ setNameError('');
+ };
+
+ const handleNameChange = (e) => {
+ setNewName(e.target.value);
+ if (nameError) {
+ setNameError('');
+ }
+ };
+
+ const handleNameBlur = () => {
+ if (newName.trim() === '') {
+ handleCancelRename();
+ } else {
+ const error = validateEnvironmentName(newName);
+ if (error) {
+ setNameError(error);
+ }
+ }
+ };
+
+ const handleNameKeyDown = (e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ handleSaveRename();
+ } else if (e.key === 'Escape') {
+ e.preventDefault();
+ handleCancelRename();
+ }
+ };
+
+ return (
+
+ {openDeleteModal && (
+ setOpenDeleteModal(false)}
+ environment={environment}
+ />
+ )}
+ {openCopyModal && (
+ setOpenCopyModal(false)} environment={environment} />
+ )}
+
+
+
+ {isRenaming ? (
+ <>
+
+
+ e.preventDefault()}
+ title="Save"
+ >
+
+ e.preventDefault()}
+ title="Cancel"
+ >
+
+
+
+ ) : (
+
{environment.name}
+ )}
+
+ {nameError && isRenaming &&
{nameError}
}
+
+
+
+ setOpenCopyModal(true)} title="Copy">
+
+ setOpenDeleteModal(true)} title="Delete">
+
+
+
+
+
+ );
+};
+
+export default EnvironmentDetails;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js
new file mode 100644
index 000000000..0f60f349a
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js
@@ -0,0 +1,280 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+ display: flex;
+ height: 100%;
+ background-color: ${(props) => props.theme.bg};
+ position: relative;
+
+ .environments-container {
+ display: flex;
+ height: 100%;
+ width: 100%;
+ }
+
+ .confirm-switch-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 10;
+ background: ${(props) => props.theme.bg};
+ padding: 12px;
+ border-bottom: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
+ }
+
+ /* Left Sidebar */
+ .sidebar {
+ width: 240px;
+ min-width: 240px;
+ border-right: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
+ display: flex;
+ flex-direction: column;
+ }
+
+ .sidebar-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 16px 12px 16px;
+
+ .title {
+ font-size: 13px;
+ font-weight: 600;
+ color: ${(props) => props.theme.text};
+ margin: 0;
+ }
+
+ .btn-action {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ padding: 0;
+ background: transparent;
+ border: none;
+ border-radius: 4px;
+ color: ${(props) => props.theme.colors.text.muted};
+ cursor: pointer;
+ transition: all 0.15s ease;
+
+ &:hover {
+ background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+ color: ${(props) => props.theme.text};
+ }
+ }
+ }
+
+ .search-container {
+ position: relative;
+ padding: 0 12px 12px 12px;
+
+ .search-icon {
+ position: absolute;
+ left: 20px;
+ top: 50%;
+ transform: translateY(-100%);
+ color: ${(props) => props.theme.colors.text.muted};
+ pointer-events: none;
+ }
+
+ .search-input {
+ width: 100%;
+ padding: 6px 8px 6px 28px;
+ font-size: 12px;
+ background: transparent;
+ border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
+ border-radius: 5px;
+ color: ${(props) => props.theme.text};
+ transition: all 0.15s ease;
+
+ &::placeholder {
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+
+ &:focus {
+ outline: none;
+ }
+ }
+ }
+
+ .environments-list {
+ flex: 1;
+ overflow-y: auto;
+ padding: 0 8px;
+ }
+
+ .environment-item {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 4px 8px;
+ margin-bottom: 1px;
+ font-size: 13px;
+ color: ${(props) => props.theme.text};
+ cursor: pointer;
+ border-radius: 5px;
+ transition: background 0.15s ease;
+
+ .environment-name {
+ flex: 1;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .environment-actions {
+ display: flex;
+ align-items: center;
+ opacity: 0;
+ transition: opacity 0.15s ease;
+
+ .activate-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 4px;
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ color: ${(props) => props.theme.text.muted};
+ border-radius: 3px;
+ transition: all 0.15s ease;
+
+ &:hover {
+ background: ${(props) => props.theme.workspace.button.bg};
+ color: ${(props) => props.theme.colors.text.green};
+ }
+ }
+
+ .activated-checkmark {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 4px;
+ color: ${(props) => props.theme.colors.text.green};
+ opacity: 1;
+ }
+ }
+
+ &:hover .environment-actions {
+ opacity: 1;
+ }
+
+ &.activated .environment-actions {
+ opacity: 1;
+ }
+
+ &:hover {
+ background: ${(props) => props.theme.workspace.button.bg};
+ }
+
+ &.active {
+ background: ${(props) => props.theme.workspace.environments.activeBg};
+ color: ${(props) => props.theme.text};
+ }
+
+ &.renaming,
+ &.creating {
+ cursor: default;
+ padding: 4px 4px 4px 8px;
+ background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+
+ &:hover {
+ background: ${(props) => props.theme.workspace.button.bg};
+ }
+ }
+
+ .rename-container {
+ display: flex;
+ align-items: center;
+ flex: 1;
+
+ .environment-name-input {
+ flex: 1;
+ background: transparent;
+ border: none;
+ outline: none;
+ color: ${(props) => props.theme.text};
+ font-size: 13px;
+ padding: 2px 4px;
+
+ &::placeholder {
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+ }
+
+ .inline-actions {
+ display: flex;
+ gap: 2px;
+ margin-left: 4px;
+ }
+ }
+
+ &.creating {
+ .environment-name-input {
+ flex: 1;
+ background: transparent;
+ border: none;
+ outline: none;
+ color: ${(props) => props.theme.text};
+ font-size: 13px;
+ padding: 2px 4px;
+
+ &::placeholder {
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+ }
+
+ .inline-actions {
+ display: flex;
+ gap: 2px;
+ margin-left: 4px;
+ }
+
+ .inline-action-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 22px;
+ height: 22px;
+ padding: 0;
+ background: transparent;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.15s ease;
+
+ &.save {
+ color: ${(props) => props.theme.textLink};
+
+ &:hover {
+ background: ${(props) => props.theme.listItem.hoverBg};
+ }
+ }
+
+ &.cancel {
+ color: ${(props) => props.theme.colors.text.muted};
+
+ &:hover {
+ background: ${(props) => props.theme.listItem.hoverBg};
+ color: ${(props) => props.theme.text};
+ }
+ }
+ }
+ }
+ }
+
+ .env-error {
+ padding: 4px 12px;
+ margin-top: 4px;
+ font-size: 11px;
+ color: ${(props) => props.theme.colors.text.danger};
+ background: ${(props) => `${props.theme.colors.text.danger}15`};
+ border-radius: 4px;
+ }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/index.js
new file mode 100644
index 000000000..6c7197e1a
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/index.js
@@ -0,0 +1,426 @@
+import React, { useEffect, useState, useRef } from 'react';
+import usePrevious from 'hooks/usePrevious';
+import EnvironmentDetails from './EnvironmentDetails';
+import CreateEnvironment from '../CreateEnvironment';
+import { IconDownload, IconSearch, IconPlus, IconCheck, IconX } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+import ConfirmSwitchEnv from './ConfirmSwitchEnv';
+import ImportEnvironment from '../ImportEnvironment';
+import { isEqual } from 'lodash';
+import { useDispatch, useSelector } from 'react-redux';
+import { addGlobalEnvironment, renameGlobalEnvironment, selectGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import { validateName, validateNameError } from 'utils/common/regex';
+import toast from 'react-hot-toast';
+
+const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironment, setSelectedEnvironment, isModified, setIsModified, collection }) => {
+ const dispatch = useDispatch();
+ const globalEnvs = useSelector((state) => state?.globalEnvironments?.globalEnvironments);
+
+ const [openCreateModal, setOpenCreateModal] = useState(false);
+ const [openImportModal, setOpenImportModal] = useState(false);
+ const [searchText, setSearchText] = useState('');
+ const [isCreatingInline, setIsCreatingInline] = useState(false);
+ const [renamingEnvUid, setRenamingEnvUid] = useState(null);
+ const [newEnvName, setNewEnvName] = useState('');
+ const [envNameError, setEnvNameError] = useState('');
+ const inputRef = useRef(null);
+ const renameContainerRef = useRef(null);
+ const createContainerRef = useRef(null);
+
+ const [switchEnvConfirmClose, setSwitchEnvConfirmClose] = useState(false);
+ const [originalEnvironmentVariables, setOriginalEnvironmentVariables] = useState([]);
+
+ const envUids = environments ? environments.map((env) => env.uid) : [];
+ const prevEnvUids = usePrevious(envUids);
+
+ useEffect(() => {
+ if (!environments?.length) {
+ setSelectedEnvironment(null);
+ setOriginalEnvironmentVariables([]);
+ return;
+ }
+
+ if (selectedEnvironment) {
+ let _selectedEnvironment = environments?.find((env) => env?.uid === selectedEnvironment?.uid);
+
+ if (!_selectedEnvironment) {
+ _selectedEnvironment = environments?.find((env) => env?.name === selectedEnvironment?.name);
+ }
+
+ if (!_selectedEnvironment) {
+ _selectedEnvironment = environments?.find((env) => env.uid === activeEnvironmentUid) || environments?.[0];
+ }
+
+ const hasSelectedEnvironmentChanged = !isEqual(selectedEnvironment, _selectedEnvironment);
+ if (hasSelectedEnvironmentChanged || selectedEnvironment.uid !== _selectedEnvironment?.uid) {
+ setSelectedEnvironment(_selectedEnvironment);
+ }
+ setOriginalEnvironmentVariables(_selectedEnvironment?.variables || []);
+ return;
+ }
+
+ const environment = environments?.find((env) => env.uid === activeEnvironmentUid) || environments?.[0];
+
+ setSelectedEnvironment(environment);
+ setOriginalEnvironmentVariables(environment?.variables || []);
+ }, [environments, activeEnvironmentUid, selectedEnvironment]);
+
+ useEffect(() => {
+ if (prevEnvUids && prevEnvUids.length && envUids.length > prevEnvUids.length) {
+ const newEnv = environments.find((env) => !prevEnvUids.includes(env.uid));
+ if (newEnv) {
+ setSelectedEnvironment(newEnv);
+ }
+ }
+
+ if (prevEnvUids && prevEnvUids.length && envUids.length < prevEnvUids.length) {
+ setSelectedEnvironment(environments && environments.length ? environments[0] : null);
+ }
+ }, [envUids, environments, prevEnvUids]);
+
+ useEffect(() => {
+ if (!renamingEnvUid) return;
+
+ const handleClickOutside = (event) => {
+ if (renameContainerRef.current && !renameContainerRef.current.contains(event.target)) {
+ handleCancelRename();
+ }
+ };
+
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [renamingEnvUid]);
+
+ useEffect(() => {
+ if (!isCreatingInline) return;
+
+ const handleClickOutside = (event) => {
+ if (createContainerRef.current && !createContainerRef.current.contains(event.target)) {
+ handleCancelCreate();
+ }
+ };
+
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [isCreatingInline]);
+
+ const handleEnvironmentClick = (env) => {
+ if (!isModified) {
+ setSelectedEnvironment(env);
+ } else {
+ setSwitchEnvConfirmClose(true);
+ }
+ };
+
+ const handleEnvironmentDoubleClick = (env) => {
+ setRenamingEnvUid(env.uid);
+ setNewEnvName(env.name);
+ setEnvNameError('');
+ setTimeout(() => {
+ inputRef.current?.focus();
+ inputRef.current?.select();
+ }, 50);
+ };
+
+ const handleActivateEnvironment = (e, env) => {
+ e.stopPropagation();
+ dispatch(selectGlobalEnvironment({ environmentUid: env.uid }))
+ .then(() => {
+ toast.success(`Environment "${env.name}" activated`);
+ })
+ .catch(() => {
+ toast.error('Failed to activate environment');
+ });
+ };
+
+ if (!selectedEnvironment) {
+ return null;
+ }
+
+ const validateEnvironmentName = (name, excludeUid = null) => {
+ if (!name || name.trim() === '') {
+ return 'Name is required';
+ }
+
+ if (!validateName(name)) {
+ return validateNameError(name);
+ }
+
+ const trimmedName = name.toLowerCase().trim();
+ const isDuplicate = globalEnvs.some((env) =>
+ env?.uid !== excludeUid && env?.name?.toLowerCase().trim() === trimmedName);
+ if (isDuplicate) {
+ return 'Environment already exists';
+ }
+
+ return null;
+ };
+
+ const handleCreateEnvClick = () => {
+ if (!isModified) {
+ setIsCreatingInline(true);
+ setNewEnvName('');
+ setEnvNameError('');
+ setTimeout(() => {
+ inputRef.current?.focus();
+ }, 50);
+ } else {
+ setSwitchEnvConfirmClose(true);
+ }
+ };
+
+ const handleCancelCreate = () => {
+ setIsCreatingInline(false);
+ setNewEnvName('');
+ setEnvNameError('');
+ };
+
+ const handleSaveNewEnv = () => {
+ const error = validateEnvironmentName(newEnvName);
+ if (error) {
+ setEnvNameError(error);
+ return;
+ }
+
+ dispatch(addGlobalEnvironment({ name: newEnvName }))
+ .then(() => {
+ toast.success('Environment created!');
+ setIsCreatingInline(false);
+ setNewEnvName('');
+ setEnvNameError('');
+ })
+ .catch(() => {
+ toast.error('An error occurred while creating the environment');
+ });
+ };
+
+ const handleEnvNameChange = (e) => {
+ const value = e.target.value;
+ setNewEnvName(value);
+
+ if (envNameError) {
+ setEnvNameError('');
+ }
+ };
+
+ const handleEnvNameKeyDown = (e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ if (renamingEnvUid) {
+ handleSaveRename();
+ } else {
+ handleSaveNewEnv();
+ }
+ } else if (e.key === 'Escape') {
+ e.preventDefault();
+ if (renamingEnvUid) {
+ handleCancelRename();
+ } else {
+ handleCancelCreate();
+ }
+ }
+ };
+
+ const handleSaveRename = () => {
+ const error = validateEnvironmentName(newEnvName, renamingEnvUid);
+ if (error) {
+ setEnvNameError(error);
+ return;
+ }
+
+ dispatch(renameGlobalEnvironment({ name: newEnvName, environmentUid: renamingEnvUid }))
+ .then(() => {
+ toast.success('Environment renamed!');
+ setRenamingEnvUid(null);
+ setNewEnvName('');
+ setEnvNameError('');
+ })
+ .catch(() => {
+ toast.error('An error occurred while renaming the environment');
+ });
+ };
+
+ const handleCancelRename = () => {
+ setRenamingEnvUid(null);
+ setNewEnvName('');
+ setEnvNameError('');
+ };
+
+ const handleImportClick = () => {
+ if (!isModified) {
+ setOpenImportModal(true);
+ } else {
+ setSwitchEnvConfirmClose(true);
+ }
+ };
+
+ const handleConfirmSwitch = (saveChanges) => {
+ if (!saveChanges) {
+ setSwitchEnvConfirmClose(false);
+ }
+ };
+
+ const filteredEnvironments = environments?.filter((env) =>
+ env.name.toLowerCase().includes(searchText.toLowerCase())) || [];
+
+ return (
+
+ {openCreateModal && setOpenCreateModal(false)} />}
+ {openImportModal && setOpenImportModal(false)} />}
+
+
+ {switchEnvConfirmClose && (
+
+ handleConfirmSwitch(false)} />
+
+ )}
+
+ {/* Left Sidebar */}
+
+
+
Environments
+
+ handleCreateEnvClick()} title="Create environment">
+
+ handleImportClick()} title="Import environment">
+
+
+
+
+
+
+
+
+ {filteredEnvironments.map((env) => (
+
renamingEnvUid !== env.uid && handleEnvironmentClick(env)}
+ onDoubleClick={() => handleEnvironmentDoubleClick(env)}
+ >
+ {renamingEnvUid === env.uid ? (
+
+
+
+ e.preventDefault()}
+ title="Save"
+ >
+
+ e.preventDefault()}
+ title="Cancel"
+ >
+
+
+
+ ) : (
+ <>
+
{env.name}
+
+ {activeEnvironmentUid === env.uid ? (
+
+
+ ) : (
+
handleActivateEnvironment(e, env)}
+ title="Activate environment"
+ >
+
+ )}
+
+
+ )}
+
+ ))}
+
+ {isCreatingInline && (
+
+
+
+ e.preventDefault()}
+ title="Save"
+ >
+
+ e.preventDefault()}
+ title="Cancel"
+ >
+
+
+
+ )}
+
+ {envNameError && (isCreatingInline || renamingEnvUid) && (
+
{envNameError}
+ )}
+
+
+
+ {/* Right Content */}
+
+
+ );
+};
+
+export default EnvironmentList;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/ImportEnvironment/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/ImportEnvironment/index.js
new file mode 100644
index 000000000..e4f6544d9
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/ImportEnvironment/index.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import Portal from 'components/Portal';
+import Modal from 'components/Modal';
+import toast from 'react-hot-toast';
+import { useDispatch } from 'react-redux';
+import importPostmanEnvironment from 'utils/importers/postman-environment';
+import { toastError } from 'utils/common/error';
+import { IconDatabaseImport } from '@tabler/icons';
+import { addGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+
+const ImportEnvironment = ({ onClose, onEnvironmentCreated }) => {
+ const dispatch = useDispatch();
+
+ const handleImportPostmanEnvironment = () => {
+ importPostmanEnvironment()
+ .then((environments) => {
+ const importPromises = environments
+ .filter((env) =>
+ env.name && env.name !== 'undefined')
+ .map((environment) =>
+ dispatch(addGlobalEnvironment({ name: environment.name, variables: environment.variables }))
+ .then(() => {
+ toast.success('Environment imported successfully');
+ })
+ .catch((error) => {
+ toast.error('An error occurred while importing the environment');
+ console.error(error);
+ }));
+ return Promise.all(importPromises);
+ })
+ .then(() => {
+ onClose();
+ // Call the callback if provided
+ if (onEnvironmentCreated) {
+ onEnvironmentCreated();
+ }
+ })
+ .catch((err) => toastError(err, 'Postman Import environment failed'));
+ };
+
+ return (
+
+
+
+ Import your Postman environments
+
+
+
+ );
+};
+
+export default ImportEnvironment;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/RenameEnvironment/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/RenameEnvironment/index.js
new file mode 100644
index 000000000..7d3ae3efe
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/RenameEnvironment/index.js
@@ -0,0 +1,102 @@
+import React, { useEffect, useRef } from 'react';
+import Portal from 'components/Portal/index';
+import Modal from 'components/Modal/index';
+import toast from 'react-hot-toast';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { useDispatch } from 'react-redux';
+import { renameGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import { validateName, validateNameError } from 'utils/common/regex';
+import { useSelector } from 'react-redux';
+
+const RenameEnvironment = ({ onClose, environment }) => {
+ const dispatch = useDispatch();
+ const globalEnvs = useSelector((state) => state?.globalEnvironments?.globalEnvironments);
+ const inputRef = useRef();
+
+ const validateEnvironmentName = (name) => {
+ const trimmedName = name?.toLowerCase().trim();
+ return (globalEnvs || []).every((env) =>
+ env.uid === environment.uid || env?.name?.toLowerCase().trim() !== trimmedName);
+ };
+
+ const formik = useFormik({
+ enableReinitialize: true,
+ initialValues: {
+ name: environment.name
+ },
+ validationSchema: Yup.object({
+ name: Yup.string()
+ .min(1, 'must be at least 1 character')
+ .max(255, 'Must be 255 characters or less')
+ .test('is-valid-filename', function (value) {
+ const isValid = validateName(value);
+ return isValid ? true : this.createError({ message: validateNameError(value) });
+ })
+ .required('name is required')
+ .test('duplicate-name', 'Environment already exists', validateEnvironmentName)
+ }),
+ onSubmit: (values) => {
+ if (values.name === environment.name) {
+ return;
+ }
+ dispatch(renameGlobalEnvironment({ name: values.name, environmentUid: environment.uid }))
+ .then(() => {
+ toast.success('Environment renamed successfully');
+ onClose();
+ })
+ .catch((error) => {
+ toast.error('An error occurred while renaming the environment');
+ console.error(error);
+ });
+ }
+ });
+
+ useEffect(() => {
+ if (inputRef && inputRef.current) {
+ inputRef.current.focus();
+ }
+ }, [inputRef]);
+
+ const onSubmit = () => {
+ formik.handleSubmit();
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default RenameEnvironment;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/StyledWrapper.js
new file mode 100644
index 000000000..7931f4e94
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/StyledWrapper.js
@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background-color: ${(props) => props.theme.bg};
+
+ .empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ color: ${(props) => props.theme.colors.text.muted};
+
+ svg {
+ opacity: 0.3;
+ margin-bottom: 8px;
+ }
+
+ .title {
+ font-size: 13px;
+ font-weight: 500;
+ margin-bottom: 12px;
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+
+ .actions {
+ display: flex;
+ gap: 8px;
+ }
+ }
+
+ .shared-button {
+ padding: 5px 10px;
+ font-size: 12px;
+ border-radius: 5px;
+ border: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
+ background: ${(props) => props.theme.sidebar.bg};
+ color: ${(props) => props.theme.text};
+ cursor: pointer;
+ transition: all 0.1s ease;
+
+ &:hover {
+ background: ${(props) => props.theme.listItem.hoverBg};
+ border-color: ${(props) => props.theme.textLink};
+ }
+ }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js
new file mode 100644
index 000000000..fa409e839
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js
@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import CreateEnvironment from './CreateEnvironment';
+import EnvironmentList from './EnvironmentList';
+import StyledWrapper from './StyledWrapper';
+import { IconFileAlert } from '@tabler/icons';
+import ImportEnvironment from './ImportEnvironment';
+
+export const SharedButton = ({ children, className, onClick }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+const DefaultTab = ({ setTab }) => {
+ return (
+
+
+
No Environments
+
+ setTab('create')}>
+ Create Environment
+
+ setTab('import')}>
+ Import Environment
+
+
+
+ );
+};
+
+const WorkspaceEnvironments = ({ workspace }) => {
+ const [isModified, setIsModified] = useState(false);
+ const [selectedEnvironment, setSelectedEnvironment] = useState(null);
+ const [tab, setTab] = useState('default');
+
+ const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
+ const activeGlobalEnvironmentUid = useSelector((state) => state.globalEnvironments.activeGlobalEnvironmentUid);
+
+ if (!globalEnvironments || !globalEnvironments.length) {
+ return (
+
+ {tab === 'create' ? (
+ setTab('default')} />
+ ) : tab === 'import' ? (
+ setTab('default')} />
+ ) : (
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default WorkspaceEnvironments;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/index.js b/packages/bruno-app/src/components/WorkspaceHome/index.js
new file mode 100644
index 000000000..7f0c331c7
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceHome/index.js
@@ -0,0 +1,351 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { IconCategory, IconPlus, IconFolders, IconFileImport, IconDots, IconEdit, IconX, IconCheck, IconFolder } from '@tabler/icons';
+import { importCollectionInWorkspace, renameWorkspaceAction } from 'providers/ReduxStore/slices/workspaces/actions';
+import { showInFolder, openCollection } from 'providers/ReduxStore/slices/collections/actions';
+import toast from 'react-hot-toast';
+import CreateCollection from 'components/Sidebar/CreateCollection';
+import ImportCollection from 'components/Sidebar/ImportCollection';
+import CloseWorkspace from 'components/Sidebar/TitleBar/CloseWorkspace';
+import WorkspaceCollections from './WorkspaceCollections';
+import WorkspaceDocs from './WorkspaceDocs';
+import WorkspaceEnvironments from './WorkspaceEnvironments';
+import StyledWrapper from './StyledWrapper';
+import Dropdown from 'components/Dropdown';
+
+const WorkspaceHome = () => {
+ const dispatch = useDispatch();
+ const { workspaces, activeWorkspaceUid } = useSelector((state) => state.workspaces);
+ const [activeTab, setActiveTab] = useState('collections');
+
+ const [createCollectionModalOpen, setCreateCollectionModalOpen] = useState(false);
+ const [importCollectionModalOpen, setImportCollectionModalOpen] = useState(false);
+
+ const [isRenamingWorkspace, setIsRenamingWorkspace] = useState(false);
+ const [workspaceNameInput, setWorkspaceNameInput] = useState('');
+ const [workspaceNameError, setWorkspaceNameError] = useState('');
+ const [closeWorkspaceModalOpen, setCloseWorkspaceModalOpen] = useState(false);
+ const workspaceNameInputRef = useRef(null);
+ const workspaceRenameContainerRef = useRef(null);
+ const dropdownTippyRef = useRef();
+ const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+ const activeWorkspace = workspaces.find((w) => w.uid === activeWorkspaceUid);
+
+ useEffect(() => {
+ if (!isRenamingWorkspace) return;
+
+ const handleClickOutside = (event) => {
+ if (workspaceRenameContainerRef.current && !workspaceRenameContainerRef.current.contains(event.target)) {
+ handleCancelWorkspaceRename();
+ }
+ };
+
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [isRenamingWorkspace]);
+
+ if (!activeWorkspace) {
+ return null;
+ }
+
+ const handleCreateCollection = async () => {
+ try {
+ const { ipcRenderer } = window;
+ await ipcRenderer.invoke('renderer:ensure-collections-folder', activeWorkspace.pathname);
+ setCreateCollectionModalOpen(true);
+ } catch (error) {
+ console.error('Error ensuring collections folder exists:', error);
+ toast.error('Error preparing workspace for collection creation');
+ }
+ };
+
+ const handleOpenCollection = () => {
+ dispatch(openCollection())
+ .catch((err) => {
+ console.error(err);
+ toast.error('An error occurred while opening the collection');
+ });
+ };
+
+ const handleImportCollection = () => {
+ setImportCollectionModalOpen(true);
+ };
+
+ const handleImportCollectionSubmit = ({ rawData, type, environment, repositoryUrl }) => {
+ setImportCollectionModalOpen(false);
+ dispatch(importCollectionInWorkspace(rawData, activeWorkspace.uid, undefined, type))
+ .catch((err) => {
+ console.error(err);
+ toast.error('An error occurred while importing the collection');
+ });
+ };
+
+ // Workspace menu handlers
+ const handleRenameWorkspaceClick = () => {
+ setIsRenamingWorkspace(true);
+ setWorkspaceNameInput(activeWorkspace.name);
+ setWorkspaceNameError('');
+ setTimeout(() => {
+ workspaceNameInputRef.current?.focus();
+ workspaceNameInputRef.current?.select();
+ }, 50);
+ };
+
+ const handleCloseWorkspaceClick = () => {
+ dropdownTippyRef.current?.hide();
+ if (activeWorkspace.type === 'default') {
+ toast.error('Cannot close the default workspace');
+ return;
+ }
+ setCloseWorkspaceModalOpen(true);
+ };
+
+ const handleShowInFolder = () => {
+ dropdownTippyRef.current?.hide();
+ if (activeWorkspace.pathname) {
+ dispatch(showInFolder(activeWorkspace.pathname))
+ .catch((error) => {
+ console.error('Error opening the folder', error);
+ toast.error('Error opening the folder');
+ });
+ }
+ };
+
+ const validateWorkspaceName = (name) => {
+ if (!name || name.trim() === '') {
+ return 'Name is required';
+ }
+
+ if (name.length < 1) {
+ return 'Must be at least 1 character';
+ }
+
+ if (name.length > 255) {
+ return 'Must be 255 characters or less';
+ }
+
+ return null;
+ };
+
+ const handleSaveWorkspaceRename = () => {
+ const error = validateWorkspaceName(workspaceNameInput);
+ if (error) {
+ setWorkspaceNameError(error);
+ return;
+ }
+
+ dispatch(renameWorkspaceAction(activeWorkspace.uid, workspaceNameInput))
+ .then(() => {
+ toast.success('Workspace renamed!');
+ setIsRenamingWorkspace(false);
+ setWorkspaceNameInput('');
+ setWorkspaceNameError('');
+ })
+ .catch((err) => {
+ toast.error(err?.message || 'An error occurred while renaming the workspace');
+ setWorkspaceNameError(err?.message || 'Failed to rename workspace');
+ });
+ };
+
+ const handleCancelWorkspaceRename = () => {
+ setIsRenamingWorkspace(false);
+ setWorkspaceNameInput('');
+ setWorkspaceNameError('');
+ };
+
+ const handleWorkspaceNameChange = (e) => {
+ const value = e.target.value;
+ setWorkspaceNameInput(value);
+
+ if (workspaceNameError) {
+ setWorkspaceNameError('');
+ }
+ };
+
+ const handleWorkspaceNameKeyDown = (e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ handleSaveWorkspaceRename();
+ } else if (e.key === 'Escape') {
+ e.preventDefault();
+ handleCancelWorkspaceRename();
+ }
+ };
+
+ if (!activeWorkspace) {
+ return null;
+ }
+
+ const tabs = [
+ {
+ id: 'collections',
+ label: 'Collections',
+ component: (
+
+ )
+ },
+ {
+ id: 'environments',
+ label: 'Environments',
+ component:
+ },
+ {
+ id: 'documentation',
+ label: 'Documentation',
+ component:
+ }
+ ];
+
+ return (
+
+
+ {createCollectionModalOpen && (
+
setCreateCollectionModalOpen(false)}
+ />
+ )}
+
+ {importCollectionModalOpen && (
+ setImportCollectionModalOpen(false)}
+ handleSubmit={handleImportCollectionSubmit}
+ />
+ )}
+
+
+
+
+ {isRenamingWorkspace ? (
+
+
+
+ e.preventDefault()}
+ title="Save"
+ >
+
+ e.preventDefault()}
+ title="Cancel"
+ >
+
+
+
+ ) : (
+
{activeWorkspace.name}
+ )}
+
+
+ {!isRenamingWorkspace && activeWorkspace.type !== 'default' && (
+
}
+ >
+
+
+ Rename
+
+
+ Show in Folder
+
+
+ Close
+
+
+
+ )}
+
+ {workspaceNameError && isRenamingWorkspace && (
+
{workspaceNameError}
+ )}
+
setCloseWorkspaceModalOpen(false)}
+ />
+ )}
+
+
+
+ {tabs.map((tab) => {
+ return (
+ setActiveTab(tab.id)}
+ className={`flex items-center gap-2 py-2 text-sm border-b-2 transition-colors tab-item ${activeTab === tab.id ? 'active' : ''}`}
+ >
+ {tab.label}
+
+ );
+ })}
+
+
+ {activeTab === 'collections' && (
+
+
+
+
+
+
+
+
+ )}
+
+ {tabs.find((tab) => tab.id === activeTab)?.component}
+
+
+ );
+};
+
+export default WorkspaceHome;
diff --git a/packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js b/packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js
new file mode 100644
index 000000000..1d24ac168
--- /dev/null
+++ b/packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js
@@ -0,0 +1,144 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { useFormik } from 'formik';
+import { useDispatch, useSelector } from 'react-redux';
+import * as Yup from 'yup';
+import toast from 'react-hot-toast';
+import Modal from 'components/Modal';
+import { createWorkspaceAction } from 'providers/ReduxStore/slices/workspaces/actions';
+import { browseDirectory } from 'providers/ReduxStore/slices/collections/actions';
+import { multiLineMsg } from 'utils/common/index';
+import { formatIpcError } from 'utils/common/error';
+
+const CreateWorkspace = ({ onClose }) => {
+ const inputRef = useRef();
+ const dispatch = useDispatch();
+ const workspaces = useSelector((state) => state.workspaces.workspaces);
+ const [isSubmitting, setIsSubmitting] = useState(false);
+
+ const formik = useFormik({
+ enableReinitialize: true,
+ initialValues: {
+ workspaceName: '',
+ workspaceLocation: ''
+ },
+ validationSchema: Yup.object({
+ workspaceName: Yup.string()
+ .min(1, 'must be at least 1 character')
+ .max(255, 'must be 255 characters or less')
+ .required('workspace name is required')
+ .test('unique-name', 'A workspace with this name already exists', function (value) {
+ if (!value) return true;
+
+ return !workspaces.some((w) =>
+ w.name.toLowerCase() === value.toLowerCase());
+ }),
+ workspaceLocation: Yup.string().min(1, 'location is required').required('location is required')
+ }),
+ onSubmit: async (values) => {
+ if (isSubmitting) return;
+
+ try {
+ setIsSubmitting(true);
+
+ await dispatch(createWorkspaceAction(values.workspaceName, values.workspaceName, values.workspaceLocation));
+ toast.success('Workspace created!');
+ onClose();
+ } catch (error) {
+ toast.error(multiLineMsg('An error occurred while creating the workspace', formatIpcError(error)));
+ } finally {
+ setIsSubmitting(false);
+ }
+ }
+ });
+
+ const browse = () => {
+ dispatch(browseDirectory())
+ .then((dirPath) => {
+ if (typeof dirPath === 'string') {
+ formik.setFieldValue('workspaceLocation', dirPath);
+ }
+ })
+ .catch((error) => {
+ formik.setFieldValue('workspaceLocation', '');
+ console.error(error);
+ });
+ };
+
+ useEffect(() => {
+ if (inputRef && inputRef.current) {
+ inputRef.current.focus();
+ }
+ }, [inputRef]);
+
+ return (
+
+
+
+ );
+};
+
+export default CreateWorkspace;
diff --git a/packages/bruno-app/src/pages/Bruno/index.js b/packages/bruno-app/src/pages/Bruno/index.js
index 8e5f8b944..de4e387c8 100644
--- a/packages/bruno-app/src/pages/Bruno/index.js
+++ b/packages/bruno-app/src/pages/Bruno/index.js
@@ -1,6 +1,6 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
import classnames from 'classnames';
-import Welcome from 'components/Welcome';
+import WorkspaceHome from 'components/WorkspaceHome';
import RequestTabs from 'components/RequestTabs';
import RequestTabPanel from 'components/RequestTabPanel';
import Sidebar from 'components/Sidebar';
@@ -112,7 +112,7 @@ export default function Main() {
{showHomePage ? (
- ) => {
- await page.locator('.dropdown-icon').click();
- await page.locator('.dropdown-item').filter({ hasText: 'Create Collection' }).click();
+ await page.locator('.plus-icon-button').click();
+ await page.locator('.tippy-box .dropdown-item').filter({ hasText: 'Create collection' }).click();
await page.getByLabel('Name').fill('source-collection');
- await page.getByLabel('Location').fill(await createTmpDir('source-collection'));
- await page.getByRole('button', { name: 'Create', exact: true }).click();
+ const locationInput = page.getByLabel('Location');
+ if (await locationInput.isVisible()) {
+ await locationInput.fill(await createTmpDir('source-collection'));
+ }
+ await page.locator('.bruno-modal').getByRole('button', { name: 'Create', exact: true }).click();
await expect(page.locator('#sidebar-collection-name').filter({ hasText: 'source-collection' })).toBeVisible();
await page.locator('#sidebar-collection-name').filter({ hasText: 'source-collection' }).click();
await page.getByLabel('Safe Mode').check();
diff --git a/tests/request/tests/custom-search/custom-search.spec.ts b/tests/request/tests/custom-search/custom-search.spec.ts
index b6c620224..9806782b4 100644
--- a/tests/request/tests/custom-search/custom-search.spec.ts
+++ b/tests/request/tests/custom-search/custom-search.spec.ts
@@ -2,7 +2,7 @@ import { test, expect } from '../../../../playwright';
test.describe('Custom Search Functionality in Scripts Tab', () => {
test('should open search box when Cmd+F or Ctrl+F is pressed in scripts tab', async ({ pageWithUserData: page }) => {
- await page.getByTitle('custom-search').click();
+ await page.getByTestId('collections').locator('#sidebar-collection-name').filter({ hasText: 'custom-search' }).click();
await page.getByText('search-test-request').click();
@@ -62,7 +62,7 @@ test.describe('Custom Search Functionality in Scripts Tab', () => {
});
test('should handle search in different script editors independently', async ({ pageWithUserData: page }) => {
- await page.getByTitle('custom-search').click();
+ await page.getByTestId('collections').locator('#sidebar-collection-name').filter({ hasText: 'custom-search' }).click();
await page.getByText('search-test-request').click();
@@ -96,7 +96,7 @@ test.describe('Custom Search Functionality in Scripts Tab', () => {
});
test('should maintain search state when switching between tabs', async ({ pageWithUserData: page }) => {
- await page.getByTitle('custom-search').click();
+ await page.getByTestId('collections').locator('#sidebar-collection-name').filter({ hasText: 'custom-search' }).click();
await page.getByText('search-test-request').click();
diff --git a/tests/runner/collection-run.ts b/tests/runner/collection-run.ts
index 1f7a01db5..8d89b8618 100644
--- a/tests/runner/collection-run.ts
+++ b/tests/runner/collection-run.ts
@@ -1,4 +1,4 @@
-import { test } from '../../playwright';
+import { test, expect } from '../../playwright';
import { setSandboxMode, runCollection, validateRunnerResults } from '../utils/page/index';
test.describe.parallel('Collection Run', () => {
@@ -29,7 +29,7 @@ test.describe.parallel('Collection Run', () => {
await page.getByRole('button', { name: 'Save' }).click();
await page.locator('.environment-selector').nth(1).click();
await page.locator('.dropdown-item').getByText('Prod').click();
- const collectionContainer = page.locator('.collection-name').filter({ hasText: 'bruno-testbench' });
+ const collectionContainer = page.getByTestId('collections').locator('.collection-name').filter({ hasText: 'bruno-testbench' });
await collectionContainer.locator('.collection-actions').hover();
await collectionContainer.locator('.collection-actions .icon').waitFor({ state: 'visible' });
await collectionContainer.locator('.collection-actions .icon').click();
diff --git a/tests/start/app-open.spec.ts b/tests/start/app-open.spec.ts
index 326ff895c..d2df08383 100644
--- a/tests/start/app-open.spec.ts
+++ b/tests/start/app-open.spec.ts
@@ -1,5 +1,9 @@
import { test, expect } from '../../playwright';
-test('Check if the logo on top left is visible', async ({ page }) => {
- await expect(page.getByRole('button', { name: 'bruno' })).toBeVisible();
+test('Check if the workspace name is visible in the sidebar', async ({ page }) => {
+ // Wait for the app to be loaded
+ await page.locator('[data-app-state="loaded"]').waitFor({ timeout: 30000 });
+
+ // Wait for the workspace name container to be visible (contains workspace name like "My Workspace" or "Default Workspace")
+ await expect(page.locator('.workspace-name-container')).toBeVisible();
});
diff --git a/tests/utils/page/actions.ts b/tests/utils/page/actions.ts
index a0589e149..fd41eab73 100644
--- a/tests/utils/page/actions.ts
+++ b/tests/utils/page/actions.ts
@@ -8,20 +8,20 @@ import { buildCommonLocators } from './locators';
*/
const closeAllCollections = async (page) => {
await test.step('Close all collections', async () => {
- const numberOfCollections = await page.locator('.collection-name').count();
+ const numberOfCollections = await page.locator('[data-testid="collections"] .collection-name').count();
for (let i = 0; i < numberOfCollections; i++) {
- await page.locator('.collection-name').first().locator('.collection-actions').click();
- await page.locator('.dropdown-item').getByText('Close').click();
- // Wait for the close collection modal to be visible
- await page.locator('.bruno-modal-header-title', { hasText: 'Close Collection' }).waitFor({ state: 'visible' });
+ await page.locator('[data-testid="collections"] .collection-name').first().locator('.collection-actions').click();
+ await page.locator('.dropdown-item').getByText('Remove').click();
+ // Wait for the remove collection modal to be visible
+ await page.locator('.bruno-modal-header-title', { hasText: 'Remove Collection' }).waitFor({ state: 'visible' });
await page.locator('.bruno-modal-footer .submit').click();
- // Wait for the close collection modal to be hidden
- await page.locator('.bruno-modal-header-title', { hasText: 'Close Collection' }).waitFor({ state: 'hidden' });
+ // Wait for the remove collection modal to be hidden
+ await page.locator('.bruno-modal-header-title', { hasText: 'Remove Collection' }).waitFor({ state: 'hidden' });
}
- // Wait until no collections are left open
- await expect(page.locator('.collection-name')).toHaveCount(0);
+ // Wait until no collections are left open (check sidebar only)
+ await expect(page.getByTestId('collections').locator('.collection-name')).toHaveCount(0);
});
};
@@ -62,13 +62,16 @@ type CreateCollectionOptions = {
*/
const createCollection = async (page, collectionName: string, collectionLocation: string, options: CreateCollectionOptions = {}) => {
await test.step(`Create collection "${collectionName}"`, async () => {
- await page.locator('.collection-dropdown .dropdown-icon').click();
- await page.locator('.tippy-box .dropdown-item').filter({ hasText: 'Create Collection' }).click();
+ await page.locator('.plus-icon-button').click();
+ await page.locator('.tippy-box .dropdown-item').filter({ hasText: 'Create collection' }).click();
const createCollectionModal = page.locator('.bruno-modal-card').filter({ hasText: 'Create Collection' });
await createCollectionModal.getByLabel('Name').fill(collectionName);
- await createCollectionModal.getByLabel('Location').fill(collectionLocation);
+ const locationInput = createCollectionModal.getByLabel('Location');
+ if (await locationInput.isVisible()) {
+ await locationInput.fill(collectionLocation);
+ }
await createCollectionModal.getByRole('button', { name: 'Create', exact: true }).click();
await createCollectionModal.waitFor({ state: 'detached' });
@@ -115,8 +118,8 @@ const deleteRequest = async (page, requestName: string, collectionName: string)
await locators.sidebar.collection(collectionName).click();
// Find the request within the collection's context
- // Use the collection container (.collection-name) to scope the search
- const collectionContainer = page.locator('.collection-name').filter({ hasText: collectionName });
+ // Use the collection container (.collection-name) scoped to sidebar to scope the search
+ const collectionContainer = page.getByTestId('collections').locator('.collection-name').filter({ hasText: collectionName });
const collectionWrapper = collectionContainer.locator('..');
const request = collectionWrapper.locator('.collection-item-name').filter({ hasText: requestName });
diff --git a/tests/utils/page/locators.ts b/tests/utils/page/locators.ts
index 7ee6e660a..833913ef3 100644
--- a/tests/utils/page/locators.ts
+++ b/tests/utils/page/locators.ts
@@ -21,7 +21,7 @@ export const buildCommonLocators = (page: Page) => ({
},
actions: {
collectionActions: (collectionName: string) =>
- page.locator('.collection-name')
+ page.getByTestId('collections').locator('.collection-name')
.filter({ hasText: collectionName })
.locator('.collection-actions .icon'),
collectionItemActions: (itemName: string) =>
@@ -43,7 +43,7 @@ export const buildCommonLocators = (page: Page) => ({
modal: {
title: (title: string) => page.locator('.bruno-modal-header-title').filter({ hasText: title }),
byTitle: (title: string) => page.locator('.bruno-modal').filter({ has: page.locator('.bruno-modal-header-title').filter({ hasText: title }) }),
- button: (name: string) => page.getByRole('button', { name: name, exact: true }),
+ button: (name: string) => page.locator('.bruno-modal').getByRole('button', { name: name, exact: true }),
closeButton: () => page.locator('.bruno-modal').getByTestId('modal-close-button')
},
environment: {
diff --git a/tests/utils/page/runner.ts b/tests/utils/page/runner.ts
index d6454b4ed..a3aa1ae23 100644
--- a/tests/utils/page/runner.ts
+++ b/tests/utils/page/runner.ts
@@ -27,8 +27,8 @@ export const getRunnerResultCounts = async (page: Page) => {
* @returns void
*/
export const runCollection = async (page: Page, collectionName: string) => {
- // Ensure collection is visible and loaded
- const collectionContainer = page.locator('.collection-name').filter({ hasText: collectionName });
+ // Ensure collection is visible and loaded (scope to sidebar)
+ const collectionContainer = page.getByTestId('collections').locator('.collection-name').filter({ hasText: collectionName });
await collectionContainer.waitFor({ state: 'visible' });
// Wait a bit for the UI to stabilize
await page.waitForTimeout(300);
@@ -71,24 +71,14 @@ export const runCollection = async (page: Page, collectionName: string) => {
* @returns void
*/
export const setSandboxMode = async (page: Page, collectionName: string, mode: 'developer' | 'safe') => {
- // Click on the collection name - try sidebar first, then fall back to collection tab/name
- // First try sidebar collection name (more reliable)
- const sidebarCollection = page.locator('#sidebar-collection-name').filter({ hasText: collectionName });
- const sidebarExists = await sidebarCollection.count().then((count) => count > 0).catch(() => false);
+ // Click on the collection name in the sidebar
+ // Use the collections testid to scope to the sidebar, then find the specific collection
+ const sidebarCollection = page.getByTestId('collections').locator('#sidebar-collection-name').filter({ hasText: collectionName }).first();
- if (sidebarExists) {
- await sidebarCollection.click();
- } else {
- // Fall back to collection by title or text
- const collectionByTitle = page.getByTitle(collectionName);
- const collectionByText = page.getByText(collectionName);
- const titleExists = await collectionByTitle.count().then((count) => count > 0).catch(() => false);
- if (titleExists) {
- await collectionByTitle.click();
- } else {
- await collectionByText.click();
- }
- }
+ // Wait for the sidebar to be loaded
+ await page.waitForTimeout(500);
+
+ await sidebarCollection.click();
// Wait a moment for the UI to load
await page.waitForTimeout(300);