Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: visualize better when a row is disabled #1475

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: visualize better when a row is disabled #1475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 13 additions & 12 deletions packages/bruno-app/src/components/CollectionSettings/Headers/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import React from 'react';
import get from 'lodash/get';
import cloneDeep from 'lodash/cloneDeep';
import { IconTrash } from '@tabler/icons';
import { useDispatch } from 'react-redux';
import { useTheme } from 'providers/Theme';
import SingleLineEditor from 'components/SingleLineEditor';
import { headers as StandardHTTPHeaders } from 'know-your-http-well';
import cloneDeep from 'lodash/cloneDeep';
import get from 'lodash/get';
import {
addCollectionHeader,
updateCollectionHeader,
deleteCollectionHeader
deleteCollectionHeader,
updateCollectionHeader
} from 'providers/ReduxStore/slices/collections';
import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
import SingleLineEditor from 'components/SingleLineEditor';
import { useTheme } from 'providers/Theme';
import React from 'react';
import { useDispatch } from 'react-redux';
import StyledWrapper from './StyledWrapper';
import { headers as StandardHTTPHeaders } from 'know-your-http-well';
const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);

const Headers = ({ collection }) => {
Expand Down Expand Up @@ -75,9 +75,10 @@ const Headers = ({ collection }) => {
<tbody>
{headers && headers.length
? headers.map((header) => {
const enabledClass = header.enabled ? ' bg-inherit' : 'bg-gray-100 opacity-75';
return (
<tr key={header.uid}>
<td>
<td className={enabledClass}>
<SingleLineEditor
value={header.name}
theme={storedTheme}
Expand All @@ -97,7 +98,7 @@ const Headers = ({ collection }) => {
collection={collection}
/>
</td>
<td>
<td className={enabledClass}>
<SingleLineEditor
value={header.value}
theme={storedTheme}
Expand All @@ -116,7 +117,7 @@ const Headers = ({ collection }) => {
collection={collection}
/>
</td>
<td>
<td className={enabledClass}>
<div className="flex items-center">
<input
type="checkbox"
Expand Down
123 changes: 62 additions & 61 deletions ...ents/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React from 'react';
import toast from 'react-hot-toast';
import cloneDeep from 'lodash/cloneDeep';
import { IconTrash } from '@tabler/icons';
import { useTheme } from 'providers/Theme';
import { useDispatch } from 'react-redux';
import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
import SingleLineEditor from 'components/SingleLineEditor';
import StyledWrapper from './StyledWrapper';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import cloneDeep from 'lodash/cloneDeep';
import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
import { useTheme } from 'providers/Theme';
import React from 'react';
import toast from 'react-hot-toast';
import { useDispatch } from 'react-redux';
import { uuid } from 'utils/common';
import { variableNameRegex } from 'utils/common/regex';
import * as Yup from 'yup';
import StyledWrapper from './StyledWrapper';

const EnvironmentVariables = ({ environment, collection }) => {
const dispatch = useDispatch();
Expand Down Expand Up @@ -92,66 +92,67 @@ const EnvironmentVariables = ({ environment, collection }) => {
</tr>
</thead>
<tbody>
{formik.values.map((variable, index) => (
<tr key={variable.uid}>
<td className="text-center">
<input
type="checkbox"
className="mr-3 mousetrap"
name={`${index}.enabled`}
checked={variable.enabled}
onChange={formik.handleChange}
/>
</td>
<td>
<input
type="text"
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
className="mousetrap"
id={`${index}.name`}
name={`${index}.name`}
value={variable.name}
onChange={formik.handleChange}
/>
<ErrorMessage name={`${index}.name`} />
</td>
<td>
<SingleLineEditor
theme={storedTheme}
collection={collection}
name={`${index}.value`}
value={variable.value}
onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
/>
</td>
<td>
<input
type="checkbox"
className="mr-3 mousetrap"
name={`${index}.secret`}
checked={variable.secret}
onChange={formik.handleChange}
/>
</td>
<td>
<button onClick={() => handleRemoveVar(variable.uid)}>
<IconTrash strokeWidth={1.5} size={20} />
</button>
</td>
</tr>
))}
{formik.values.map((variable, index) => {
const enabledClass = variable.enabled ? ' bg-inherit' : 'bg-gray-100 opacity-75';
return (
<tr key={variable.uid}>
<td className={`${enabledClass} text-center`}>
<input
type="checkbox"
className="mr-3 mousetrap"
name={`${index}.enabled`}
checked={variable.enabled}
onChange={formik.handleChange}
/>
</td>
<td className={enabledClass}>
<input
type="text"
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
className="mousetrap"
id={`${index}.name`}
name={`${index}.name`}
value={variable.name}
onChange={formik.handleChange}
/>
<ErrorMessage name={`${index}.name`} />
</td>
<td className={enabledClass}>
<SingleLineEditor
theme={storedTheme}
collection={collection}
name={`${index}.value`}
value={variable.value}
onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
/>
</td>
<td className={enabledClass}>
<input
type="checkbox"
className="mr-3 mousetrap"
name={`${index}.secret`}
checked={variable.secret}
onChange={formik.handleChange}
/>
</td>
<td className={enabledClass}>
<button onClick={() => handleRemoveVar(variable.uid)}>
<IconTrash strokeWidth={1.5} size={20} />
</button>
</td>
</tr>
);
})}
</tbody>
</table>

<div>
<button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={addVariable}>
+ Add Variable
</button>
</div>

<div>
<button type="submit" className="submit btn btn-md btn-secondary mt-2" onClick={formik.handleSubmit}>
Save
Expand Down
25 changes: 13 additions & 12 deletions packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React from 'react';
import get from 'lodash/get';
import cloneDeep from 'lodash/cloneDeep';
import { IconTrash } from '@tabler/icons';
import { useDispatch } from 'react-redux';
import { useTheme } from 'providers/Theme';
import SingleLineEditor from 'components/SingleLineEditor';
import cloneDeep from 'lodash/cloneDeep';
import get from 'lodash/get';
import {
addFormUrlEncodedParam,
updateFormUrlEncodedParam,
deleteFormUrlEncodedParam
deleteFormUrlEncodedParam,
updateFormUrlEncodedParam
} from 'providers/ReduxStore/slices/collections';
import SingleLineEditor from 'components/SingleLineEditor';
import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
import { useTheme } from 'providers/Theme';
import React from 'react';
import { useDispatch } from 'react-redux';
import StyledWrapper from './StyledWrapper';

const FormUrlEncodedParams = ({ item, collection }) => {
Expand Down Expand Up @@ -77,9 +77,10 @@ const FormUrlEncodedParams = ({ item, collection }) => {
<tbody>
{params && params.length
? params.map((param, index) => {
const enabledClass = param.enabled ? ' bg-inherit' : 'bg-gray-100 opacity-50';
return (
<tr key={param.uid}>
<td>
<td className={enabledClass}>
<input
type="text"
autoComplete="off"
Expand All @@ -91,7 +92,7 @@ const FormUrlEncodedParams = ({ item, collection }) => {
onChange={(e) => handleParamChange(e, param, 'name')}
/>
</td>
<td>
<td className={enabledClass}>
<SingleLineEditor
value={param.value}
theme={storedTheme}
Expand All @@ -112,7 +113,7 @@ const FormUrlEncodedParams = ({ item, collection }) => {
collection={collection}
/>
</td>
<td>
<td className={enabledClass}>
<div className="flex items-center">
<input
type="checkbox"
Expand Down
25 changes: 13 additions & 12 deletions packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React from 'react';
import get from 'lodash/get';
import cloneDeep from 'lodash/cloneDeep';
import { IconTrash } from '@tabler/icons';
import { useDispatch } from 'react-redux';
import { useTheme } from 'providers/Theme';
import SingleLineEditor from 'components/SingleLineEditor';
import cloneDeep from 'lodash/cloneDeep';
import get from 'lodash/get';
import {
addMultipartFormParam,
updateMultipartFormParam,
deleteMultipartFormParam
deleteMultipartFormParam,
updateMultipartFormParam
} from 'providers/ReduxStore/slices/collections';
import SingleLineEditor from 'components/SingleLineEditor';
import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
import { useTheme } from 'providers/Theme';
import React from 'react';
import { useDispatch } from 'react-redux';
import StyledWrapper from './StyledWrapper';

const MultipartFormParams = ({ item, collection }) => {
Expand Down Expand Up @@ -77,9 +77,10 @@ const MultipartFormParams = ({ item, collection }) => {
<tbody>
{params && params.length
? params.map((param, index) => {
const enabledClass = param.enabled ? ' bg-inherit' : 'bg-gray-100 opacity-50';
return (
<tr key={param.uid}>
<td>
<td className={enabledClass}>
<input
type="text"
autoComplete="off"
Expand All @@ -91,7 +92,7 @@ const MultipartFormParams = ({ item, collection }) => {
onChange={(e) => handleParamChange(e, param, 'name')}
/>
</td>
<td>
<td className={enabledClass}>
<SingleLineEditor
onSave={onSave}
theme={storedTheme}
Expand All @@ -111,7 +112,7 @@ const MultipartFormParams = ({ item, collection }) => {
collection={collection}
/>
</td>
<td>
<td className={enabledClass}>
<div className="flex items-center">
<input
type="checkbox"
Expand Down
23 changes: 12 additions & 11 deletions packages/bruno-app/src/components/RequestPane/QueryParams/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React from 'react';
import get from 'lodash/get';
import cloneDeep from 'lodash/cloneDeep';
import { IconTrash } from '@tabler/icons';
import { useDispatch } from 'react-redux';
import { useTheme } from 'providers/Theme';
import { addQueryParam, updateQueryParam, deleteQueryParam } from 'providers/ReduxStore/slices/collections';
import SingleLineEditor from 'components/SingleLineEditor';
import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
import cloneDeep from 'lodash/cloneDeep';
import get from 'lodash/get';
import { addQueryParam, deleteQueryParam, updateQueryParam } from 'providers/ReduxStore/slices/collections';
import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
import { useTheme } from 'providers/Theme';
import React from 'react';
import { useDispatch } from 'react-redux';

import StyledWrapper from './StyledWrapper';

Expand Down Expand Up @@ -76,21 +76,22 @@ const QueryParams = ({ item, collection }) => {
<tbody>
{params && params.length
? params.map((param, index) => {
const enabledClass = param.enabled ? ' bg-inherit' : 'bg-gray-100 opacity-50';
return (
<tr key={param.uid}>
<td>
<td className={enabledClass}>
<input
type="text"
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
value={param.name}
className="mousetrap"
className={`mousetrap`}
onChange={(e) => handleParamChange(e, param, 'name')}
/>
</td>
<td>
<td className={enabledClass}>
<SingleLineEditor
value={param.value}
theme={storedTheme}
Expand All @@ -110,7 +111,7 @@ const QueryParams = ({ item, collection }) => {
collection={collection}
/>
</td>
<td>
<td className={enabledClass}>
<div className="flex items-center">
<input
type="checkbox"
Expand Down
Loading
Loading