diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
index e6947bd3ad..6aca6c4c1e 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
@@ -1,13 +1,12 @@
import React, { useEffect, useRef } from 'react';
-import Portal from 'components/Portal';
-import Modal from 'components/Modal';
import toast from 'react-hot-toast';
import { useFormik } from 'formik';
import { addEnvironment } from 'providers/ReduxStore/slices/collections/actions';
import * as Yup from 'yup';
import { useDispatch } from 'react-redux';
+import { SharedButton } from 'components/Environments/EnvironmentSettings';
-const CreateEnvironment = ({ collection, onClose }) => {
+const CreateEnvironment = ({ collection }) => {
const dispatch = useDispatch();
const inputRef = useRef();
const formik = useFormik({
@@ -25,7 +24,6 @@ const CreateEnvironment = ({ collection, onClose }) => {
dispatch(addEnvironment(values.name, collection.uid))
.then(() => {
toast.success('Environment created in collection');
- onClose();
})
.catch(() => toast.error('An error occurred while created the environment'));
}
@@ -42,39 +40,32 @@ const CreateEnvironment = ({ collection, onClose }) => {
};
return (
-
-
-
-
-
+
);
};
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/ImportEnvironment/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/ImportEnvironment/index.js
index 5caba79b21..8060ea01ee 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/ImportEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/ImportEnvironment/index.js
@@ -1,38 +1,46 @@
import React from 'react';
-import Portal from 'components/Portal';
import toast from 'react-hot-toast';
import { useDispatch } from 'react-redux';
import importPostmanEnvironment from 'utils/importers/postman-environment';
import { importEnvironment } from 'providers/ReduxStore/slices/collections/actions';
import { toastError } from 'utils/common/error';
-import Modal from 'components/Modal';
+import { IconDatabaseImport } from '@tabler/icons';
-const ImportEnvironment = ({ onClose, collection }) => {
+const ImportEnvironment = ({ collection }) => {
const dispatch = useDispatch();
const handleImportPostmanEnvironment = () => {
importPostmanEnvironment()
- .then((environment) => {
- dispatch(importEnvironment(environment.name, environment.variables, collection.uid))
- .then(() => {
- toast.success('Environment imported successfully');
- onClose();
- })
- .catch(() => toast.error('An error occurred while importing the environment'));
+ .then((environments) => {
+ environments
+ .filter((env) =>
+ env.name && env.name !== 'undefined'
+ ? true
+ : () => {
+ toast.error('Failed to import environment: env has no name');
+ return false;
+ }
+ )
+ .map((environment) => {
+ dispatch(importEnvironment(environment.name, environment.variables, collection.uid))
+ .then(() => {
+ toast.success('Environment imported successfully');
+ })
+ .catch(() => toast.error('An error occurred while importing the environment'));
+ });
})
.catch((err) => toastError(err, 'Postman Import environment failed'));
};
return (
-
-
-
-
- Postman Environment
-
-
-
-
+
);
};
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
index 0a3f7e25bf..464c032b63 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
@@ -4,6 +4,43 @@ import CreateEnvironment from './CreateEnvironment';
import EnvironmentList from './EnvironmentList';
import StyledWrapper from './StyledWrapper';
import ImportEnvironment from './ImportEnvironment';
+import { IconFileAlert } from '@tabler/icons';
+
+export const SharedButton = ({ children, className, onClick }) => {
+ return (
+
+ );
+};
+
+const DefaultTab = ({ setTab }) => {
+ return (
+
+
+
No environments found
+
+ Get started by using the following buttons :
+
+
+ setTab('create')}>
+ Create Environment
+
+
+ Or
+
+ setTab('import')}>
+ Import Environment
+
+
+
+ );
+};
const EnvironmentSettings = ({ collection, onClose }) => {
const [isModified, setIsModified] = useState(false);
@@ -11,38 +48,25 @@ const EnvironmentSettings = ({ collection, onClose }) => {
const [openCreateModal, setOpenCreateModal] = useState(false);
const [openImportModal, setOpenImportModal] = useState(false);
const [selectedEnvironment, setSelectedEnvironment] = useState(null);
-
+ const [tab, setTab] = useState('default');
if (!environments || !environments.length) {
return (
setTab('default')}
handleCancel={onClose}
hideCancel={true}
>
- {openCreateModal && setOpenCreateModal(false)} />}
- {openImportModal && setOpenImportModal(false)} />}
-
-
No environments found!
-
-
-
Or
-
-
-
+ {tab === 'create' ? (
+
+ ) : tab === 'import' ? (
+
+ ) : (
+
+ )}
);
diff --git a/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js b/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
index d829baf103..6c40317292 100644
--- a/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
@@ -60,7 +60,7 @@ const ImportCollection = ({ onClose, handleSubmit }) => {