Merge pull request #718 from thehorse2000/feature/add-properties-to-collections

Added properties to collections

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,96 @@
+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 { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
+import cloneDeep from 'lodash/cloneDeep';
+
+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) => {
+      const brunoConfig = cloneDeep(collection.brunoConfig);
+      brunoConfig.presets = newPresets;
+      dispatch(updateBrunoConfig(brunoConfig, 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 }) => {
@@ -84,6 +85,9 @@ const CollectionSettings = ({ collection }) => {
       case 'tests': {
         return <Test collection={collection} />;
       }
+      case 'presets': {
+        return <Presets collection={collection} />;
+      }
       case 'proxy': {
         return <ProxySettings proxyConfig={proxyConfig} onUpdate={onProxySettingsUpdate} />;
       }
@@ -123,6 +127,9 @@ const CollectionSettings = ({ collection }) => {
         <div className={getTabClassname('tests')} role="tab" onClick={() => setTab('tests')}>
           Tests
         </div>
+        <div className={getTabClassname('presets')} role="tab" onClick={() => setTab('presets')}>
+          Presets
+        </div>
         <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
           Proxy
         </div>

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

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  div.method-selector-container {
+    border: solid 1px ${(props) => props.theme.modal.input.border};
+    border-right: none;
+    background-color: ${(props) => props.theme.modal.input.bg};
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+
+    .method-selector {
+      min-width: 80px;
+    }
+  }
+
+  div.method-selector-container,
+  div.input-container {
+    background-color: ${(props) => props.theme.modal.input.bg};
+    height: 2.3rem;
+  }
+
+  div.input-container {
+    border: solid 1px ${(props) => props.theme.modal.input.border};
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+
+    input {
+      background-color: ${(props) => props.theme.modal.input.bg};
+      outline: none;
+      box-shadow: none;
+
+      &:focus {
+        outline: none !important;
+        box-shadow: none !important;
+      }
+    }
+  }
+`;
+
+export default StyledWrapper;

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

@@ -16,12 +16,15 @@ import { getRequestFromCurlCommand } from 'utils/curl';
 const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
   const dispatch = useDispatch();
   const inputRef = useRef();
+  const {
+    brunoConfig: { presets: collectionPresets = {} }
+  } = collection;
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
       requestName: '',
-      requestType: 'http-request',
+      requestType: collectionPresets.defaultType || 'http-request',
-      requestUrl: '',
+      requestUrl: collectionPresets.defaultRequestUrl || '',
       requestMethod: 'GET',
       curlCommand: ''
     },

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

@@ -47,6 +47,22 @@ import { resolveRequestFilename } from 'utils/common/platform';
 import { parseQueryParams, splitOnFirst } from 'utils/url/index';
 import { each } from 'lodash';
 
+export const updateCollectionPresets = (newPresets, collectionUid) => (dispatch, getState) => {
+  const state = getState();
+  const collection = findCollectionByUid(state.collections.collections, collectionUid);
+
+  return new Promise((resolve, reject) => {
+    if (!collection) {
+      return reject(new Error('Collection not found'));
+    }
+
+    ipcRenderer
+      .invoke('renderer:update-collection-presets', newPresets, collection.pathname)
+      .then(resolve)
+      .catch(reject);
+  });
+};
+
 export const renameCollection = (newName, collectionUid) => (dispatch, getState) => {
   const state = getState();
   const collection = findCollectionByUid(state.collections.collections, collectionUid);

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

@@ -1231,6 +1231,14 @@ export const collectionsSlice = createSlice({
         collection.name = newName;
       }
     },
+    collectionPresetsUpdatedEvent: (state, action) => {
+      const { collectionPathname, newPresets } = action.payload;
+      const collection = findCollectionByPathname(state.collections, collectionPathname);
+
+      if (collection.brunoConfig) {
+        collection.brunoConfig.presets = newPresets;
+      }
+    },
     resetRunResults: (state, action) => {
       const { collectionUid } = action.payload;
       const collection = findCollectionByUid(state.collections, collectionUid);
@@ -1434,6 +1442,7 @@ export const {
   collectionUnlinkDirectoryEvent,
   collectionAddEnvFileEvent,
   collectionRenamedEvent,
+  collectionPresetsUpdatedEvent,
   resetRunResults,
   runRequestEvent,
   runFolderEvent,