Added presets to collection settings

packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .settings-label {
+    width: 80px;
+  }
+
+  .textbox {
+    border: 1px solid #ccc;
+    padding: 0.15rem 0.45rem;
+    box-shadow: none;
+    border-radius: 0px;
+    outline: none;
+    box-shadow: none;
+    transition: border-color ease-in-out 0.1s;
+    border-radius: 3px;
+    background-color: ${(props) => props.theme.modal.input.bg};
+    border: 1px solid ${(props) => props.theme.modal.input.border};
+
+    &:focus {
+      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+      outline: none !important;
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/CollectionSettings/Presets/index.js

@@ -0,0 +1,93 @@
+import React, { useEffect } from 'react';
+import { useFormik } from 'formik';
+import { useDispatch } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
+import toast from 'react-hot-toast';
+import { updateCollectionPresets } from 'providers/ReduxStore/slices/collections/actions';
+
+const PresetsSettings = ({ collection }) => {
+  const dispatch = useDispatch();
+  const {
+    brunoConfig: { presets: defaultPresets = {} }
+  } = collection;
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      defaultType: defaultPresets.defaultType || 'http-request',
+      defaultRequestUrl: defaultPresets.defaultRequestUrl || ''
+    },
+    onSubmit: (newPresets) => {
+      dispatch(updateCollectionPresets(newPresets, collection.uid));
+      toast.success('Collection presets updated');
+    }
+  });
+
+  return (
+    <StyledWrapper>
+      <h1 className="font-medium mb-3">Collection Presets</h1>
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label flex  items-center" htmlFor="enabled">
+            Default Request Type
+          </label>
+          <div className="flex items-center mt-2">
+            <input
+              id="http-request"
+              className="cursor-pointer"
+              type="radio"
+              name="defaultType"
+              onChange={formik.handleChange}
+              value="http-request"
+              checked={formik.values.defaultType === 'http-request'}
+            />
+            <label htmlFor="http-request" className="ml-1 cursor-pointer select-none">
+              HTTP
+            </label>
+
+            <input
+              id="graphql-request"
+              className="ml-4 cursor-pointer"
+              type="radio"
+              name="defaultType"
+              onChange={formik.handleChange}
+              value="graphql-request"
+              checked={formik.values.defaultType === 'graphql-request'}
+            />
+            <label htmlFor="graphql-request" className="ml-1 cursor-pointer select-none">
+              GraphQL
+            </label>
+          </div>
+        </div>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="defaultRequestUrl">
+            Default Base URL
+          </label>
+          <div className="flex items-center mt-2 ">
+            <div className="flex items-center flex-grow input-container h-full">
+              <input
+                id="request-url"
+                type="text"
+                name="defaultRequestUrl"
+                className="block textbox"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                onChange={formik.handleChange}
+                value={formik.values.defaultRequestUrl || ''}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="mt-6">
+          <button type="submit" className="submit btn btn-sm btn-secondary">
+            Save
+          </button>
+        </div>
+      </form>
+    </StyledWrapper>
+  );
+};
+
+export default PresetsSettings;

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

@@ -13,6 +13,7 @@ import Auth from './Auth';
 import Script from './Script';
 import Test from './Tests';
 import Docs from './Docs';
