revert: #463 - style and right pane updates

This commit is contained in:
Anoop M D 2023-10-13 04:25:22 +05:30
parent 1087cacdb0
commit 625a19e86c
14 changed files with 173 additions and 254 deletions

View File

@ -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;

View File

@ -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>

View File

@ -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;

View File

@ -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}>
+&nbsp;<span>Add Param</span> +&nbsp;<span>Add Param</span>
</button> </button>

View File

@ -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;

View File

@ -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>

View File

@ -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

View File

@ -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"

View File

@ -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 {

View File

@ -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;

View File

@ -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;

View File

@ -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 />
) : ( ) : (

View File

@ -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',

View File

@ -227,7 +227,6 @@ const lightTheme = {
table: { table: {
border: '#efefef', border: '#efefef',
thead: { thead: {
bg: '#f4f4f4',
color: '#616161' color: '#616161'
}, },
striped: '#f3f3f3', striped: '#f3f3f3',