feat(#589): polish importing postman env

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
-import Portal from 'components/Portal/index';
-import Modal from 'components/Modal/index';
+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';

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js

@@ -10,6 +10,7 @@ const StyledWrapper = styled.div`
     background-color: ${(props) => props.theme.collection.environment.settings.sidebar.bg};
     border-right: solid 1px ${(props) => props.theme.collection.environment.settings.sidebar.borderRight};
     min-height: 400px;
+    height: 100%;
   }
 
   .environment-item {
@@ -35,7 +36,8 @@ const StyledWrapper = styled.div`
     }
   }
 
-  .btn-create-environment {
+  .btn-create-environment,
+  .btn-import-environment {
     padding: 8px 10px;
     cursor: pointer;
     border-bottom: none;
@@ -47,6 +49,10 @@ const StyledWrapper = styled.div`
       }
     }
   }
+
+  .btn-import-environment {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
 `;
 
 export default StyledWrapper;

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

@@ -1,15 +1,19 @@
 import React, { useEffect, useState, forwardRef, useRef } from 'react';
 import { findEnvironmentInCollection } from 'utils/collections';
+import toast from 'react-hot-toast';
+import { toastError } from 'utils/common/error';
 import usePrevious from 'hooks/usePrevious';
 import EnvironmentDetails from './EnvironmentDetails';
-import CreateEnvironment from '../CreateEnvironment/index';
+import CreateEnvironment from '../CreateEnvironment';
+import { IconUpload } from '@tabler/icons';
+import ImportEnvironment from '../ImportEnvironment';
 import StyledWrapper from './StyledWrapper';
-import ImportEnvironment from "components/Environments/EnvironmentSettings/ImportEnvironment";
 
 const EnvironmentList = ({ collection }) => {
   const { environments } = collection;
   const [selectedEnvironment, setSelectedEnvironment] = useState(null);
   const [openCreateModal, setOpenCreateModal] = useState(false);
+  const [openImportModal, setOpenImportModal] = useState(false);
 
   const envUids = environments ? environments.map((env) => env.uid) : [];
   const prevEnvUids = usePrevious(envUids);
@@ -49,9 +53,10 @@ const EnvironmentList = ({ collection }) => {
   return (
     <StyledWrapper>
       {openCreateModal && <CreateEnvironment collection={collection} onClose={() => setOpenCreateModal(false)} />}
+      {openImportModal && <ImportEnvironment collection={collection} onClose={() => setOpenImportModal(false)} />}
       <div className="flex">
         <div>
-          <div className="environments-sidebar">
+          <div className="environments-sidebar flex flex-col">
             {environments &&
               environments.length &&
               environments.map((env) => (
@@ -66,7 +71,11 @@ const EnvironmentList = ({ collection }) => {
             <div className="btn-create-environment" onClick={() => setOpenCreateModal(true)}>
               + <span>Create</span>
             </div>
-            <ImportEnvironment title={"Import"} collectionUid={collection.uid}/>
+
+            <div className="mt-auto flex items-center btn-import-environment" onClick={() => setOpenImportModal(true)}>
+              <IconUpload size={12} strokeWidth={2} />
+              <span className="label ml-1 text-xs">Import</span>
+            </div>
           </div>
         </div>
         <EnvironmentDetails environment={selectedEnvironment} collection={collection} />

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

@@ -1,33 +1,39 @@
-import toast from "react-hot-toast";
-import {toastError} from "utils/common/error";
-import {useDispatch} from "react-redux";
-import {importEnvironment} from "providers/ReduxStore/slices/collections/actions";
-import importPostmanEnvironment from "utils/importers/postman-environment";
-import React from "react";
+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';
 
-const ImportEnvironment = ({title, collectionUid}) => {
-    const dispatch = useDispatch();
+const ImportEnvironment = ({ onClose, collection }) => {
+  const dispatch = useDispatch();
 
-    const handleImportPostmanEnvironment = () => {
-        importPostmanEnvironment()
-            .then((environment) => {
-                dispatch(importEnvironment(environment.name, environment.variables, collectionUid))
-                    .then(() => {
-                        toast.success('Environment imported successfully');
-                    })
-                    .catch(() => toast.error('An error occurred while importing the environment'));
-            })
-            .catch((err) => toastError(err, 'Postman Import environment failed'));
-    };
+  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'));
+      })
+      .catch((err) => toastError(err, 'Postman Import environment failed'));
+  };
 
-    return(
-        <button
-            className="btn-create-environment text-link pr-2 py-2 mt-2 select-none"
-            onClick={handleImportPostmanEnvironment}
-        >
-            + <span>{title}</span>
-        </button>
-    );
+  return (
+    <Portal>
+      <Modal size="sm" title="Import Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
+        <div>
+          <div className="text-link hover:underline cursor-pointer" onClick={handleImportPostmanEnvironment}>
+            Postman Environment
+          </div>
+        </div>
+      </Modal>
+    </Portal>
+  );
 };
 
-export default ImportEnvironment;
+export default ImportEnvironment;

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

@@ -3,11 +3,12 @@ import React, { useState } from 'react';
 import CreateEnvironment from './CreateEnvironment';
 import EnvironmentList from './EnvironmentList';
 import StyledWrapper from './StyledWrapper';
-import ImportEnvironment from "components/Environments/EnvironmentSettings/ImportEnvironment";
+import ImportEnvironment from './ImportEnvironment';
 
 const EnvironmentSettings = ({ collection, onClose }) => {
   const { environments } = collection;
   const [openCreateModal, setOpenCreateModal] = useState(false);
+  const [openImportModal, setOpenImportModal] = useState(false);
 
   if (!environments || !environments.length) {
     return (
@@ -21,15 +22,24 @@ const EnvironmentSettings = ({ collection, onClose }) => {
           hideCancel={true}
         >
           {openCreateModal && <CreateEnvironment collection={collection} onClose={() => setOpenCreateModal(false)} />}
-          <div className="text-center">
+          {openImportModal && <ImportEnvironment collection={collection} onClose={() => setOpenImportModal(false)} />}
+          <div className="text-center flex flex-col">
             <p>No environments found!</p>
             <button
               className="btn-create-environment text-link pr-2 py-3 mt-2 select-none"
               onClick={() => setOpenCreateModal(true)}
             >
-              + <span>Create Environment</span>
+              <span>Create Environment</span>
+            </button>
+
+            <span>Or</span>
+
+            <button
+              className="btn-import-environment text-link pl-2 pr-2 py-3 select-none"
+              onClick={() => setOpenImportModal(true)}
+            >
+              <span>Import Environment</span>
             </button>
-            <ImportEnvironment title={"Import Postman Environment"} collectionUid={collection.uid}/>
           </div>
         </Modal>
       </StyledWrapper>

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js

@@ -9,6 +9,7 @@ const StyledWrapper = styled.div`
     background-color: ${(props) => props.theme.collection.environment.settings.sidebar.bg};
     border-right: solid 1px ${(props) => props.theme.collection.environment.settings.sidebar.borderRight};
     min-height: 400px;
+    height: 100%;
   }
 
   .generate-code-item {

packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js

@@ -731,20 +731,20 @@ export const importEnvironment = (name, variables, collectionUid) => (dispatch,
     }
 
     ipcRenderer
-        .invoke('renderer:import-environment', collection.pathname, name, variables)
-        .then(
-            dispatch(
-                updateLastAction({
-                  collectionUid,
-                  lastAction: {
-                    type: 'ADD_ENVIRONMENT',
-                    payload: name
-                  }
-                })
-            )
+      .invoke('renderer:create-environment', collection.pathname, name, variables)
+      .then(
+        dispatch(
+          updateLastAction({
+            collectionUid,
+            lastAction: {
+              type: 'ADD_ENVIRONMENT',
+              payload: name
+            }
+          })
         )
-        .then(resolve)
-        .catch(reject);
+      )
+      .then(resolve)
+      .catch(reject);
   });
 };
 
@@ -762,7 +762,7 @@ export const copyEnvironment = (name, baseEnvUid, collectionUid) => (dispatch, g
     }
 
     ipcRenderer
-      .invoke('renderer:copy-environment', collection.pathname, name, baseEnv.variables)
+      .invoke('renderer:create-environment', collection.pathname, name, baseEnv.variables)
       .then(
         dispatch(
           updateLastAction({

packages/bruno-electron/src/ipc/collection.js

@@ -140,7 +140,7 @@ const registerRendererEventHandlers = (mainWindow, watcher, lastOpenedCollection
   });
 
   // create environment
-  ipcMain.handle('renderer:create-environment', async (event, collectionPathname, name) => {
+  ipcMain.handle('renderer:create-environment', async (event, collectionPathname, name, variables) => {
     try {
       const envDirPath = path.join(collectionPathname, 'environments');
       if (!fs.existsSync(envDirPath)) {
@@ -152,53 +152,17 @@ const registerRendererEventHandlers = (mainWindow, watcher, lastOpenedCollection
         throw new Error(`environment: ${envFilePath} already exists`);
       }
 
-      const content = envJsonToBru({
-        variables: []
-      });
-      await writeFile(envFilePath, content);
-    } catch (error) {
-      return Promise.reject(error);
-    }
-  });
+      const environment = {
+        name: name,
+        variables: variables || []
+      };
 
-  // copy environment
-  ipcMain.handle('renderer:copy-environment', async (event, collectionPathname, name, baseVariables) => {
-    try {
-      const envDirPath = path.join(collectionPathname, 'environments');
-      if (!fs.existsSync(envDirPath)) {
-        await createDirectory(envDirPath);
+      if (envHasSecrets(environment)) {
+        environmentSecretsStore.storeEnvSecrets(collectionPathname, environment);
       }
 
-      const envFilePath = path.join(envDirPath, `${name}.bru`);
-      if (fs.existsSync(envFilePath)) {
-        throw new Error(`environment: ${envFilePath} already exists`);
-      }
+      const content = envJsonToBru(environment);
 
-      const content = envJsonToBru({
-        variables: baseVariables
-      });
-      await writeFile(envFilePath, content);
-    } catch (error) {
-      return Promise.reject(error);
-    }
-  });
-
-  // copy environment
-  ipcMain.handle('renderer:import-environment', async (event, collectionPathname, name, variables) => {
-    try {
-      const envDirPath = path.join(collectionPathname, 'environments');
-      if (!fs.existsSync(envDirPath)) {
-        await createDirectory(envDirPath);
-      }
-
-      const envFilePath = path.join(envDirPath, `${name}.bru`);
-      if (fs.existsSync(envFilePath)) {
-        throw new Error(`environment: ${envFilePath} already exists`);
-      }
-
-      const content = envJsonToBru({
-        variables: variables
-      });
       await writeFile(envFilePath, content);
     } catch (error) {
       return Promise.reject(error);