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 ( - - -
-
- - - {formik.touched.name && formik.errors.name ? ( -
{formik.errors.name}
- ) : null} -
-
-
-
+
+
+ +
+ + + Create + +
+ {formik.touched.name && formik.errors.name ?
{formik.errors.name}
: null} +
+
); }; 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 }) => {