feat: sample collection + bug fixes

This commit is contained in:
Anoop M D 2022-10-17 00:39:58 +05:30
parent 6573df41b0
commit 241ee5e788
15 changed files with 217 additions and 13 deletions

View File

@ -3,7 +3,7 @@ import styled from 'styled-components';
const Wrapper = styled.div`
div.CodeMirror {
/* todo: find a better way */
height: calc(100vh - 240px);
height: calc(100vh - 220px);
}
`;

View File

@ -22,11 +22,31 @@ const RequestTab = ({tab, collection}) => {
method = method.toLocaleLowerCase();
switch(method) {
case 'get': {
color = 'rgb(5, 150, 105)';
color = 'var(--color-method-get)';
break;
}
case 'post': {
color = '#8e44ad';
color = 'var(--color-method-post)';
break;
}
case 'put': {
color = 'var(--color-method-put)';
break;
}
case 'delete': {
color = 'var(--color-method-delete)';
break;
}
case 'patch': {
color = 'var(--color-method-patch)';
break;
}
case 'options': {
color = 'var(--color-method-options)';
break;
}
case 'head': {
color = 'var(--color-method-head)';
break;
}
}

View File

@ -78,9 +78,10 @@ const RequestTabs = () => {
});
};
// Todo: Must support ephermal requests
return (
<StyledWrapper className={getRootClassname()}>
{newRequestModalOpen && <NewRequest isEphermal={true} collection={activeCollection} onClose={() => setNewRequestModalOpen(false)}/>}
{newRequestModalOpen && <NewRequest collection={activeCollection} onClose={() => setNewRequestModalOpen(false)}/>}
{collectionRequestTabs && collectionRequestTabs.length ? (
<>
<CollectionToolBar collection={activeCollection}/>

View File

@ -3,7 +3,7 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
div.CodeMirror {
/* todo: find a better way */
height: calc(100vh - 240px);
height: calc(100vh - 220px);
}
`;

View File

@ -5,6 +5,7 @@ const Wrapper = styled.div`
display: flex;
align-self: stretch;
align-items: center;
min-width: 34px;
span {
position: relative;
@ -16,6 +17,8 @@ const Wrapper = styled.div`
.method-put { color: var(--color-method-put);}
.method-delete { color: var(--color-method-delete);}
.method-patch { color: var(--color-method-patch);}
.method-options { color: var(--color-method-options);}
.method-head { color: var(--color-method-head);}
`;
export default Wrapper;

View File

@ -14,7 +14,8 @@ const RequestMethod = ({item}) => {
'method-post': method === 'post',
'method-put': method === 'put',
'method-delete': method === 'delete',
'method-patch': method === 'patch'
'method-patch': method === 'patch',
'method-head': method === 'head'
});
};

View File

@ -17,7 +17,7 @@ import { addCollectionToWorkspace } from 'providers/ReduxStore/slices/workspaces
import Bruno from 'components/Bruno';
import CreateCollection from 'components/Sidebar/CreateCollection';
import SelectCollection from 'components/Sidebar/Collections/SelectCollection';
import importCollection from 'utils/collections/import';
import importCollection, { importSampleCollection } from 'utils/collections/import';
import { isElectron } from 'utils/common/platform';
import StyledWrapper from './StyledWrapper';
@ -55,6 +55,19 @@ const Welcome = () => {
.catch((err) => console.log(err));
};
const handleImportSampleCollection = () => {
importSampleCollection()
.then((collection) => {
dispatch(collectionImported({collection: collection}));
dispatch(addCollectionToWorkspace(activeWorkspaceUid, collection.uid));
})
.then(() => toast.success("Sample Collection loaded successfully"))
.catch((err) => {
toast.error("Load sample collection failed");
console.log(err);
});
};
return (
<StyledWrapper className="pb-4 px-6 mt-6">
{createCollectionModalOpen ? (
@ -89,7 +102,7 @@ const Welcome = () => {
<div className="flex items-center ml-6" onClick={handleImportCollection}>
<IconUpload size={18} strokeWidth={2}/><span className="label ml-2">Import Collection</span>
</div>
<div className="flex items-center ml-6">
<div className="flex items-center ml-6" onClick={handleImportSampleCollection}>
<IconPlayerPlay size={18} strokeWidth={2}/><span className="label ml-2">Load Sample Collection</span>
</div>
</div>

View File

@ -1,9 +1,11 @@
import React, { useState, useEffect } from 'react';
import toast from 'react-hot-toast';
import find from 'lodash/find';
import Mousetrap from 'mousetrap';
import { useSelector, useDispatch } from 'react-redux';
import SaveRequest from 'components/RequestPane/SaveRequest';
import EnvironmentSettings from "components/Environments/EnvironmentSettings";
import NetworkError from "components/ResponsePane/NetworkError";
import NewRequest from "components/Sidebar/NewRequest";
import BrunoSupport from 'components/BrunoSupport';
import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
@ -73,7 +75,10 @@ export const HotkeysProvider = props => {
if(collection) {
const item = findItemInCollection(collection, activeTab.uid);
if(item) {
dispatch(sendRequest(item, collection.uid));
dispatch(sendRequest(item, collection.uid))
.catch((err) => toast.custom((t) => (<NetworkError onClose={() => toast.dismiss(t.id)}/>), {
duration: 5000
}));
}
}
}

View File

@ -76,6 +76,7 @@ export const openLocalCollectionEvent = (uid, pathname) => (dispatch, getState)
export const createCollection = (collectionName) => (dispatch, getState) => {
const newCollection = {
version: "1",
uid: uuid(),
name: collectionName,
items: [],

View File

@ -47,7 +47,7 @@ export const collectionsSlice = createSlice({
const { collection } = action.payload;
collapseCollection(collection);
addDepth(collection.items);
if(!collectionUids.includes(c.uid)) {
if(!collectionUids.includes(collection.uid)) {
state.collections.push(collection);
}
},

View File

@ -17,9 +17,11 @@
--color-background-danger: #dc3545;
--color-method-get: rgb(5, 150, 105);
--color-method-post: #8e44ad;
--color-method-put: #8e44ad;
--color-method-delete: #8e44ad;
--color-method-patch: #8e44ad;
--color-method-put: #ca7811;
--color-method-delete: rgb(185, 28, 28);
--color-method-patch: rgb(52 52 52);
--color-method-options: rgb(52 52 52);
--color-method-head: rgb(52 52 52);
--color-table-stripe: #f3f3f3;
}

View File

@ -5,6 +5,7 @@ import toast from 'react-hot-toast';
import { uuid } from 'utils/common';
import { collectionSchema } from '@usebruno/schema';
import { saveCollectionToIdb } from 'utils/idb';
import sampleCollection from './samples/sample-collection.json';
const readFile = (files) => {
return new Promise((resolve, reject) => {
@ -83,4 +84,16 @@ const importCollection = () => {
});
};
export const importSampleCollection = () => {
return new Promise((resolve, reject) => {
validateSchema(sampleCollection)
.then(validateSchema)
.then(updateUidsInCollection)
.then(validateSchema)
.then((collection) => saveCollectionToIdb(window.__idb, collection))
.then(resolve)
.catch(reject);
});
};
export default importCollection;

View File

@ -0,0 +1,129 @@
{
"name": "sample-collection",
"uid": "c1PdISj460OeNmFLI8rCY",
"version": "1",
"items": [
{
"uid": "myeFbgzNlwIhDpYcOVBWS",
"type": "http-request",
"name": "Users",
"request": {
"url": "https://reqres.in/api/users?page=2",
"method": "GET",
"headers": [],
"params": [
{
"uid": "viHGWSpAQhpiwH9UQxb7W",
"name": "page",
"value": "2",
"enabled": true
}
],
"body": {
"mode": "json",
"json": "",
"text": null,
"xml": null,
"formUrlEncoded": [],
"multipartForm": []
}
}
},
{
"uid": "ytzXIADbhEwLB0BqIQOKD",
"type": "http-request",
"name": "Single User",
"request": {
"url": "https://reqres.in/api/users/2",
"method": "GET",
"headers": [],
"params": [],
"body": {
"mode": "json",
"json": "",
"text": null,
"xml": null,
"formUrlEncoded": [],
"multipartForm": []
}
}
},
{
"uid": "DuEyHudhVuxrdplKLAMsU",
"type": "http-request",
"name": "User Not Found",
"request": {
"url": "https://reqres.in/api/users/23",
"method": "GET",
"headers": [],
"params": [],
"body": {
"mode": "json",
"json": "",
"text": null,
"xml": null,
"formUrlEncoded": [],
"multipartForm": []
}
}
},
{
"uid": "UZFjsr14q8iZ1Do90q02Q",
"type": "http-request",
"name": "Create",
"request": {
"url": "https://reqres.in/api/users",
"method": "POST",
"headers": [],
"params": [],
"body": {
"mode": "json",
"json": "{\n \"name\": \"morpheus\",\n \"job\": \"leader\"\n}",
"text": null,
"xml": null,
"formUrlEncoded": [],
"multipartForm": []
}
}
},
{
"uid": "lYLCTXaerD9etRDLJHbVN",
"type": "http-request",
"name": "Update",
"request": {
"url": "https://reqres.in/api/users/2",
"method": "PUT",
"headers": [],
"params": [],
"body": {
"mode": "json",
"json": "{\n \"name\": \"morpheus\",\n \"job\": \"zion resident\"\n}",
"text": null,
"xml": null,
"formUrlEncoded": [],
"multipartForm": []
}
}
},
{
"uid": "qVCKx5xUqxpBf8jeka8Gu",
"type": "http-request",
"name": "Remove",
"request": {
"url": "https://reqres.in/api/users/2",
"method": "DELETE",
"headers": [],
"params": [],
"body": {
"mode": "json",
"json": "{\n \"name\": \"morpheus\",\n \"job\": \"zion resident\"\n}",
"text": null,
"xml": null,
"formUrlEncoded": [],
"multipartForm": []
}
}
}
],
"environments": []
}

View File

@ -25,6 +25,14 @@ export const sendHttpRequestInBrowser = async (request, options) => {
deleteCancelToken(options.cancelTokenUid);
}
if(error.response) {
return {
status: error.response.status,
headers: error.response.headers,
data: error.response.data
}
};
return Promise.reject(error);
}
};

View File

@ -41,6 +41,14 @@ const registerNetworkIpc = () => {
deleteCancelToken(options.cancelTokenUid);
}
if(error.response) {
return {
status: error.response.status,
headers: error.response.headers,
data: error.response.data
}
};
return Promise.reject(error);
}
});