feat(mock-server): improve headers UI #1171

Yogesh01000100 · 2023-10-17T18:18:56Z

Closes issue: #1134

📜 Summary of changes:

This pull request addresses the following changes related to header creation:

Implemented a dynamic way to add, edit, and remove headers.
Added error handling to display validation errors related to headers.

Screen Replay session

https://app.requestly.io/sessions/saved/4diq8jHpNFIkFLebGCSE

screen-replay-session-headers-ui.mp4

✅ Checklist:

Make sure linting and unit tests pass.
No install/build warnings introduced.
Verified UI in browser.
For UI changes, added/updated analytics events (if applicable).
For changes in extension's code, manually tested in Chrome and Firefox.
For changes in extension's code, both MV2 and MV3 are covered.
Added/updated unit tests for this change.
Raised pull request to update corresponding documentation (if already exists).

🧪 Test instructions:

To test these changes, follow these steps:

Browse to the app folder and run the application.
Navigate to the Mock server from the sidebar section.
See for any already created mocks.
If it exists then click on it and check the response headers option.
Add new headers, edit existing ones, and remove headers.
Ensure that validation errors are displayed.

Signed-off-by: Yogesh01000100 <[email protected]>

Yogesh01000100 · 2023-10-20T05:48:26Z

@rohanmathur91 @RuntimeTerror10 @wrongsahil can you help merging this pull request?

wrongsahil · 2023-10-20T11:30:20Z

@Yogesh01000100 Please attach Session Replay in the PR description

Yogesh01000100 · 2023-10-21T11:38:30Z

@Yogesh01000100 Please attach Session Replay in the PR description

@wrongsahil @RuntimeTerror10 please check the session, in the pull request description, (updated)

Yogesh01000100 · 2023-10-24T09:34:38Z

@Yogesh01000100 Please attach Session Replay in the PR description

@wrongsahil @RuntimeTerror10 please check the session, in the pull request description, (updated)

@RuntimeTerror10 can you please check with the pull request that I put, and do let me know if any changes are required.

Yogesh01000100 · 2023-10-29T19:54:59Z

@RuntimeTerror10 @wrongsahil can you check and help merge this PR?

RuntimeTerror10 · 2023-10-30T10:46:45Z

Hey @Yogesh01000100 , I will review it today and will share any changes if required by tomorrow.

Yogesh01000100 · 2023-10-31T05:41:10Z

Hey @Yogesh01000100 , I will review it today and will share any changes if required by tomorrow.

okay sure!

Yogesh01000100 · 2023-11-11T09:21:15Z

Hey @Yogesh01000100 , I will review it today and will share any changes if required by tomorrow.

Have you reviewed it? if any changes are there please inform me.

RuntimeTerror10 · 2023-11-13T08:17:02Z

app/src/components/features/mocksV2/MockEditorIndex/Editor/HeaderSection/index.tsx

+ <Col span={24}>
+ <div style={{ marginBottom: "16px" }}>
+ <Button onClick={addHeader} className="add-header">
+ <span style={{ marginRight: "8px", fontWeight: "bold" }}>+</span>


avoid using inline styles, use css class

RuntimeTerror10 · 2023-11-13T08:35:19Z

app/src/components/features/mocksV2/MockEditorIndex/Editor/index.tsx

+ const createHeadersString = (headersArray: Header[]): string => {
+ const headersString: { [key: string]: Header } = {};
+
+ headersArray.forEach((header, index) => {
+ headersString[index.toString()] = {
+ name: header.name,
+ value: header.value,
+ index: index + 1,
+ };
+ });
+
+ return JSON.stringify(headersString);
+ };
+
+ const addHeader = () => {
+ const newHeader: Header = {
+ name: "",
+ value: "",
+ index: mappedHeader.length,
+ };
+ const updatedHeaders: Header[] = [...mappedHeader, newHeader];
+ setMappedHeader(updatedHeaders);
+ setHeadersString(createHeadersString(updatedHeaders));
+ };
+
+ const removeHeader = (indexNum: number) => {
+ const updatedHeaders = [...mappedHeader];
+ updatedHeaders.splice(indexNum, 1);
+
+ const updatedHeadersString = createHeadersString(updatedHeaders);
+ setHeadersString(updatedHeadersString);
+ if (errors && errors.headers && errors.headers.length > 0) {
+ const newError = errors.headers.filter((item) => {
+ if (item.indexError === indexNum) {
+ return false;
+ } else if (item.indexError > indexNum) {
+ item.indexError--;
+ }
+ return true;
+ });
+ setErrors({ ...errors, headers: newError });
+ }
+ };
+
+ const updateHeaders = (value: string, index: number, fieldToUpdate: string) => {
+ const updatedHeaders = [...mappedHeader];
+ if (fieldToUpdate === "name") {
+ updatedHeaders[index].name = value;
+ } else if (fieldToUpdate === "value") {
+ updatedHeaders[index].value = value;
+ }
+ setMappedHeader(updatedHeaders);
+ setHeadersString(JSON.stringify(updatedHeaders));
+ };


