From 285f7faf411d4031b24f3d46d0ec0ec59b440633 Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Wed, 12 May 2021 11:03:34 +0100
Subject: [PATCH 1/3] fix: add color picker to form component

---
 app/client/src/widgets/FormWidget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/client/src/widgets/FormWidget.tsx b/app/client/src/widgets/FormWidget.tsx
index 40af23180a..585320c45f 100644
--- a/app/client/src/widgets/FormWidget.tsx
+++ b/app/client/src/widgets/FormWidget.tsx
@@ -19,7 +19,7 @@ class FormWidget extends ContainerWidget {
             label: "Background Color",
             helpText: "Use a html color name, HEX, RGB or RGBA value",
             placeholderText: "#FFFFFF / Gray / rgb(255, 99, 71)",
-            controlType: "INPUT_TEXT",
+            controlType: "COLOR_PICKER",
             isBindProperty: true,
             isTriggerProperty: false,
             validation: VALIDATION_TYPES.TEXT,

From 083efdcdbee807c695edf5b2323937f5232f20c1 Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Thu, 13 May 2021 13:31:46 +0100
Subject: [PATCH 2/3] fix: Form widget random color test

---
 .../Entity_Explorer_DragAndDropWidget_spec.js             | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js
index a2d387bd31..534e39f531 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js
@@ -1,5 +1,6 @@
 const testdata = require("../../../../fixtures/testdata.json");
 const apiwidget = require("../../../../locators/apiWidgetslocator.json");
+const widgetsPage = require("../../../../locators/Widgets.json");
 const explorer = require("../../../../locators/explorerlocators.json");
 const commonlocators = require("../../../../locators/commonlocators.json");
 const formWidgetsPage = require("../../../../locators/FormWidgets.json");
@@ -29,10 +30,13 @@ describe("Entity explorer Drag and Drop widgets testcases", function() {
     /**
      * @param{Text} Random Colour
      */
-    cy.testCodeMirror(this.data.colour);
+    cy.get(widgetsPage.backgroundcolorPicker)
+      .first()
+      .click({ force: true });
+    cy.xpath(widgetsPage.greenColor).click();
     cy.get(formWidgetsPage.formD)
       .should("have.css", "background-color")
-      .and("eq", this.data.rgbValue);
+      .and("eq", "rgb(3, 179, 101)");
     /**
      * @param{toggleButton Css} Assert to be checked
      */

From e7cd7148fa2bbcdbd97b671079a3a723073df1b7 Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Thu, 13 May 2021 14:08:07 +0100
Subject: [PATCH 3/3] update: fix test

---
 .../ClientSideTests/FormWidgets/FormWidget_spec.js     | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/FormWidget_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/FormWidget_spec.js
index 50bef3f6c9..70cef20567 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/FormWidget_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/FormWidget_spec.js
@@ -3,6 +3,7 @@ const formWidgetsPage = require("../../../../locators/FormWidgets.json");
 const publish = require("../../../../locators/publishWidgetspage.json");
 const dsl = require("../../../../fixtures/formdsl.json");
 const pages = require("../../../../locators/Pages.json");
+const widgetsPage = require("../../../../locators/Widgets.json");
 
 describe("Form Widget Functionality", function() {
   before(() => {
@@ -23,10 +24,13 @@ describe("Form Widget Functionality", function() {
     /**
      * @param{Text} Random Colour
      */
-    cy.testCodeMirror(this.data.colour);
+    cy.get(widgetsPage.backgroundcolorPicker)
+      .first()
+      .click({ force: true });
+    cy.xpath(widgetsPage.greenColor).click();
     cy.get(formWidgetsPage.formD)
       .should("have.css", "background-color")
-      .and("eq", this.data.rgbValue);
+      .and("eq", "rgb(3, 179, 101)");
     /**
      * @param{toggleButton Css} Assert to be checked
      */
@@ -40,7 +44,7 @@ describe("Form Widget Functionality", function() {
   it("Form Widget Functionality To Verify The Colour", function() {
     cy.get(formWidgetsPage.formD)
       .should("have.css", "background-color")
-      .and("eq", this.data.rgbValue);
+      .and("eq", "rgb(3, 179, 101)");
   });
   it("Form Widget Functionality To Unchecked Visible Widget", function() {
     cy.get(publish.backToEditor).click();