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,32 +42,41 @@ const CreateEnvironment = ({ collection }) => {
   };
 
   return (
-    <form className="bruno-form" onSubmit={formik.handleSubmit}>
-      <div>
-        <label htmlFor="name" className="block font-semibold">
-          Environment Name
-        </label>
-        <div className="flex items-center mt-2">
-          <input
-            id="environment-name"
-            type="text"
-            name="name"
-            ref={inputRef}
-            className="block textbox w-full"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            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}
-      </div>
-    </form>
+    <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">
+              Environment Name
+            </label>
+            <div className="flex items-center mt-2">
+              <input
+                id="environment-name"
+                type="text"
+                name="name"
+                ref={inputRef}
+                className="block textbox w-full"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                onChange={formik.handleChange}
+                value={formik.values.name || ''}
+              />
+            </div>
+            {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,18 +31,25 @@ const ImportEnvironment = ({ collection }) => {
               .catch(() => toast.error('An error occurred while importing the environment'));
           });
       })
+      .then(() => {
+        onClose();
+      })
       .catch((err) => toastError(err, 'Postman Import environment failed'));
   };
 
   return (
-    <button
-      type="button"
-      onClick={handleImportPostmanEnvironment}
-      className="flex justify-center flex-col items-center w-full dark:bg-zinc-700 rounded-lg border-2 border-dashed border-zinc-300 dark:border-zinc-400 p-12 text-center hover:border-zinc-400 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2"
-    >
-      <IconDatabaseImport size={64} />
-      <span className="mt-2 block text-sm font-semibold">Import your Postman environments</span>
-    </button>
+    <Portal>
+      <Modal size="sm" title="Import Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
+        <button
+          type="button"
+          onClick={handleImportPostmanEnvironment}
+          className="flex justify-center flex-col items-center w-full dark:bg-zinc-700 rounded-lg border-2 border-dashed border-zinc-300 dark:border-zinc-400 p-12 text-center hover:border-zinc-400 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2"
+        >
+          <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
-          size="md"
-          title="Environments"
-          confirmText={'Go back'}
-          handleConfirm={() => setTab('default')}
-          handleCancel={onClose}
-          hideCancel={true}
-        >
+        <Modal size="md" title="Environments" handleCancel={onClose} hideCancel={true} hideFooter={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]) {
-    tab = folderLevelSettingsSelectedTab[folder.uid];
+  if (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);