Skip to content

Commit

Permalink
feat: visualize better when a row is disabled
Browse files Browse the repository at this point in the history
  • Loading branch information
@banjo
banjo committed Jan 29, 2024
1 parent cfbac39 commit 9e7f5ab
Show file tree
Hide file tree
Showing 7 changed files with 136 additions and 129 deletions.
25 changes: 13 additions & 12 deletions packages/bruno-app/src/components/CollectionSettings/Headers/index.js
View file
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
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
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
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
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

0 comments on commit 9e7f5ab

Please sign in to comment.