+import Presets from './Presets';
 import StyledWrapper from './StyledWrapper';
 
 const CollectionSettings = ({ collection }) => {
@@ -75,6 +76,9 @@ const CollectionSettings = ({ collection }) => {
       case 'headers': {
         return <Headers collection={collection} />;
       }
+      case 'presets': {
+        return <Presets collection={collection} />;
+      }
       case 'auth': {
         return <Auth collection={collection} />;
       }
@@ -114,6 +118,9 @@ const CollectionSettings = ({ collection }) => {
         <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
           Headers
         </div>
+        <div className={getTabClassname('presets')} role="tab" onClick={() => setTab('presets')}>
+          Presets
+        </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
           Auth
         </div>

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionProperties/index.js

@@ -1,12 +1,5 @@
 import React from 'react';
 import Modal from 'components/Modal';
-import { useState } from 'react';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import StyledWrapper from './StyledWrapper';
-import { useDispatch } from 'react-redux';
-import toast from 'react-hot-toast';
-import { updateCollectionProperties } from 'providers/ReduxStore/slices/collections/actions';
 
 function countRequests(items) {
   let count = 0;
@@ -28,116 +21,29 @@ function countRequests(items) {
 }
 
 const CollectionProperties = ({ collection, onClose }) => {
-  const dispatch = useDispatch();
-  const {
-    brunoConfig: { properties: defaultProperties = {} }
-  } = collection;
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      defaultType: defaultProperties.defaultType || 'http-request',
-      defaultUrl: defaultProperties.defaultUrl || ''
-    },
-    onSubmit: (newProperties) => {
-      dispatch(updateCollectionProperties(newProperties, collection.uid));
-      toast.success('Collection properties updated');
-      onClose();
-    }
-  });
-
-  const onSubmit = () => formik.handleSubmit();
-
   return (
-    <StyledWrapper>
+    <Modal size="sm" title="Collection Properties" hideFooter={true} handleCancel={onClose}>
-      <Modal
+      <table className="w-full border-collapse">
-        size="sm"
+        <tbody>
-        title="Collection Properties"
+          <tr className="">
-        confirmText="Update"
+            <td className="py-2 px-2 text-right">Name&nbsp;:</td>
-        handleConfirm={onSubmit}
+            <td className="py-2 px-2">{collection.name}</td>
-        handleCancel={onClose}
+          </tr>
-      >
+          <tr className="">
-        <form className="bruno-form" onSubmit={formik.handleSubmit}>
+            <td className="py-2 px-2 text-right">Location&nbsp;:</td>
-          <table className="w-full border-collapse">
+            <td className="py-2 px-2 break-all">{collection.pathname}</td>
-            <tbody>
+          </tr>
-              <tr className="">
+          <tr className="">
-                <td className="py-2 px-2 text-right">Name&nbsp;:</td>
+            <td className="py-2 px-2 text-right">Environments&nbsp;:</td>
-                <td className="py-2 px-2">{collection.name}</td>
+            <td className="py-2 px-2">{collection.environments?.length || 0}</td>
-              </tr>
+          </tr>
-              <tr className="">
+          <tr className="">
-                <td className="py-2 px-2 text-right">Location&nbsp;:</td>
+            <td className="py-2 px-2 text-right">Requests&nbsp;:</td>
-                <td className="py-2 px-2 break-all">{collection.pathname}</td>
+            <td className="py-2 px-2">{countRequests(collection.items)}</td>
-              </tr>
+          </tr>
-              <tr className="">
+        </tbody>
-                <td className="py-2 px-2 text-right">Environments&nbsp;:</td>
+      </table>
-                <td className="py-2 px-2">{collection.environments?.length || 0}</td>
+    </Modal>
-              </tr>
-              <tr className="">
-                <td className="py-2 px-2 text-right">Requests&nbsp;:</td>
-                <td className="py-2 px-2">{countRequests(collection.items)}</td>
-              </tr>
-              <tr className="">
-                <td className="py-2 px-2 text-right">Default Request Type&nbsp;:</td>
-                <td className="py-2 px-2">
-                  <div className="flex items-center mt-2">
-                    <input
-                      id="http-request"
-                      className="cursor-pointer"
-                      type="radio"
-                      name="defaultType"
-                      onChange={formik.handleChange}
-                      value="http-request"
-                      checked={formik.values.defaultType === 'http-request'}
-                    />
-                    <label htmlFor="http-request" className="ml-1 cursor-pointer select-none">
-                      HTTP
-                    </label>
-
-                    <input
-                      id="graphql-request"
-                      className="ml-4 cursor-pointer"
-                      type="radio"
-                      name="defaultType"
-                      onChange={formik.handleChange}
-                      value="graphql-request"
-                      checked={formik.values.defaultType === 'graphql-request'}
-                    />
-                    <label htmlFor="graphql-request" className="ml-1 cursor-pointer select-none">
-                      GraphQL
-                    </label>
-                  </div>
-                </td>
-              </tr>
-              <tr className="">
-                <td className="py-2 px-2 text-right">Default Base URL&nbsp;:</td>
-                <td className="py-2 px-2">
-                  <div className="flex items-center mt-2 ">
-                    <div className="flex items-center flex-grow input-container h-full">
-                      <input
-                        id="request-url"
-                        type="text"
-                        name="defaultUrl"
-                        className="px-3 w-full "
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        onChange={formik.handleChange}
-                        value={formik.values.defaultUrl || ''}
-                      />
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div className="mt-4">
-            {formik.touched.defaultUrl && formik.errors.defaultUrl ? (
-              <div className="text-red-500">{formik.errors.defaultUrl}</div>
-            ) : null}
-          </div>
-        </form>
-      </Modal>
-    </StyledWrapper>
   );
 };
 

packages/bruno-app/src/components/Sidebar/NewRequest/index.js

@@ -16,14 +16,14 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
   const dispatch = useDispatch();
   const inputRef = useRef();
   const {
-    brunoConfig: { properties: collectionProperties = {} }
+    brunoConfig: { presets: collectionPresets = {} }
   } = collection;
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
       requestName: '',
-      requestType: collectionProperties.defaultType || 'http-request',
+      requestType: collectionPresets.defaultType || 'http-request',
-      requestUrl: collectionProperties.defaultUrl || '',
+      requestUrl: collectionPresets.defaultRequestUrl || '',
       requestMethod: 'GET'
     },
     validationSchema: Yup.object({

packages/bruno-app/src/providers/App/useIpcEvents.js

@@ -12,13 +12,13 @@ import {
   collectionRenamedEvent,
   runRequestEvent,
   runFolderEvent,
-  brunoConfigUpdateEvent
+  brunoConfigUpdateEvent,
+  collectionPresetsUpdatedEvent
 } from 'providers/ReduxStore/slices/collections';
 import { updatePreferences } from 'providers/ReduxStore/slices/app';
 import toast from 'react-hot-toast';
 import { openCollectionEvent, collectionAddEnvFileEvent } from 'providers/ReduxStore/slices/collections/actions';
 import { isElectron } from 'utils/common/platform';
-import { collectionPropertiesUpdatedEvent } from 'providers/ReduxStore/slices/collections/index';
 
 const useIpcEvents = () => {
   const dispatch = useDispatch();
@@ -108,8 +108,8 @@ const useIpcEvents = () => {
       dispatch(collectionRenamedEvent(val));
     });
 
-    const removeCollectionPropertiesUpdatedListener = ipcRenderer.on('main:collection-properties-updated', (val) => {
+    const removeCollectionPresetsUpdatedListener = ipcRenderer.on('main:collection-presets-updated', (val) => {
-      dispatch(collectionPropertiesUpdatedEvent(val));
+      dispatch(collectionPresetsUpdatedEvent(val));
     });
 
     const removeRunFolderEventListener = ipcRenderer.on('main:run-folder-event', (val) => {
@@ -143,7 +143,7 @@ const useIpcEvents = () => {
       removeDisplayErrorListener();
       removeScriptEnvUpdateListener();
       removeCollectionRenamedListener();
-      removeCollectionPropertiesUpdatedListener();
+      removeCollectionPresetsUpdatedListener();
       removeRunFolderEventListener();
       removeRunRequestEventListener();
       removeProcessEnvUpdatesListener();

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

@@ -47,7 +47,7 @@ import { resolveRequestFilename } from 'utils/common/platform';
 import { parseQueryParams, splitOnFirst } from 'utils/url/index';
 import { each } from 'lodash';
 
-export const updateCollectionProperties = (newProperties, collectionUid) => (dispatch, getState) => {
+export const updateCollectionPresets = (newPresets, collectionUid) => (dispatch, getState) => {
   const state = getState();
   const collection = findCollectionByUid(state.collections.collections, collectionUid);
 
@@ -57,7 +57,7 @@ export const updateCollectionProperties = (newProperties, collectionUid) => (dis
     }
 
     ipcRenderer
-      .invoke('renderer:update-collection-properties', newProperties, collection.pathname)
+      .invoke('renderer:update-collection-presets', newPresets, collection.pathname)
       .then(resolve)
       .catch(reject);
   });

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

@@ -1224,12 +1224,12 @@ export const collectionsSlice = createSlice({
         collection.name = newName;
       }
     },
-    collectionPropertiesUpdatedEvent: (state, action) => {
+    collectionPresetsUpdatedEvent: (state, action) => {
-      const { collectionPathname, newProperties } = action.payload;
+      const { collectionPathname, newPresets } = action.payload;
       const collection = findCollectionByPathname(state.collections, collectionPathname);
 
-      if (collection) {
+      if (collection.brunoConfig) {
-        collection.properties = newProperties;
+        collection.brunoConfig.presets = newPresets;
       }
     },
     resetRunResults: (state, action) => {
@@ -1435,7 +1435,7 @@ export const {
   collectionUnlinkDirectoryEvent,
   collectionAddEnvFileEvent,
   collectionRenamedEvent,
-  collectionPropertiesUpdatedEvent,
+  collectionPresetsUpdatedEvent,
   resetRunResults,
   runRequestEvent,
   runFolderEvent,

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

@@ -95,21 +95,21 @@ const registerRendererEventHandlers = (mainWindow, watcher, lastOpenedCollection
   });
 
   // update collection properties
-  ipcMain.handle('renderer:update-collection-properties', async (event, newProperties, collectionPathname) => {
+  ipcMain.handle('renderer:update-collection-presets', async (event, newPresets, collectionPathname) => {
     try {
       const brunoJsonFilePath = path.join(collectionPathname, 'bruno.json');
       const content = fs.readFileSync(brunoJsonFilePath, 'utf8');
       const json = JSON.parse(content);
 
-      json.properties = newProperties;
+      json.presets = newPresets;
 
       const newContent = await stringifyJson(json);
       await writeFile(brunoJsonFilePath, newContent);
 
       // fire an event in renderer to change the collection properties
-      mainWindow.webContents.send('main:collection-properties-updated', {
+      mainWindow.webContents.send('main:collection-presets-updated', {
         collectionPathname,
-        newProperties
+        newPresets
       });
     } catch (error) {
       return Promise.reject(error);