Feature Switch Widget

app/client/cypress/fixtures/example.json

@@ -88,6 +88,7 @@
   "dropdownInput": "TestD",
   "radioInputName": "Test Radio",
   "checkbocInputName": "value",
+  "switchInputName": "Switch1",
   "defaultimage": "https://i0.wp.com/www.heyuguys.com/images/2016/04/The-Joker.png?fit=1920%2C960",
   "NewImage": "https://cdn.dribbble.com/users/1787323/screenshots/4563995/dribbbe_hammer-01.png",
   "textfun": "{{Table1.selectedRow.userName}}",

app/client/cypress/fixtures/formWidgetdsl.json

@@ -62,6 +62,22 @@
                 "parentId": "e3tq9qwta6",
                 "widgetId": "szjhneuog5"
               },
+              {
+                "isVisible": true,
+                "label": "Switch",
+                "defaultSwitchState": true,
+                "widgetName": "Switch1",
+                "type": "SWITCH_WIDGET",
+                "isLoading": false,
+                "parentColumnSpace": 71.75,
+                "parentRowSpace": 38,
+                "leftColumn": 10,
+                "rightColumn": 13,
+                "topRow": 18,
+                "bottomRow": 19,
+                "parentId": "e3tq9qwta6",
+                "widgetId": "szjhneuog9"
+              },
               {
                 "isVisible": true,
                 "widgetName": "FormButton1",

app/client/cypress/fixtures/newFormDsl.json

@@ -121,6 +121,22 @@
                   "parentId": "e3tq9qwta6",
                   "widgetId": "szjhneuog5"
                 },
