Merge branch 'release' of https://github.com/appsmithorg/appsmith into release

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

@@ -14,6 +14,7 @@ import { ReactComponent as FlightIcon } from "assets/icons/ads/flight.svg";
 
 import styled from "styled-components";
 import { Size } from "./Button";
+import { CommonComponentProps } from "./common";
 
 export const AppIconCollection = [
   "bag",
@@ -80,7 +81,7 @@ const IconWrapper = styled.div<AppIconProps & { styledProps: cssAttributes }>`
   background-color: ${props => props.color};
 `;
 
-export type AppIconProps = {
+export type AppIconProps = CommonComponentProps & {
   size: Size;
   color: string;
   name: AppIconName;
@@ -132,7 +133,11 @@ const AppIcon = (props: AppIconProps) => {
       break;
   }
   return returnIcon ? (
-    <IconWrapper {...props} styledProps={styledProps}>
+    <IconWrapper
+      data-cy={props.cypressSelector}
+      {...props}
+      styledProps={styledProps}
+    >
       {returnIcon}
     </IconWrapper>
   ) : null;

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

@@ -82,7 +82,7 @@ const Checkbox = (props: CheckboxProps) => {
   };
 
   return (
-    <StyledCheckbox disabled={props.disabled}>
+    <StyledCheckbox data-cy={props.cypressSelector} disabled={props.disabled}>
       {props.label}
       <input
         type="checkbox"

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

@@ -70,7 +70,7 @@ const ColorSelector = (props: ColorSelectorProps) => {
   const [selected, setSelected] = useState<string>(appColorPalette[0]);
 
   return (
-    <Palette fill={props.fill}>
+    <Palette fill={props.fill} data-cy={props.cypressSelector}>
       {props.colorPalette &&
         props.colorPalette.map((hex: string, index: number) => {
           return (

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

@@ -127,7 +127,11 @@ export default function Dropdown(props: DropdownProps) {
   }, []);
 
   return (
-    <DropdownContainer tabIndex={0} onBlur={() => setIsOpen(false)}>
+    <DropdownContainer
+      tabIndex={0}
+      onBlur={() => setIsOpen(false)}
+      data-cy={props.cypressSelector}
+    >
       <Selected
         isOpen={isOpen}
         disabled={props.disabled}

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

@@ -3,7 +3,7 @@ import { EditableText as BlueprintEditableText } from "@blueprintjs/core";
 import styled from "styled-components";
 import Text, { TextType } from "./Text";
 import Spinner from "./Spinner";
-import { hexToRgba, Classes } from "./common";
+import { hexToRgba, Classes, CommonComponentProps } from "./common";
 import { theme } from "constants/DefaultTheme";
 import { noop } from "lodash";
 import Icon, { IconSize } from "./Icon";
@@ -24,7 +24,7 @@ export enum SavingState {
   ERROR = "ERROR",
 }
 
-type EditableTextProps = {
+type EditableTextProps = CommonComponentProps & {
   defaultValue: string;
   onTextChanged: (value: string) => void;
   placeholder: string;
@@ -246,6 +246,7 @@ export const EditableText = (props: EditableTextProps) => {
 
   return (
     <EditableTextWrapper
+      data-cy={props.cypressSelector}
       fill={props.fill}
       onMouseEnter={nonEditMode}
       onDoubleClick={

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

@@ -48,7 +48,7 @@ const IconSelector = (props: IconSelectorProps) => {
   }, [props.selectedIcon]);
 
   return (
-    <IconPalette fill={props.fill}>
+    <IconPalette fill={props.fill} data-cy={props.cypressSelector}>
       {props.iconPalette &&
         props.iconPalette.map((iconName: AppIconName, index: number) => {
           return (

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

@@ -28,7 +28,7 @@ const MenuOption = styled.div`
 
 const Menu = (props: MenuProps) => {
   return (
-    <Popover minimal position={props.position}>
+    <Popover minimal position={props.position} data-cy={props.cypressSelector}>
       {props.target}
       <MenuWrapper>
         {props.children.map((el, index) => {

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

@@ -51,7 +51,11 @@ const IconContainer = styled.div`
 
 function MenuItem(props: MenuItemProps) {
   return (
-    <ItemRow onClick={props.onSelect} disabled={props.disabled}>
+    <ItemRow
+      onClick={props.onSelect}
+      disabled={props.disabled}
+      data-cy={props.cypressSelector}
+    >
       <IconContainer>
         {props.icon ? <Icon name={props.icon} size={IconSize.LARGE} /> : null}
         {props.text ? (

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

@@ -127,6 +127,7 @@ export default function RadioComponent(props: RadioProps) {
 
   return (
     <RadioGroup
+      data-cy={props.cypressSelector}
       rows={props.rows}
       onChange={(e: any) => onChangeHandler(e.target.value)}
     >

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

@@ -115,6 +115,7 @@ const SearchInput = forwardRef(
 
     return (
       <InputWrapper
+        data-cy={props.cypressSelector}
         value={searchValue}
         isFocused={isFocused}
         variant={props.variant}

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

@@ -81,6 +81,7 @@ const TableDropdown = (props: DropdownProps) => {
 
   return (
     <Popover
+      data-cy={props.cypressSelector}
       usePortal={false}
       position={props.position || Position.BOTTOM_LEFT}
       isOpen={isDropdownOpen}

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

@@ -3,7 +3,7 @@ import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
 import styled from "styled-components";
 import Icon, { IconName, IconSize } from "./Icon";
-import { Classes } from "./common";
+import { Classes, CommonComponentProps } from "./common";
 
 export type TabProp = {
   key: string;
@@ -105,7 +105,7 @@ const TabTitle = styled.span`
   letter-spacing: ${props => props.theme.typography.h4.letterSpacing}px;
 `;
 
-type TabbedViewComponentType = {
+type TabbedViewComponentType = CommonComponentProps & {
   tabs: Array<TabProp>;
   selectedIndex?: number;
   onSelect?: Function;
@@ -114,7 +114,10 @@ type TabbedViewComponentType = {
 
 export const TabComponent = (props: TabbedViewComponentType) => {
   return (
-    <TabsWrapper shouldOverflow={props.overflow}>
+    <TabsWrapper
+      shouldOverflow={props.overflow}
+      data-cy={props.cypressSelector}
+    >
       <Tabs
         selectedIndex={props.selectedIndex}
         onSelect={(index: number) => {

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

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { ThemeProp, Classes } from "./common";
+import { ThemeProp, Classes, CommonComponentProps } from "./common";
 
 export enum TextType {
   P1 = "p1",
@@ -24,7 +24,7 @@ export enum FontWeight {
   NORMAL = "normal",
 }
 
-export type TextProps = {
+export type TextProps = CommonComponentProps & {
   type: TextType;
   underline?: boolean;
   italic?: boolean;
@@ -52,8 +52,9 @@ const typeSelector = (props: TextProps & ThemeProp): string => {
   return color;
 };
 
-const Text = styled.span.attrs(() => ({
+const Text = styled.span.attrs((props: TextProps) => ({
   className: Classes.TEXT,
+  "data-cy": props.cypressSelector,
 }))<TextProps>`
   text-decoration: ${props => (props.underline ? "underline" : "unset")};
   font-style: ${props => (props.italic ? "italic" : "normal")};

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

@@ -155,7 +155,7 @@ const TextInput = forwardRef(
     );
 
     return (
-      <InputWrapper>
+      <InputWrapper data-cy={props.cypressSelector}>
         <StyledInput
           type="text"
           ref={ref}

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

@@ -126,6 +126,7 @@ export default function Toggle(props: ToggleProps) {
 
   return (
     <StyledToggle
+      data-cy={props.cypressSelector}
       isLoading={props.isLoading}
       disabled={props.disabled}
       value={value}

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

@@ -39,7 +39,7 @@ const TooltipWrapper = styled.div<{ variant?: Variant }>`
 
 const TooltipComponent = (props: TooltipProps) => {
   return (
-    <TooltipWrapper variant={props.variant}>
+    <TooltipWrapper variant={props.variant} data-cy={props.cypressSelector}>
       <Tooltip
         content={props.content}
         position={props.position}

app/client/src/components/stories/Radio.stories.tsx

@@ -1,11 +1,5 @@
 import React from "react";
-import {
+import { withKnobs, select, boolean, number } from "@storybook/addon-knobs";
-  withKnobs,
-  select,
-  boolean,
-  text,
-  number,
-} from "@storybook/addon-knobs";
 import { withDesign } from "storybook-addon-designs";
 import { StoryWrapper } from "components/ads/common";
 import RadioComponent from "components/ads/Radio";

app/client/src/components/stories/Tooltip.stories.tsx

@@ -5,7 +5,6 @@ import { Position } from "@blueprintjs/core";
 import TooltipComponent from "components/ads/Tooltip";
 import { StoryWrapper } from "components/ads/common";
 import Text, { TextType } from "components/ads/Text";
-import Button from "components/ads/Button";
 
 export default {
   title: "Tooltip",