All these create/add/update header functions should defined and handled inside HeaderSection instead of the root component, the root component should get the new changes in headers when any change is made. Pass the state setter to this component and on headers change call the state setter function with the latest header changes

RuntimeTerror10 · 2023-11-13T08:40:01Z

app/src/components/features/mocksV2/MockEditorIndex/Editor/index.tsx

+ updateHeaders={updateHeaders}
+ removeHeader={removeHeader}
+ addHeader={addHeader}


No need to pass these functions as props, just pass the state setter functions setMappedHeader setHeadersString and call them with the latest header changes when any operation is performed on headers.

RuntimeTerror10 · 2023-11-13T08:41:02Z

app/src/components/features/mocksV2/MockEditorIndex/Editor/index.tsx

+ const removeHeader = (indexNum: number) => {
+ const updatedHeaders = [...mappedHeader];
+ updatedHeaders.splice(indexNum, 1);
+
+ const updatedHeadersString = createHeadersString(updatedHeaders);
+ setHeadersString(updatedHeadersString);
+ if (errors && errors.headers && errors.headers.length > 0) {
+ const newError = errors.headers.filter((item) => {
+ if (item.indexError === indexNum) {
+ return false;
+ } else if (item.indexError > indexNum) {
+ item.indexError--;
+ }
+ return true;
+ });
+ setErrors({ ...errors, headers: newError });
+ }
+ };


Wrap this with useCallback

RuntimeTerror10 · 2023-11-13T08:41:34Z

app/src/components/features/mocksV2/MockEditorIndex/Editor/index.tsx

+ const updateHeaders = (value: string, index: number, fieldToUpdate: string) => {
+ const updatedHeaders = [...mappedHeader];
+ if (fieldToUpdate === "name") {
+ updatedHeaders[index].name = value;
+ } else if (fieldToUpdate === "value") {
+ updatedHeaders[index].value = value;
+ }
+ setMappedHeader(updatedHeaders);
+ setHeadersString(JSON.stringify(updatedHeaders));
+ };


Wrap this with useCallback

RuntimeTerror10 · 2023-11-13T09:00:42Z

app/src/components/features/mocksV2/MockEditorIndex/utils.ts