+                {
+                  "isVisible": true,
+                  "label": "Switch",
+                  "defaultSwitchState": true,
+                  "widgetName": "Switch1",
+                  "type": "SWITCH_WIDGET",
+                  "isLoading": false,
+                  "parentColumnSpace": 71.75,
+                  "parentRowSpace": 38,
+                  "leftColumn": 10,
+                  "rightColumn": 13,
+                  "topRow": 18,
+                  "bottomRow": 19,
+                  "parentId": "e3tq9qwta6",
+                  "widgetId": "szjhneuog9"
+                },
                 {
                   "isVisible": true,
                   "label": "",

app/client/cypress/integration/Smoke_TestSuite/Binding/Table_Property_ToggleJs_With_Binding_spec.js

@@ -1,3 +1,5 @@
+/* eslint-disable cypress/no-unnecessary-waiting */
+
 const widgetsPage = require("../../../locators/Widgets.json");
 const commonlocators = require("../../../locators/commonlocators.json");
 const publish = require("../../../locators/publishWidgetspage.json");

app/client/cypress/integration/Smoke_TestSuite/DisplayWidgets/Table_GeneralProperty_spec.js

@@ -1,3 +1,5 @@
+/* eslint-disable cypress/no-unnecessary-waiting */
+
 const widgetsPage = require("../../../locators/Widgets.json");
 const commonlocators = require("../../../locators/commonlocators.json");
 const publish = require("../../../locators/publishWidgetspage.json");

app/client/cypress/integration/Smoke_TestSuite/DisplayWidgets/Table_Property_JsonUpdate_spec.js

@@ -5,7 +5,6 @@ const apiPage = require("../../../locators/ApiEditor.json");
 const publishPage = require("../../../locators/publishWidgetspage.json");
 const testdata = require("../../../fixtures/testdata.json");
 
-
 describe("Test Create Api and Bind to Table widget", function() {
   before(() => {
     cy.addDsl(dsl);
@@ -23,13 +22,12 @@ describe("Test Create Api and Bind to Table widget", function() {
     cy.SearchEntityandOpen("Text1");
     cy.testJsontext("text", "{{Table1.selectedRow.url}}");
     cy.SearchEntityandOpen("Table1");
-    cy.readTabledata("0", "0").then(tabData => {
+    cy.readTabledata("0", "0").then((tabData) => {
       const tableData = tabData;
       localStorage.setItem("tableDataPage1", tableData);
     });
     cy.ValidateTableData("1");
     cy.addColumn("CustomColumn");
-
   });
 
   it("Update table json data and check the column names updated", function() {

app/client/cypress/integration/Smoke_TestSuite/DisplayWidgets/Table_Widget_Add_button_spec.js

@@ -26,6 +26,7 @@ describe("Table Widget property pane feature validation", function() {
     cy.get(widgetsPage.tableBtn)
       .last()
       .click({ force: true });
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(3000);
     cy.get(widgetsPage.toastAction).should("be.visible");
     cy.get(widgetsPage.toastActionText)

app/client/cypress/integration/Smoke_TestSuite/DisplayWidgets/Table_Widget_Copy_Paste_spec.js

@@ -19,6 +19,7 @@ describe("Test Suite to validate copy/paste table Widget", function() {
     cy.openPropertyPane("tablewidget");
     cy.widgetText("Table1", widgetsPage.tableWidget, commonlocators.tableInner);
     cy.get("body").type(`{${modifierKey}}c`);
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(500);
     cy.get(commonlocators.toastBody)
       .first()

app/client/cypress/integration/Smoke_TestSuite/FormWidgets/CheckBox_spec.js

@@ -90,6 +90,21 @@ describe("Checkbox Widget Functionality", function() {
 
     cy.get(publish.backToEditor).click();
   });
+  it("Checkbox Functionality To swap label placement of  checkbox", function() {
+    cy.openPropertyPane("checkboxwidget");
+    cy.get(publish.checkboxWidget + " " + ".bp3-align-right").should(
+      "not.exist",
+    );
+    cy.get(publish.checkboxWidget + " " + ".bp3-align-left").should("exist");
+    cy.get(commonlocators.optionalignment).click();
+    cy.dropdownDynamic("Right");
+    cy.PublishtheApp();
+    cy.get(publish.checkboxWidget + " " + ".bp3-align-right").should("exist");
+    cy.get(publish.checkboxWidget + " " + ".bp3-align-left").should(
+      "not.exist",
+    );
+    cy.get(publish.backToEditor).click();
+  });
 });
 afterEach(() => {
   // put your clean up code if any

app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Switch_spec.js

@@ -0,0 +1,90 @@
+const commonlocators = require("../../../locators/commonlocators.json");
+const formWidgetsPage = require("../../../locators/FormWidgets.json");
+const widgetsPage = require("../../../locators/Widgets.json");
+const publish = require("../../../locators/publishWidgetspage.json");
+const dsl = require("../../../fixtures/newFormDsl.json");
+const formWidgetDsl = require("../../../fixtures/formWidgetdsl.json");
+const pages = require("../../../locators/Pages.json");
+
+describe("Switch Widget Functionality", function() {
+  before(() => {
+    cy.addDsl(dsl);
+  });
+  it("Switch Widget Functionality", function() {
+    cy.openPropertyPane("switchwidget");
+    /**
+     * @param{Text} Random Text
+     * @param{SwitchWidget}Mouseover
+     * @param{SwitchPre Css} Assertion
+     */
+    cy.widgetText(
+      "Toggler",
+      formWidgetsPage.switchWidget,
+      widgetsPage.switchInput,
+    );
+    /**
+     * @param{Text} Random Value
+     */
+    cy.testCodeMirror(this.data.switchInputName);
+    cy.get(widgetsPage.switchLabel).should("have.text", "Switch1");
+    /**
+     * @param{toggleButton Css} Assert to be checked
+     */
+    cy.togglebar(widgetsPage.defaultcheck);
+    /**
+     * @param{Show Alert} Css for InputChange
+     */
+    cy.getAlert(commonlocators.optionchangetextSwitch);
+    cy.PublishtheApp();
+  });
+  it("Switch Functionality To Switch Label", function() {
+    cy.get(publish.switchwidget + " " + "label").should(
+      "have.text",
+      this.data.switchInputName,
+    );
+    cy.get(publish.backToEditor).click();
+  });
+  it("Switch Functionality To Check Disabled Widget", function() {
+    cy.openPropertyPane("switchwidget");
+    cy.togglebar(commonlocators.Disablejs + " " + "input");
+    cy.PublishtheApp();
+    cy.get(publish.switchwidget + " " + "input").should("be.disabled");
+    cy.get(publish.backToEditor).click();
+  });
+  it("Switch Functionality To Check Enabled Widget", function() {
+    cy.openPropertyPane("switchwidget");
+    cy.togglebarDisable(commonlocators.Disablejs + " " + "input");
+    cy.PublishtheApp();
+    cy.get(publish.switchwidget + " " + "input").should("be.enabled");
+    cy.get(publish.backToEditor).click();
+  });
+  it("Switch Functionality To Unchecked Visible Widget", function() {
+    cy.openPropertyPane("switchwidget");
+    cy.togglebarDisable(commonlocators.visibleCheckbox);
+    cy.PublishtheApp();
+    cy.get(publish.switchwidget + " " + "input").should("not.exist");
+    cy.get(publish.backToEditor).click();
+  });
+  it("Switch Functionality To Check Visible Widget", function() {
+    cy.openPropertyPane("switchwidget");
+    cy.togglebar(commonlocators.visibleCheckbox);
+    cy.PublishtheApp();
+    cy.get(publish.switchwidget + " " + "input").should("be.checked");
+    cy.get(publish.backToEditor).click();
+  });
+
+  it("Switch Functionality To swap label placement of  switch", function() {
+    cy.openPropertyPane("switchwidget");
+    cy.get(publish.switchwidget + " " + ".bp3-align-right").should("not.exist");
+    cy.get(publish.switchwidget + " " + ".bp3-align-left").should("exist");
+    cy.get(commonlocators.optionalignment).click();
+    cy.dropdownDynamic("Right");
+    cy.PublishtheApp();
+    cy.get(publish.switchwidget + " " + ".bp3-align-right").should("exist");
+    cy.get(publish.switchwidget + " " + ".bp3-align-left").should("not.exist");
+    cy.get(publish.backToEditor).click();
+  });
+});
+afterEach(() => {
+  // put your clean up code if any
+});

app/client/cypress/locators/FormWidgets.json

@@ -29,6 +29,7 @@
     "formD": "div[type='FORM_WIDGET']",
     "datepickerFooter": ".bp3-datepicker-footer span",
     "disableJs":".t--property-control-disable input[type='checkbox']",
+    "switchWidget": ".t--draggable-switchwidget",
     "toggleJsDefaultDate": ".t--property-control-defaultdate .t--js-toggle",
     "toggleJsMinDate": ".t--property-control-mindate .t--js-toggle",
     "toggleJsMaxDate": ".t--property-control-maxdate .t--js-toggle"

app/client/cypress/locators/Widgets.json

@@ -49,6 +49,8 @@
     "tableActionSelect": ".t--property-control-onsearchtextchanged .t--open-dropdown-Select-Action",
     "chartWidget": ".t--widget-chartwidget",
     "tableOnRowSelect": ".t--property-control-onrowselected .t--open-dropdown-Select-Action",
+    "switchInput": ".t--draggable-switchwidget span.t--widget-name",
+    "switchLabel": ".t--draggable-switchwidget label",
     "addColumn": ".t--add-column-btn",
     "deleteColumn": ".t--delete-column-btn",
     "editCreatedColumn": ".t--property-control-createdcolumns input",

app/client/cypress/locators/commonlocators.json

@@ -13,8 +13,10 @@
   "optionchangetextDropdown": " .t--property-control-onoptionchange .CodeMirror-code",
   "optionchangetextDatePicker": " .t--property-control-ondateselected .CodeMirror-code",
   "optionchangetextCheckbox": ".t--property-control-oncheckchange .CodeMirror-code",
+  "optionchangetextSwitch": ".t--property-control-onchange .CodeMirror-code",
   "optionchangetextInput": ".t--property-control-ontextchanged .CodeMirror-code",
   "optionchangeRadioselect": ".t--property-control-onselectionchange .CodeMirror-code",
+  "optionalignment": ".t--property-control-alignment",
   "onMarkerclick": ".t--property-control-onmarkerclick .CodeMirror-code",
   "success": "div[type='success'] span",
   "mapOptionChange": ".t--property-control-onmarkerclick .CodeMirror-code",

app/client/cypress/locators/publishWidgetspage.json

@@ -6,6 +6,7 @@
   "backToEditor": ".t--back-to-editor",
   "inputWidget": ".t--widget-inputwidget",
   "checkboxWidget": ".t--widget-checkboxwidget",
+  "switchwidget": ".t--widget-switchwidget",
   "radioWidget": ".t--widget-radiogroupwidget",
   "formWidget": ".t--widget-formwidget",
   "imageWidget": ".t--widget-imagewidget",

app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import styled from "styled-components";
 import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
-import { Checkbox, Classes } from "@blueprintjs/core";
+import { Alignment, Checkbox, Classes } from "@blueprintjs/core";
 import { BlueprintControlTransform } from "constants/DefaultTheme";
+import { AlignWidget } from "widgets/SwitchWidget";
 
 const CheckboxContainer = styled.div<{ isValid: boolean }>`
   && {
@@ -11,7 +12,9 @@ const CheckboxContainer = styled.div<{ isValid: boolean }>`
     display: flex;
     justify-content: flex-start;
     align-items: center;
-
+    &.${Alignment.RIGHT} {
+      justify-content: flex-end;
+    }
     .bp3-control-indicator {
       border: ${(props) =>
         !props.isValid
@@ -29,14 +32,18 @@ const CheckboxContainer = styled.div<{ isValid: boolean }>`
 `;
 class CheckboxComponent extends React.Component<CheckboxComponentProps> {
   render() {
+    const checkboxAlignClass =
+      this.props.alignWidget === "RIGHT" ? Alignment.RIGHT : Alignment.LEFT;
     return (
       <CheckboxContainer
         isValid={!(this.props.isRequired && !this.props.isChecked)}
+        className={checkboxAlignClass}
       >
         <Checkbox
           label={this.props.label}
+          alignIndicator={checkboxAlignClass}
           className={
-            this.props.isLoading ? "bp3-skeleton" : Classes.RUNNING_TEXT
+            this.props.isLoading ? Classes.SKELETON : Classes.RUNNING_TEXT
           }
           style={{ borderRadius: 0 }}
           onChange={this.onCheckChange}
@@ -58,6 +65,7 @@ export interface CheckboxComponentProps extends ComponentProps {
   onCheckChange: (isChecked: boolean) => void;
   isLoading: boolean;
   isRequired?: boolean;
+  alignWidget?: AlignWidget;
 }
 
 export default CheckboxComponent;

app/client/src/components/designSystems/blueprint/SwitchComponent.tsx

@@ -0,0 +1,52 @@
+import { Alignment, Classes, Switch } from "@blueprintjs/core";
+import { BlueprintControlTransform } from "constants/DefaultTheme";
+import React from "react";
+import styled from "styled-components";
+import { AlignWidget } from "widgets/SwitchWidget";
+import { ComponentProps } from "../appsmith/BaseComponent";
+
+interface SwitchComponentProps extends ComponentProps {
+  label: string;
+  isSwitchedOn: boolean;
+  onChange: (isSwitchedOn: boolean) => void;
+  isLoading: boolean;
+  alignWidget: AlignWidget;
+}
+
+const SwitchComponentContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .${Classes.CONTROL} {
+    margin: 0;
+  }
+  &.${Alignment.RIGHT} {
+    justify-content: flex-end;
+  }
+  ${BlueprintControlTransform}
+`;
+
+export const SwitchComponent: React.FC<SwitchComponentProps> = ({
+  label,
+  isSwitchedOn,
+  alignWidget,
+  onChange,
+  isDisabled,
+  isLoading,
+}) => {
+  const switchAlignClass =
+    alignWidget === "RIGHT" ? Alignment.RIGHT : Alignment.LEFT;
+
+  return (
+    <SwitchComponentContainer className={switchAlignClass}>
+      <Switch
+        alignIndicator={switchAlignClass}
+        label={label}
+        disabled={isDisabled}
+        className={isLoading ? Classes.SKELETON : ""}
+        checked={isSwitchedOn}
+        onChange={() => onChange(!isSwitchedOn)}
+      />
+    </SwitchComponentContainer>
+  );
+};

app/client/src/constants/ActionConstants.tsx

@@ -34,6 +34,7 @@ export enum EventType {
   ON_TEXT_CHANGE = "ON_TEXT_CHANGE",
   ON_SUBMIT = "ON_SUBMIT",
   ON_CHECK_CHANGE = "ON_CHECK_CHANGE",
+  ON_SWITCH_CHANGE = "ON_SWITCH_CHANGE",
   ON_SELECT = "ON_SELECT",
   ON_DATE_SELECTED = "ON_DATE_SELECTED",
   ON_DATE_RANGE_SELECTED = "ON_DATE_RANGE_SELECTED",