feat: add authentication tab in api editor

[vnodecg]

Description

Add authentication tab in API Editor

Fixes #5827

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Manually

Screenshots

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

Test coverage results 🧪

🔴 Total coverage has decreased

// Code coverage diff between base branch:release and head branch: FEATURE/auth-tab-in-api 

Status	File	% Stmts	% Branch	% Funcs	% Lines
🔴	total	54.87 (-0.01)	36.67 (-0.02)	33.83 (-0.07)	55.45 (-0.01)
🔴	app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx	29.93 (-0.54)	2.53 (-0.14)	3.85 (-0.15)	31.75 (-0.73)
🔴	app/client/src/constants/messages.ts	73.99 (-0.43)	100 (0)	23.02 (-0.65)	79.31 (-0.82)
✨ 🆕	app/client/src/pages/Editor/APIEditor/ApiAuthentication.tsx	51.02	26.67	0	52.08
🟢	app/client/src/pages/Editor/APIEditor/Form.tsx	37.72 (0.37)	42 (0)	0 (0)	39.38 (0.39)

[hetunandu]

@trishaanand noticed that datasource object inside the action are not getting updated with the validation information

Screen.Recording.2021-10-07.at.2.35.12.PM.mov

[mohanarpit]

Minor suggestion after trying out the deploy preview:
On clicking the "Edit Datasource" button inside the authentication pane, the user should be taken to the datasource edit page and scrolled to the Authencation section. Right now, the user is directed to the datasource view page and the user has to make 1 more click to edit the datasource.
Additionally, when the user clicks the "Back" button after editing the datasource, the user must be taken back to the API directly. If I'm not mistaken, this has been resolved in production. Maybe merging the latest code from release would solve for this 2nd point.

[hetunandu]

Not able to see the error state yet. Can you debug this @vnodecg

[vnodecg]

Not able to see the error state yet. Can you debug this @vnodecg

@hetunandu Error state is only visible in Oauth2 mode

[vnodecg]

Minor suggestion after trying out the deploy preview: On clicking the "Edit Datasource" button inside the authentication pane, the user should be taken to the datasource edit page and scrolled to the Authencation section. Right now, the user is directed to the datasource view page and the user has to make 1 more click to edit the datasource. Additionally, when the user clicks the "Back" button after editing the datasource, the user must be taken back to the API directly. If I'm not mistaken, this has been resolved in production. Maybe merging the latest code from release would solve for this 2nd point.

I need help in doing this. Currently I'm mimicking the edit datasource button next to the url bar

[vnodecg]

Minor suggestion after trying out the deploy preview: On clicking the "Edit Datasource" button inside the authentication pane, the user should be taken to the datasource edit page and scrolled to the Authencation section. Right now, the user is directed to the datasource view page and the user has to make 1 more click to edit the datasource. Additionally, when the user clicks the "Back" button after editing the datasource, the user must be taken back to the API directly. If I'm not mistaken, this has been resolved in production. Maybe merging the latest code from release would solve for this 2nd point.

@mohanarpit I was able to address the first (I wasn't able to scroll to the authentication section but I was able to redirect to the edit page).
I merged the latest release but the back button issue is not fixed.