chore(#718): collcetion presets pr review

This commit is contained in:
Anoop M D 2023-11-19 13:13:31 +05:30
parent 7367972d56
commit bd71adebe0
6 changed files with 44 additions and 88 deletions

View File

@ -2,7 +2,7 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
.settings-label {
width: 80px;
width: 110px;
}
.textbox {

View File

@ -9,14 +9,14 @@ import cloneDeep from 'lodash/cloneDeep';
const PresetsSettings = ({ collection }) => {
const dispatch = useDispatch();
const {
brunoConfig: { presets: defaultPresets = {} }
brunoConfig: { presets: presets = {} }
} = collection;
const formik = useFormik({
enableReinitialize: true,
initialValues: {
defaultType: defaultPresets.defaultType || 'http-request',
defaultRequestUrl: defaultPresets.defaultRequestUrl || ''
requestType: presets.requestType || 'http',
requestUrl: presets.requestUrl || ''
},
onSubmit: (newPresets) => {
const brunoConfig = cloneDeep(collection.brunoConfig);
@ -32,53 +32,53 @@ const PresetsSettings = ({ collection }) => {
<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
Request Type
</label>
<div className="flex items-center mt-2">
<div className="flex items-center">
<input
id="http-request"
id="http"
className="cursor-pointer"
type="radio"
name="defaultType"
name="requestType"
onChange={formik.handleChange}
value="http-request"
checked={formik.values.defaultType === 'http-request'}
value="http"
checked={formik.values.requestType === 'http'}
/>
<label htmlFor="http-request" className="ml-1 cursor-pointer select-none">
<label htmlFor="http" className="ml-1 cursor-pointer select-none">
HTTP
</label>
<input
id="graphql-request"
id="graphql"
className="ml-4 cursor-pointer"
type="radio"
name="defaultType"
name="requestType"
onChange={formik.handleChange}
value="graphql-request"
checked={formik.values.defaultType === 'graphql-request'}
value="graphql"
checked={formik.values.requestType === 'graphql'}
/>
<label htmlFor="graphql-request" className="ml-1 cursor-pointer select-none">
<label htmlFor="graphql" 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 className="settings-label" htmlFor="requestUrl">
Base URL
</label>
<div className="flex items-center mt-2 ">
<div className="flex items-center">
<div className="flex items-center flex-grow input-container h-full">
<input
id="request-url"
type="text"
name="defaultRequestUrl"
name="requestUrl"
className="block textbox"
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
onChange={formik.handleChange}
value={formik.values.defaultRequestUrl || ''}
value={formik.values.requestUrl || ''}
/>
</div>
</div>

View File

@ -1,40 +0,0 @@
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;

View File

@ -19,12 +19,33 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
const {
brunoConfig: { presets: collectionPresets = {} }
} = collection;
const getRequestType = (collectionPresets) => {
if (!collectionPresets || !collectionPresets.requestType) {
return 'http-request';
}
// Note: Why different labels for the same thing?
// http-request and graphql-request are used inside the app's json representation of a request
// http and graphql are used in Bru DSL as well as collection exports
// We need to eventually standardize the app's DSL to use the same labels as bru DSL
if (collectionPresets.requestType === 'http') {
return 'http-request';
}
if (collectionPresets.requestType === 'graphql') {
return 'graphql-request';
}
return 'http-request';
};
const formik = useFormik({
enableReinitialize: true,
initialValues: {
requestName: '',
requestType: collectionPresets.defaultType || 'http-request',
requestUrl: collectionPresets.defaultRequestUrl || '',
requestType: getRequestType(collectionPresets),
requestUrl: collectionPresets.requestUrl || '',
requestMethod: 'GET',
curlCommand: ''
},

View File

@ -47,22 +47,6 @@ 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);

View File

@ -1231,14 +1231,6 @@ 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);
@ -1442,7 +1434,6 @@ export const {
collectionUnlinkDirectoryEvent,
collectionAddEnvFileEvent,
collectionRenamedEvent,
collectionPresetsUpdatedEvent,
resetRunResults,
runRequestEvent,
runFolderEvent,