import environments ui and collection root object for json export - u…

…pdates (#2565) * pr review changes * collection root object in export json * import environment updates
usebruno · Jul 4, 2024 · e462eb6 · e462eb6
1 parent 40f7be5
commit e462eb6
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 54 deletions.
diff --git a/...ages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js b/...ages/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>
  );
 };
 

diff --git a/...ages/bruno-app/src/components/Environments/EnvironmentSettings/ImportEnvironment/index.js b/...ages/bruno-app/src/components/Environments/EnvironmentSettings/ImportEnvironment/index.js
@@ -1,12 +1,14 @@
 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';
 import { importEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 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>
  );
 };
 

diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js b/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>
  );

diff --git a/packages/bruno-app/src/components/FolderSettings/index.js b/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) => {

diff --git a/packages/bruno-app/src/utils/collections/index.js b/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);