+export const validateHeaders = (headers: { [key: string]: string }) => {
+ const headerArray = Object.values(headers).map((item) => {
+ if (item && typeof item === "object") {
+ //@ts-ignore


Try to avoid using this flag

RuntimeTerror10 · 2023-11-13T09:03:53Z

app/src/components/features/mocksV2/MockEditorIndex/utils.ts

+ const HeaderErrors = [];
+ const seenHeaderNames = new Set();
+
+ for (let i = 0; i < headerArray.length; i++) {


Avoid using for loops, use ES6 methods like map, filter, forEach

RuntimeTerror10 · 2023-11-13T10:22:21Z

app/src/components/features/mocksV2/MockEditorIndex/Editor/HeaderSection/index.tsx

+ <div key={index}>
+ {errors.headers
+ .filter((err) => err.indexError === index)
+ .map((headerError, errorIndex) => {
+ if (headerError.valueError.startsWith(errorType)) {
+ const boxPosError = headerError.valueError.slice(errorType.length).trim();
+ return <div key={errorIndex}>{boxPosError}</div>;
+ }
+ return null;
+ })}
+ </div>
+ );
+ }
+ return null;
+ };


We should not perform checks on strings to determine if the error is for header name or value, error messages might change in future which will break this.

RuntimeTerror10 · 2023-11-13T10:27:59Z

app/src/components/features/mocksV2/MockEditorIndex/utils.ts

+ const error: { typeOfError?: string; errorIndex?: number } = {};
+
+ if (!header.name) {
+ error.typeOfError = "name Header name is required";


Set type of error to either name or value, and add other property to error object named description which will be rendered below respective inputs.

Also remove the error type suffix added on each error message

RuntimeTerror10 · 2023-11-13T10:34:21Z

@Yogesh01000100 Suggested UX change:
Instead of clicking on Add modification button to add a new header, can we automatically create a new empty header value-name pair when the user has added some value to the last header name-value field?

RuntimeTerror10 · 2023-11-13T10:40:13Z

@Yogesh01000100 Added comments and one UX change

- Implemented automatic addition of new header fields upon user input in the last header. - Refactored functions from parent to child components for better code organization. - Updated syntax to ES6 for consistency and readability. - Utilized useCallback for optimized rendering and performance. Signed-off-by: D.Yogesh <[email protected]>

Yogesh01000100 · 2023-12-17T20:32:12Z

@Yogesh01000100 Added comments and one UX change

I've implemented the requested changes and added the new automatic header field creation upon user input.

Yogesh01000100 · 2024-02-06T18:57:55Z

Hi @RuntimeTerror10
It has been about two months since I submitted the pull request, and I haven't received any feedback or response. I understand that everyone is busy, and I appreciate your time and effort in reviewing pull requests.

I'm reaching out to inquire about the status of the review for this pull request. If there are specific concerns or changes needed, I'm more than willing to address them.

RuntimeTerror10 · 2024-02-07T17:19:52Z

Hey @Yogesh01000100
Sorry for the delay, I'll review your pull request and will get back to you soon with feedback.

Yogesh01000100 · 2024-03-12T21:03:20Z

Hey @Yogesh01000100 Sorry for the delay, I'll review your pull request and will get back to you soon with feedback.

Hi @RuntimeTerror10 I understand that you're likely juggling a lot of responsibilities, and I appreciate the effort it takes to manage this project.

If there have been any developments regarding the review, or if there's any additional information or modifications you need from my end, please let me know. I'm eager to contribute and to make any necessary adjustments to my submission.

feat(mock-server): improve headers UI

eb2790f

Signed-off-by: Yogesh01000100 <[email protected]>

wrongsahil requested a review from RuntimeTerror10 October 20, 2023 11:43

RuntimeTerror10 requested changes Nov 13, 2023

View reviewed changes

Yogesh01000100 requested a review from RuntimeTerror10 December 17, 2023 20:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(mock-server): improve headers UI #1171

feat(mock-server): improve headers UI #1171

Yogesh01000100 commented Oct 17, 2023 •

edited

Yogesh01000100 commented Oct 20, 2023

wrongsahil commented Oct 20, 2023

Yogesh01000100 commented Oct 21, 2023 •

edited

Yogesh01000100 commented Oct 24, 2023 •

edited

Yogesh01000100 commented Oct 29, 2023

RuntimeTerror10 commented Oct 30, 2023

Yogesh01000100 commented Oct 31, 2023

Yogesh01000100 commented Nov 11, 2023

RuntimeTerror10 Nov 13, 2023

RuntimeTerror10 Nov 13, 2023

RuntimeTerror10 Nov 13, 2023

RuntimeTerror10 Nov 13, 2023

RuntimeTerror10 Nov 13, 2023

RuntimeTerror10 Nov 13, 2023

RuntimeTerror10 Nov 13, 2023

RuntimeTerror10 Nov 13, 2023

RuntimeTerror10 Nov 13, 2023

RuntimeTerror10 Nov 13, 2023

RuntimeTerror10 commented Nov 13, 2023

RuntimeTerror10 commented Nov 13, 2023

Yogesh01000100 commented Dec 17, 2023

Yogesh01000100 commented Feb 6, 2024

RuntimeTerror10 commented Feb 7, 2024

Yogesh01000100 commented Mar 12, 2024 •

edited

feat(mock-server): improve headers UI #1171

Are you sure you want to change the base?

feat(mock-server): improve headers UI #1171

Conversation

Yogesh01000100 commented Oct 17, 2023 • edited

📜 Summary of changes:

Screen Replay session

✅ Checklist:

🧪 Test instructions:

Yogesh01000100 commented Oct 20, 2023

wrongsahil commented Oct 20, 2023

Yogesh01000100 commented Oct 21, 2023 • edited

Yogesh01000100 commented Oct 24, 2023 • edited

Yogesh01000100 commented Oct 29, 2023

RuntimeTerror10 commented Oct 30, 2023

Yogesh01000100 commented Oct 31, 2023

Yogesh01000100 commented Nov 11, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

RuntimeTerror10 commented Nov 13, 2023

RuntimeTerror10 commented Nov 13, 2023

Yogesh01000100 commented Dec 17, 2023

Yogesh01000100 commented Feb 6, 2024

RuntimeTerror10 commented Feb 7, 2024

Yogesh01000100 commented Mar 12, 2024 • edited

Yogesh01000100 commented Oct 17, 2023 •

edited

Yogesh01000100 commented Oct 21, 2023 •

edited

Yogesh01000100 commented Oct 24, 2023 •

edited

Yogesh01000100 commented Mar 12, 2024 •

edited