fix: Outdated design for Rest API Editor (#13812)

* Outdated design for Queries/JS/API Editor

* updated cypress test cases and colors reference

* updated cypress test cases with add and delete datasource

* added indexing for testcases

Co-authored-by: Chandan Balaji <chandanbalaji@Chandans-MacBook-Pro.local>

app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiTests/API_Styles_spec.js

@@ -0,0 +1,127 @@
+import ApiEditor from "../../../../locators/ApiEditor";
+import DynamicInput from "../../../../locators/DynamicInput";
+import HomePage from "../../../../locators/HomePage";
+const pages = require("../../../../locators/Pages.json");
+const datasourcesEditor = require("../../../../locators/DatasourcesEditor.json");
+const commonLocators = require("../../../../locators/commonlocators.json");
+
+describe("Validate API Panel CSS Styles", function() {
+  const backgroundColorGray200 = "rgb(231, 231, 231)";
+  const backgroundColorwhite = "rgb(255, 255, 255)";
+  const fontColorGray800 = "rgb(57, 57, 57)";
+
+  before(() => {
+    //Create test api
+    cy.NavigateToAPI_Panel();
+    cy.CreateAPI("test_styles");
+  });
+
+  it("1.Quick access command background color", function() {
+    //Get the first key component (can be any of key value component)
+    //eq(1) is used because eq(0) is API serach bar.
+    cy.get(ApiEditor.codeEditorWrapper)
+      .eq(1)
+      .click();
+    //Check color and background-color of binding prompt
+    cy.get(DynamicInput.bindingPrompt)
+      .should("have.css", "color", fontColorGray800)
+      .should("have.css", "background-color", backgroundColorGray200);
+  });
+
+  it("2.HTTP method dropdown hover and selected background should be gray", function() {
+    //Click on API http selector
+    cy.get(ApiEditor.ApiVerb).click();
+    //Default selection GET background-color check
+    cy.get(ApiEditor.httpDropDownOptions)
+      .first()
+      .should("have.css", "background-color", backgroundColorGray200);
+    //Last element (can be any child other than the default) background-color check
+    //On hover background-color should change.
+    cy.get(ApiEditor.httpDropDownOptions)
+      .last()
+      .should("have.css", "background-color", backgroundColorwhite)
+      .realHover()
+      .should("have.css", "background-color", backgroundColorGray200)
+      .click();
+  });
+
+  it("3.Commands help button center align", function() {
+    //Get the first key component (can be any of key value component)
+    //eq(1) is used because eq(0) is API serach bar.
+    cy.get(ApiEditor.codeEditorWrapper)
+      .eq(1)
+      .realHover();
+    //Get the slash icon component and check background
+    //Check center alignment
+    //Get width and height (have use inner function because values are not accessible outside functional scope);
+    //Comapre transform matrix value (Cypress decodes all transform values into matrix)
+    cy.get(ApiEditor.slashCommandButton)
+      .first()
+      .should("have.css", "right", "0px")
+      .invoke("outerWidth")
+      .then((width) =>
+        cy
+          .get(ApiEditor.slashCommandButton)
+          .first()
+          .invoke("outerHeight")
+          .then((height) =>
+            cy
+              .get(ApiEditor.slashCommandButton)
+              .first()
+              .should(
+                "have.css",
+                "transform",
+                `matrix(1, 0, 0, 1, -${width / 2}, ${height / 2})`,
+              ),
+          ),
+      );
+  });
+
+  it("4.Select Datasource dropdown binding prompt background color", function() {
+    cy.generateUUID().then((appName1) => {
+      cy.generateUUID().then((appName2) => {
+        //Create two datasource for testing binding prompt background-color
+        cy.createNewAuthApiDatasource(appName1);
+        cy.createNewAuthApiDatasource(appName2);
+        cy.get(commonLocators.entityName)
+          .contains("test_styles")
+          .click();
+        //Click on API search editor
+        cy.get(ApiEditor.codeEditorWrapper)
+          .first()
+          .click();
+        //First hint for search background-color test
+        cy.get(ApiEditor.apiSearchHint)
+          .first()
+          .should("have.css", "background-color", backgroundColorGray200);
+        //Last element (can be any child other than the default) background-color check
+        //On hover background-color should change.
+        cy.get(ApiEditor.apiSearchHint)
+          .last()
+          .should("have.css", "background-color", backgroundColorwhite)
+          .realHover()
+          .should("have.css", "background-color", backgroundColorGray200);
+        //Delete created test API
+        cy.DeleteAPI();
+        cy.wait(2000);
+        cy.get(commonLocators.entityName)
+          .contains("test_styles")
+          .should("not.exist");
+        //Delete two datasources
+        cy.deleteDatasource(appName1);
+        cy.deleteDatasource(appName2);
+      });
+    });
+  });
+
+  after(() => {
+    //Delete Application
+    cy.get(HomePage.applicationName).click();
+    cy.get(".t--application-edit-menu li")
+      .contains("Delete Application")
+      .click();
+    cy.get(".t--application-edit-menu li")
+      .contains("Are you sure?")
+      .click();
+  });
+});

app/client/cypress/locators/ApiEditor.js

@@ -30,4 +30,8 @@ export default {
   rawResponseTab: "[data-cy=t--tab-RAW]",
   datasourcesRightPane: "[data-cy=t--tab-datasources]",
   connectionsRightPane: "[data-cy=t--tab-Connections]",
+  httpDropDownOptions: ".t--dropdown-option",
+  codeEditorWrapper: ".t--code-editor-wrapper",
+  apiSearchHint: ".datasource-hint",
+  slashCommandButton: ".commands-button",
 };

app/client/cypress/support/dataSourceCommands.js

@@ -7,6 +7,7 @@ const pages = require("../locators/Pages.json");
 const datasourceEditor = require("../locators/DatasourcesEditor.json");
 const datasourceFormData = require("../fixtures/datasources.json");
 const explorer = require("../locators/explorerlocators.json");
+const apiWidgetslocator = require("../locators/apiWidgetslocator.json");
 
 const backgroundColorBlack = "rgb(0, 0, 0)";
 const backgroundColorGray1 = "rgb(250, 250, 250)";
@@ -420,6 +421,57 @@ Cypress.Commands.add("ReconnectDatasource", (datasource) => {
   cy.xpath(`//span[text()='${datasource}']`).click();
 });
 
+Cypress.Commands.add("createNewAuthApiDatasource", (renameVal) => {
+  cy.NavigateToAPI_Panel();
+  //Click on Authenticated API
+  cy.get(apiWidgetslocator.createAuthApiDatasource).click();
+  //Verify weather Authenticated API is successfully created.
+  cy.wait("@createDatasource").should(
+    "have.nested.property",
+    "response.body.responseMeta.status",
+    201,
+  );
+  cy.get(datasourceEditor.datasourceTitleLocator).click();
+  cy.get(`${datasourceEditor.datasourceTitleLocator} input`)
+    .clear()
+    .type(renameVal, { force: true })
+    .blur();
+  //Fill dummy inputs and save
+  cy.fillAuthenticatedAPIForm();
+  cy.saveDatasource();
+  // Added because api name edit takes some time to
+  // reflect in api sidebar after the call passes.
+  // eslint-disable-next-line cypress/no-unnecessary-waiting
+  cy.wait(2000);
+});
+
+Cypress.Commands.add("deleteAuthApiDatasource", (renameVal) => {
+  //Navigate to active datasources panel.
+  cy.get(pages.addEntityAPI)
+    .last()
+    .should("be.visible")
+    .click({ force: true });
+  cy.get(pages.integrationActiveTab)
+    .should("be.visible")
+    .click({ force: true });
+  cy.get("#loading").should("not.exist");
+  //Select the datasource to delete
+  cy.get(".t--datasource-name")
+    .contains(renameVal)
+    .click();
+  //Click on delete and later confirm
+  cy.get(".t--delete-datasource").click();
+  cy.get(".t--delete-datasource")
+    .contains("Are you sure?")
+    .click();
+  //Verify the status of deletion
+  cy.wait("@deleteDatasource").should(
+    "have.nested.property",
+    "response.body.responseMeta.status",
+    200,
+  );
+});
+
 Cypress.Commands.add("createMockDatasource", () => {
   cy.get(".t--mock-datasource")
     .contains("Users")

app/client/src/components/ads/Dropdown.tsx

@@ -402,7 +402,7 @@ const OptionWrapper = styled.div<{
   background-color: ${(props) =>
     props.selected
       ? props.selectedHighlightBg || `var(--appsmith-color-black-200)`
-      : null};
+      : Colors.WHITE};
   &&& svg {
     rect {
       fill: ${(props) => props.theme.colors.dropdownIconBg};

app/client/src/components/editorComponents/CodeEditor/BindingPrompt.tsx

@@ -10,7 +10,7 @@ const Wrapper = styled.span<{
 }>`
   padding: ${(props) => (props.customMessage ? 6 : 8)}px;
   font-size: 12px;
-  color: #ffffff;
+  color: var(--appsmith-color-black-800);
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 10px rgba(0, 0, 0, 0.1);
   border-radius: 0px;
   background-color: ${(props) =>
@@ -25,11 +25,9 @@ const Wrapper = styled.span<{
 `;
 
 const CurlyBraces = styled.span`
-  color: ${(props) => props.theme.colors.codeMirror.background.hoverState};
+  color: var(--appsmith-color-black-800);
-  background-color: #ffffff;
+  background-color: ${(props) =>
-  border-radius: 2px;
+    props.theme.colors.codeMirror.background.hoverState};
-  padding: 2px;
-  margin: 0px 2px;
 `;
 
 function BindingPrompt(props: {

app/client/src/components/editorComponents/CodeEditor/styledComponents.ts

@@ -368,8 +368,8 @@ export const DynamicAutocompleteInputWrapper = styled.div<{
     z-index: 2;
     width: 20px;
     position: absolute;
-    right: 5px;
+    right: 0;
-    top: 7px;
+    transform: translate(-50%, 50%);
     height: 20px;
     background: transparent;
     display: none;

app/client/src/constants/DefaultTheme.tsx

@@ -663,6 +663,7 @@ const lightShades = [
   "#FFDEDE",
   "#575757",
   "#191919",
+  "#E7E7E7",
 ] as const;
 
 type ShadeColor = typeof darkShades[number] | typeof lightShades[number];
@@ -2484,7 +2485,7 @@ export const light: ColorType = {
       border: lightShades[13],
       bg: lightShades[11],
       text: lightShades[8],
-      hover: lightShades[2],
+      hover: lightShades[21],
       hoverText: lightShades[10],
       subText: lightShades[15],
     },
@@ -2742,7 +2743,7 @@ export const light: ColorType = {
   codeMirror: {
     background: {
       defaultState: lightShades[0],
-      hoverState: lightShades[12],
+      hoverState: lightShades[21],
     },
     text: "#090707",
     dataType: {

app/client/src/globalStyles/CodemirrorHintStyles.ts

@@ -114,14 +114,14 @@ export const CodemirrorHintStyles = createGlobalStyle<{
     color: black;
     &.custom {
       height: unset;
-      background: #ebebeb;
+      background-color: var(--appsmith-color-black-0);
       width: 600px;
       &:hover{
-        background: #ffffff;
+        background-color: var(--appsmith-color-black-200);
         color: black;
       }
       &.CodeMirror-hint-active {
-        background: #ffffff;
+        background-color: var(--appsmith-color-black-200);
       }
     }