mirror of
https://github.com/usebruno/bruno.git
synced 2025-06-21 20:41:41 +02:00
revert: #463 - style and right pane updates
This commit is contained in:
parent
1087cacdb0
commit
625a19e86c
@ -1,16 +1,6 @@
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
.scroll {
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { useState, useEffect, useRef } from 'react';
|
import React from 'react';
|
||||||
import get from 'lodash/get';
|
import get from 'lodash/get';
|
||||||
import cloneDeep from 'lodash/cloneDeep';
|
import cloneDeep from 'lodash/cloneDeep';
|
||||||
import { useDispatch } from 'react-redux';
|
import { useDispatch } from 'react-redux';
|
||||||
@ -6,23 +6,11 @@ import { addAssertion, updateAssertion, deleteAssertion } from 'providers/ReduxS
|
|||||||
import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
|
import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
|
||||||
import AssertionRow from './AssertionRow';
|
import AssertionRow from './AssertionRow';
|
||||||
import StyledWrapper from './StyledWrapper';
|
import StyledWrapper from './StyledWrapper';
|
||||||
import { useTheme } from 'providers/Theme/index';
|
|
||||||
|
|
||||||
const Assertions = ({ item, collection }) => {
|
const Assertions = ({ item, collection }) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const { theme } = useTheme();
|
|
||||||
const assertions = item.draft ? get(item, 'draft.request.assertions') : get(item, 'request.assertions');
|
const assertions = item.draft ? get(item, 'draft.request.assertions') : get(item, 'request.assertions');
|
||||||
|
|
||||||
const [countItems, setCountItems] = useState(assertions.length);
|
|
||||||
const ref = useRef();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setCountItems(assertions.length);
|
|
||||||
if (assertions.length > countItems) {
|
|
||||||
ref.current.scrollIntoView();
|
|
||||||
}
|
|
||||||
}, [assertions]);
|
|
||||||
|
|
||||||
const handleAddAssertion = () => {
|
const handleAddAssertion = () => {
|
||||||
dispatch(
|
dispatch(
|
||||||
addAssertion({
|
addAssertion({
|
||||||
@ -71,9 +59,8 @@ const Assertions = ({ item, collection }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledWrapper className="w-full">
|
<StyledWrapper className="w-full">
|
||||||
<div className="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}>
|
|
||||||
<table>
|
<table>
|
||||||
<thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Expr</td>
|
<td>Expr</td>
|
||||||
<td>Operator</td>
|
<td>Operator</td>
|
||||||
@ -100,8 +87,6 @@ const Assertions = ({ item, collection }) => {
|
|||||||
: null}
|
: null}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div ref={ref} />
|
|
||||||
</div>
|
|
||||||
<button className="btn-add-assertion text-link pr-2 py-3 mt-2 select-none" onClick={handleAddAssertion}>
|
<button className="btn-add-assertion text-link pr-2 py-3 mt-2 select-none" onClick={handleAddAssertion}>
|
||||||
+ Add Assertion
|
+ Add Assertion
|
||||||
</button>
|
</button>
|
||||||
|
@ -1,16 +1,6 @@
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
.scroll {
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { useState, useEffect, useRef } from 'react';
|
import React from 'react';
|
||||||
import get from 'lodash/get';
|
import get from 'lodash/get';
|
||||||
import cloneDeep from 'lodash/cloneDeep';
|
import cloneDeep from 'lodash/cloneDeep';
|
||||||
import { IconTrash } from '@tabler/icons';
|
import { IconTrash } from '@tabler/icons';
|
||||||
@ -12,17 +12,8 @@ import StyledWrapper from './StyledWrapper';
|
|||||||
|
|
||||||
const QueryParams = ({ item, collection }) => {
|
const QueryParams = ({ item, collection }) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const { storedTheme, theme } = useTheme();
|
const { storedTheme } = useTheme();
|
||||||
const params = item.draft ? get(item, 'draft.request.params') : get(item, 'request.params');
|
const params = item.draft ? get(item, 'draft.request.params') : get(item, 'request.params');
|
||||||
const [countItems, setCountItems] = useState(params.length);
|
|
||||||
const ref = useRef();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setCountItems(params.length);
|
|
||||||
if (params.length > countItems) {
|
|
||||||
ref.current.scrollIntoView();
|
|
||||||
}
|
|
||||||
}, [params]);
|
|
||||||
|
|
||||||
const handleAddParam = () => {
|
const handleAddParam = () => {
|
||||||
dispatch(
|
dispatch(
|
||||||
@ -74,9 +65,8 @@ const QueryParams = ({ item, collection }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledWrapper className="w-full">
|
<StyledWrapper className="w-full">
|
||||||
<div className="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}>
|
|
||||||
<table>
|
<table>
|
||||||
<thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Name</td>
|
<td>Name</td>
|
||||||
<td>Value</td>
|
<td>Value</td>
|
||||||
@ -140,8 +130,6 @@ const QueryParams = ({ item, collection }) => {
|
|||||||
: null}
|
: null}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div ref={ref} />
|
|
||||||
</div>
|
|
||||||
<button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleAddParam}>
|
<button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleAddParam}>
|
||||||
+ <span>Add Param</span>
|
+ <span>Add Param</span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -1,16 +1,6 @@
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
.scroll {
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useRef, useState } from 'react';
|
import React from 'react';
|
||||||
import get from 'lodash/get';
|
import get from 'lodash/get';
|
||||||
import cloneDeep from 'lodash/cloneDeep';
|
import cloneDeep from 'lodash/cloneDeep';
|
||||||
import { IconTrash } from '@tabler/icons';
|
import { IconTrash } from '@tabler/icons';
|
||||||
@ -13,19 +13,9 @@ const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
|
|||||||
|
|
||||||
const RequestHeaders = ({ item, collection }) => {
|
const RequestHeaders = ({ item, collection }) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const { storedTheme, theme } = useTheme();
|
const { storedTheme } = useTheme();
|
||||||
const headers = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
|
const headers = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
|
||||||
|
|
||||||
const [countItems, setCountItems] = useState(headers.length);
|
|
||||||
const ref = useRef();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setCountItems(headers.length);
|
|
||||||
if (headers.length > countItems) {
|
|
||||||
ref.current.scrollIntoView();
|
|
||||||
}
|
|
||||||
}, [headers]);
|
|
||||||
|
|
||||||
const addHeader = () => {
|
const addHeader = () => {
|
||||||
dispatch(
|
dispatch(
|
||||||
addRequestHeader({
|
addRequestHeader({
|
||||||
@ -74,9 +64,8 @@ const RequestHeaders = ({ item, collection }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledWrapper className="w-full">
|
<StyledWrapper className="w-full">
|
||||||
<div class="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}>
|
|
||||||
<table>
|
<table>
|
||||||
<thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Name</td>
|
<td>Name</td>
|
||||||
<td>Value</td>
|
<td>Value</td>
|
||||||
@ -148,9 +137,7 @@ const RequestHeaders = ({ item, collection }) => {
|
|||||||
})
|
})
|
||||||
: null}
|
: null}
|
||||||
</tbody>
|
</tbody>
|
||||||
<div ref={ref} />
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
<button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
|
<button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
|
||||||
+ Add Header
|
+ Add Header
|
||||||
</button>
|
</button>
|
||||||
|
@ -38,7 +38,7 @@ const Script = ({ item, collection }) => {
|
|||||||
const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
|
const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledWrapper className="w-full h-1/2 flex flex-col">
|
<StyledWrapper className="w-full flex flex-col">
|
||||||
<div className="flex-1 mt-2">
|
<div className="flex-1 mt-2">
|
||||||
<div className="mb-1 title text-xs">Pre Request</div>
|
<div className="mb-1 title text-xs">Pre Request</div>
|
||||||
<CodeEditor
|
<CodeEditor
|
||||||
|
@ -150,7 +150,7 @@ const RequestTabPanel = () => {
|
|||||||
<div className="pt-4 pb-3 px-4">
|
<div className="pt-4 pb-3 px-4">
|
||||||
<QueryUrl item={item} collection={collection} handleRun={handleRun} />
|
<QueryUrl item={item} collection={collection} handleRun={handleRun} />
|
||||||
</div>
|
</div>
|
||||||
<section className="main flex flex-grow relative">
|
<section className="main flex flex-grow pb-4 relative">
|
||||||
<section className="request-pane">
|
<section className="request-pane">
|
||||||
<div
|
<div
|
||||||
className="px-4"
|
className="px-4"
|
||||||
|
@ -2,6 +2,7 @@ import styled from 'styled-components';
|
|||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
table {
|
table {
|
||||||
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
|
@ -1,8 +1,6 @@
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const StyledWrapper = styled.div`
|
const StyledWrapper = styled.div`
|
||||||
height: 80vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
div.tabs {
|
div.tabs {
|
||||||
div.tab {
|
div.tab {
|
||||||
padding: 6px 0px;
|
padding: 6px 0px;
|
||||||
|
@ -16,14 +16,6 @@ const StyledTextarea = styled.textarea`
|
|||||||
border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
|
border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
|
||||||
outline: ${(props) => props.theme.modal.input.focusBorder} !important;
|
outline: ${(props) => props.theme.modal.input.focusBorder} !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default StyledTextarea;
|
export default StyledTextarea;
|
||||||
|
@ -57,7 +57,7 @@ export default function Main() {
|
|||||||
<div>
|
<div>
|
||||||
<StyledWrapper className={className}>
|
<StyledWrapper className={className}>
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
<section className="flex flex-grow flex-col overflow-hidden">
|
<section className="flex flex-grow flex-col overflow-auto">
|
||||||
{showHomePage ? (
|
{showHomePage ? (
|
||||||
<Welcome />
|
<Welcome />
|
||||||
) : (
|
) : (
|
||||||
|
@ -223,7 +223,6 @@ const darkTheme = {
|
|||||||
table: {
|
table: {
|
||||||
border: '#333',
|
border: '#333',
|
||||||
thead: {
|
thead: {
|
||||||
bg: '#4d4d4d',
|
|
||||||
color: 'rgb(204, 204, 204)'
|
color: 'rgb(204, 204, 204)'
|
||||||
},
|
},
|
||||||
striped: '#2A2D2F',
|
striped: '#2A2D2F',
|
||||||
|
@ -227,7 +227,6 @@ const lightTheme = {
|
|||||||
table: {
|
table: {
|
||||||
border: '#efefef',
|
border: '#efefef',
|
||||||
thead: {
|
thead: {
|
||||||
bg: '#f4f4f4',
|
|
||||||
color: '#616161'
|
color: '#616161'
|
||||||
},
|
},
|
||||||
striped: '#f3f3f3',
|
striped: '#f3f3f3',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user