import environments ui and collection root object for json export - updates (#2565)

* pr review changes

* collection root object in export json

* import environment updates

packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js

@@ -4,9 +4,10 @@ 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';
+import Portal from 'components/Portal';
+import Modal from 'components/Modal';
 
-const CreateEnvironment = ({ collection }) => {
+const CreateEnvironment = ({ collection, onClose }) => {
   const dispatch = useDispatch();
   const inputRef = useRef();
   const formik = useFormik({
@@ -24,8 +25,9 @@ const CreateEnvironment = ({ collection }) => {
       dispatch(addEnvironment(values.name, collection.uid))
         .then(() => {
           toast.success('Environment created in collection');
+          onClose();
         })
-        .catch(() => toast.error('An error occurred while created the environment'));
+        .catch(() => toast.error('An error occurred while creating the environment'));
     }
   });
 
@@ -40,6 +42,14 @@ const CreateEnvironment = ({ collection }) => {
   };
 
   return (
+    <Portal>
+      <Modal
+        size="sm"
+        title={'Create Environment'}
+        confirmText="Create"
+        handleConfirm={onSubmit}
+        handleCancel={onClose}
+      >
         <form className="bruno-form" onSubmit={formik.handleSubmit}>
           <div>
             <label htmlFor="name" className="block font-semibold">
@@ -59,13 +69,14 @@ const CreateEnvironment = ({ collection }) => {
                 onChange={formik.handleChange}
                 value={formik.values.name || ''}
               />
-          <SharedButton className="py-2.5 ml-1" onClick={onSubmit}>
-            Create
-          </SharedButton>
             </div>
-        {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
+            {formik.touched.name && formik.errors.name ? (
+              <div className="text-red-500">{formik.errors.name}</div>
+            ) : null}
           </div>
         </form>
+      </Modal>
+    </Portal>
   );
 };
 

packages/bruno-app/src/components/Environments/EnvironmentSettings/ImportEnvironment/index.js

@@ -1,4 +1,6 @@
 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';
@@ -6,7 +8,7 @@ import { importEnvironment } from 'providers/ReduxStore/slices/collections/actio
 import { toastError } from 'utils/common/error';
 import { IconDatabaseImport } from '@tabler/icons';
 
-const ImportEnvironment = ({ collection }) => {
+const ImportEnvironment = ({ collection, onClose }) => {
   const dispatch = useDispatch();
 
   const handleImportPostmanEnvironment = () => {
@@ -29,10 +31,15 @@ const ImportEnvironment = ({ collection }) => {
               .catch(() => toast.error('An error occurred while importing the environment'));
           });
       })
+      .then(() => {
+        onClose();
+      })
       .catch((err) => toastError(err, 'Postman Import environment failed'));
   };
 
   return (
+    <Portal>
+      <Modal size="sm" title="Import Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
         <button
           type="button"
           onClick={handleImportPostmanEnvironment}
@@ -41,6 +48,8 @@ const ImportEnvironment = ({ collection }) => {
           <IconDatabaseImport size={64} />
           <span className="mt-2 block text-sm font-semibold">Import your Postman environments</span>
         </button>
+      </Modal>
+    </Portal>
   );
 };
 

packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js

@@ -45,28 +45,20 @@ const DefaultTab = ({ setTab }) => {
 const EnvironmentSettings = ({ collection, onClose }) => {
   const [isModified, setIsModified] = useState(false);
   const { environments } = collection;
-  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 (
       <StyledWrapper>
-        <Modal
+        <Modal size="md" title="Environments" handleCancel={onClose} hideCancel={true} hideFooter={true}>
-          size="md"
-          title="Environments"
-          confirmText={'Go back'}
-          handleConfirm={() => setTab('default')}
-          handleCancel={onClose}
-          hideCancel={true}
-        >
           {tab === 'create' ? (
-            <CreateEnvironment collection={collection} />
+            <CreateEnvironment collection={collection} onClose={() => setTab('default')} />
           ) : tab === 'import' ? (
-            <ImportEnvironment collection={collection} />
+            <ImportEnvironment collection={collection} onClose={() => setTab('default')} />
           ) : (
-            <DefaultTab setTab={setTab} />
+            <></>
           )}
+          <DefaultTab setTab={setTab} />
         </Modal>
       </StyledWrapper>
     );

packages/bruno-app/src/components/FolderSettings/index.js

@@ -12,8 +12,8 @@ const FolderSettings = ({ collection, folder }) => {
   const dispatch = useDispatch();
   let tab = 'headers';
   const { folderLevelSettingsSelectedTab } = collection;
-  if (folderLevelSettingsSelectedTab?.[folder.uid]) {
+  if (folderLevelSettingsSelectedTab?.[folder?.uid]) {
-    tab = folderLevelSettingsSelectedTab[folder.uid];
+    tab = folderLevelSettingsSelectedTab[folder?.uid];
   }
 
   const setTab = (tab) => {

packages/bruno-app/src/utils/collections/index.js

@@ -417,7 +417,25 @@ export const transformCollectionToSaveToExportAsFile = (collection, options = {}
   collectionToSave.items = [];
   collectionToSave.activeEnvironmentUid = collection.activeEnvironmentUid;
   collectionToSave.environments = collection.environments || [];
-  collectionToSave.root = collection.root || {};
+  collectionToSave.root = {
+    request: {
+      auth: collection?.root?.request?.auth,
+      headers: collection?.root?.request?.headers,
+      script: collection?.root?.request?.script,
+      vars: collection?.root?.request?.vars,
+      tests: collection?.root?.request?.tests
+    },
+    docs: collection?.root?.request?.docs,
+    meta: {
+      name: collection?.root?.meta?.name || collection?.name
+    }
+  };
+
+  if (!collection?.root?.request?.auth?.mode) {
+    collectionToSave.root.request.auth = {
+      mode: 'none'
+    };
+  }
 
   collectionToSave.brunoConfig = cloneDeep(collection?.brunoConfig);