diff --git a/app/client/.eslintrc.json b/app/client/.eslintrc.json
index 0e6d1239e1..fe0ab77466 100644
--- a/app/client/.eslintrc.json
+++ b/app/client/.eslintrc.json
@@ -28,7 +28,13 @@
     "react/prop-types": 0,
     "@typescript-eslint/explicit-module-boundary-types": 0,
     "cypress/no-unnecessary-waiting": 0,
-    "cypress/no-assigning-return-values": 0
+    "cypress/no-assigning-return-values": 0,
+    "react/function-component-definition": "warn",
+    "react/jsx-boolean-value": "error",
+    "react/self-closing-comp": "error",
+    "react/jsx-sort-props": "error",
+    "react/jsx-fragments": "error",
+    "react/jsx-no-useless-fragment": "error"
   },
   "settings": {
     "react": {
diff --git a/app/client/cypress/fixtures/formResetDsl.json b/app/client/cypress/fixtures/formResetDsl.json
index e45820cd8b..99048332fc 100644
--- a/app/client/cypress/fixtures/formResetDsl.json
+++ b/app/client/cypress/fixtures/formResetDsl.json
@@ -137,6 +137,27 @@
                 "parentId": "qrqizehc5b",
                 "widgetId": "672gf8vm2q",
                 "dynamicBindingPathList": []
+              },
+              {
+                "defaultOptionValue": "",
+                "dynamicBindingPathList": [],
+                "dynamicTriggerPathList": [],
+                "isLoading": false,
+                "isVisible": true,
+                "label": "",
+                "options": "[\n  {\n    \"label\": \"Option 1\",\n    \"value\": \"1\"\n  },\n  {\n    \"label\": \"Option 2\",\n    \"value\": \"2\"\n  },\n  {\n    \"label\": \"Option 3\",\n    \"value\": \"3\"\n  },\n  {\n    \"label\": \"Option 4\",\n    \"value\": \"4\"\n  },\n  {\n    \"label\": \"Option 5\",\n    \"value\": \"5\"\n  }\n]",
+                "parentId": "qrqizehc5b",
+                "parentColumnSpace": 71.5,
+                "parentRowSpace": 40,
+                "selectionType": "MULTI_SELECT",
+                "leftColumn": 6,
+                "rightColumn": 16,
+                "topRow": 9,
+                "bottomRow": 10,
+                "type": "DROP_DOWN_WIDGET",
+                "version": 1,
+                "widgetId": "dwh49bulj9",
+                "widgetName": "Dropdown1"
               }
             ],
             "blueprint": {
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_Table_Widget_API_Derived_Column_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_Table_Widget_API_Derived_Column_spec.js
index e6d76b3bc6..f39a3eb08b 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_Table_Widget_API_Derived_Column_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_Table_Widget_API_Derived_Column_spec.js
@@ -4,6 +4,7 @@ const pages = require("../../../../locators/Pages.json");
 const apiPage = require("../../../../locators/ApiEditor.json");
 const publishPage = require("../../../../locators/publishWidgetspage.json");
 const testdata = require("../../../../fixtures/testdata.json");
+const widgetsPage = require("../../../../locators/Widgets.json");
 
 describe("Test Create Api and Bind to Table widget", function() {
   before(() => {
@@ -41,6 +42,37 @@ describe("Test Create Api and Bind to Table widget", function() {
     cy.closePropertyPane();
   });
 
+  it("Check Image alignment is working as expected", function() {
+    cy.SearchEntityandOpen("Table1");
+    cy.editColumn("avatar");
+    cy.changeColumnType("Image");
+    cy.closePropertyPane();
+    cy.SearchEntityandOpen("Table1");
+    cy.get(widgetsPage.centerAlign)
+      .first()
+      .click({ force: true });
+    cy.closePropertyPane();
+    cy.get(`.t--widget-tablewidget .tbody .image-cell`)
+      .first()
+      .should("have.css", "background-position", "50% 50%");
+    cy.SearchEntityandOpen("Table1");
+    cy.get(widgetsPage.rightAlign)
+      .first()
+      .click({ force: true });
+    cy.closePropertyPane();
+    cy.get(`.t--widget-tablewidget .tbody .image-cell`)
+      .first()
+      .should("have.css", "background-position", "100% 50%");
+    cy.SearchEntityandOpen("Table1");
+    cy.get(widgetsPage.leftAlign)
+      .first()
+      .click({ force: true });
+    cy.closePropertyPane();
+    cy.get(`.t--widget-tablewidget .tbody .image-cell`)
+      .first()
+      .should("have.css", "background-position", "0% 50%");
+  });
+
   it("Update table json data and check the derived column values after update", function() {
     cy.SearchEntityandOpen("Table1");
     cy.tableColumnDataValidation("id");
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Dropdown_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Dropdown_spec.js
index 5c6d853449..140fe89090 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Dropdown_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Dropdown_spec.js
@@ -15,7 +15,6 @@ describe("Dropdown Widget Functionality", function() {
 
     cy.testJsontext("options", JSON.stringify(data.input));
     cy.testJsontext("defaultoption", "{{ undefined }}");
-
     cy.get(formWidgetsPage.dropdownWidget)
       .find(widgetLocators.dropdownSingleSelect)
       .click({ force: true });
@@ -27,6 +26,13 @@ describe("Dropdown Widget Functionality", function() {
       .find(widgetLocators.defaultSingleSelectValue)
       .should("have.text", "Option 3");
   });
+  it("Selects value with enter in default value", () => {
+    // cy.openPropertyPane("dropdownwidget");
+    cy.testJsontext("defaultoption", "3\n");
+    cy.get(formWidgetsPage.dropdownWidget)
+      .find(widgetLocators.defaultSingleSelectValue)
+      .should("have.text", "Option 3");
+  });
   it("Dropdown Widget Functionality", function() {
     cy.widgetText(
       "lock",
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/FormReset_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/FormReset_spec.js
index 541586379a..837c8813e8 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/FormReset_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/FormReset_spec.js
@@ -12,6 +12,12 @@ describe("Form reset functionality", function() {
       .click()
       .should("have.class", "selected-row");
 
+    cy.get(".t--draggable-dropdownwidget").click({ force: true });
+    cy.get(".t--draggable-dropdownwidget").type("Option");
+    cy.dropdownDynamic("Option 1");
+    cy.dropdownDynamic("Option 2");
+    cy.dropdownDynamic("Option 3");
+
     cy.get(widgetsPage.inputWidget + " " + "input")
       .invoke("attr", "value")
       .should("contain", "lindsay.ferguson@reqres.in");
@@ -26,6 +32,12 @@ describe("Form reset functionality", function() {
       .eq(2)
       .should("not.have.class", "selected-row");
 
+    cy.get(".t-draggable-dropdownwidget .bp3-tag-input-values .bp3-tag").should(
+      ($span) => {
+        expect($span).to.have.length(0);
+      },
+    );
+
     cy.get(widgetsPage.inputWidget + " " + "input")
       .invoke("attr", "value")
       .should("not.contain", "lindsay.ferguson@reqres.in");
diff --git a/app/client/src/AppErrorBoundry.tsx b/app/client/src/AppErrorBoundry.tsx
index 776993508a..172c4aab80 100644
--- a/app/client/src/AppErrorBoundry.tsx
+++ b/app/client/src/AppErrorBoundry.tsx
@@ -51,7 +51,7 @@ class AppErrorBoundary extends Component {
     if (this.state.hasError) {
       return (
         <Wrapper>
-          <img src={AppCrashImage} alt="App crashed" />
+          <img alt="App crashed" src={AppCrashImage} />
           <div>
             <p className="bold-text">Oops! Something went wrong</p>
             <p>
diff --git a/app/client/src/AppRouter.tsx b/app/client/src/AppRouter.tsx
index 9d91296f6e..1ba02d5b77 100644
--- a/app/client/src/AppRouter.tsx
+++ b/app/client/src/AppRouter.tsx
@@ -90,24 +90,24 @@ class AppRouter extends React.Component<any, any> {
             <>
               <AppHeader />
               <Switch>
-                <SentryRoute exact path={BASE_URL} component={LandingScreen} />
+                <SentryRoute component={LandingScreen} exact path={BASE_URL} />
                 <Redirect exact from={BASE_LOGIN_URL} to={AUTH_LOGIN_URL} />
                 <Redirect exact from={BASE_SIGNUP_URL} to={SIGN_UP_URL} />
-                <SentryRoute path={ORG_URL} component={OrganizationLoader} />
-                <SentryRoute exact path={USERS_URL} component={Users} />
-                <SentryRoute path={USER_AUTH_URL} component={UserAuth} />
+                <SentryRoute component={OrganizationLoader} path={ORG_URL} />
+                <SentryRoute component={Users} exact path={USERS_URL} />
+                <SentryRoute component={UserAuth} path={USER_AUTH_URL} />
                 <SentryRoute
+                  component={ApplicationListLoader}
                   exact
                   path={APPLICATIONS_URL}
-                  component={ApplicationListLoader}
                 />
-                <SentryRoute path={BUILDER_URL} component={EditorLoader} />
+                <SentryRoute component={EditorLoader} path={BUILDER_URL} />
                 <SentryRoute
-                  path={getApplicationViewerPageURL()}
                   component={AppViewerLoader}
+                  path={getApplicationViewerPageURL()}
                 />
-                <SentryRoute exact path={PROFILE} component={UserProfile} />
-                <SentryRoute path={APP_VIEW_URL} component={AppViewerLoader} />
+                <SentryRoute component={UserProfile} exact path={PROFILE} />
+                <SentryRoute component={AppViewerLoader} path={APP_VIEW_URL} />
                 <SentryRoute component={PageNotFound} />
               </Switch>
             </>
diff --git a/app/client/src/LandingScreen.tsx b/app/client/src/LandingScreen.tsx
index 3a3457aee1..8b456959a9 100755
--- a/app/client/src/LandingScreen.tsx
+++ b/app/client/src/LandingScreen.tsx
@@ -13,7 +13,7 @@ type Props = {
   authError: string;
 };
 
-const LandingScreen = (props: Props) => {
+function LandingScreen(props: Props) {
   if (props.user && window.location.pathname === BASE_URL) {
     if (props.user.email === ANONYMOUS_USERNAME) {
       return <Redirect to={AUTH_LOGIN_URL} />;
@@ -25,7 +25,7 @@ const LandingScreen = (props: Props) => {
     return <ServerUnavailable />;
   }
   return <PageLoadingBar />;
-};
+}
 
 const mapStateToProps = (state: AppState) => ({
   user: getCurrentUser(state),
diff --git a/app/client/src/components/ads/AppIcon.tsx b/app/client/src/components/ads/AppIcon.tsx
index adb38cc047..bfc56042cd 100644
--- a/app/client/src/components/ads/AppIcon.tsx
+++ b/app/client/src/components/ads/AppIcon.tsx
@@ -223,7 +223,7 @@ export type AppIconProps = CommonComponentProps & {
   name: AppIconName;
 };
 
-const AppIcon = (props: AppIconProps) => {
+function AppIcon(props: AppIconProps) {
   const styledProps = useMemo(() => appSizeHandler(props.size || Size.medium), [
     props,
   ]);
@@ -484,6 +484,6 @@ const AppIcon = (props: AppIconProps) => {
       {returnIcon}
     </IconWrapper>
   ) : null;
-};
+}
 
 export default AppIcon;
diff --git a/app/client/src/components/ads/Button.tsx b/app/client/src/components/ads/Button.tsx
index 584a257d82..ea97229575 100644
--- a/app/client/src/components/ads/Button.tsx
+++ b/app/client/src/components/ads/Button.tsx
@@ -376,13 +376,13 @@ const IconSizeProp = (size?: Size) => {
   return size ? sizeMapping[size] : IconSize.SMALL;
 };
 
-const TextLoadingState = ({ text }: { text?: string }) => (
-  <VisibilityWrapper>{text}</VisibilityWrapper>
-);
+function TextLoadingState({ text }: { text?: string }) {
+  return <VisibilityWrapper>{text}</VisibilityWrapper>;
+}
 
-const IconLoadingState = ({ size, icon }: { size?: Size; icon?: IconName }) => (
-  <Icon name={icon} size={IconSizeProp(size)} invisible />
-);
+function IconLoadingState({ size, icon }: { size?: Size; icon?: IconName }) {
+  return <Icon invisible name={icon} size={IconSizeProp(size)} />;
+}
 
 const getIconContent = (props: ButtonProps) =>
   props.icon ? (
@@ -410,39 +410,44 @@ const getButtonContent = (props: ButtonProps) => (
   </>
 );
 
-const ButtonComponent = (props: ButtonProps) => (
-  <StyledButton
-    className={props.className}
-    data-cy={props.cypressSelector}
-    {...props}
-    onClick={(e: React.MouseEvent<HTMLElement>) =>
-      props.onClick && props.onClick(e)
-    }
-  >
-    {getButtonContent(props)}
-  </StyledButton>
-);
+function ButtonComponent(props: ButtonProps) {
+  return (
+    <StyledButton
+      className={props.className}
+      data-cy={props.cypressSelector}
+      {...props}
+      onClick={(e: React.MouseEvent<HTMLElement>) =>
+        props.onClick && props.onClick(e)
+      }
+    >
+      {getButtonContent(props)}
+    </StyledButton>
+  );
+}
 
-const LinkButtonComponent = (props: ButtonProps) => (
-  <StyledLinkButton
-    href={props.href}
-    className={props.className}
-    data-cy={props.cypressSelector}
-    {...props}
-    onClick={(e: React.MouseEvent<HTMLElement>) =>
-      props.onClick && props.onClick(e)
-    }
-  >
-    {getButtonContent(props)}
-  </StyledLinkButton>
-);
+function LinkButtonComponent(props: ButtonProps) {
+  return (
+    <StyledLinkButton
+      className={props.className}
+      data-cy={props.cypressSelector}
+      href={props.href}
+      {...props}
+      onClick={(e: React.MouseEvent<HTMLElement>) =>
+        props.onClick && props.onClick(e)
+      }
+    >
+      {getButtonContent(props)}
+    </StyledLinkButton>
+  );
+}
 
-const Button = (props: ButtonProps) =>
-  props.tag === "button" ? (
+function Button(props: ButtonProps) {
+  return props.tag === "button" ? (
     <ButtonComponent {...props} />
   ) : (
     <LinkButtonComponent {...props} />
   );
+}
 
 export default Button;
 
diff --git a/app/client/src/components/ads/ButtonTabComponent.tsx b/app/client/src/components/ads/ButtonTabComponent.tsx
index 4fd11e6b73..4fe5bbe03f 100644
--- a/app/client/src/components/ads/ButtonTabComponent.tsx
+++ b/app/client/src/components/ads/ButtonTabComponent.tsx
@@ -41,7 +41,7 @@ interface ButtonTabComponentProps {
   selectButton: (value: string) => void;
 }
 
-const ButtonTabComponent = (props: ButtonTabComponentProps) => {
+function ButtonTabComponent(props: ButtonTabComponentProps) {
   return (
     <FlexWrapper>
       {props.options.map((option: ButtonTabOption, index: number) => {
@@ -50,17 +50,17 @@ const ButtonTabComponent = (props: ButtonTabComponentProps) => {
         const isSelected = props.values.includes(option.value);
         return (
           <ItemWrapper
-            key={index}
-            selected={isSelected}
-            onClick={() => props.selectButton(option.value)}
             className={`t--button-tab-${option.value}`}
+            key={index}
+            onClick={() => props.selectButton(option.value)}
+            selected={isSelected}
           >
-            <ControlIcon width={24} height={24} />
+            <ControlIcon height={24} width={24} />
           </ItemWrapper>
         );
       })}
     </FlexWrapper>
   );
-};
+}
 
 export default ButtonTabComponent;
diff --git a/app/client/src/components/ads/Callout.tsx b/app/client/src/components/ads/Callout.tsx
index a1eeabb6e8..2df99e39a2 100644
--- a/app/client/src/components/ads/Callout.tsx
+++ b/app/client/src/components/ads/Callout.tsx
@@ -73,14 +73,14 @@ Callout.defaultProps = {
 
 function Callout(props: CalloutProps) {
   return (
-    <CalloutContainer variant={props.variant || Variant.info} fill={props.fill}>
+    <CalloutContainer fill={props.fill} variant={props.variant || Variant.info}>
       {props.text && props.variant !== Variant.info ? (
         <Icon name={props.variant} size={IconSize.MEDIUM} />
       ) : null}
       <Text type={TextType.P2}>{props.text}</Text>
       {props.label ? props.label : null}
       {props.closeButton ? (
-        <Label variant={props.variant || Variant.info} onClick={props.onClose}>
+        <Label onClick={props.onClose} variant={props.variant || Variant.info}>
           <Icon name="close-modal" />
         </Label>
       ) : null}
diff --git a/app/client/src/components/ads/Checkbox.tsx b/app/client/src/components/ads/Checkbox.tsx
index 295944f6c7..a8ab84d1ae 100644
--- a/app/client/src/components/ads/Checkbox.tsx
+++ b/app/client/src/components/ads/Checkbox.tsx
@@ -106,7 +106,7 @@ const useUpdate = (intitialValue?: boolean) => {
   return [checked, setChecked] as const;
 };
 
-const Checkbox = (props: CheckboxProps) => {
+function Checkbox(props: CheckboxProps) {
   const [checked, setChecked] = useUpdate(props.isDefaultChecked);
 
   const onChangeHandler = (checked: boolean) => {
@@ -121,20 +121,20 @@ const Checkbox = (props: CheckboxProps) => {
         {props.info ? <Text type={TextType.P3}>{props.info}</Text> : null}
       </LabelContainer>
       <input
-        type="checkbox"
-        disabled={props.disabled}
         checked={checked}
+        disabled={props.disabled}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
           onChangeHandler(e.target.checked)
         }
+        type="checkbox"
       />
       <Checkmark
         disabled={props.disabled}
-        isChecked={checked}
         info={props.info}
+        isChecked={checked}
       />
     </StyledCheckbox>
   );
-};
+}
 
 export default Checkbox;
diff --git a/app/client/src/components/ads/ColorPickerComponent.tsx b/app/client/src/components/ads/ColorPickerComponent.tsx
index f7cd8bd8f8..83deb47adc 100644
--- a/app/client/src/components/ads/ColorPickerComponent.tsx
+++ b/app/client/src/components/ads/ColorPickerComponent.tsx
@@ -93,14 +93,14 @@ const EmptyColorIconWrapper = styled.div`
   }
 `;
 
-const ColorBoard = (props: ColorBoardProps) => {
+function ColorBoard(props: ColorBoardProps) {
   return (
     <ColorsWrapper>
       {defaultColors.map((color: string, index: number) => (
         <ColorTab
-          key={index}
-          color={color}
           className={Classes.POPOVER_DISMISS}
+          color={color}
+          key={index}
           onClick={() => props.selectColor(color)}
         >
           {props.selectedColor === color && <CheckedIcon />}
@@ -113,7 +113,7 @@ const ColorBoard = (props: ColorBoardProps) => {
       </EmptyColorIconWrapper>
     </ColorsWrapper>
   );
-};
+}
 
 const NoColorIconWrapper = styled.div`
   position: absolute;
@@ -148,7 +148,7 @@ interface ColorPickerProps {
   changeColor: (color: string) => void;
 }
 
-const ColorPickerComponent = (props: ColorPickerProps) => {
+function ColorPickerComponent(props: ColorPickerProps) {
   const [color, setColor] = React.useState(props.color);
   const debouncedOnChange = React.useCallback(
     debounce(props.changeColor, 500),
@@ -161,16 +161,16 @@ const ColorPickerComponent = (props: ColorPickerProps) => {
   };
   return (
     <Popover
-      minimal
-      usePortal
       enforceFocus={false}
       interactionKind={PopoverInteractionKind.CLICK}
-      position={Position.BOTTOM}
+      minimal
       modifiers={{
         offset: {
           offset: "0, 24px",
         },
       }}
+      position={Position.BOTTOM}
+      usePortal
     >
       <StyledInputGroup
         leftIcon={
@@ -189,14 +189,14 @@ const ColorPickerComponent = (props: ColorPickerProps) => {
         value={color}
       />
       <ColorBoard
-        selectedColor={color}
         selectColor={(color) => {
           setColor(color);
           props.changeColor(color);
         }}
+        selectedColor={color}
       />
     </Popover>
   );
-};
+}
 
 export default ColorPickerComponent;
diff --git a/app/client/src/components/ads/ColorSelector.tsx b/app/client/src/components/ads/ColorSelector.tsx
index 6153bc06f9..3a7ee96504 100644
--- a/app/client/src/components/ads/ColorSelector.tsx
+++ b/app/client/src/components/ads/ColorSelector.tsx
@@ -56,7 +56,7 @@ const ColorBox = styled.div<{ selected: string; color: string }>`
   `}
 `;
 
-const ColorSelector = (props: ColorSelectorProps) => {
+function ColorSelector(props: ColorSelectorProps) {
   const [selected, setSelected] = useState<string>(
     props.defaultValue || props.colorPalette[0],
   );
@@ -68,28 +68,28 @@ const ColorSelector = (props: ColorSelectorProps) => {
   }, [props.defaultValue]);
 
   return (
-    <Palette fill={props.fill} data-cy={props.cypressSelector}>
+    <Palette data-cy={props.cypressSelector} fill={props.fill}>
       {props.colorPalette.map((hex: string, index: number) => {
         return (
           <ColorBox
-            key={index}
-            selected={selected}
+            className={
+              selected === hex ? "t--color-selected" : "t--color-not-selected"
+            }
             color={hex}
+            key={index}
             onClick={() => {
               if (selected !== hex) {
                 setSelected(hex);
                 props.onSelect && props.onSelect(hex);
               }
             }}
-            className={
-              selected === hex ? "t--color-selected" : "t--color-not-selected"
-            }
+            selected={selected}
           />
         );
       })}
     </Palette>
   );
-};
+}
 
 ColorSelector.defaultProps = {
   fill: false,
diff --git a/app/client/src/components/ads/CopyToClipBoard.tsx b/app/client/src/components/ads/CopyToClipBoard.tsx
index e6ff4633a3..f6bc79a55e 100644
--- a/app/client/src/components/ads/CopyToClipBoard.tsx
+++ b/app/client/src/components/ads/CopyToClipBoard.tsx
@@ -15,7 +15,7 @@ const Wrapper = styled.div`
   }
 `;
 
-const CopyToClipboard = (props: any) => {
+function CopyToClipboard(props: any) {
   const { copyText } = props;
   const copyURLInput = createRef<HTMLInputElement>();
   const [isCopied, setIsCopied] = useState(false);
@@ -36,25 +36,25 @@ const CopyToClipboard = (props: any) => {
   return (
     <Wrapper>
       <TextInput
+        defaultValue={copyText}
         fill
-        ref={copyURLInput}
-        readOnly
         onChange={() => {
           selectText();
         }}
-        defaultValue={copyText}
+        readOnly
+        ref={copyURLInput}
       />
 
       <Button
-        text={isCopied ? "Copied" : "Copy"}
         category={Category.tertiary}
         onClick={() => {
           copyToClipboard(copyText);
         }}
         size={Size.large}
+        text={isCopied ? "Copied" : "Copy"}
       />
     </Wrapper>
   );
-};
+}
 
 export default CopyToClipboard;
diff --git a/app/client/src/components/ads/DatePickerComponent.tsx b/app/client/src/components/ads/DatePickerComponent.tsx
index b455082ea4..4cee86022e 100644
--- a/app/client/src/components/ads/DatePickerComponent.tsx
+++ b/app/client/src/components/ads/DatePickerComponent.tsx
@@ -100,25 +100,25 @@ interface DatePickerComponentProps {
   parseDate?: (dateStr: string) => Date;
 }
 
-const DatePickerComponent = (props: DatePickerComponentProps) => {
+function DatePickerComponent(props: DatePickerComponentProps) {
   return (
     <StyledDateInput
+      className={Classes.DATE_PICKER_OVARLAY}
+      closeOnSelection={props.closeOnSelection}
+      formatDate={props.formatDate}
+      highlightCurrentDay={props.highlightCurrentDay}
       maxDate={props.maxDate}
       minDate={props.minDate}
+      onChange={props.onChange}
+      parseDate={props.parseDate}
       placeholder={props.placeholder}
+      popoverProps={{ usePortal: true }}
       showActionsBar={props.showActionsBar}
       timePrecision={props.timePrecision}
-      closeOnSelection={props.closeOnSelection}
       value={props.value}
-      highlightCurrentDay={props.highlightCurrentDay}
-      onChange={props.onChange}
-      formatDate={props.formatDate}
-      parseDate={props.parseDate}
-      className={Classes.DATE_PICKER_OVARLAY}
-      popoverProps={{ usePortal: true }}
     />
   );
-};
+}
 
 DatePickerComponent.defaultProps = {
   highlightCurrentDay: true,
diff --git a/app/client/src/components/ads/DialogComponent.tsx b/app/client/src/components/ads/DialogComponent.tsx
index 698b996b7c..8dd7df4533 100644
--- a/app/client/src/components/ads/DialogComponent.tsx
+++ b/app/client/src/components/ads/DialogComponent.tsx
@@ -93,7 +93,7 @@ type DialogComponentProps = {
   className?: string;
 };
 
-export const DialogComponent = (props: DialogComponentProps) => {
+export function DialogComponent(props: DialogComponentProps) {
   const [isOpen, setIsOpen] = useState(!!props.isOpen);
 
   const onClose = () => {
@@ -107,7 +107,7 @@ export const DialogComponent = (props: DialogComponentProps) => {
   const getHeader = props.getHeader;
 
   return (
-    <React.Fragment>
+    <>
       <TriggerWrapper
         className="ads-dialog-trigger"
         onClick={() => {
@@ -118,23 +118,23 @@ export const DialogComponent = (props: DialogComponentProps) => {
         {props.trigger}
       </TriggerWrapper>
       <StyledDialog
-        canOutsideClickClose={!!props.canOutsideClickClose}
         canEscapeKeyClose={!!props.canEscapeKeyClose}
-        title={props.title}
-        onClose={onClose}
-        isOpen={isOpen}
-        width={props.width}
-        setMaxWidth={props.setMaxWidth}
-        maxHeight={props.maxHeight}
-        onOpening={props.onOpening}
-        showHeaderUnderline={props.showHeaderUnderline}
+        canOutsideClickClose={!!props.canOutsideClickClose}
         className={props.className}
+        isOpen={isOpen}
+        maxHeight={props.maxHeight}
+        onClose={onClose}
+        onOpening={props.onOpening}
+        setMaxWidth={props.setMaxWidth}
+        showHeaderUnderline={props.showHeaderUnderline}
+        title={props.title}
+        width={props.width}
       >
         {getHeader && getHeader()}
         <div className={Classes.DIALOG_BODY}>{props.children}</div>
       </StyledDialog>
-    </React.Fragment>
+    </>
   );
-};
+}
 
 export default DialogComponent;
diff --git a/app/client/src/components/ads/DraggableList.tsx b/app/client/src/components/ads/DraggableList.tsx
index 34f1f79428..79a03ed66d 100644
--- a/app/client/src/components/ads/DraggableList.tsx
+++ b/app/client/src/components/ads/DraggableList.tsx
@@ -59,7 +59,7 @@ const DraggableListWrapper = styled.div`
   }
 `;
 
-const DraggableList = ({ items, ItemRenderer, onUpdate, itemHeight }: any) => {
+function DraggableList({ items, ItemRenderer, onUpdate, itemHeight }: any) {
   // order of items in the list
   const order = useRef<any>(items.map((_: any, index: any) => index));
 
@@ -111,12 +111,12 @@ const DraggableList = ({ items, ItemRenderer, onUpdate, itemHeight }: any) => {
   });
   return (
     <DraggableListWrapper
+      className="content"
       onMouseDown={() => {
         // set events to null to stop other parent draggable elements execution(ex: Property pane)
         document.onmouseup = null;
         document.onmousemove = null;
       }}
-      className="content"
       style={{ height: items.length * itemHeight }}
     >
       {springs.map(({ zIndex, y, scale }, i) => (
@@ -134,13 +134,13 @@ const DraggableList = ({ items, ItemRenderer, onUpdate, itemHeight }: any) => {
           }}
         >
           <div>
-            <ItemRenderer item={items[i]} index={i} />
+            <ItemRenderer index={i} item={items[i]} />
           </div>
         </animated.div>
       ))}
     </DraggableListWrapper>
   );
-};
+}
 DraggableList.displayName = "DraggableList";
 
 export default DraggableList;
diff --git a/app/client/src/components/ads/Dropdown.tsx b/app/client/src/components/ads/Dropdown.tsx
index 004196265b..77e7ce9191 100644
--- a/app/client/src/components/ads/Dropdown.tsx
+++ b/app/client/src/components/ads/Dropdown.tsx
@@ -185,22 +185,24 @@ const SelectedIcon = styled(Icon)`
   }
 `;
 
-const DefaultDropDownValueNode = ({
+function DefaultDropDownValueNode({
   selected,
   showLabelOnly,
 }: {
   selected: DropdownOption;
   showLabelOnly?: boolean;
-}) => (
-  <SelectedDropDownHolder>
-    {selected.icon ? (
-      <SelectedIcon name={selected.icon} size={IconSize.XXS} />
-    ) : null}
-    <Text type={TextType.P1}>
-      {showLabelOnly ? selected.label : selected.value}
-    </Text>
-  </SelectedDropDownHolder>
-);
+}) {
+  return (
+    <SelectedDropDownHolder>
+      {selected.icon ? (
+        <SelectedIcon name={selected.icon} size={IconSize.XXS} />
+      ) : null}
+      <Text type={TextType.P1}>
+        {showLabelOnly ? selected.label : selected.value}
+      </Text>
+    </SelectedDropDownHolder>
+  );
+}
 
 export default function Dropdown(props: DropdownProps) {
   const {
@@ -226,25 +228,25 @@ export default function Dropdown(props: DropdownProps) {
   );
   return (
     <DropdownContainer
-      tabIndex={0}
       data-cy={props.cypressSelector}
-      width={props.width || "260px"}
       height={props.height || "38px"}
+      tabIndex={0}
+      width={props.width || "260px"}
     >
       <Popover
+        boundary="scrollParent"
+        isOpen={isOpen && !props.disabled}
         minimal
+        onInteraction={(state) => setIsOpen(state)}
         popoverClassName={props.className}
         position={Position.BOTTOM_LEFT}
-        isOpen={isOpen && !props.disabled}
-        onInteraction={(state) => setIsOpen(state)}
-        boundary="scrollParent"
       >
         <Selected
-          isOpen={isOpen}
-          disabled={props.disabled}
-          onClick={() => setIsOpen(!isOpen)}
           className={props.className}
+          disabled={props.disabled}
           height={props.height || "38px"}
+          isOpen={isOpen}
+          onClick={() => setIsOpen(!isOpen)}
         >
           <SelectedValueNode
             selected={selected}
@@ -256,15 +258,15 @@ export default function Dropdown(props: DropdownProps) {
           {props.options.map((option: DropdownOption, index: number) => {
             return (
               <OptionWrapper
-                key={index}
-                selected={selected.value === option.value}
-                onClick={() => optionClickHandler(option)}
                 className="t--dropdown-option"
+                key={index}
+                onClick={() => optionClickHandler(option)}
+                selected={selected.value === option.value}
               >
                 {option.icon ? (
                   <SelectedIcon
-                    name={option.icon}
                     fillColor={option?.iconColor}
+                    name={option.icon}
                     size={option.iconSize || IconSize.XXS}
                   />
                 ) : null}
diff --git a/app/client/src/components/ads/EditableText.tsx b/app/client/src/components/ads/EditableText.tsx
index c1f0bb4843..bca0528165 100644
--- a/app/client/src/components/ads/EditableText.tsx
+++ b/app/client/src/components/ads/EditableText.tsx
@@ -152,7 +152,7 @@ const IconWrapper = styled.div`
   justify-content: flex-end;
 `;
 
-export const EditableText = (props: EditableTextProps) => {
+export function EditableText(props: EditableTextProps) {
   const {
     onBlur,
     onTextChanged,
@@ -268,36 +268,36 @@ export const EditableText = (props: EditableTextProps) => {
   return (
     <EditableTextWrapper
       filled={!!props.fill}
-      onMouseEnter={nonEditMode}
-      onDoubleClick={
-        props.editInteractionKind === EditInteractionKind.DOUBLE
-          ? editMode
-          : noop
-      }
       onClick={
         props.editInteractionKind === EditInteractionKind.SINGLE
           ? editMode
           : noop
       }
+      onDoubleClick={
+        props.editInteractionKind === EditInteractionKind.DOUBLE
+          ? editMode
+          : noop
+      }
+      onMouseEnter={nonEditMode}
     >
       <TextContainer
+        bgColor={bgColor}
         className="editable-text-container"
         data-cy={props.cypressSelector}
-        isInvalid={!!isInvalid}
         isEditing={isEditing}
-        bgColor={bgColor}
+        isInvalid={!!isInvalid}
         underline={props.underline}
       >
         <BlueprintEditableText
+          className={props.className}
           disabled={!isEditing}
           isEditing={isEditing}
+          onCancel={onConfirm}
           onChange={onInputchange}
           onConfirm={onConfirm}
-          value={value}
-          selectAllOnFocus
           placeholder={props.placeholder || defaultValue}
-          className={props.className}
-          onCancel={onConfirm}
+          selectAllOnFocus
+          value={value}
         />
 
         {savingState === SavingState.STARTED ? (
@@ -317,6 +317,6 @@ export const EditableText = (props: EditableTextProps) => {
       ) : null}
     </EditableTextWrapper>
   );
-};
+}
 
 export default EditableText;
diff --git a/app/client/src/components/ads/EditableTextWrapper.tsx b/app/client/src/components/ads/EditableTextWrapper.tsx
index 62713190c1..5fe58511fd 100644
--- a/app/client/src/components/ads/EditableTextWrapper.tsx
+++ b/app/client/src/components/ads/EditableTextWrapper.tsx
@@ -86,23 +86,16 @@ export default function EditableTextWrapper(props: EditableTextWrapperProps) {
   return (
     <Container
       isEditing={isEditing}
-      savingState={props.savingState}
       isInvalid={isValid}
+      savingState={props.savingState}
     >
       <EditableText
+        className={props.className}
         defaultValue={props.defaultValue}
         editInteractionKind={props.editInteractionKind}
-        placeholder={props.placeholder}
+        fill={!!props.fill}
         hideEditIcon={props.hideEditIcon}
         isEditingDefault={props.isNewApp}
-        savingState={props.savingState}
-        fill={!!props.fill}
-        onBlur={(value) => {
-          setIsEditing(false);
-          props.onBlur && props.onBlur(value);
-        }}
-        className={props.className}
-        onTextChanged={() => setIsEditing(true)}
         isInvalid={(value: string) => {
           setIsEditing(true);
           if (props.isInvalid) {
@@ -118,6 +111,13 @@ export default function EditableTextWrapper(props: EditableTextWrapperProps) {
             return false;
           }
         }}
+        onBlur={(value) => {
+          setIsEditing(false);
+          props.onBlur && props.onBlur(value);
+        }}
+        onTextChanged={() => setIsEditing(true)}
+        placeholder={props.placeholder}
+        savingState={props.savingState}
       />
     </Container>
   );
diff --git a/app/client/src/components/ads/FilePicker.tsx b/app/client/src/components/ads/FilePicker.tsx
index 9ca21e2956..1d5d6936b4 100644
--- a/app/client/src/components/ads/FilePicker.tsx
+++ b/app/client/src/components/ads/FilePicker.tsx
@@ -158,7 +158,7 @@ export function CloudinaryUploader(
     });
 }
 
-const FilePickerComponent = (props: FilePickerProps) => {
+function FilePickerComponent(props: FilePickerProps) {
   const { logoUploadError } = props;
   const [fileInfo, setFileInfo] = useState<{ name: string; size: number }>({
     name: "",
@@ -293,64 +293,64 @@ const FilePickerComponent = (props: FilePickerProps) => {
 
   return (
     <ContainerDiv
-      isActive={isActive}
       canDrop={canDrop}
+      isActive={isActive}
       isUploaded={isUploaded}
       ref={drop}
     >
-      <div ref={bgRef} className="bg-image">
+      <div className="bg-image" ref={bgRef}>
         <div className="button-wrapper" ref={fileContainerRef}>
           <UploadIcon />
-          <Text type={TextType.P2} className="drag-drop-text">
+          <Text className="drag-drop-text" type={TextType.P2}>
             Drag & Drop files to upload or
           </Text>
           <form>
             <input
-              type="file"
+              accept=".jpeg,.png,.svg"
               id="fileInput"
               multiple={false}
-              ref={inputRef}
-              accept=".jpeg,.png,.svg"
-              value={""}
               onChange={(el) => handleFileUpload(el.target.files)}
+              ref={inputRef}
+              type="file"
+              value={""}
             />
             <Button
-              text="Browse"
               category={Category.tertiary}
-              size={Size.medium}
               onClick={(el) => ButtonClick(el)}
+              size={Size.medium}
+              text="Browse"
             />
           </form>
         </div>
-        <div className="file-description" ref={fileDescRef} id="fileDesc">
+        <div className="file-description" id="fileDesc" ref={fileDescRef}>
           <div className="file-spec">
             <Text type={TextType.H6}>{fileInfo.name}</Text>
             <Text type={TextType.H6}>{fileInfo.size}KB</Text>
           </div>
           <div className="progress-container">
-            <div className="progress-inner" ref={progressRef}></div>
+            <div className="progress-inner" ref={progressRef} />
           </div>
         </div>
       </div>
       <div className="remove-button">
         <Button
-          text="remove"
-          icon="delete"
-          size={Size.medium}
           category={Category.tertiary}
+          icon="delete"
           onClick={() => removeFile()}
+          size={Size.medium}
+          text="remove"
         />
       </div>
     </ContainerDiv>
   );
-};
+}
 
-const FilePicker = (props: FilePickerProps) => {
+function FilePicker(props: FilePickerProps) {
   return (
     <DndProvider backend={HTML5Backend}>
       <FilePickerComponent {...props} />
     </DndProvider>
   );
-};
+}
 
 export default FilePicker;
diff --git a/app/client/src/components/ads/GifPlayerComponent.tsx b/app/client/src/components/ads/GifPlayerComponent.tsx
index abd58e55af..3074ee7e0d 100644
--- a/app/client/src/components/ads/GifPlayerComponent.tsx
+++ b/app/client/src/components/ads/GifPlayerComponent.tsx
@@ -52,24 +52,20 @@ const Overlay = styled.div`
   transition: 0.5s ease;
 `;
 
-const GifPlayerComponent = (props: GifPlayerProps) => {
+function GifPlayerComponent(props: GifPlayerProps) {
   const [startGif, setStartGif] = useState(false);
-  return (
-    <React.Fragment>
-      {!startGif ? (
-        <ThumnailContainer onClick={() => setStartGif(!startGif)}>
-          <Overlay />
-          <img src={props.thumbnail} />
-          <PlayButton>
-            <Icon name="play" size={IconSize.XXXL} />
-            <Text type={TextType.P3}>Click to play</Text>
-          </PlayButton>
-        </ThumnailContainer>
-      ) : (
-        <img src={props.gif} />
-      )}
-    </React.Fragment>
+  return !startGif ? (
+    <ThumnailContainer onClick={() => setStartGif(!startGif)}>
+      <Overlay />
+      <img src={props.thumbnail} />
+      <PlayButton>
+        <Icon name="play" size={IconSize.XXXL} />
+        <Text type={TextType.P3}>Click to play</Text>
+      </PlayButton>
+    </ThumnailContainer>
+  ) : (
+    <img src={props.gif} />
   );
-};
+}
 
 export default GifPlayerComponent;
diff --git a/app/client/src/components/ads/Icon.tsx b/app/client/src/components/ads/Icon.tsx
index ac3a081541..d1e7283cab 100644
--- a/app/client/src/components/ads/Icon.tsx
+++ b/app/client/src/components/ads/Icon.tsx
@@ -364,7 +364,7 @@ const Icon = forwardRef(
       case "PARAGRAPH":
       case "PARAGRAPH_TWO":
         const ControlIcon = ControlIcons[props.name];
-        returnIcon = <ControlIcon width={24} height={24} />;
+        returnIcon = <ControlIcon height={24} width={24} />;
         break;
 
       default:
diff --git a/app/client/src/components/ads/IconSelector.tsx b/app/client/src/components/ads/IconSelector.tsx
index e71b7f6317..61b0632d26 100644
--- a/app/client/src/components/ads/IconSelector.tsx
+++ b/app/client/src/components/ads/IconSelector.tsx
@@ -58,7 +58,7 @@ const IconBox = styled.div<{ selectedColor?: string }>`
       : null};
 `;
 
-const IconSelector = (props: IconSelectorProps) => {
+function IconSelector(props: IconSelectorProps) {
   const iconRef = useRef<HTMLDivElement>(null);
   const [selected, setSelected] = useState<AppIconName>(firstSelectedIcon());
   const iconPaletteRef = React.createRef<HTMLDivElement>();
@@ -87,8 +87,8 @@ const IconSelector = (props: IconSelectorProps) => {
 
   return (
     <IconPalette
-      fill={props.fill}
       data-cy={props.cypressSelector}
+      fill={props.fill}
       ref={iconPaletteRef}
     >
       {props.iconPalette &&
@@ -96,19 +96,19 @@ const IconSelector = (props: IconSelectorProps) => {
           return (
             <IconBox
               {...(selected === iconName ? { ref: iconRef } : {})}
-              key={index}
-              selectedColor={selected === iconName ? props.selectedColor : ""}
               className={
                 selected === iconName
                   ? "t--icon-selected"
                   : "t--icon-not-selected"
               }
+              key={index}
               onClick={() => {
                 if (iconName !== selected) {
                   setSelected(iconName);
                   props.onSelect && props.onSelect(iconName);
                 }
               }}
+              selectedColor={selected === iconName ? props.selectedColor : ""}
             >
               <AppIcon name={iconName} size={Size.small} />
             </IconBox>
@@ -117,7 +117,7 @@ const IconSelector = (props: IconSelectorProps) => {
       <ScrollIndicator containerRef={iconPaletteRef} mode="DARK" />
     </IconPalette>
   );
-};
+}
 
 IconSelector.defaultProps = {
   fill: false,
diff --git a/app/client/src/components/ads/IconTabsComponent.tsx b/app/client/src/components/ads/IconTabsComponent.tsx
index 36dea7abc2..0ea7d8e293 100644
--- a/app/client/src/components/ads/IconTabsComponent.tsx
+++ b/app/client/src/components/ads/IconTabsComponent.tsx
@@ -38,7 +38,7 @@ interface IconTabsComponentProps {
   selectOption: (value: string) => void;
 }
 
-const IconTabsComponent = (props: IconTabsComponentProps) => {
+function IconTabsComponent(props: IconTabsComponentProps) {
   return (
     <FlexWrapper>
       {props.options.map((option: IconTabOption, index: number) => {
@@ -47,17 +47,17 @@ const IconTabsComponent = (props: IconTabsComponentProps) => {
         const isSelected = props.value === option.value;
         return (
           <ItemWrapper
-            key={index}
-            selected={isSelected}
-            onClick={() => props.selectOption(option.value)}
             className={`t--icon-tab-${option.value}`}
+            key={index}
+            onClick={() => props.selectOption(option.value)}
+            selected={isSelected}
           >
-            <ControlIcon width={24} height={24} />
+            <ControlIcon height={24} width={24} />
           </ItemWrapper>
         );
       })}
     </FlexWrapper>
   );
-};
+}
 
 export default IconTabsComponent;
diff --git a/app/client/src/components/ads/Menu.tsx b/app/client/src/components/ads/Menu.tsx
index 116dcfed15..dc3437cba9 100644
--- a/app/client/src/components/ads/Menu.tsx
+++ b/app/client/src/components/ads/Menu.tsx
@@ -24,18 +24,18 @@ const MenuOption = styled.div`
   font-family: ${(props) => props.theme.fonts[3]};
 `;
 
-const Menu = (props: MenuProps) => {
+function Menu(props: MenuProps) {
   return (
     <Popover
-      minimal
-      position={props.position || Position.BOTTOM}
-      onOpening={props.onOpening}
-      onClosing={props.onClosing}
       className={props.className}
-      portalClassName={props.className}
       data-cy={props.cypressSelector}
       disabled={props.disabled}
+      minimal
       modifiers={props.modifiers}
+      onClosing={props.onClosing}
+      onOpening={props.onOpening}
+      portalClassName={props.className}
+      position={props.position || Position.BOTTOM}
     >
       {props.target}
       <MenuWrapper>
@@ -46,6 +46,6 @@ const Menu = (props: MenuProps) => {
       </MenuWrapper>
     </Popover>
   );
-};
+}
 
 export default Menu;
diff --git a/app/client/src/components/ads/MenuItem.tsx b/app/client/src/components/ads/MenuItem.tsx
index cf0b12e76c..6bf988dfa9 100644
--- a/app/client/src/components/ads/MenuItem.tsx
+++ b/app/client/src/components/ads/MenuItem.tsx
@@ -90,7 +90,7 @@ const IconContainer = styled.span`
 const MenuItem = forwardRef(
   (props: MenuItemProps, ref: Ref<HTMLAnchorElement>) => {
     return props.ellipsize && props.text.length > props.ellipsize ? (
-      <TooltipComponent position={Position.BOTTOM} content={props.text}>
+      <TooltipComponent content={props.text} position={Position.BOTTOM}>
         <MenuItemContent ref={ref} {...props} />
       </TooltipComponent>
     ) : (
@@ -102,13 +102,13 @@ const MenuItemContent = forwardRef(
   (props: MenuItemProps, ref: Ref<HTMLAnchorElement>) => {
     return (
       <ItemRow
+        data-cy={props.cypressSelector}
+        disabled={props.disabled}
         href={props.href}
         onClick={props.onSelect}
-        disabled={props.disabled}
-        data-cy={props.cypressSelector}
-        type={props.type}
         ref={ref}
         selected={props.selected}
+        type={props.type}
       >
         <IconContainer className={props.className}>
           {props.icon ? <Icon name={props.icon} size={IconSize.LARGE} /> : null}
diff --git a/app/client/src/components/ads/MultiSwitch.tsx b/app/client/src/components/ads/MultiSwitch.tsx
index e1382bafff..1e08617841 100644
--- a/app/client/src/components/ads/MultiSwitch.tsx
+++ b/app/client/src/components/ads/MultiSwitch.tsx
@@ -55,10 +55,10 @@ export default function MultiSwitch<T>(props: MultiSwitchProps<T>) {
         {props.tabs.map((tab) => (
           <Tab
             key={tab.key}
-            selected={props.selected.value === tab.key}
             onClick={() => props.onSelect(tab.title)}
+            selected={props.selected.value === tab.key}
           >
-            <Text type={TextType.P3} case={Case.UPPERCASE}>
+            <Text case={Case.UPPERCASE} type={TextType.P3}>
               {tab.title}
             </Text>
           </Tab>
diff --git a/app/client/src/components/ads/MultiselectDropdown.tsx b/app/client/src/components/ads/MultiselectDropdown.tsx
index d4c258a1fd..57b3a9d6e2 100644
--- a/app/client/src/components/ads/MultiselectDropdown.tsx
+++ b/app/client/src/components/ads/MultiselectDropdown.tsx
@@ -166,7 +166,7 @@ type DropdownProps = CommonComponentProps & {
   selectAllQuantifier?: string;
 };
 
-const MultiSelectDropdown = (props: DropdownProps) => {
+function MultiSelectDropdown(props: DropdownProps) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [containerWidth, setContainerWidth] = useState<string>("0px");
 
@@ -229,23 +229,23 @@ const MultiSelectDropdown = (props: DropdownProps) => {
 
   return (
     <DropdownContainer
-      tabIndex={0}
       data-cy={props.cypressSelector}
       ref={measuredRef}
+      tabIndex={0}
       width={props.width}
     >
       <Popover
-        minimal
-        position={Position.TOP_LEFT}
-        isOpen={isOpen && !props.disabled}
-        onInteraction={(state) => setIsOpen(state)}
         boundary="scrollParent"
+        isOpen={isOpen && !props.disabled}
+        minimal
+        onInteraction={(state) => setIsOpen(state)}
+        position={Position.TOP_LEFT}
       >
         <Selected
-          isOpen={isOpen}
-          disabled={props.disabled}
-          onClick={() => setIsOpen(!isOpen)}
           className={props.className}
+          disabled={props.disabled}
+          isOpen={isOpen}
+          onClick={() => setIsOpen(!isOpen)}
         >
           <Text type={TextType.P1}>
             {props.selected.length
@@ -260,12 +260,12 @@ const MultiSelectDropdown = (props: DropdownProps) => {
           {props.options.map((option: DropdownOption, index: number) => {
             return (
               <MultiOptionWrapper
+                className="t--multi-dropdown-option"
                 key={index}
-                selected={isItemSelected(option.value)}
                 onClick={() => {
                   optionClickHandler(option.value as string);
                 }}
-                className="t--multi-dropdown-option"
+                selected={isItemSelected(option.value)}
               >
                 <SquareBox className={Classes.MULTI_SELECT_BOX} />
                 {option.icon ? (
@@ -288,6 +288,6 @@ const MultiSelectDropdown = (props: DropdownProps) => {
       </Popover>
     </DropdownContainer>
   );
-};
+}
 
 export default MultiSelectDropdown;
diff --git a/app/client/src/components/ads/Radio.tsx b/app/client/src/components/ads/Radio.tsx
index 8d21f828db..2d89c7e2d3 100644
--- a/app/client/src/components/ads/Radio.tsx
+++ b/app/client/src/components/ads/Radio.tsx
@@ -129,29 +129,29 @@ export default function RadioComponent(props: RadioProps) {
 
   return (
     <RadioGroup
-      data-cy={props.cypressSelector}
-      rows={props.rows}
-      columns={props.columns}
-      onChange={(e: any) => onChangeHandler(e.target.value)}
       className={props.className}
+      columns={props.columns}
+      data-cy={props.cypressSelector}
+      onChange={(e: any) => onChangeHandler(e.target.value)}
+      rows={props.rows}
     >
       {props.options.map((option: OptionProps, index: number) => (
         <Radio
-          key={index}
           columns={props.columns}
-          rows={props.rows}
           disabled={props.disabled || option.disabled}
+          key={index}
+          rows={props.rows}
         >
           {option.label}
           <input
+            checked={selected === option.value}
+            disabled={props.disabled || option.disabled}
+            name="radio"
+            onChange={(e) => option.onSelect && option.onSelect(e.target.value)}
             type="radio"
             value={option.value}
-            disabled={props.disabled || option.disabled}
-            onChange={(e) => option.onSelect && option.onSelect(e.target.value)}
-            checked={selected === option.value}
-            name="radio"
           />
-          <span className="checkbox"></span>
+          <span className="checkbox" />
         </Radio>
       ))}
     </RadioGroup>
diff --git a/app/client/src/components/ads/RectangularSwitcher.tsx b/app/client/src/components/ads/RectangularSwitcher.tsx
index 179c662ea9..08228fb044 100644
--- a/app/client/src/components/ads/RectangularSwitcher.tsx
+++ b/app/client/src/components/ads/RectangularSwitcher.tsx
@@ -100,14 +100,13 @@ export default function Switch(props: SwitchProps) {
 
   return (
     <StyledSwitch
+      className={props.className}
       data-cy={props.cypressSelector}
+      firstRender={firstRender}
       isLoading={props.isLoading}
       value={value}
-      className={props.className}
-      firstRender={firstRender}
     >
       <input
-        type="checkbox"
         checked={value}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
           if (!firstRender) {
@@ -115,8 +114,9 @@ export default function Switch(props: SwitchProps) {
           }
           onChangeHandler(e.target.checked);
         }}
+        type="checkbox"
       />
-      <span className="slider"></span>
+      <span className="slider" />
       <Light value={value}>
         <Text type={TextType.H6}>Light</Text>
       </Light>
diff --git a/app/client/src/components/ads/ScrollIndicator.tsx b/app/client/src/components/ads/ScrollIndicator.tsx
index cc1c88a758..159164bc2d 100644
--- a/app/client/src/components/ads/ScrollIndicator.tsx
+++ b/app/client/src/components/ads/ScrollIndicator.tsx
@@ -47,7 +47,7 @@ interface Props {
   right?: string;
   mode?: "DARK" | "LIGHT";
 }
-const ScrollIndicator = ({ containerRef, top, bottom, right }: Props) => {
+function ScrollIndicator({ containerRef, top, bottom, right }: Props) {
   const [{ thumbPosition }, setThumbPosition] = useSpring<{
     thumbPosition: number;
     config: {
@@ -105,10 +105,10 @@ const ScrollIndicator = ({ containerRef, top, bottom, right }: Props) => {
 
   return (
     <ScrollTrack
-      isVisible={isScrollVisible}
-      top={top}
       bottom={bottom}
+      isVisible={isScrollVisible}
       right={right}
+      top={top}
     >
       <ScrollThumb
         ref={thumbRef}
@@ -121,6 +121,6 @@ const ScrollIndicator = ({ containerRef, top, bottom, right }: Props) => {
       />
     </ScrollTrack>
   );
-};
+}
 
 export default ScrollIndicator;
diff --git a/app/client/src/components/ads/SearchInput.tsx b/app/client/src/components/ads/SearchInput.tsx
index f0feeb39b2..6a3e6f27c2 100644
--- a/app/client/src/components/ads/SearchInput.tsx
+++ b/app/client/src/components/ads/SearchInput.tsx
@@ -118,30 +118,30 @@ const SearchInput = forwardRef(
     return (
       <InputWrapper
         data-cy={props.cypressSelector}
-        value={searchValue}
-        isFocused={isFocused}
-        variant={props.variant}
         fill={props.fill}
+        isFocused={isFocused}
+        value={searchValue}
+        variant={props.variant}
       >
-        <SearchIcon value={searchValue} isFocused={isFocused}>
+        <SearchIcon isFocused={isFocused} value={searchValue}>
           <Icon name="search" size={IconSize.SMALL} />
         </SearchIcon>
         <StyledInput
-          type="text"
-          ref={ref}
           isFocused={isFocused}
+          ref={ref}
+          type="text"
           {...props}
-          placeholder={props.placeholder ? props.placeholder : ""}
-          onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
           onChange={memoizedChangeHandler}
+          onFocus={() => setIsFocused(true)}
+          placeholder={props.placeholder ? props.placeholder : ""}
         />
         {searchValue && props.variant === SearchVariant.BACKGROUND ? (
           <CloseIcon>
             <Icon
               name="close"
-              size={IconSize.MEDIUM}
               onClick={() => setSearchValue("")}
+              size={IconSize.MEDIUM}
             />
           </CloseIcon>
         ) : null}
diff --git a/app/client/src/components/ads/Spinner.tsx b/app/client/src/components/ads/Spinner.tsx
index 4f1b24bcbd..a1e7cb7247 100644
--- a/app/client/src/components/ads/Spinner.tsx
+++ b/app/client/src/components/ads/Spinner.tsx
@@ -48,11 +48,11 @@ Spinner.defaultProp = {
 export default function Spinner(props: SpinnerProp) {
   return (
     <SvgContainer
-      viewBox="0 0 50 50"
       className={Classes.SPINNER}
       size={props.size}
+      viewBox="0 0 50 50"
     >
-      <SvgCircle cx="25" cy="25" r="20" fill="none"></SvgCircle>
+      <SvgCircle cx="25" cy="25" fill="none" r="20" />
     </SvgContainer>
   );
 }
diff --git a/app/client/src/components/ads/StepComponent.tsx b/app/client/src/components/ads/StepComponent.tsx
index 8826f22b56..403fb24c77 100644
--- a/app/client/src/components/ads/StepComponent.tsx
+++ b/app/client/src/components/ads/StepComponent.tsx
@@ -63,7 +63,7 @@ interface StepComponentProps {
   onChange: (value: number) => void;
 }
 
-export const StepComponent = (props: StepComponentProps) => {
+export function StepComponent(props: StepComponentProps) {
   function decrease() {
     if (props.value < props.min) {
       return;
@@ -80,11 +80,11 @@ export const StepComponent = (props: StepComponentProps) => {
   }
   return (
     <StepWrapper>
-      <StyledDecreaseIcon height={2} width={12} onClick={decrease} />
+      <StyledDecreaseIcon height={2} onClick={decrease} width={12} />
       <InputWrapper>{props.displayFormat(props.value)}</InputWrapper>
-      <StyledIncreaseIcon height={12} width={12} onClick={increase} />
+      <StyledIncreaseIcon height={12} onClick={increase} width={12} />
     </StepWrapper>
   );
-};
+}
 
 export default StepComponent;
diff --git a/app/client/src/components/ads/Table.tsx b/app/client/src/components/ads/Table.tsx
index 4af94a42f1..fdfd1501be 100644
--- a/app/client/src/components/ads/Table.tsx
+++ b/app/client/src/components/ads/Table.tsx
@@ -138,8 +138,8 @@ function Table(props: TableProps) {
                   return (
                     <td
                       {...cell.getCellProps()}
-                      key={index}
                       data-colindex={index}
+                      key={index}
                     >
                       {cell.render("Cell")}
                     </td>
diff --git a/app/client/src/components/ads/TableDropdown.tsx b/app/client/src/components/ads/TableDropdown.tsx
index a27b050d87..9afcbdbf92 100644
--- a/app/client/src/components/ads/TableDropdown.tsx
+++ b/app/client/src/components/ads/TableDropdown.tsx
@@ -1,14 +1,14 @@
-import React, { Fragment, useState } from "react";
-import { CommonComponentProps, Classes } from "./common";
-import Text, { TextType } from "./Text";
-import styled from "styled-components";
+import { Position } from "@blueprintjs/core/lib/esm/common/position";
 import {
   Popover,
   PopoverInteractionKind,
 } from "@blueprintjs/core/lib/esm/components/popover/popover";
-import { Position } from "@blueprintjs/core/lib/esm/common/position";
+import React, { useState } from "react";
+import styled from "styled-components";
+import { Classes, CommonComponentProps } from "./common";
 import Icon, { IconSize } from "./Icon";
 import Spinner from "./Spinner";
+import Text, { TextType } from "./Text";
 
 type DropdownOption = {
   name: string;
@@ -79,7 +79,7 @@ const Content = styled.div<{ isLoading?: boolean }>`
   }
 `;
 
-const TableDropdown = (props: DropdownProps) => {
+function TableDropdown(props: DropdownProps) {
   const [selectedIndex, setSelectedIndex] = useState(props.selectedIndex);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState(
@@ -93,41 +93,37 @@ const TableDropdown = (props: DropdownProps) => {
     setIsDropdownOpen(false);
   };
 
-  return (
-    <Fragment>
-      {props.isLoading ? (
-        <Spinner size={IconSize.LARGE} />
-      ) : (
-        <Popover
-          data-cy={props.cypressSelector}
-          usePortal={false}
-          position={props.position || Position.BOTTOM_LEFT}
-          isOpen={isDropdownOpen}
-          onInteraction={(state) => setIsDropdownOpen(state)}
-          interactionKind={PopoverInteractionKind.CLICK}
-        >
-          <Content isLoading={props.isLoading}>
-            <SelectedItem className="selected-item">
-              <Text type={TextType.P1}>{selectedOption.name}</Text>
-              <Icon name="downArrow" size={IconSize.XXS} />
-            </SelectedItem>
-          </Content>
-          <OptionsWrapper>
-            {props.options.map((el: DropdownOption, index: number) => (
-              <DropdownOption
-                key={index}
-                isSelected={selectedIndex === index}
-                onClick={() => optionSelector(index)}
-              >
-                <Text type={TextType.H5}>{el.name}</Text>
-                <Text type={TextType.P3}>{el.desc}</Text>
-              </DropdownOption>
-            ))}
-          </OptionsWrapper>
-        </Popover>
-      )}
-    </Fragment>
+  return props.isLoading ? (
+    <Spinner size={IconSize.LARGE} />
+  ) : (
+    <Popover
+      data-cy={props.cypressSelector}
+      interactionKind={PopoverInteractionKind.CLICK}
+      isOpen={isDropdownOpen}
+      onInteraction={(state) => setIsDropdownOpen(state)}
+      position={props.position || Position.BOTTOM_LEFT}
+      usePortal={false}
+    >
+      <Content isLoading={props.isLoading}>
+        <SelectedItem className="selected-item">
+          <Text type={TextType.P1}>{selectedOption.name}</Text>
+          <Icon name="downArrow" size={IconSize.XXS} />
+        </SelectedItem>
+      </Content>
+      <OptionsWrapper>
+        {props.options.map((el: DropdownOption, index: number) => (
+          <DropdownOption
+            isSelected={selectedIndex === index}
+            key={index}
+            onClick={() => optionSelector(index)}
+          >
+            <Text type={TextType.H5}>{el.name}</Text>
+            <Text type={TextType.P3}>{el.desc}</Text>
+          </DropdownOption>
+        ))}
+      </OptionsWrapper>
+    </Popover>
   );
-};
+}
 
 export default TableDropdown;
diff --git a/app/client/src/components/ads/Tabs.tsx b/app/client/src/components/ads/Tabs.tsx
index 37b698a753..a70206d531 100644
--- a/app/client/src/components/ads/Tabs.tsx
+++ b/app/client/src/components/ads/Tabs.tsx
@@ -130,17 +130,17 @@ type TabbedViewComponentType = CommonComponentProps & {
   overflow?: boolean;
 };
 
-export const TabComponent = (props: TabbedViewComponentType) => {
+export function TabComponent(props: TabbedViewComponentType) {
   return (
     <TabsWrapper
-      shouldOverflow={props.overflow}
       data-cy={props.cypressSelector}
+      shouldOverflow={props.overflow}
     >
       <Tabs
-        selectedIndex={props.selectedIndex}
         onSelect={(index: number) => {
           props.onSelect && props.onSelect(index);
         }}
+        selectedIndex={props.selectedIndex}
       >
         <TabList>
           {props.tabs.map((tab) => (
@@ -163,4 +163,4 @@ export const TabComponent = (props: TabbedViewComponentType) => {
       </Tabs>
     </TabsWrapper>
   );
-};
+}
diff --git a/app/client/src/components/ads/TagInputComponent.tsx b/app/client/src/components/ads/TagInputComponent.tsx
index 79ad502e8c..38de855dc8 100644
--- a/app/client/src/components/ads/TagInputComponent.tsx
+++ b/app/client/src/components/ads/TagInputComponent.tsx
@@ -62,7 +62,7 @@ type TagInputProps = {
  * On addition or removal of tags, passes the comman separated string to input.onChange prop
  * @param props : TagInputProps
  */
-const TagInputComponent = (props: TagInputProps) => {
+function TagInputComponent(props: TagInputProps) {
   const _values =
     props.input.value && props.input.value.length > 0
       ? props.input.value.split(",")
@@ -145,25 +145,25 @@ const TagInputComponent = (props: TagInputProps) => {
   return (
     <TagInputWrapper intent={props.intent}>
       <TagInput
+        addOnPaste
         inputProps={{
           type: props.type,
           value: currentValue,
           onBlur: handleInputBlur,
         }}
-        onInputChange={handleInputChange}
-        placeholder={props.placeholder}
-        values={_values || [""]}
-        separator={props.separator || ","}
-        addOnPaste
+        large={false}
         onChange={onTagsChange}
+        onInputChange={handleInputChange}
         onKeyDown={onKeyDown}
+        placeholder={props.placeholder}
+        separator={props.separator || ","}
         tagProps={{
           round: true,
         }}
-        large={false}
+        values={_values || [""]}
       />
     </TagInputWrapper>
   );
-};
+}
 
 export default TagInputComponent;
diff --git a/app/client/src/components/ads/TextInput.tsx b/app/client/src/components/ads/TextInput.tsx
index 5bf0b9f4e7..a7aee853bf 100644
--- a/app/client/src/components/ads/TextInput.tsx
+++ b/app/client/src/components/ads/TextInput.tsx
@@ -88,8 +88,8 @@ const StyledInput = styled((props) => {
   return props.asyncControl ? (
     <AsyncControllableInput
       {...inputProps}
-      inputRef={inputRef}
       dataType={dataType}
+      inputRef={inputRef}
     />
   ) : (
     <input ref={inputRef} {...inputProps} />
@@ -200,17 +200,17 @@ const TextInput = forwardRef(
     return (
       <InputWrapper>
         <StyledInput
-          type={props.dataType || "text"}
-          ref={ref}
+          defaultValue={props.defaultValue}
           inputStyle={inputStyle}
           isValid={validation.isValid}
-          defaultValue={props.defaultValue}
+          ref={ref}
+          type={props.dataType || "text"}
           {...props}
-          placeholder={props.placeholder}
-          onChange={memoizedChangeHandler}
-          readOnly={props.readOnly}
           data-cy={props.cypressSelector}
           inputRef={ref}
+          onChange={memoizedChangeHandler}
+          placeholder={props.placeholder}
+          readOnly={props.readOnly}
         />
         {ErrorMessage}
       </InputWrapper>
diff --git a/app/client/src/components/ads/Toast.tsx b/app/client/src/components/ads/Toast.tsx
index e31fafe90a..8685e03e1c 100644
--- a/app/client/src/components/ads/Toast.tsx
+++ b/app/client/src/components/ads/Toast.tsx
@@ -39,13 +39,13 @@ const WrappedToastContainer = styled.div`
     top: 4em;
   }
 `;
-export const StyledToastContainer = (props: ToastOptions) => {
+export function StyledToastContainer(props: ToastOptions) {
   return (
     <WrappedToastContainer>
       <ToastContainer {...props} />
     </WrappedToastContainer>
   );
-};
+}
 
 const ToastBody = styled.div<{
   variant?: Variant;
@@ -110,19 +110,19 @@ const StyledDebugButton = styled(DebugButton)`
   margin-left: auto;
 `;
 
-const ToastComponent = (props: ToastProps & { undoAction?: () => void }) => {
+function ToastComponent(props: ToastProps & { undoAction?: () => void }) {
   const dispatch = useDispatch();
 
   return (
     <ToastBody
-      variant={props.variant || Variant.info}
-      isUndo={!!props.onUndo}
-      dispatchableAction={props.dispatchableAction}
       className="t--toast-action"
+      dispatchableAction={props.dispatchableAction}
+      isUndo={!!props.onUndo}
+      variant={props.variant || Variant.info}
     >
       <FlexContainer>
         {props.variant === Variant.success ? (
-          <Icon name="success" size={IconSize.XXL} fillColor={Colors.GREEN} />
+          <Icon fillColor={Colors.GREEN} name="success" size={IconSize.XXL} />
         ) : props.variant === Variant.warning ? (
           <Icon name="warning" size={IconSize.XXL} />
         ) : null}
@@ -139,7 +139,6 @@ const ToastComponent = (props: ToastProps & { undoAction?: () => void }) => {
       <div className="undo-section">
         {props.onUndo || props.dispatchableAction ? (
           <Text
-            type={TextType.H6}
             onClick={() => {
               if (props.dispatchableAction) {
                 dispatch(props.dispatchableAction);
@@ -148,6 +147,7 @@ const ToastComponent = (props: ToastProps & { undoAction?: () => void }) => {
                 props.undoAction && props.undoAction();
               }
             }}
+            type={TextType.H6}
           >
             UNDO
           </Text>
@@ -155,7 +155,7 @@ const ToastComponent = (props: ToastProps & { undoAction?: () => void }) => {
       </div>
     </ToastBody>
   );
-};
+}
 
 export const Toaster = {
   show: (config: ToastProps) => {
diff --git a/app/client/src/components/ads/Toggle.tsx b/app/client/src/components/ads/Toggle.tsx
index 60ae853016..5ae09a22ff 100644
--- a/app/client/src/components/ads/Toggle.tsx
+++ b/app/client/src/components/ads/Toggle.tsx
@@ -126,21 +126,21 @@ export default function Toggle(props: ToggleProps) {
 
   return (
     <StyledToggle
-      data-cy={props.cypressSelector}
-      isLoading={props.isLoading}
-      disabled={props.disabled}
-      value={value}
       className={props.className}
+      data-cy={props.cypressSelector}
+      disabled={props.disabled}
+      isLoading={props.isLoading}
+      value={value}
     >
       <input
-        type="checkbox"
         checked={value}
         disabled={props.disabled || props.isLoading}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
           onChangeHandler(e.target.checked)
         }
+        type="checkbox"
       />
-      <span className="slider"></span>
+      <span className="slider" />
       {props.isLoading ? (
         <div className="toggle-spinner">
           <Spinner />
diff --git a/app/client/src/components/ads/Tooltip.tsx b/app/client/src/components/ads/Tooltip.tsx
index 6c858528bd..da2b2d7b23 100644
--- a/app/client/src/components/ads/Tooltip.tsx
+++ b/app/client/src/components/ads/Tooltip.tsx
@@ -19,26 +19,26 @@ type TooltipProps = CommonComponentProps & {
   minimal?: boolean;
 };
 
-const TooltipComponent = (props: TooltipProps) => {
+function TooltipComponent(props: TooltipProps) {
   return (
     <Tooltip
-      content={props.content}
-      position={props.position}
-      usePortal
-      boundary={props.boundary || "scrollParent"}
       autoFocus={props.autoFocus}
+      boundary={props.boundary || "scrollParent"}
+      content={props.content}
       hoverOpenDelay={props.hoverOpenDelay}
-      openOnTargetFocus={props.openOnTargetFocus}
       minimal={props.minimal}
-      popoverClassName={GLOBAL_STYLE_TOOLTIP_CLASSNAME}
       modifiers={{
         preventOverflow: { enabled: false },
       }}
+      openOnTargetFocus={props.openOnTargetFocus}
+      popoverClassName={GLOBAL_STYLE_TOOLTIP_CLASSNAME}
+      position={props.position}
+      usePortal
     >
       {props.children}
     </Tooltip>
   );
-};
+}
 
 TooltipComponent.defaultProps = {
   position: Position.TOP,
diff --git a/app/client/src/components/ads/TreeDropdown.tsx b/app/client/src/components/ads/TreeDropdown.tsx
index a25274362f..bede261783 100644
--- a/app/client/src/components/ads/TreeDropdown.tsx
+++ b/app/client/src/components/ads/TreeDropdown.tsx
@@ -169,10 +169,11 @@ export default function TreeDropdown(props: TreeDropdownProps) {
       selectedOption.type === option.value;
     return (
       <MenuItem
-        className={option.className || "single-select"}
         active={isSelected}
-        key={option.value}
+        className={option.className || "single-select"}
         icon={option.icon}
+        intent={option.intent}
+        key={option.value}
         onClick={
           option.children
             ? noop
@@ -183,14 +184,13 @@ export default function TreeDropdown(props: TreeDropdownProps) {
                 e.stopPropagation();
               }
         }
-        text={option.label}
-        intent={option.intent}
         popoverProps={{
           minimal: true,
           interactionKind: PopoverInteractionKind.CLICK,
           position: PopoverPosition.LEFT,
           targetProps: { onClick: (e: any) => e.stopPropagation() },
         }}
+        text={option.label}
       >
         {option.children && option.children.map(renderTreeOption)}
       </MenuItem>
@@ -202,30 +202,30 @@ export default function TreeDropdown(props: TreeDropdownProps) {
   const defaultToggle = (
     <DropdownTarget>
       <Button
+        className={`t--open-dropdown-${defaultText.split(" ").join("-")} ${
+          selectedLabelModifier ? "code-highlight" : ""
+        }`}
         rightIcon={IconNames.CHEVRON_DOWN}
         text={
           selectedLabelModifier
             ? selectedLabelModifier(selectedOption, displayValue)
             : selectedOption.label
         }
-        className={`t--open-dropdown-${defaultText.split(" ").join("-")} ${
-          selectedLabelModifier ? "code-highlight" : ""
-        }`}
       />
     </DropdownTarget>
   );
   return (
     <Popover
+      className="wrapper-popover"
+      content={menuItems}
       isOpen={isOpen}
       minimal
-      content={menuItems}
-      position={PopoverPosition.LEFT}
-      className="wrapper-popover"
       modifiers={props.modifiers}
       onClose={() => {
         setIsOpen(false);
         props.onMenuToggle && props.onMenuToggle(false);
       }}
+      position={PopoverPosition.LEFT}
       targetProps={{
         onClick: (e: any) => {
           setIsOpen(true);
diff --git a/app/client/src/components/ads/formFields/FieldError.tsx b/app/client/src/components/ads/formFields/FieldError.tsx
index a5459d0a67..5b5471d30c 100644
--- a/app/client/src/components/ads/formFields/FieldError.tsx
+++ b/app/client/src/components/ads/formFields/FieldError.tsx
@@ -20,7 +20,7 @@ type FormFieldErrorProps = {
   className?: string;
 };
 
-export const FormFieldError = (props: FormFieldErrorProps) => {
+export function FormFieldError(props: FormFieldErrorProps) {
   return (
     <StyledError
       className={props.className ? props.className : undefined}
@@ -29,6 +29,6 @@ export const FormFieldError = (props: FormFieldErrorProps) => {
       {props.error || "&nbsp;"}
     </StyledError>
   );
-};
+}
 
 export default FormFieldError;
diff --git a/app/client/src/components/ads/formFields/FormMessage.tsx b/app/client/src/components/ads/formFields/FormMessage.tsx
index 3dd062d8ab..cdfa07f01f 100644
--- a/app/client/src/components/ads/formFields/FormMessage.tsx
+++ b/app/client/src/components/ads/formFields/FormMessage.tsx
@@ -38,13 +38,13 @@ const StyledAction = styled.div<{ intent: Intent }>`
   }
 `;
 
-export const ActionButton = (props: MessageAction) => {
+export function ActionButton(props: MessageAction) {
   if (props.url) {
     const isExternal = props.url.indexOf("//") !== -1;
     return (
       <StyledAction intent={props.intent}>
         {isExternal ? (
-          <a href={props.url} target="_blank" rel="noreferrer">
+          <a href={props.url} rel="noreferrer" target="_blank">
             {props.text}
           </a>
         ) : (
@@ -54,13 +54,13 @@ export const ActionButton = (props: MessageAction) => {
     );
   } else if (props.onClick) {
     return (
-      <StyledAction onClick={props.onClick} intent={props.intent}>
+      <StyledAction intent={props.intent} onClick={props.onClick}>
         {props.text}
       </StyledAction>
     );
   }
   return null;
-};
+}
 
 export type FormMessageProps = {
   intent: Intent;
@@ -68,18 +68,18 @@ export type FormMessageProps = {
   actions?: MessageAction[];
 };
 
-export const FormMessage = (props: FormMessageProps) => {
+export function FormMessage(props: FormMessageProps) {
   const actions =
     props.actions &&
     props.actions.map((action) => (
       <ActionButton key={action.text} {...action} intent={props.intent} />
     ));
   return (
-    <StyledMessage intent={props.intent} className="form-message-container">
+    <StyledMessage className="form-message-container" intent={props.intent}>
       {props.message}
       {actions && <ActionsContainer>{actions}</ActionsContainer>}
     </StyledMessage>
   );
-};
+}
 
 export default FormMessage;
diff --git a/app/client/src/components/ads/formFields/TextField.tsx b/app/client/src/components/ads/formFields/TextField.tsx
index cef1273bca..38df047f1d 100644
--- a/app/client/src/components/ads/formFields/TextField.tsx
+++ b/app/client/src/components/ads/formFields/TextField.tsx
@@ -17,10 +17,10 @@ const renderComponent = (
   const showError = componentProps.meta.touched && !componentProps.meta.active;
 
   return (
-    <React.Fragment>
+    <>
       <InputComponent {...componentProps} {...componentProps.input} fill />
       <FormFieldError error={showError && componentProps.meta.error} />
-    </React.Fragment>
+    </>
   );
 };
 
@@ -34,12 +34,8 @@ type FormTextFieldProps = {
   autoFocus?: boolean;
 };
 
-const FormTextField = (props: FormTextFieldProps) => {
-  return (
-    <React.Fragment>
-      <Field component={renderComponent} {...props} asyncControl />
-    </React.Fragment>
-  );
-};
+function FormTextField(props: FormTextFieldProps) {
+  return <Field component={renderComponent} {...props} asyncControl />;
+}
 
 export default FormTextField;
diff --git a/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx b/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx
index 5faeb25a28..16cc613961 100644
--- a/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx
@@ -31,7 +31,7 @@ const StyledContainerComponent = styled.div<
   ${(props) => (props.shouldScrollContents ? scrollContents : "")}
 }`;
 
-const ContainerComponent = (props: ContainerComponentProps) => {
+function ContainerComponent(props: ContainerComponentProps) {
   const containerStyle = props.containerStyle || "card";
   const containerRef: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
 
@@ -51,18 +51,18 @@ const ContainerComponent = (props: ContainerComponentProps) => {
   return (
     <StyledContainerComponent
       {...props}
-      ref={containerRef}
-      containerStyle={containerStyle}
-      // Before you remove: generateClassName is used for bounding the resizables within this canvas
-      // getCanvasClassName is used to add a scrollable parent.
       className={`${
         props.shouldScrollContents ? getCanvasClassName() : ""
       } ${generateClassName(props.widgetId)}`}
+      containerStyle={containerStyle}
+      // Before you remove: generateClassName is used for bounding the resizables within this canvas
+      // getCanvasClassName is used to add a scrollable parent.
+      ref={containerRef}
     >
       {props.children}
     </StyledContainerComponent>
   );
-};
+}
 
 export type ContainerStyle = "border" | "card" | "rounded-border" | "none";
 
diff --git a/app/client/src/components/designSystems/appsmith/CopyToClipBoard.tsx b/app/client/src/components/designSystems/appsmith/CopyToClipBoard.tsx
index cbcf6cda22..c7719d08c8 100644
--- a/app/client/src/components/designSystems/appsmith/CopyToClipBoard.tsx
+++ b/app/client/src/components/designSystems/appsmith/CopyToClipBoard.tsx
@@ -19,7 +19,7 @@ const Wrapper = styled.div`
   }
 `;
 
-const CopyToClipboard = (props: any) => {
+function CopyToClipboard(props: any) {
   const { copyText } = props;
   const copyURLInput = createRef<HTMLInputElement>();
   const [isCopied, setIsCopied] = useState(false);
@@ -40,22 +40,22 @@ const CopyToClipboard = (props: any) => {
   return (
     <Wrapper>
       <BaseTextInput
+        defaultValue={copyText}
+        disabled
         fill
-        disabled={true}
         onChange={() => {
           selectText();
         }}
-        defaultValue={copyText}
       />
 
       <BaseButton
-        text={isCopied ? "Copied" : "Copy"}
         onClick={() => {
           copyToClipboard(copyText);
         }}
+        text={isCopied ? "Copied" : "Copy"}
       />
     </Wrapper>
   );
-};
+}
 
 export default CopyToClipboard;
diff --git a/app/client/src/components/designSystems/appsmith/CreatableDropdown.tsx b/app/client/src/components/designSystems/appsmith/CreatableDropdown.tsx
index 4fb0345d34..d6465d62a9 100644
--- a/app/client/src/components/designSystems/appsmith/CreatableDropdown.tsx
+++ b/app/client/src/components/designSystems/appsmith/CreatableDropdown.tsx
@@ -94,12 +94,14 @@ class CreatableDropdown extends React.Component<DropdownProps> {
 
     return (
       <Select
-        isMulti
-        placeholder={placeholder}
-        options={options}
-        styles={selectStyles}
         isLoading={isLoading}
+        isMulti
+        options={options}
+        placeholder={placeholder}
+        styles={selectStyles}
         {...input}
+        isClearable
+        onBlur={() => input.value}
         onChange={(value) => {
           const formattedValue = value;
           if (formattedValue && formattedValue.length > 1) {
@@ -108,8 +110,6 @@ class CreatableDropdown extends React.Component<DropdownProps> {
 
           input.onChange(formattedValue);
         }}
-        onBlur={() => input.value}
-        isClearable
         {...optionalProps}
       />
     );
diff --git a/app/client/src/components/designSystems/appsmith/DraggableListComponent.tsx b/app/client/src/components/designSystems/appsmith/DraggableListComponent.tsx
index 313233f5e0..ca1fb37219 100644
--- a/app/client/src/components/designSystems/appsmith/DraggableListComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/DraggableListComponent.tsx
@@ -100,8 +100,8 @@ export class DroppableComponent extends React.Component<
                   return (
                     <Draggable
                       draggableId={item.id}
-                      key={item.id}
                       index={index}
+                      key={item.id}
                     >
                       {({ innerRef, draggableProps, dragHandleProps }) => (
                         <ItemWrapper
diff --git a/app/client/src/components/designSystems/appsmith/Dropdown.tsx b/app/client/src/components/designSystems/appsmith/Dropdown.tsx
index 62d44a8c03..ecade3fff9 100644
--- a/app/client/src/components/designSystems/appsmith/Dropdown.tsx
+++ b/app/client/src/components/designSystems/appsmith/Dropdown.tsx
@@ -52,23 +52,23 @@ const selectStyles = {
   indicatorSeparator: () => ({}),
 };
 
-export const BaseDropdown = (props: DropdownProps) => {
+export function BaseDropdown(props: DropdownProps) {
   const { input, customSelectStyles } = props;
   return (
     <Select
       styles={{ ...selectStyles, ...customSelectStyles }}
       {...input}
-      width={props.width}
-      onChange={(value) => input.onChange(value)}
-      isSearchable={props.isSearchable}
       isDisabled={props.isDisabled}
+      isSearchable={props.isSearchable}
+      onChange={(value) => input.onChange(value)}
+      width={props.width}
       {...props}
     />
   );
-};
+}
 
-const Dropdown = (props: DropdownProps) => {
+function Dropdown(props: DropdownProps) {
   return <BaseDropdown {...props} />;
-};
+}
 
 export default Dropdown;
diff --git a/app/client/src/components/designSystems/appsmith/FilePickerComponent.tsx b/app/client/src/components/designSystems/appsmith/FilePickerComponent.tsx
index fb241629c1..834ef89be8 100644
--- a/app/client/src/components/designSystems/appsmith/FilePickerComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/FilePickerComponent.tsx
@@ -26,16 +26,14 @@ class FilePickerComponent extends React.Component<
       label = `${this.props.files.length} files selected`;
     }
     return (
-      <React.Fragment>
-        <BaseButton
-          accent="primary"
-          filled
-          loading={this.props.isLoading}
-          text={label}
-          onClick={this.openModal}
-          disabled={this.props.isDisabled}
-        />
-      </React.Fragment>
+      <BaseButton
+        accent="primary"
+        disabled={this.props.isDisabled}
+        filled
+        loading={this.props.isLoading}
+        onClick={this.openModal}
+        text={label}
+      />
     );
   }
 
diff --git a/app/client/src/components/designSystems/appsmith/IconComponent.tsx b/app/client/src/components/designSystems/appsmith/IconComponent.tsx
index 14058919bf..33364043f2 100644
--- a/app/client/src/components/designSystems/appsmith/IconComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/IconComponent.tsx
@@ -8,15 +8,15 @@ class IconComponent extends React.Component<IconComponentProps> {
   render() {
     return (
       <Icon
-        style={{
-          cursor:
-            this.props.onClick && !this.props.disabled ? "pointer" : "auto",
-        }}
+        color={this.props.color}
         icon={this.props.iconName as IconName}
         iconSize={this.props.iconSize}
         intent={this.props.intent}
         onClick={this.props.disabled ? noop : this.props.onClick}
-        color={this.props.color}
+        style={{
+          cursor:
+            this.props.onClick && !this.props.disabled ? "pointer" : "auto",
+        }}
       />
     );
   }
diff --git a/app/client/src/components/designSystems/appsmith/ImageComponent.tsx b/app/client/src/components/designSystems/appsmith/ImageComponent.tsx
index dd66dc6154..ee3ea08429 100644
--- a/app/client/src/components/designSystems/appsmith/ImageComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/ImageComponent.tsx
@@ -74,29 +74,18 @@ class ImageComponent extends React.Component<
       <Wrapper>
         <TransformWrapper
           defaultScale={1}
-          onPanningStart={() => {
-            this.props.disableDrag(true);
+          doubleClick={{
+            disabled: true,
           }}
           onPanning={() => {
             this.isPanning = true;
           }}
+          onPanningStart={() => {
+            this.props.disableDrag(true);
+          }}
           onPanningStop={() => {
             this.props.disableDrag(false);
           }}
-          options={{
-            maxScale: maxZoomLevel,
-            disabled: !zoomActive,
-            transformEnabled: zoomActive,
-          }}
-          pan={{
-            disabled: !zoomActive,
-          }}
-          wheel={{
-            disabled: !zoomActive,
-          }}
-          doubleClick={{
-            disabled: true,
-          }}
           onZoomChange={(zoom: any) => {
             if (zoomActive) {
               //Check max zoom
@@ -119,42 +108,51 @@ class ImageComponent extends React.Component<
               }
             }
           }}
+          options={{
+            maxScale: maxZoomLevel,
+            disabled: !zoomActive,
+            transformEnabled: zoomActive,
+          }}
+          pan={{
+            disabled: !zoomActive,
+          }}
+          wheel={{
+            disabled: !zoomActive,
+          }}
         >
           {({ zoomIn, zoomOut }: any) => (
-            <React.Fragment>
-              <TransformComponent>
-                <StyledImage
-                  className={this.props.isLoading ? "bp3-skeleton" : ""}
-                  imageError={this.state.imageError}
-                  {...this.props}
-                  data-testid="styledImage"
-                  style={{
-                    cursor,
-                  }}
-                  onClick={(event: React.MouseEvent<HTMLElement>) => {
-                    if (!this.isPanning) {
-                      if (isZoomingIn) {
-                        zoomIn(event);
-                      } else {
-                        zoomOut(event);
-                      }
-                      this.props.onClick && this.props.onClick(event);
+            <TransformComponent>
+              <StyledImage
+                className={this.props.isLoading ? "bp3-skeleton" : ""}
+                imageError={this.state.imageError}
+                {...this.props}
+                data-testid="styledImage"
+                onClick={(event: React.MouseEvent<HTMLElement>) => {
+                  if (!this.isPanning) {
+                    if (isZoomingIn) {
+                      zoomIn(event);
+                    } else {
+                      zoomOut(event);
                     }
-                    this.isPanning = false;
+                    this.props.onClick && this.props.onClick(event);
+                  }
+                  this.isPanning = false;
+                }}
+                style={{
+                  cursor,
+                }}
+              >
+                <img
+                  alt={this.props.widgetName}
+                  onError={this.onImageError}
+                  onLoad={this.onImageLoad}
+                  src={this.props.imageUrl}
+                  style={{
+                    display: "none",
                   }}
-                >
-                  <img
-                    style={{
-                      display: "none",
-                    }}
-                    alt={this.props.widgetName}
-                    src={this.props.imageUrl}
-                    onError={this.onImageError}
-                    onLoad={this.onImageLoad}
-                  ></img>
-                </StyledImage>
-              </TransformComponent>
-            </React.Fragment>
+                />
+              </StyledImage>
+            </TransformComponent>
           )}
         </TransformWrapper>
       </Wrapper>
diff --git a/app/client/src/components/designSystems/appsmith/MapComponent.tsx b/app/client/src/components/designSystems/appsmith/MapComponent.tsx
index a9cde5d2d7..6b74f1a829 100644
--- a/app/client/src/components/designSystems/appsmith/MapComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/MapComponent.tsx
@@ -115,6 +115,12 @@ const MyMapComponent = withGoogleMap((props: any) => {
   }, [props.center, props.selectedMarker]);
   return (
     <GoogleMap
+      center={mapCenter}
+      onClick={(e) => {
+        if (props.enableCreateMarker) {
+          props.saveMarker(e.latLng.lat(), e.latLng.lng());
+        }
+      }}
       options={{
         zoomControl: props.allowZoom,
         fullscreenControl: false,
@@ -124,12 +130,6 @@ const MyMapComponent = withGoogleMap((props: any) => {
         streetViewControl: false,
       }}
       zoom={props.zoom}
-      center={mapCenter}
-      onClick={(e) => {
-        if (props.enableCreateMarker) {
-          props.saveMarker(e.latLng.lat(), e.latLng.lng());
-        }
-      }}
     >
       {props.enableSearch && (
         <SearchBox
@@ -137,21 +137,19 @@ const MyMapComponent = withGoogleMap((props: any) => {
           onPlacesChanged={onPlacesChanged}
           ref={searchBox}
         >
-          <StyledInput type="text" placeholder="Enter location to search" />
+          <StyledInput placeholder="Enter location to search" type="text" />
         </SearchBox>
       )}
       {Array.isArray(props.markers) &&
         props.markers.map((marker: MarkerProps, index: number) => (
           <Marker
-            key={index}
-            title={marker.title}
-            position={{ lat: marker.lat, lng: marker.long }}
             clickable
             draggable={
               props.selectedMarker &&
               props.selectedMarker.lat === marker.lat &&
               props.selectedMarker.long === marker.long
             }
+            key={index}
             onClick={() => {
               setMapCenter({
                 ...marker,
@@ -162,12 +160,14 @@ const MyMapComponent = withGoogleMap((props: any) => {
             onDragEnd={(de) => {
               props.updateMarker(de.latLng.lat(), de.latLng.lng(), index);
             }}
+            position={{ lat: marker.lat, lng: marker.long }}
+            title={marker.title}
           />
         ))}
       {props.enablePickLocation && (
         <PickMyLocationWrapper
-          title="Pick My Location"
           allowZoom={props.allowZoom}
+          title="Pick My Location"
         >
           <PickMyLocation updateCenter={props.updateCenter} />
         </PickMyLocationWrapper>
@@ -176,7 +176,7 @@ const MyMapComponent = withGoogleMap((props: any) => {
   );
 });
 
-const MapComponent = (props: MapComponentProps) => {
+function MapComponent(props: MapComponentProps) {
   const zoom = Math.floor(props.zoomLevel / 5);
   const status = useScript(
     `https://maps.googleapis.com/maps/api/js?key=${props.apiKey}&v=3.exp&libraries=geometry,drawing,places`,
@@ -186,8 +186,8 @@ const MapComponent = (props: MapComponentProps) => {
     <MapWrapper onMouseLeave={props.enableDrag}>
       {status === ScriptStatus.READY && (
         <MyMapComponent
-          loadingElement={<MapContainerWrapper />}
           containerElement={<MapContainerWrapper />}
+          loadingElement={<MapContainerWrapper />}
           mapElement={<MapContainerWrapper />}
           {...props}
           zoom={zoom}
@@ -195,6 +195,6 @@ const MapComponent = (props: MapComponentProps) => {
       )}
     </MapWrapper>
   );
-};
+}
 
 export default MapComponent;
diff --git a/app/client/src/components/designSystems/appsmith/PopoverVideo.tsx b/app/client/src/components/designSystems/appsmith/PopoverVideo.tsx
index dc4d490fa0..c60737f857 100644
--- a/app/client/src/components/designSystems/appsmith/PopoverVideo.tsx
+++ b/app/client/src/components/designSystems/appsmith/PopoverVideo.tsx
@@ -26,16 +26,14 @@ const PlayerWrapper = styled.div`	import React, { Ref } from "react";
   height: 400px;	
 `;
 
-const PopoverVideo = (props: VideoComponentProps) => {
+function PopoverVideo(props: VideoComponentProps) {
   return (
     <div onClick={(e) => e.stopPropagation()}>
       <Popover
-        position={PopoverPosition.AUTO}
-        interactionKind={PopoverInteractionKind.CLICK}
-        minimal
-        usePortal
         enforceFocus={false}
+        interactionKind={PopoverInteractionKind.CLICK}
         lazy
+        minimal
         modifiers={{
           flip: {
             behavior: ["right", "left", "bottom", "top"],
@@ -51,14 +49,16 @@ const PopoverVideo = (props: VideoComponentProps) => {
             boundariesElement: "viewport",
           },
         }}
+        position={PopoverPosition.AUTO}
+        usePortal
       >
-        <PlayIcon></PlayIcon>
+        <PlayIcon />
         <PlayerWrapper>
           <VideoComponent url={props.url} />
         </PlayerWrapper>
       </Popover>
     </div>
   );
-};
+}
 
 export default PopoverVideo;
diff --git a/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx b/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx
index b3aa56177f..db47d63a73 100644
--- a/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx
+++ b/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx
@@ -17,7 +17,7 @@ type PositionedContainerProps = {
   widgetType: string;
 };
 
-export const PositionedContainer = (props: PositionedContainerProps) => {
+export function PositionedContainer(props: PositionedContainerProps) {
   const x = props.style.xPosition + (props.style.xPositionUnit || "px");
   const y = props.style.yPosition + (props.style.yPositionUnit || "px");
   const padding = WIDGET_PADDING;
@@ -47,16 +47,16 @@ export const PositionedContainer = (props: PositionedContainerProps) => {
 
   return (
     <PositionedWidget
-      onClickCapture={openPropertyPane}
-      style={containerStyle}
-      id={props.widgetId}
-      //Before you remove: This is used by property pane to reference the element
       className={containerClassName}
+      id={props.widgetId}
+      onClickCapture={openPropertyPane}
+      //Before you remove: This is used by property pane to reference the element
+      style={containerStyle}
     >
       {props.children}
     </PositionedWidget>
   );
-};
+}
 
 PositionedContainer.padding = WIDGET_PADDING;
 
diff --git a/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx b/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
index 0c8aad75bd..9ef2b16f57 100644
--- a/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
@@ -21,9 +21,7 @@ export interface RichtextEditorComponentProps {
   isVisible?: boolean;
   onValueChange: (valueAsString: string) => void;
 }
-export const RichtextEditorComponent = (
-  props: RichtextEditorComponentProps,
-) => {
+export function RichtextEditorComponent(props: RichtextEditorComponentProps) {
   const status = useScript(
     "https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.7.0/tinymce.min.js",
   );
@@ -110,9 +108,9 @@ export const RichtextEditorComponent = (
 
   return (
     <StyledRTEditor>
-      <textarea id={`rte-${props.widgetId}`}></textarea>
+      <textarea id={`rte-${props.widgetId}`} />
     </StyledRTEditor>
   );
-};
+}
 
 export default RichtextEditorComponent;
diff --git a/app/client/src/components/designSystems/appsmith/SearchComponent.tsx b/app/client/src/components/designSystems/appsmith/SearchComponent.tsx
index 02b56c0036..8a6c10f677 100644
--- a/app/client/src/components/designSystems/appsmith/SearchComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/SearchComponent.tsx
@@ -53,9 +53,9 @@ class SearchComponent extends React.Component<
     return (
       <SearchInputWrapper
         leftIcon="search"
-        type="search"
         onChange={this.handleSearch}
         placeholder={this.props.placeholder}
+        type="search"
         value={this.state.localValue}
       />
     );
diff --git a/app/client/src/components/designSystems/appsmith/StepComponent.tsx b/app/client/src/components/designSystems/appsmith/StepComponent.tsx
index 13c003a745..5c7cdda795 100644
--- a/app/client/src/components/designSystems/appsmith/StepComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/StepComponent.tsx
@@ -68,7 +68,7 @@ interface StepComponentProps {
   onChange: (value: number) => void;
 }
 
-export const StepComponent = (props: StepComponentProps) => {
+export function StepComponent(props: StepComponentProps) {
   function decrease() {
     if (props.value < props.min) {
       return;
@@ -85,11 +85,11 @@ export const StepComponent = (props: StepComponentProps) => {
   }
   return (
     <StepWrapper>
-      <StyledDecreaseIcon height={2} width={12} onClick={decrease} />
+      <StyledDecreaseIcon height={2} onClick={decrease} width={12} />
       <InputWrapper>{props.displayFormat(props.value)}</InputWrapper>
-      <StyledIncreaseIcon height={12} width={12} onClick={increase} />
+      <StyledIncreaseIcon height={12} onClick={increase} width={12} />
     </StepWrapper>
   );
-};
+}
 
 export default StepComponent;
diff --git a/app/client/src/components/designSystems/appsmith/TabbedView.tsx b/app/client/src/components/designSystems/appsmith/TabbedView.tsx
index e1c364997a..450d748144 100644
--- a/app/client/src/components/designSystems/appsmith/TabbedView.tsx
+++ b/app/client/src/components/designSystems/appsmith/TabbedView.tsx
@@ -49,14 +49,14 @@ type TabbedViewComponentType = {
   overflow?: boolean;
 };
 
-export const BaseTabbedView = (props: TabbedViewComponentType) => {
+export function BaseTabbedView(props: TabbedViewComponentType) {
   return (
     <TabsWrapper shouldOverflow={props.overflow}>
       <Tabs
-        selectedIndex={props.selectedIndex}
         onSelect={(index: number) => {
           props.setSelectedIndex && props.setSelectedIndex(index);
         }}
+        selectedIndex={props.selectedIndex}
       >
         <TabList>
           {props.tabs.map((tab) => (
@@ -69,4 +69,4 @@ export const BaseTabbedView = (props: TabbedViewComponentType) => {
       </Tabs>
     </TabsWrapper>
   );
-};
+}
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/AutoToolTipComponent.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/AutoToolTipComponent.tsx
index 1bde35098c..f8f9d93fba 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/AutoToolTipComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/AutoToolTipComponent.tsx
@@ -28,7 +28,7 @@ interface Props {
   columnType?: string;
 }
 
-const LinkWrapper = (props: Props) => {
+function LinkWrapper(props: Props) {
   const ref = createRef<HTMLDivElement>();
   const [useToolTip, updateToolTip] = useState(false);
   useEffect(() => {
@@ -41,24 +41,24 @@ const LinkWrapper = (props: Props) => {
   }, [ref]);
   return (
     <CellWrapper
-      isHidden={props.isHidden}
       cellProperties={props.cellProperties}
+      isHidden={props.isHidden}
       isHyperLink
-      useLinkToolTip={useToolTip}
       onClick={() => {
         window.open(props.title, "_blank");
       }}
+      useLinkToolTip={useToolTip}
     >
-      <div ref={ref} className="link-text">
+      <div className="link-text" ref={ref}>
         {useToolTip && props.children ? (
           <Tooltip
             autoFocus={false}
-            hoverOpenDelay={1000}
             content={
               <TooltipContentWrapper width={(props.tableWidth || 300) - 32}>
                 {props.title}
               </TooltipContentWrapper>
             }
+            hoverOpenDelay={1000}
             position="top"
           >
             {props.children}
@@ -72,9 +72,9 @@ const LinkWrapper = (props: Props) => {
       </OpenNewTabIconWrapper>
     </CellWrapper>
   );
-};
+}
 
-const AutoToolTipComponent = (props: Props) => {
+function AutoToolTipComponent(props: Props) {
   const ref = createRef<HTMLDivElement>();
   const [useToolTip, updateToolTip] = useState(false);
   useEffect(() => {
@@ -90,19 +90,19 @@ const AutoToolTipComponent = (props: Props) => {
   }
   return (
     <CellWrapper
-      ref={ref}
-      isHidden={props.isHidden}
       cellProperties={props.cellProperties}
+      isHidden={props.isHidden}
+      ref={ref}
     >
       {useToolTip && props.children ? (
         <Tooltip
           autoFocus={false}
-          hoverOpenDelay={1000}
           content={
             <TooltipContentWrapper width={(props.tableWidth || 300) - 32}>
               {props.title}
             </TooltipContentWrapper>
           }
+          hoverOpenDelay={1000}
           position="top"
         >
           {props.children}
@@ -112,6 +112,6 @@ const AutoToolTipComponent = (props: Props) => {
       )}
     </CellWrapper>
   );
-};
+}
 
 export default AutoToolTipComponent;
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/CascadeFields.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/CascadeFields.tsx
index 22e8fb3d2e..a71efe4e15 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/CascadeFields.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/CascadeFields.tsx
@@ -169,27 +169,23 @@ const columnTypeNameMap: Record<ColumnTypes, string> = {
   [ColumnTypes.URL]: "Url",
 };
 
-const RenderOption = (props: {
-  type: string;
-  title: string;
-  active: boolean;
-}) => {
+function RenderOption(props: { type: string; title: string; active: boolean }) {
   return (
     <RenderOptionWrapper selected={props.active}>
       <div className="title">{props.title}</div>
       <div className="type">{columnTypeNameMap[props.type as ColumnTypes]}</div>
     </RenderOptionWrapper>
   );
-};
+}
 
-const RenderOptions = (props: {
+function RenderOptions(props: {
   columns: DropdownOption[];
   selectItem: (column: DropdownOption) => void;
   placeholder: string;
   value?: string | Condition;
   showType?: boolean;
   className?: string;
-}) => {
+}) {
   const [selectedValue, selectValue] = useState(props.placeholder);
   const configs = {
     sections: [
@@ -199,9 +195,9 @@ const RenderOptions = (props: {
           return {
             content: props.showType ? (
               <RenderOption
+                active={isActive}
                 title={column.label}
                 type={column.type}
-                active={isActive}
               />
             ) : (
               column.label
@@ -223,7 +219,7 @@ const RenderOptions = (props: {
           <AutoToolTipComponentWrapper title={selectedValue}>
             {selectedValue}
           </AutoToolTipComponentWrapper>
-          <Icon icon="chevron-down" iconSize={16} color={Colors.SLATE_GRAY} />
+          <Icon color={Colors.SLATE_GRAY} icon="chevron-down" iconSize={16} />
         </DropdownTrigger>
       ),
     },
@@ -244,13 +240,13 @@ const RenderOptions = (props: {
     }
   }, [props.value, props.placeholder, props.columns]);
   return <CustomizedDropdown {...configs} />;
-};
+}
 
-const RenderInput = (props: {
+function RenderInput(props: {
   value: string;
   onChange: (value: string) => void;
   className?: string;
-}) => {
+}) {
   const debouncedOnChange = useCallback(debounce(props.onChange, 400), []);
   const [value, setValue] = useState(props.value);
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -263,14 +259,14 @@ const RenderInput = (props: {
   }, [props.value]);
   return (
     <StyledInputGroup
-      placeholder="Enter value"
-      onChange={onChange}
-      type="text"
-      defaultValue={value}
       className={props.className}
+      defaultValue={value}
+      onChange={onChange}
+      placeholder="Enter value"
+      type="text"
     />
   );
-};
+}
 
 type CascadeFieldProps = {
   columns: DropdownOption[];
@@ -429,14 +425,14 @@ function CaseCaseFieldReducer(
   }
 }
 
-const CascadeField = (props: CascadeFieldProps) => {
+function CascadeField(props: CascadeFieldProps) {
   const memoizedState = React.useMemo(() => calculateInitialState(props), [
     props,
   ]);
   return <Fields state={memoizedState} {...props} />;
-};
+}
 
-const Fields = (props: CascadeFieldProps & { state: CascadeFieldState }) => {
+function Fields(props: CascadeFieldProps & { state: CascadeFieldState }) {
   const { index, removeFilter, applyFilter, hasAnyFilters } = props;
   const [state, dispatch] = React.useReducer(CaseCaseFieldReducer, props.state);
   const handleRemoveFilter = () => {
@@ -513,22 +509,22 @@ const Fields = (props: CascadeFieldProps & { state: CascadeFieldState }) => {
   return (
     <FieldWrapper className="t--table-filter">
       <StyledRemoveIcon
-        onClick={handleRemoveFilter}
-        height={16}
-        width={16}
-        color={Colors.RIVER_BED}
         className={`t--table-filter-remove-btn ${
           hasAnyFilters ? "" : "hide-icon"
         }`}
+        color={Colors.RIVER_BED}
+        height={16}
+        onClick={handleRemoveFilter}
+        width={16}
       />
       {index === 1 ? (
         <DropdownWrapper width={95}>
           <RenderOptions
+            className="t--table-filter-operators-dropdown"
             columns={operatorOptions}
+            placeholder="or"
             selectItem={selectOperator}
             value={operator}
-            placeholder="or"
-            className="t--table-filter-operators-dropdown"
           />
         </DropdownWrapper>
       ) : (
@@ -538,22 +534,22 @@ const Fields = (props: CascadeFieldProps & { state: CascadeFieldState }) => {
       )}
       <DropdownWrapper width={150}>
         <RenderOptions
-          columns={props.columns}
-          selectItem={selectColumn}
-          value={column}
-          showType
-          placeholder="Attribute"
           className="t--table-filter-columns-dropdown"
+          columns={props.columns}
+          placeholder="Attribute"
+          selectItem={selectColumn}
+          showType
+          value={column}
         />
       </DropdownWrapper>
       {showConditions ? (
         <DropdownWrapper width={200}>
           <RenderOptions
+            className="t--table-filter-conditions-dropdown"
             columns={conditions}
+            placeholder=""
             selectItem={selectCondition}
             value={condition}
-            placeholder=""
-            className="t--table-filter-conditions-dropdown"
           />
         </DropdownWrapper>
       ) : null}
@@ -567,20 +563,20 @@ const Fields = (props: CascadeFieldProps & { state: CascadeFieldState }) => {
       {showDateInput ? (
         <DatePickerWrapper className="t--table-filter-date-input">
           <DatePickerComponent
-            label=""
             dateFormat="DD/MM/YYYY"
             datePickerType="DATE_PICKER"
-            onDateSelected={onDateSelected}
-            selectedDate={value}
+            enableTimePicker={false}
             isDisabled={false}
             isLoading={false}
-            enableTimePicker={false}
+            label=""
+            onDateSelected={onDateSelected}
+            selectedDate={value}
             widgetId=""
           />
         </DatePickerWrapper>
       ) : null}
     </FieldWrapper>
   );
-};
+}
 
 export default CascadeField;
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx
index f5a59db89e..72d664c25f 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx
@@ -62,7 +62,7 @@ const defaultColumn = {
   width: 150,
 };
 
-export const Table = (props: TableProps) => {
+export function Table(props: TableProps) {
   const isResizingColumn = React.useRef(false);
   const tableWrapperRef = React.useRef<HTMLDivElement>(null);
 
@@ -142,45 +142,45 @@ export const Table = (props: TableProps) => {
   /* Subtracting 9px to handling widget padding */
   return (
     <TableWrapper
-      width={props.width}
-      height={props.height}
-      tableSizes={tableSizes}
-      id={`table${props.widgetId}`}
-      triggerRowSelection={props.triggerRowSelection}
       backgroundColor={Colors.ATHENS_GRAY_DARKER}
+      height={props.height}
+      id={`table${props.widgetId}`}
       ref={tableWrapperRef}
+      tableSizes={tableSizes}
+      triggerRowSelection={props.triggerRowSelection}
+      width={props.width}
     >
       <TableHeader
-        width={props.width}
-        tableData={props.data}
-        tableColumns={props.columns}
-        searchTableData={props.searchTableData}
-        searchKey={props.searchKey}
-        updatePageNo={props.updatePageNo}
-        nextPageClick={props.nextPageClick}
-        prevPageClick={props.prevPageClick}
-        pageNo={props.pageNo}
-        pageCount={pageCount}
-        currentPageIndex={currentPageIndex}
-        pageOptions={pageOptions}
-        widgetName={props.widgetName}
-        serverSidePaginationEnabled={props.serverSidePaginationEnabled}
+        applyFilter={props.applyFilter}
         columns={props.columns.filter((column: ReactTableColumnProps) => {
           return column.accessor !== "actions";
         })}
-        filters={props.filters}
-        applyFilter={props.applyFilter}
-        editMode={props.editMode}
         compactMode={props.compactMode}
-        updateCompactMode={props.updateCompactMode}
+        currentPageIndex={currentPageIndex}
+        editMode={props.editMode}
+        filters={props.filters}
+        nextPageClick={props.nextPageClick}
+        pageCount={pageCount}
+        pageNo={props.pageNo}
+        pageOptions={pageOptions}
+        prevPageClick={props.prevPageClick}
+        searchKey={props.searchKey}
+        searchTableData={props.searchTableData}
+        serverSidePaginationEnabled={props.serverSidePaginationEnabled}
+        tableColumns={props.columns}
+        tableData={props.data}
         tableSizes={tableSizes}
+        updateCompactMode={props.updateCompactMode}
+        updatePageNo={props.updatePageNo}
+        widgetName={props.widgetName}
+        width={props.width}
       />
       <div className={props.isLoading ? Classes.SKELETON : "tableWrap"}>
         <div {...getTableProps()} className="table">
           <div
-            onMouseOver={props.disableDrag}
-            onMouseLeave={props.enableDrag}
             className="thead"
+            onMouseLeave={props.enableDrag}
+            onMouseOver={props.disableDrag}
           >
             {headerGroups.map((headerGroup: any, index: number) => (
               <div
@@ -191,14 +191,14 @@ export const Table = (props: TableProps) => {
                 {headerGroup.headers.map((column: any, columnIndex: number) => {
                   return (
                     <TableHeaderCell
-                      key={columnIndex}
                       column={column}
-                      columnName={column.Header}
                       columnIndex={columnIndex}
-                      isHidden={column.isHidden}
-                      sortTableColumn={props.sortTableColumn}
+                      columnName={column.Header}
                       isAscOrder={column.isAscOrder}
+                      isHidden={column.isHidden}
                       isResizingColumn={isResizingColumn.current}
+                      key={columnIndex}
+                      sortTableColumn={props.sortTableColumn}
                     />
                   );
                 })}
@@ -233,20 +233,20 @@ export const Table = (props: TableProps) => {
                         : ""
                     }`
                   }
+                  key={rowIndex}
                   onClick={() => {
                     row.toggleRowSelected();
                     props.selectTableRow(row);
                   }}
-                  key={rowIndex}
                 >
                   {row.cells.map((cell, cellIndex) => {
                     return (
                       <div
                         {...cell.getCellProps()}
                         className="td"
-                        key={cellIndex}
-                        data-rowindex={rowIndex}
                         data-colindex={cellIndex}
+                        data-rowindex={rowIndex}
+                        key={cellIndex}
                       >
                         {cell.render("Cell")}
                       </div>
@@ -269,6 +269,6 @@ export const Table = (props: TableProps) => {
       <ScrollIndicator containerRef={tableWrapperRef} mode="LIGHT" />
     </TableWrapper>
   );
-};
+}
 
 export default Table;
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx
index ce07706469..d59cdacf23 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx
@@ -13,30 +13,30 @@ interface TableActionIconProps {
   icon?: React.ReactNode;
 }
 
-const TableActionIcon = (props: TableActionIconProps) => {
+function TableActionIcon(props: TableActionIconProps) {
   return (
     <Tooltip
       autoFocus={false}
-      hoverOpenDelay={1000}
       content={props.tooltip}
-      position="top"
+      hoverOpenDelay={1000}
       modifiers={{
         preventOverflow: { enabled: false },
         flip: { enabled: false },
       }}
+      position="top"
     >
       <TableIconWrapper
-        selected={props.selected}
+        className={props.className}
         onClick={(e) => {
           props.selectMenu(!props.selected);
           e.stopPropagation();
         }}
-        className={props.className}
+        selected={props.selected}
       >
         <IconWrapper
-          width={20}
-          height={20}
           color={props.selected ? Colors.OXFORD_BLUE : Colors.CADET_BLUE}
+          height={20}
+          width={20}
         >
           {props.children}
         </IconWrapper>
@@ -44,6 +44,6 @@ const TableActionIcon = (props: TableActionIconProps) => {
       </TableIconWrapper>
     </Tooltip>
   );
-};
+}
 
 export default TableActionIcon;
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableColumnsVisibility.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableColumnsVisibility.tsx
index 00127e099e..a6a14cc327 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableColumnsVisibility.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableColumnsVisibility.tsx
@@ -75,25 +75,25 @@ interface TableColumnsVisibilityProps {
   updateHiddenColumns: (hiddenColumns?: string[]) => void;
 }
 
-const VisibilityIcon = (props: { visible?: boolean }) => {
+function VisibilityIcon(props: { visible?: boolean }) {
   return props.visible ? (
     <Icon
       className="visible-icon"
+      color={Colors.OXFORD_BLUE}
       icon="eye-open"
       iconSize={20}
-      color={Colors.OXFORD_BLUE}
     />
   ) : (
     <VisibleIcon className="hidden-icon" />
   );
-};
+}
 
-const TableColumnsVisibility = (props: TableColumnsVisibilityProps) => {
+function TableColumnsVisibility(props: TableColumnsVisibilityProps) {
   const [selected, selectMenu] = React.useState(false);
   if (props.columns.length === 0) {
     return (
       <TableIconWrapper disabled>
-        <IconWrapper width={20} height={20} color={Colors.CADET_BLUE}>
+        <IconWrapper color={Colors.CADET_BLUE} height={20} width={20}>
           <VisibilityIcon />
         </IconWrapper>
       </TableIconWrapper>
@@ -106,30 +106,30 @@ const TableColumnsVisibility = (props: TableColumnsVisibilityProps) => {
   );
   return (
     <Popover
-      minimal
-      usePortal
       enforceFocus={false}
       interactionKind={PopoverInteractionKind.CLICK}
-      position={Position.BOTTOM}
+      isOpen={selected}
+      minimal
       onClose={() => {
         selectMenu(false);
       }}
-      isOpen={selected}
+      position={Position.BOTTOM}
+      usePortal
     >
       <TableActionIcon
-        tooltip="Hidden Fields"
         className="t--table-column-visibility-toggle-btn"
-        selected={selected}
         selectMenu={(selected: boolean) => {
           selectMenu(selected);
         }}
+        selected={selected}
+        tooltip="Hidden Fields"
       >
         <VisibilityIcon />
       </TableActionIcon>
       <DropDownWrapper>
         {columns.map((option: ReactTableColumnProps, index: number) => (
           <OptionWrapper
-            selected={!option.isHidden}
+            className="t--table-column-visibility-column-toggle"
             key={index}
             onClick={() => {
               const hiddenColumns = Array.isArray(props.hiddenColumns)
@@ -142,7 +142,7 @@ const TableColumnsVisibility = (props: TableColumnsVisibilityProps) => {
               }
               props.updateHiddenColumns(hiddenColumns);
             }}
-            className="t--table-column-visibility-column-toggle"
+            selected={!option.isHidden}
           >
             <StyledOption className="option-title">
               {option.Header}
@@ -152,19 +152,19 @@ const TableColumnsVisibility = (props: TableColumnsVisibilityProps) => {
         ))}
         <ButtonWrapper className={Classes.POPOVER_DISMISS}>
           <Button
-            intent="primary"
-            text="Show All"
-            filled
-            size="small"
             className="t--table-column-show-all-btn"
+            filled
+            intent="primary"
             onClick={() => {
               props.updateHiddenColumns([]);
             }}
+            size="small"
+            text="Show All"
           />
         </ButtonWrapper>
       </DropDownWrapper>
     </Popover>
   );
-};
+}
 
 export default TableColumnsVisibility;
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableCompactMode.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableCompactMode.tsx
index 1b964a04b3..400ab38b0b 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableCompactMode.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableCompactMode.tsx
@@ -76,26 +76,26 @@ interface TableCompactModeProps {
   updateCompactMode: (mode: CompactMode) => void;
 }
 
-const TableCompactMode = (props: TableCompactModeProps) => {
+function TableCompactMode(props: TableCompactModeProps) {
   const [selected, selectMenu] = React.useState(false);
   return (
     <Popover
-      minimal
       enforceFocus={false}
       interactionKind={PopoverInteractionKind.CLICK}
-      position={Position.BOTTOM}
+      isOpen={selected}
+      minimal
       onClose={() => {
         selectMenu(false);
       }}
-      isOpen={selected}
+      position={Position.BOTTOM}
     >
       <TableActionIcon
-        tooltip="Row Height"
-        selected={selected}
+        className="t--table-compact-mode-toggle-btn"
         selectMenu={(selected: boolean) => {
           selectMenu(selected);
         }}
-        className="t--table-compact-mode-toggle-btn"
+        selected={selected}
+        tooltip="Row Height"
       >
         <CompactIcon />
       </TableActionIcon>
@@ -103,14 +103,14 @@ const TableCompactMode = (props: TableCompactModeProps) => {
         {CompactModes.map((item: CompactModeItem, index: number) => {
           return (
             <OptionWrapper
-              selected={
-                props.compactMode ? props.compactMode === item.value : false
-              }
+              className={`${Classes.POPOVER_DISMISS} t--table-compact-mode-option`}
               key={index}
               onClick={() => {
                 props.updateCompactMode(item.value);
               }}
-              className={`${Classes.POPOVER_DISMISS} t--table-compact-mode-option`}
+              selected={
+                props.compactMode ? props.compactMode === item.value : false
+              }
             >
               {item.title}
             </OptionWrapper>
@@ -119,6 +119,6 @@ const TableCompactMode = (props: TableCompactModeProps) => {
       </DropDownWrapper>
     </Popover>
   );
-};
+}
 
 export default TableCompactMode;
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
index 06485f49ba..1a41a1d277 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
@@ -44,7 +44,7 @@ const downloadDataAsCSV = (props: {
   }
 };
 
-const TableDataDownload = (props: TableDataDownloadProps) => {
+function TableDataDownload(props: TableDataDownloadProps) {
   const [selected, toggleButtonClick] = React.useState(false);
   const downloadTableData = () => {
     toggleButtonClick(true);
@@ -62,7 +62,7 @@ const TableDataDownload = (props: TableDataDownloadProps) => {
   if (props.columns.length === 0) {
     return (
       <TableIconWrapper disabled>
-        <IconWrapper width={20} height={20} color={Colors.CADET_BLUE}>
+        <IconWrapper color={Colors.CADET_BLUE} height={20} width={20}>
           <DownloadIcon />
         </IconWrapper>
       </TableIconWrapper>
@@ -70,16 +70,16 @@ const TableDataDownload = (props: TableDataDownloadProps) => {
   }
   return (
     <TableActionIcon
-      tooltip="Download"
-      selected={selected}
+      className="t--table-download-btn"
       selectMenu={() => {
         downloadTableData();
       }}
-      className="t--table-download-btn"
+      selected={selected}
+      tooltip="Download"
     >
       <DownloadIcon />
     </TableActionIcon>
   );
-};
+}
 
 export default TableDataDownload;
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableFilters.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableFilters.tsx
index 4d82c8e00b..145ace9fe5 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableFilters.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableFilters.tsx
@@ -102,7 +102,7 @@ interface TableFilterProps {
   editMode: boolean;
 }
 
-const TableFilters = (props: TableFilterProps) => {
+function TableFilters(props: TableFilterProps) {
   const [selected, selectMenu] = React.useState(false);
   const [filters, updateFilters] = React.useState(
     new Array<ReactTableFilter>(),
@@ -138,7 +138,7 @@ const TableFilters = (props: TableFilterProps) => {
   if (props.columns.length === 0) {
     return (
       <TableIconWrapper disabled>
-        <IconWrapper width={20} height={20} color={Colors.CADET_BLUE}>
+        <IconWrapper color={Colors.CADET_BLUE} height={20} width={20}>
           <FilterIcon />
         </IconWrapper>
       </TableIconWrapper>
@@ -163,20 +163,18 @@ const TableFilters = (props: TableFilterProps) => {
   );
   return (
     <Popover
-      minimal
-      usePortal
       enforceFocus={false}
       interactionKind={PopoverInteractionKind.CLICK}
-      position={Position.BOTTOM}
+      isOpen={selected}
+      minimal
       onClose={() => {
         selectMenu(false);
       }}
-      isOpen={selected}
+      position={Position.BOTTOM}
+      usePortal
     >
       <TableActionIcon
-        tooltip="Filters"
         className="t--table-filter-toggle-btn"
-        selected={selected}
         icon={
           hasAnyFilters ? (
             <SelectedFilterWrapper>{filters.length}</SelectedFilterWrapper>
@@ -185,6 +183,8 @@ const TableFilters = (props: TableFilterProps) => {
         selectMenu={(selected: boolean) => {
           selectMenu(selected);
         }}
+        selected={selected}
+        tooltip="Filters"
       >
         <FilterIcon />
       </TableActionIcon>
@@ -193,16 +193,6 @@ const TableFilters = (props: TableFilterProps) => {
           {filters.map((filter: ReactTableFilter, index: number) => {
             return (
               <CascadeFields
-                key={index}
-                index={index}
-                operator={
-                  filters.length >= 2 ? filters[1].operator : filter.operator
-                }
-                column={filter.column}
-                condition={filter.condition}
-                value={filter.value}
-                columns={columns}
-                hasAnyFilters={hasAnyFilters}
                 applyFilter={(filter: ReactTableFilter, index: number) => {
                   const updatedFilters = props.filters
                     ? [...props.filters]
@@ -210,6 +200,15 @@ const TableFilters = (props: TableFilterProps) => {
                   updatedFilters[index] = filter;
                   props.applyFilter(updatedFilters);
                 }}
+                column={filter.column}
+                columns={columns}
+                condition={filter.condition}
+                hasAnyFilters={hasAnyFilters}
+                index={index}
+                key={index}
+                operator={
+                  filters.length >= 2 ? filters[1].operator : filter.operator
+                }
                 removeFilter={(index: number) => {
                   const filters: ReactTableFilter[] = props.filters || [];
                   if (index === 1 && filters.length > 2) {
@@ -221,18 +220,19 @@ const TableFilters = (props: TableFilterProps) => {
                   ];
                   props.applyFilter(newFilters);
                 }}
+                value={filter.value}
               />
             );
           })}
           {hasAnyFilters ? (
             <ButtonWrapper className={Classes.POPOVER_DISMISS}>
               <Button
-                intent="primary"
-                text="Add Filter"
-                size="small"
-                onClick={addFilter}
-                icon="plus"
                 className="t--add-filter-btn"
+                icon="plus"
+                intent="primary"
+                onClick={addFilter}
+                size="small"
+                text="Add Filter"
               />
             </ButtonWrapper>
           ) : null}
@@ -245,6 +245,6 @@ const TableFilters = (props: TableFilterProps) => {
       </TableFilterOuterWrapper>
     </Popover>
   );
-};
+}
 
 export default TableFilters;
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx
index 08609f6e6e..984bd56de4 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx
@@ -41,25 +41,24 @@ const PageNumberInputWrapper = styled(NumericInput)`
   margin: 0 8px;
 `;
 
-const PageNumberInput = (props: {
+function PageNumberInput(props: {
   pageNo: number;
   pageCount: number;
   updatePageNo: (pageNo: number, event?: EventType) => void;
   disabled: boolean;
-}) => {
+}) {
   const [pageNumber, setPageNumber] = React.useState(props.pageNo || 0);
   useEffect(() => {
     setPageNumber(props.pageNo || 0);
   }, [props.pageNo]);
   return (
     <PageNumberInputWrapper
-      value={pageNumber}
-      min={1}
-      max={props.pageCount || 1}
       buttonPosition="none"
       clampValueOnBlur
       className="t--table-widget-page-input"
       disabled={props.disabled}
+      max={props.pageCount || 1}
+      min={1}
       onBlur={(e: any) => {
         const oldPageNo = Number(props.pageNo || 0);
         const value = e.target.value;
@@ -82,9 +81,10 @@ const PageNumberInput = (props: {
           setPageNumber(value);
         }
       }}
+      value={pageNumber}
     />
   );
-};
+}
 
 interface TableHeaderProps {
   updatePageNo: (pageNo: number, event?: EventType) => void;
@@ -111,32 +111,32 @@ interface TableHeaderProps {
   tableSizes: TableSizes;
 }
 
-const TableHeader = (props: TableHeaderProps) => {
+function TableHeader(props: TableHeaderProps) {
   const tableHeaderWrapperRef = React.createRef<HTMLDivElement>();
 
   return (
     <TableHeaderWrapper
-      serverSidePaginationEnabled={props.serverSidePaginationEnabled}
-      width={props.width}
-      tableSizes={props.tableSizes}
       backgroundColor={Colors.WHITE}
       ref={tableHeaderWrapperRef}
+      serverSidePaginationEnabled={props.serverSidePaginationEnabled}
+      tableSizes={props.tableSizes}
+      width={props.width}
     >
       <SearchComponent
-        value={props.searchKey}
-        placeholder="Search..."
         onSearch={props.searchTableData}
+        placeholder="Search..."
+        value={props.searchKey}
       />
       <CommonFunctionsMenuWrapper tableSizes={props.tableSizes}>
         <TableFilters
-          columns={props.columns}
-          filters={props.filters}
           applyFilter={props.applyFilter}
+          columns={props.columns}
           editMode={props.editMode}
+          filters={props.filters}
         />
         <TableDataDownload
-          data={props.tableData}
           columns={props.tableColumns}
+          data={props.tableData}
           widgetName={props.widgetName}
         />
         <TableCompactMode
@@ -153,9 +153,9 @@ const TableHeader = (props: TableHeaderProps) => {
               props.prevPageClick();
             }}
           >
-            <Icon icon="chevron-left" iconSize={16} color={Colors.HIT_GRAY} />
+            <Icon color={Colors.HIT_GRAY} icon="chevron-left" iconSize={16} />
           </PaginationItemWrapper>
-          <PaginationItemWrapper selected className="page-item">
+          <PaginationItemWrapper className="page-item" selected>
             {props.pageNo + 1}
           </PaginationItemWrapper>
           <PaginationItemWrapper
@@ -165,7 +165,7 @@ const TableHeader = (props: TableHeaderProps) => {
               props.nextPageClick();
             }}
           >
-            <Icon icon="chevron-right" iconSize={16} color={Colors.HIT_GRAY} />
+            <Icon color={Colors.HIT_GRAY} icon="chevron-right" iconSize={16} />
           </PaginationItemWrapper>
         </PaginationWrapper>
       )}
@@ -183,15 +183,15 @@ const TableHeader = (props: TableHeaderProps) => {
               props.updatePageNo(pageNo + 1, EventType.ON_PREV_PAGE);
             }}
           >
-            <Icon icon="chevron-left" iconSize={16} color={Colors.HIT_GRAY} />
+            <Icon color={Colors.HIT_GRAY} icon="chevron-left" iconSize={16} />
           </PaginationItemWrapper>
           <RowWrapper>
             Page{" "}
             <PageNumberInput
+              disabled={props.pageCount === 1}
+              pageCount={props.pageCount}
               pageNo={props.pageNo + 1}
               updatePageNo={props.updatePageNo}
-              pageCount={props.pageCount}
-              disabled={props.pageCount === 1}
             />{" "}
             of {props.pageCount}
           </RowWrapper>
@@ -206,13 +206,13 @@ const TableHeader = (props: TableHeaderProps) => {
               props.updatePageNo(pageNo + 1, EventType.ON_NEXT_PAGE);
             }}
           >
-            <Icon icon="chevron-right" iconSize={16} color={Colors.HIT_GRAY} />
+            <Icon color={Colors.HIT_GRAY} icon="chevron-right" iconSize={16} />
           </PaginationItemWrapper>
         </PaginationWrapper>
       )}
       <ScrollIndicator containerRef={tableHeaderWrapperRef} mode="LIGHT" />
     </TableHeaderWrapper>
   );
-};
+}
 
 export default TableHeader;
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TablePagination.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TablePagination.tsx
index f70412b64d..8beca15e4e 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TablePagination.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TablePagination.tsx
@@ -17,14 +17,14 @@ function PagerIcon(props: {
   return (
     <Icon
       className={props.className}
+      icon={props.icon}
+      iconSize={14}
+      onClick={props.onClick as any}
       style={{
         padding: 14,
         marginTop: 5,
       }}
-      icon={props.icon}
-      iconSize={14}
-      onClick={props.onClick as any}
-    ></Icon>
+    />
   );
 }
 interface PagerProps {
@@ -46,14 +46,14 @@ export function TablePagination(props: PagerProps) {
     <PagerContainer className={"e-control e-pager e-lib"}>
       <PageWrapper>
         <PagerIcon
-          icon={"chevron-left"}
-          onClick={props.prevPageClick}
           className={
             props.pageNo <= 1
               ? "e-prev e-icons e-icon-prev e-prevpagedisabled e-disable"
               : "e-prev e-icons e-icon-prev e-prevpage"
           }
-        ></PagerIcon>
+          icon={"chevron-left"}
+          onClick={props.prevPageClick}
+        />
         <div
           className={"e-numericcontainer"}
           style={{
@@ -71,7 +71,7 @@ export function TablePagination(props: PagerProps) {
           className={"e-next e-icons e-icon-next e-nextpage"}
           icon={"chevron-right"}
           onClick={props.nextPageClick}
-        ></PagerIcon>
+        />
       </PageWrapper>
     </PagerContainer>
   );
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx
index c62791f814..2f7ef96f03 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx
@@ -283,6 +283,18 @@ const ALIGN_ITEMS = {
   BOTTOM: "flex-end",
 };
 
+const IMAGE_HORIZONTAL_ALIGN = {
+  LEFT: "left",
+  CENTER: "center",
+  RIGHT: "right",
+};
+
+const IMAGE_VERTICAL_ALIGN = {
+  TOP: "top",
+  CENTER: "center",
+  BOTTOM: "bottom",
+};
+
 export const TableStyles = css<{ cellProperties?: CellLayoutProperties }>`
   font-weight: ${(props) =>
     props?.cellProperties?.fontStyle?.includes(FontStyleTypes.BOLD)
@@ -343,7 +355,12 @@ export const CellWrapper = styled.div<{
     height: 100%;
     margin: 0 5px 0 0;
     border-radius: 4px;
-    background-position: start;
+    background-position-x: ${(props) =>
+      props?.cellProperties?.horizontalAlignment &&
+      IMAGE_HORIZONTAL_ALIGN[props?.cellProperties?.horizontalAlignment]};
+    background-position-y: ${(props) =>
+      props?.cellProperties?.verticalAlignment &&
+      IMAGE_VERTICAL_ALIGN[props?.cellProperties?.verticalAlignment]};
     background-repeat: no-repeat;
     background-size: contain;
   }
@@ -450,7 +467,6 @@ export const RenderOptionWrapper = styled.div<{ selected: boolean }>`
   justify-content: space-between;
   align-items: center;
   width: 150px;
-  background: ${(props) => props.selected && Colors.GREEN};
   position: relative;
   .title {
     color: ${(props) => (props.selected ? Colors.WHITE : Colors.OXFORD_BLUE)};
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx
index 4075fae2fd..dfd3f6487b 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx
@@ -40,10 +40,7 @@ export const renderCell = (
     case ColumnTypes.IMAGE:
       if (!value) {
         return (
-          <CellWrapper
-            cellProperties={cellProperties}
-            isHidden={isHidden}
-          ></CellWrapper>
+          <CellWrapper cellProperties={cellProperties} isHidden={isHidden} />
         );
       } else if (!isString(value)) {
         return (
@@ -64,12 +61,12 @@ export const renderCell = (
               if (imageUrlRegex.test(item) || base64ImageRegex.test(item)) {
                 return (
                   <a
-                    onClick={(e) => e.stopPropagation()}
-                    target="_blank"
-                    rel="noopener noreferrer"
                     className="image-cell-wrapper"
                     href={item}
                     key={index}
+                    onClick={(e) => e.stopPropagation()}
+                    rel="noopener noreferrer"
+                    target="_blank"
                   >
                     <div
                       className="image-cell"
@@ -87,17 +84,14 @@ export const renderCell = (
       const youtubeRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=|\?v=)([^#&?]*).*/;
       if (!value) {
         return (
-          <CellWrapper
-            cellProperties={cellProperties}
-            isHidden={isHidden}
-          ></CellWrapper>
+          <CellWrapper cellProperties={cellProperties} isHidden={isHidden} />
         );
       } else if (isString(value) && youtubeRegex.test(value)) {
         return (
           <CellWrapper
             cellProperties={cellProperties}
-            isHidden={isHidden}
             className="video-cell"
+            isHidden={isHidden}
           >
             <PopoverVideo url={value} />
           </CellWrapper>
@@ -112,11 +106,11 @@ export const renderCell = (
     default:
       return (
         <AutoToolTipComponent
-          title={value.toString()}
-          isHidden={isHidden}
           cellProperties={cellProperties}
-          tableWidth={tableWidth}
           columnType={columnType}
+          isHidden={isHidden}
+          tableWidth={tableWidth}
+          title={value.toString()}
         >
           {value.toString()}
         </AutoToolTipComponent>
@@ -138,23 +132,18 @@ export const renderActions = (
   cellProperties: CellLayoutProperties,
 ) => {
   if (!props.columnActions)
-    return (
-      <CellWrapper
-        cellProperties={cellProperties}
-        isHidden={isHidden}
-      ></CellWrapper>
-    );
+    return <CellWrapper cellProperties={cellProperties} isHidden={isHidden} />;
 
   return (
     <CellWrapper cellProperties={cellProperties} isHidden={isHidden}>
       {props.columnActions.map((action: ColumnAction, index: number) => {
         return (
           <TableAction
-            key={index}
             action={action}
-            isSelected={props.isSelected}
             backgroundColor={props.backgroundColor}
             buttonLabelColor={props.buttonLabelColor}
+            isSelected={props.isSelected}
+            key={index}
             onCommandClick={props.onCommandClick}
           />
         );
@@ -163,13 +152,13 @@ export const renderActions = (
   );
 };
 
-const TableAction = (props: {
+function TableAction(props: {
   isSelected: boolean;
   action: ColumnAction;
   backgroundColor: string;
   buttonLabelColor: string;
   onCommandClick: (dynamicTrigger: string, onComplete: () => void) => void;
-}) => {
+}) {
   const [loading, setLoading] = useState(false);
   const onComplete = () => {
     setLoading(false);
@@ -186,19 +175,19 @@ const TableAction = (props: {
       }}
     >
       <Button
+        filled
         intent="PRIMARY_BUTTON"
         loading={loading}
         onClick={() => {
           setLoading(true);
           props.onCommandClick(props.action.dynamicTrigger, onComplete);
         }}
-        text={props.action.label}
-        filled
         size="small"
+        text={props.action.label}
       />
     </ActionWrapper>
   );
-};
+}
 
 export const renderEmptyRows = (
   rowCount: number,
@@ -227,7 +216,7 @@ export const renderEmptyRows = (
     ? columns
     : new Array(3).fill({ width: tableWidth / 3, isHidden: false });
   return (
-    <React.Fragment>
+    <>
       {rows.map((row: string, index: number) => {
         return (
           <div
@@ -241,8 +230,8 @@ export const renderEmptyRows = (
             {tableColumns.map((column: any, colIndex: number) => {
               return (
                 <div
-                  key={colIndex}
                   className="td"
+                  key={colIndex}
                   style={{
                     width: column.width + "px",
                     boxSizing: "border-box",
@@ -254,7 +243,7 @@ export const renderEmptyRows = (
           </div>
         );
       })}
-    </React.Fragment>
+    </>
   );
 };
 
@@ -283,7 +272,7 @@ const DescendingIcon = styled(ControlIcons.SORT_CONTROL as AnyStyledComponent)`
   }
 `;
 
-export const TableHeaderCell = (props: {
+export function TableHeaderCell(props: {
   columnName: string;
   columnIndex: number;
   isHidden: boolean;
@@ -291,7 +280,7 @@ export const TableHeaderCell = (props: {
   sortTableColumn: (columnIndex: number, asc: boolean) => void;
   isResizingColumn: boolean;
   column: any;
-}) => {
+}) {
   const { column } = props;
   const handleSortColumn = () => {
     if (props.isResizingColumn) return;
@@ -320,7 +309,6 @@ export const TableHeaderCell = (props: {
         </SortIconWrapper>
       ) : null}
       <DraggableHeaderWrapper
-        horizontalAlignment={column.columnProperties.horizontalAlignment}
         className={
           !props.isHidden
             ? `draggable-header ${
@@ -328,6 +316,7 @@ export const TableHeaderCell = (props: {
               }`
             : "hidden-header"
         }
+        horizontalAlignment={column.columnProperties.horizontalAlignment}
       >
         {props.columnName}
       </DraggableHeaderWrapper>
@@ -341,7 +330,7 @@ export const TableHeaderCell = (props: {
       />
     </div>
   );
-};
+}
 
 export function getDefaultColumnProperties(
   accessor: string,
@@ -445,8 +434,8 @@ export const renderDropdown = (props: {
     const isSelected: boolean = isOptionSelected(option);
     return (
       <MenuItem
-        className="single-select"
         active={isSelected}
+        className="single-select"
         key={option.value}
         onClick={itemProps.handleClick}
         text={option.label}
@@ -455,14 +444,15 @@ export const renderDropdown = (props: {
   };
   return (
     <div
-      style={{ height: "100%" }}
       onClick={(e: React.MouseEvent<HTMLElement>) => {
         e.stopPropagation();
       }}
+      style={{ height: "100%" }}
     >
       <StyledSingleDropDown
-        items={props.options}
+        filterable={false}
         itemRenderer={renderSingleSelectItem}
+        items={props.options}
         onItemSelect={(item: DropdownOption) => {
           props.onItemSelect(props.onOptionChange, item);
         }}
@@ -471,7 +461,6 @@ export const renderDropdown = (props: {
           usePortal: true,
           popoverClassName: "select-popover-wrapper",
         }}
-        filterable={false}
       >
         <BButton
           rightIcon={IconNames.CHEVRON_DOWN}
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
index d35be68de8..0e6c769657 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
@@ -67,7 +67,7 @@ interface ReactTableComponentProps {
   updateCompactMode: (compactMode: CompactMode) => void;
 }
 
-const ReactTableComponent = (props: ReactTableComponentProps) => {
+function ReactTableComponent(props: ReactTableComponentProps) {
   const { columnOrder, hiddenColumns } = useMemo(() => {
     const order: string[] = [];
     const hidden: string[] = [];
@@ -181,45 +181,45 @@ const ReactTableComponent = (props: ReactTableComponentProps) => {
 
   return (
     <Table
-      isLoading={props.isLoading}
-      width={props.width}
-      height={props.height}
-      pageSize={props.pageSize || 1}
-      widgetId={props.widgetId}
-      widgetName={props.widgetName}
-      searchKey={props.searchKey}
-      columns={props.columns}
+      applyFilter={props.applyFilter}
       columnSizeMap={props.columnSizeMap}
+      columns={props.columns}
+      compactMode={props.compactMode}
       data={props.tableData}
-      editMode={props.editMode}
-      handleResizeColumn={props.handleResizeColumn}
-      sortTableColumn={sortTableColumn}
-      selectTableRow={selectTableRow}
-      pageNo={props.pageNo - 1}
-      updatePageNo={props.updatePageNo}
-      triggerRowSelection={props.triggerRowSelection}
-      nextPageClick={() => {
-        props.nextPageClick();
-      }}
-      prevPageClick={() => {
-        props.prevPageClick();
-      }}
-      serverSidePaginationEnabled={props.serverSidePaginationEnabled}
-      selectedRowIndex={props.selectedRowIndex}
-      selectedRowIndices={props.selectedRowIndices}
       disableDrag={() => {
         props.disableDrag(true);
       }}
+      editMode={props.editMode}
       enableDrag={() => {
         props.disableDrag(false);
       }}
-      searchTableData={props.searchTableData}
       filters={props.filters}
-      applyFilter={props.applyFilter}
-      compactMode={props.compactMode}
+      handleResizeColumn={props.handleResizeColumn}
+      height={props.height}
+      isLoading={props.isLoading}
+      nextPageClick={() => {
+        props.nextPageClick();
+      }}
+      pageNo={props.pageNo - 1}
+      pageSize={props.pageSize || 1}
+      prevPageClick={() => {
+        props.prevPageClick();
+      }}
+      searchKey={props.searchKey}
+      searchTableData={props.searchTableData}
+      selectTableRow={selectTableRow}
+      selectedRowIndex={props.selectedRowIndex}
+      selectedRowIndices={props.selectedRowIndices}
+      serverSidePaginationEnabled={props.serverSidePaginationEnabled}
+      sortTableColumn={sortTableColumn}
+      triggerRowSelection={props.triggerRowSelection}
       updateCompactMode={props.updateCompactMode}
+      updatePageNo={props.updatePageNo}
+      widgetId={props.widgetId}
+      widgetName={props.widgetName}
+      width={props.width}
     />
   );
-};
+}
 
 export default ReactTableComponent;
diff --git a/app/client/src/components/designSystems/appsmith/TabsComponent.tsx b/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
index 3fc1e98d9c..75a541f905 100644
--- a/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
@@ -112,7 +112,7 @@ const StyledText = styled.div<TabProps>`
   }
 `;
 
-const TabsComponent = (props: TabsComponentProps) => {
+function TabsComponent(props: TabsComponentProps) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { onTabChange, ...remainingProps } = props;
   const tabContainerRef: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
@@ -132,12 +132,12 @@ const TabsComponent = (props: TabsComponentProps) => {
           {props.tabs.map((tab, index) => (
             <StyledText
               className={`t--tab-${tab.label}`}
+              key={index}
               onClick={(event: React.MouseEvent<HTMLDivElement>) => {
                 onTabChange(tab.widgetId);
                 event.stopPropagation();
               }}
               selected={props.selectedTabWidgetId === tab.widgetId}
-              key={index}
             >
               {tab.label}
             </StyledText>
@@ -160,6 +160,6 @@ const TabsComponent = (props: TabsComponentProps) => {
       </ChildrenWrapper>
     </TabsContainerWrapper>
   );
-};
+}
 
 export default TabsComponent;
diff --git a/app/client/src/components/designSystems/appsmith/TextInputComponent.tsx b/app/client/src/components/designSystems/appsmith/TextInputComponent.tsx
index 8f8b766fc5..b6464432aa 100644
--- a/app/client/src/components/designSystems/appsmith/TextInputComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/TextInputComponent.tsx
@@ -126,14 +126,14 @@ export class BaseTextInput extends Component<TextInputProps, TextInputState> {
 
     return (
       <InputContainer className={className}>
-        <ErrorTooltip message={meta ? meta.error : ""} isOpen={errorIsOpen}>
+        <ErrorTooltip isOpen={errorIsOpen} message={meta ? meta.error : ""}>
           <TextInput
             hasError={hasError}
             inputRef={refHandler}
             {...input}
-            onFocus={this.handleFocus}
-            onBlur={this.handleBlur}
             autoComplete={"off"}
+            onBlur={this.handleBlur}
+            onFocus={this.handleFocus}
             {...rest}
           />
         </ErrorTooltip>
@@ -146,8 +146,8 @@ export class BaseTextInput extends Component<TextInputProps, TextInputState> {
  * Text Input Component
  * Has Icon, placholder, errors, etc.
  */
-const TextInputComponent = (props: TextInputProps & ComponentProps) => {
+function TextInputComponent(props: TextInputProps & ComponentProps) {
   return <BaseTextInput {...props} />;
-};
+}
 
 export default TextInputComponent;
diff --git a/app/client/src/components/designSystems/appsmith/VideoComponent.tsx b/app/client/src/components/designSystems/appsmith/VideoComponent.tsx
index aa569f8f29..b24fda9851 100644
--- a/app/client/src/components/designSystems/appsmith/VideoComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/VideoComponent.tsx
@@ -42,31 +42,27 @@ export default function VideoComponent(props: VideoComponentProps) {
     onError,
     player,
   } = props;
-  return (
-    <>
-      {url ? (
-        <ReactPlayer
-          url={url}
-          ref={player}
-          playing={autoplay}
-          controls={controls || true}
-          onStart={onStart}
-          onPlay={onPlay}
-          onPause={onPause}
-          onEnded={onEnded}
-          onReady={onReady}
-          onProgress={onProgress}
-          onSeek={onSeek}
-          onError={onError}
-          width="100%"
-          height="100%"
-          pip={false}
-        />
-      ) : (
-        <ErrorContainer>
-          <Error>{createMessage(ENTER_VIDEO_URL)}</Error>
-        </ErrorContainer>
-      )}
-    </>
+  return url ? (
+    <ReactPlayer
+      controls={controls || true}
+      height="100%"
+      onEnded={onEnded}
+      onError={onError}
+      onPause={onPause}
+      onPlay={onPlay}
+      onProgress={onProgress}
+      onReady={onReady}
+      onSeek={onSeek}
+      onStart={onStart}
+      pip={false}
+      playing={autoplay}
+      ref={player}
+      url={url}
+      width="100%"
+    />
+  ) : (
+    <ErrorContainer>
+      <Error>{createMessage(ENTER_VIDEO_URL)}</Error>
+    </ErrorContainer>
   );
 }
diff --git a/app/client/src/components/designSystems/appsmith/header/DeployLinkButton.tsx b/app/client/src/components/designSystems/appsmith/header/DeployLinkButton.tsx
index 7fd9615df8..47696ec88b 100644
--- a/app/client/src/components/designSystems/appsmith/header/DeployLinkButton.tsx
+++ b/app/client/src/components/designSystems/appsmith/header/DeployLinkButton.tsx
@@ -46,28 +46,26 @@ export const DeployLinkButton = withTheme((props: Props) => {
   };
 
   return (
-    <React.Fragment>
-      <Popover
-        modifiers={{ offset: { enabled: true, offset: "0, -3" } }}
-        content={
-          <DeployLinkDialog>
-            <DeployLink target="_blank" href={props.link}>
-              <DeployUrl>Current deployed version</DeployUrl>
-              <Icon
-                icon="share"
-                color={props.theme.colors.header.deployToolTipText}
-              />
-            </DeployLink>
-          </DeployLinkDialog>
-        }
-        canEscapeKeyClose={false}
-        onClose={onClose}
-        isOpen={isOpen}
-        position={PopoverPosition.BOTTOM_RIGHT}
-      >
-        <div onClick={() => setIsOpen(true)}>{props.trigger}</div>
-      </Popover>
-    </React.Fragment>
+    <Popover
+      canEscapeKeyClose={false}
+      content={
+        <DeployLinkDialog>
+          <DeployLink href={props.link} target="_blank">
+            <DeployUrl>Current deployed version</DeployUrl>
+            <Icon
+              color={props.theme.colors.header.deployToolTipText}
+              icon="share"
+            />
+          </DeployLink>
+        </DeployLinkDialog>
+      }
+      isOpen={isOpen}
+      modifiers={{ offset: { enabled: true, offset: "0, -3" } }}
+      onClose={onClose}
+      position={PopoverPosition.BOTTOM_RIGHT}
+    >
+      <div onClick={() => setIsOpen(true)}>{props.trigger}</div>
+    </Popover>
   );
 });
 
diff --git a/app/client/src/components/designSystems/appsmith/header/ThreeDotsLoading.tsx b/app/client/src/components/designSystems/appsmith/header/ThreeDotsLoading.tsx
index 6705113b6e..d306372002 100644
--- a/app/client/src/components/designSystems/appsmith/header/ThreeDotsLoading.tsx
+++ b/app/client/src/components/designSystems/appsmith/header/ThreeDotsLoading.tsx
@@ -56,7 +56,7 @@ type Props = {
   className?: string;
 };
 
-const ThreeDotLoading = (props: Props) => {
+function ThreeDotLoading(props: Props) {
   return (
     <Spinner className={props.className}>
       <div className="bounce1" />
@@ -64,6 +64,6 @@ const ThreeDotLoading = (props: Props) => {
       <div className="bounce3" />
     </Spinner>
   );
-};
+}
 
 export default ThreeDotLoading;
diff --git a/app/client/src/components/designSystems/appsmith/help/CollapsibleHelp.tsx b/app/client/src/components/designSystems/appsmith/help/CollapsibleHelp.tsx
index 7bdd33d935..f0712e1af1 100644
--- a/app/client/src/components/designSystems/appsmith/help/CollapsibleHelp.tsx
+++ b/app/client/src/components/designSystems/appsmith/help/CollapsibleHelp.tsx
@@ -45,7 +45,7 @@ export default function CollapsibleHelp(props: CollapsibleHelpProps) {
   return (
     <Container>
       <LeftBar />
-      <HelpIcon color={"#FDEBE8"} icon="help"></HelpIcon>
+      <HelpIcon color={"#FDEBE8"} icon="help" />
       <div>{props.children}</div>
     </Container>
   );
diff --git a/app/client/src/components/designSystems/appsmith/help/DocumentationSearch.tsx b/app/client/src/components/designSystems/appsmith/help/DocumentationSearch.tsx
index 93eeaf879a..89fe057084 100644
--- a/app/client/src/components/designSystems/appsmith/help/DocumentationSearch.tsx
+++ b/app/client/src/components/designSystems/appsmith/help/DocumentationSearch.tsx
@@ -84,7 +84,7 @@ const StyledDiscordIcon = styled(DiscordIcon)`
   }
 `;
 
-const Hit = (props: { hit: { path: string } }) => {
+function Hit(props: { hit: { path: string } }) {
   return (
     <div
       className="t--docHit"
@@ -93,7 +93,7 @@ const Hit = (props: { hit: { path: string } }) => {
       }}
     >
       <div className="hit-name t--docHitTitle">
-        <StyledDocumentIcon width={11.2} height={14} color="#181F24" />
+        <StyledDocumentIcon color="#181F24" height={14} width={11.2} />
         <Highlight attribute="title" hit={props.hit} />
         <StyledOpenLinkIcon
           className="t--docOpenLink open-link"
@@ -102,12 +102,12 @@ const Hit = (props: { hit: { path: string } }) => {
       </div>
     </div>
   );
-};
+}
 
-const DefaultHelpMenuItem = (props: {
+function DefaultHelpMenuItem(props: {
   item: { label: string; link?: string; id?: string; icon: React.ReactNode };
   onSelect: () => void;
-}) => {
+}) {
   return (
     <li className="ais-Hits-item">
       <div
@@ -134,7 +134,7 @@ const DefaultHelpMenuItem = (props: {
       </div>
     </li>
   );
-};
+}
 
 const SearchContainer = styled.div`
   height: 100%;
@@ -322,22 +322,22 @@ type HelpItem = {
 
 const HELP_MENU_ITEMS: HelpItem[] = [
   {
-    icon: <StyledDocumentIcon width={11.2} height={14} color="#181F24" />,
+    icon: <StyledDocumentIcon color="#181F24" height={14} width={11.2} />,
     label: "Documentation",
     link: "https://docs.appsmith.com/",
   },
   {
-    icon: <StyledGithubIcon width={11.2} height={14} color="#fff" />,
+    icon: <StyledGithubIcon color="#fff" height={14} width={11.2} />,
     label: "Report a bug",
     link: "https://github.com/appsmithorg/appsmith/issues/new/choose",
   },
   {
-    icon: <StyledChatIcon width={11.2} height={14} color="#fff" />,
+    icon: <StyledChatIcon color="#fff" height={14} width={11.2} />,
     label: "Chat with us",
     link: "https://github.com/appsmithorg/appsmith/discussions",
   },
   {
-    icon: <StyledDiscordIcon width={16} height={16} />,
+    icon: <StyledDiscordIcon height={16} width={16} />,
     label: "Join our Discord",
     link: "https://discord.gg/rBTTVJp",
   },
@@ -345,7 +345,7 @@ const HELP_MENU_ITEMS: HelpItem[] = [
 
 if (cloudHosting) {
   HELP_MENU_ITEMS[2] = {
-    icon: <StyledChatIcon width={11.2} height={14} color="#fff" />,
+    icon: <StyledChatIcon color="#fff" height={14} width={11.2} />,
     label: "Chat with us",
     id: "intercom-trigger",
   };
@@ -394,6 +394,10 @@ class DocumentationSearch extends React.Component<Props, State> {
         {!this.props.hideMinimizeBtn && (
           <Icon
             className="t--docsMinimize"
+            color="white"
+            icon="minus"
+            iconSize={14}
+            onClick={this.handleClose}
             style={{
               position: "absolute",
               top: 6,
@@ -401,10 +405,6 @@ class DocumentationSearch extends React.Component<Props, State> {
               cursor: "pointer",
               zIndex: 1,
             }}
-            icon="minus"
-            color="white"
-            iconSize={14}
-            onClick={this.handleClose}
           />
         )}
         <InstantSearch
@@ -417,8 +417,8 @@ class DocumentationSearch extends React.Component<Props, State> {
               <Header>
                 <StyledPoweredBy />
                 <SearchBox
-                  onChange={this.onSearchValueChange}
                   defaultRefinement={this.props.defaultRefinement}
+                  onChange={this.onSearchValueChange}
                 />
               </Header>
             )}
@@ -429,8 +429,8 @@ class DocumentationSearch extends React.Component<Props, State> {
                 <ul className="ais-Hits-list">
                   {HELP_MENU_ITEMS.map((item) => (
                     <DefaultHelpMenuItem
-                      key={item.label}
                       item={item}
+                      key={item.label}
                       onSelect={this.handleClose}
                     />
                   ))}
diff --git a/app/client/src/components/designSystems/appsmith/help/HelpModal.tsx b/app/client/src/components/designSystems/appsmith/help/HelpModal.tsx
index f71ff00a4f..0ce2e8032a 100644
--- a/app/client/src/components/designSystems/appsmith/help/HelpModal.tsx
+++ b/app/client/src/components/designSystems/appsmith/help/HelpModal.tsx
@@ -100,17 +100,17 @@ class HelpModal extends React.Component<Props> {
       <>
         {isHelpModalOpen && (
           <ModalComponent
-            canOutsideClickClose
             canEscapeKeyClose
-            scrollContents
-            height={MODAL_HEIGHT}
-            width={MODAL_WIDTH}
-            top={window.innerHeight - MODAL_BOTTOM_DISTANCE - MODAL_HEIGHT}
-            left={window.innerWidth - MODAL_RIGHT_DISTANCE - MODAL_WIDTH}
+            canOutsideClickClose
             data-cy={"help-modal"}
             hasBackDrop={false}
-            onClose={this.onClose}
+            height={MODAL_HEIGHT}
             isOpen
+            left={window.innerWidth - MODAL_RIGHT_DISTANCE - MODAL_WIDTH}
+            onClose={this.onClose}
+            scrollContents
+            top={window.innerHeight - MODAL_BOTTOM_DISTANCE - MODAL_HEIGHT}
+            width={MODAL_WIDTH}
             zIndex={layers.help}
           >
             <DocumentationSearch hitsPerPage={4} />
diff --git a/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx b/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx
index 542a31e81d..44b5338312 100644
--- a/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx
@@ -121,9 +121,9 @@ type ButtonStyleProps = {
 };
 
 // To be used in any other part of the app
-export const BaseButton = (props: IButtonProps & ButtonStyleProps) => {
+export function BaseButton(props: IButtonProps & ButtonStyleProps) {
   return <ButtonWrapper {...props} />;
-};
+}
 
 BaseButton.defaultProps = {
   accent: "secondary",
@@ -167,12 +167,12 @@ const mapButtonStyleToStyleName = (buttonStyle?: ButtonStyle) => {
   }
 };
 
-const RecaptchaComponent = (
+function RecaptchaComponent(
   props: {
     children: any;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   } & RecaptchaProps,
-) => {
+) {
   function handleError(event: React.MouseEvent<HTMLElement>, error: string) {
     Toaster.show({
       text: error,
@@ -209,41 +209,41 @@ const RecaptchaComponent = (
       {props.children}
     </div>
   );
-};
+}
 
-const BtnWrapper = (
+function BtnWrapper(
   props: {
     children: any;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   } & RecaptchaProps,
-) => {
+) {
   if (!props.googleRecaptchaKey)
     return <div onClick={props.onClick}>{props.children}</div>;
-  return <RecaptchaComponent {...props}></RecaptchaComponent>;
-};
+  return <RecaptchaComponent {...props} />;
+}
 
 // To be used with the canvas
-const ButtonContainer = (
+function ButtonContainer(
   props: ButtonContainerProps & ButtonStyleProps & RecaptchaProps,
-) => {
+) {
   return (
     <BtnWrapper
-      googleRecaptchaKey={props.googleRecaptchaKey}
       clickWithRecaptcha={props.clickWithRecaptcha}
+      googleRecaptchaKey={props.googleRecaptchaKey}
       onClick={props.onClick}
     >
       <BaseButton
-        loading={props.isLoading}
-        icon={props.icon}
-        rightIcon={props.rightIcon}
-        text={props.text}
-        filled={props.buttonStyle !== "SECONDARY_BUTTON"}
         accent={mapButtonStyleToStyleName(props.buttonStyle)}
         disabled={props.disabled}
+        filled={props.buttonStyle !== "SECONDARY_BUTTON"}
+        icon={props.icon}
+        loading={props.isLoading}
+        rightIcon={props.rightIcon}
+        text={props.text}
         type={props.type}
       />
     </BtnWrapper>
   );
-};
+}
 
 export default ButtonContainer;
diff --git a/app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx b/app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx
index 199aee5a1d..bcded2fe5a 100644
--- a/app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx
@@ -36,19 +36,19 @@ class CheckboxComponent extends React.Component<CheckboxComponentProps> {
       this.props.alignWidget === "RIGHT" ? Alignment.RIGHT : Alignment.LEFT;
     return (
       <CheckboxContainer
-        isValid={!(this.props.isRequired && !this.props.isChecked)}
         className={checkboxAlignClass}
+        isValid={!(this.props.isRequired && !this.props.isChecked)}
       >
         <Checkbox
-          label={this.props.label}
           alignIndicator={checkboxAlignClass}
+          checked={this.props.isChecked}
           className={
             this.props.isLoading ? Classes.SKELETON : Classes.RUNNING_TEXT
           }
-          style={{ borderRadius: 0 }}
-          onChange={this.onCheckChange}
           disabled={this.props.isDisabled}
-          checked={this.props.isChecked}
+          label={this.props.label}
+          onChange={this.onCheckChange}
+          style={{ borderRadius: 0 }}
         />
       </CheckboxContainer>
     );
diff --git a/app/client/src/components/designSystems/blueprint/CloseButton.tsx b/app/client/src/components/designSystems/blueprint/CloseButton.tsx
index a641527d48..01c96d2eac 100644
--- a/app/client/src/components/designSystems/blueprint/CloseButton.tsx
+++ b/app/client/src/components/designSystems/blueprint/CloseButton.tsx
@@ -22,13 +22,13 @@ const StyledButton = styled(Button)<CloseButtonProps>`
   }
 `;
 
-export const CloseButton = (props: CloseButtonProps) => {
+export function CloseButton(props: CloseButtonProps) {
   return (
     <StyledButton
       className={props.className}
       {...props}
-      rightIcon="cross"
       minimal
+      rightIcon="cross"
     />
   );
-};
+}
diff --git a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
index 27c60a9970..d85e2158d7 100644
--- a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
@@ -141,17 +141,17 @@ class DatePickerComponent extends React.Component<
           >
             <DateInput
               className={this.props.isLoading ? "bp3-skeleton" : ""}
+              closeOnSelection
+              disabled={this.props.isDisabled}
               formatDate={this.formatDate}
+              maxDate={maxDate}
+              minDate={minDate}
+              onChange={this.onDateSelected}
               parseDate={this.parseDate}
               placeholder={"Select Date"}
-              disabled={this.props.isDisabled}
-              showActionsBar={true}
+              showActionsBar
               timePrecision={TimePrecision.MINUTE}
-              closeOnSelection
-              onChange={this.onDateSelected}
               value={value}
-              minDate={minDate}
-              maxDate={maxDate}
             />
           </ErrorTooltip>
         }
diff --git a/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx b/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx
index a181b53f74..13f2aaf2e5 100644
--- a/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx
+++ b/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx
@@ -142,17 +142,17 @@ class DatePickerComponent extends React.Component<
           >
             <DateInput
               className={this.props.isLoading ? "bp3-skeleton" : ""}
+              closeOnSelection
+              disabled={this.props.isDisabled}
               formatDate={this.formatDate}
+              maxDate={maxDate}
+              minDate={minDate}
+              onChange={this.onDateSelected}
               parseDate={this.parseDate}
               placeholder={"Select Date"}
-              disabled={this.props.isDisabled}
-              showActionsBar={true}
+              showActionsBar
               timePrecision={TimePrecision.MINUTE}
-              closeOnSelection
-              onChange={this.onDateSelected}
               value={value}
-              minDate={minDate}
-              maxDate={maxDate}
             />
           </ErrorTooltip>
         }
diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index 5c1b1de9b0..f5a45770fe 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -258,17 +258,17 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
           {this.props.selectionType === "SINGLE_SELECT" ? (
             <StyledSingleDropDown
               className={this.props.isLoading ? Classes.SKELETON : ""}
-              items={this.props.options}
-              filterable={true}
-              itemRenderer={this.renderSingleSelectItem}
-              onItemSelect={this.onItemSelect}
               disabled={this.props.disabled}
+              filterable
+              itemListPredicate={this.itemListPredicate}
+              itemRenderer={this.renderSingleSelectItem}
+              items={this.props.options}
+              onItemSelect={this.onItemSelect}
               popoverProps={{
                 minimal: true,
                 usePortal: true,
                 popoverClassName: "select-popover-wrapper",
               }}
-              itemListPredicate={this.itemListPredicate}
             >
               <Button
                 rightIcon={IconNames.CHEVRON_DOWN}
@@ -283,16 +283,22 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
             </StyledSingleDropDown>
           ) : (
             <StyledMultiDropDown
+              className={this.props.isLoading ? Classes.SKELETON : ""}
+              height={this.props.height}
+              hideCloseButtonIndex={hideCloseButtonIndex}
+              itemListPredicate={this.itemListPredicate}
+              itemRenderer={this.renderMultiSelectItem}
+              items={this.props.options}
+              onItemSelect={this.onItemSelect}
+              placeholder={this.props.placeholder}
+              popoverProps={{
+                minimal: true,
+                usePortal: true,
+                popoverClassName: "select-popover-wrapper",
+              }}
               resetOnSelect
               scrollToActiveItem={false}
-              className={this.props.isLoading ? Classes.SKELETON : ""}
-              items={this.props.options}
-              itemListPredicate={this.itemListPredicate}
-              placeholder={this.props.placeholder}
-              tagRenderer={this.renderTag}
-              itemRenderer={this.renderMultiSelectItem}
               selectedItems={selectedItems}
-              height={this.props.height}
               tagInputProps={{
                 onRemove: this.onItemRemoved,
                 tagProps: (value, index) => ({
@@ -308,13 +314,7 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
                 fill: true,
                 rightElement: <Icon icon={IconNames.CHEVRON_DOWN} />,
               }}
-              hideCloseButtonIndex={hideCloseButtonIndex}
-              onItemSelect={this.onItemSelect}
-              popoverProps={{
-                minimal: true,
-                usePortal: true,
-                popoverClassName: "select-popover-wrapper",
-              }}
+              tagRenderer={this.renderTag}
               width={this.props.width}
             />
           )}
@@ -365,8 +365,8 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
     const isSelected: boolean = this.isOptionSelected(option);
     return (
       <MenuItem
-        className="single-select"
         active={isSelected}
+        className="single-select"
         key={option.value}
         onClick={itemProps.handleClick}
         text={option.label}
@@ -383,19 +383,17 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
     }
     const isSelected: boolean = this.isOptionSelected(option);
     const content: ReactNode = (
-      <React.Fragment>
-        <StyledCheckbox
-          checked={isSelected}
-          label={option.label}
-          alignIndicator="left"
-          onChange={(e: any) => itemProps.handleClick(e)}
-        />
-      </React.Fragment>
+      <StyledCheckbox
+        alignIndicator="left"
+        checked={isSelected}
+        label={option.label}
+        onChange={(e: any) => itemProps.handleClick(e)}
+      />
     );
     return (
       <MenuItem
-        className="multi-select"
         active={isSelected}
+        className="multi-select"
         key={option.value}
         text={content}
       />
diff --git a/app/client/src/components/designSystems/blueprint/InputComponent.tsx b/app/client/src/components/designSystems/blueprint/InputComponent.tsx
index cfb21a3d02..24d684b7fc 100644
--- a/app/client/src/components/designSystems/blueprint/InputComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/InputComponent.tsx
@@ -169,39 +169,39 @@ class InputComponent extends React.Component<
 
   private numericInputComponent = () => (
     <NumericInput
-      value={this.props.value}
-      placeholder={this.props.placeholder}
-      min={this.props.minNum}
-      max={this.props.maxNum}
-      maxLength={this.props.maxChars}
+      allowNumericCharactersOnly
+      className={this.props.isLoading ? "bp3-skeleton" : Classes.FILL}
       disabled={this.props.disabled}
       intent={this.props.intent}
-      className={this.props.isLoading ? "bp3-skeleton" : Classes.FILL}
-      onValueChange={this.onNumberChange}
       leftIcon={
         this.props.inputType === "PHONE_NUMBER" ? "phone" : this.props.leftIcon
       }
-      type={this.props.inputType === "PHONE_NUMBER" ? "tel" : undefined}
-      allowNumericCharactersOnly
-      stepSize={this.props.stepSize}
-      onFocus={() => this.setFocusState(true)}
+      max={this.props.maxNum}
+      maxLength={this.props.maxChars}
+      min={this.props.minNum}
       onBlur={() => this.setFocusState(false)}
+      onFocus={() => this.setFocusState(true)}
       onKeyDown={this.onKeyDown}
+      onValueChange={this.onNumberChange}
+      placeholder={this.props.placeholder}
+      stepSize={this.props.stepSize}
+      type={this.props.inputType === "PHONE_NUMBER" ? "tel" : undefined}
+      value={this.props.value}
     />
   );
   private textAreaInputComponent = () => (
     <TextArea
-      value={this.props.value}
-      placeholder={this.props.placeholder}
-      disabled={this.props.disabled}
-      maxLength={this.props.maxChars}
-      intent={this.props.intent}
-      onChange={this.onTextChange}
       className={this.props.isLoading ? "bp3-skeleton" : ""}
+      disabled={this.props.disabled}
       growVertically={false}
-      onFocus={() => this.setFocusState(true)}
+      intent={this.props.intent}
+      maxLength={this.props.maxChars}
       onBlur={() => this.setFocusState(false)}
+      onChange={this.onTextChange}
+      onFocus={() => this.setFocusState(true)}
       onKeyDown={this.onKeyDownTextArea}
+      placeholder={this.props.placeholder}
+      value={this.props.value}
     />
   );
 
@@ -210,13 +210,15 @@ class InputComponent extends React.Component<
       this.textAreaInputComponent()
     ) : (
       <InputGroup
-        value={this.props.value}
-        placeholder={this.props.placeholder}
-        disabled={this.props.disabled}
-        maxLength={this.props.maxChars}
-        intent={this.props.intent}
-        onChange={this.onTextChange}
         className={this.props.isLoading ? "bp3-skeleton" : ""}
+        disabled={this.props.disabled}
+        intent={this.props.intent}
+        maxLength={this.props.maxChars}
+        onBlur={() => this.setFocusState(false)}
+        onChange={this.onTextChange}
+        onFocus={() => this.setFocusState(true)}
+        onKeyDown={this.onKeyDown}
+        placeholder={this.props.placeholder}
         rightElement={
           this.props.inputType === "PASSWORD" ? (
             <Button
@@ -230,9 +232,7 @@ class InputComponent extends React.Component<
           )
         }
         type={this.getType(this.props.inputType)}
-        onFocus={() => this.setFocusState(true)}
-        onBlur={() => this.setFocusState(false)}
-        onKeyDown={this.onKeyDown}
+        value={this.props.value}
       />
     );
   private renderInputComponent = (inputType: InputType, isTextArea: boolean) =>
@@ -244,9 +244,9 @@ class InputComponent extends React.Component<
     return (
       <InputComponentWrapper
         fill
+        hasError={this.props.isInvalid}
         multiline={this.props.multiline.toString()}
         numeric={this.isNumberInputType(this.props.inputType)}
-        hasError={this.props.isInvalid}
       >
         {this.props.label && (
           <Label
diff --git a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
index a5b8d9a06a..e287d0662e 100644
--- a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
@@ -65,7 +65,7 @@ export type ModalComponentProps = {
 };
 
 /* eslint-disable react/display-name */
-export const ModalComponent = (props: ModalComponentProps) => {
+export function ModalComponent(props: ModalComponentProps) {
   const modalContentRef: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
     null,
   );
@@ -76,29 +76,29 @@ export const ModalComponent = (props: ModalComponentProps) => {
   }, [props.scrollContents]);
   return (
     <Container
-      width={props.width}
       height={props.height}
-      top={props.top}
       left={props.left}
+      top={props.top}
+      width={props.width}
       zIndex={props.zIndex !== undefined ? props.zIndex : 2}
     >
       <Overlay
-        isOpen={props.isOpen}
-        onClose={props.onClose}
-        canOutsideClickClose={props.canOutsideClickClose}
         canEscapeKeyClose={props.canEscapeKeyClose}
-        usePortal={false}
+        canOutsideClickClose={props.canOutsideClickClose}
         enforceFocus={false}
         hasBackdrop={
           props.hasBackDrop !== undefined ? !!props.hasBackDrop : true
         }
+        isOpen={props.isOpen}
+        onClose={props.onClose}
+        usePortal={false}
       >
         <div>
           <Content
-            scroll={props.scrollContents}
             className={`${getCanvasClassName()} ${props.className}`}
             height={props.height}
             ref={modalContentRef}
+            scroll={props.scrollContents}
           >
             {props.children}
           </Content>
@@ -106,6 +106,6 @@ export const ModalComponent = (props: ModalComponentProps) => {
       </Overlay>
     </Container>
   );
-};
+}
 
 export default ModalComponent;
diff --git a/app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx b/app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx
index 5b9dc024fd..0695170737 100644
--- a/app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx
@@ -48,17 +48,17 @@ class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
           </Label>
         )}
         <StyledRadioGroup
-          selectedValue={this.props.selectedOptionValue}
-          onChange={this.onRadioSelectionChange}
           disabled={this.props.isDisabled}
+          onChange={this.onRadioSelectionChange}
+          selectedValue={this.props.selectedOptionValue}
         >
           {this.props.options.map((option) => {
             return (
               <Radio
                 className={this.props.isLoading ? "bp3-skeleton" : ""}
+                key={option.value}
                 label={option.label}
                 value={option.value}
-                key={option.value}
               />
             );
           })}
diff --git a/app/client/src/components/designSystems/blueprint/SpinnerComponent.tsx b/app/client/src/components/designSystems/blueprint/SpinnerComponent.tsx
index c66f92a0bc..5b761e04c0 100644
--- a/app/client/src/components/designSystems/blueprint/SpinnerComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/SpinnerComponent.tsx
@@ -6,9 +6,9 @@ class SpinnerComponent extends React.Component<SpinnerComponentProps> {
   render() {
     return (
       <Spinner
+        intent={this.props.intent}
         size={this.props.size}
         value={this.props.value}
-        intent={this.props.intent}
       />
     );
   }
diff --git a/app/client/src/components/designSystems/blueprint/SwitchComponent.tsx b/app/client/src/components/designSystems/blueprint/SwitchComponent.tsx
index 736ae5c615..b0b2475a58 100644
--- a/app/client/src/components/designSystems/blueprint/SwitchComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/SwitchComponent.tsx
@@ -26,14 +26,14 @@ const SwitchComponentContainer = styled.div`
   ${BlueprintControlTransform}
 `;
 
-export const SwitchComponent: React.FC<SwitchComponentProps> = ({
+export function SwitchComponent({
   label,
   isSwitchedOn,
   alignWidget,
   onChange,
   isDisabled,
   isLoading,
-}) => {
+}: SwitchComponentProps) {
   const switchAlignClass =
     alignWidget === "RIGHT" ? Alignment.RIGHT : Alignment.LEFT;
 
@@ -41,8 +41,7 @@ export const SwitchComponent: React.FC<SwitchComponentProps> = ({
     <SwitchComponentContainer className={switchAlignClass}>
       <Switch
         alignIndicator={switchAlignClass}
-        label={label}
-        disabled={isDisabled}
+        checked={isSwitchedOn}
         className={
           isLoading
             ? `${Classes.SKELETON} t--switch-widget-loading`
@@ -52,9 +51,10 @@ export const SwitchComponent: React.FC<SwitchComponentProps> = ({
                   : "t--switch-widget-inactive"
               }`
         }
-        checked={isSwitchedOn}
+        disabled={isDisabled}
+        label={label}
         onChange={() => onChange(!isSwitchedOn)}
       />
     </SwitchComponentContainer>
   );
-};
+}
diff --git a/app/client/src/components/designSystems/blueprint/TextComponent.tsx b/app/client/src/components/designSystems/blueprint/TextComponent.tsx
index f359fec4de..2efd60d384 100644
--- a/app/client/src/components/designSystems/blueprint/TextComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/TextComponent.tsx
@@ -57,6 +57,7 @@ export const StyledText = styled(Text)<{
   font-size: ${(props) => props?.fontSize && TEXT_SIZES[props?.fontSize]};
   span {
     width: 100%;
+    line-height: 1.2;
   }
 `;
 
@@ -86,14 +87,14 @@ class TextComponent extends React.Component<TextComponentProps> {
     return (
       <TextContainer>
         <StyledText
-          scroll={!!this.props.shouldScroll}
-          textAlign={textAlign}
-          fontSize={fontSize}
-          ellipsize={ellipsize}
-          fontStyle={fontStyle}
-          textColor={textColor}
           backgroundColor={backgroundColor}
           className={this.props.isLoading ? "bp3-skeleton" : "bp3-ui-text"}
+          ellipsize={ellipsize}
+          fontSize={fontSize}
+          fontStyle={fontStyle}
+          scroll={!!this.props.shouldScroll}
+          textAlign={textAlign}
+          textColor={textColor}
         >
           <Interweave
             content={text}
diff --git a/app/client/src/components/editorComponents/ActionCreator.tsx b/app/client/src/components/editorComponents/ActionCreator.tsx
index 3996db1967..9b15a4ff96 100644
--- a/app/client/src/components/editorComponents/ActionCreator.tsx
+++ b/app/client/src/components/editorComponents/ActionCreator.tsx
@@ -272,18 +272,18 @@ const views = {
   [ViewTypes.SELECTOR_VIEW]: function SelectorView(props: SelectorViewProps) {
     return (
       <FieldWrapper>
-        <ControlWrapper key={props.label} isAction={true}>
+        <ControlWrapper isAction key={props.label}>
           {props.label && <label>{props.label}</label>}
           <TreeDropdown
-            optionTree={props.options}
-            selectedValue={props.get(props.value, false) as string}
             defaultText={props.defaultText}
+            displayValue={props.displayValue}
+            getDefaults={props.getDefaults}
             onSelect={(value, defaultValue?: string) => {
               props.set(value, defaultValue);
             }}
-            getDefaults={props.getDefaults}
+            optionTree={props.options}
             selectedLabelModifier={props.selectedLabelModifier}
-            displayValue={props.displayValue}
+            selectedValue={props.get(props.value, false) as string}
           />
         </ControlWrapper>
       </FieldWrapper>
@@ -291,10 +291,10 @@ const views = {
   },
   [ViewTypes.KEY_VALUE_VIEW]: function KeyValueView(props: KeyValueViewProps) {
     return (
-      <ControlWrapper key={props.label} isAction={true}>
+      <ControlWrapper isAction key={props.label}>
         <KeyValueComponent
-          pairs={props.get(props.value, false) as DropdownOption[]}
           addLabel={"Query Params"}
+          pairs={props.get(props.value, false) as DropdownOption[]}
           updatePairs={(pageParams: DropdownOption[]) => props.set(pageParams)}
         />
       </ControlWrapper>
@@ -303,11 +303,15 @@ const views = {
   [ViewTypes.TEXT_VIEW]: function TextView(props: TextViewProps) {
     return (
       <FieldWrapper>
-        <ControlWrapper key={props.label} isAction={true}>
+        <ControlWrapper isAction key={props.label}>
           {props.label && <label>{props.label}</label>}
           <InputText
+            additionalAutocomplete={props.additionalAutoComplete}
+            errorMessage={props.validationMessage}
+            evaluatedValue={props.get(props.value, false) as string}
+            expected={"string"}
+            isValid={props.isValid}
             label={props.label}
-            value={props.get(props.value, false) as string}
             onChange={(event: any) => {
               if (event.target) {
                 props.set(event.target.value);
@@ -315,11 +319,7 @@ const views = {
                 props.set(event);
               }
             }}
-            expected={"string"}
-            evaluatedValue={props.get(props.value, false) as string}
-            isValid={props.isValid}
-            errorMessage={props.validationMessage}
-            additionalAutocomplete={props.additionalAutoComplete}
+            value={props.get(props.value, false) as string}
           />
         </ControlWrapper>
       </FieldWrapper>
@@ -813,10 +813,10 @@ function renderField(props: {
             ? field.value
             : undefined;
         // eslint-disable-next-line react/display-name
-        selectedLabelModifier = (
+        selectedLabelModifier = function(
           option: TreeDropdownOption,
           displayValue?: string,
-        ) => {
+        ) {
           if (
             option.type === ActionType.api ||
             option.type === ActionType.query
@@ -976,7 +976,7 @@ function Fields(props: {
   if (fields[0].field === FieldType.ACTION_SELECTOR_FIELD) {
     const remainingFields = fields.slice(1);
     return (
-      <React.Fragment>
+      <>
         {renderField({
           field: fields[0],
           ...otherProps,
@@ -991,25 +991,25 @@ function Fields(props: {
               return (
                 <li key={index}>
                   <Fields
-                    value={selectorField.value}
-                    fields={field}
-                    label={selectorField.label}
-                    isValid={props.isValid}
-                    validationMessage={props.validationMessage}
+                    additionalAutoComplete={props.additionalAutoComplete}
                     apiOptionTree={props.apiOptionTree}
-                    widgetOptionTree={props.widgetOptionTree}
-                    queryOptionTree={props.queryOptionTree}
-                    modalDropdownList={props.modalDropdownList}
-                    pageDropdownOptions={props.pageDropdownOptions}
                     depth={props.depth + 1}
+                    fields={field}
+                    isValid={props.isValid}
+                    label={selectorField.label}
                     maxDepth={props.maxDepth}
+                    modalDropdownList={props.modalDropdownList}
                     onValueChange={(value: any) => {
                       const parentValue = selectorField.getParentValue(
                         value.substring(2, value.length - 2),
                       );
                       props.onValueChange(parentValue);
                     }}
-                    additionalAutoComplete={props.additionalAutoComplete}
+                    pageDropdownOptions={props.pageDropdownOptions}
+                    queryOptionTree={props.queryOptionTree}
+                    validationMessage={props.validationMessage}
+                    value={selectorField.value}
+                    widgetOptionTree={props.widgetOptionTree}
                   />
                 </li>
               );
@@ -1025,7 +1025,7 @@ function Fields(props: {
             }
           })}
         </ul>
-      </React.Fragment>
+      </>
     );
   } else {
     const ui = fields.map((field: any, index: number) => {
@@ -1036,25 +1036,25 @@ function Fields(props: {
         const selectorField = field[0];
         return (
           <Fields
-            key={index}
-            value={selectorField.value}
-            fields={field}
-            label={selectorField.label}
-            isValid={props.isValid}
-            validationMessage={props.validationMessage}
             apiOptionTree={props.apiOptionTree}
-            widgetOptionTree={props.widgetOptionTree}
-            queryOptionTree={props.queryOptionTree}
-            modalDropdownList={props.modalDropdownList}
-            pageDropdownOptions={props.pageDropdownOptions}
             depth={props.depth + 1}
+            fields={field}
+            isValid={props.isValid}
+            key={index}
+            label={selectorField.label}
             maxDepth={props.maxDepth}
+            modalDropdownList={props.modalDropdownList}
             onValueChange={(value: any) => {
               const parentValue = selectorField.getParentValue(
                 value.substring(2, value.length - 2),
               );
               props.onValueChange(parentValue);
             }}
+            pageDropdownOptions={props.pageDropdownOptions}
+            queryOptionTree={props.queryOptionTree}
+            validationMessage={props.validationMessage}
+            value={selectorField.value}
+            widgetOptionTree={props.widgetOptionTree}
           />
         );
       } else {
@@ -1064,7 +1064,7 @@ function Fields(props: {
         });
       }
     });
-    return <>{ui}</>;
+    return ui;
   }
 }
 
@@ -1208,19 +1208,19 @@ export function ActionCreator(props: ActionCreatorProps) {
   return (
     <TreeStructure>
       <Fields
-        value={props.value}
+        additionalAutoComplete={props.additionalAutoComplete}
+        apiOptionTree={apiOptionTree}
+        depth={1}
         fields={fields}
         isValid={props.isValid}
-        validationMessage={props.validationMessage}
-        apiOptionTree={apiOptionTree}
-        widgetOptionTree={widgetOptionTree}
-        queryOptionTree={queryOptionTree}
-        modalDropdownList={modalDropdownList}
-        pageDropdownOptions={pageDropdownOptions}
-        onValueChange={props.onValueChange}
-        depth={1}
         maxDepth={1}
-        additionalAutoComplete={props.additionalAutoComplete}
+        modalDropdownList={modalDropdownList}
+        onValueChange={props.onValueChange}
+        pageDropdownOptions={pageDropdownOptions}
+        queryOptionTree={queryOptionTree}
+        validationMessage={props.validationMessage}
+        value={props.value}
+        widgetOptionTree={widgetOptionTree}
       />
     </TreeStructure>
   );
diff --git a/app/client/src/components/editorComponents/ActionNameEditor.tsx b/app/client/src/components/editorComponents/ActionNameEditor.tsx
index 0d72e51bed..db511566ca 100644
--- a/app/client/src/components/editorComponents/ActionNameEditor.tsx
+++ b/app/client/src/components/editorComponents/ActionNameEditor.tsx
@@ -58,7 +58,7 @@ type ActionNameEditorProps = {
   page?: string;
 };
 
-export const ActionNameEditor = (props: ActionNameEditorProps) => {
+export function ActionNameEditor(props: ActionNameEditorProps) {
   const params = useParams<{ apiId?: string; queryId?: string }>();
   const isNew =
     new URLSearchParams(window.location.search).get("editName") === "true";
@@ -161,19 +161,19 @@ export const ActionNameEditor = (props: ActionNameEditorProps) => {
         <NewEditableText
           className="t--action-name-edit-field"
           defaultValue={currentActionConfig ? currentActionConfig.name : ""}
-          placeholder="Name of the API in camelCase"
+          editInteractionKind={NewEditInteractionKind.SINGLE}
+          fill
           forceDefault={forceUpdate}
-          onBlur={handleAPINameChange}
-          isInvalid={isInvalidActionName}
-          valueTransform={removeSpecialChars}
+          hideEditIcon
           isEditingDefault={isNew && !hideEditIcon}
+          isInvalid={isInvalidActionName}
+          onBlur={handleAPINameChange}
+          placeholder="Name of the API in camelCase"
           savingState={
             saveStatus.isSaving ? SavingState.STARTED : SavingState.NOT_STARTED
           }
-          editInteractionKind={NewEditInteractionKind.SINGLE}
-          hideEditIcon
           underline
-          fill
+          valueTransform={removeSpecialChars}
         />
       ) : (
         <div
@@ -183,22 +183,22 @@ export const ActionNameEditor = (props: ActionNameEditorProps) => {
         >
           <EditableText
             className="t--action-name-edit-field"
-            type="text"
             defaultValue={currentActionConfig ? currentActionConfig.name : ""}
-            placeholder="Name of the API in camelCase"
-            forceDefault={forceUpdate}
-            onTextChanged={handleAPINameChange}
-            isInvalid={isInvalidActionName}
-            valueTransform={removeSpecialChars}
-            isEditingDefault={isNew}
-            updating={saveStatus.isSaving}
             editInteractionKind={EditInteractionKind.SINGLE}
+            forceDefault={forceUpdate}
+            isEditingDefault={isNew}
+            isInvalid={isInvalidActionName}
+            onTextChanged={handleAPINameChange}
+            placeholder="Name of the API in camelCase"
+            type="text"
+            updating={saveStatus.isSaving}
+            valueTransform={removeSpecialChars}
           />
           {saveStatus.isSaving && <Spinner size={16} />}
         </div>
       )}
     </ApiNameWrapper>
   );
-};
+}
 
 export default ActionNameEditor;
diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx
index 368101f4fa..191890a039 100644
--- a/app/client/src/components/editorComponents/ApiResponseView.tsx
+++ b/app/client/src/components/editorComponents/ApiResponseView.tsx
@@ -156,7 +156,7 @@ const StatusCodeText = styled(BaseText)<{ code: string }>`
     props.code.startsWith("2") ? props.theme.colors.primaryOld : Colors.RED};
 `;
 
-const ApiResponseView = (props: Props) => {
+function ApiResponseView(props: Props) {
   const {
     match: {
       params: { apiId },
@@ -193,20 +193,18 @@ const ApiResponseView = (props: Props) => {
       panelComponent: (
         <ResponseTabWrapper>
           {hasFailed && !isRunning && requestDebugVisible && (
-            <>
-              <Callout
-                text={createMessage(CHECK_REQUEST_BODY)}
-                label={
-                  <FailedMessage>
-                    <DebugButton onClick={onDebugClick} />
-                  </FailedMessage>
-                }
-                variant={Variant.danger}
-                fill
-                closeButton
-                onClose={() => setRequestDebugVisible(false)}
-              />
-            </>
+            <Callout
+              closeButton
+              fill
+              label={
+                <FailedMessage>
+                  <DebugButton onClick={onDebugClick} />
+                </FailedMessage>
+              }
+              onClose={() => setRequestDebugVisible(false)}
+              text={createMessage(CHECK_REQUEST_BODY)}
+              variant={Variant.danger}
+            />
           )}
           {_.isEmpty(response.statusCode) ? (
             <NoResponseContainer>
@@ -215,13 +213,13 @@ const ApiResponseView = (props: Props) => {
             </NoResponseContainer>
           ) : (
             <ReadOnlyEditor
+              folding
+              height={"100%"}
               input={{
                 value: response.body
                   ? JSON.stringify(response.body, null, 2)
                   : "",
               }}
-              height={"100%"}
-              folding={true}
             />
           )}
         </ResponseTabWrapper>
@@ -279,18 +277,28 @@ const ApiResponseView = (props: Props) => {
                   </Text>
                 </Flex>
               )}
+              {!_.isEmpty(response.body) && Array.isArray(response.body) && (
+                <Flex>
+                  <Text type={TextType.P3}>Result: </Text>
+                  <Text type={TextType.H5}>
+                    {`${response.body.length} Record${
+                      response.body.length > 1 ? "s" : ""
+                    }`}
+                  </Text>
+                </Flex>
+              )}
             </ResponseMetaInfo>
           </ResponseMetaWrapper>
         )}
         <TabComponent
-          tabs={tabs}
-          selectedIndex={selectedIndex}
           onSelect={setSelectedIndex}
+          selectedIndex={selectedIndex}
+          tabs={tabs}
         />
       </TabbedViewWrapper>
     </ResponseContainer>
   );
-};
+}
 
 const mapStateToProps = (state: AppState): ReduxStateProps => {
   return {
diff --git a/app/client/src/components/editorComponents/Button.tsx b/app/client/src/components/editorComponents/Button.tsx
index e3d29c20c8..1aea692683 100644
--- a/app/client/src/components/editorComponents/Button.tsx
+++ b/app/client/src/components/editorComponents/Button.tsx
@@ -133,8 +133,8 @@ export const Button = (props: ButtonProps) => {
   } else
     return (
       <StyledButton
-        rightIcon={rightIcon}
         icon={icon}
+        rightIcon={rightIcon}
         {...baseProps}
         onClick={props.onClick}
       />
diff --git a/app/client/src/components/editorComponents/Checkbox.tsx b/app/client/src/components/editorComponents/Checkbox.tsx
index ce890062fc..e8e1f85990 100644
--- a/app/client/src/components/editorComponents/Checkbox.tsx
+++ b/app/client/src/components/editorComponents/Checkbox.tsx
@@ -39,7 +39,7 @@ export const StyledCheckbox = styled(BlueprintCheckbox)<CheckboxProps>`
   }
 `;
 
-export const Checkbox = (props: CheckboxProps) => {
+export function Checkbox(props: CheckboxProps) {
   const handleChange = (e: any) => {
     props.input &&
       props.input.onChange &&
@@ -49,11 +49,11 @@ export const Checkbox = (props: CheckboxProps) => {
     <StyledCheckbox
       {...props}
       alignIndicator={props.align}
-      onChange={handleChange}
       checked={props.input ? !!props.input.checked : false}
       label={props.label}
+      onChange={handleChange}
     />
   );
-};
+}
 
 export default Checkbox;
diff --git a/app/client/src/components/editorComponents/CloseEditor.tsx b/app/client/src/components/editorComponents/CloseEditor.tsx
index 0f8d3178c9..7b71b40e8e 100644
--- a/app/client/src/components/editorComponents/CloseEditor.tsx
+++ b/app/client/src/components/editorComponents/CloseEditor.tsx
@@ -35,7 +35,7 @@ const IconContainer = styled.div`
   }
 `;
 
-const CloseEditor = () => {
+function CloseEditor() {
   const applicationId = useSelector(getCurrentApplicationId);
   const pageId = useSelector(getCurrentPageId);
 
@@ -51,24 +51,24 @@ const CloseEditor = () => {
 
   return (
     <TooltipComponent
-      minimal
-      position={Position.BOTTOM_LEFT}
       content={
-        <Text type={TextType.P3} style={{ color: "#ffffff" }}>
+        <Text style={{ color: "#ffffff" }} type={TextType.P3}>
           Close
         </Text>
       }
       minWidth="auto !important"
+      minimal
+      position={Position.BOTTOM_LEFT}
     >
       <IconContainer onClick={handleClose}>
         <Icon
+          className="close-modal-icon"
           name="close-modal"
           size={IconSize.LARGE}
-          className="close-modal-icon"
         />
       </IconContainer>
     </TooltipComponent>
   );
-};
+}
 
 export default CloseEditor;
diff --git a/app/client/src/components/editorComponents/CodeEditor/BindingPrompt.tsx b/app/client/src/components/editorComponents/CodeEditor/BindingPrompt.tsx
index 68761876b9..22471c3910 100644
--- a/app/client/src/components/editorComponents/CodeEditor/BindingPrompt.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/BindingPrompt.tsx
@@ -31,11 +31,11 @@ const CurlyBraces = styled.span`
   margin: 0px 2px;
 `;
 
-const BindingPrompt = (props: {
+function BindingPrompt(props: {
   promptMessage?: React.ReactNode | string;
   isOpen: boolean;
   editorTheme?: EditorTheme;
-}): JSX.Element => {
+}): JSX.Element {
   const promptRef = useRef<HTMLDivElement>(null);
   let bottomOffset = 30;
   const customMessage = !!props.promptMessage;
@@ -48,22 +48,22 @@ const BindingPrompt = (props: {
   }
   return (
     <Wrapper
-      className="t--no-binding-prompt"
-      ref={promptRef}
       bottomOffset={bottomOffset}
-      visible={props.isOpen}
+      className="t--no-binding-prompt"
       customMessage={customMessage}
       editorTheme={props.editorTheme}
+      ref={promptRef}
+      visible={props.isOpen}
     >
       {props.promptMessage ? (
         props.promptMessage
       ) : (
-        <React.Fragment>
+        <>
           Type <CurlyBraces>{"{{"}</CurlyBraces> to see a list of variables
-        </React.Fragment>
+        </>
       )}
     </Wrapper>
   );
-};
+}
 
 export default BindingPrompt;
diff --git a/app/client/src/components/editorComponents/CodeEditor/CodeEditor.test.tsx b/app/client/src/components/editorComponents/CodeEditor/CodeEditor.test.tsx
index d353e014f6..0448bac759 100644
--- a/app/client/src/components/editorComponents/CodeEditor/CodeEditor.test.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/CodeEditor.test.tsx
@@ -22,18 +22,18 @@ describe("CodeEditor", () => {
       <Provider store={store}>
         <ThemeProvider theme={finalTheme}>
           <CodeEditor
+            additionalDynamicData={{}}
+            hideEvaluatedValue={false}
             input={{
               value: "",
               onChange: () => {
                 //
               },
             }}
-            hideEvaluatedValue={false}
-            additionalDynamicData={{}}
             mode={EditorModes.TEXT}
-            theme={EditorTheme.LIGHT}
             size={EditorSize.COMPACT}
             tabBehaviour={TabBehaviour.INDENT}
+            theme={EditorTheme.LIGHT}
           />
         </ThemeProvider>
       </Provider>,
@@ -52,18 +52,18 @@ describe("CodeEditor", () => {
       <Provider store={store}>
         <ThemeProvider theme={finalTheme}>
           <CodeEditor
+            additionalDynamicData={{}}
+            hideEvaluatedValue
             input={{
               value: "",
               onChange: () => {
                 //
               },
             }}
-            hideEvaluatedValue={true}
-            additionalDynamicData={{}}
             mode={EditorModes.TEXT}
-            theme={EditorTheme.LIGHT}
             size={EditorSize.COMPACT}
             tabBehaviour={TabBehaviour.INDENT}
+            theme={EditorTheme.LIGHT}
           />
         </ThemeProvider>
       </Provider>,
diff --git a/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.test.tsx b/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.test.tsx
index cfc0ea245d..35dd2f8155 100644
--- a/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.test.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.test.tsx
@@ -13,10 +13,10 @@ describe("EvaluatedValuePopup", () => {
       <Provider store={store}>
         <ThemeProvider theme={theme}>
           <EvaluatedValuePopup
-            theme={EditorTheme.LIGHT}
-            isOpen={true}
             hasError={false}
             hideEvaluatedValue={false}
+            isOpen
+            theme={EditorTheme.LIGHT}
           >
             <div>children</div>
           </EvaluatedValuePopup>
@@ -33,10 +33,10 @@ describe("EvaluatedValuePopup", () => {
       <Provider store={store}>
         <ThemeProvider theme={theme}>
           <EvaluatedValuePopup
-            theme={EditorTheme.LIGHT}
-            isOpen={true}
             hasError={false}
-            hideEvaluatedValue={true}
+            hideEvaluatedValue
+            isOpen
+            theme={EditorTheme.LIGHT}
           >
             <div>children</div>
           </EvaluatedValuePopup>
diff --git a/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx b/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
index 42d98b73a0..4285ca25ee 100644
--- a/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
@@ -147,9 +147,9 @@ type PreparedStatementValue = {
   value: string;
   parameters: Record<string, number | string>;
 };
-export const PreparedStatementViewer = (props: {
+export function PreparedStatementViewer(props: {
   evaluatedValue: PreparedStatementValue;
-}) => {
+}) {
   const { value, parameters } = props.evaluatedValue;
   const stringSegments = value.split(/\$\d/);
   const $params = [...value.matchAll(/\$\d/g)].map((matches) => matches[0]);
@@ -171,14 +171,14 @@ export const PreparedStatementViewer = (props: {
       ))}
     </PreparedStatementViewerContainer>
   );
-};
+}
 
-export const CurrentValueViewer = (props: {
+export function CurrentValueViewer(props: {
   theme: EditorTheme;
   evaluatedValue: any;
   hideLabel?: boolean;
   preparedStatementViewer?: boolean;
-}) => {
+}) {
   const currentValueWrapperRef = React.createRef<HTMLDivElement>();
   const codeWrapperRef = React.createRef<HTMLPreElement>();
 
@@ -230,7 +230,7 @@ export const CurrentValueViewer = (props: {
     }
   }
   return (
-    <React.Fragment>
+    <>
       {!props.hideLabel && (
         <StyledTitle data-testid="evaluated-value-popup-title">
           Evaluated Value
@@ -242,19 +242,19 @@ export const CurrentValueViewer = (props: {
           <ScrollIndicator containerRef={currentValueWrapperRef} />
         </>
       </CurrentValueWrapper>
-    </React.Fragment>
+    </>
   );
-};
+}
 
-const PopoverContent = (props: PopoverContentProps) => {
+function PopoverContent(props: PopoverContentProps) {
   const typeTextRef = React.createRef<HTMLPreElement>();
 
   return (
     <ContentWrapper
+      className="t--CodeEditor-evaluatedValue"
+      colorTheme={props.theme}
       onMouseEnter={props.onMouseEnter}
       onMouseLeave={props.onMouseLeave}
-      colorTheme={props.theme}
-      className="t--CodeEditor-evaluatedValue"
     >
       {props.hasError && (
         <ErrorText>
@@ -270,26 +270,26 @@ const PopoverContent = (props: PopoverContentProps) => {
         </ErrorText>
       )}
       {!props.hasError && props.expected && (
-        <React.Fragment>
+        <>
           <StyledTitle>Expected Data Type</StyledTitle>
           <TypeText colorTheme={props.theme} ref={typeTextRef}>
             {props.expected}
             <ScrollIndicator containerRef={typeTextRef} />
           </TypeText>
-        </React.Fragment>
+        </>
       )}
       {!props.hideEvaluatedValue && (
         <CurrentValueViewer
-          theme={props.theme}
           evaluatedValue={props.evaluatedValue}
           preparedStatementViewer={props.preparedStatementViewer}
+          theme={props.theme}
         />
       )}
     </ContentWrapper>
   );
-};
+}
 
-const EvaluatedValuePopup = (props: Props) => {
+function EvaluatedValuePopup(props: Props) {
   const [contentHovered, setContentHovered] = useState(false);
 
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -305,43 +305,43 @@ const EvaluatedValuePopup = (props: Props) => {
     <Wrapper ref={wrapperRef}>
       {(props.isOpen || contentHovered) && (
         <Popper
-          targetNode={wrapperRef.current || undefined}
           isOpen
-          zIndex={5}
-          placement={placement}
           modifiers={{
             offset: {
               enabled: true,
               offset: "0, 15",
             },
           }}
+          placement={placement}
+          targetNode={wrapperRef.current || undefined}
+          zIndex={5}
         >
           <PopoverContent
-            expected={props.expected}
-            evaluatedValue={props.evaluatedValue}
             error={props.error}
-            useValidationMessage={props.useValidationMessage}
+            evaluatedValue={props.evaluatedValue}
+            expected={props.expected}
             hasError={props.hasError}
-            theme={props.theme}
             hideEvaluatedValue={props.hideEvaluatedValue}
+            onMouseEnter={() => {
+              setContentHovered(true);
+            }}
+            onMouseLeave={() => {
+              setContentHovered(false);
+            }}
             preparedStatementViewer={
               props.evaluationSubstitutionType
                 ? props.evaluationSubstitutionType ===
                   EvaluationSubstitutionType.PARAMETER
                 : false
             }
-            onMouseLeave={() => {
-              setContentHovered(false);
-            }}
-            onMouseEnter={() => {
-              setContentHovered(true);
-            }}
+            theme={props.theme}
+            useValidationMessage={props.useValidationMessage}
           />
         </Popper>
       )}
       {props.children}
     </Wrapper>
   );
-};
+}
 
 export default EvaluatedValuePopup;
diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx
index 594896c10d..8f98ea1af4 100644
--- a/app/client/src/components/editorComponents/CodeEditor/index.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/index.tsx
@@ -370,55 +370,55 @@ class CodeEditor extends Component<Props, State> {
 
     return (
       <DynamicAutocompleteInputWrapper
-        theme={this.props.theme}
-        skin={this.props.theme === EditorTheme.DARK ? Skin.DARK : Skin.LIGHT}
-        isError={hasError}
         isActive={(this.state.isFocused && !hasError) || this.state.isOpened}
+        isError={hasError}
         isNotHover={this.state.isFocused || this.state.isOpened}
+        skin={this.props.theme === EditorTheme.DARK ? Skin.DARK : Skin.LIGHT}
+        theme={this.props.theme}
       >
         {showLightningMenu !== false && !this.state.isFocused && (
           <Suspense fallback={<div />}>
             <LightningMenu
+              isFocused={this.state.isFocused}
+              isOpened={this.state.isOpened}
+              onCloseLightningMenu={() => {
+                this.setState({ isOpened: false });
+              }}
+              onOpenLightningMenu={() => {
+                this.setState({ isOpened: true });
+              }}
               skin={
                 this.props.theme === EditorTheme.DARK ? Skin.DARK : Skin.LIGHT
               }
               updateDynamicInputValue={this.updatePropertyValue}
-              isFocused={this.state.isFocused}
-              isOpened={this.state.isOpened}
-              onOpenLightningMenu={() => {
-                this.setState({ isOpened: true });
-              }}
-              onCloseLightningMenu={() => {
-                this.setState({ isOpened: false });
-              }}
             />
           </Suspense>
         )}
         <EvaluatedValuePopup
-          theme={theme || EditorTheme.LIGHT}
-          isOpen={showEvaluatedValue}
+          error={meta?.error}
           evaluatedValue={evaluated}
+          evaluationSubstitutionType={evaluationSubstitutionType}
           expected={expected}
           hasError={hasError}
-          error={meta?.error}
-          useValidationMessage={useValidationMessage}
           hideEvaluatedValue={hideEvaluatedValue}
-          evaluationSubstitutionType={evaluationSubstitutionType}
+          isOpen={showEvaluatedValue}
+          theme={theme || EditorTheme.LIGHT}
+          useValidationMessage={useValidationMessage}
         >
           <EditorWrapper
-            editorTheme={this.props.theme}
-            hasError={hasError}
-            size={size}
-            isFocused={this.state.isFocused}
-            disabled={disabled}
-            className={className}
-            height={height}
-            borderLess={borderLess}
             border={border}
-            isNotHover={this.state.isFocused || this.state.isOpened}
-            hoverInteraction={hoverInteraction}
+            borderLess={borderLess}
+            className={className}
+            disabled={disabled}
+            editorTheme={this.props.theme}
             fill={fill}
+            hasError={hasError}
+            height={height}
+            hoverInteraction={hoverInteraction}
+            isFocused={this.state.isFocused}
+            isNotHover={this.state.isFocused || this.state.isOpened}
             ref={this.editorWrapperRef}
+            size={size}
           >
             <HintStyles editorTheme={theme || EditorTheme.LIGHT} />
             {this.props.leftIcon && (
@@ -427,9 +427,9 @@ class CodeEditor extends Component<Props, State> {
 
             {this.props.leftImage && (
               <img
-                src={this.props.leftImage}
                 alt="img"
                 className="leftImageStyles"
+                src={this.props.leftImage}
               />
             )}
             <textarea
@@ -439,24 +439,22 @@ class CodeEditor extends Component<Props, State> {
               placeholder={placeholder}
             />
             {this.props.link && (
-              <React.Fragment>
-                <a
-                  href={this.props.link}
-                  target="_blank"
-                  className="linkStyles"
-                  rel="noopener noreferrer"
-                >
-                  API documentation
-                </a>
-              </React.Fragment>
+              <a
+                className="linkStyles"
+                href={this.props.link}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                API documentation
+              </a>
             )}
             {this.props.rightIcon && (
               <IconContainer>{this.props.rightIcon}</IconContainer>
             )}
             <BindingPrompt
+              editorTheme={this.props.theme}
               isOpen={showBindingPrompt(showEvaluatedValue, input.value)}
               promptMessage={this.props.promptMessage}
-              editorTheme={this.props.theme}
             />
             <ScrollIndicator containerRef={this.editorWrapperRef} />
           </EditorWrapper>
diff --git a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
index cdae4f9f01..3272c2f646 100644
--- a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
+++ b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
@@ -58,6 +58,10 @@ export const HintStyles = createGlobalStyle<{
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    &.invalid {
+      color: ${(props) => props.theme.colors.errorMessage};
+    }
   }
   .CodeMirror-Tern-completion {
     padding-left: ${(props) => props.theme.spaces[11]}px !important;
diff --git a/app/client/src/components/editorComponents/ContextDropdown.tsx b/app/client/src/components/editorComponents/ContextDropdown.tsx
index 5d4f24de7b..31f4fb2799 100644
--- a/app/client/src/components/editorComponents/ContextDropdown.tsx
+++ b/app/client/src/components/editorComponents/ContextDropdown.tsx
@@ -45,35 +45,37 @@ type ContextDropdownProps = {
   };
 };
 
-const DropdownItem = (option: ContextDropdownOption) => (
-  <StyledMenuItem
-    key={option.value}
-    onClick={option.onSelect}
-    shouldDismissPopover={true}
-    text={option.label || option.value}
-    intent={option.intent as BlueprintIntent}
-    popoverProps={{
-      minimal: true,
-      hoverCloseDelay: 0,
-      hoverOpenDelay: 300,
-      interactionKind: PopoverInteractionKind.CLICK,
-      position: PopoverPosition.RIGHT,
-      modifiers: {
-        arrow: {
-          enabled: false,
+function DropdownItem(option: ContextDropdownOption) {
+  return (
+    <StyledMenuItem
+      intent={option.intent as BlueprintIntent}
+      key={option.value}
+      onClick={option.onSelect}
+      popoverProps={{
+        minimal: true,
+        hoverCloseDelay: 0,
+        hoverOpenDelay: 300,
+        interactionKind: PopoverInteractionKind.CLICK,
+        position: PopoverPosition.RIGHT,
+        modifiers: {
+          arrow: {
+            enabled: false,
+          },
+          offset: {
+            enabled: true,
+            offset: "-16px, 0",
+          },
         },
-        offset: {
-          enabled: true,
-          offset: "-16px, 0",
-        },
-      },
-    }}
-  >
-    {option.children && option.children.map(DropdownItem)}
-  </StyledMenuItem>
-);
+      }}
+      shouldDismissPopover
+      text={option.label || option.value}
+    >
+      {option.children && option.children.map(DropdownItem)}
+    </StyledMenuItem>
+  );
+}
 
-export const ContextDropdown = (props: ContextDropdownProps) => {
+export function ContextDropdown(props: ContextDropdownProps) {
   let trigger: ReactNode;
   if (props.toggle.type === "icon" && props.toggle.icon) {
     const TriggerElement = ControlIcons[props.toggle.icon];
@@ -93,15 +95,15 @@ export const ContextDropdown = (props: ContextDropdownProps) => {
 
   return (
     <Dropdown
-      items={props.options}
-      itemRenderer={renderer}
-      onItemSelect={noop}
-      filterable={false}
       className={props.className}
+      filterable={false}
+      itemRenderer={renderer}
+      items={props.options}
+      onItemSelect={noop}
     >
       {trigger}
     </Dropdown>
   );
-};
+}
 
 export default ContextDropdown;
diff --git a/app/client/src/components/editorComponents/Debugger/DebugCTA.tsx b/app/client/src/components/editorComponents/Debugger/DebugCTA.tsx
index 2938b2f5f1..e6dbf994d2 100644
--- a/app/client/src/components/editorComponents/Debugger/DebugCTA.tsx
+++ b/app/client/src/components/editorComponents/Debugger/DebugCTA.tsx
@@ -31,7 +31,7 @@ type DebugCTAProps = {
   source?: string;
 };
 
-const DebugCTA = (props: DebugCTAProps) => {
+function DebugCTA(props: DebugCTAProps) {
   const dispatch = useDispatch();
   const appMode = useSelector(getAppMode);
 
@@ -46,24 +46,24 @@ const DebugCTA = (props: DebugCTAProps) => {
   };
 
   return <DebugButton className={props.className} onClick={onClick} />;
-};
+}
 
 type DebugButtonProps = {
   className?: string;
   onClick: () => void;
 };
 
-export const DebugButton = (props: DebugButtonProps) => {
+export function DebugButton(props: DebugButtonProps) {
   return (
     <StyledButton
       className={props.className}
-      onClick={props.onClick}
       icon="bug"
-      text="Debug"
+      onClick={props.onClick}
       tag="button"
+      text="Debug"
       variant={Variant.danger}
     />
   );
-};
+}
 
 export default DebugCTA;
diff --git a/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx b/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx
index b3ebca6c8f..4ae6fb592f 100644
--- a/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx
+++ b/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx
@@ -33,7 +33,7 @@ const LOGS_FILTER_OPTIONS = [
   { label: "Errors", value: Severity.ERROR },
 ];
 
-const DebbuggerLogs = (props: Props) => {
+function DebbuggerLogs(props: Props) {
   const [filter, setFilter] = useState("");
   const [searchQuery, setSearchQuery] = useState(props.searchQuery);
   const filteredLogs = useFilteredLogs(searchQuery, filter);
@@ -69,12 +69,12 @@ const DebbuggerLogs = (props: Props) => {
   return (
     <ContainerWrapper>
       <FilterHeader
-        options={LOGS_FILTER_OPTIONS}
-        selected={selectedFilter || LOGS_FILTER_OPTIONS[0]}
+        defaultValue={props.searchQuery}
         onChange={setSearchQuery}
         onSelect={(value) => !isUndefined(value) && setFilter(value)}
-        defaultValue={props.searchQuery}
+        options={LOGS_FILTER_OPTIONS}
         searchQuery={searchQuery}
+        selected={selectedFilter || LOGS_FILTER_OPTIONS[0]}
       />
 
       <ListWrapper className="debugger-list" ref={listRef}>
@@ -96,7 +96,7 @@ const DebbuggerLogs = (props: Props) => {
       </ListWrapper>
     </ContainerWrapper>
   );
-};
+}
 
 // Set default props
 DebbuggerLogs.defaultProps = {
diff --git a/app/client/src/components/editorComponents/Debugger/DebuggerMessage.tsx b/app/client/src/components/editorComponents/Debugger/DebuggerMessage.tsx
index 29296b0081..1ff6aea411 100644
--- a/app/client/src/components/editorComponents/Debugger/DebuggerMessage.tsx
+++ b/app/client/src/components/editorComponents/Debugger/DebuggerMessage.tsx
@@ -12,7 +12,7 @@ const Container = styled.div`
   color: ${(props) => props.theme.colors.debugger.messageTextColor};
 `;
 
-const DebuggerMessage = (props: any) => {
+function DebuggerMessage(props: any) {
   return (
     <Container>
       {createMessage(CLICK_ON)}
@@ -20,6 +20,6 @@ const DebuggerMessage = (props: any) => {
       {createMessage(OPEN_THE_DEBUGGER)}
     </Container>
   );
-};
+}
 
 export default DebuggerMessage;
diff --git a/app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx b/app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx
index f1c686865b..a7641165a9 100644
--- a/app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx
+++ b/app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx
@@ -51,7 +51,7 @@ const DEBUGGER_TABS = [
   },
 ];
 
-const DebuggerTabs = (props: DebuggerTabsProps) => {
+function DebuggerTabs(props: DebuggerTabsProps) {
   const [selectedIndex, setSelectedIndex] = useState(props.defaultIndex);
   const dispatch = useDispatch();
   const panelRef: RefObject<HTMLDivElement> = useRef(null);
@@ -68,18 +68,18 @@ const DebuggerTabs = (props: DebuggerTabsProps) => {
     <Container ref={panelRef}>
       <Resizer panelRef={panelRef} />
       <TabComponent
-        selectedIndex={selectedIndex}
         onSelect={onTabSelect}
+        selectedIndex={selectedIndex}
         tabs={DEBUGGER_TABS}
       />
       <Icon
         className="close-debugger"
         name="cross"
-        size={IconSize.SMALL}
         onClick={onClose}
+        size={IconSize.SMALL}
       />
     </Container>
   );
-};
+}
 
 export default DebuggerTabs;
diff --git a/app/client/src/components/editorComponents/Debugger/EntityLink.tsx b/app/client/src/components/editorComponents/Debugger/EntityLink.tsx
index c86fb00876..56959a7842 100644
--- a/app/client/src/components/editorComponents/Debugger/EntityLink.tsx
+++ b/app/client/src/components/editorComponents/Debugger/EntityLink.tsx
@@ -19,7 +19,7 @@ import { getSelectedWidget } from "selectors/ui";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import history from "utils/history";
 
-const ActionLink = (props: EntityLinkProps) => {
+function ActionLink(props: EntityLinkProps) {
   const applicationId = useSelector(getCurrentApplicationId);
   const action = useSelector((state: AppState) => getAction(state, props.id));
 
@@ -44,15 +44,15 @@ const ActionLink = (props: EntityLinkProps) => {
 
   return (
     <Link
+      entityType={props.type}
       name={props.name}
       onClick={onClick}
-      entityType={props.type}
       uiComponent={props.uiComponent}
     />
   );
-};
+}
 
-const WidgetLink = (props: EntityLinkProps) => {
+function WidgetLink(props: EntityLinkProps) {
   const widgetMap = useSelector(getAllWidgetsMap);
   const selectedWidgetId = useSelector(getSelectedWidget);
   const { navigateToWidget } = useNavigateToWidget();
@@ -75,15 +75,15 @@ const WidgetLink = (props: EntityLinkProps) => {
 
   return (
     <Link
+      entityType={props.type}
       name={props.name}
       onClick={onClick}
-      entityType={props.type}
       uiComponent={props.uiComponent}
     />
   );
-};
+}
 
-const DatasourceLink = (props: EntityLinkProps) => {
+function DatasourceLink(props: EntityLinkProps) {
   const datasource = useSelector((state: AppState) =>
     getDatasource(state, props.id),
   );
@@ -101,20 +101,20 @@ const DatasourceLink = (props: EntityLinkProps) => {
 
   return (
     <Link
+      entityType={props.type}
       name={props.name}
       onClick={onClick}
-      entityType={props.type}
       uiComponent={props.uiComponent}
     />
   );
-};
+}
 
-const Link = (props: {
+function Link(props: {
   name: string;
   onClick: any;
   entityType: ENTITY_TYPE;
   uiComponent: DebuggerLinkUI;
-}) => {
+}) {
   const onClick = (e: React.MouseEvent<HTMLElement>) => {
     e.stopPropagation();
     props.onClick();
@@ -136,7 +136,7 @@ const Link = (props: {
     default:
       return null;
   }
-};
+}
 
 const entityTypeLinkMap = {
   [ENTITY_TYPE.WIDGET]: WidgetLink,
@@ -144,10 +144,10 @@ const entityTypeLinkMap = {
   [ENTITY_TYPE.DATASOURCE]: DatasourceLink,
 };
 
-const EntityLink = (props: EntityLinkProps) => {
+function EntityLink(props: EntityLinkProps) {
   const Component = entityTypeLinkMap[props.type];
   return <Component {...props} />;
-};
+}
 
 type EntityLinkProps = {
   uiComponent: DebuggerLinkUI;
diff --git a/app/client/src/components/editorComponents/Debugger/Errors.tsx b/app/client/src/components/editorComponents/Debugger/Errors.tsx
index 91c0e4ef33..c6dd328e42 100644
--- a/app/client/src/components/editorComponents/Debugger/Errors.tsx
+++ b/app/client/src/components/editorComponents/Debugger/Errors.tsx
@@ -15,7 +15,7 @@ const ListWrapper = styled.div`
   height: 100%;
 `;
 
-const Errors = (props: { hasShortCut?: boolean }) => {
+function Errors(props: { hasShortCut?: boolean }) {
   const errors = useSelector(getDebuggerErrors);
   const expandId = useSelector((state: any) => state.ui.debugger.expandId);
 
@@ -41,6 +41,6 @@ const Errors = (props: { hasShortCut?: boolean }) => {
       </ListWrapper>
     </ContainerWrapper>
   );
-};
+}
 
 export default Errors;
diff --git a/app/client/src/components/editorComponents/Debugger/FilterHeader.tsx b/app/client/src/components/editorComponents/Debugger/FilterHeader.tsx
index a9ffddcf2b..98b705cf63 100644
--- a/app/client/src/components/editorComponents/Debugger/FilterHeader.tsx
+++ b/app/client/src/components/editorComponents/Debugger/FilterHeader.tsx
@@ -51,7 +51,7 @@ type FilterHeaderProps = {
   searchQuery: string;
 };
 
-const FilterHeader = (props: FilterHeaderProps) => {
+function FilterHeader(props: FilterHeaderProps) {
   const dispatch = useDispatch();
   const searchRef: MutableRefObject<HTMLInputElement | null> = useRef(null);
 
@@ -59,16 +59,16 @@ const FilterHeader = (props: FilterHeaderProps) => {
     <Wrapper>
       <Icon
         name="cancel"
-        size={IconSize.XL}
         onClick={() => dispatch(clearLogs())}
+        size={IconSize.XL}
       />
       <div className="input-container">
         <TextInput
-          ref={searchRef}
           className="debugger-search"
-          placeholder="Filter"
-          onChange={props.onChange}
           defaultValue={props.defaultValue}
+          onChange={props.onChange}
+          placeholder="Filter"
+          ref={searchRef}
         />
         {props.searchQuery && (
           <Icon
@@ -84,16 +84,16 @@ const FilterHeader = (props: FilterHeaderProps) => {
       </div>
       <Dropdown
         className="debugger-filter"
-        width={"100px"}
         height={"28px"}
+        onSelect={props.onSelect}
         optionWidth={"100px"}
         options={props.options}
-        showLabelOnly
         selected={props.selected}
-        onSelect={props.onSelect}
+        showLabelOnly
+        width={"100px"}
       />
     </Wrapper>
   );
-};
+}
 
 export default FilterHeader;
diff --git a/app/client/src/components/editorComponents/Debugger/LogItem.tsx b/app/client/src/components/editorComponents/Debugger/LogItem.tsx
index f3ecaf69d4..ebf355ba41 100644
--- a/app/client/src/components/editorComponents/Debugger/LogItem.tsx
+++ b/app/client/src/components/editorComponents/Debugger/LogItem.tsx
@@ -170,7 +170,7 @@ type LogItemProps = {
   expand?: boolean;
 };
 
-const LogItem = (props: LogItemProps) => {
+function LogItem(props: LogItemProps) {
   const [isOpen, setIsOpen] = useState(!!props.expand);
   const reactJsonProps = {
     name: null,
@@ -203,7 +203,7 @@ const LogItem = (props: LogItemProps) => {
       collapsed={!isOpen}
       onClick={() => setIsOpen(!isOpen)}
     >
-      <Icon name={props.icon} size={IconSize.XL} keepColors />
+      <Icon keepColors name={props.icon} size={IconSize.XL} />
       <span className="debugger-time">{props.timestamp}</span>
       <div className="debugger-description">
         {showToggleIcon && (
@@ -216,9 +216,9 @@ const LogItem = (props: LogItemProps) => {
         )}
         {props.source && (
           <EntityLink
-            type={props.source.type}
-            name={props.source.name}
             id={props.source.id}
+            name={props.source.name}
+            type={props.source.type}
             uiComponent={DebuggerLinkUI.ENTITY_TYPE}
           />
         )}
@@ -228,20 +228,20 @@ const LogItem = (props: LogItemProps) => {
         )}
         {props.severity !== Severity.INFO && (
           <TooltipComponent
-            minimal
-            position={Position.BOTTOM_LEFT}
             content={
-              <Text type={TextType.P3} style={{ color: "#ffffff" }}>
+              <Text style={{ color: "#ffffff" }} type={TextType.P3}>
                 {createMessage(TROUBLESHOOT_ISSUE)}
               </Text>
             }
+            minimal
+            position={Position.BOTTOM_LEFT}
           >
             <StyledSearchIcon
               className={Classes.ICON}
-              name={"wand"}
-              size={IconSize.MEDIUM}
               fillColor={props.iconColor}
+              name={"wand"}
               onClick={openHelpModal}
+              size={IconSize.MEDIUM}
             />
           </TooltipComponent>
         )}
@@ -257,8 +257,8 @@ const LogItem = (props: LogItemProps) => {
             )}
             {props.state && (
               <JsonWrapper
-                onClick={(e) => e.stopPropagation()}
                 className="t--debugger-log-state"
+                onClick={(e) => e.stopPropagation()}
               >
                 <ReactJson src={props.state} {...reactJsonProps} />
               </JsonWrapper>
@@ -268,14 +268,14 @@ const LogItem = (props: LogItemProps) => {
       </div>
       {props.source && (
         <EntityLink
-          type={props.source.type}
-          name={props.source.name}
           id={props.source.id}
+          name={props.source.name}
+          type={props.source.type}
           uiComponent={DebuggerLinkUI.ENTITY_NAME}
         />
       )}
     </Log>
   );
-};
+}
 
 export default LogItem;
diff --git a/app/client/src/components/editorComponents/Debugger/Resizer/index.tsx b/app/client/src/components/editorComponents/Debugger/Resizer/index.tsx
index ade1d06f19..853cb5ec72 100644
--- a/app/client/src/components/editorComponents/Debugger/Resizer/index.tsx
+++ b/app/client/src/components/editorComponents/Debugger/Resizer/index.tsx
@@ -22,7 +22,7 @@ type ResizerProps = {
   panelRef: RefObject<HTMLDivElement>;
 };
 
-const Resizer = (props: ResizerProps) => {
+function Resizer(props: ResizerProps) {
   const [mouseDown, setMouseDown] = useState(false);
 
   const handleResize = (movementY: number) => {
@@ -74,6 +74,6 @@ const Resizer = (props: ResizerProps) => {
   };
 
   return <Top onMouseDown={handleMouseDown} />;
-};
+}
 
 export default Resizer;
diff --git a/app/client/src/components/editorComponents/Debugger/helpers.tsx b/app/client/src/components/editorComponents/Debugger/helpers.tsx
index 018e25713e..29e019b9cf 100644
--- a/app/client/src/components/editorComponents/Debugger/helpers.tsx
+++ b/app/client/src/components/editorComponents/Debugger/helpers.tsx
@@ -26,7 +26,7 @@ const BlankStateWrapper = styled.div`
   }
 `;
 
-export const BlankState = (props: { hasShortCut?: boolean }) => {
+export function BlankState(props: { hasShortCut?: boolean }) {
   return (
     <BlankStateWrapper>
       {props.hasShortCut ? (
@@ -40,7 +40,7 @@ export const BlankState = (props: { hasShortCut?: boolean }) => {
       )}
     </BlankStateWrapper>
   );
-};
+}
 
 export const SeverityIcon: Record<Severity, string> = {
   [Severity.INFO]: "success",
diff --git a/app/client/src/components/editorComponents/Debugger/index.tsx b/app/client/src/components/editorComponents/Debugger/index.tsx
index af2b7f7d9c..2e7ebb0fb7 100644
--- a/app/client/src/components/editorComponents/Debugger/index.tsx
+++ b/app/client/src/components/editorComponents/Debugger/index.tsx
@@ -52,7 +52,7 @@ const Container = styled.div<{ errorCount: number }>`
   }
 `;
 
-const Debugger = () => {
+function Debugger() {
   const dispatch = useDispatch();
   const errorCount = useSelector(
     (state: AppState) => Object.keys(state.ui.debugger.errors).length,
@@ -71,15 +71,15 @@ const Debugger = () => {
   if (!showDebugger)
     return (
       <Container
-        onClick={onClick}
-        errorCount={errorCount}
         className="t--debugger"
+        errorCount={errorCount}
+        onClick={onClick}
       >
         <Icon name="bug" size={IconSize.XXXL} />
         <div className="debugger-count">{errorCount}</div>
       </Container>
     );
   return <DebuggerTabs defaultIndex={errorCount ? 0 : 1} />;
-};
+}
 
 export default Debugger;
diff --git a/app/client/src/components/editorComponents/DragLayerComponent.tsx b/app/client/src/components/editorComponents/DragLayerComponent.tsx
index 7bee6db010..c9fb4ab1f8 100644
--- a/app/client/src/components/editorComponents/DragLayerComponent.tsx
+++ b/app/client/src/components/editorComponents/DragLayerComponent.tsx
@@ -51,7 +51,7 @@ type DragLayerProps = {
   noPad: boolean;
 };
 
-const DragLayerComponent = (props: DragLayerProps) => {
+function DragLayerComponent(props: DragLayerProps) {
   const { updateDropTargetRows } = useContext(DropTargetContext);
   const dropTargetMask: RefObject<HTMLDivElement> = React.useRef(null);
   const dropZoneRef = React.useRef<HTMLDivElement>(null);
@@ -146,26 +146,26 @@ const DragLayerComponent = (props: DragLayerProps) => {
   return (
     <WrappedDragLayer
       columnWidth={props.parentColumnWidth}
-      rowHeight={props.parentRowHeight}
-      ref={dropTargetMask}
       noPad={props.noPad}
+      ref={dropTargetMask}
+      rowHeight={props.parentRowHeight}
     >
       {props.visible &&
         props.isOver &&
         currentOffset &&
         isParentOffsetCalculated && (
           <DropZone
+            canDrop={canDrop}
+            currentOffset={currentOffset as XYCoord}
+            height={widgetHeight}
+            parentColumnWidth={props.parentColumnWidth}
             parentOffset={dropTargetOffset.current}
             parentRowHeight={props.parentRowHeight}
-            parentColumnWidth={props.parentColumnWidth}
-            width={widgetWidth}
-            height={widgetHeight}
-            currentOffset={currentOffset as XYCoord}
-            canDrop={canDrop}
             ref={dropZoneRef}
+            width={widgetWidth}
           />
         )}
     </WrappedDragLayer>
   );
-};
+}
 export default DragLayerComponent;
diff --git a/app/client/src/components/editorComponents/DraggableComponent.tsx b/app/client/src/components/editorComponents/DraggableComponent.tsx
index 74253c5c3a..a5cbe41ed3 100644
--- a/app/client/src/components/editorComponents/DraggableComponent.tsx
+++ b/app/client/src/components/editorComponents/DraggableComponent.tsx
@@ -54,7 +54,7 @@ export const canDrag = (
   return !isResizing && !isDraggingDisabled && !props.dragDisabled;
 };
 
-const DraggableComponent = (props: DraggableComponentProps) => {
+function DraggableComponent(props: DraggableComponentProps) {
   // Dispatch hook handy to toggle property pane
   const showPropertyPane = useShowPropertyPane();
 
@@ -190,15 +190,15 @@ const DraggableComponent = (props: DraggableComponentProps) => {
   return (
     <DraggableWrapper
       className={className}
-      ref={drag}
-      onMouseOver={handleMouseOver}
       onClick={handleClick}
+      onMouseOver={handleMouseOver}
+      ref={drag}
       style={style}
     >
       {shouldRenderComponent && props.children}
       {widgetBoundaries}
     </DraggableWrapper>
   );
-};
+}
 
 export default DraggableComponent;
diff --git a/app/client/src/components/editorComponents/DropTargetComponent.tsx b/app/client/src/components/editorComponents/DropTargetComponent.tsx
index 7b3afb681b..c4d6e9c1a6 100644
--- a/app/client/src/components/editorComponents/DropTargetComponent.tsx
+++ b/app/client/src/components/editorComponents/DropTargetComponent.tsx
@@ -49,13 +49,13 @@ const StyledDropTarget = styled.div`
   user-select: none;
 `;
 
-const Onboarding = () => {
+function Onboarding() {
   return (
     <div style={{ position: "fixed", left: "50%", top: "50vh" }}>
       <h2 style={{ color: "#ccc" }}>Drag and drop a widget here</h2>
     </div>
   );
-};
+}
 
 /*
   This context will provide the function which will help the draglayer and resizablecomponents trigger
@@ -66,7 +66,7 @@ export const DropTargetContext: Context<{
   persistDropTargetRows?: (widgetId: string, row: number) => void;
 }> = createContext({});
 
-export const DropTargetComponent = (props: DropTargetComponentProps) => {
+export function DropTargetComponent(props: DropTargetComponentProps) {
   const canDropTargetExtend = props.canExtend;
 
   const snapRows = getCanvasSnapRows(props.bottomRow, props.canExtend);
@@ -267,37 +267,37 @@ export const DropTargetComponent = (props: DropTargetComponentProps) => {
       value={{ updateDropTargetRows, persistDropTargetRows }}
     >
       <StyledDropTarget
+        className={"t--drop-target"}
         onClick={handleFocus}
         ref={dropRef}
         style={{
           height,
           border,
         }}
-        className={"t--drop-target"}
       >
         {props.children}
         {!(childWidgets && childWidgets.length) &&
           !isDragging &&
           !props.parentId && <Onboarding />}
         <DragLayerComponent
-          parentWidgetId={props.widgetId}
           canDropTargetExtend={canDropTargetExtend}
-          parentRowHeight={props.snapRowSpace}
-          parentColumnWidth={props.snapColumnSpace}
-          visible={isExactlyOver || isChildResizing}
+          force={isDragging && !isOver && !props.parentId}
           isOver={isExactlyOver}
-          occupiedSpaces={spacesOccupiedBySiblingWidgets}
-          onBoundsUpdate={handleBoundsUpdate}
-          parentRows={rows}
-          parentCols={props.snapColumns}
           isResizing={isChildResizing}
           noPad={props.noPad || false}
-          force={isDragging && !isOver && !props.parentId}
+          occupiedSpaces={spacesOccupiedBySiblingWidgets}
+          onBoundsUpdate={handleBoundsUpdate}
+          parentCols={props.snapColumns}
+          parentColumnWidth={props.snapColumnSpace}
+          parentRowHeight={props.snapRowSpace}
+          parentRows={rows}
+          parentWidgetId={props.widgetId}
+          visible={isExactlyOver || isChildResizing}
         />
       </StyledDropTarget>
     </DropTargetContext.Provider>
   );
-};
+}
 
 const MemoizedDropTargetComponent = memo(DropTargetComponent);
 
diff --git a/app/client/src/components/editorComponents/DropdownComponent.tsx b/app/client/src/components/editorComponents/DropdownComponent.tsx
index 313781819d..a9b8177159 100644
--- a/app/client/src/components/editorComponents/DropdownComponent.tsx
+++ b/app/client/src/components/editorComponents/DropdownComponent.tsx
@@ -45,21 +45,21 @@ class DropdownComponent extends Component<DropdownComponentProps> {
       const renderItems = props.items.map(props.renderItem).filter(Boolean);
       const displayMode = (
         <BaseButton
-          icon-right="plus"
           accent="primary"
-          filled={true}
-          text={this.props.addItem.displayText}
+          filled
+          icon-right="plus"
           onClick={this.showTextBox}
+          text={this.props.addItem.displayText}
         />
       );
       const editMode = (
-        <ControlGroup fill={true}>
+        <ControlGroup fill>
           <InputGroup inputRef={this.setNewItemTextInput} />
           <BaseButton
-            filled={true}
-            text={this.props.addItem.displayText}
+            filled
             onClick={this.handleAddItem}
-          ></BaseButton>
+            text={this.props.addItem.displayText}
+          />
         </ControlGroup>
       );
       return (
@@ -70,7 +70,7 @@ class DropdownComponent extends Component<DropdownComponentProps> {
       );
     }
 
-    return <React.Fragment />;
+    return null;
   };
 
   searchItem = (query: string, option: DropdownOption): boolean => {
@@ -118,22 +118,22 @@ class DropdownComponent extends Component<DropdownComponentProps> {
   render() {
     return (
       <StyledDropdown
-        items={this.props.options}
-        onItemSelect={this.onItemSelect}
-        itemRenderer={this.renderItem}
-        itemListRenderer={this.props.addItem && this.renderItemList}
-        filterable={!!this.props.autocomplete}
-        itemPredicate={this.searchItem}
-        itemsEqual="value"
-        popoverProps={{ minimal: true }}
         activeItem={this.props.selected}
-        noResults={<MenuItem disabled={true} text="No results." />}
+        filterable={!!this.props.autocomplete}
+        itemListRenderer={this.props.addItem && this.renderItemList}
+        itemPredicate={this.searchItem}
+        itemRenderer={this.renderItem}
+        items={this.props.options}
+        itemsEqual="value"
+        noResults={<MenuItem disabled text="No results." />}
+        onItemSelect={this.onItemSelect}
+        popoverProps={{ minimal: true }}
       >
         {this.props.toggle || (
           <BaseButton
             accent="secondary"
-            text={this.getSelectedDisplayText()}
             rightIcon="chevron-down"
+            text={this.getSelectedDisplayText()}
           />
         )}
       </StyledDropdown>
diff --git a/app/client/src/components/editorComponents/Dropzone.tsx b/app/client/src/components/editorComponents/Dropzone.tsx
index a9302adf43..29a83003d3 100644
--- a/app/client/src/components/editorComponents/Dropzone.tsx
+++ b/app/client/src/components/editorComponents/Dropzone.tsx
@@ -118,31 +118,31 @@ export const DropZone = forwardRef(
       setXY,
     ]);
     return (
-      <React.Fragment>
+      <>
         <AnimatedDropZone
-          ref={ref}
-          width={props.width * props.parentColumnWidth}
-          height={props.height * props.parentRowHeight}
           candrop={props.canDrop}
+          height={props.height * props.parentRowHeight}
+          ref={ref}
           style={{
             transform: interpolate(
               [X, Y],
               (x: number, y: number) => `translate3d(${x}px,${y}px,0)`,
             ),
           }}
+          width={props.width * props.parentColumnWidth}
         />
         <AnimatedSnappingDropZone
-          width={props.width * props.parentColumnWidth}
-          height={props.height * props.parentRowHeight}
           candrop={props.canDrop}
+          height={props.height * props.parentRowHeight}
           style={{
             transform: interpolate(
               [snappedX, snappedY],
               (x: number, y: number) => `translate3d(${x}px,${y}px,0)`,
             ),
           }}
+          width={props.width * props.parentColumnWidth}
         />
-      </React.Fragment>
+      </>
     );
   },
 );
diff --git a/app/client/src/components/editorComponents/EditableText.tsx b/app/client/src/components/editorComponents/EditableText.tsx
index 83d81f036b..b8c2983a02 100644
--- a/app/client/src/components/editorComponents/EditableText.tsx
+++ b/app/client/src/components/editorComponents/EditableText.tsx
@@ -91,7 +91,7 @@ const TextContainer = styled.div<{ isValid: boolean; minimal: boolean }>`
   }
 `;
 
-export const EditableText = (props: EditableTextProps) => {
+export function EditableText(props: EditableTextProps) {
   const [isEditing, setIsEditing] = useState(!!props.isEditingDefault);
   const [value, setStateValue] = useState(props.defaultValue);
   const inputValRef = useRef("");
@@ -155,35 +155,35 @@ export const EditableText = (props: EditableTextProps) => {
   return (
     <EditableTextWrapper
       isEditing={isEditing}
-      onDoubleClick={
-        props.editInteractionKind === EditInteractionKind.DOUBLE ? edit : _.noop
-      }
+      minimal={!!props.minimal}
       onClick={
         props.editInteractionKind === EditInteractionKind.SINGLE ? edit : _.noop
       }
-      minimal={!!props.minimal}
+      onDoubleClick={
+        props.editInteractionKind === EditInteractionKind.DOUBLE ? edit : _.noop
+      }
     >
       <ErrorTooltip isOpen={!!error} message={errorMessage as string}>
         <TextContainer isValid={!error} minimal={!!props.minimal}>
           <BlueprintEditableText
+            className={props.className}
             disabled={!isEditing}
             isEditing={isEditing}
+            onCancel={props.onBlur}
             onChange={onInputchange}
             onConfirm={onChange}
+            placeholder={props.placeholder}
             selectAllOnFocus
             value={value}
-            placeholder={props.placeholder}
-            className={props.className}
-            onCancel={props.onBlur}
           />
           {!props.minimal &&
             !props.hideEditIcon &&
             !props.updating &&
-            !isEditing && <EditPen src={Edit} alt="Edit pen" />}
+            !isEditing && <EditPen alt="Edit pen" src={Edit} />}
         </TextContainer>
       </ErrorTooltip>
     </EditableTextWrapper>
   );
-};
+}
 
 export default EditableText;
diff --git a/app/client/src/components/editorComponents/EditorContextProvider.tsx b/app/client/src/components/editorComponents/EditorContextProvider.tsx
index 9ddaceda48..b2dd17cc84 100644
--- a/app/client/src/components/editorComponents/EditorContextProvider.tsx
+++ b/app/client/src/components/editorComponents/EditorContextProvider.tsx
@@ -53,7 +53,7 @@ type EditorContextProviderProps = EditorContextType & {
   children: ReactNode;
 };
 
-const EditorContextProvider = (props: EditorContextProviderProps) => {
+function EditorContextProvider(props: EditorContextProviderProps) {
   const {
     executeAction,
     updateWidget,
@@ -81,7 +81,7 @@ const EditorContextProvider = (props: EditorContextProviderProps) => {
       {children}
     </EditorContext.Provider>
   );
-};
+}
 
 const mapDispatchToProps = (dispatch: any) => {
   return {
diff --git a/app/client/src/components/editorComponents/EntityNameComponent.tsx b/app/client/src/components/editorComponents/EntityNameComponent.tsx
index b259e7b039..a664c78f94 100644
--- a/app/client/src/components/editorComponents/EntityNameComponent.tsx
+++ b/app/client/src/components/editorComponents/EntityNameComponent.tsx
@@ -137,19 +137,19 @@ class EntityNameComponent extends React.Component<
       <ErrorTooltip isOpen={!isValid} message={validationMessage || ""}>
         <InputContainer focused={focused} isValid={isValid}>
           <input
-            value={value}
-            placeholder={placeholder}
+            onBlur={this.onBlur}
             onChange={onChange}
+            onFocus={this.onFocus}
             onKeyPress={(e) => {
               if (e.key === "Enter") {
                 this.onPressEnter(e);
               }
             }}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
+            placeholder={placeholder}
+            value={value}
           />
           {!focused && (
-            <EditPen onClick={this.onFocus} src={Edit} alt="Edit pen" />
+            <EditPen alt="Edit pen" onClick={this.onFocus} src={Edit} />
           )}
         </InputContainer>
       </ErrorTooltip>
diff --git a/app/client/src/components/editorComponents/ErrorTooltip.tsx b/app/client/src/components/editorComponents/ErrorTooltip.tsx
index 4ddd1153cf..e915405674 100644
--- a/app/client/src/components/editorComponents/ErrorTooltip.tsx
+++ b/app/client/src/components/editorComponents/ErrorTooltip.tsx
@@ -39,23 +39,23 @@ interface Props {
   children: JSX.Element;
 }
 
-const ErrorTooltip = (props: Props) => {
+function ErrorTooltip(props: Props) {
   return (
     <Wrapper>
       <TooltipStyles />
       <Popover
-        autoFocus={true}
-        canEscapeKeyClose={true}
+        autoFocus
+        canEscapeKeyClose
         content={props.message}
-        position="bottom"
         isOpen={props.isOpen && !!props.message}
-        usePortal
         portalClassName="error-tooltip"
+        position="bottom"
+        usePortal
       >
         {props.children}
       </Popover>
     </Wrapper>
   );
-};
+}
 
 export default ErrorTooltip;
diff --git a/app/client/src/components/editorComponents/GlobalSearch/ActionLink.tsx b/app/client/src/components/editorComponents/GlobalSearch/ActionLink.tsx
index 8141aa1572..2e6d4c1a10 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/ActionLink.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/ActionLink.tsx
@@ -25,13 +25,13 @@ export const ActionLink = withTheme(
     return (
       <StyledActionLink isActiveItem={isActiveItem}>
         <Icon
-          name="link"
-          size={IconSize.LARGE}
           fillColor={theme.colors.globalSearch.searchItemText}
+          name="link"
           onClick={(e) => {
             e.stopPropagation(); // to prevent toggleModal getting called twice
             searchContext?.handleItemLinkClick(item, "SEARCH_ITEM_ICON_CLICK");
           }}
+          size={IconSize.LARGE}
         />
       </StyledActionLink>
     );
diff --git a/app/client/src/components/editorComponents/GlobalSearch/AlgoliaSearchWrapper.tsx b/app/client/src/components/editorComponents/GlobalSearch/AlgoliaSearchWrapper.tsx
index 76f9efa7cb..9425debd85 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/AlgoliaSearchWrapper.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/AlgoliaSearchWrapper.tsx
@@ -12,7 +12,7 @@ type SearchProps = {
   children: React.ReactNode;
 };
 
-const Search = ({ query, children }: SearchProps) => {
+function Search({ query, children }: SearchProps) {
   const [queryInState, setQueryInState] = useState(query);
   const debouncedSetQueryInState = useCallback(
     debounce(setQueryInState, 100),
@@ -25,13 +25,13 @@ const Search = ({ query, children }: SearchProps) => {
 
   return (
     <InstantSearch
-      searchState={{ query: queryInState }}
       indexName={algolia.indexName}
       searchClient={searchClient}
+      searchState={{ query: queryInState }}
     >
       {children}
     </InstantSearch>
   );
-};
+}
 
 export default Search;
diff --git a/app/client/src/components/editorComponents/GlobalSearch/Description.tsx b/app/client/src/components/editorComponents/GlobalSearch/Description.tsx
index 78337a9e61..e9af253255 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/Description.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/Description.tsx
@@ -114,13 +114,7 @@ const StyledHighlightWrapper = styled.span`
   margin: 0 ${(props) => props.theme.spaces[1]}px;
 `;
 
-const HitEnterMessage = ({
-  item,
-  query,
-}: {
-  item: SearchItem;
-  query: string;
-}) => {
+function HitEnterMessage({ item, query }: { item: SearchItem; query: string }) {
   const title = getItemTitle(item);
 
   return (
@@ -131,10 +125,10 @@ const HitEnterMessage = ({
       <StyledHighlightWrapper>
         <Highlight match={query} text={title} />
       </StyledHighlightWrapper>
-      <ActionLink item={item} isActiveItem={true} />
+      <ActionLink isActiveItem item={item} />
     </StyledHitEnterMessageContainer>
   );
-};
+}
 
 const descriptionByType = {
   [SEARCH_ITEM_TYPES.document]: DocumentationDescription,
@@ -146,7 +140,7 @@ const descriptionByType = {
   [SEARCH_ITEM_TYPES.placeholder]: () => null,
 };
 
-const Description = (props: Props) => {
+function Description(props: Props) {
   const { activeItem, activeItemType } = props;
   const containerRef = React.useRef<HTMLDivElement>(null);
 
@@ -173,6 +167,6 @@ const Description = (props: Props) => {
       <Component item={activeItem} query={props.query} />
     </Container>
   );
-};
+}
 
 export default Description;
diff --git a/app/client/src/components/editorComponents/GlobalSearch/GlobalSearchHotKeys.tsx b/app/client/src/components/editorComponents/GlobalSearch/GlobalSearchHotKeys.tsx
index 2091bae430..43686d95ce 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/GlobalSearchHotKeys.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/GlobalSearchHotKeys.tsx
@@ -55,13 +55,13 @@ class GlobalSearchHotKeys extends React.Component<Props> {
         {this.hotKeysConfig.map(
           ({ combo, onKeyDown, allowInInput, label, group }, index) => (
             <Hotkey
-              key={index}
-              global={false}
-              combo={combo}
-              onKeyDown={onKeyDown}
-              label={label}
               allowInInput={allowInInput}
+              combo={combo}
+              global={false}
               group={group}
+              key={index}
+              label={label}
+              onKeyDown={onKeyDown}
             />
           ),
         )}
diff --git a/app/client/src/components/editorComponents/GlobalSearch/HelpBar.tsx b/app/client/src/components/editorComponents/GlobalSearch/HelpBar.tsx
index b8e5ef0458..d360f3f1d8 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/HelpBar.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/HelpBar.tsx
@@ -35,20 +35,20 @@ type Props = {
   toggleShowModal: () => void;
 };
 
-const HelpBar = ({ toggleShowModal }: Props) => {
+function HelpBar({ toggleShowModal }: Props) {
   return (
     <StyledHelpBar
-      onClick={toggleShowModal}
       className="t--global-search-modal-trigger"
       data-cy="global-search-modal-trigger"
+      onClick={toggleShowModal}
     >
       <Text type={TextType.P2}>{HELPBAR_PLACEHOLDER()}</Text>
-      <Text type={TextType.P3} italic>
+      <Text italic type={TextType.P3}>
         {comboText}
       </Text>
     </StyledHelpBar>
   );
-};
+}
 
 const mapDispatchToProps = (dispatch: any) => ({
   toggleShowModal: () => {
diff --git a/app/client/src/components/editorComponents/GlobalSearch/Highlight.tsx b/app/client/src/components/editorComponents/GlobalSearch/Highlight.tsx
index e62f3a1f39..ebcdea9e13 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/Highlight.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/Highlight.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-const Highlight = ({ match, text }: { match: string; text: string }) => {
+function Highlight({ match, text }: { match: string; text: string }) {
   if (!match) return <span>{text}</span>;
 
   const regEx = new RegExp(match, "ig");
@@ -27,6 +27,6 @@ const Highlight = ({ match, text }: { match: string; text: string }) => {
       })}
     </span>
   );
-};
+}
 
 export default Highlight;
diff --git a/app/client/src/components/editorComponents/GlobalSearch/ResultsNotFound.tsx b/app/client/src/components/editorComponents/GlobalSearch/ResultsNotFound.tsx
index afe878f8e3..f1af2aa4fc 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/ResultsNotFound.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/ResultsNotFound.tsx
@@ -38,24 +38,26 @@ const StyledDiscordIcon = styled(DiscordIcon)`
   vertical-align: -7px;
 `;
 
-const ResultsNotFound = () => (
-  <Container>
-    <img alt="No data" src={NoSearchDataImage} />
-    <div className="no-data-title">{NO_SEARCH_DATA_TEXT()}</div>
-    <span className="discord">
-      🤖 Join our{"  "}
-      <span
-        className="discord-link"
-        onClick={() => {
-          window.open("https://discord.gg/rBTTVJp", "_blank");
-        }}
-      >
-        <StyledDiscordIcon width={24} height={22} color="red" />
-        Discord Server
-      </span>{" "}
-      for more help.
-    </span>
-  </Container>
-);
+function ResultsNotFound() {
+  return (
+    <Container>
+      <img alt="No data" src={NoSearchDataImage} />
+      <div className="no-data-title">{NO_SEARCH_DATA_TEXT()}</div>
+      <span className="discord">
+        🤖 Join our{"  "}
+        <span
+          className="discord-link"
+          onClick={() => {
+            window.open("https://discord.gg/rBTTVJp", "_blank");
+          }}
+        >
+          <StyledDiscordIcon color="red" height={22} width={24} />
+          Discord Server
+        </span>{" "}
+        for more help.
+      </span>
+    </Container>
+  );
+}
 
 export default ResultsNotFound;
diff --git a/app/client/src/components/editorComponents/GlobalSearch/SearchBox.tsx b/app/client/src/components/editorComponents/GlobalSearch/SearchBox.tsx
index 99e5fcdde4..d0d67d9a20 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/SearchBox.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/SearchBox.tsx
@@ -50,7 +50,7 @@ const useListenToChange = (modalOpen: boolean) => {
   return listenToChange;
 };
 
-const SearchBox = ({ query, setQuery }: SearchBoxProps) => {
+function SearchBox({ query, setQuery }: SearchBoxProps) {
   const { modalOpen } = useSelector((state: AppState) => state.ui.globalSearch);
   const listenToChange = useListenToChange(modalOpen);
 
@@ -67,23 +67,23 @@ const SearchBox = ({ query, setQuery }: SearchBoxProps) => {
     <Container>
       <InputContainer>
         <input
-          value={query}
-          onChange={(e) => updateSearchQuery(e.currentTarget.value)}
           autoFocus
+          className="t--global-search-input"
+          onChange={(e) => updateSearchQuery(e.currentTarget.value)}
           onKeyDown={handleKeyDown}
           placeholder={createMessage(OMNIBAR_PLACEHOLDER)}
-          className="t--global-search-input"
+          value={query}
         />
         {query && (
           <Icon
-            name="close"
             className="t--global-clear-input"
+            name="close"
             onClick={() => updateSearchQuery("")}
           />
         )}
       </InputContainer>
     </Container>
   );
-};
+}
 
 export default connectSearchBox<SearchBoxProps>(SearchBox);
diff --git a/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx b/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx
index b314064464..bc2afc5b01 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx
@@ -26,23 +26,25 @@ type Props = {
   children: React.ReactNode;
 };
 
-const DocsSearchModal = ({ modalOpen, toggleShow, children }: Props) => (
-  <StyledDocsSearchModal>
-    <Overlay
-      isOpen={modalOpen}
-      onClose={toggleShow}
-      hasBackdrop={true}
-      usePortal={false}
-      onClosing={() => {
-        AnalyticsUtil.logEvent("CLOSE_OMNIBAR");
-      }}
-      transitionDuration={25}
-    >
-      <div className={`${Classes.OVERLAY_CONTENT} t--global-search-modal`}>
-        {children}
-      </div>
-    </Overlay>
-  </StyledDocsSearchModal>
-);
+function DocsSearchModal({ modalOpen, toggleShow, children }: Props) {
+  return (
+    <StyledDocsSearchModal>
+      <Overlay
+        hasBackdrop
+        isOpen={modalOpen}
+        onClose={toggleShow}
+        onClosing={() => {
+          AnalyticsUtil.logEvent("CLOSE_OMNIBAR");
+        }}
+        transitionDuration={25}
+        usePortal={false}
+      >
+        <div className={`${Classes.OVERLAY_CONTENT} t--global-search-modal`}>
+          {children}
+        </div>
+      </Overlay>
+    </StyledDocsSearchModal>
+  );
+}
 
 export default DocsSearchModal;
diff --git a/app/client/src/components/editorComponents/GlobalSearch/SearchResults.tsx b/app/client/src/components/editorComponents/GlobalSearch/SearchResults.tsx
index 2b660fa826..5972603e91 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/SearchResults.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/SearchResults.tsx
@@ -90,10 +90,7 @@ const StyledDocumentIcon = styled(DocumentIcon)`
   display: flex;
 `;
 
-const DocumentationItem = (props: {
-  item: SearchItem;
-  isActiveItem: boolean;
-}) => {
+function DocumentationItem(props: { item: SearchItem; isActiveItem: boolean }) {
   return (
     <>
       <StyledDocumentIcon />
@@ -101,11 +98,11 @@ const DocumentationItem = (props: {
         <span>
           <AlgoliaHighlight attribute="title" hit={props.item} />
         </span>
-        <ActionLink item={props.item} isActiveItem={props.isActiveItem} />
+        <ActionLink isActiveItem={props.isActiveItem} item={props.item} />
       </ItemTitle>
     </>
   );
-};
+}
 
 const WidgetIconWrapper = styled.span`
   svg {
@@ -120,11 +117,11 @@ const usePageName = (pageId: string) => {
   return page?.pageName;
 };
 
-const WidgetItem = (props: {
+function WidgetItem(props: {
   query: string;
   item: SearchItem;
   isActiveItem: boolean;
-}) => {
+}) {
   const { query, item } = props;
   const { type } = item || {};
   let title = getItemTitle(item);
@@ -136,11 +133,11 @@ const WidgetItem = (props: {
       <WidgetIconWrapper>{getWidgetIcon(type)}</WidgetIconWrapper>
       <ItemTitle>
         <Highlight match={query} text={title} />
-        <ActionLink item={props.item} isActiveItem={props.isActiveItem} />
+        <ActionLink isActiveItem={props.isActiveItem} item={props.item} />
       </ItemTitle>
     </>
   );
-};
+}
 
 const ActionIconWrapper = styled.div`
   & > div {
@@ -149,11 +146,11 @@ const ActionIconWrapper = styled.div`
   }
 `;
 
-const ActionItem = (props: {
+function ActionItem(props: {
   query: string;
   item: SearchItem;
   isActiveItem: boolean;
-}) => {
+}) {
   const { item, query } = props;
   const { config } = item || {};
   const { pluginType } = config;
@@ -175,17 +172,17 @@ const ActionItem = (props: {
       <ActionIconWrapper>{icon}</ActionIconWrapper>
       <ItemTitle>
         <Highlight match={query} text={title} />
-        <ActionLink item={props.item} isActiveItem={props.isActiveItem} />
+        <ActionLink isActiveItem={props.isActiveItem} item={props.item} />
       </ItemTitle>
     </>
   );
-};
+}
 
-const DatasourceItem = (props: {
+function DatasourceItem(props: {
   query: string;
   item: SearchItem;
   isActiveItem: boolean;
-}) => {
+}) {
   const { item, query } = props;
   const plugins = useSelector((state: AppState) => {
     return state.entities.plugins.list;
@@ -198,17 +195,17 @@ const DatasourceItem = (props: {
       {icon}
       <ItemTitle>
         <Highlight match={query} text={title} />
-        <ActionLink item={props.item} isActiveItem={props.isActiveItem} />
+        <ActionLink isActiveItem={props.isActiveItem} item={props.item} />
       </ItemTitle>
     </>
   );
-};
+}
 
-const PageItem = (props: {
+function PageItem(props: {
   query: string;
   item: SearchItem;
   isActiveItem: boolean;
-}) => {
+}) {
   const { query, item } = props;
   const title = getItemTitle(item);
   const icon = item.isDefault ? homePageIcon : pageIcon;
@@ -218,11 +215,11 @@ const PageItem = (props: {
       {icon}
       <ItemTitle>
         <Highlight match={query} text={title} />
-        <ActionLink item={props.item} isActiveItem={props.isActiveItem} />
+        <ActionLink isActiveItem={props.isActiveItem} item={props.item} />
       </ItemTitle>
     </>
   );
-};
+}
 
 const StyledSectionTitleContainer = styled.div`
   display: flex;
@@ -238,14 +235,18 @@ const StyledSectionTitleContainer = styled.div`
   margin-left: -${(props) => props.theme.spaces[3]}px;
 `;
 
-const SectionTitle = ({ item }: { item: SearchItem }) => (
-  <StyledSectionTitleContainer>
-    <img className="section-title__icon" src={item.icon} />
-    <span className="section-title__text">{item.title}</span>
-  </StyledSectionTitleContainer>
-);
+function SectionTitle({ item }: { item: SearchItem }) {
+  return (
+    <StyledSectionTitleContainer>
+      <img className="section-title__icon" src={item.icon} />
+      <span className="section-title__text">{item.title}</span>
+    </StyledSectionTitleContainer>
+  );
+}
 
-const Placeholder = ({ item }: { item: SearchItem }) => <div>{item.title}</div>;
+function Placeholder({ item }: { item: SearchItem }) {
+  return <div>{item.title}</div>;
+}
 
 const SearchItemByType = {
   [SEARCH_ITEM_TYPES.document]: DocumentationItem,
@@ -263,7 +264,7 @@ type ItemProps = {
   query: string;
 };
 
-const SearchItemComponent = (props: ItemProps) => {
+function SearchItemComponent(props: ItemProps) {
   const { item, index, query } = props;
   const itemRef = useRef<HTMLDivElement>(null);
   const searchContext = useContext(SearchContext);
@@ -283,7 +284,9 @@ const SearchItemComponent = (props: ItemProps) => {
 
   return (
     <SearchItemContainer
-      ref={itemRef}
+      className="t--docHit"
+      isActiveItem={isActiveItem}
+      itemType={itemType}
       onClick={() => {
         if (
           itemType !== SEARCH_ITEM_TYPES.sectionTitle &&
@@ -295,14 +298,12 @@ const SearchItemComponent = (props: ItemProps) => {
           }
         }
       }}
-      className="t--docHit"
-      isActiveItem={isActiveItem}
-      itemType={itemType}
+      ref={itemRef}
     >
-      <Item item={item} query={query} isActiveItem={isActiveItem} />
+      <Item isActiveItem={isActiveItem} item={item} query={query} />
     </SearchItemContainer>
   );
-};
+}
 
 const SearchResultsContainer = styled.div`
   padding: 0 ${(props) => props.theme.spaces[6]}px;
@@ -310,25 +311,25 @@ const SearchResultsContainer = styled.div`
   width: 250px;
 `;
 
-const SearchResults = ({
+function SearchResults({
   searchResults,
   query,
 }: {
   searchResults: SearchItem[];
   query: string;
-}) => {
+}) {
   return (
     <SearchResultsContainer>
       {searchResults.map((item: SearchItem, index: number) => (
         <SearchItemComponent
-          key={index}
           index={index}
           item={item}
+          key={index}
           query={query}
         />
       ))}
     </SearchResultsContainer>
   );
-};
+}
 
 export default SearchResults;
diff --git a/app/client/src/components/editorComponents/GlobalSearch/SetSearchResults.tsx b/app/client/src/components/editorComponents/GlobalSearch/SetSearchResults.tsx
index 17ce6f433c..c4f2e12672 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/SetSearchResults.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/SetSearchResults.tsx
@@ -9,7 +9,7 @@ type Props = {
   hits: IHit[];
 };
 
-const SearchResults = ({ hits, setDocumentationSearchResults }: Props) => {
+function SearchResults({ hits, setDocumentationSearchResults }: Props) {
   const debounsedSetter = useCallback(
     debounce(setDocumentationSearchResults, 100),
     [],
@@ -23,6 +23,6 @@ const SearchResults = ({ hits, setDocumentationSearchResults }: Props) => {
   }, [hits]);
 
   return null;
-};
+}
 
 export default connectHits<Props, IHit>(SearchResults);
diff --git a/app/client/src/components/editorComponents/GlobalSearch/index.tsx b/app/client/src/components/editorComponents/GlobalSearch/index.tsx
index c8f94f1d76..735efbdefa 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/index.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/index.tsx
@@ -92,7 +92,7 @@ const getSectionTitle = (title: string, icon: any) => ({
   icon,
 });
 
-const GlobalSearch = () => {
+function GlobalSearch() {
   const modalOpen = useSelector(isModalOpenSelector);
   const defaultDocs = useDefaultDocumentationResults(modalOpen);
   const params = useParams<ExplorerURLParams>();
@@ -375,7 +375,7 @@ const GlobalSearch = () => {
   return (
     <SearchContext.Provider value={searchContext}>
       <GlobalSearchHotKeys {...hotKeyProps}>
-        <SearchModal toggleShow={toggleShow} modalOpen={modalOpen}>
+        <SearchModal modalOpen={modalOpen} toggleShow={toggleShow}>
           <AlgoliaSearchWrapper query={query}>
             <StyledContainer>
               <SearchBox query={query} setQuery={setQuery} />
@@ -386,8 +386,8 @@ const GlobalSearch = () => {
                 {searchResults.length > 0 ? (
                   <>
                     <SearchResults
-                      searchResults={searchResults}
                       query={query}
+                      searchResults={searchResults}
                     />
                     <Separator />
                     <Description
@@ -407,6 +407,6 @@ const GlobalSearch = () => {
       </GlobalSearchHotKeys>
     </SearchContext.Provider>
   );
-};
+}
 
 export default GlobalSearch;
diff --git a/app/client/src/components/editorComponents/HelperTooltip.tsx b/app/client/src/components/editorComponents/HelperTooltip.tsx
index 0950bbab6f..f2b04c021f 100644
--- a/app/client/src/components/editorComponents/HelperTooltip.tsx
+++ b/app/client/src/components/editorComponents/HelperTooltip.tsx
@@ -60,26 +60,26 @@ interface Props {
   rightIcon: Function;
 }
 
-const HelperTooltip = (props: Props) => {
+function HelperTooltip(props: Props) {
   return (
-    <React.Fragment>
+    <>
       <TooltipStyles />
       <Popover
-        autoFocus={true}
-        canEscapeKeyClose={true}
+        autoFocus
+        canEscapeKeyClose
         content={props.description}
-        position="bottom"
         defaultIsOpen={false}
         interactionKind={PopoverInteractionKind.HOVER}
-        usePortal
         portalClassName="helper-tooltip"
+        position="bottom"
+        usePortal
       >
         <IconContainer>
-          <props.rightIcon width={22} height={22} />
+          <props.rightIcon height={22} width={22} />
         </IconContainer>
       </Popover>
-    </React.Fragment>
+    </>
   );
-};
+}
 
 export default HelperTooltip;
diff --git a/app/client/src/components/editorComponents/HighlightedCode/index.tsx b/app/client/src/components/editorComponents/HighlightedCode/index.tsx
index 86a83729a7..07128e12d0 100644
--- a/app/client/src/components/editorComponents/HighlightedCode/index.tsx
+++ b/app/client/src/components/editorComponents/HighlightedCode/index.tsx
@@ -64,13 +64,13 @@ export const HighlightedCode = forwardRef(
 
     return (
       <StyledCode
-        skin={props.skin}
+        className={props.className}
         onClick={props.onClick}
         ref={ref}
-        className={props.className}
+        skin={props.skin}
       >
         {!props.multiline && (
-          <code ref={codeRef} className={language}>
+          <code className={language} ref={codeRef}>
             {props.codeText}
           </code>
         )}
diff --git a/app/client/src/components/editorComponents/InputComponent.tsx b/app/client/src/components/editorComponents/InputComponent.tsx
index d077c5d422..9d62f0b1eb 100644
--- a/app/client/src/components/editorComponents/InputComponent.tsx
+++ b/app/client/src/components/editorComponents/InputComponent.tsx
@@ -21,17 +21,17 @@ type InputComponentProps = {
   autoFocus?: boolean;
 };
 
-const InputComponent = (props: InputComponentProps) => {
+function InputComponent(props: InputComponentProps) {
   return (
     <StyledInputGroup
       {...props.input}
+      autoFocus={props.autoFocus}
       disabled={props.disabled}
+      intent={props.intent as BlueprintIntent}
       placeholder={props.placeholder}
       type={props.type}
-      intent={props.intent as BlueprintIntent}
-      autoFocus={props.autoFocus}
     />
   );
-};
+}
 
 export default InputComponent;
diff --git a/app/client/src/components/editorComponents/LetterIcon.tsx b/app/client/src/components/editorComponents/LetterIcon.tsx
index b02f8b7148..3d20354d40 100644
--- a/app/client/src/components/editorComponents/LetterIcon.tsx
+++ b/app/client/src/components/editorComponents/LetterIcon.tsx
@@ -13,8 +13,8 @@ const LetterIconWrapper = styled.div`
   align-items: center;
 `;
 
-const LetterIcon = (props: { text: string }) => {
+function LetterIcon(props: { text: string }) {
   return <LetterIconWrapper>{props.text.toUpperCase()}</LetterIconWrapper>;
-};
+}
 
 export default LetterIcon;
diff --git a/app/client/src/components/editorComponents/LightningMenu/LightningMenuTrigger.tsx b/app/client/src/components/editorComponents/LightningMenu/LightningMenuTrigger.tsx
index a81bb86108..5c7b39e57f 100644
--- a/app/client/src/components/editorComponents/LightningMenu/LightningMenuTrigger.tsx
+++ b/app/client/src/components/editorComponents/LightningMenu/LightningMenuTrigger.tsx
@@ -43,7 +43,7 @@ interface LightningMenuTriggerProps {
 
 type MenuState = "none" | "default" | "active" | "hover";
 
-export const LightningMenuTrigger = (props: LightningMenuTriggerProps) => {
+export function LightningMenuTrigger(props: LightningMenuTriggerProps) {
   const getMenuState = () => {
     let menuState: MenuState = "none";
     if (props.isOpened) {
@@ -70,27 +70,27 @@ export const LightningMenuTrigger = (props: LightningMenuTriggerProps) => {
   const { background, iconProps } = getMenuState();
   return (
     <LightningIconWrapper
-      color={iconProps.color}
       background={background}
+      className="lightning-menu"
+      color={iconProps.color}
+      isFocused={props.isFocused}
       onClick={() => {
         if (props.onOpenLightningMenu) {
           props.onOpenLightningMenu();
         }
       }}
       skin={props.skin}
-      className="lightning-menu"
-      isFocused={props.isFocused}
     >
       <Tooltip
-        content={createMessage(LIGHTNING_MENU_DATA_TOOLTIP)}
         autoFocus={false}
+        content={createMessage(LIGHTNING_MENU_DATA_TOOLTIP)}
         hoverOpenDelay={1000}
-        openOnTargetFocus={false}
         minWidth={"180px"}
+        openOnTargetFocus={false}
         position={Position.LEFT}
       >
         <Icon name="lightning" size={IconSize.LARGE} />
       </Tooltip>
     </LightningIconWrapper>
   );
-};
+}
diff --git a/app/client/src/components/editorComponents/LightningMenu/helpers.tsx b/app/client/src/components/editorComponents/LightningMenu/helpers.tsx
index b67d1a0935..4d155528b2 100644
--- a/app/client/src/components/editorComponents/LightningMenu/helpers.tsx
+++ b/app/client/src/components/editorComponents/LightningMenu/helpers.tsx
@@ -38,10 +38,10 @@ export const getApiOptions = (
         {
           content: (
             <Button
-              text={createMessage(LIGHTNING_MENU_API_CREATE_NEW)}
               icon="plus"
               iconAlignment="left"
               skin={skin}
+              text={createMessage(LIGHTNING_MENU_API_CREATE_NEW)}
               type="button"
             />
           ),
@@ -87,10 +87,10 @@ export const getQueryOptions = (
         {
           content: (
             <Button
-              text={createMessage(LIGHTNING_MENU_QUERY_CREATE_NEW)}
               icon="plus"
               iconAlignment="left"
               skin={skin}
+              text={createMessage(LIGHTNING_MENU_QUERY_CREATE_NEW)}
               type="button"
             />
           ),
diff --git a/app/client/src/components/editorComponents/LightningMenu/index.tsx b/app/client/src/components/editorComponents/LightningMenu/index.tsx
index 016b6c1789..15e542486d 100644
--- a/app/client/src/components/editorComponents/LightningMenu/index.tsx
+++ b/app/client/src/components/editorComponents/LightningMenu/index.tsx
@@ -68,7 +68,7 @@ type LightningMenuProps = {
   theme: Theme;
 };
 
-export const LightningMenu = (props: LightningMenuProps) => {
+export function LightningMenu(props: LightningMenuProps) {
   const widgets = useWidgets();
   const { apis, queries, saas } = useActions();
   const pageId = usePageId();
@@ -85,16 +85,16 @@ export const LightningMenu = (props: LightningMenuProps) => {
         dispatch,
         props.updateDynamicInputValue,
         <LightningMenuTrigger
-          skin={props.skin}
-          theme={props.theme}
           isFocused={props.isFocused}
           isOpened={props.isOpened}
           onOpenLightningMenu={props.onOpenLightningMenu}
+          skin={props.skin}
+          theme={props.theme}
         />,
         props.onCloseLightningMenu,
       )}
     />
   );
-};
+}
 
 export default withTheme(LightningMenu);
diff --git a/app/client/src/components/editorComponents/NavBarItem.tsx b/app/client/src/components/editorComponents/NavBarItem.tsx
index 3f902b2f43..54a556063c 100644
--- a/app/client/src/components/editorComponents/NavBarItem.tsx
+++ b/app/client/src/components/editorComponents/NavBarItem.tsx
@@ -90,20 +90,20 @@ class NavBarItem extends React.Component<Props> {
     return (
       <ItemContainer>
         <NavLink
+          className={this.props.className}
           exact={exact}
-          to={path}
           isActive={(match, location) => {
             return isActive(path, location.pathname);
           }}
-          className={this.props.className}
           onClick={() => {
             onClick && onClick();
             AnalyticsUtil.logEvent("SIDEBAR_NAVIGATION", {
               navPage: this.props.title.toUpperCase(),
             });
           }}
+          to={path}
         >
-          <IconContainer width={width} height={height}>
+          <IconContainer height={height} width={width}>
             {icon({ width, height })}
           </IconContainer>
           <span>{title}</span>
diff --git a/app/client/src/components/editorComponents/Onboarding/Boxed.tsx b/app/client/src/components/editorComponents/Onboarding/Boxed.tsx
index 500ce4a139..36f15bee4d 100644
--- a/app/client/src/components/editorComponents/Onboarding/Boxed.tsx
+++ b/app/client/src/components/editorComponents/Onboarding/Boxed.tsx
@@ -13,10 +13,10 @@ type BoxedProps = {
 };
 
 // Boxed(or hidden).
-const Boxed: React.FC<BoxedProps> = (props: BoxedProps) => {
+function Boxed(props: BoxedProps) {
   const currentStep = useSelector(getCurrentStep);
   const onboarding = useSelector(inOnboarding);
-
+  /*eslint-disable react/jsx-no-useless-fragment*/
   if (onboarding && currentStep < props.step && !props.show) {
     if (props.alternative) {
       return <>{props.alternative}</>;
@@ -26,7 +26,8 @@ const Boxed: React.FC<BoxedProps> = (props: BoxedProps) => {
   }
 
   return <>{props.children}</>;
-};
+  /*eslint-enable react/jsx-no-useless-fragment */
+}
 
 Boxed.defaultProps = {
   show: false,
diff --git a/app/client/src/components/editorComponents/Onboarding/EndTour.tsx b/app/client/src/components/editorComponents/Onboarding/EndTour.tsx
index 34fa65686d..374b405305 100644
--- a/app/client/src/components/editorComponents/Onboarding/EndTour.tsx
+++ b/app/client/src/components/editorComponents/Onboarding/EndTour.tsx
@@ -11,7 +11,7 @@ const EndTourText = styled.span`
   cursor: pointer;
 `;
 
-const EndTour = () => {
+function EndTour() {
   const dispatch = useDispatch();
 
   return (
@@ -24,6 +24,6 @@ const EndTour = () => {
       End Tour
     </EndTourText>
   );
-};
+}
 
 export default EndTour;
diff --git a/app/client/src/components/editorComponents/Onboarding/EndTourHelper.tsx b/app/client/src/components/editorComponents/Onboarding/EndTourHelper.tsx
index d10e968157..5b234be094 100644
--- a/app/client/src/components/editorComponents/Onboarding/EndTourHelper.tsx
+++ b/app/client/src/components/editorComponents/Onboarding/EndTourHelper.tsx
@@ -3,7 +3,7 @@ import React, { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import OnboardingHelper from "./Helper";
 
-const EndTourHelper = () => {
+function EndTourHelper() {
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -11,6 +11,6 @@ const EndTourHelper = () => {
   }, []);
 
   return <OnboardingHelper />;
-};
+}
 
 export default EndTourHelper;
diff --git a/app/client/src/components/editorComponents/Onboarding/Helper.tsx b/app/client/src/components/editorComponents/Onboarding/Helper.tsx
index c7f187cc85..4e0848d076 100644
--- a/app/client/src/components/editorComponents/Onboarding/Helper.tsx
+++ b/app/client/src/components/editorComponents/Onboarding/Helper.tsx
@@ -181,7 +181,7 @@ const SubStepContainer = styled.div`
   }
 `;
 
-const Helper = () => {
+function Helper() {
   const showHelper = useSelector(
     (state: AppState) => state.ui.onBoarding.showHelper,
   );
@@ -246,9 +246,9 @@ const Helper = () => {
                     >
                       <span>{helperConfig.hint?.snippet}</span>
                       <Icon
+                        color={Colors.MINE_SHAFT}
                         icon="duplicate"
                         iconSize={14}
-                        color={Colors.MINE_SHAFT}
                       />
                     </Snippet>
                   </>
@@ -263,10 +263,10 @@ const Helper = () => {
             steps.map((stepper) => {
               return (
                 <Stepper
-                  key={stepper}
                   completed={
                     helperConfig.step ? helperConfig.step >= stepper : false
                   }
+                  key={stepper}
                 />
               );
             })}
@@ -322,6 +322,6 @@ const Helper = () => {
       </BottomContainer>
     </StyledContainer>
   );
-};
+}
 
 export default Helper;
diff --git a/app/client/src/components/editorComponents/Onboarding/Indicator.tsx b/app/client/src/components/editorComponents/Onboarding/Indicator.tsx
index 704f7af6a3..d988347a12 100644
--- a/app/client/src/components/editorComponents/Onboarding/Indicator.tsx
+++ b/app/client/src/components/editorComponents/Onboarding/Indicator.tsx
@@ -1,7 +1,7 @@
-import React, { ReactNode } from "react";
-import styled from "styled-components";
-import { useSelector } from "store";
 import { OnboardingStep } from "constants/OnboardingConstants";
+import React from "react";
+import { useSelector } from "store";
+import styled from "styled-components";
 
 const Wrapper = styled.div<{ width: number; hasButton?: boolean }>`
   position: relative;
@@ -82,11 +82,11 @@ type IndicatorProps = {
   width?: number;
   // Is wrapped around a button
   hasButton?: boolean;
-  children: ReactNode;
+  children: JSX.Element;
   className?: string;
 };
 
-const Indicator: React.FC<IndicatorProps> = (props: IndicatorProps) => {
+function Indicator(props: IndicatorProps): JSX.Element {
   const showingIndicator = useSelector(
     (state) => state.ui.onBoarding.showingIndicator,
   );
@@ -94,17 +94,17 @@ const Indicator: React.FC<IndicatorProps> = (props: IndicatorProps) => {
   if (showingIndicator === props.step && props.show) {
     return (
       <Wrapper
+        className={`t--onboarding-indicator ${props.className}`}
         hasButton={props.hasButton}
         width={props.width || 250}
-        className={`t--onboarding-indicator ${props.className}`}
       >
         {props.children}
       </Wrapper>
     );
   }
 
-  return <>{props.children}</>;
-};
+  return props.children || null;
+}
 
 Indicator.defaultProps = {
   show: true,
diff --git a/app/client/src/components/editorComponents/Onboarding/WelcomeHelper.tsx b/app/client/src/components/editorComponents/Onboarding/WelcomeHelper.tsx
index 2faa4432e3..5424740baa 100644
--- a/app/client/src/components/editorComponents/Onboarding/WelcomeHelper.tsx
+++ b/app/client/src/components/editorComponents/Onboarding/WelcomeHelper.tsx
@@ -14,7 +14,7 @@ import { useSelector } from "store";
 import { getOnboardingWelcomeState } from "utils/storage";
 import OnboardingHelper from "./Helper";
 
-const WelcomeHelper = () => {
+function WelcomeHelper() {
   const [showHelper, setShowHelper] = useState(false);
   const currentUser = useSelector(getCurrentUser);
   const showWelcomeHelper = useSelector(
@@ -43,6 +43,6 @@ const WelcomeHelper = () => {
   if (!showHelper) return null;
 
   return <OnboardingHelper />;
-};
+}
 
 export default WelcomeHelper;
diff --git a/app/client/src/components/editorComponents/PageLoader.tsx b/app/client/src/components/editorComponents/PageLoader.tsx
index 27a7e4a6c5..12596c18cb 100644
--- a/app/client/src/components/editorComponents/PageLoader.tsx
+++ b/app/client/src/components/editorComponents/PageLoader.tsx
@@ -23,7 +23,7 @@ type PageLoaderProps = {
   value?: number;
 };
 
-export const PageLoader = (props: PageLoaderProps) => {
+export function PageLoader(props: PageLoaderProps) {
   return (
     <PageLoaderWrapper>
       <div>
@@ -32,6 +32,6 @@ export const PageLoader = (props: PageLoaderProps) => {
       </div>
     </PageLoaderWrapper>
   );
-};
+}
 
 export default PageLoader;
diff --git a/app/client/src/components/editorComponents/ReadOnlyEditor.tsx b/app/client/src/components/editorComponents/ReadOnlyEditor.tsx
index 0304bc8c3d..30197857d0 100644
--- a/app/client/src/components/editorComponents/ReadOnlyEditor.tsx
+++ b/app/client/src/components/editorComponents/ReadOnlyEditor.tsx
@@ -18,7 +18,7 @@ interface Props {
   folding: boolean;
 }
 
-const ReadOnlyEditor = (props: Props) => {
+function ReadOnlyEditor(props: Props) {
   const editorProps: EditorProps = {
     hinting: [],
     input: props.input,
@@ -34,6 +34,6 @@ const ReadOnlyEditor = (props: Props) => {
     folding: props.folding,
   };
   return <CodeEditor {...editorProps} />;
-};
+}
 
 export default ReadOnlyEditor;
diff --git a/app/client/src/components/editorComponents/RequestView.tsx b/app/client/src/components/editorComponents/RequestView.tsx
index da4e87d59a..addb89b198 100644
--- a/app/client/src/components/editorComponents/RequestView.tsx
+++ b/app/client/src/components/editorComponents/RequestView.tsx
@@ -22,14 +22,14 @@ const StyledValue = styled.span`
   user-select: text;
 `;
 
-const KeyValuePair = function(props: { hKey: string; hValue: string }) {
+function KeyValuePair(props: { hKey: string; hValue: string }) {
   return (
     <StyledValue>
       <StyledKey>{props.hKey}</StyledKey>
       {props.hValue}
     </StyledValue>
   );
-};
+}
 
 const StyledTreeContainer = styled.div`
   font-family: ${(props) => props.theme.fonts.text};
@@ -138,6 +138,7 @@ export function RequestView(props: {
   return (
     <StyledTreeContainer>
       <Tree
+        className={Classes.ELEVATION_0}
         contents={[
           {
             id: 1,
@@ -180,11 +181,11 @@ export function RequestView(props: {
                 id: 1,
                 label: (
                   <ReadOnlyEditor
+                    folding
+                    height={"100%"}
                     input={{
                       value: props.requestBody,
                     }}
-                    height={"100%"}
-                    folding={true}
                   />
                 ),
               },
@@ -194,7 +195,6 @@ export function RequestView(props: {
         onNodeClick={handleNodeClick}
         onNodeCollapse={handleNodeCollapse}
         onNodeExpand={handleNodeExpand}
-        className={Classes.ELEVATION_0}
       />
     </StyledTreeContainer>
   );
diff --git a/app/client/src/components/editorComponents/ResizableComponent.tsx b/app/client/src/components/editorComponents/ResizableComponent.tsx
index 58135566d4..9c07e1fe6e 100644
--- a/app/client/src/components/editorComponents/ResizableComponent.tsx
+++ b/app/client/src/components/editorComponents/ResizableComponent.tsx
@@ -249,7 +249,9 @@ export const ResizableComponent = memo((props: ResizableComponentProps) => {
 
   return (
     <Resizable
-      ref={resizableRef}
+      componentHeight={dimensions.height}
+      componentWidth={dimensions.width}
+      enable={!isDragging && isWidgetFocused && !props.resizeDisabled}
       handles={{
         left: LeftHandleStyles,
         top: TopHandleStyles,
@@ -260,17 +262,15 @@ export const ResizableComponent = memo((props: ResizableComponentProps) => {
         topRight: TopRightHandleStyles,
         bottomLeft: BottomLeftHandleStyles,
       }}
-      componentHeight={dimensions.height}
-      componentWidth={dimensions.width}
+      isColliding={isColliding}
       onStart={handleResizeStart}
       onStop={updateSize}
+      ref={resizableRef}
       snapGrid={{ x: props.parentColumnSpace, y: props.parentRowSpace }}
-      enable={!isDragging && isWidgetFocused && !props.resizeDisabled}
-      isColliding={isColliding}
     >
       <VisibilityContainer
-        visible={!!props.isVisible}
         padding={props.paddingOffset}
+        visible={!!props.isVisible}
       >
         {props.children}
       </VisibilityContainer>
diff --git a/app/client/src/components/editorComponents/SelectComponent.tsx b/app/client/src/components/editorComponents/SelectComponent.tsx
index 1060c93aee..63402c0bc4 100644
--- a/app/client/src/components/editorComponents/SelectComponent.tsx
+++ b/app/client/src/components/editorComponents/SelectComponent.tsx
@@ -14,7 +14,7 @@ type SelectComponentProps = {
   outline?: boolean;
 };
 
-export const SelectComponent = (props: SelectComponentProps) => {
+export function SelectComponent(props: SelectComponentProps) {
   const dropdownProps: CustomizedDropdownProps = {
     sections: [
       {
@@ -42,6 +42,6 @@ export const SelectComponent = (props: SelectComponentProps) => {
     openDirection: "down",
   };
   return <CustomizedDropdown {...dropdownProps} />;
-};
+}
 
 export default SelectComponent;
diff --git a/app/client/src/components/editorComponents/StoreAsDatasource.tsx b/app/client/src/components/editorComponents/StoreAsDatasource.tsx
index c501113bc8..35abcea5ff 100644
--- a/app/client/src/components/editorComponents/StoreAsDatasource.tsx
+++ b/app/client/src/components/editorComponents/StoreAsDatasource.tsx
@@ -35,7 +35,7 @@ type storeDataSourceProps = {
   enable: boolean;
 };
 
-const StoreAsDatasource = (props: storeDataSourceProps) => {
+function StoreAsDatasource(props: storeDataSourceProps) {
   const dispatch = useDispatch();
 
   return (
@@ -48,6 +48,6 @@ const StoreAsDatasource = (props: storeDataSourceProps) => {
       <Text type={TextType.P1}>Save As Datasource</Text>
     </DatasourceIcon>
   );
-};
+}
 
 export default StoreAsDatasource;
diff --git a/app/client/src/components/editorComponents/WidgetNameComponent/DeleteControl.tsx b/app/client/src/components/editorComponents/WidgetNameComponent/DeleteControl.tsx
index ae06b89f5f..cce5a8e14f 100644
--- a/app/client/src/components/editorComponents/WidgetNameComponent/DeleteControl.tsx
+++ b/app/client/src/components/editorComponents/WidgetNameComponent/DeleteControl.tsx
@@ -33,7 +33,7 @@ type DeleteControlProps = {
   show: boolean;
 };
 
-const DeleteControl = (props: DeleteControlProps) => {
+function DeleteControl(props: DeleteControlProps) {
   return props.show ? (
     <StyledDeleteIcon
       className="control t--widget-delete-control"
@@ -44,5 +44,5 @@ const DeleteControl = (props: DeleteControlProps) => {
       </Tooltip>
     </StyledDeleteIcon>
   ) : null;
-};
+}
 export default DeleteControl;
diff --git a/app/client/src/components/editorComponents/WidgetNameComponent/HelpControl.tsx b/app/client/src/components/editorComponents/WidgetNameComponent/HelpControl.tsx
index 7269240480..99d589a592 100644
--- a/app/client/src/components/editorComponents/WidgetNameComponent/HelpControl.tsx
+++ b/app/client/src/components/editorComponents/WidgetNameComponent/HelpControl.tsx
@@ -13,7 +13,7 @@ import { WidgetType } from "constants/WidgetConstants";
 
 const HelpIcon = ControlIcons.HELP_CONTROL;
 const helpControlIcon = (
-  <HelpIcon width={14} height={14} background="transparent" />
+  <HelpIcon background="transparent" height={14} width={14} />
 );
 
 const StyledHelpIcon = styled.div`
@@ -38,7 +38,7 @@ const StyledHelpIcon = styled.div`
   }
 `;
 
-export const HelpControl = (props: { type: WidgetType; show: boolean }) => {
+export function HelpControl(props: { type: WidgetType; show: boolean }) {
   const dispatch = useDispatch();
   return props.show ? (
     <StyledHelpIcon
@@ -54,6 +54,6 @@ export const HelpControl = (props: { type: WidgetType; show: boolean }) => {
       </Tooltip>
     </StyledHelpIcon>
   ) : null;
-};
+}
 
 export default HelpControl;
diff --git a/app/client/src/components/editorComponents/WidgetNameComponent/SettingsControl.tsx b/app/client/src/components/editorComponents/WidgetNameComponent/SettingsControl.tsx
index cd1378725a..b33a28bd0f 100644
--- a/app/client/src/components/editorComponents/WidgetNameComponent/SettingsControl.tsx
+++ b/app/client/src/components/editorComponents/WidgetNameComponent/SettingsControl.tsx
@@ -65,35 +65,35 @@ const getStyles = (activity: Activities): CSSProperties | undefined => {
   }
 };
 
-export const SettingsControl = (props: SettingsControlProps) => {
+export function SettingsControl(props: SettingsControlProps) {
   const settingsIcon = (
     <SettingsIcon
-      width={12}
-      height={14}
       color={
         props.activity === Activities.HOVERING
           ? Colors.BLACK_PEARL
           : Colors.WHITE
       }
+      height={14}
+      width={12}
     />
   );
 
   return (
     <StyledTooltip
       content="Edit widget properties"
-      position="top-right"
       hoverOpenDelay={500}
+      position="top-right"
     >
       <SettingsWrapper
-        style={getStyles(props.activity)}
-        onClick={props.toggleSettings}
         className="t--widget-propertypane-toggle"
+        onClick={props.toggleSettings}
+        style={getStyles(props.activity)}
       >
         <WidgetName className="t--widget-name">{props.name}</WidgetName>
         {settingsIcon}
       </SettingsWrapper>
     </StyledTooltip>
   );
-};
+}
 
 export default SettingsControl;
diff --git a/app/client/src/components/editorComponents/WidgetNameComponent/index.tsx b/app/client/src/components/editorComponents/WidgetNameComponent/index.tsx
index c6a4413c3f..0e5a653bde 100644
--- a/app/client/src/components/editorComponents/WidgetNameComponent/index.tsx
+++ b/app/client/src/components/editorComponents/WidgetNameComponent/index.tsx
@@ -43,7 +43,7 @@ type WidgetNameComponentProps = {
   showControls?: boolean;
 };
 
-export const WidgetNameComponent = (props: WidgetNameComponentProps) => {
+export function WidgetNameComponent(props: WidgetNameComponentProps) {
   const showPropertyPane = useShowPropertyPane();
   // Dispatch hook handy to set a widget as focused/selected
   const { selectWidget } = useWidgetSelection();
@@ -110,13 +110,13 @@ export const WidgetNameComponent = (props: WidgetNameComponentProps) => {
     <PositionStyle data-testid="t--settings-controls-positioned-wrapper">
       <ControlGroup>
         <SettingsControl
-          toggleSettings={togglePropertyEditor}
           activity={currentActivity}
           name={props.widgetName}
+          toggleSettings={togglePropertyEditor}
         />
       </ControlGroup>
     </PositionStyle>
   ) : null;
-};
+}
 
 export default WidgetNameComponent;
diff --git a/app/client/src/components/editorComponents/form/CredentialsTooltip.tsx b/app/client/src/components/editorComponents/form/CredentialsTooltip.tsx
index cfaf653101..a5109a21d6 100644
--- a/app/client/src/components/editorComponents/form/CredentialsTooltip.tsx
+++ b/app/client/src/components/editorComponents/form/CredentialsTooltip.tsx
@@ -74,7 +74,7 @@ interface Props {
   providerCredentialSteps: string;
 }
 
-const HelperTooltip = (props: Props) => {
+function HelperTooltip(props: Props) {
   return (
     <CredentialTooltipWrapper>
       <div className="credentialTooltipContainer">
@@ -84,13 +84,12 @@ const HelperTooltip = (props: Props) => {
         <div className="infoIconDiv">
           <TooltipStyles />
           <Popover
-            autoFocus={true}
-            canEscapeKeyClose={true}
+            autoFocus
+            canEscapeKeyClose
             content={
               <div>
                 <span>How to get credentials: </span>
                 <p
-                  style={{ color: "#d0d7dd", fontWeight: 100 }}
                   dangerouslySetInnerHTML={{
                     __html: props.providerCredentialSteps
                       .split("\\n\\n")
@@ -98,22 +97,23 @@ const HelperTooltip = (props: Props) => {
                       .split("\\n")
                       .join("<br /><br />"),
                   }}
-                ></p>
+                  style={{ color: "#d0d7dd", fontWeight: 100 }}
+                />
               </div>
             }
-            position="bottom"
             defaultIsOpen={false}
             interactionKind={PopoverInteractionKind.HOVER}
-            usePortal
             portalClassName="credentials-tooltip"
+            position="bottom"
+            usePortal
           >
             <IconContainer style={{ display: "inline-block" }}>
               <FormIcons.INFO_ICON
-                width={22}
                 height={22}
                 style={{
                   cursor: "pointer",
                 }}
+                width={22}
               />
             </IconContainer>
           </Popover>
@@ -121,6 +121,6 @@ const HelperTooltip = (props: Props) => {
       </div>
     </CredentialTooltipWrapper>
   );
-};
+}
 
 export default HelperTooltip;
diff --git a/app/client/src/components/editorComponents/form/FieldError.tsx b/app/client/src/components/editorComponents/form/FieldError.tsx
index a5459d0a67..5b5471d30c 100644
--- a/app/client/src/components/editorComponents/form/FieldError.tsx
+++ b/app/client/src/components/editorComponents/form/FieldError.tsx
@@ -20,7 +20,7 @@ type FormFieldErrorProps = {
   className?: string;
 };
 
-export const FormFieldError = (props: FormFieldErrorProps) => {
+export function FormFieldError(props: FormFieldErrorProps) {
   return (
     <StyledError
       className={props.className ? props.className : undefined}
@@ -29,6 +29,6 @@ export const FormFieldError = (props: FormFieldErrorProps) => {
       {props.error || "&nbsp;"}
     </StyledError>
   );
-};
+}
 
 export default FormFieldError;
diff --git a/app/client/src/components/editorComponents/form/FormDialogComponent.tsx b/app/client/src/components/editorComponents/form/FormDialogComponent.tsx
index 8b0ea25a8c..5a9b2375a1 100644
--- a/app/client/src/components/editorComponents/form/FormDialogComponent.tsx
+++ b/app/client/src/components/editorComponents/form/FormDialogComponent.tsx
@@ -15,7 +15,7 @@ type FormDialogComponentProps = {
   applicationId?: string;
 };
 
-export const FormDialogComponent = (props: FormDialogComponentProps) => {
+export function FormDialogComponent(props: FormDialogComponentProps) {
   const [isOpen, setIsOpen] = useState(!!props.isOpen);
 
   const onClose = useCallback(() => {
@@ -37,23 +37,21 @@ export const FormDialogComponent = (props: FormDialogComponentProps) => {
     return null;
 
   return (
-    <React.Fragment>
-      <Dialog
-        canOutsideClickClose={!!props.canOutsideClickClose}
-        title={props.title}
-        isOpen={isOpen}
-        setMaxWidth={props.setMaxWidth}
-        trigger={props.trigger}
-        onOpening={onOpening}
-      >
-        <Form
-          onCancel={onClose}
-          orgId={props.orgId}
-          applicationId={props.applicationId}
-        />
-      </Dialog>
-    </React.Fragment>
+    <Dialog
+      canOutsideClickClose={!!props.canOutsideClickClose}
+      isOpen={isOpen}
+      onOpening={onOpening}
+      setMaxWidth={props.setMaxWidth}
+      title={props.title}
+      trigger={props.trigger}
+    >
+      <Form
+        applicationId={props.applicationId}
+        onCancel={onClose}
+        orgId={props.orgId}
+      />
+    </Dialog>
   );
-};
+}
 
 export default FormDialogComponent;
diff --git a/app/client/src/components/editorComponents/form/FormFooter.tsx b/app/client/src/components/editorComponents/form/FormFooter.tsx
index 9918133a31..807af74bb9 100644
--- a/app/client/src/components/editorComponents/form/FormFooter.tsx
+++ b/app/client/src/components/editorComponents/form/FormFooter.tsx
@@ -30,33 +30,33 @@ const FooterActions = styled.div`
 
 const FormFooterContainer = styled.div``;
 
-export const FormFooter = (props: FormFooterProps) => {
+export function FormFooter(props: FormFooterProps) {
   return (
     <FormFooterContainer>
       {props.divider && <Divider />}
       <FooterActions>
         {props.onCancel && (
           <Button
-            text={props.cancelText || "Cancel"}
-            type="button"
+            filled
             onClick={props.onCancel}
             size={props.size}
-            filled
+            text={props.cancelText || "Cancel"}
+            type="button"
           />
         )}
         <Button
+          disabled={props.canSubmit === false}
+          filled
+          intent="primary"
+          loading={props.submitting}
+          onClick={props.onSubmit}
+          size={props.size}
           text={props.submitText || "Submit"}
           type={props.submitOnEnter ? "submit" : "button"}
-          intent="primary"
-          onClick={props.onSubmit}
-          disabled={props.canSubmit === false}
-          loading={props.submitting}
-          size={props.size}
-          filled
         />
       </FooterActions>
     </FormFooterContainer>
   );
-};
+}
 
 export default FormFooter;
diff --git a/app/client/src/components/editorComponents/form/FormMessage.tsx b/app/client/src/components/editorComponents/form/FormMessage.tsx
index c3940a4299..3eff994783 100644
--- a/app/client/src/components/editorComponents/form/FormMessage.tsx
+++ b/app/client/src/components/editorComponents/form/FormMessage.tsx
@@ -72,32 +72,32 @@ export const ActionsContainer = styled.div`
   }
 `;
 
-export const ActionButton = (props: MessageAction) => {
+export function ActionButton(props: MessageAction) {
   if (props.url) {
     return (
       <Button
         className="appsmith-message-action-button"
-        href={props.url}
-        text={props.text}
-        intent="primary"
         filled
+        href={props.url}
+        intent="primary"
         size="small"
+        text={props.text}
       />
     );
   } else if (props.onClick) {
     return (
       <Button
         className="appsmith-message-action-button"
-        onClick={props.onClick}
-        text={props.text}
-        intent="primary"
         filled
+        intent="primary"
+        onClick={props.onClick}
         size="small"
+        text={props.text}
       />
     );
   }
   return null;
-};
+}
 
 export type FormMessageProps = {
   intent: Intent;
@@ -105,7 +105,7 @@ export type FormMessageProps = {
   actions?: MessageAction[];
 };
 
-export const FormMessage = (props: FormMessageProps) => {
+export function FormMessage(props: FormMessageProps) {
   const actions =
     props.actions &&
     props.actions.map((action) => (
@@ -119,12 +119,12 @@ export const FormMessage = (props: FormMessageProps) => {
   return (
     <StyledMessage>
       <MessageContainer iconbgcolor={iconbgcolor}>
-        <Icon color={IntentColors[props.intent]} width={20} height={20} />
+        <Icon color={IntentColors[props.intent]} height={20} width={20} />
         <p>{props.message}</p>
       </MessageContainer>
       {actions && <ActionsContainer>{actions}</ActionsContainer>}
     </StyledMessage>
   );
-};
+}
 
 export default FormMessage;
diff --git a/app/client/src/components/editorComponents/form/FormTextField.tsx b/app/client/src/components/editorComponents/form/FormTextField.tsx
index cfb7786c6b..d5747f5453 100644
--- a/app/client/src/components/editorComponents/form/FormTextField.tsx
+++ b/app/client/src/components/editorComponents/form/FormTextField.tsx
@@ -18,10 +18,10 @@ const renderComponent = (
 ) => {
   const showError = componentProps.meta.touched && !componentProps.meta.active;
   return (
-    <React.Fragment>
+    <>
       <InputComponent {...componentProps} />
       <FormFieldError error={showError && componentProps.meta.error} />
-    </React.Fragment>
+    </>
   );
 };
 
@@ -36,12 +36,8 @@ type FormTextFieldProps = {
 };
 
 // trigger tests
-const FormTextField = (props: FormTextFieldProps) => {
-  return (
-    <React.Fragment>
-      <Field component={renderComponent} {...props} asyncControl />
-    </React.Fragment>
-  );
-};
+function FormTextField(props: FormTextFieldProps) {
+  return <Field component={renderComponent} {...props} asyncControl />;
+}
 
 export default FormTextField;
diff --git a/app/client/src/components/editorComponents/form/fields/CheckboxField.tsx b/app/client/src/components/editorComponents/form/fields/CheckboxField.tsx
index b315e5dc74..d2e2ab08d1 100644
--- a/app/client/src/components/editorComponents/form/fields/CheckboxField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/CheckboxField.tsx
@@ -11,24 +11,24 @@ type RenderComponentProps = CheckboxProps & {
   };
 };
 
-const RenderComponent = (props: RenderComponentProps) => {
+function RenderComponent(props: RenderComponentProps) {
   const onChangeHandler = (value: boolean) => {
     props.input && props.input.onChange && props.input.onChange(value);
   };
 
   return (
     <Checkbox
+      cypressSelector={props.input?.name}
+      info={props.info}
       isDefaultChecked={props.input?.checked}
       label={props.label}
       onCheckChange={onChangeHandler}
-      info={props.info}
-      cypressSelector={props.input?.name}
     />
   );
-};
+}
 
-export const CheckboxField = (props: BaseFieldProps & CheckboxProps) => {
-  return <Field type="checkbox" component={RenderComponent} {...props} />;
-};
+export function CheckboxField(props: BaseFieldProps & CheckboxProps) {
+  return <Field component={RenderComponent} type="checkbox" {...props} />;
+}
 
 export default CheckboxField;
diff --git a/app/client/src/components/editorComponents/form/fields/DropdownField.tsx b/app/client/src/components/editorComponents/form/fields/DropdownField.tsx
index b9b7498250..f72862c31a 100644
--- a/app/client/src/components/editorComponents/form/fields/DropdownField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/DropdownField.tsx
@@ -19,7 +19,7 @@ interface DropdownFieldProps {
   isDisabled?: boolean;
 }
 
-const DropdownField = (props: DropdownFieldProps & Partial<DropdownProps>) => {
+function DropdownField(props: DropdownFieldProps & Partial<DropdownProps>) {
   return (
     <Field
       className={props.className}
@@ -27,11 +27,11 @@ const DropdownField = (props: DropdownFieldProps & Partial<DropdownProps>) => {
       format={(value: string) => _.find(props.options, { value }) || ""}
       normalize={(option: { value: string }) => option.value}
       {...props}
-      width={props.width}
-      isSearchable={props.isSearchable}
       isDisabled={props.isDisabled}
+      isSearchable={props.isSearchable}
+      width={props.width}
     />
   );
-};
+}
 
 export default DropdownField;
diff --git a/app/client/src/components/editorComponents/form/fields/DropdownFieldWrapper.tsx b/app/client/src/components/editorComponents/form/fields/DropdownFieldWrapper.tsx
index 7f96ec39d0..38c510a93a 100644
--- a/app/client/src/components/editorComponents/form/fields/DropdownFieldWrapper.tsx
+++ b/app/client/src/components/editorComponents/form/fields/DropdownFieldWrapper.tsx
@@ -12,7 +12,7 @@ type DropdownWrapperProps = {
   optionWidth?: string;
 };
 
-const DropdownFieldWrapper = (props: DropdownWrapperProps) => {
+function DropdownFieldWrapper(props: DropdownWrapperProps) {
   const selectedValueHandler = () => {
     if (
       props.input &&
@@ -40,14 +40,14 @@ const DropdownFieldWrapper = (props: DropdownWrapperProps) => {
   return (
     <Dropdown
       className={props.className}
+      height={props.height}
+      onSelect={onSelectHandler}
+      optionWidth={props.optionWidth}
       options={props.options}
       selected={selectedOption}
-      onSelect={onSelectHandler}
       width={props.width}
-      height={props.height}
-      optionWidth={props.optionWidth}
     />
   );
-};
+}
 
 export default DropdownFieldWrapper;
diff --git a/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx b/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx
index a83a90a5d8..704db3bfdc 100644
--- a/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx
+++ b/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx
@@ -10,7 +10,7 @@ type DropdownWrapperProps = {
   options: Array<{ id: string; value: string; label: string }>;
 };
 
-const DropdownWrapper = (props: DropdownWrapperProps) => {
+function DropdownWrapper(props: DropdownWrapperProps) {
   const [selectedOption, setSelectedOption] = useState({
     value: props.placeholder,
   });
@@ -28,11 +28,11 @@ const DropdownWrapper = (props: DropdownWrapperProps) => {
 
   return (
     <Dropdown
+      onSelect={onSelectHandler}
       options={props.options}
       selected={selectedOption}
-      onSelect={onSelectHandler}
     />
   );
-};
+}
 
 export default DropdownWrapper;
diff --git a/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx b/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
index 6851dc2745..94ab53e795 100644
--- a/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
@@ -180,7 +180,9 @@ class EmbeddedDatasourcePathComponent extends React.Component<Props> {
                   .map((datasource) => ({
                     text: datasource.datasourceConfiguration.url,
                     data: datasource,
-                    className: "datasource-hint",
+                    className: !datasource.isValid
+                      ? "datasource-hint invalid"
+                      : "datasource-hint",
                   }));
                 const hints = {
                   list,
@@ -239,7 +241,7 @@ class EmbeddedDatasourcePathComponent extends React.Component<Props> {
           <StoreAsDatasource enable={!!displayValue} />
         ) : datasource && "id" in datasource ? (
           <DatasourceIcon
-            enable={true}
+            enable
             onClick={() =>
               history.push(
                 DATA_SOURCES_EDITOR_ID_URL(
@@ -285,7 +287,7 @@ const mapStateToProps = (
     orgId: state.ui.orgs.currentOrg.id,
     datasource: datasourceMerged,
     datasourceList: state.entities.datasources.list.filter(
-      (d) => d.pluginId === ownProps.pluginId && d.isValid,
+      (d) => d.pluginId === ownProps.pluginId,
     ),
     currentPageId: state.entities.pageList.currentPageId,
     applicationId: state.entities.pageList.applicationId,
@@ -302,16 +304,16 @@ const EmbeddedDatasourcePathConnectedComponent = connect(
   mapDispatchToProps,
 )(EmbeddedDatasourcePathComponent);
 
-const EmbeddedDatasourcePathField = (
+function EmbeddedDatasourcePathField(
   props: BaseFieldProps & {
     pluginId: string;
     placeholder?: string;
     theme: EditorTheme;
   },
-) => {
+) {
   return (
     <Field component={EmbeddedDatasourcePathConnectedComponent} {...props} />
   );
-};
+}
 
 export default EmbeddedDatasourcePathField;
diff --git a/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx b/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
index b5de3402e4..514a02a016 100644
--- a/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
+++ b/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
@@ -78,7 +78,7 @@ const FlexContainer = styled.div`
   }
 `;
 
-const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
+function KeyValueRow(props: Props & WrappedFieldArrayProps) {
   useEffect(() => {
     // Always maintain 2 rows
     if (props.fields.length < 2 && props.pushFields) {
@@ -91,19 +91,19 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
   return (
     <KeyValueStackContainer>
       <FlexContainer>
-        <Flex size={1} className="key-value">
-          <Text type={TextType.H6} case={Case.CAPITALIZE}>
+        <Flex className="key-value" size={1}>
+          <Text case={Case.CAPITALIZE} type={TextType.H6}>
             Key
           </Text>
         </Flex>
-        <Flex size={3} className="key-value">
-          <Text type={TextType.H6} case={Case.CAPITALIZE}>
+        <Flex className="key-value" size={3}>
+          <Text case={Case.CAPITALIZE} type={TextType.H6}>
             Value
           </Text>
         </Flex>
       </FlexContainer>
       {props.fields.length > 0 && (
-        <React.Fragment>
+        <>
           {props.fields.map((field: any, index: number) => {
             const otherProps: Record<string, any> = {};
             if (
@@ -124,28 +124,28 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
               <FormRowWithLabel key={index}>
                 <Flex size={1}>
                   <DynamicTextField
-                    theme={props.theme}
+                    border={CodeEditorBorder.BOTTOM_SIDE}
                     className={`t--${field}.key.${index}`}
+                    dataTreePath={`${props.dataTreePath}[${index}].key`}
+                    hoverInteraction
                     name={`${field}.key`}
                     placeholder={`Key ${index + 1}`}
                     showLightningMenu={false}
-                    dataTreePath={`${props.dataTreePath}[${index}].key`}
-                    hoverInteraction={true}
-                    border={CodeEditorBorder.BOTTOM_SIDE}
+                    theme={props.theme}
                   />
                 </Flex>
 
                 {!props.actionConfig && (
                   <Flex size={3}>
                     <DynamicTextField
-                      theme={props.theme}
+                      border={CodeEditorBorder.BOTTOM_SIDE}
                       className={`t--${field}.value.${index}`}
-                      name={`${field}.value`}
-                      placeholder={`Value ${index + 1}`}
                       dataTreePath={`${props.dataTreePath}[${index}].value`}
                       expected={FIELD_VALUES.API_ACTION.params}
-                      hoverInteraction={true}
-                      border={CodeEditorBorder.BOTTOM_SIDE}
+                      hoverInteraction
+                      name={`${field}.value`}
+                      placeholder={`Value ${index + 1}`}
+                      theme={props.theme}
                     />
                   </Flex>
                 )}
@@ -153,11 +153,16 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
                 {props.actionConfig && props.actionConfig[index] && (
                   <Flex size={3}>
                     <DynamicTextField
-                      theme={props.theme}
                       className={`t--${field}.value.${index}`}
-                      name={`${field}.value`}
                       dataTreePath={`${props.dataTreePath}[${index}].value`}
+                      disabled={
+                        !(
+                          props.actionConfig[index].editable ||
+                          props.actionConfig[index].editable === undefined
+                        )
+                      }
                       expected={FIELD_VALUES.API_ACTION.params}
+                      name={`${field}.value`}
                       placeholder={
                         props.placeholder
                           ? `${props.placeholder} ${index + 1}`
@@ -168,47 +173,42 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
                           ? `${props.actionConfig[index].type} (Optional)`
                           : `(Optional)`
                       }
-                      disabled={
-                        !(
-                          props.actionConfig[index].editable ||
-                          props.actionConfig[index].editable === undefined
-                        )
-                      }
                       showLightningMenu={
                         props.actionConfig[index].editable ||
                         props.actionConfig[index].editable === undefined
                       }
+                      theme={props.theme}
                       {...otherProps}
-                      hoverInteraction={true}
                       border={CodeEditorBorder.BOTTOM_SIDE}
+                      hoverInteraction
                     />
                   </Flex>
                 )}
                 {props.addOrDeleteFields !== false && (
                   <CenteredIcon
                     name="delete"
-                    size={IconSize.LARGE}
                     onClick={() => props.fields.remove(index)}
+                    size={IconSize.LARGE}
                   />
                 )}
               </FormRowWithLabel>
             );
           })}
-        </React.Fragment>
+        </>
       )}
       <AddMoreAction onClick={() => props.fields.push({ key: "", value: "" })}>
         <Icon
-          name="add-more"
           className="t--addApiHeader"
+          name="add-more"
           size={IconSize.LARGE}
         />
-        <Text type={TextType.H5} case={Case.UPPERCASE}>
+        <Text case={Case.UPPERCASE} type={TextType.H5}>
           Add more
         </Text>
       </AddMoreAction>
     </KeyValueStackContainer>
   );
-};
+}
 
 type Props = {
   name: string;
@@ -227,7 +227,7 @@ type Props = {
   theme?: EditorTheme;
 };
 
-const KeyValueFieldArray = (props: Props) => {
+function KeyValueFieldArray(props: Props) {
   return (
     <FieldArray
       component={KeyValueRow}
@@ -235,6 +235,6 @@ const KeyValueFieldArray = (props: Props) => {
       {...props}
     />
   );
-};
+}
 
 export default KeyValueFieldArray;
diff --git a/app/client/src/components/editorComponents/form/fields/NumberField.tsx b/app/client/src/components/editorComponents/form/fields/NumberField.tsx
index e67d432421..43a69d86dc 100644
--- a/app/client/src/components/editorComponents/form/fields/NumberField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/NumberField.tsx
@@ -9,7 +9,7 @@ type RenderComponentProps = TextInputProps & {
   };
 };
 
-const RenderComponent = (props: RenderComponentProps) => {
+function RenderComponent(props: RenderComponentProps) {
   const onChangeHandler = (value: number) => {
     props.input && props.input.onChange && props.input.onChange(value);
   };
@@ -21,7 +21,7 @@ const RenderComponent = (props: RenderComponentProps) => {
       onChange={(value: string) => onChangeHandler(Number(value))}
     />
   );
-};
+}
 
 class NumberField extends React.Component<BaseFieldProps & TextInputProps> {
   render() {
@@ -29,8 +29,8 @@ class NumberField extends React.Component<BaseFieldProps & TextInputProps> {
       <Field
         component={RenderComponent}
         {...this.props}
-        noValidate
         disabled={this.props.disabled}
+        noValidate
       />
     );
   }
diff --git a/app/client/src/components/editorComponents/form/fields/RadioGroupField.tsx b/app/client/src/components/editorComponents/form/fields/RadioGroupField.tsx
index 881a4aee82..13711400b9 100644
--- a/app/client/src/components/editorComponents/form/fields/RadioGroupField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/RadioGroupField.tsx
@@ -16,16 +16,12 @@ interface RadioFieldProps {
 const renderComponent = (
   componentProps: RadioFieldProps & RadioGroupWrapperProps,
 ) => {
-  return (
-    <React.Fragment>
-      <RadioGroupWrapper {...componentProps} />
-    </React.Fragment>
-  );
+  return <RadioGroupWrapper {...componentProps} />;
 };
 
-const RadioFieldGroup = (
+function RadioFieldGroup(
   props: RadioFieldProps & Partial<RadioGroupWrapperProps>,
-) => {
+) {
   return (
     <Field
       className={props.className}
@@ -35,6 +31,6 @@ const RadioFieldGroup = (
       {...props}
     />
   );
-};
+}
 
 export default RadioFieldGroup;
diff --git a/app/client/src/components/editorComponents/form/fields/RadioGroupWrapper.tsx b/app/client/src/components/editorComponents/form/fields/RadioGroupWrapper.tsx
index e34be03391..b9e73fbae3 100644
--- a/app/client/src/components/editorComponents/form/fields/RadioGroupWrapper.tsx
+++ b/app/client/src/components/editorComponents/form/fields/RadioGroupWrapper.tsx
@@ -11,7 +11,7 @@ export type RadioGroupWrapperProps = {
   rows?: number;
 };
 
-const RadioGroupWrapper = (props: RadioGroupWrapperProps) => {
+function RadioGroupWrapper(props: RadioGroupWrapperProps) {
   const selectedValueHandler = () => {
     if (
       props.input &&
@@ -38,14 +38,14 @@ const RadioGroupWrapper = (props: RadioGroupWrapperProps) => {
 
   return (
     <RadioComponent
-      defaultValue={selectedOption}
-      rows={props.rows}
-      columns={props.columns}
-      options={props.options}
-      onSelect={(value: string) => onSelectHandler(value)}
       className={props.className}
+      columns={props.columns}
+      defaultValue={selectedOption}
+      onSelect={(value: string) => onSelectHandler(value)}
+      options={props.options}
+      rows={props.rows}
     />
   );
-};
+}
 
 export default RadioGroupWrapper;
diff --git a/app/client/src/components/editorComponents/form/fields/RequestDropdownField.tsx b/app/client/src/components/editorComponents/form/fields/RequestDropdownField.tsx
index ee64a0f050..38b63bdb19 100644
--- a/app/client/src/components/editorComponents/form/fields/RequestDropdownField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/RequestDropdownField.tsx
@@ -20,14 +20,10 @@ interface RequestDropdownProps {
 const renderComponent = (
   componentProps: WrappedFieldProps & RequestDropdownProps,
 ) => {
-  return (
-    <React.Fragment>
-      <DropdownFieldWrapper {...componentProps} />
-    </React.Fragment>
-  );
+  return <DropdownFieldWrapper {...componentProps} />;
 };
 
-const RequestDropdownField = (props: RequestDropdownProps) => {
+function RequestDropdownField(props: RequestDropdownProps) {
   return (
     <Field
       component={renderComponent}
@@ -36,6 +32,6 @@ const RequestDropdownField = (props: RequestDropdownProps) => {
       {...props}
     />
   );
-};
+}
 
 export default RequestDropdownField;
diff --git a/app/client/src/components/editorComponents/form/fields/SelectField.tsx b/app/client/src/components/editorComponents/form/fields/SelectField.tsx
index a42dd6b1ef..3334893b27 100644
--- a/app/client/src/components/editorComponents/form/fields/SelectField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/SelectField.tsx
@@ -12,11 +12,7 @@ const renderComponent = (
     input: Partial<WrappedFieldInputProps>;
   },
 ) => {
-  return (
-    <React.Fragment>
-      <DropdownWrapper {...componentProps} />
-    </React.Fragment>
-  );
+  return <DropdownWrapper {...componentProps} />;
 };
 
 type SelectFieldProps = {
@@ -27,17 +23,17 @@ type SelectFieldProps = {
   outline?: boolean;
 };
 
-export const SelectField = (props: SelectFieldProps) => {
+export function SelectField(props: SelectFieldProps) {
   return (
     <Field
-      name={props.name}
-      placeholder={props.placeholder}
       component={renderComponent}
+      name={props.name}
       options={props.options}
-      size={props.size}
       outline={props.outline}
+      placeholder={props.placeholder}
+      size={props.size}
     />
   );
-};
+}
 
 export default SelectField;
diff --git a/app/client/src/components/editorComponents/form/fields/TagListField.tsx b/app/client/src/components/editorComponents/form/fields/TagListField.tsx
index ca30384eb9..270e31bb46 100644
--- a/app/client/src/components/editorComponents/form/fields/TagListField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/TagListField.tsx
@@ -13,11 +13,7 @@ const renderComponent = (
     input: Partial<WrappedFieldInputProps>;
   },
 ) => {
-  return (
-    <React.Fragment>
-      <TagInputComponent {...componentProps} />
-    </React.Fragment>
-  );
+  return <TagInputComponent {...componentProps} />;
 };
 
 type TagListFieldProps = {
@@ -29,12 +25,8 @@ type TagListFieldProps = {
   customError: (err: string) => void;
 };
 
-const TagListField = (props: TagListFieldProps) => {
-  return (
-    <React.Fragment>
-      <Field component={renderComponent} {...props} />
-    </React.Fragment>
-  );
-};
+function TagListField(props: TagListFieldProps) {
+  return <Field component={renderComponent} {...props} />;
+}
 
 export default TagListField;
diff --git a/app/client/src/components/editorComponents/form/fields/TextField.tsx b/app/client/src/components/editorComponents/form/fields/TextField.tsx
index 170895e951..7ba93b6b6d 100644
--- a/app/client/src/components/editorComponents/form/fields/TextField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/TextField.tsx
@@ -15,11 +15,11 @@ class TextField extends React.Component<
   render() {
     return (
       <Field
-        type={this.props.type || "text"}
         component={BaseTextInput}
+        type={this.props.type || "text"}
         {...this.props}
-        noValidate
         disabled={this.props.disabled}
+        noValidate
       />
     );
   }
diff --git a/app/client/src/components/formControls/CheckboxControl.tsx b/app/client/src/components/formControls/CheckboxControl.tsx
index 9608bc5ff8..072ab52186 100644
--- a/app/client/src/components/formControls/CheckboxControl.tsx
+++ b/app/client/src/components/formControls/CheckboxControl.tsx
@@ -19,7 +19,7 @@ class CheckboxControl extends BaseControl<CheckboxControlProps> {
   render() {
     const { configProperty, label, info } = this.props;
 
-    return <StyledCheckbox name={configProperty} label={label} info={info} />;
+    return <StyledCheckbox info={info} label={label} name={configProperty} />;
   }
 }
 
diff --git a/app/client/src/components/formControls/DropDownControl.tsx b/app/client/src/components/formControls/DropDownControl.tsx
index cb2289b500..cf27809189 100644
--- a/app/client/src/components/formControls/DropDownControl.tsx
+++ b/app/client/src/components/formControls/DropDownControl.tsx
@@ -64,10 +64,10 @@ class DropDownControl extends BaseControl<DropDownControlProps> {
         </FormLabel>
         <DropdownSelect data-cy={configProperty}>
           <DropdownField
-            placeholder=""
+            customSelectStyles={customSelectStyles}
             name={configProperty}
             options={options}
-            customSelectStyles={customSelectStyles}
+            placeholder=""
             width={"50vh"}
           />
         </DropdownSelect>
@@ -82,8 +82,8 @@ class DropDownControl extends BaseControl<DropDownControlProps> {
     const isSelected: boolean = this.isOptionSelected(option);
     return (
       <MenuItem
-        className="single-select"
         active={isSelected}
+        className="single-select"
         key={option.value}
         onClick={itemProps.handleClick}
         text={option.label}
diff --git a/app/client/src/components/formControls/DynamicInputTextControl.test.tsx b/app/client/src/components/formControls/DynamicInputTextControl.test.tsx
index 2d32cf468e..a055dd7aa0 100644
--- a/app/client/src/components/formControls/DynamicInputTextControl.test.tsx
+++ b/app/client/src/components/formControls/DynamicInputTextControl.test.tsx
@@ -6,7 +6,9 @@ import { mockCodemirrorRender } from "test/__mocks__/CodeMirrorEditorMock";
 import userEvent from "@testing-library/user-event";
 import { waitFor } from "@testing-library/dom";
 
-const TestForm = (props: any) => <div>{props.children}</div>;
+function TestForm(props: any) {
+  return <div>{props.children}</div>;
+}
 
 const ReduxFormDecorator = reduxForm({
   form: "TestForm",
@@ -21,15 +23,15 @@ describe("DynamicInputTextControl", () => {
     render(
       <ReduxFormDecorator>
         <DynamicInputTextControl
-          controlType="DYNAMIC_INPUT_TEXT_CONTROL"
           actionName="Test action"
-          formName="TestForm"
-          label="Action"
           configProperty="actionConfiguration.testPath"
-          onPropertyChange={jest.fn()}
-          id={"test"}
-          isValid={true}
+          controlType="DYNAMIC_INPUT_TEXT_CONTROL"
           dataType={"TABLE"}
+          formName="TestForm"
+          id={"test"}
+          isValid
+          label="Action"
+          onPropertyChange={jest.fn()}
           placeholderText="Test placeholder"
         />
       </ReduxFormDecorator>,
diff --git a/app/client/src/components/formControls/DynamicInputTextControl.tsx b/app/client/src/components/formControls/DynamicInputTextControl.tsx
index 6d28893378..856f9b7c25 100644
--- a/app/client/src/components/formControls/DynamicInputTextControl.tsx
+++ b/app/client/src/components/formControls/DynamicInputTextControl.tsx
@@ -25,10 +25,10 @@ export function InputText(props: {
         {label} {isRequired && "*"}
       </FormLabel>
       <DynamicTextField
+        dataTreePath={dataTreePath}
         name={name}
         placeholder={placeholder}
         showLightningMenu={false}
-        dataTreePath={dataTreePath}
       />
     </div>
   );
@@ -40,10 +40,10 @@ class DynamicInputTextControl extends BaseControl<DynamicInputControlProps> {
 
     return (
       <InputText
-        name={configProperty}
-        label={label}
-        placeholder={placeholderText}
         actionName={actionName}
+        label={label}
+        name={configProperty}
+        placeholder={placeholderText}
       />
     );
   }
diff --git a/app/client/src/components/formControls/DynamicTextFieldControl.test.tsx b/app/client/src/components/formControls/DynamicTextFieldControl.test.tsx
index dc67d477c1..79f3a621a6 100644
--- a/app/client/src/components/formControls/DynamicTextFieldControl.test.tsx
+++ b/app/client/src/components/formControls/DynamicTextFieldControl.test.tsx
@@ -8,7 +8,9 @@ import { waitFor } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
 import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
 
-const TestForm = (props: any) => <div>{props.children}</div>;
+function TestForm(props: any) {
+  return <div>{props.children}</div>;
+}
 
 const ReduxFormDecorator = reduxForm({
   form: "TestForm",
@@ -23,18 +25,18 @@ describe("DynamicTextFieldControl", () => {
     render(
       <ReduxFormDecorator>
         <DynamicTextFieldControl
-          controlType="DYNAMIC_TEXT_FIELD_CONTROL"
           actionName="TestAction"
-          formName="TestForm"
           configProperty="actionConfiguration.body"
+          controlType="DYNAMIC_TEXT_FIELD_CONTROL"
           createTemplate={jest.fn()}
-          onPropertyChange={jest.fn()}
-          label={"TestAction body"}
-          responseType={"TABLE"}
-          id={"test"}
-          isValid={true}
-          pluginId="123"
           evaluationSubstitutionType={EvaluationSubstitutionType.TEMPLATE}
+          formName="TestForm"
+          id={"test"}
+          isValid
+          label={"TestAction body"}
+          onPropertyChange={jest.fn()}
+          pluginId="123"
+          responseType={"TABLE"}
         />
       </ReduxFormDecorator>,
       {
diff --git a/app/client/src/components/formControls/DynamicTextFieldControl.tsx b/app/client/src/components/formControls/DynamicTextFieldControl.tsx
index 0a0e02c5dd..6d3d2b111e 100644
--- a/app/client/src/components/formControls/DynamicTextFieldControl.tsx
+++ b/app/client/src/components/formControls/DynamicTextFieldControl.tsx
@@ -100,14 +100,14 @@ class DynamicTextControl extends BaseControl<
           />
         ) : (
           <DynamicTextField
-            size={EditorSize.EXTENDED}
-            name={this.props.configProperty}
-            dataTreePath={dataTreePath}
             className="dynamic-text-field"
-            mode={mode}
-            tabBehaviour={TabBehaviour.INDENT}
-            placeholder={placeholderText}
+            dataTreePath={dataTreePath}
             evaluationSubstitutionType={evaluationSubstitutionType}
+            mode={mode}
+            name={this.props.configProperty}
+            placeholder={placeholderText}
+            size={EditorSize.EXTENDED}
+            tabBehaviour={TabBehaviour.INDENT}
           />
         )}
       </Wrapper>
diff --git a/app/client/src/components/formControls/FilePickerControl.tsx b/app/client/src/components/formControls/FilePickerControl.tsx
index 19537e3983..11525ef585 100644
--- a/app/client/src/components/formControls/FilePickerControl.tsx
+++ b/app/client/src/components/formControls/FilePickerControl.tsx
@@ -101,11 +101,11 @@ class FieldFileInput extends React.Component<Props, FieldFileInputState> {
       <div style={{ flexDirection: "row", display: "flex", width: "50vh" }}>
         <StyledDiv>{value.name}</StyledDiv>
         <SelectButton
-          text={"Select"}
           accent="secondary"
           onClick={() => {
             this.openModal();
           }}
+          text={"Select"}
         />
       </div>
     );
@@ -124,12 +124,12 @@ class FilePickerControl extends BaseControl<FilePickerControlProps> {
     const { configProperty, label, isRequired } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <FormLabel>
           {label} {isRequired && "*"}
         </FormLabel>
-        <Field name={configProperty} component={FieldFileInput} />
-      </React.Fragment>
+        <Field component={FieldFileInput} name={configProperty} />
+      </>
     );
   }
 
diff --git a/app/client/src/components/formControls/FixedKeyInputControl.tsx b/app/client/src/components/formControls/FixedKeyInputControl.tsx
index 3487e55833..f3efdd7a0b 100644
--- a/app/client/src/components/formControls/FixedKeyInputControl.tsx
+++ b/app/client/src/components/formControls/FixedKeyInputControl.tsx
@@ -27,10 +27,6 @@ class FixKeyInputControl extends BaseControl<FixedKeyInputControlProps> {
           {label} {isRequired && "*"}
         </FormLabel>
         <TextField
-          name={configProperty}
-          placeholder={placeholderText}
-          type={this.getType(dataType)}
-          showError
           format={(value) => {
             // Get the value property
             if (value) {
@@ -39,6 +35,7 @@ class FixKeyInputControl extends BaseControl<FixedKeyInputControlProps> {
 
             return "";
           }}
+          name={configProperty}
           parse={(value) => {
             // Store the value in this field as {key: fixedKey, value: <user-input>}
             return {
@@ -46,6 +43,9 @@ class FixKeyInputControl extends BaseControl<FixedKeyInputControlProps> {
               value: value,
             };
           }}
+          placeholder={placeholderText}
+          showError
+          type={this.getType(dataType)}
         />
       </Wrapper>
     );
diff --git a/app/client/src/components/formControls/InputNumberControl.tsx b/app/client/src/components/formControls/InputNumberControl.tsx
index 8ea1b9509c..0890a14c84 100644
--- a/app/client/src/components/formControls/InputNumberControl.tsx
+++ b/app/client/src/components/formControls/InputNumberControl.tsx
@@ -28,7 +28,7 @@ export function InputText(props: {
   return (
     <FormGroup data-cy={name}>
       <Text type={TextType.P1}>{label}</Text>
-      <NumberField name={name} placeholder={placeholder} dataType={dataType} />
+      <NumberField dataType={dataType} name={name} placeholder={placeholder} />
     </FormGroup>
   );
 }
@@ -45,11 +45,11 @@ class InputNumberControl extends BaseControl<InputControlProps> {
 
     return (
       <InputText
-        name={configProperty}
-        label={label}
-        value={propertyValue}
-        placeholder={placeholderText}
         dataType={dataType}
+        label={label}
+        name={configProperty}
+        placeholder={placeholderText}
+        value={propertyValue}
       />
     );
   }
diff --git a/app/client/src/components/formControls/InputTextControl.tsx b/app/client/src/components/formControls/InputTextControl.tsx
index b8780955b6..5cdb133522 100644
--- a/app/client/src/components/formControls/InputTextControl.tsx
+++ b/app/client/src/components/formControls/InputTextControl.tsx
@@ -41,12 +41,12 @@ export function InputText(props: {
   } = props;
 
   return (
-    <div style={{ width: "50vh" }} data-cy={name}>
+    <div data-cy={name} style={{ width: "50vh" }}>
       <FormLabel>
         {label} {isRequired && "*"}{" "}
         {encrypted && (
           <>
-            <FormIcons.LOCK_ICON width={12} height={12} keepColors />
+            <FormIcons.LOCK_ICON height={12} keepColors width={12} />
             <StyledInfo>Encrypted</StyledInfo>
           </>
         )}
@@ -58,11 +58,11 @@ export function InputText(props: {
         )}
       </FormLabel>
       <TextField
+        disabled={disabled || false}
         name={name}
         placeholder={placeholder}
-        type={dataType}
-        disabled={disabled || false}
         showError
+        type={dataType}
       />
     </div>
   );
@@ -84,16 +84,16 @@ class InputTextControl extends BaseControl<InputControlProps> {
 
     return (
       <InputText
-        name={configProperty}
-        label={label}
-        value={propertyValue}
-        isValid={isValid}
-        validationMessage={validationMessage}
-        placeholder={placeholderText}
         dataType={this.getType(dataType)}
-        encrypted={this.props.encrypted}
         disabled={disabled}
+        encrypted={this.props.encrypted}
+        isValid={isValid}
+        label={label}
+        name={configProperty}
+        placeholder={placeholderText}
         subtitle={subtitle}
+        validationMessage={validationMessage}
+        value={propertyValue}
       />
     );
   }
diff --git a/app/client/src/components/formControls/KeyValueArrayControl.tsx b/app/client/src/components/formControls/KeyValueArrayControl.tsx
index b55648419d..c1ed29ddc7 100644
--- a/app/client/src/components/formControls/KeyValueArrayControl.tsx
+++ b/app/client/src/components/formControls/KeyValueArrayControl.tsx
@@ -29,7 +29,7 @@ const StyledTextField = styled(TextField)`
   }
 `;
 
-const KeyValueRow = (props: KeyValueArrayProps & WrappedFieldArrayProps) => {
+function KeyValueRow(props: KeyValueArrayProps & WrappedFieldArrayProps) {
   const { extraData = [] } = props;
   const keyName = getFieldName(extraData[0].configProperty);
   const valueName = getFieldName(extraData[1].configProperty);
@@ -74,99 +74,91 @@ const KeyValueRow = (props: KeyValueArrayProps & WrappedFieldArrayProps) => {
     isRequired = extraData[0].isRequired || extraData[1].isRequired;
   }
 
-  return (
-    <React.Fragment>
-      {typeof props.fields.getAll() === "object" && (
-        <React.Fragment>
-          {props.fields.map((field: any, index: number) => {
-            const otherProps: Record<string, any> = {};
-            if (
-              props.actionConfig &&
-              props.actionConfig[index].description &&
-              props.rightIcon
-            ) {
-              otherProps.rightIcon = (
-                <HelperTooltip
-                  description={props.actionConfig[index].description}
-                  rightIcon={
-                    props.actionConfig[index].description && props.rightIcon
-                  }
-                />
-              );
-            }
-            return (
-              <FormRowWithLabel key={index} style={{ marginTop: 16 }}>
-                <div style={{ width: "50vh" }}>
-                  <FormLabel>
-                    {extraData && extraData[0].label} {isRequired && "*"}
-                  </FormLabel>
-                  <TextField
-                    name={`${field}.${keyName[1]}`}
-                    showError
-                    validate={keyFieldValidate}
-                    placeholder={
-                      (extraData && extraData[0].placeholderText) || ""
-                    }
-                  />
-                </div>
-                {!props.actionConfig && (
-                  <div style={{ marginLeft: 16 }}>
-                    <FormLabel>
-                      {extraData && extraData[1].label} {isRequired && "*"}
-                    </FormLabel>
-                    <div style={{ display: "flex", flexDirection: "row" }}>
-                      <div style={{ marginRight: 14, width: 72 }}>
-                        <StyledTextField
-                          name={`${field}.${valueName[1]}`}
-                          type={valueDataType}
-                          placeholder={
-                            (extraData && extraData[1].placeholderText) || ""
-                          }
-                        />
-                      </div>
-                      {index === props.fields.length - 1 ? (
-                        <Icon
-                          icon="plus"
-                          iconSize={20}
-                          onClick={() =>
-                            props.fields.push({ key: "", value: "" })
-                          }
-                          color={Colors["CADET_BLUE"]}
-                          style={{ alignSelf: "center" }}
-                        />
-                      ) : (
-                        <FormIcons.DELETE_ICON
-                          height={20}
-                          width={20}
-                          color={Colors["CADET_BLUE"]}
-                          onClick={() => props.fields.remove(index)}
-                          style={{ alignSelf: "center" }}
-                        />
-                      )}
-                    </div>
+  return typeof props.fields.getAll() === "object" ? (
+    <>
+      {props.fields.map((field: any, index: number) => {
+        const otherProps: Record<string, any> = {};
+        if (
+          props.actionConfig &&
+          props.actionConfig[index].description &&
+          props.rightIcon
+        ) {
+          otherProps.rightIcon = (
+            <HelperTooltip
+              description={props.actionConfig[index].description}
+              rightIcon={
+                props.actionConfig[index].description && props.rightIcon
+              }
+            />
+          );
+        }
+        return (
+          <FormRowWithLabel key={index} style={{ marginTop: 16 }}>
+            <div style={{ width: "50vh" }}>
+              <FormLabel>
+                {extraData && extraData[0].label} {isRequired && "*"}
+              </FormLabel>
+              <TextField
+                name={`${field}.${keyName[1]}`}
+                placeholder={(extraData && extraData[0].placeholderText) || ""}
+                showError
+                validate={keyFieldValidate}
+              />
+            </div>
+            {!props.actionConfig && (
+              <div style={{ marginLeft: 16 }}>
+                <FormLabel>
+                  {extraData && extraData[1].label} {isRequired && "*"}
+                </FormLabel>
+                <div style={{ display: "flex", flexDirection: "row" }}>
+                  <div style={{ marginRight: 14, width: 72 }}>
+                    <StyledTextField
+                      name={`${field}.${valueName[1]}`}
+                      placeholder={
+                        (extraData && extraData[1].placeholderText) || ""
+                      }
+                      type={valueDataType}
+                    />
                   </div>
-                )}
+                  {index === props.fields.length - 1 ? (
+                    <Icon
+                      color={Colors["CADET_BLUE"]}
+                      icon="plus"
+                      iconSize={20}
+                      onClick={() => props.fields.push({ key: "", value: "" })}
+                      style={{ alignSelf: "center" }}
+                    />
+                  ) : (
+                    <FormIcons.DELETE_ICON
+                      color={Colors["CADET_BLUE"]}
+                      height={20}
+                      onClick={() => props.fields.remove(index)}
+                      style={{ alignSelf: "center" }}
+                      width={20}
+                    />
+                  )}
+                </div>
+              </div>
+            )}
 
-                {props.actionConfig && (
-                  <DynamicTextField
-                    name={`${field}.value`}
-                    placeholder={
-                      props.actionConfig[index].mandatory &&
-                      props.actionConfig[index].type
-                        ? `Value (Type: ${props.actionConfig[index].type})`
-                        : `Value (optional)`
-                    }
-                    {...otherProps}
-                  />
-                )}
-              </FormRowWithLabel>
-            );
-          })}
-        </React.Fragment>
-      )}
-    </React.Fragment>
-  );
-};
+            {props.actionConfig && (
+              <DynamicTextField
+                name={`${field}.value`}
+                placeholder={
+                  props.actionConfig[index].mandatory &&
+                  props.actionConfig[index].type
+                    ? `Value (Type: ${props.actionConfig[index].type})`
+                    : `Value (optional)`
+                }
+                {...otherProps}
+              />
+            )}
+          </FormRowWithLabel>
+        );
+      })}
+    </>
+  ) : null;
+}
 
 class KeyValueFieldArray extends BaseControl<KeyValueArrayProps> {
   render() {
diff --git a/app/client/src/components/formControls/KeyValueInputControl.tsx b/app/client/src/components/formControls/KeyValueInputControl.tsx
index 1a0fe7f9ff..a8e7aafe71 100644
--- a/app/client/src/components/formControls/KeyValueInputControl.tsx
+++ b/app/client/src/components/formControls/KeyValueInputControl.tsx
@@ -18,7 +18,7 @@ const FormRowWithLabel = styled.div`
   }
 `;
 
-const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
+function KeyValueRow(props: Props & WrappedFieldArrayProps) {
   useEffect(() => {
     // Always maintain 1 row
     if (props.fields.length < 1) {
@@ -51,20 +51,20 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
                   {index === props.fields.length - 1 ? (
                     <Icon
                       className="t--add-field"
+                      color={"#A3B3BF"}
                       icon="plus"
                       iconSize={20}
                       onClick={() => props.fields.push({ key: "", value: "" })}
-                      color={"#A3B3BF"}
                       style={{ alignSelf: "center" }}
                     />
                   ) : (
                     <FormIcons.DELETE_ICON
                       className="t--delete-field"
-                      height={20}
-                      width={20}
                       color={Colors.CADET_BLUE}
+                      height={20}
                       onClick={() => props.fields.remove(index)}
                       style={{ alignSelf: "center" }}
+                      width={20}
                     />
                   )}
                 </div>
@@ -75,7 +75,7 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
       )}
     </div>
   );
-};
+}
 
 type Props = {
   name: string;
diff --git a/app/client/src/components/formControls/SwitchControl.tsx b/app/client/src/components/formControls/SwitchControl.tsx
index d35b3eb8fc..7c5a02ad16 100644
--- a/app/client/src/components/formControls/SwitchControl.tsx
+++ b/app/client/src/components/formControls/SwitchControl.tsx
@@ -52,8 +52,8 @@ export class SwitchField extends React.Component<Props, any> {
           </StyledFormLabel>
           <StyledSwitch
             checked={this.value}
-            onChange={(value) => input.onChange(value)}
             large
+            onChange={(value) => input.onChange(value)}
           />
         </SwitchWrapped>
         {info && <Info>{info}</Info>}
@@ -67,15 +67,13 @@ class SwitchControl extends BaseControl<SwitchControlProps> {
     const { configProperty, label, isRequired, info } = this.props;
 
     return (
-      <React.Fragment>
-        <Field
-          name={configProperty}
-          component={SwitchField}
-          label={label}
-          isRequired={isRequired}
-          info={info}
-        />
-      </React.Fragment>
+      <Field
+        component={SwitchField}
+        info={info}
+        isRequired={isRequired}
+        label={label}
+        name={configProperty}
+      />
     );
   }
 
diff --git a/app/client/src/components/propertyControls/ActionSelectorControl.tsx b/app/client/src/components/propertyControls/ActionSelectorControl.tsx
index 7e298814cb..32e6cef1a4 100644
--- a/app/client/src/components/propertyControls/ActionSelectorControl.tsx
+++ b/app/client/src/components/propertyControls/ActionSelectorControl.tsx
@@ -14,11 +14,11 @@ class ActionSelectorControl extends BaseControl<ControlProps> {
 
     return (
       <ActionCreator
-        value={propertyValue}
-        isValid={this.props.isValid}
-        validationMessage={this.props.errorMessage}
-        onValueChange={this.handleValueUpdate}
         additionalAutoComplete={this.props.additionalAutoComplete}
+        isValid={this.props.isValid}
+        onValueChange={this.handleValueUpdate}
+        validationMessage={this.props.errorMessage}
+        value={propertyValue}
       />
     );
   }
diff --git a/app/client/src/components/propertyControls/ChartDataControl.tsx b/app/client/src/components/propertyControls/ChartDataControl.tsx
index bd7a8cafa7..fff42890d8 100644
--- a/app/client/src/components/propertyControls/ChartDataControl.tsx
+++ b/app/client/src/components/propertyControls/ChartDataControl.tsx
@@ -112,15 +112,16 @@ function DataControlComponent(props: RenderComponentProps) {
         {length > 1 && (
           <StyledDeleteIcon
             height={20}
-            width={20}
             onClick={() => {
               deleteOption(index);
             }}
+            width={20}
           />
         )}
       </ActionHolder>
       <StyledOptionControlWrapper orientation={"HORIZONTAL"}>
         <CodeEditor
+          evaluatedValue={evaluated?.seriesName}
           expected={"string"}
           input={{
             value: item.seriesName,
@@ -134,12 +135,11 @@ function DataControlComponent(props: RenderComponentProps) {
               updateOption(index, "seriesName", value);
             },
           }}
-          evaluatedValue={evaluated?.seriesName}
-          theme={props.theme}
-          size={EditorSize.EXTENDED}
           mode={EditorModes.TEXT_WITH_BINDING}
-          tabBehaviour={TabBehaviour.INPUT}
           placeholder="Series Name"
+          size={EditorSize.EXTENDED}
+          tabBehaviour={TabBehaviour.INPUT}
+          theme={props.theme}
         />
       </StyledOptionControlWrapper>
       <StyledLabel>Series Data</StyledLabel>
@@ -147,6 +147,7 @@ function DataControlComponent(props: RenderComponentProps) {
         className={"t--property-control-chart-series-data-control"}
       >
         <CodeEditor
+          evaluatedValue={evaluated?.data}
           expected={`Array<x:string, y:number>`}
           input={{
             value: item.data,
@@ -160,21 +161,20 @@ function DataControlComponent(props: RenderComponentProps) {
               updateOption(index, "data", value);
             },
           }}
-          evaluatedValue={evaluated?.data}
           meta={{
             error: has(validationMessage, "data")
               ? get(validationMessage, "data")
               : "",
             touched: true,
           }}
-          theme={props.theme}
-          size={EditorSize.EXTENDED}
           mode={EditorModes.JSON_WITH_BINDING}
-          tabBehaviour={TabBehaviour.INPUT}
           placeholder=""
+          size={EditorSize.EXTENDED}
+          tabBehaviour={TabBehaviour.INPUT}
+          theme={props.theme}
         />
       </StyledDynamicInput>
-      <Box></Box>
+      <Box />
     </StyledOptionControlWrapper>
   );
 }
@@ -201,50 +201,50 @@ class ChartDataControl extends BaseControl<ControlProps> {
 
       return (
         <DataControlComponent
+          deleteOption={this.deleteOption}
+          evaluated={get(evaluatedValue, `${firstKey}`)}
           index={firstKey}
           item={data}
           length={1}
-          deleteOption={this.deleteOption}
+          theme={this.props.theme}
           updateOption={this.updateOption}
           validationMessage={get(validationMessage, `${firstKey}`)}
-          evaluated={get(evaluatedValue, `${firstKey}`)}
-          theme={this.props.theme}
         />
       );
     }
 
     return (
-      <React.Fragment>
+      <>
         <Wrapper>
           {Object.keys(chartData).map((key: string) => {
             const data = get(chartData, `${key}`);
 
             return (
               <DataControlComponent
-                key={key}
+                deleteOption={this.deleteOption}
+                evaluated={get(evaluatedValue, `${key}`)}
                 index={key}
                 item={data}
+                key={key}
                 length={dataLength}
-                deleteOption={this.deleteOption}
+                theme={this.props.theme}
                 updateOption={this.updateOption}
                 validationMessage={get(validationMessage, `${key}`)}
-                evaluated={get(evaluatedValue, `${key}`)}
-                theme={this.props.theme}
               />
             );
           })}
         </Wrapper>
 
         <StyledPropertyPaneButton
+          category={Category.tertiary}
           icon="plus"
-          tag="button"
-          type="button"
-          text="Add Series"
           onClick={this.addOption}
           size={Size.medium}
-          category={Category.tertiary}
+          tag="button"
+          text="Add Series"
+          type="button"
         />
-      </React.Fragment>
+      </>
     );
   }
 
diff --git a/app/client/src/components/propertyControls/CodeEditorControl.tsx b/app/client/src/components/propertyControls/CodeEditorControl.tsx
index 3744e227c1..e081757ed0 100644
--- a/app/client/src/components/propertyControls/CodeEditorControl.tsx
+++ b/app/client/src/components/propertyControls/CodeEditorControl.tsx
@@ -26,16 +26,16 @@ class CodeEditorControl extends BaseControl<ControlProps> {
 
     return (
       <CodeEditor
-        theme={this.props.theme}
         input={{ value: propertyValue, onChange: this.onChange }}
         meta={{
           error: isValid ? "" : validationMessage,
           touched: true,
         }}
-        useValidationMessage={useValidationMessage}
-        size={EditorSize.EXTENDED}
         mode={EditorModes.TEXT_WITH_BINDING}
+        size={EditorSize.EXTENDED}
         tabBehaviour={TabBehaviour.INDENT}
+        theme={this.props.theme}
+        useValidationMessage={useValidationMessage}
         {...props}
       />
     );
diff --git a/app/client/src/components/propertyControls/ColorPickerControl.tsx b/app/client/src/components/propertyControls/ColorPickerControl.tsx
index 25ba7da373..39e5cef6e4 100644
--- a/app/client/src/components/propertyControls/ColorPickerControl.tsx
+++ b/app/client/src/components/propertyControls/ColorPickerControl.tsx
@@ -9,12 +9,12 @@ class ColorPickerControl extends BaseControl<ColorPickerControlProps> {
   render() {
     return (
       <ColorPickerComponent
+        changeColor={this.handleChangeColor}
         color={
           this.props.propertyValue
             ? this.props.propertyValue
             : this.props.defaultColor
         }
-        changeColor={this.handleChangeColor}
       />
     );
   }
diff --git a/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx b/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
index 9a29c7d0ec..72bf4291bf 100644
--- a/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
+++ b/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
@@ -39,7 +39,7 @@ class ColumnActionSelectorControl extends BaseControl<
 > {
   render() {
     return (
-      <React.Fragment>
+      <>
         {this.props.propertyValue &&
           this.props.propertyValue.map((columnAction: ColumnAction) => {
             return (
@@ -51,47 +51,47 @@ class ColumnActionSelectorControl extends BaseControl<
               >
                 <InputTextWrapper>
                   <InputText
+                    evaluatedValue={columnAction.label}
+                    isValid
                     label={columnAction.label}
-                    value={columnAction.label}
                     onChange={this.updateColumnActionLabel.bind(
                       this,
                       columnAction,
                     )}
-                    evaluatedValue={columnAction.label}
-                    isValid={true}
                     theme={this.props.theme}
+                    value={columnAction.label}
                   />
                 </InputTextWrapper>
                 <Wrapper>
                   <ActionCreator
-                    value={columnAction.dynamicTrigger}
                     isValid={(columnAction as any).isValid}
-                    validationMessage={(columnAction as any).message}
                     onValueChange={this.updateColumnActionFunction.bind(
                       this,
                       columnAction,
                     )}
+                    validationMessage={(columnAction as any).message}
+                    value={columnAction.dynamicTrigger}
                   />
                 </Wrapper>
                 <StyledDeleteIcon
                   height={20}
-                  width={20}
                   onClick={this.removeColumnAction.bind(this, columnAction)}
+                  width={20}
                 />
               </div>
             );
           })}
 
         <StyledPropertyPaneButton
+          category={Category.tertiary}
           icon="plus"
-          tag="button"
-          type="button"
-          text="New Button"
           onClick={this.addColumnAction}
           size={Size.medium}
-          category={Category.tertiary}
+          tag="button"
+          text="New Button"
+          type="button"
         />
-      </React.Fragment>
+      </>
     );
   }
 
diff --git a/app/client/src/components/propertyControls/ComputeTablePropertyControl.tsx b/app/client/src/components/propertyControls/ComputeTablePropertyControl.tsx
index 706cedbfba..b570e3d891 100644
--- a/app/client/src/components/propertyControls/ComputeTablePropertyControl.tsx
+++ b/app/client/src/components/propertyControls/ComputeTablePropertyControl.tsx
@@ -56,23 +56,20 @@ export function InputText(props: {
   return (
     <StyledDynamicInput>
       <CodeEditor
+        additionalDynamicData={additionalDynamicData}
+        dataTreePath={dataTreePath}
+        evaluatedValue={evaluatedValue}
+        expected={expected}
         input={{
           value: value,
           onChange: onChange,
         }}
-        evaluatedValue={evaluatedValue}
-        expected={expected}
-        dataTreePath={dataTreePath}
         meta={{
           error: isValid ? "" : errorMessage,
           touched: true,
         }}
-        theme={theme}
         mode={EditorModes.TEXT_WITH_BINDING}
-        tabBehaviour={TabBehaviour.INDENT}
-        size={EditorSize.EXTENDED}
         placeholder={placeholder}
-        additionalDynamicData={additionalDynamicData}
         promptMessage={
           <PromptMessage>
             Access the current cell using <CurlyBraces>{"{{"}</CurlyBraces>
@@ -80,6 +77,9 @@ export function InputText(props: {
             <CurlyBraces>{"}}"}</CurlyBraces>
           </PromptMessage>
         }
+        size={EditorSize.EXTENDED}
+        tabBehaviour={TabBehaviour.INDENT}
+        theme={theme}
       />
     </StyledDynamicInput>
   );
@@ -117,17 +117,17 @@ class ComputeTablePropertyControl extends BaseControl<
 
     return (
       <InputText
-        theme={theme}
-        label={label}
-        value={value}
-        onChange={this.onTextChange}
-        isValid={isValid}
-        errorMessage={validationMessage}
-        expected={expected}
-        dataTreePath={dataTreePath}
         additionalDynamicData={{
           currentRow,
         }}
+        dataTreePath={dataTreePath}
+        errorMessage={validationMessage}
+        expected={expected}
+        isValid={isValid}
+        label={label}
+        onChange={this.onTextChange}
+        theme={theme}
+        value={value}
       />
     );
   }
diff --git a/app/client/src/components/propertyControls/CustomFusionChartControl.tsx b/app/client/src/components/propertyControls/CustomFusionChartControl.tsx
index 20d22cf008..515efffeb4 100644
--- a/app/client/src/components/propertyControls/CustomFusionChartControl.tsx
+++ b/app/client/src/components/propertyControls/CustomFusionChartControl.tsx
@@ -14,14 +14,14 @@ class CustomFusionChartControl extends InputTextControl {
     } = this.props;
     return (
       <InputText
-        label={label}
-        value={propertyValue}
-        onChange={this.onTextChange}
-        isValid={isValid}
+        dataTreePath={dataTreePath}
         errorMessage={validationMessage}
         expected={expected}
+        isValid={isValid}
+        label={label}
+        onChange={this.onTextChange}
         placeholder={placeholderText}
-        dataTreePath={dataTreePath}
+        value={propertyValue}
       />
     );
   }
diff --git a/app/client/src/components/propertyControls/DatePickerControl.tsx b/app/client/src/components/propertyControls/DatePickerControl.tsx
index ff0c5a6b07..5331530501 100644
--- a/app/client/src/components/propertyControls/DatePickerControl.tsx
+++ b/app/client/src/components/propertyControls/DatePickerControl.tsx
@@ -76,18 +76,18 @@ class DatePickerControl extends BaseControl<
           : this.parseDate(this.props.propertyValue)
         : null;
     return (
-      <DatePickerControlWrapper isValid={true}>
+      <DatePickerControlWrapper isValid>
         <DatePickerComponent
+          closeOnSelection
           formatDate={this.formatDate}
-          parseDate={this.parseDate}
           maxDate={this.maxDate}
           minDate={this.minDate}
-          placeholder="DD/MM/YYYY HH:mm"
-          timePrecision={TimePrecision.MINUTE}
-          closeOnSelection={true}
           onChange={this.onDateSelected}
+          parseDate={this.parseDate}
+          placeholder="DD/MM/YYYY HH:mm"
+          showActionsBar
+          timePrecision={TimePrecision.MINUTE}
           value={value}
-          showActionsBar={true}
         />
       </DatePickerControlWrapper>
     );
diff --git a/app/client/src/components/propertyControls/DropDownControl.tsx b/app/client/src/components/propertyControls/DropDownControl.tsx
index f496aeb4fa..8d906de06e 100644
--- a/app/client/src/components/propertyControls/DropDownControl.tsx
+++ b/app/client/src/components/propertyControls/DropDownControl.tsx
@@ -21,14 +21,14 @@ class DropDownControl extends BaseControl<DropDownControlProps> {
     return (
       <StyledDropDownContainer>
         <StyledDropDown
-          options={this.props.options}
-          selected={defaultSelected}
           onSelect={this.onItemSelect}
-          width="100%"
-          showLabelOnly={true}
           optionWidth={
             this.props.optionWidth ? this.props.optionWidth : "231px"
           }
+          options={this.props.options}
+          selected={defaultSelected}
+          showLabelOnly
+          width="100%"
         />
       </StyledDropDownContainer>
     );
diff --git a/app/client/src/components/propertyControls/IconTabControl.tsx b/app/client/src/components/propertyControls/IconTabControl.tsx
index 302f50e36c..4646c5c626 100644
--- a/app/client/src/components/propertyControls/IconTabControl.tsx
+++ b/app/client/src/components/propertyControls/IconTabControl.tsx
@@ -18,8 +18,8 @@ class IconTabControl extends BaseControl<IconTabControlProps> {
     return (
       <IconTabsComponent
         options={options}
-        value={propertyValue}
         selectOption={this.selectOption}
+        value={propertyValue}
       />
     );
   }
diff --git a/app/client/src/components/propertyControls/InputTextControl.tsx b/app/client/src/components/propertyControls/InputTextControl.tsx
index c01c0df87b..545629c6f7 100644
--- a/app/client/src/components/propertyControls/InputTextControl.tsx
+++ b/app/client/src/components/propertyControls/InputTextControl.tsx
@@ -39,24 +39,24 @@ export function InputText(props: {
   return (
     <StyledDynamicInput>
       <CodeEditor
+        additionalDynamicData={props.additionalAutocomplete}
+        dataTreePath={dataTreePath}
+        evaluatedValue={evaluatedValue}
+        expected={expected}
+        hideEvaluatedValue={hideEvaluatedValue}
         input={{
           value: value,
           onChange: onChange,
         }}
-        evaluatedValue={evaluatedValue}
-        expected={expected}
-        dataTreePath={dataTreePath}
         meta={{
           error: isValid ? "" : errorMessage,
           touched: true,
         }}
-        theme={props.theme || EditorTheme.LIGHT}
         mode={EditorModes.TEXT_WITH_BINDING}
-        tabBehaviour={TabBehaviour.INDENT}
-        size={EditorSize.EXTENDED}
         placeholder={placeholder}
-        additionalDynamicData={props.additionalAutocomplete}
-        hideEvaluatedValue={hideEvaluatedValue}
+        size={EditorSize.EXTENDED}
+        tabBehaviour={TabBehaviour.INDENT}
+        theme={props.theme || EditorTheme.LIGHT}
       />
     </StyledDynamicInput>
   );
@@ -79,17 +79,17 @@ class InputTextControl extends BaseControl<InputControlProps> {
 
     return (
       <InputText
-        label={label}
-        value={propertyValue ? propertyValue : defaultValue}
-        onChange={this.onTextChange}
-        isValid={isValid}
+        additionalAutocomplete={additionalAutoComplete}
+        dataTreePath={dataTreePath}
         errorMessage={validationMessage}
         expected={expected}
-        dataTreePath={dataTreePath}
+        hideEvaluatedValue={hideEvaluatedValue}
+        isValid={isValid}
+        label={label}
+        onChange={this.onTextChange}
         placeholder={placeholderText}
         theme={this.props.theme}
-        additionalAutocomplete={additionalAutoComplete}
-        hideEvaluatedValue={hideEvaluatedValue}
+        value={propertyValue ? propertyValue : defaultValue}
       />
     );
   }
diff --git a/app/client/src/components/propertyControls/KeyValueComponent.tsx b/app/client/src/components/propertyControls/KeyValueComponent.tsx
index b2036ba68a..e52c1c5d39 100644
--- a/app/client/src/components/propertyControls/KeyValueComponent.tsx
+++ b/app/client/src/components/propertyControls/KeyValueComponent.tsx
@@ -148,47 +148,47 @@ export function KeyValueComponent(props: KeyValueComponentProps) {
   }
 
   return (
-    <React.Fragment>
+    <>
       {renderPairs.map((pair: DropDownOptionWithKey, index) => {
         return (
-          <StyledOptionControlWrapper orientation={"HORIZONTAL"} key={pair.key}>
+          <StyledOptionControlWrapper key={pair.key} orientation={"HORIZONTAL"}>
             <StyledOptionControlInputGroup
               dataType={"text"}
-              placeholder={"Name"}
+              defaultValue={pair.label}
               onChange={(value: string) => {
                 updateKey(index, value);
               }}
-              defaultValue={pair.label}
+              placeholder={"Name"}
             />
             <StyledBox />
             <StyledInputGroup
               dataType={"text"}
-              placeholder={"Value"}
+              defaultValue={pair.value}
               onChange={(value: string) => {
                 updateValue(index, value);
               }}
-              defaultValue={pair.value}
+              placeholder={"Value"}
             />
             <StyledDeleteIcon
               height={20}
-              width={20}
               onClick={() => {
                 deletePair(index);
               }}
+              width={20}
             />
           </StyledOptionControlWrapper>
         );
       })}
 
       <StyledPropertyPaneButton
+        category={Category.tertiary}
         icon="plus"
-        tag="button"
-        type="button"
-        text={props.addLabel || "Option"}
         onClick={addPair}
         size={Size.medium}
-        category={Category.tertiary}
+        tag="button"
+        text={props.addLabel || "Option"}
+        type="button"
       />
-    </React.Fragment>
+    </>
   );
 }
diff --git a/app/client/src/components/propertyControls/LocationSearchControl.tsx b/app/client/src/components/propertyControls/LocationSearchControl.tsx
index 19b44d20dd..2040bfa6d6 100644
--- a/app/client/src/components/propertyControls/LocationSearchControl.tsx
+++ b/app/client/src/components/propertyControls/LocationSearchControl.tsx
@@ -46,10 +46,10 @@ class LocationSearchControl extends BaseControl<ControlProps> {
   render() {
     return (
       <MapScriptWrapper
-        onSearchBoxMounted={this.onSearchBoxMounted}
-        onPlacesChanged={this.onLocationSelection}
-        propertyValue={this.props.propertyValue}
         clearLocation={this.clearLocation}
+        onPlacesChanged={this.onLocationSelection}
+        onSearchBoxMounted={this.onSearchBoxMounted}
+        propertyValue={this.props.propertyValue}
       />
     );
   }
@@ -66,7 +66,7 @@ interface MapScriptWrapperProps {
   propertyValue: any;
 }
 
-const MapScriptWrapper = (props: MapScriptWrapperProps) => {
+function MapScriptWrapper(props: MapScriptWrapperProps) {
   const status = useScript(
     `https://maps.googleapis.com/maps/api/js?key=${google.apiKey}&v=3.exp&libraries=geometry,drawing,places`,
     AddScriptTo.HEAD,
@@ -77,27 +77,27 @@ const MapScriptWrapper = (props: MapScriptWrapperProps) => {
     <div data-standalone-searchbox="">
       {status === ScriptStatus.READY && (
         <StandaloneSearchBox
-          ref={props.onSearchBoxMounted}
           onPlacesChanged={() => {
             props.onPlacesChanged();
             setTitle("");
           }}
+          ref={props.onSearchBoxMounted}
         >
           <StyledInputGroup
             dataType="text"
-            placeholder="Enter location"
+            defaultValue={title || props.propertyValue?.title}
             onChange={(value: string) => {
               if (value === "") {
                 props.clearLocation();
               }
               setTitle(value);
             }}
-            defaultValue={title || props.propertyValue?.title}
+            placeholder="Enter location"
           />
         </StandaloneSearchBox>
       )}
     </div>
   );
-};
+}
 
 export default LocationSearchControl;
diff --git a/app/client/src/components/propertyControls/MultiSelectControl.tsx b/app/client/src/components/propertyControls/MultiSelectControl.tsx
index 9301abeb48..ce27b99dd4 100644
--- a/app/client/src/components/propertyControls/MultiSelectControl.tsx
+++ b/app/client/src/components/propertyControls/MultiSelectControl.tsx
@@ -18,14 +18,14 @@ class MultiSelectControl extends BaseControl<MultiSelectControlProps> {
 
     return (
       <StyledMultiSelectDropDown
-        options={this.props.options}
-        selected={selectedItems}
         onSelect={this.onItemSelect}
-        width="100%"
-        showLabelOnly={true}
         optionWidth="187px"
-        selectAll={true}
+        options={this.props.options}
+        selectAll
         selectAllQuantifier="*"
+        selected={selectedItems}
+        showLabelOnly
+        width="100%"
       />
     );
   }
diff --git a/app/client/src/components/propertyControls/MultiSwitchControl.tsx b/app/client/src/components/propertyControls/MultiSwitchControl.tsx
index 0e67483212..0229a2dae1 100644
--- a/app/client/src/components/propertyControls/MultiSwitchControl.tsx
+++ b/app/client/src/components/propertyControls/MultiSwitchControl.tsx
@@ -10,13 +10,13 @@ class MultiSwitchControl extends BaseControl<MultiSwitchControlProps> {
       !!option.icon && iconNames.indexOf(option.icon) > -1;
     return (
       <Button
-        key={option.label || option.icon}
-        icon={isIcon ? (option.icon as IconName) : undefined}
-        text={!isIcon && option.label}
         active={this.props.propertyValue === option.value}
+        icon={isIcon ? (option.icon as IconName) : undefined}
+        key={option.label || option.icon}
         onClick={() =>
           this.updateProperty(this.props.propertyName, option.value)
         }
+        text={!isIcon && option.label}
       />
     );
   };
diff --git a/app/client/src/components/propertyControls/PrimaryColumnsControl.tsx b/app/client/src/components/propertyControls/PrimaryColumnsControl.tsx
index 93275856d6..fd49fbc6ed 100644
--- a/app/client/src/components/propertyControls/PrimaryColumnsControl.tsx
+++ b/app/client/src/components/propertyControls/PrimaryColumnsControl.tsx
@@ -114,48 +114,48 @@ function ColumnControlComponent(props: RenderComponentProps) {
       <StyledDragIcon height={20} width={20} />
       <StyledOptionControlInputGroup
         dataType="text"
-        placeholder="Column Title"
+        defaultValue={value}
         onChange={(value: string) => {
           onChange(index, value);
         }}
-        defaultValue={value}
+        placeholder="Column Title"
       />
       <StyledEditIcon
         className="t--edit-column-btn"
         height={20}
-        width={20}
         onClick={() => {
           onEdit && onEdit(index);
         }}
+        width={20}
       />
       {!!item.isDerived ? (
         <StyledDeleteIcon
           className="t--delete-column-btn"
           height={20}
-          width={20}
           onClick={() => {
             deleteOption && deleteOption(index);
           }}
+          width={20}
         />
       ) : visibility ? (
         <StyledVisibleIcon
           className="t--show-column-btn"
           height={20}
-          width={20}
           onClick={() => {
             setVisibility(!visibility);
             toggleVisibility && toggleVisibility(index);
           }}
+          width={20}
         />
       ) : (
         <StyledHiddenIcon
           className="t--show-column-btn"
           height={20}
-          width={20}
           onClick={() => {
             setVisibility(!visibility);
             toggleVisibility && toggleVisibility(index);
           }}
+          width={20}
         />
       )}
     </ItemWrapper>
@@ -198,25 +198,25 @@ class PrimaryColumnsControl extends BaseControl<ControlProps> {
     return (
       <TabsWrapper>
         <DroppableComponent
-          items={draggableComponentColumns}
-          itemHeight={45}
-          renderComponent={ColumnControlComponent}
-          updateOption={this.updateOption}
-          updateItems={this.updateItems}
           deleteOption={this.deleteOption}
-          toggleVisibility={this.toggleVisibility}
+          itemHeight={45}
+          items={draggableComponentColumns}
           onEdit={this.onEdit}
+          renderComponent={ColumnControlComponent}
+          toggleVisibility={this.toggleVisibility}
+          updateItems={this.updateItems}
+          updateOption={this.updateOption}
         />
 
         <AddColumnButton
+          category={Category.tertiary}
           className="t--add-column-btn"
           icon="plus"
-          tag="button"
-          type="button"
-          text="Add a new column"
           onClick={this.addNewColumn}
           size={Size.medium}
-          category={Category.tertiary}
+          tag="button"
+          text="Add a new column"
+          type="button"
         />
       </TabsWrapper>
     );
diff --git a/app/client/src/components/propertyControls/StepControl.tsx b/app/client/src/components/propertyControls/StepControl.tsx
index 566e9fbb5c..3659b0f22e 100644
--- a/app/client/src/components/propertyControls/StepControl.tsx
+++ b/app/client/src/components/propertyControls/StepControl.tsx
@@ -28,14 +28,14 @@ class StepControl extends BaseControl<StepControlProps> {
     const { min, max, steps, displayFormat } = this.getStepTypeControls();
     return (
       <StepComponent
-        min={min}
+        displayFormat={displayFormat}
         max={max}
-        steps={steps}
-        value={this.props.propertyValue}
+        min={min}
         onChange={(value: number) => {
           this.updateProperty(this.props.propertyName, value);
         }}
-        displayFormat={displayFormat}
+        steps={steps}
+        value={this.props.propertyValue}
       />
     );
   }
diff --git a/app/client/src/components/propertyControls/SwitchControl.tsx b/app/client/src/components/propertyControls/SwitchControl.tsx
index 51afd632b1..782a7296b5 100644
--- a/app/client/src/components/propertyControls/SwitchControl.tsx
+++ b/app/client/src/components/propertyControls/SwitchControl.tsx
@@ -6,9 +6,9 @@ class SwitchControl extends BaseControl<ControlProps> {
   render() {
     return (
       <Switch
-        onChange={this.onToggle}
         defaultChecked={this.props.propertyValue}
         large
+        onChange={this.onToggle}
       />
     );
   }
diff --git a/app/client/src/components/propertyControls/TabControl.tsx b/app/client/src/components/propertyControls/TabControl.tsx
index cec947d058..074263af64 100644
--- a/app/client/src/components/propertyControls/TabControl.tsx
+++ b/app/client/src/components/propertyControls/TabControl.tsx
@@ -76,26 +76,26 @@ function TabControlComponent(props: RenderComponentProps) {
       <StyledDragIcon height={20} width={20} />
       <StyledOptionControlInputGroup
         dataType="text"
-        placeholder="Tab Title"
+        defaultValue={item.label}
         onChange={(value: string) => {
           debouncedUpdate(index, value);
         }}
-        defaultValue={item.label}
+        placeholder="Tab Title"
       />
       <StyledDeleteIcon
         className="t--delete-tab-btn"
         height={20}
-        width={20}
         marginRight={12}
         onClick={() => {
           deleteOption(index);
         }}
+        width={20}
       />
       <StyledEditIcon
         className="t--edit-column-btn"
         height={20}
-        width={20}
         onClick={handleChange}
+        width={20}
       />
     </ItemWrapper>
   );
@@ -167,24 +167,24 @@ class TabControl extends BaseControl<ControlProps> {
     return (
       <TabsWrapper>
         <DroppableComponent
-          items={tabs}
-          itemHeight={45}
-          renderComponent={TabControlComponent}
           deleteOption={this.deleteOption}
-          updateOption={this.updateOption}
-          updateItems={this.updateItems}
-          toggleVisibility={this.toggleVisibility}
+          itemHeight={45}
+          items={tabs}
           onEdit={this.onEdit}
+          renderComponent={TabControlComponent}
+          toggleVisibility={this.toggleVisibility}
+          updateItems={this.updateItems}
+          updateOption={this.updateOption}
         />
         <StyledPropertyPaneButtonWrapper>
           <StyledPropertyPaneButton
+            category={Category.tertiary}
             icon="plus"
-            tag="button"
-            type="button"
-            text="Add a Tab"
             onClick={this.addOption}
             size={Size.medium}
-            category={Category.tertiary}
+            tag="button"
+            text="Add a Tab"
+            type="button"
           />
         </StyledPropertyPaneButtonWrapper>
       </TabsWrapper>
diff --git a/app/client/src/components/stories/Button.stories.tsx b/app/client/src/components/stories/Button.stories.tsx
index 9cf2e82c1c..b174d4bd12 100644
--- a/app/client/src/components/stories/Button.stories.tsx
+++ b/app/client/src/components/stories/Button.stories.tsx
@@ -14,18 +14,18 @@ export default {
 export const withDynamicProps = () => (
   <StoryWrapper>
     <Button
-      size={select("size", Object.values(Size), Size.large)}
       category={select("category", Object.values(Category), Category.primary)}
-      variant={select("variant", Object.values(Variant), Variant.info)}
+      disabled={boolean("Disabled", false)}
+      fill={boolean("fill", false)}
       icon={select(
         "Icon name",
         ["Select icon" as IconName, ...IconCollection],
         "Select icon" as IconName,
       )}
       isLoading={boolean("Loading", false)}
-      disabled={boolean("Disabled", false)}
+      size={select("size", Object.values(Size), Size.large)}
       text={text("text", "Get")}
-      fill={boolean("fill", false)}
-    ></Button>
+      variant={select("variant", Object.values(Variant), Variant.info)}
+    />
   </StoryWrapper>
 );
diff --git a/app/client/src/components/stories/Callout.stories.tsx b/app/client/src/components/stories/Callout.stories.tsx
index 8da26a9139..87d48a43b3 100644
--- a/app/client/src/components/stories/Callout.stories.tsx
+++ b/app/client/src/components/stories/Callout.stories.tsx
@@ -9,12 +9,14 @@ export default {
   decorators: [withKnobs],
 };
 
-export const CalloutStory = () => (
-  <StoryWrapper>
-    <Callout
-      text={text("text", "Lorem ipsum dolar sit adicipling dolare")}
-      fill={boolean("fill", false)}
-      variant={select("variant", Object.values(Variant), Variant.info)}
-    />
-  </StoryWrapper>
-);
+export function CalloutStory() {
+  return (
+    <StoryWrapper>
+      <Callout
+        fill={boolean("fill", false)}
+        text={text("text", "Lorem ipsum dolar sit adicipling dolare")}
+        variant={select("variant", Object.values(Variant), Variant.info)}
+      />
+    </StoryWrapper>
+  );
+}
diff --git a/app/client/src/components/stories/Checkbox.stories.tsx b/app/client/src/components/stories/Checkbox.stories.tsx
index befd978777..117f4c5afe 100644
--- a/app/client/src/components/stories/Checkbox.stories.tsx
+++ b/app/client/src/components/stories/Checkbox.stories.tsx
@@ -11,12 +11,14 @@ export default {
   decorators: [withKnobs, withDesign],
 };
 
-export const CustomCheckbox = () => (
-  <StoryWrapper>
-    <Checkbox
-      label={text("label", "Checked")}
-      disabled={boolean("disabled", false)}
-      onCheckChange={action("check-change")}
-    />
-  </StoryWrapper>
-);
+export function CustomCheckbox() {
+  return (
+    <StoryWrapper>
+      <Checkbox
+        disabled={boolean("disabled", false)}
+        label={text("label", "Checked")}
+        onCheckChange={action("check-change")}
+      />
+    </StoryWrapper>
+  );
+}
diff --git a/app/client/src/components/stories/ColorSelector.stories.tsx b/app/client/src/components/stories/ColorSelector.stories.tsx
index 44a49480f5..366ede4a0a 100644
--- a/app/client/src/components/stories/ColorSelector.stories.tsx
+++ b/app/client/src/components/stories/ColorSelector.stories.tsx
@@ -15,12 +15,14 @@ export default {
 
 const defaultValue = theme.colors.appCardColors;
 
-export const ColorPickerStory = () => (
-  <StoryWrapper>
-    <ColorSelector
-      onSelect={action("color-picker")}
-      fill={boolean("fill", false)}
-      colorPalette={array("colorPalette", defaultValue)}
-    />
-  </StoryWrapper>
-);
+export function ColorPickerStory() {
+  return (
+    <StoryWrapper>
+      <ColorSelector
+        colorPalette={array("colorPalette", defaultValue)}
+        fill={boolean("fill", false)}
+        onSelect={action("color-picker")}
+      />
+    </StoryWrapper>
+  );
+}
diff --git a/app/client/src/components/stories/Dropdown.stories.tsx b/app/client/src/components/stories/Dropdown.stories.tsx
index a968cdbf68..2c8c0fa310 100644
--- a/app/client/src/components/stories/Dropdown.stories.tsx
+++ b/app/client/src/components/stories/Dropdown.stories.tsx
@@ -12,104 +12,113 @@ export default {
   decorators: [withKnobs, withDesign],
 };
 
-export const Text = () => (
-  <StoryWrapper>
-    <Dropdown
-      options={[
-        {
-          id: "111abc",
-          value: text("1st Option", "First option"),
-          onSelect: action("selected-option"),
-        },
-        {
-          id: "222abc",
-          value: text("2nd Option", "Second option"),
-          onSelect: action("selected-option"),
-        },
-        {
-          id: "322abc",
-          value: text("3rd Option", "Third option"),
-          onSelect: action("selected-option"),
-        },
-      ]}
-      onSelect={action("selected-option")}
-      selected={{
-        id: select("Selected id", ["111abc", "222abc", "333abc"], "111abc"),
-        value: text("Selected value", "First option"),
-      }}
-      disabled={boolean("disabled", false)}
-    ></Dropdown>
-  </StoryWrapper>
-);
+export function Text() {
+  return (
+    <StoryWrapper>
+      <Dropdown
+        disabled={boolean("disabled", false)}
+        onSelect={action("selected-option")}
+        options={[
+          {
+            id: "111abc",
+            value: text("1st Option", "First option"),
+            onSelect: action("selected-option"),
+          },
+          {
+            id: "222abc",
+            value: text("2nd Option", "Second option"),
+            onSelect: action("selected-option"),
+          },
+          {
+            id: "322abc",
+            value: text("3rd Option", "Third option"),
+            onSelect: action("selected-option"),
+          },
+        ]}
+        selected={{
+          id: select("Selected id", ["111abc", "222abc", "333abc"], "111abc"),
+          value: text("Selected value", "First option"),
+        }}
+      />
+    </StoryWrapper>
+  );
+}
 
-export const IconAndText = () => (
-  <StoryWrapper>
-    <Dropdown
-      options={[
-        {
-          id: "111abc",
-          value: text("1st Option", "Delete"),
-          icon: select("1st Icon", IconCollection, "delete"),
-          onSelect: action("selected-option"),
-        },
-        {
-          id: "222abc",
-          value: text("2nd Option", "User"),
-          icon: select("2nd Icon", IconCollection, "user"),
-          onSelect: action("selected-option"),
-        },
-        {
-          id: "322abc",
-          value: text("3rd Option", "General"),
-          icon: select("3rd Icon", IconCollection, "general"),
-          onSelect: action("selected-option"),
-        },
-      ]}
-      onSelect={action("selected-option")}
-      selected={{
-        id: select("Selected id", ["111abc", "222abc", "333abc"], "111abc"),
-        value: text("Selected value", "Delete"),
-      }}
-      disabled={boolean("disabled", false)}
-    ></Dropdown>
-  </StoryWrapper>
-);
+export function IconAndText() {
+  return (
+    <StoryWrapper>
+      <Dropdown
+        disabled={boolean("disabled", false)}
+        onSelect={action("selected-option")}
+        options={[
+          {
+            id: "111abc",
+            value: text("1st Option", "Delete"),
+            icon: select("1st Icon", IconCollection, "delete"),
+            onSelect: action("selected-option"),
+          },
+          {
+            id: "222abc",
+            value: text("2nd Option", "User"),
+            icon: select("2nd Icon", IconCollection, "user"),
+            onSelect: action("selected-option"),
+          },
+          {
+            id: "322abc",
+            value: text("3rd Option", "General"),
+            icon: select("3rd Icon", IconCollection, "general"),
+            onSelect: action("selected-option"),
+          },
+        ]}
+        selected={{
+          id: select("Selected id", ["111abc", "222abc", "333abc"], "111abc"),
+          value: text("Selected value", "Delete"),
+        }}
+      />
+    </StoryWrapper>
+  );
+}
 
-export const LabelAndText = () => (
-  <StoryWrapper>
-    <Dropdown
-      options={[
-        {
-          id: "111abc",
-          value: text("1st Option", "Admin"),
-          label: text(
-            "1st label",
-            "Can edit, view and invite other user to an app",
-          ),
-          onSelect: action("selected-option"),
-        },
-        {
-          id: "222abc",
-          value: text("2nd Option", "Developer"),
-          label: text("2nd label", "Can view and invite other user to an app"),
-          onSelect: action("selected-option"),
-        },
-        {
-          id: "322abc",
-          value: text("3rd Option", "User"),
-          label: text(
-            "3rd label",
-            "Can view and invite other user to an app and…",
-          ),
-          onSelect: action("selected-option"),
-        },
-      ]}
-      onSelect={action("selected-option")}
-      selected={{
-        id: select("Selected id", ["111abc", "222abc", "333abc"], "111abc"),
-        value: text("Selected value", "Developer"),
-      }}
-      disabled={boolean("disabled", false)}
-    ></Dropdown>
-  </StoryWrapper>
-);
+export function LabelAndText() {
+  return (
+    <StoryWrapper>
+      <Dropdown
+        disabled={boolean("disabled", false)}
+        onSelect={action("selected-option")}
+        options={[
+          {
+            id: "111abc",
+            value: text("1st Option", "Admin"),
+            label: text(
+              "1st label",
+              "Can edit, view and invite other user to an app",
+            ),
+            onSelect: action("selected-option"),
+          },
+          {
+            id: "222abc",
+            value: text("2nd Option", "Developer"),
+            label: text(
+              "2nd label",
+              "Can view and invite other user to an app",
+            ),
+            onSelect: action("selected-option"),
+          },
+          {
+            id: "322abc",
+            value: text("3rd Option", "User"),
+            label: text(
+              "3rd label",
+              "Can view and invite other user to an app and…",
+            ),
+            onSelect: action("selected-option"),
+          },
+        ]}
+        selected={{
+          id: select("Selected id", ["111abc", "222abc", "333abc"], "111abc"),
+          value: text("Selected value", "Developer"),
+        }}
+      />
+    </StoryWrapper>
+  );
+}
diff --git a/app/client/src/components/stories/EditableText.stories.tsx b/app/client/src/components/stories/EditableText.stories.tsx
index 80150345c6..b6a6d75add 100644
--- a/app/client/src/components/stories/EditableText.stories.tsx
+++ b/app/client/src/components/stories/EditableText.stories.tsx
@@ -22,7 +22,7 @@ const errorFunction = (name: string) => {
   }
 };
 
-export const EditableTextStory = () => {
+export function EditableTextStory() {
   const [savingState, SetSavingState] = useState<SavingState>(
     SavingState.NOT_STARTED,
   );
@@ -36,21 +36,21 @@ export const EditableTextStory = () => {
           Object.values(EditInteractionKind),
           EditInteractionKind.SINGLE,
         )}
-        onTextChanged={action("text-changed")}
-        valueTransform={(value) => value.toUpperCase()}
-        placeholder={text("placeholder", "Edit input")}
-        hideEditIcon={boolean("hideEditIcon", false)}
-        isInvalid={(name) => errorFunction(name)}
-        isEditingDefault={boolean("isEditingDefault", false)}
         fill={boolean("fill", false)}
-        savingState={savingState}
+        hideEditIcon={boolean("hideEditIcon", false)}
+        isEditingDefault={boolean("isEditingDefault", false)}
+        isInvalid={(name) => errorFunction(name)}
         onBlur={() => {
           SetSavingState(SavingState.STARTED);
           setTimeout(() => {
             SetSavingState(SavingState.SUCCESS);
           }, 2000);
         }}
-      ></EditableText>
+        onTextChanged={action("text-changed")}
+        placeholder={text("placeholder", "Edit input")}
+        savingState={savingState}
+        valueTransform={(value) => value.toUpperCase()}
+      />
     </StoryWrapper>
   );
-};
+}
diff --git a/app/client/src/components/stories/FilePicker.stories.tsx b/app/client/src/components/stories/FilePicker.stories.tsx
index 58e2098ed4..8fd569b06a 100644
--- a/app/client/src/components/stories/FilePicker.stories.tsx
+++ b/app/client/src/components/stories/FilePicker.stories.tsx
@@ -12,7 +12,7 @@ function ShowUploadedFile(data: any) {
 
 export const withDynamicProps = () => (
   <FilePicker
-    onFileUploaded={(data) => ShowUploadedFile(data)}
     fileUploader={CloudinaryUploader}
+    onFileUploaded={(data) => ShowUploadedFile(data)}
   />
 );
diff --git a/app/client/src/components/stories/Icon.stories.tsx b/app/client/src/components/stories/Icon.stories.tsx
index 9341b21c9f..763f361763 100644
--- a/app/client/src/components/stories/Icon.stories.tsx
+++ b/app/client/src/components/stories/Icon.stories.tsx
@@ -12,33 +12,39 @@ export default {
   decorators: [withKnobs, withDesign],
 };
 
-export const ButtonIcon = () => (
-  <StoryWrapper>
-    <Button
-      size={select("size", Object.values(Size), Size.large)}
-      category={select("category", Object.values(Category), Category.primary)}
-      variant={select("variant", Object.values(Variant), Variant.info)}
-      icon={select("Icon name", IconCollection, "delete")}
-      isLoading={boolean("Loading", false)}
-      disabled={boolean("Disabled", false)}
-    ></Button>
-  </StoryWrapper>
-);
+export function ButtonIcon() {
+  return (
+    <StoryWrapper>
+      <Button
+        category={select("category", Object.values(Category), Category.primary)}
+        disabled={boolean("Disabled", false)}
+        icon={select("Icon name", IconCollection, "delete")}
+        isLoading={boolean("Loading", false)}
+        size={select("size", Object.values(Size), Size.large)}
+        variant={select("variant", Object.values(Variant), Variant.info)}
+      />
+    </StoryWrapper>
+  );
+}
 
-export const BordelessIcon = () => (
-  <StoryWrapper>
-    <Icon
-      size={select("Icon size", Object.values(IconSize), IconSize.LARGE)}
-      name={select("Icon name", IconCollection, "delete")}
-    />
-  </StoryWrapper>
-);
+export function BordelessIcon() {
+  return (
+    <StoryWrapper>
+      <Icon
+        name={select("Icon name", IconCollection, "delete")}
+        size={select("Icon size", Object.values(IconSize), IconSize.LARGE)}
+      />
+    </StoryWrapper>
+  );
+}
 
-export const AppIconVariant = () => (
-  <StoryWrapper>
-    <AppIcon
-      size={select("Icon size", Object.values(Size), Size.small)}
-      name={select("Select Icon", AppIconCollection, "bag")}
-    />
-  </StoryWrapper>
-);
+export function AppIconVariant() {
+  return (
+    <StoryWrapper>
+      <AppIcon
+        name={select("Select Icon", AppIconCollection, "bag")}
+        size={select("Icon size", Object.values(Size), Size.small)}
+      />
+    </StoryWrapper>
+  );
+}
diff --git a/app/client/src/components/stories/IconSelector.stories.tsx b/app/client/src/components/stories/IconSelector.stories.tsx
index dce1dabf0f..b2ebbe733f 100644
--- a/app/client/src/components/stories/IconSelector.stories.tsx
+++ b/app/client/src/components/stories/IconSelector.stories.tsx
@@ -12,27 +12,29 @@ export default {
   decorators: [withKnobs, withDesign],
 };
 
-export const IconPicker = () => (
-  <StoryWrapper>
-    <IconSelector
-      onSelect={action("icon-selected")}
-      fill={boolean("fill", false)}
-      selectedIcon={select("select icon", AppIconCollection, "bag")}
-      selectedColor={select(
-        "select color",
-        [
-          "#4F70FD",
+export function IconPicker() {
+  return (
+    <StoryWrapper>
+      <IconSelector
+        fill={boolean("fill", false)}
+        onSelect={action("icon-selected")}
+        selectedColor={select(
+          "select color",
+          [
+            "#4F70FD",
+            "#54A9FB",
+            "#5ED3DA",
+            "#F56AF4",
+            "#F36380",
+            "#FE9F44",
+            "#E9C951",
+            "#A8D76C",
+            "#6C4CF1",
+          ],
           "#54A9FB",
-          "#5ED3DA",
-          "#F56AF4",
-          "#F36380",
-          "#FE9F44",
-          "#E9C951",
-          "#A8D76C",
-          "#6C4CF1",
-        ],
-        "#54A9FB",
-      )}
-    />
-  </StoryWrapper>
-);
+        )}
+        selectedIcon={select("select icon", AppIconCollection, "bag")}
+      />
+    </StoryWrapper>
+  );
+}
diff --git a/app/client/src/components/stories/Menu.stories.tsx b/app/client/src/components/stories/Menu.stories.tsx
index b7c9fa916b..7c19b862ce 100644
--- a/app/client/src/components/stories/Menu.stories.tsx
+++ b/app/client/src/components/stories/Menu.stories.tsx
@@ -30,7 +30,7 @@ const errorFunction = (name: string) => {
   }
 };
 
-export const MenuStory = () => {
+export function MenuStory() {
   const [selectedColor, setSelectedColor] = useState<string>(
     theme.colors.appCardColors[0],
   );
@@ -53,18 +53,18 @@ export const MenuStory = () => {
         target={
           <div>
             <svg
-              width="22"
+              fill="none"
               height="22"
               viewBox="0 0 22 22"
-              fill="none"
+              width="22"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <rect width="22" height="22" fill="black" fillOpacity="0.1" />
+              <rect fill="black" fillOpacity="0.1" height="22" width="22" />
               <path
-                fillRule="evenodd"
                 clipRule="evenodd"
                 d="M6 11C6 12.105 5.105 13 4 13C2.895 13 2 12.105 2 11C2 9.895 2.895 9 4 9C5.105 9 6 9.895 6 11ZM11 9C12.105 9 13 9.895 13 11C13 12.105 12.105 13 11 13C9.895 13 9 12.105 9 11C9 9.895 9.895 9 11 9ZM20 11C20 9.895 19.105 9 18 9C16.895 9 16 9.895 16 11C16 12.105 16.895 13 18 13C19.105 13 20 12.105 20 11Z"
                 fill="white"
+                fillRule="evenodd"
               />
             </svg>
           </div>
@@ -73,62 +73,62 @@ export const MenuStory = () => {
         <EditableText
           defaultValue="Product design app"
           editInteractionKind={EditInteractionKind.SINGLE}
-          onTextChanged={action("editable-input-changed")}
-          valueTransform={(value: any) => value.toUpperCase()}
-          placeholder={"Edit text input"}
-          hideEditIcon={false}
-          isInvalid={(name: any) => errorFunction(name)}
-          isEditingDefault={false}
           fill={false}
-          savingState={savingState}
+          hideEditIcon={false}
+          isEditingDefault={false}
+          isInvalid={(name: any) => errorFunction(name)}
           onBlur={() => {
             SetSavingState(SavingState.STARTED);
             setTimeout(() => {
               SetSavingState(SavingState.SUCCESS);
             }, 2000);
           }}
+          onTextChanged={action("editable-input-changed")}
+          placeholder={"Edit text input"}
+          savingState={savingState}
+          valueTransform={(value: any) => value.toUpperCase()}
         />
         <ColorSelector
-          onSelect={(value: string) => setSelectedColor(value)}
-          fill={false}
           colorPalette={theme.colors.appCardColors}
+          fill={false}
+          onSelect={(value: string) => setSelectedColor(value)}
         />
         <MenuDivider />
         <IconSelector
-          onSelect={action("icon-selected")}
           fill={false}
-          selectedIcon={select("Select app icon", AppIconCollection, "bag")}
+          onSelect={action("icon-selected")}
           selectedColor={selectedColor}
+          selectedIcon={select("Select app icon", AppIconCollection, "bag")}
         />
         <MenuDivider />
         <MenuItem
-          text={text("First option", "Invite user")}
+          disabled={boolean("First option disabled", false)}
           icon={select(
             "First Icon",
             ["Select icon" as IconName, ...IconCollection],
             "Select icon" as IconName,
           )}
-          onSelect={action("clicked-first-option")}
           label={<span>W</span>}
-          disabled={boolean("First option disabled", false)}
+          onSelect={action("clicked-first-option")}
+          text={text("First option", "Invite user")}
         />
         {boolean("First menu item divider", false) ? <MenuDivider /> : null}
         <MenuItem
-          text={text("Second option", "Are you sure")}
           icon={select(
             "Second Icon",
             ["Select icon" as IconName, ...IconCollection],
             "Select icon" as IconName,
           )}
-          onSelect={action("clicked-second-option")}
           label={<span>W</span>}
+          onSelect={action("clicked-second-option")}
+          text={text("Second option", "Are you sure")}
         />
         {boolean("Second menu item divider", false) ? <MenuDivider /> : null}
         <MenuItem
-          text={text("Third option", "Third option text only")}
           onSelect={action("clicked-third-option")}
+          text={text("Third option", "Third option text only")}
         />
       </Menu>
     </div>
   );
-};
+}
diff --git a/app/client/src/components/stories/Radio.stories.tsx b/app/client/src/components/stories/Radio.stories.tsx
index d3a54c0f1a..ac96536af6 100644
--- a/app/client/src/components/stories/Radio.stories.tsx
+++ b/app/client/src/components/stories/Radio.stories.tsx
@@ -11,40 +11,42 @@ export default {
   decorators: [withKnobs, withDesign],
 };
 
-export const Radio = () => (
-  <StoryWrapper>
-    <div style={{ height: "133px" }}>
-      <RadioComponent
-        defaultValue={select(
-          "defaultValue",
-          ["React", "Angular", "Vue"],
-          "React",
-        )}
-        columns={number("Column number", 2)}
-        rows={number("Row number", 2)}
-        disabled={boolean("Radio group disabled", false)}
-        onSelect={action("selected-radio-option")}
-        options={[
-          {
-            label: "React",
-            value: "React",
-            onSelect: action("first-radio-option"),
-            disabled: boolean("Option-1-disabled", false),
-          },
-          {
-            label: "Angular",
-            value: "Angular",
-            onSelect: action("second-radio-option"),
-            disabled: boolean("Option-2-disabled", false),
-          },
-          {
-            label: "Vue",
-            value: "Vue",
-            onSelect: action("third-radio-option"),
-            disabled: boolean("Option-3-disabled", false),
-          },
-        ]}
-      />
-    </div>
-  </StoryWrapper>
-);
+export function Radio() {
+  return (
+    <StoryWrapper>
+      <div style={{ height: "133px" }}>
+        <RadioComponent
+          columns={number("Column number", 2)}
+          defaultValue={select(
+            "defaultValue",
+            ["React", "Angular", "Vue"],
+            "React",
+          )}
+          disabled={boolean("Radio group disabled", false)}
+          onSelect={action("selected-radio-option")}
+          options={[
+            {
+              label: "React",
+              value: "React",
+              onSelect: action("first-radio-option"),
+              disabled: boolean("Option-1-disabled", false),
+            },
+            {
+              label: "Angular",
+              value: "Angular",
+              onSelect: action("second-radio-option"),
+              disabled: boolean("Option-2-disabled", false),
+            },
+            {
+              label: "Vue",
+              value: "Vue",
+              onSelect: action("third-radio-option"),
+              disabled: boolean("Option-3-disabled", false),
+            },
+          ]}
+          rows={number("Row number", 2)}
+        />
+      </div>
+    </StoryWrapper>
+  );
+}
diff --git a/app/client/src/components/stories/SearchInput.stories.tsx b/app/client/src/components/stories/SearchInput.stories.tsx
index e53ef0b5e8..57c16eec5e 100644
--- a/app/client/src/components/stories/SearchInput.stories.tsx
+++ b/app/client/src/components/stories/SearchInput.stories.tsx
@@ -10,18 +10,20 @@ export default {
   decorators: [withKnobs],
 };
 
-export const SearchInputStory = () => (
-  <StoryWrapper>
-    <SearchInput
-      placeholder={text("placeholder", "Search for apps...")}
-      variant={select(
-        "variant",
-        Object.values(SearchVariant),
-        SearchVariant.SEAMLESS,
-      )}
-      fill={boolean("fill", false)}
-      defaultValue={text("defaultValue", "Type any search keyword")}
-      onChange={action("searched value")}
-    ></SearchInput>
-  </StoryWrapper>
-);
+export function SearchInputStory() {
+  return (
+    <StoryWrapper>
+      <SearchInput
+        defaultValue={text("defaultValue", "Type any search keyword")}
+        fill={boolean("fill", false)}
+        onChange={action("searched value")}
+        placeholder={text("placeholder", "Search for apps...")}
+        variant={select(
+          "variant",
+          Object.values(SearchVariant),
+          SearchVariant.SEAMLESS,
+        )}
+      />
+    </StoryWrapper>
+  );
+}
diff --git a/app/client/src/components/stories/Table.stories.tsx b/app/client/src/components/stories/Table.stories.tsx
index e43e510e70..8b0054dad2 100644
--- a/app/client/src/components/stories/Table.stories.tsx
+++ b/app/client/src/components/stories/Table.stories.tsx
@@ -59,19 +59,19 @@ const data = [
     col2: "dustin_01@jlegue.com",
     col3: (
       <TableDropdown
-        position={Position.BOTTOM}
-        options={options}
         onSelect={(selectedValue) => console.log(selectedValue)}
+        options={options}
+        position={Position.BOTTOM}
         selectedIndex={0}
-      ></TableDropdown>
+      />
     ),
     col4: "App Access",
     col5: (
       <Button
         category={Category.primary}
-        variant={Variant.info}
         size={Size.small}
         text={"approve"}
+        variant={Variant.info}
       />
     ),
     col6: <Icon name="delete" size={IconSize.LARGE} />,
@@ -81,19 +81,19 @@ const data = [
     col2: "dustin_02@jlegue.com",
     col3: (
       <TableDropdown
-        position={Position.BOTTOM}
-        options={options}
         onSelect={(selectedValue) => console.log(selectedValue)}
+        options={options}
+        position={Position.BOTTOM}
         selectedIndex={1}
-      ></TableDropdown>
+      />
     ),
     col4: "Map Access",
     col5: (
       <Button
         category={Category.primary}
-        variant={Variant.success}
         size={Size.small}
         text={"accepted"}
+        variant={Variant.success}
       />
     ),
     col6: <Icon name="delete" size={IconSize.LARGE} />,
@@ -103,27 +103,29 @@ const data = [
     col2: "dustin_03@jlegue.com",
     col3: (
       <TableDropdown
-        position={Position.BOTTOM}
-        options={options}
         onSelect={(selectedValue) => console.log(selectedValue)}
+        options={options}
+        position={Position.BOTTOM}
         selectedIndex={2}
-      ></TableDropdown>
+      />
     ),
     col4: "Dm Access",
     col5: (
       <Button
         category={Category.primary}
-        variant={Variant.warning}
         size={Size.small}
         text={"on hold"}
+        variant={Variant.warning}
       />
     ),
     col6: <Icon name="delete" size={IconSize.LARGE} />,
   },
 ];
 
-export const TableStory = () => (
-  <StoryWrapper>
-    <Table columns={columns} data={data}></Table>
-  </StoryWrapper>
-);
+export function TableStory() {
+  return (
+    <StoryWrapper>
+      <Table columns={columns} data={data} />
+    </StoryWrapper>
+  );
+}
diff --git a/app/client/src/components/stories/TableDropdown.stories.tsx b/app/client/src/components/stories/TableDropdown.stories.tsx
index 1c867112ea..b26891c381 100644
--- a/app/client/src/components/stories/TableDropdown.stories.tsx
+++ b/app/client/src/components/stories/TableDropdown.stories.tsx
@@ -26,15 +26,21 @@ const options = [
   },
 ];
 
-export const TableDropdownStory = () => (
-  <StoryWrapper
-    style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
-  >
-    <TableDropdown
-      position={select("position", Object.values(Position), Position.BOTTOM)}
-      options={options}
-      onSelect={(selectedValue) => console.log(selectedValue)}
-      selectedIndex={0}
-    ></TableDropdown>
-  </StoryWrapper>
-);
+export function TableDropdownStory() {
+  return (
+    <StoryWrapper
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <TableDropdown
+        onSelect={(selectedValue) => console.log(selectedValue)}
+        options={options}
+        position={select("position", Object.values(Position), Position.BOTTOM)}
+        selectedIndex={0}
+      />
+    </StoryWrapper>
+  );
+}
diff --git a/app/client/src/components/stories/Tabs.stories.tsx b/app/client/src/components/stories/Tabs.stories.tsx
index 17eb511ef8..2f14910f44 100644
--- a/app/client/src/components/stories/Tabs.stories.tsx
+++ b/app/client/src/components/stories/Tabs.stories.tsx
@@ -11,7 +11,7 @@ export default {
   decorators: [withKnobs, withDesign],
 };
 
-const TabStory = (props: any) => {
+function TabStory(props: any) {
   const tabArr: TabProp[] = [
     {
       key: "1",
@@ -24,7 +24,7 @@ const TabStory = (props: any) => {
             height: "100%",
             overflow: "hidden",
           }}
-        ></div>
+        />
       ),
       icon: props.icon1,
     },
@@ -39,7 +39,7 @@ const TabStory = (props: any) => {
             height: "100%",
             overflow: "hidden",
           }}
-        ></div>
+        />
       ),
       icon: props.icon2,
     },
@@ -54,7 +54,7 @@ const TabStory = (props: any) => {
             height: "100%",
             overflow: "hidden",
           }}
-        ></div>
+        />
       ),
       icon: props.icon3,
     },
@@ -72,7 +72,7 @@ const TabStory = (props: any) => {
             height: "100%",
             overflow: "hidden",
           }}
-        ></div>
+        />
       ),
       icon: props.icon4,
     });
@@ -83,33 +83,35 @@ const TabStory = (props: any) => {
       <TabComponent tabs={tabArr} />
     </StoryWrapper>
   );
-};
+}
 
-export const Tabs = () => (
-  <TabStory
-    icon1={select(
-      "Icon 1",
-      ["Select icon" as IconName, ...IconCollection],
-      "Select icon" as IconName,
-    )}
-    title1={text("Title 1", "General")}
-    icon2={select(
-      "Icon 2",
-      ["Select icon" as IconName, ...IconCollection],
-      "Select icon" as IconName,
-    )}
-    title2={text("Title 2", "User")}
-    icon3={select(
-      "Icon 3",
-      ["Select icon" as IconName, ...IconCollection],
-      "Select icon" as IconName,
-    )}
-    title3={text("Title 3", "Billing")}
-    icon4={select(
-      "Icon 4",
-      ["Select icon" as IconName, ...IconCollection],
-      "Select icon" as IconName,
-    )}
-    title4={text("Title 4", "")}
-  />
-);
+export function Tabs() {
+  return (
+    <TabStory
+      icon1={select(
+        "Icon 1",
+        ["Select icon" as IconName, ...IconCollection],
+        "Select icon" as IconName,
+      )}
+      icon2={select(
+        "Icon 2",
+        ["Select icon" as IconName, ...IconCollection],
+        "Select icon" as IconName,
+      )}
+      icon3={select(
+        "Icon 3",
+        ["Select icon" as IconName, ...IconCollection],
+        "Select icon" as IconName,
+      )}
+      icon4={select(
+        "Icon 4",
+        ["Select icon" as IconName, ...IconCollection],
+        "Select icon" as IconName,
+      )}
+      title1={text("Title 1", "General")}
+      title2={text("Title 2", "User")}
+      title3={text("Title 3", "Billing")}
+      title4={text("Title 4", "")}
+    />
+  );
+}
diff --git a/app/client/src/components/stories/Text.stories.tsx b/app/client/src/components/stories/Text.stories.tsx
index ca0e495c32..eac0b0bc0f 100644
--- a/app/client/src/components/stories/Text.stories.tsx
+++ b/app/client/src/components/stories/Text.stories.tsx
@@ -22,45 +22,51 @@ const StyledDiv = styled.div`
   }
 `;
 
-export const Typography = () => (
-  <StoryWrapper style={{ display: "flex" }}>
-    <StyledDiv>
-      <Text type={TextType.H1}>Hi there, I am h1 element.</Text>
-      <Text type={TextType.H2}>Hi there, I am h2 element.</Text>
-      <Text type={TextType.H3}>Hi there, I am h3 element.</Text>
-      <Text type={TextType.H4}>Hi there, I am h4 element.</Text>
-      <Text type={TextType.H5}>Hi there, I am h5 element.</Text>
-      <Text type={TextType.H6}>Hi there, I am h6 element.</Text>
-    </StyledDiv>
+export function Typography() {
+  return (
+    <StoryWrapper style={{ display: "flex" }}>
+      <StyledDiv>
+        <Text type={TextType.H1}>Hi there, I am h1 element.</Text>
+        <Text type={TextType.H2}>Hi there, I am h2 element.</Text>
+        <Text type={TextType.H3}>Hi there, I am h3 element.</Text>
+        <Text type={TextType.H4}>Hi there, I am h4 element.</Text>
+        <Text type={TextType.H5}>Hi there, I am h5 element.</Text>
+        <Text type={TextType.H6}>Hi there, I am h6 element.</Text>
+      </StyledDiv>
 
-    <br />
+      <br />
 
-    <StyledDiv>
-      <Text type={TextType.P1}>Hi there, I am p1 element.</Text>
-      <Text type={TextType.P2}>Hi there, I am p2 element.</Text>
-      <Text type={TextType.P3}>Hi there, I am p3 element.</Text>
-    </StyledDiv>
-  </StoryWrapper>
-);
+      <StyledDiv>
+        <Text type={TextType.P1}>Hi there, I am p1 element.</Text>
+        <Text type={TextType.P2}>Hi there, I am p2 element.</Text>
+        <Text type={TextType.P3}>Hi there, I am p3 element.</Text>
+      </StyledDiv>
+    </StoryWrapper>
+  );
+}
 
-const ValueWrapper = (props: { type: TextType; value: string }) => (
-  <Text
-    type={props.type}
-    underline={boolean("underline", false)}
-    italic={boolean("italic", false)}
-    highlight={boolean("highlight", false)}
-    case={select("Case", Object.values(Case), undefined)}
-    weight={select("Weight", Object.values(FontWeight), undefined)}
-  >
-    {props.value}
-  </Text>
-);
+function ValueWrapper(props: { type: TextType; value: string }) {
+  return (
+    <Text
+      case={select("Case", Object.values(Case), undefined)}
+      highlight={boolean("highlight", false)}
+      italic={boolean("italic", false)}
+      type={props.type}
+      underline={boolean("underline", false)}
+      weight={select("Weight", Object.values(FontWeight), undefined)}
+    >
+      {props.value}
+    </Text>
+  );
+}
 
-export const CustomizeText = () => (
-  <StoryWrapper>
-    <ValueWrapper
-      type={select("type", Object.values(TextType), TextType.H1)}
-      value={text("text", "Hi There I am Earth")}
-    />
-  </StoryWrapper>
-);
+export function CustomizeText() {
+  return (
+    <StoryWrapper>
+      <ValueWrapper
+        type={select("type", Object.values(TextType), TextType.H1)}
+        value={text("text", "Hi There I am Earth")}
+      />
+    </StoryWrapper>
+  );
+}
diff --git a/app/client/src/components/stories/TextInput.stories.tsx b/app/client/src/components/stories/TextInput.stories.tsx
index 7fdc7d3e63..c8fce4ac11 100644
--- a/app/client/src/components/stories/TextInput.stories.tsx
+++ b/app/client/src/components/stories/TextInput.stories.tsx
@@ -17,18 +17,20 @@ const callValidator1 = () => {
   };
 };
 
-export const TextInputStory = () => (
-  <StoryWrapper>
-    <TextInput
-      placeholder={text("placeholder", "Your name")}
-      disabled={boolean("disabled", false)}
-      fill={boolean("fill", true)}
-      defaultValue={text("defaultValue", "This is valid")}
-      onChange={action("input value changed")}
-      validator={() => callValidator1()}
-    ></TextInput>
-  </StoryWrapper>
-);
+export function TextInputStory() {
+  return (
+    <StoryWrapper>
+      <TextInput
+        defaultValue={text("defaultValue", "This is valid")}
+        disabled={boolean("disabled", false)}
+        fill={boolean("fill", true)}
+        onChange={action("input value changed")}
+        placeholder={text("placeholder", "Your name")}
+        validator={() => callValidator1()}
+      />
+    </StoryWrapper>
+  );
+}
 
 const callValidator2 = () => {
   return {
@@ -37,15 +39,17 @@ const callValidator2 = () => {
   };
 };
 
-export const ErrorTextInputStory = () => (
-  <StoryWrapper>
-    <TextInput
-      placeholder={text("placeholder", "Your name")}
-      disabled={boolean("disabled", false)}
-      fill={boolean("fill", true)}
-      onChange={(value) => console.log(value)}
-      defaultValue={text("defaultValue", "This is wrong")}
-      validator={() => callValidator2()}
-    ></TextInput>
-  </StoryWrapper>
-);
+export function ErrorTextInputStory() {
+  return (
+    <StoryWrapper>
+      <TextInput
+        defaultValue={text("defaultValue", "This is wrong")}
+        disabled={boolean("disabled", false)}
+        fill={boolean("fill", true)}
+        onChange={(value) => console.log(value)}
+        placeholder={text("placeholder", "Your name")}
+        validator={() => callValidator2()}
+      />
+    </StoryWrapper>
+  );
+}
diff --git a/app/client/src/components/stories/Toast.stories.tsx b/app/client/src/components/stories/Toast.stories.tsx
index 7822ae0136..a00507090f 100644
--- a/app/client/src/components/stories/Toast.stories.tsx
+++ b/app/client/src/components/stories/Toast.stories.tsx
@@ -12,7 +12,7 @@ export default {
   decorators: [withKnobs],
 };
 
-export const ToastStory = () => {
+export function ToastStory() {
   useEffect(() => {
     Toaster.show({
       text: text("message", "Archived successfully"),
@@ -25,18 +25,15 @@ export const ToastStory = () => {
   return (
     <StoryWrapper>
       <StyledToastContainer
-        hideProgressBar
-        draggable={false}
-        transition={Slide}
         autoClose={5000}
         closeButton={false}
+        draggable={false}
+        hideProgressBar
         pauseOnHover={false}
+        transition={Slide}
       />
       <Button
-        size={Size.large}
         category={Category.tertiary}
-        variant={Variant.info}
-        text="Show toast message"
         onClick={() => {
           Toaster.show({
             text: text("message", "Application name saved successfully"),
@@ -45,7 +42,10 @@ export const ToastStory = () => {
             onUndo: action("on-undo"),
           });
         }}
+        size={Size.large}
+        text="Show toast message"
+        variant={Variant.info}
       />
     </StoryWrapper>
   );
-};
+}
diff --git a/app/client/src/components/stories/Toggle.stories.tsx b/app/client/src/components/stories/Toggle.stories.tsx
index 7a0d8ade16..a1e9f38fb6 100644
--- a/app/client/src/components/stories/Toggle.stories.tsx
+++ b/app/client/src/components/stories/Toggle.stories.tsx
@@ -11,13 +11,15 @@ export default {
   decorators: [withKnobs, withDesign],
 };
 
-export const CustomToggle = () => (
-  <StoryWrapper>
-    <Toggle
-      value={boolean("switchOn", false)}
-      disabled={boolean("disabled", false)}
-      isLoading={boolean("isLoading", false)}
-      onToggle={action("toggle-on")}
-    />
-  </StoryWrapper>
-);
+export function CustomToggle() {
+  return (
+    <StoryWrapper>
+      <Toggle
+        disabled={boolean("disabled", false)}
+        isLoading={boolean("isLoading", false)}
+        onToggle={action("toggle-on")}
+        value={boolean("switchOn", false)}
+      />
+    </StoryWrapper>
+  );
+}
diff --git a/app/client/src/components/stories/Tooltip.stories.tsx b/app/client/src/components/stories/Tooltip.stories.tsx
index 46fd641e41..806fc7d477 100644
--- a/app/client/src/components/stories/Tooltip.stories.tsx
+++ b/app/client/src/components/stories/Tooltip.stories.tsx
@@ -12,22 +12,24 @@ export default {
   decorators: [withKnobs, withDesign],
 };
 
-export const MenuStory = () => (
-  <StoryWrapper>
-    <div style={{ paddingTop: "50px", paddingLeft: "50px", width: "200px" }}>
-      <TooltipComponent
-        position={select("Position", Object.values(Position), Position.RIGHT)}
-        content={
-          <Text type={TextType.P1} highlight>
-            This is a tooltip
+export function MenuStory() {
+  return (
+    <StoryWrapper>
+      <div style={{ paddingTop: "50px", paddingLeft: "50px", width: "200px" }}>
+        <TooltipComponent
+          content={
+            <Text highlight type={TextType.P1}>
+              This is a tooltip
+            </Text>
+          }
+          position={select("Position", Object.values(Position), Position.RIGHT)}
+          variant={select("variant", ["dark", "light"], "dark")}
+        >
+          <Text highlight type={TextType.P1}>
+            Hover to show tooltip
           </Text>
-        }
-        variant={select("variant", ["dark", "light"], "dark")}
-      >
-        <Text type={TextType.P1} highlight>
-          Hover to show tooltip
-        </Text>
-      </TooltipComponent>
-    </div>
-  </StoryWrapper>
-);
+        </TooltipComponent>
+      </div>
+    </StoryWrapper>
+  );
+}
diff --git a/app/client/src/components/utils/CollapseComponent.tsx b/app/client/src/components/utils/CollapseComponent.tsx
index 7a99ab67f0..933b90fe79 100644
--- a/app/client/src/components/utils/CollapseComponent.tsx
+++ b/app/client/src/components/utils/CollapseComponent.tsx
@@ -29,11 +29,11 @@ const CollapseWrapper = styled.div`
   }
 `;
 
-const CollapseComponent = (props: {
+function CollapseComponent(props: {
   children?: React.ReactNode;
   title?: string;
   isOpen?: boolean;
-}) => {
+}) {
   const [open, toggleOpen] = React.useState(true);
   const handleIsOpen = () => {
     toggleOpen(!open);
@@ -46,8 +46,8 @@ const CollapseComponent = (props: {
       <div className="collapse-title">
         {props.title}
         <Icon
-          icon="chevron-down"
           className={`icon ${!open ? "collapse" : ""}`}
+          icon="chevron-down"
           iconSize={16}
           onClick={handleIsOpen}
         />
@@ -59,6 +59,6 @@ const CollapseComponent = (props: {
       </Collapse>
     </CollapseWrapper>
   );
-};
+}
 
 export default CollapseComponent;
diff --git a/app/client/src/components/utils/EmptyDataState.tsx b/app/client/src/components/utils/EmptyDataState.tsx
index eabefa57e5..84d79b4679 100644
--- a/app/client/src/components/utils/EmptyDataState.tsx
+++ b/app/client/src/components/utils/EmptyDataState.tsx
@@ -20,13 +20,13 @@ const TableColumnEmptyWrapper = styled.div`
   }
 `;
 
-const EmptyDataState = () => {
+function EmptyDataState() {
   return (
     <TableColumnEmptyWrapper>
       <img alt="No data" src={NoDataImage} />
       <div className="no-data-title">No data found</div>
     </TableColumnEmptyWrapper>
   );
-};
+}
 
 export default EmptyDataState;
diff --git a/app/client/src/components/utils/Skeleton.tsx b/app/client/src/components/utils/Skeleton.tsx
index 199f773b28..f4071193ec 100644
--- a/app/client/src/components/utils/Skeleton.tsx
+++ b/app/client/src/components/utils/Skeleton.tsx
@@ -8,8 +8,8 @@ const StyledDiv = styled.div`
   display: block;
 `;
 
-export const Skeleton = () => {
+export function Skeleton() {
   return <StyledDiv className={Classes.SKELETON} />;
-};
+}
 
 export default Skeleton;
diff --git a/app/client/src/components/utils/TreeStructure.tsx b/app/client/src/components/utils/TreeStructure.tsx
index aaa7de568b..14bd647b5e 100644
--- a/app/client/src/components/utils/TreeStructure.tsx
+++ b/app/client/src/components/utils/TreeStructure.tsx
@@ -65,8 +65,8 @@ type TreeStructureProps = {
   children: React.ReactNode;
 };
 
-const TreeStructure = (props: TreeStructureProps) => {
+function TreeStructure(props: TreeStructureProps) {
   return <TreeStructureWrapper>{props.children}</TreeStructureWrapper>;
-};
+}
 
 export default TreeStructure;
diff --git a/app/client/src/globalStyles/index.tsx b/app/client/src/globalStyles/index.tsx
index 1d20b6cf8c..9b95336b84 100644
--- a/app/client/src/globalStyles/index.tsx
+++ b/app/client/src/globalStyles/index.tsx
@@ -4,9 +4,9 @@ import { PopoverStyles } from "./popover";
 
 export default function GlobalStyles() {
   return (
-    <React.Fragment>
+    <>
       <TooltipStyles />
       <PopoverStyles />
-    </React.Fragment>
+    </>
   );
 }
diff --git a/app/client/src/icons/ControlIcons.tsx b/app/client/src/icons/ControlIcons.tsx
index e98cc8eaa5..a9a6f6365c 100644
--- a/app/client/src/icons/ControlIcons.tsx
+++ b/app/client/src/icons/ControlIcons.tsx
@@ -119,9 +119,9 @@ export const ControlIcons: {
   PLAY_VIDEO: (props: IconProps) => (
     <IconWrapper {...props}>
       <img
+        alt="Datasource"
         src={PlayIcon}
         style={{ height: "30px", width: "30px" }}
-        alt="Datasource"
       />
     </IconWrapper>
   ),
diff --git a/app/client/src/icons/FormIcons.tsx b/app/client/src/icons/FormIcons.tsx
index 4aea0652b6..22d1bc2ba7 100644
--- a/app/client/src/icons/FormIcons.tsx
+++ b/app/client/src/icons/FormIcons.tsx
@@ -19,7 +19,7 @@ export const FormIcons: {
   ),
   HOME_ICON: (props: IconProps) => (
     <IconWrapper {...props}>
-      <Icon icon={IconNames.HOME} color={props.color} iconSize={props.height} />
+      <Icon color={props.color} icon={IconNames.HOME} iconSize={props.height} />
     </IconWrapper>
   ),
   DELETE_ICON: (props: IconProps) => (
@@ -39,14 +39,14 @@ export const FormIcons: {
   ),
   PLUS_ICON: (props: IconProps) => (
     <IconWrapper {...props}>
-      <Icon icon={IconNames.PLUS} color={props.color} iconSize={props.height} />
+      <Icon color={props.color} icon={IconNames.PLUS} iconSize={props.height} />
     </IconWrapper>
   ),
   SLASH_ICON: (props: IconProps) => (
     <IconWrapper {...props}>
       <Icon
-        icon={IconNames.SLASH}
         color={props.color}
+        icon={IconNames.SLASH}
         iconSize={props.height}
       />
     </IconWrapper>
diff --git a/app/client/src/icons/MenuIcons.tsx b/app/client/src/icons/MenuIcons.tsx
index 19fe88bea2..bcf1cd567a 100644
--- a/app/client/src/icons/MenuIcons.tsx
+++ b/app/client/src/icons/MenuIcons.tsx
@@ -71,7 +71,7 @@ export const MenuIcons: {
   ),
   DOCS_ICON: (props: IconProps) => (
     <IconWrapper {...props}>
-      <Icon icon="help"></Icon>
+      <Icon icon="help" />
     </IconWrapper>
   ),
   WIDGETS_COLORED_ICON: (props: IconProps) => (
diff --git a/app/client/src/index.tsx b/app/client/src/index.tsx
index 7e942cd4e1..adac756b97 100755
--- a/app/client/src/index.tsx
+++ b/app/client/src/index.tsx
@@ -26,7 +26,7 @@ import AppErrorBoundary from "./AppErrorBoundry";
 import GlobalStyles from "globalStyles";
 appInitializer();
 
-const App = () => {
+function App() {
   return (
     <Sentry.ErrorBoundary fallback={"An error has occured"}>
       <Provider store={store}>
@@ -36,7 +36,7 @@ const App = () => {
       </Provider>
     </Sentry.ErrorBoundary>
   );
-};
+}
 
 class ThemedApp extends React.Component<{
   currentTheme: any;
@@ -51,12 +51,12 @@ class ThemedApp extends React.Component<{
     return (
       <ThemeProvider theme={this.props.currentTheme}>
         <StyledToastContainer
-          hideProgressBar
-          draggable={false}
-          transition={Slide}
           autoClose={5000}
           closeButton={false}
+          draggable={false}
+          hideProgressBar
           pauseOnHover={false}
+          transition={Slide}
         />
         <GlobalStyles />
         <AppErrorBoundary>
diff --git a/app/client/src/pages/AppViewer/AppPage.tsx b/app/client/src/pages/AppViewer/AppPage.tsx
index 5d0dd12fe2..a2b1512fa3 100644
--- a/app/client/src/pages/AppViewer/AppPage.tsx
+++ b/app/client/src/pages/AppViewer/AppPage.tsx
@@ -21,7 +21,7 @@ type AppPageProps = {
   appName?: string;
 };
 
-export const AppPage = (props: AppPageProps) => {
+export function AppPage(props: AppPageProps) {
   useDynamicAppLayout();
   useEffect(() => {
     AnalyticsUtil.logEvent("PAGE_LOAD", {
@@ -37,6 +37,6 @@ export const AppPage = (props: AppPageProps) => {
         WidgetFactory.createWidget(props.dsl, RenderModes.PAGE)}
     </PageView>
   );
-};
+}
 
 export default AppPage;
diff --git a/app/client/src/pages/AppViewer/AppViewerPageContainer.tsx b/app/client/src/pages/AppViewer/AppViewerPageContainer.tsx
index 006ffaee49..3d9371d7c9 100644
--- a/app/client/src/pages/AppViewer/AppViewerPageContainer.tsx
+++ b/app/client/src/pages/AppViewer/AppViewerPageContainer.tsx
@@ -77,15 +77,15 @@ class AppViewerPageContainer extends Component<AppViewerPageContainerProps> {
     const pageNotFound = (
       <Centered>
         <NonIdealState
+          description={appsmithEditorLink}
           icon={
             <Icon
-              iconSize={theme.fontSizes[9]}
-              icon="page-layout"
               color={theme.colors.primaryOld}
+              icon="page-layout"
+              iconSize={theme.fontSizes[9]}
             />
           }
           title="This page seems to be blank"
-          description={appsmithEditorLink}
         />
       </Centered>
     );
@@ -109,8 +109,8 @@ class AppViewerPageContainer extends Component<AppViewerPageContainerProps> {
       return (
         <Section>
           <AppPage
-            dsl={this.props.widgets}
             appName={this.props.currentAppName}
+            dsl={this.props.widgets}
             pageId={this.props.match.params.pageId}
             pageName={this.props.currentPageName}
           />
diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx
index e5254206fc..a76fc6fcc0 100644
--- a/app/client/src/pages/AppViewer/index.tsx
+++ b/app/client/src/pages/AppViewer/index.tsx
@@ -97,14 +97,14 @@ class AppViewer extends Component<
           {isInitialized && this.state.registered && (
             <Switch>
               <SentryRoute
-                path={getApplicationViewerPageURL()}
-                exact
                 component={AppViewerPageContainer}
+                exact
+                path={getApplicationViewerPageURL()}
               />
               <SentryRoute
-                path={`${getApplicationViewerPageURL()}/fork`}
                 component={AppViewerPageContainer}
                 exact
+                path={`${getApplicationViewerPageURL()}/fork`}
               />
             </Switch>
           )}
diff --git a/app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx b/app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx
index 5dc886f5d4..a6cc50de83 100644
--- a/app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx
+++ b/app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx
@@ -127,7 +127,7 @@ type AppViewerHeaderProps = {
   lightTheme: Theme;
 };
 
-export const AppViewerHeader = (props: AppViewerHeaderProps) => {
+export function AppViewerHeader(props: AppViewerHeaderProps) {
   const { currentApplicationDetails, currentOrgId, currentUser, pages } = props;
   const userPermissions = currentApplicationDetails?.userPermissions ?? [];
   const permissionRequired = PERMISSION_TYPE.MANAGE_APPLICATION;
@@ -137,14 +137,14 @@ export const AppViewerHeader = (props: AppViewerHeaderProps) => {
   const isEmbed = queryParams.get("embed");
   const hideHeader = !!isEmbed;
 
-  const HtmlTitle = () => {
+  function HtmlTitle() {
     if (!currentApplicationDetails?.name) return null;
     return (
       <Helmet>
         <title>{currentApplicationDetails?.name}</title>
       </Helmet>
     );
-  };
+  }
   if (hideHeader) return <HtmlTitle />;
 
   const forkUrl = `${AUTH_LOGIN_URL}?redirectUrl=${window.location.href}/fork`;
@@ -166,10 +166,10 @@ export const AppViewerHeader = (props: AppViewerHeaderProps) => {
         <HeaderRow justify={"space-between"}>
           <HeaderSection justify={"flex-start"}>
             <PrimaryLogoLink to={APPLICATIONS_URL}>
-              <AppsmithLogoImg src={AppsmithLogo} alt="Appsmith logo" />
+              <AppsmithLogoImg alt="Appsmith logo" src={AppsmithLogo} />
             </PrimaryLogoLink>
           </HeaderSection>
-          <HeaderSection justify={"center"} className="current-app-name">
+          <HeaderSection className="current-app-name" justify={"center"}>
             {currentApplicationDetails && (
               <Text type={TextType.H4}>{currentApplicationDetails.name}</Text>
             )}
@@ -178,19 +178,19 @@ export const AppViewerHeader = (props: AppViewerHeaderProps) => {
             {currentApplicationDetails && (
               <>
                 <FormDialogComponent
+                  Form={AppInviteUsersForm}
+                  applicationId={currentApplicationDetails.id}
+                  canOutsideClickClose
+                  orgId={currentOrgId}
+                  title={currentApplicationDetails.name}
                   trigger={
                     <Button
-                      text={"Share"}
+                      className="t--application-share-btn header__application-share-btn"
                       icon={"share"}
                       size={Size.small}
-                      className="t--application-share-btn header__application-share-btn"
+                      text={"Share"}
                     />
                   }
-                  Form={AppInviteUsersForm}
-                  orgId={currentOrgId}
-                  applicationId={currentApplicationDetails.id}
-                  title={currentApplicationDetails.name}
-                  canOutsideClickClose={true}
                 />
                 {CTA && (
                   <HeaderRightItemContainer>{CTA}</HeaderRightItemContainer>
@@ -200,8 +200,6 @@ export const AppViewerHeader = (props: AppViewerHeaderProps) => {
             {currentUser && currentUser.username !== ANONYMOUS_USERNAME && (
               <HeaderRightItemContainer>
                 <ProfileDropdown
-                  name={currentUser.name}
-                  userName={currentUser?.username || ""}
                   hideThemeSwitch
                   modifiers={{
                     offset: {
@@ -209,19 +207,21 @@ export const AppViewerHeader = (props: AppViewerHeaderProps) => {
                       offset: `0, ${pages.length > 1 ? 35 : 0}`,
                     },
                   }}
+                  name={currentUser.name}
+                  userName={currentUser?.username || ""}
                 />
               </HeaderRightItemContainer>
             )}
           </HeaderSection>
         </HeaderRow>
         <PageTabsContainer
-          pages={pages}
           currentApplicationDetails={currentApplicationDetails}
+          pages={pages}
         />
       </HeaderWrapper>
     </ThemeProvider>
   );
-};
+}
 
 const mapStateToProps = (state: AppState): AppViewerHeaderProps => ({
   pages: getViewModePageList(state),
diff --git a/app/client/src/pages/AppViewer/viewer/PageTabs.tsx b/app/client/src/pages/AppViewer/viewer/PageTabs.tsx
index 5b0d6c4a02..7a5f3e827d 100644
--- a/app/client/src/pages/AppViewer/viewer/PageTabs.tsx
+++ b/app/client/src/pages/AppViewer/viewer/PageTabs.tsx
@@ -76,7 +76,7 @@ const CenterTabNameContainer = styled.div`
   align-items: center;
 `;
 
-const PageTabName: React.FunctionComponent<{ name: string }> = ({ name }) => {
+function PageTabName({ name }: { name: string }) {
   const tabNameRef = useRef<HTMLSpanElement>(null);
   const [ellipsisActive, setEllipsisActive] = useState(false);
   const tabNameText = (
@@ -96,19 +96,19 @@ const PageTabName: React.FunctionComponent<{ name: string }> = ({ name }) => {
 
   return ellipsisActive ? (
     <TooltipComponent
-      maxWidth="400px"
-      content={name}
-      position={Position.BOTTOM}
       boundary="viewport"
+      content={name}
+      maxWidth="400px"
+      position={Position.BOTTOM}
     >
       {tabNameText}
     </TooltipComponent>
   ) : (
     tabNameText
   );
-};
+}
 
-const PageTabContainer = ({
+function PageTabContainer({
   children,
   isTabActive,
   tabsScrollable,
@@ -118,7 +118,7 @@ const PageTabContainer = ({
   isTabActive: boolean;
   tabsScrollable: boolean;
   setShowScrollArrows: () => void;
-}) => {
+}) {
   const tabContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -129,7 +129,7 @@ const PageTabContainer = ({
   }, [isTabActive, tabsScrollable]);
 
   return <div ref={tabContainerRef}>{children}</div>;
-};
+}
 
 type Props = {
   currentApplicationDetails?: ApplicationPayload;
@@ -139,7 +139,7 @@ type Props = {
   setShowScrollArrows: () => void;
 };
 
-export const PageTabs = (props: Props) => {
+export function PageTabs(props: Props) {
   const { currentApplicationDetails, appPages } = props;
   const { pathname } = useLocation();
 
@@ -147,7 +147,6 @@ export const PageTabs = (props: Props) => {
     <TabsContainer ref={props.measuredTabsRef}>
       {appPages.map((page) => (
         <PageTabContainer
-          key={page.pageId}
           isTabActive={
             pathname ===
             getApplicationViewerPageURL(
@@ -155,16 +154,17 @@ export const PageTabs = (props: Props) => {
               page.pageId,
             )
           }
-          tabsScrollable={props.tabsScrollable}
+          key={page.pageId}
           setShowScrollArrows={props.setShowScrollArrows}
+          tabsScrollable={props.tabsScrollable}
         >
           <PageTab
+            activeClassName="is-active"
+            className="t--page-switch-tab"
             to={getApplicationViewerPageURL(
               currentApplicationDetails?.id,
               page.pageId,
             )}
-            activeClassName="is-active"
-            className="t--page-switch-tab"
           >
             <PageTabName name={page.pageName} />
           </PageTab>
@@ -172,6 +172,6 @@ export const PageTabs = (props: Props) => {
       ))}
     </TabsContainer>
   );
-};
+}
 
 export default PageTabs;
diff --git a/app/client/src/pages/AppViewer/viewer/PageTabsContainer.tsx b/app/client/src/pages/AppViewer/viewer/PageTabsContainer.tsx
index f3922758af..6caef173cb 100644
--- a/app/client/src/pages/AppViewer/viewer/PageTabsContainer.tsx
+++ b/app/client/src/pages/AppViewer/viewer/PageTabsContainer.tsx
@@ -46,7 +46,7 @@ type AppViewerHeaderProps = {
   pages: PageListPayload;
 };
 
-export const PageTabsContainer = (props: AppViewerHeaderProps) => {
+export function PageTabsContainer(props: AppViewerHeaderProps) {
   const { currentApplicationDetails, pages } = props;
 
   // Mark default page as first page
@@ -120,33 +120,33 @@ export const PageTabsContainer = (props: AppViewerHeaderProps) => {
     <Container>
       <ScrollBtnContainer
         onMouseDown={() => startScrolling(true)}
-        onMouseUp={stopScrolling}
         onMouseLeave={stopScrolling}
-        onTouchStart={() => startScrolling(true)}
+        onMouseUp={stopScrolling}
         onTouchEnd={stopScrolling}
+        onTouchStart={() => startScrolling(true)}
         visible={shouldShowLeftArrow}
       >
         <Icon name="chevron-left" />
       </ScrollBtnContainer>
       <PageTabs
-        measuredTabsRef={measuredTabsRef}
         appPages={appPages}
         currentApplicationDetails={currentApplicationDetails}
-        tabsScrollable={tabsScrollable}
+        measuredTabsRef={measuredTabsRef}
         setShowScrollArrows={setShowScrollArrows}
+        tabsScrollable={tabsScrollable}
       />
       <ScrollBtnContainer
         onMouseDown={() => startScrolling(false)}
-        onMouseUp={stopScrolling}
         onMouseLeave={stopScrolling}
-        onTouchStart={() => startScrolling(false)}
+        onMouseUp={stopScrolling}
         onTouchEnd={stopScrolling}
+        onTouchStart={() => startScrolling(false)}
         visible={shouldShowRightArrow}
       >
         <Icon name="chevron-right" />
       </ScrollBtnContainer>
     </Container>
   ) : null;
-};
+}
 
 export default PageTabsContainer;
diff --git a/app/client/src/pages/AppViewer/viewer/SideNav.tsx b/app/client/src/pages/AppViewer/viewer/SideNav.tsx
index 1791db07a3..bd0803fe17 100644
--- a/app/client/src/pages/AppViewer/viewer/SideNav.tsx
+++ b/app/client/src/pages/AppViewer/viewer/SideNav.tsx
@@ -68,7 +68,7 @@ const ToggleButton = styled(Button)<{
   }
 `;
 
-export const SideNav = (props: SideNavProps) => {
+export function SideNav(props: SideNavProps) {
   const { open, toggleCollapse } = props;
   const renderItems = (sideNavItems?: SideNavItemProps[]) => {
     let items = sideNavItems;
@@ -93,20 +93,20 @@ export const SideNav = (props: SideNavProps) => {
   };
 
   return (
-    <SideNavWrapper open={open} headeroffset={props.headeroffset}>
+    <SideNavWrapper headeroffset={props.headeroffset} open={open}>
       <ToggleButton
+        className="sidenav-toggle"
         headeroffset={props.headeroffset}
+        icon={open ? "double-chevron-left" : "menu"}
+        minimal
         onClick={() => {
           toggleCollapse(!open);
         }}
-        icon={open ? "double-chevron-left" : "menu"}
-        minimal
         open={open}
-        className="sidenav-toggle"
-      ></ToggleButton>
+      />
       <Menu large>{renderItems(props.items)}</Menu>
     </SideNavWrapper>
   );
-};
+}
 
 export default SideNav;
diff --git a/app/client/src/pages/AppViewer/viewer/SideNavItem.tsx b/app/client/src/pages/AppViewer/viewer/SideNavItem.tsx
index eae44406b3..d02a6bf5ae 100644
--- a/app/client/src/pages/AppViewer/viewer/SideNavItem.tsx
+++ b/app/client/src/pages/AppViewer/viewer/SideNavItem.tsx
@@ -22,7 +22,7 @@ export type SideNavItemProps = {
   showText?: boolean;
 };
 
-export const SideNavItem = (props: SideNavItemProps) => {
+export function SideNavItem(props: SideNavItemProps) {
   const match = useRouteMatch({
     path: props.path,
     exact: true,
@@ -37,7 +37,6 @@ export const SideNavItem = (props: SideNavItemProps) => {
   return (
     <NavLink
       exact
-      to={props.path}
       onClick={() => {
         AnalyticsUtil.logEvent("PAGE_SWITCH", {
           pageName: props.text,
@@ -45,19 +44,20 @@ export const SideNavItem = (props: SideNavItemProps) => {
           mode: "VIEW",
         });
       }}
+      to={props.path}
     >
       <MenuItem
+        active={!!match}
         className={
           props.loading
             ? Classes.SKELETON
             : `${Classes.FILL} t--page-nav-${props.text}`
         }
-        active={!!match}
-        text={menuItemContent}
         tagName="div"
+        text={menuItemContent}
       />
     </NavLink>
   );
-};
+}
 
 export default SideNavItem;
diff --git a/app/client/src/pages/AppViewer/viewer/getAppViewerHeaderCTA.tsx b/app/client/src/pages/AppViewer/viewer/getAppViewerHeaderCTA.tsx
index 4ff0adbf71..02e8bb78b8 100644
--- a/app/client/src/pages/AppViewer/viewer/getAppViewerHeaderCTA.tsx
+++ b/app/client/src/pages/AppViewer/viewer/getAppViewerHeaderCTA.tsx
@@ -46,8 +46,8 @@ const getAppViewerHeaderCTA = ({
         <ForkButton
           className="t--fork-app"
           href={forkUrl}
-          text={createMessage(FORK_APP)}
           icon="fork"
+          text={createMessage(FORK_APP)}
         />
       );
     } else {
diff --git a/app/client/src/pages/Applications/ApplicationCard.tsx b/app/client/src/pages/Applications/ApplicationCard.tsx
index d8e1072a25..8d5cc8a2a6 100644
--- a/app/client/src/pages/Applications/ApplicationCard.tsx
+++ b/app/client/src/pages/Applications/ApplicationCard.tsx
@@ -241,7 +241,7 @@ const ContextDropdownWrapper = styled.div`
   }
 `;
 
-export const ApplicationCard = (props: ApplicationCardProps) => {
+export function ApplicationCard(props: ApplicationCardProps) {
   const isFetchingApplications = useSelector(getIsFetchingApplications);
   const theme = useContext(ThemeContext);
   const isSavingName = useSelector(getIsSavingAppName);
@@ -361,7 +361,7 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
     props.application.defaultPageId,
   );
   const appNameText = (
-    <Text type={TextType.H3} cypressSelector="t--app-card-name">
+    <Text cypressSelector="t--app-card-name" type={TextType.H3}>
       {props.application.name}
     </Text>
   );
@@ -369,16 +369,7 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
   const ContextMenu = (
     <ContextDropdownWrapper>
       <Menu
-        position={Position.RIGHT_TOP}
-        target={
-          <MoreOptionsContainer>
-            <Icon name="context-menu" size={IconSize.XXXL} />
-          </MoreOptionsContainer>
-        }
         className="more"
-        onOpening={() => {
-          setIsMenuOpen(true);
-        }}
         onClosing={() => {
           setIsMenuOpen(false);
           setShowOverlay(false);
@@ -390,15 +381,22 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
               });
           }
         }}
+        onOpening={() => {
+          setIsMenuOpen(true);
+        }}
+        position={Position.RIGHT_TOP}
+        target={
+          <MoreOptionsContainer>
+            <Icon name="context-menu" size={IconSize.XXXL} />
+          </MoreOptionsContainer>
+        }
       >
         {hasEditPermission && (
           <EditableText
+            className="t--application-name"
             defaultValue={props.application.name}
             editInteractionKind={EditInteractionKind.SINGLE}
-            onTextChanged={(value: string) => {
-              setLastUpdatedValue(value);
-            }}
-            placeholder={"Edit text input"}
+            fill
             hideEditIcon={false}
             isInvalid={(value: string) => {
               if (!value) {
@@ -407,26 +405,28 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
                 return false;
               }
             }}
-            savingState={
-              isSavingName ? SavingState.STARTED : SavingState.NOT_STARTED
-            }
-            fill
             onBlur={(value: string) => {
               props.update &&
                 props.update(props.application.id, {
                   name: value,
                 });
             }}
-            className="t--application-name"
+            onTextChanged={(value: string) => {
+              setLastUpdatedValue(value);
+            }}
+            placeholder={"Edit text input"}
+            savingState={
+              isSavingName ? SavingState.STARTED : SavingState.NOT_STARTED
+            }
             underline
           />
         )}
         {hasEditPermission && (
           <>
             <ColorSelector
-              defaultValue={selectedColor}
               colorPalette={theme.colors.appCardColors}
-              fill={true}
+              defaultValue={selectedColor}
+              fill
               onSelect={updateColor}
             />
             <MenuDivider />
@@ -435,10 +435,10 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
         {hasEditPermission && (
           <>
             <IconSelector
-              fill={true}
-              selectedIcon={appIcon}
-              selectedColor={selectedColor}
+              fill
               onSelect={updateIcon}
+              selectedColor={selectedColor}
+              selectedIcon={appIcon}
             />
             <MenuDivider />
           </>
@@ -452,8 +452,9 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
 
   return (
     <NameWrapper
+      className="t--application-card"
+      hasReadPermission={hasReadPermission}
       isMenuOpen={isMenuOpen}
-      showOverlay={showOverlay}
       onMouseEnter={() => {
         !isFetchingApplications && setShowOverlay(true);
       }}
@@ -462,21 +463,20 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
         // Set overlay false on outside click.
         !isMenuOpen && setShowOverlay(false);
       }}
-      hasReadPermission={hasReadPermission}
-      className="t--application-card"
+      showOverlay={showOverlay}
     >
       <>
         <Wrapper
+          backgroundColor={selectedColor}
           className={
             isFetchingApplications
               ? Classes.SKELETON
               : "t--application-card-background"
           }
-          key={props.application.id}
           hasReadPermission={hasReadPermission}
-          backgroundColor={selectedColor}
+          key={props.application.id}
         >
-          <AppIcon size={Size.large} name={appIcon} />
+          <AppIcon name={appIcon} size={Size.large} />
           {/* <Initials>{initials}</Initials> */}
           {showOverlay && (
             <div className="overlay">
@@ -499,23 +499,23 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
 
                   {hasEditPermission && !isMenuOpen && (
                     <EditButton
-                      text="Edit"
-                      size={Size.medium}
-                      icon={"edit"}
                       className="t--application-edit-link"
                       fill
                       href={editApplicationURL}
+                      icon={"edit"}
+                      size={Size.medium}
+                      text="Edit"
                     />
                   )}
                   {!isMenuOpen && (
                     <Button
-                      text="LAUNCH"
-                      size={Size.medium}
                       category={Category.tertiary}
                       className="t--application-view-link"
-                      icon={"rocket"}
-                      href={viewApplicationURL}
                       fill
+                      href={viewApplicationURL}
+                      icon={"rocket"}
+                      size={Size.medium}
+                      text="LAUNCH"
                     />
                   )}
                 </Control>
@@ -524,12 +524,12 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
           )}
         </Wrapper>
         <AppNameWrapper
-          ref={appNameWrapperRef}
-          isFetching={isFetchingApplications}
           className={isFetchingApplications ? Classes.SKELETON : ""}
+          isFetching={isFetchingApplications}
+          ref={appNameWrapperRef}
         >
           {isEllipsisActive(appNameWrapperRef?.current) ? (
-            <TooltipComponent maxWidth="400px" content={props.application.name}>
+            <TooltipComponent content={props.application.name} maxWidth="400px">
               {appNameText}
             </TooltipComponent>
           ) : (
@@ -539,6 +539,6 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
       </>
     </NameWrapper>
   );
-};
+}
 
 export default ApplicationCard;
diff --git a/app/client/src/pages/Applications/ApplicationLoaders.tsx b/app/client/src/pages/Applications/ApplicationLoaders.tsx
index 967ce622b5..8abf8249d3 100644
--- a/app/client/src/pages/Applications/ApplicationLoaders.tsx
+++ b/app/client/src/pages/Applications/ApplicationLoaders.tsx
@@ -244,14 +244,14 @@ const ContentLoader = styled.div`
   height: 150px;
 `;
 
-export const AppLoader = () => {
+export function AppLoader() {
   return (
     <>
       <LoadingAnimation />
       <Container className="app-box">
-        <ContentLoader className={Classes.SKELETON}></ContentLoader>
-        <AppName className={Classes.SKELETON}></AppName>
+        <ContentLoader className={Classes.SKELETON} />
+        <AppName className={Classes.SKELETON} />
       </Container>
     </>
   );
-};
+}
diff --git a/app/client/src/pages/Applications/CreateApplicationForm.tsx b/app/client/src/pages/Applications/CreateApplicationForm.tsx
index b80aded19e..0b14274579 100644
--- a/app/client/src/pages/Applications/CreateApplicationForm.tsx
+++ b/app/client/src/pages/Applications/CreateApplicationForm.tsx
@@ -48,7 +48,7 @@ const validate = (values: CreateApplicationFormValues) => {
 
 // TODO(abhinav): abstract onCancel out.
 
-const CreateApplicationForm = (props: Props) => {
+function CreateApplicationForm(props: Props) {
   const { error, handleSubmit, pristine, submitting, invalid } = props;
   return (
     <Form onSubmit={handleSubmit(createApplicationFormSubmitHandler)}>
@@ -58,22 +58,22 @@ const CreateApplicationForm = (props: Props) => {
           name={CREATE_APPLICATION_FORM_NAME_FIELD}
           placeholder="Name"
         />
-        <Field type="hidden" name="orgId" component="input" />
+        <Field component="input" name="orgId" type="hidden" />
       </FormGroup>
       <FormFooter
+        canSubmit={!invalid}
+        data-cy="t--create-app-submit"
+        divider
         onCancel={props.onCancel}
         onSubmit={handleSubmit(createApplicationFormSubmitHandler)}
-        divider
-        canSubmit={!invalid}
-        submitOnEnter
-        data-cy="t--create-app-submit"
-        submitText="Submit"
         size="small"
+        submitOnEnter
+        submitText="Submit"
         submitting={submitting && !error}
       />
     </Form>
   );
-};
+}
 
 const mapStateToProps = (state: AppState, props: Props): any => {
   const orgId = props.orgId;
diff --git a/app/client/src/pages/Applications/ForkApplicationModal.tsx b/app/client/src/pages/Applications/ForkApplicationModal.tsx
index cebc666c67..498773d288 100644
--- a/app/client/src/pages/Applications/ForkApplicationModal.tsx
+++ b/app/client/src/pages/Applications/ForkApplicationModal.tsx
@@ -66,7 +66,7 @@ const SpinnerWrapper = styled.div`
   justify-content: center;
 `;
 
-const ForkApplicationModal = (props: any) => {
+function ForkApplicationModal(props: any) {
   const [organizationId, selectOrganizationId] = useState("");
   const dispatch = useDispatch();
   useEffect(() => {
@@ -116,18 +116,18 @@ const ForkApplicationModal = (props: any) => {
 
   return (
     <StyledDialog
-      title={"Choose where to fork the app"}
-      maxHeight={"540px"}
+      canOutsideClickClose
       className={"fork-modal"}
-      canOutsideClickClose={true}
       isOpen={showForkModal}
+      maxHeight={"540px"}
+      title={"Choose where to fork the app"}
       trigger={
         <TriggerButton
-          text={createMessage(FORK_APP)}
-          icon="fork"
-          size={Size.small}
           className="t--fork-app"
+          icon="fork"
           onClick={() => dispatch(getAllApplications())}
+          size={Size.small}
+          text={createMessage(FORK_APP)}
         />
       }
     >
@@ -143,22 +143,22 @@ const ForkApplicationModal = (props: any) => {
             className={"radio-group"}
             columns={1}
             defaultValue={organizationList[0].value}
-            options={organizationList}
             onSelect={(value) => selectOrganizationId(value)}
+            options={organizationList}
           />
         </OrganizationList>
       )}
       <ButtonWrapper>
         <ForkButton
-          isLoading={forkingApplication}
           disabled={!organizationId}
-          text={"FORK"}
+          isLoading={forkingApplication}
           onClick={forkApplication}
           size={Size.large}
+          text={"FORK"}
         />
       </ButtonWrapper>
     </StyledDialog>
   );
-};
+}
 
 export default ForkApplicationModal;
diff --git a/app/client/src/pages/Applications/ProductUpdatesModal/ReleaseComponent.tsx b/app/client/src/pages/Applications/ProductUpdatesModal/ReleaseComponent.tsx
index ee838ca8b4..11cecd4ea3 100644
--- a/app/client/src/pages/Applications/ProductUpdatesModal/ReleaseComponent.tsx
+++ b/app/client/src/pages/Applications/ProductUpdatesModal/ReleaseComponent.tsx
@@ -113,20 +113,20 @@ const ReadMore = withTheme(
             : "read less"}
         </div>
         <Icon
+          fillColor={theme.colors.text.normal}
           name={
             currentState === ReleaseComponentViewState.collapsed
               ? "view-all"
               : "view-less"
           }
           size={IconSize.XS}
-          fillColor={theme.colors.text.normal}
         />
       </StyledReadMore>
     </ReadMoreContainer>
   ),
 );
 
-const ReleaseComponent = ({ release }: ReleaseProps) => {
+function ReleaseComponent({ release }: ReleaseProps) {
   const { name, publishedAt, descriptionHtml } = release;
   const [isCollapsed, setCollapsed] = useState(true);
   const [shouldShowReadMore, setShouldShowReadMore] = useState(false);
@@ -159,19 +159,19 @@ const ReleaseComponent = ({ release }: ReleaseProps) => {
       <StyledTitle>{name}</StyledTitle>
       <StyledDate>{moment(publishedAt).format("Do MMMM, YYYY")}</StyledDate>
       <StyledContent
-        ref={contentRef}
         dangerouslySetInnerHTML={{ __html: descriptionHtml }}
         maxHeight={getHeight()}
+        ref={contentRef}
       />
       {shouldShowReadMore && (
         <ReadMore
-          onClick={toggleCollapsedState}
           currentState={getReadMoreState()}
+          onClick={toggleCollapsedState}
         />
       )}
       <StyledSeparator />
     </StyledContainer>
   ) : null;
-};
+}
 
 export default ReleaseComponent;
diff --git a/app/client/src/pages/Applications/ProductUpdatesModal/UpdatesButton.tsx b/app/client/src/pages/Applications/ProductUpdatesModal/UpdatesButton.tsx
index a278d8d80e..fbba2f472a 100644
--- a/app/client/src/pages/Applications/ProductUpdatesModal/UpdatesButton.tsx
+++ b/app/client/src/pages/Applications/ProductUpdatesModal/UpdatesButton.tsx
@@ -49,20 +49,24 @@ const UpdatesButtonTextContainer = styled.div`
 
 const UpdatesIcon = withTheme(({ theme }) => (
   <HelpIcons.UPDATES
+    color={theme.colors.floatingBtn.iconColor}
     height={12}
     width={13}
-    color={theme.colors.floatingBtn.iconColor}
   />
 ));
 
-const UpdatesButton = ({ newReleasesCount }: { newReleasesCount: string }) => (
-  <StyledUpdatesButton data-cy="t--product-updates-btn">
-    <div style={{ display: "flex" }}>
-      <UpdatesIcon />
-      <UpdatesButtonTextContainer>What&apos;s New?</UpdatesButtonTextContainer>
-    </div>
-    {newReleasesCount && <StyledTag>{newReleasesCount}</StyledTag>}
-  </StyledUpdatesButton>
-);
+function UpdatesButton({ newReleasesCount }: { newReleasesCount: string }) {
+  return (
+    <StyledUpdatesButton data-cy="t--product-updates-btn">
+      <div style={{ display: "flex" }}>
+        <UpdatesIcon />
+        <UpdatesButtonTextContainer>
+          What&apos;s New?
+        </UpdatesButtonTextContainer>
+      </div>
+      {newReleasesCount && <StyledTag>{newReleasesCount}</StyledTag>}
+    </StyledUpdatesButton>
+  );
+}
 
 export default UpdatesButton;
diff --git a/app/client/src/pages/Applications/ProductUpdatesModal/index.tsx b/app/client/src/pages/Applications/ProductUpdatesModal/index.tsx
index 11ef705207..256e104863 100644
--- a/app/client/src/pages/Applications/ProductUpdatesModal/index.tsx
+++ b/app/client/src/pages/Applications/ProductUpdatesModal/index.tsx
@@ -69,19 +69,19 @@ const Header = withTheme(
         <Heading>Product Updates</Heading>
         <HeaderRight>
           <ViewInGithubLink
-            target="_blank"
             href="https://github.com/appsmithorg/appsmith/releases"
+            target="_blank"
           >
             View on Github
           </ViewInGithubLink>
           <CloseIconContainer
-            onClick={onClose}
             data-cy="t--product-updates-close-btn"
+            onClick={onClose}
           >
             <CloseIcon
+              color={theme.colors.text.normal as Color}
               height={20}
               width={20}
-              color={theme.colors.text.normal as Color}
             />
           </CloseIconContainer>
         </HeaderRight>
@@ -93,7 +93,7 @@ const Header = withTheme(
   ),
 );
 
-const ProductUpdatesModal = () => {
+function ProductUpdatesModal() {
   const { releaseItems, newReleasesCount } = useSelector(
     (state: AppState) => state.ui.releases,
   );
@@ -109,22 +109,22 @@ const ProductUpdatesModal = () => {
 
   return Array.isArray(releaseItems) && releaseItems.length > 0 ? (
     <Dialog
-      trigger={<UpdatesButton newReleasesCount={newReleasesCount} />}
-      width={"580px"}
-      maxHeight={"80vh"}
-      triggerZIndex={Layers.productUpdates}
-      showHeaderUnderline
-      onOpening={onOpening}
-      isOpen={isOpen}
-      getHeader={() => <Header onClose={() => setIsOpen(false)} />}
-      canOutsideClickClose
       canEscapeKeyClose
+      canOutsideClickClose
+      getHeader={() => <Header onClose={() => setIsOpen(false)} />}
+      isOpen={isOpen}
+      maxHeight={"80vh"}
+      onOpening={onOpening}
+      showHeaderUnderline
+      trigger={<UpdatesButton newReleasesCount={newReleasesCount} />}
+      triggerZIndex={Layers.productUpdates}
+      width={"580px"}
     >
       {releaseItems.map((release: Release, index: number) => (
-        <ReleaseComponent release={release} key={index} />
+        <ReleaseComponent key={index} release={release} />
       ))}
     </Dialog>
   ) : null;
-};
+}
 
 export default ProductUpdatesModal;
diff --git a/app/client/src/pages/Applications/index.tsx b/app/client/src/pages/Applications/index.tsx
index b2fef090e5..83a8fdfad3 100644
--- a/app/client/src/pages/Applications/index.tsx
+++ b/app/client/src/pages/Applications/index.tsx
@@ -255,10 +255,10 @@ function Item(props: {
     <ItemWrapper>
       {props.icon && <StyledIcon />}
       <Text
-        type={props.textType}
         className={
           props.isFetchingApplications ? BlueprintClasses.SKELETON : ""
         }
+        type={props.textType}
       >
         {" "}
         {props.label}
@@ -275,9 +275,9 @@ function LeftPaneSection(props: {
     <>
       {/* <MenuItem text={props.heading}/> */}
       <Item
+        isFetchingApplications={props.isFetchingApplications}
         label={props.heading}
         textType={TextType.H6}
-        isFetchingApplications={props.isFetchingApplications}
       />
       {props.children}
     </>
@@ -360,7 +360,7 @@ const ApplicationAddCardWrapper = styled(Card)`
   }}
 `;
 
-const OrgMenuItem = ({ org, isFetchingApplications, selected }: any) => {
+function OrgMenuItem({ org, isFetchingApplications, selected }: any) {
   const menuRef = useRef<HTMLAnchorElement>(null);
   useEffect(() => {
     if (selected) {
@@ -371,17 +371,17 @@ const OrgMenuItem = ({ org, isFetchingApplications, selected }: any) => {
 
   return (
     <MenuItem
-      ref={menuRef}
       className={isFetchingApplications ? BlueprintClasses.SKELETON : ""}
+      ellipsize={20}
+      href={`${window.location.pathname}#${org.organization.slug}`}
       icon="workspace"
       key={org.organization.slug}
-      href={`${window.location.pathname}#${org.organization.slug}`}
-      text={org.organization.name}
-      ellipsize={20}
+      ref={menuRef}
       selected={selected}
+      text={org.organization.name}
     />
   );
-};
+}
 
 function LeftPane() {
   const fetchedUserOrgs = useSelector(getUserApplicationsOrgs);
@@ -390,10 +390,10 @@ function LeftPane() {
     <NewWorkspaceWrapper>
       <MenuItem
         className={isFetchingApplications ? BlueprintClasses.SKELETON : ""}
+        data-cy="create-organisation-link"
+        icon="plus"
         key={"new-workspace"}
         text={"Create Organization"}
-        icon="plus"
-        data-cy="create-organisation-link"
       />
     </NewWorkspaceWrapper>
   );
@@ -417,33 +417,33 @@ function LeftPane() {
       >
         <WorkpsacesNavigator data-cy="t--left-panel">
           <FormDialogComponent
-            trigger={NewWorkspaceTrigger}
             Form={CreateOrganizationForm}
             title={CREATE_ORGANIZATION_FORM_NAME}
+            trigger={NewWorkspaceTrigger}
           />
           {userOrgs &&
             userOrgs.map((org: any) => (
               <OrgMenuItem
+                isFetchingApplications={isFetchingApplications}
                 key={org.organization.slug}
                 org={org}
-                isFetchingApplications={isFetchingApplications}
                 selected={urlHash === org.organization.slug}
               />
             ))}
           <div style={{ marginTop: 12 }}>
             <Item
+              isFetchingApplications={isFetchingApplications}
               label={"GETTING STARTED"}
               textType={TextType.H6}
-              isFetchingApplications={isFetchingApplications}
-            ></Item>
+            />
           </div>
           <MenuItem
             className={isFetchingApplications ? BlueprintClasses.SKELETON : ""}
             icon="book"
-            text={"Documentation"}
             onSelect={() => {
               window.open("https://docs.appsmith.com/", "_blank");
             }}
+            text={"Documentation"}
           />
           <MenuItem
             className={
@@ -452,12 +452,12 @@ function LeftPane() {
                 : "t--welcome-tour"
             }
             icon="shine"
-            text={"Welcome Tour"}
             onSelect={() => {
               AnalyticsUtil.logEvent("WELCOME_TOUR_CLICK");
 
               initiateOnboarding();
             }}
+            text={"Welcome Tour"}
           />
         </WorkpsacesNavigator>
       </LeftPaneSection>
@@ -505,7 +505,7 @@ const NoSearchResultImg = styled.img`
   margin: 1em;
 `;
 
-const ApplicationsSection = (props: any) => {
+function ApplicationsSection(props: any) {
   const dispatch = useDispatch();
   const theme = useContext(ThemeContext);
   const isSavingOrgInfo = useSelector(getIsSavingOrgInfo);
@@ -546,23 +546,23 @@ const ApplicationsSection = (props: any) => {
     );
   };
 
-  const OrgMenuTarget = (props: {
+  function OrgMenuTarget(props: {
     orgName: string;
     disabled?: boolean;
     orgSlug: string;
-  }) => {
+  }) {
     const { orgName, disabled, orgSlug } = props;
 
     return (
-      <OrgNameWrapper disabled={disabled} className="t--org-name">
+      <OrgNameWrapper className="t--org-name" disabled={disabled}>
         <StyledAnchor id={orgSlug} />
         <OrgNameHolder
-          type={TextType.H1}
           className={isFetchingApplications ? BlueprintClasses.SKELETON : ""}
+          type={TextType.H1}
         >
           <OrgNameElement
-            type={TextType.H1}
             className={isFetchingApplications ? BlueprintClasses.SKELETON : ""}
+            type={TextType.H1}
           >
             {orgName}
           </OrgNameElement>
@@ -570,7 +570,7 @@ const ApplicationsSection = (props: any) => {
         </OrgNameHolder>
       </OrgNameWrapper>
     );
-  };
+  }
 
   const createNewApplication = (applicationName: string, orgId: string) => {
     const color = getRandomPaletteColor(theme.colors.appCardColors);
@@ -607,7 +607,7 @@ const ApplicationsSection = (props: any) => {
         <CreateNewLabel type={TextType.H4}>
           Whale! Whale! this name doesn&apos;t ring a bell!
         </CreateNewLabel>
-        <NoSearchResultImg src={NoSearchImage} alt="No result found" />
+        <NoSearchResultImg alt="No result found" src={NoSearchImage} />
       </CenteredWrapper>
     );
   } else {
@@ -623,70 +623,70 @@ const ApplicationsSection = (props: any) => {
             <OrgDropDown>
               {(currentUser || isFetchingApplications) && (
                 <Menu
+                  className="t--org-name"
+                  disabled={!hasManageOrgPermissions || isFetchingApplications}
+                  position={Position.BOTTOM_RIGHT}
                   target={OrgMenuTarget({
                     orgName: organization.name,
                     disabled: !hasManageOrgPermissions,
                     orgSlug: organization.slug,
                   })}
-                  position={Position.BOTTOM_RIGHT}
-                  className="t--org-name"
-                  disabled={!hasManageOrgPermissions || isFetchingApplications}
                 >
                   <OrgRename
                     defaultValue={organization.name}
                     editInteractionKind={EditInteractionKind.SINGLE}
-                    placeholder="Workspace name"
+                    fill
                     hideEditIcon={false}
+                    isEditingDefault={false}
                     isInvalid={(value: string) => {
                       return notEmptyValidator(value).message;
                     }}
+                    onBlur={(value: string) => {
+                      OrgNameChange(value, organization.id);
+                    }}
+                    placeholder="Workspace name"
                     savingState={
                       isSavingOrgInfo
                         ? SavingState.STARTED
                         : SavingState.NOT_STARTED
                     }
-                    isEditingDefault={false}
-                    fill={true}
-                    onBlur={(value: string) => {
-                      OrgNameChange(value, organization.id);
-                    }}
                     underline
                   />
                   <MenuItem
-                    icon="general"
-                    text="Organization Settings"
                     cypressSelector="t--org-setting"
+                    icon="general"
                     onSelect={() =>
                       getOnSelectAction(DropdownOnSelectActions.REDIRECT, {
                         path: `/org/${organization.id}/settings/general`,
                       })
                     }
+                    text="Organization Settings"
                   />
                   <MenuItem
-                    text="Share"
                     icon="share"
                     onSelect={() => setSelectedOrgId(organization.id)}
+                    text="Share"
                   />
                   <MenuItem
                     icon="user"
-                    text="Members"
                     onSelect={() =>
                       getOnSelectAction(DropdownOnSelectActions.REDIRECT, {
                         path: `/org/${organization.id}/settings/members`,
                       })
                     }
+                    text="Members"
                   />
                 </Menu>
               )}
 
               {hasManageOrgPermissions && (
                 <StyledDialog
-                  canOutsideClickClose={false}
                   canEscapeKeyClose={false}
-                  title={`Invite Users to ${organization.name}`}
-                  onClose={() => setSelectedOrgId("")}
+                  canOutsideClickClose={false}
                   isOpen={selectedOrgId === organization.id}
+                  onClose={() => setSelectedOrgId("")}
                   setMaxWidth
+                  title={`Invite Users to ${organization.name}`}
                 >
                   <div className={BlueprintClasses.DIALOG_BODY}>
                     <Form orgId={organization.id} />
@@ -703,8 +703,8 @@ const ApplicationsSection = (props: any) => {
                       {userRoles.slice(0, 5).map((el: UserRoles) => (
                         <ProfileImage
                           className="org-share-user-icons"
-                          userName={el.name ? el.name : el.username}
                           key={el.username}
+                          userName={el.name ? el.name : el.username}
                         />
                       ))}
                       {userRoles.length > 5 ? (
@@ -715,17 +715,17 @@ const ApplicationsSection = (props: any) => {
                       ) : null}
                     </UserImageContainer>
                     <FormDialogComponent
-                      trigger={
-                        <Button
-                          text={"Share"}
-                          icon={"share"}
-                          size={Size.small}
-                        />
-                      }
-                      canOutsideClickClose={true}
                       Form={OrgInviteUsersForm}
+                      canOutsideClickClose
                       orgId={organization.id}
                       title={`Invite Users to ${organization.name}`}
+                      trigger={
+                        <Button
+                          icon={"share"}
+                          size={Size.small}
+                          text={"Share"}
+                        />
+                      }
                     />
                   </OrgShareUsers>
                 )}
@@ -758,19 +758,19 @@ const ApplicationsSection = (props: any) => {
                       creatingApplicationMap[organization.id] ? (
                         <Spinner size={IconSize.XXXL} />
                       ) : (
-                        <Fragment>
+                        <>
                           <Icon
                             className="t--create-app-popup"
                             name={"plus"}
                             size={IconSize.LARGE}
                           />
                           <CreateNewLabel
-                            type={TextType.H4}
                             className="createnew"
+                            type={TextType.H4}
                           >
                             Create New
                           </CreateNewLabel>
-                        </Fragment>
+                        </>
                       )}
                     </ApplicationAddCardWrapper>
                   </PaddingWrapper>
@@ -779,11 +779,11 @@ const ApplicationsSection = (props: any) => {
                 return (
                   <PaddingWrapper key={application.id}>
                     <ApplicationCard
-                      key={application.id}
                       application={application}
                       delete={deleteApplication}
-                      update={updateApplicationDispatch}
                       duplicate={duplicateApplicationDispatch}
+                      key={application.id}
+                      update={updateApplicationDispatch}
                     />
                   </PaddingWrapper>
                 );
@@ -803,7 +803,7 @@ const ApplicationsSection = (props: any) => {
       <WelcomeHelper />
     </ApplicationContainer>
   );
-};
+}
 type ApplicationProps = {
   applicationList: ApplicationPayload[];
   createApplication: (appName: string) => void;
diff --git a/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx b/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
index be917f4e2f..72bb473d1b 100644
--- a/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
+++ b/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
@@ -467,7 +467,7 @@ class ApiHomeScreen extends React.Component<Props, ApiHomeScreenState> {
     }));
 
     const ApiHomepageTopSection = (
-      <React.Fragment>
+      <>
         {enableRapidAPI && (
           <SearchContainer>
             <SearchBar
@@ -491,9 +491,9 @@ class ApiHomeScreen extends React.Component<Props, ApiHomeScreenState> {
             {showSearchResults && (
               <div className="searchResultsContainer">
                 <Icon
+                  className="searchCloseBtn"
                   icon="cross"
                   iconSize={20}
-                  className="searchCloseBtn"
                   onClick={() => {
                     this.setState({ showSearchResults: false });
                   }}
@@ -519,9 +519,9 @@ class ApiHomeScreen extends React.Component<Props, ApiHomeScreenState> {
                           >
                             {providerSearchResult.imageUrl ? (
                               <img
-                                src={providerSearchResult.imageUrl}
-                                className="providerSearchResultImage"
                                 alt="img"
+                                className="providerSearchResultImage"
+                                src={providerSearchResult.imageUrl}
                               />
                             ) : (
                               <div
@@ -567,11 +567,11 @@ class ApiHomeScreen extends React.Component<Props, ApiHomeScreenState> {
           <p className="sectionHeadings">{"Import API"}</p>
           <ApiCard>
             <Card
-              interactive={false}
               className="eachCard t--createBlankApiCard"
+              interactive={false}
               onClick={this.handleCreateNew}
             >
-              <Icon icon="plus" iconSize={20} className="createIcon" />
+              <Icon className="createIcon" icon="plus" iconSize={20} />
               <p className="textBtn">Create new</p>
             </Card>
 
@@ -588,11 +588,11 @@ class ApiHomeScreen extends React.Component<Props, ApiHomeScreenState> {
               }}
               to={curlImportURL}
             >
-              <Card interactive={false} className="eachCard">
+              <Card className="eachCard" interactive={false}>
                 <img
-                  src={CurlLogo}
-                  className="curlImage t--curlImage"
                   alt="CURL"
+                  className="curlImage t--curlImage"
+                  src={CurlLogo}
                 />
                 <p className="textBtn">CURL</p>
               </Card>
@@ -610,13 +610,13 @@ class ApiHomeScreen extends React.Component<Props, ApiHomeScreenState> {
                     location.search
                   }
                 >
-                  <Card interactive={false} className="eachCard">
+                  <Card className="eachCard" interactive={false}>
                     <img
-                      src={p.iconLocation}
+                      alt={p.name}
                       className={
                         "saasImage t--saas-" + p.packageName + "-image"
                       }
-                      alt={p.name}
+                      src={p.iconLocation}
                     />
                     <p className="textBtn">{p.name}</p>
                   </Card>
@@ -654,144 +654,132 @@ class ApiHomeScreen extends React.Component<Props, ApiHomeScreenState> {
             </NoCollections>
           )}
         </StyledContainer> */}
-      </React.Fragment>
+      </>
     );
 
     return (
-      <React.Fragment>
-        <ApiHomePage
-          style={{ overflow: showSearchResults ? "hidden" : "auto" }}
-          className="t--apiHomePage"
-        >
-          <CloseEditor />
-          {isSwitchingCategory || !enableRapidAPI ? (
-            <>
-              {ApiHomepageTopSection}
-              {enableRapidAPI && isSwitchingCategory && (
-                <PageLoadingContainer>
+      <ApiHomePage
+        className="t--apiHomePage"
+        style={{ overflow: showSearchResults ? "hidden" : "auto" }}
+      >
+        <CloseEditor />
+        {isSwitchingCategory || !enableRapidAPI ? (
+          <>
+            {ApiHomepageTopSection}
+            {enableRapidAPI && isSwitchingCategory && (
+              <PageLoadingContainer>
+                <Spinner size={30} />
+              </PageLoadingContainer>
+            )}
+          </>
+        ) : (
+          <InfiniteScroll
+            hasMore={providers.length < providersTotal}
+            initialLoad={false}
+            loadMore={this.handleFetchMoreProviders.bind(this)}
+            loader={
+              <LoadingContainer>
+                <Spinner size={30} />
+              </LoadingContainer>
+            }
+            pageStart={0}
+            useWindow={false}
+          >
+            {ApiHomepageTopSection}
+            {/* Marketplace APIs section start */}
+            <StyledContainer>
+              <div>
+                <div style={{ float: "left" }}>
+                  <p className="sectionHeadings">{"Marketplace APIs"}</p>
+                </div>
+                <div>
+                  <DropdownSelect>
+                    <DropdownField
+                      name="category"
+                      options={PROVIDER_CATEGORIES_OPTIONS}
+                      placeholder="All APIs"
+                      width={232}
+                    />
+                  </DropdownSelect>
+                </div>
+              </div>
+
+              <br />
+              <br />
+
+              {isSwitchingCategory ? (
+                <LoadingContainer>
                   <Spinner size={30} />
-                </PageLoadingContainer>
+                </LoadingContainer>
+              ) : fetchProvidersError ? (
+                <div>
+                  <p className="fontSize16">No providers found.</p>
+                </div>
+              ) : (
+                <div>
+                  <ApiCard>
+                    {providers.map((provider, index) => (
+                      <CardList
+                        key={index}
+                        onClick={() => {
+                          AnalyticsUtil.logEvent("3P_PROVIDER_CLICK", {
+                            providerName: provider.name,
+                          });
+                          history.push(
+                            getProviderTemplatesURL(
+                              applicationId,
+                              pageId,
+                              provider.id + `/?importTo=${destinationPageId}`,
+                            ),
+                          );
+                        }}
+                      >
+                        <Card
+                          className="eachProviderCard t--eachProviderCard"
+                          interactive={false}
+                        >
+                          {provider.imageUrl ? (
+                            <img
+                              alt="Provider"
+                              className="apiImage"
+                              src={provider.imageUrl}
+                            />
+                          ) : (
+                            <div
+                              className="providerInitials"
+                              style={{
+                                backgroundColor: getInitialsAndColorCode(
+                                  provider.name,
+                                  this.props.colorPalette,
+                                )[1],
+                              }}
+                            >
+                              <span>
+                                {
+                                  getInitialsAndColorCode(
+                                    provider.name,
+                                    this.props.colorPalette,
+                                  )[0]
+                                }
+                              </span>
+                            </div>
+                          )}
+                          {provider.name && (
+                            <p className="textBtn" title={provider.name}>
+                              {provider.name}
+                            </p>
+                          )}
+                        </Card>
+                      </CardList>
+                    ))}
+                  </ApiCard>
+                </div>
               )}
-            </>
-          ) : (
-            <>
-              <InfiniteScroll
-                pageStart={0}
-                initialLoad={false}
-                loadMore={this.handleFetchMoreProviders.bind(this)}
-                useWindow={false}
-                hasMore={providers.length < providersTotal}
-                loader={
-                  <LoadingContainer>
-                    <Spinner size={30} />
-                  </LoadingContainer>
-                }
-              >
-                {ApiHomepageTopSection}
-                {/* Marketplace APIs section start */}
-                <StyledContainer>
-                  <div>
-                    <div style={{ float: "left" }}>
-                      <p className="sectionHeadings">{"Marketplace APIs"}</p>
-                    </div>
-                    <div>
-                      <DropdownSelect>
-                        <DropdownField
-                          placeholder="All APIs"
-                          width={232}
-                          name="category"
-                          options={PROVIDER_CATEGORIES_OPTIONS}
-                        />
-                      </DropdownSelect>
-                    </div>
-                  </div>
-
-                  <br />
-                  <br />
-
-                  {isSwitchingCategory ? (
-                    <LoadingContainer>
-                      <Spinner size={30} />
-                    </LoadingContainer>
-                  ) : (
-                    <>
-                      {fetchProvidersError ? (
-                        <div>
-                          <p className="fontSize16">No providers found.</p>
-                        </div>
-                      ) : (
-                        <div>
-                          <ApiCard>
-                            {providers.map((provider, index) => (
-                              <CardList
-                                key={index}
-                                onClick={() => {
-                                  AnalyticsUtil.logEvent("3P_PROVIDER_CLICK", {
-                                    providerName: provider.name,
-                                  });
-                                  history.push(
-                                    getProviderTemplatesURL(
-                                      applicationId,
-                                      pageId,
-                                      provider.id +
-                                        `/?importTo=${destinationPageId}`,
-                                    ),
-                                  );
-                                }}
-                              >
-                                <Card
-                                  interactive={false}
-                                  className="eachProviderCard t--eachProviderCard"
-                                >
-                                  {provider.imageUrl ? (
-                                    <img
-                                      src={provider.imageUrl}
-                                      className="apiImage"
-                                      alt="Provider"
-                                    />
-                                  ) : (
-                                    <div
-                                      className="providerInitials"
-                                      style={{
-                                        backgroundColor: getInitialsAndColorCode(
-                                          provider.name,
-                                          this.props.colorPalette,
-                                        )[1],
-                                      }}
-                                    >
-                                      <span>
-                                        {
-                                          getInitialsAndColorCode(
-                                            provider.name,
-                                            this.props.colorPalette,
-                                          )[0]
-                                        }
-                                      </span>
-                                    </div>
-                                  )}
-                                  {provider.name && (
-                                    <p
-                                      className="textBtn"
-                                      title={provider.name}
-                                    >
-                                      {provider.name}
-                                    </p>
-                                  )}
-                                </Card>
-                              </CardList>
-                            ))}
-                          </ApiCard>
-                        </div>
-                      )}
-                    </>
-                  )}
-                </StyledContainer>
-                {/* Marketplace APIs section end */}
-              </InfiniteScroll>
-            </>
-          )}
-        </ApiHomePage>
-      </React.Fragment>
+            </StyledContainer>
+            {/* Marketplace APIs section end */}
+          </InfiniteScroll>
+        )}
+      </ApiHomePage>
     );
   }
 }
diff --git a/app/client/src/pages/Editor/APIEditor/CurlImportForm.tsx b/app/client/src/pages/Editor/APIEditor/CurlImportForm.tsx
index be0ae5ebb8..e3d8c8b84e 100644
--- a/app/client/src/pages/Editor/APIEditor/CurlImportForm.tsx
+++ b/app/client/src/pages/Editor/APIEditor/CurlImportForm.tsx
@@ -117,10 +117,10 @@ class CurlImportForm extends React.Component<Props> {
   render() {
     const { handleSubmit, history, isImportingCurl } = this.props;
     return (
-      <React.Fragment>
+      <>
         <Header>
           <p className="header">
-            <img src={CurlLogo} className="curlImage" alt="CURL"></img>
+            <img alt="CURL" className="curlImage" src={CurlLogo} />
             Import from CURL
           </p>
           <hr className="divider" />
@@ -128,9 +128,9 @@ class CurlImportForm extends React.Component<Props> {
         <Form onSubmit={handleSubmit(curlImportSubmitHandler)}>
           <CurlImport>
             <Icon
+              className="backBtn"
               icon="chevron-left"
               iconSize={16}
-              className="backBtn"
               onClick={() => history.goBack()}
             />
             <span className="backBtnText" onClick={() => history.goBack()}>
@@ -145,29 +145,29 @@ class CurlImportForm extends React.Component<Props> {
               </CurlLabel>
               <CurlImportFormContainer>
                 <Field
-                  name="curl"
-                  component="textarea"
                   className="textAreaStyles"
+                  component="textarea"
+                  name="curl"
                 />
-                <Field type="hidden" name="pageId" component="input" />
-                <Field type="hidden" name="name" component="input" />
+                <Field component="input" name="pageId" type="hidden" />
+                <Field component="input" name="name" type="hidden" />
               </CurlImportFormContainer>
             </CurlContainer>
           </CurlImport>
           <DividerLine />
           <CurlImportFormContainer>
             <Button
-              text="Import"
+              className="importBtn t--importBtn"
+              filled
+              intent="primary"
               loading={isImportingCurl}
               onClick={handleSubmit(curlImportSubmitHandler)}
-              intent="primary"
-              filled
               size="small"
-              className="importBtn t--importBtn"
+              text="Import"
             />
           </CurlImportFormContainer>
         </Form>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/app/client/src/pages/Editor/APIEditor/Form.tsx b/app/client/src/pages/Editor/APIEditor/Form.tsx
index 59a78892a2..e0a93284bb 100644
--- a/app/client/src/pages/Editor/APIEditor/Form.tsx
+++ b/app/client/src/pages/Editor/APIEditor/Form.tsx
@@ -195,7 +195,7 @@ export const NameWrapper = styled.div`
   }
 `;
 
-const ApiEditorForm: React.FC<Props> = (props: Props) => {
+function ApiEditorForm(props: Props) {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [
     apiBindHelpSectionVisible,
@@ -246,39 +246,39 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
           </NameWrapper>
           <ActionButtons className="t--formActionButtons">
             <MoreActionsMenu
+              className="t--more-action-menu"
               id={currentActionConfig ? currentActionConfig.id : ""}
               name={currentActionConfig ? currentActionConfig.name : ""}
-              className="t--more-action-menu"
               pageId={pageId}
             />
             <Button
-              text="Run"
-              tag="button"
-              size={Size.medium}
-              type="button"
+              className="t--apiFormRunBtn"
+              isLoading={isRunning}
               onClick={() => {
                 onRunClick();
               }}
-              isLoading={isRunning}
-              className="t--apiFormRunBtn"
+              size={Size.medium}
+              tag="button"
+              text="Run"
+              type="button"
             />
           </ActionButtons>
         </FormRow>
         <FormRow className="api-info-row">
           <RequestDropdownField
-            placeholder="Method"
-            name="actionConfiguration.httpMethod"
             className="t--apiFormHttpMethod"
-            options={HTTP_METHOD_OPTIONS}
-            width={"100px"}
-            optionWidth={"100px"}
             height={"35px"}
+            name="actionConfiguration.httpMethod"
+            optionWidth={"100px"}
+            options={HTTP_METHOD_OPTIONS}
+            placeholder="Method"
+            width={"100px"}
           />
           <DatasourceWrapper className="t--dataSourceField">
             <EmbeddedDatasourcePathField
               name="actionConfiguration.path"
-              pluginId={pluginId}
               placeholder="https://mock-api.appsmith.com/users"
+              pluginId={pluginId}
               theme={theme}
             />
           </DatasourceWrapper>
@@ -288,12 +288,14 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
         {hintMessages && (
           <HelpSection>
             {hintMessages.map((msg, i) => (
-              <Callout text={msg} variant={Variant.warning} fill key={i} />
+              <Callout fill key={i} text={msg} variant={Variant.warning} />
             ))}
           </HelpSection>
         )}
         <TabbedViewContainer>
           <TabComponent
+            onSelect={setSelectedIndex}
+            selectedIndex={selectedIndex}
             tabs={[
               {
                 key: "headers",
@@ -304,34 +306,34 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
                     {apiBindHelpSectionVisible && (
                       <HelpSection>
                         <Callout
-                          text={createMessage(WIDGET_BIND_HELP)}
+                          closeButton
+                          fill
                           label={
                             <CalloutContent>
                               <Link
-                                onClick={handleClickLearnHow}
                                 className="t--learn-how-apis-link"
+                                onClick={handleClickLearnHow}
                               >
-                                <Text type={TextType.H6} case={Case.UPPERCASE}>
+                                <Text case={Case.UPPERCASE} type={TextType.H6}>
                                   Learn How
                                 </Text>
                                 <Icon name="right-arrow" />
                               </Link>
                             </CalloutContent>
                           }
-                          variant={Variant.warning}
-                          fill
-                          closeButton
                           onClose={() => setApiBindHelpSectionVisible(false)}
+                          text={createMessage(WIDGET_BIND_HELP)}
+                          variant={Variant.warning}
                         />
                       </HelpSection>
                     )}
                     <KeyValueFieldArray
-                      theme={theme}
-                      name="actionConfiguration.headers"
-                      label="Headers"
                       actionConfig={actionConfigurationHeaders}
-                      placeholder="Value"
                       dataTreePath={`${actionName}.config.headers`}
+                      label="Headers"
+                      name="actionConfiguration.headers"
+                      placeholder="Value"
+                      theme={theme}
                     />
                   </TabSection>
                 ),
@@ -343,10 +345,10 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
                 panelComponent: (
                   <TabSection>
                     <KeyValueFieldArray
-                      theme={theme}
-                      name="actionConfiguration.queryParameters"
-                      label="Params"
                       dataTreePath={`${actionName}.config.queryParameters`}
+                      label="Params"
+                      name="actionConfiguration.queryParameters"
+                      theme={theme}
                     />
                   </TabSection>
                 ),
@@ -354,21 +356,17 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
               {
                 key: "body",
                 title: "Body",
-                panelComponent: (
-                  <>
-                    {allowPostBody ? (
-                      <PostBodyData
-                        dataTreePath={`${actionName}.config`}
-                        theme={theme}
-                      />
-                    ) : (
-                      <NoBodyMessage>
-                        <Text type={TextType.P2}>
-                          This request does not have a body
-                        </Text>
-                      </NoBodyMessage>
-                    )}
-                  </>
+                panelComponent: allowPostBody ? (
+                  <PostBodyData
+                    dataTreePath={`${actionName}.config`}
+                    theme={theme}
+                  />
+                ) : (
+                  <NoBodyMessage>
+                    <Text type={TextType.P2}>
+                      This request does not have a body
+                    </Text>
+                  </NoBodyMessage>
                 ),
               },
               {
@@ -396,16 +394,14 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
                 ),
               },
             ]}
-            selectedIndex={selectedIndex}
-            onSelect={setSelectedIndex}
           />
         </TabbedViewContainer>
 
-        <ApiResponseView theme={theme} apiName={actionName} />
+        <ApiResponseView apiName={actionName} theme={theme} />
       </SecondaryWrapper>
     </Form>
   );
-};
+}
 
 const selector = formValueSelector(API_EDITOR_FORM_NAME);
 
diff --git a/app/client/src/pages/Editor/APIEditor/Pagination.tsx b/app/client/src/pages/Editor/APIEditor/Pagination.tsx
index fd4674471c..8ba7d963e4 100644
--- a/app/client/src/pages/Editor/APIEditor/Pagination.tsx
+++ b/app/client/src/pages/Editor/APIEditor/Pagination.tsx
@@ -118,10 +118,8 @@ export default function Pagination(props: PaginationProps) {
         }}
       >
         <RadioFieldGroup
-          placeholder="Method"
-          name="actionConfiguration.paginationType"
           className="t--apiFormPaginationType"
-          rows={3}
+          name="actionConfiguration.paginationType"
           options={[
             {
               label: "None",
@@ -136,13 +134,15 @@ export default function Pagination(props: PaginationProps) {
               value: PaginationType.URL,
             },
           ]}
+          placeholder="Method"
+          rows={3}
         />
       </FormRow>
 
       {props.paginationType === PaginationType.URL && (
         <PaginationTypeView>
           <div>
-            <Description type={TextType.H6} case={Case.UPPERCASE}>
+            <Description case={Case.UPPERCASE} type={TextType.H6}>
               Pagination with response url
             </Description>
             <StepTitle>
@@ -160,38 +160,38 @@ export default function Pagination(props: PaginationProps) {
             <PaginationFieldWrapper>
               <DynamicTextField
                 className="t--apiFormPaginationPrev"
+                fill
                 name="actionConfiguration.prev"
                 theme={props.theme}
-                fill
               />
               <Button
-                className="t--apiFormPaginationPrevTest"
                 category={Category.tertiary}
+                className="t--apiFormPaginationPrevTest"
                 onClick={() => {
                   props.onTestClick("PREV");
                 }}
-                text={"Test"}
                 size={Size.medium}
                 tag="button"
+                text={"Test"}
               />
             </PaginationFieldWrapper>
             <Step type={TextType.P1}>Next url</Step>
             <PaginationFieldWrapper>
               <DynamicTextField
                 className="t--apiFormPaginationNext"
+                fill
                 name="actionConfiguration.next"
                 theme={props.theme}
-                fill
               />
               <Button
-                className="t--apiFormPaginationNextTest"
                 category={Category.tertiary}
+                className="t--apiFormPaginationNextTest"
                 onClick={() => {
                   props.onTestClick("NEXT");
                 }}
-                text={"Test"}
                 size={Size.medium}
                 tag="button"
+                text={"Test"}
               />
             </PaginationFieldWrapper>
           </div>
@@ -215,7 +215,7 @@ export default function Pagination(props: PaginationProps) {
       {props.paginationType === PaginationType.PAGE_NO && (
         <PaginationTypeView>
           <div>
-            <Description type={TextType.H6} case={Case.UPPERCASE}>
+            <Description case={Case.UPPERCASE} type={TextType.H6}>
               Pagination with Table Page number
             </Description>
             <StepTitle>
@@ -228,7 +228,7 @@ export default function Pagination(props: PaginationProps) {
               <NumberBox>2</NumberBox>
               <Text type={TextType.P1}>Configure Request Parameters</Text>
             </StepTitle>
-            <Step type={TextType.P1} style={{ width: "336px" }}>
+            <Step style={{ width: "336px" }} type={TextType.P1}>
               1. Map appropiate parameter or header in your request to
               UsersTable’s page number property
             </Step>
diff --git a/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx b/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx
index f5a6a93d8c..a3b03cd6d4 100644
--- a/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx
+++ b/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx
@@ -46,7 +46,7 @@ interface PostDataProps {
 
 type Props = PostDataProps;
 
-const PostBodyData = (props: Props) => {
+function PostBodyData(props: Props) {
   const {
     displayFormat,
     dataTreePath,
@@ -58,6 +58,9 @@ const PostBodyData = (props: Props) => {
   return (
     <PostBodyContainer>
       <MultiSwitch
+        onSelect={(title: ApiContentTypes) =>
+          updateBodyContentType(title, apiId)
+        }
         selected={displayFormat}
         tabs={POST_BODY_FORMAT_TITLES_NO_MULTI_PART.map((el) => {
           let component = (
@@ -66,16 +69,16 @@ const PostBodyData = (props: Props) => {
               key={el.key}
             >
               <DynamicTextField
-                name="actionConfiguration.body"
+                dataTreePath={`${dataTreePath}.body`}
                 expected={FIELD_VALUES.API_ACTION.body}
-                showLineNumbers
-                tabBehaviour={TabBehaviour.INDENT}
-                size={EditorSize.EXTENDED}
                 mode={EditorModes.JSON_WITH_BINDING}
+                name="actionConfiguration.body"
                 placeholder={
                   '{\n  "name":"{{ inputName.property }}",\n  "preference":"{{ dropdownName.property }}"\n}\n\n\\\\Take widget inputs using {{ }}'
                 }
-                dataTreePath={`${dataTreePath}.body`}
+                showLineNumbers
+                size={EditorSize.EXTENDED}
+                tabBehaviour={TabBehaviour.INDENT}
                 theme={theme}
               />
             </JSONEditorFieldWrapper>
@@ -83,10 +86,10 @@ const PostBodyData = (props: Props) => {
           if (el.title === ApiContentTypes.FORM_URLENCODED) {
             component = (
               <KeyValueFieldArray
-                key={el.key}
-                name="actionConfiguration.bodyFormData"
                 dataTreePath={`${dataTreePath}.bodyFormData`}
+                key={el.key}
                 label=""
+                name="actionConfiguration.bodyFormData"
                 theme={theme}
               />
             );
@@ -94,11 +97,11 @@ const PostBodyData = (props: Props) => {
             component = (
               <JSONEditorFieldWrapper key={el.key}>
                 <DynamicTextField
-                  name="actionConfiguration.body"
-                  tabBehaviour={TabBehaviour.INDENT}
-                  size={EditorSize.EXTENDED}
-                  mode={EditorModes.TEXT_WITH_BINDING}
                   dataTreePath={`${dataTreePath}.body`}
+                  mode={EditorModes.TEXT_WITH_BINDING}
+                  name="actionConfiguration.body"
+                  size={EditorSize.EXTENDED}
+                  tabBehaviour={TabBehaviour.INDENT}
                   theme={theme}
                 />
               </JSONEditorFieldWrapper>
@@ -106,13 +109,10 @@ const PostBodyData = (props: Props) => {
           }
           return { key: el.key, title: el.title, panelComponent: component };
         })}
-        onSelect={(title: ApiContentTypes) =>
-          updateBodyContentType(title, apiId)
-        }
       />
     </PostBodyContainer>
   );
-};
+}
 
 const selector = formValueSelector(API_EDITOR_FORM_NAME);
 
diff --git a/app/client/src/pages/Editor/APIEditor/ProviderTemplates.tsx b/app/client/src/pages/Editor/APIEditor/ProviderTemplates.tsx
index 36b57c11fe..14ebeac42c 100644
--- a/app/client/src/pages/Editor/APIEditor/ProviderTemplates.tsx
+++ b/app/client/src/pages/Editor/APIEditor/ProviderTemplates.tsx
@@ -301,9 +301,9 @@ class ProviderTemplates extends React.Component<ProviderTemplatesProps> {
           </SearchContainer> */}
 
           <Icon
+            className="backBtn"
             icon="chevron-left"
             iconSize={16}
-            className="backBtn"
             onClick={() =>
               history.push(
                 API_EDITOR_URL_WITH_SELECTED_PAGE_ID(
@@ -333,10 +333,10 @@ class ProviderTemplates extends React.Component<ProviderTemplatesProps> {
           <ProviderInfo>
             {providerDetails.imageUrl ? (
               <img
-                src={providerDetails.imageUrl}
-                className="providerImage"
                 alt="provider"
-              ></img>
+                className="providerImage"
+                src={providerDetails.imageUrl}
+              />
             ) : (
               <div>
                 {providerDetails.name && (
@@ -378,7 +378,7 @@ class ProviderTemplates extends React.Component<ProviderTemplatesProps> {
               No API templates for this provider yet.
             </p>
           ) : (
-            <React.Fragment>
+            <>
               {providerTemplates.map((template) => (
                 <TemplateCard key={template.templateData.id}>
                   <CardTopContent>
@@ -413,29 +413,29 @@ class ProviderTemplates extends React.Component<ProviderTemplatesProps> {
                     <TemplateCardRightContent className="t--addToPageButtons">
                       {template.addToPageStatus ? (
                         <Button
-                          text="Added"
-                          intent="none"
-                          filled
-                          size="small"
-                          disabled={true}
                           className="addToPageBtn t--addToPageBtn"
+                          disabled
+                          filled
+                          intent="none"
+                          size="small"
+                          text="Added"
                         />
                       ) : (
                         <Button
-                          text="Add to page"
-                          intent="primary"
-                          filled
-                          size="small"
-                          onClick={() => this.addApiToPage(template)}
-                          disabled={false}
-                          loading={template.addToPageLoading}
                           className="addToPageBtn t--addToPageBtn"
+                          disabled={false}
+                          filled
+                          intent="primary"
+                          loading={template.addToPageLoading}
+                          onClick={() => this.addApiToPage(template)}
+                          size="small"
+                          text="Add to page"
                         />
                       )}
                       <Icon
+                        className="dropIcon"
                         icon="chevron-down"
                         iconSize={20}
-                        className="dropIcon"
                         onClick={() => {
                           AnalyticsUtil.logEvent("EXPAND_API", {
                             apiName: template.templateData.name,
@@ -453,6 +453,10 @@ class ProviderTemplates extends React.Component<ProviderTemplatesProps> {
                     transitionDuration={0}
                   >
                     <ReactJson
+                      displayDataTypes={false}
+                      displayObjectSize={false}
+                      enableClipboard={false}
+                      name="Request header"
                       src={template.templateData.actionConfiguration.headers}
                       style={{
                         marginTop: "12px",
@@ -463,15 +467,15 @@ class ProviderTemplates extends React.Component<ProviderTemplatesProps> {
                         width: "90%",
                         wordWrap: "break-word",
                       }}
-                      name="Request header"
                       theme="grayscale"
-                      displayObjectSize={false}
-                      displayDataTypes={false}
-                      enableClipboard={false}
                     />
                     {template.templateData.apiTemplateConfiguration
                       .sampleResponse ? (
                       <ReactJson
+                        displayDataTypes={false}
+                        displayObjectSize={false}
+                        enableClipboard={false}
+                        name="Response Body"
                         src={
                           template.templateData.apiTemplateConfiguration
                             .sampleResponse
@@ -484,19 +488,15 @@ class ProviderTemplates extends React.Component<ProviderTemplatesProps> {
                           maxWidth: "90%",
                           wordWrap: "break-word",
                         }}
-                        name="Response Body"
                         theme="grayscale"
-                        displayObjectSize={false}
-                        displayDataTypes={false}
-                        enableClipboard={false}
                       />
                     ) : (
-                      <p></p>
+                      <p />
                     )}
                   </Collapse>
                 </TemplateCard>
               ))}
-            </React.Fragment>
+            </>
           )}
         </TemplatesCardsContainer>
       </TemplateDetailPage>
diff --git a/app/client/src/pages/Editor/APIEditor/RapidApiEditorForm.tsx b/app/client/src/pages/Editor/APIEditor/RapidApiEditorForm.tsx
index 5ae2f784ec..fc98490e4e 100644
--- a/app/client/src/pages/Editor/APIEditor/RapidApiEditorForm.tsx
+++ b/app/client/src/pages/Editor/APIEditor/RapidApiEditorForm.tsx
@@ -115,7 +115,7 @@ interface APIFormProps {
 
 type Props = APIFormProps & InjectedFormProps<Action, APIFormProps>;
 
-const RapidApiEditorForm: React.FC<Props> = (props: Props) => {
+function RapidApiEditorForm(props: Props) {
   const {
     onDeleteClick,
     onRunClick,
@@ -149,13 +149,13 @@ const RapidApiEditorForm: React.FC<Props> = (props: Props) => {
           <NameWrapper>
             <ActionNameEditor />
             <a
+              className="t--apiDocumentationLink"
+              href={providerURL && `http://${providerURL}`}
+              rel="noopener noreferrer"
               style={{
                 paddingTop: "7px",
               }}
-              className="t--apiDocumentationLink"
               target="_blank"
-              rel="noopener noreferrer"
-              href={providerURL && `http://${providerURL}`}
             >
               API documentation
             </a>
@@ -163,35 +163,35 @@ const RapidApiEditorForm: React.FC<Props> = (props: Props) => {
 
           <ActionButtons>
             <ActionButton
-              text="Delete"
               accent="error"
-              onClick={onDeleteClick}
               loading={isDeleting}
+              onClick={onDeleteClick}
+              text="Delete"
             />
             <ActionButton
-              text="Run"
-              filled
               accent="primary"
+              filled
+              loading={isRunning}
               onClick={() => {
                 onRunClick();
               }}
-              loading={isRunning}
+              text="Run"
             />
           </ActionButtons>
         </FormRow>
         <FormRow>
           <DynamicTextField
-            placeholder="Provider name"
-            name="provider.name"
+            disabled
             leftImage={providerImage}
-            disabled={true}
+            name="provider.name"
+            placeholder="Provider name"
             showLightningMenu={false}
           />
           <DynamicTextField
-            placeholder="v1/method"
-            name="actionConfiguration.path"
+            disabled
             leftIcon={FormIcons.SLASH_ICON}
-            disabled={true}
+            name="actionConfiguration.path"
+            placeholder="v1/method"
             showLightningMenu={false}
           />
         </FormRow>
@@ -213,19 +213,19 @@ const RapidApiEditorForm: React.FC<Props> = (props: Props) => {
                   <RequestParamsWrapper>
                     <HeadersSection>
                       <KeyValueFieldArray
-                        name="actionConfiguration.headers"
-                        label="Headers"
                         actionConfig={
                           actionConfiguration &&
                           actionConfigurationHeaders &&
                           actionConfigurationHeaders
                         }
+                        label="Headers"
+                        name="actionConfiguration.headers"
                         pushFields={false}
                       />
                     </HeadersSection>
                     <KeyValueFieldArray
-                      name="actionConfiguration.queryParameters"
                       label="Params"
+                      name="actionConfiguration.queryParameters"
                       pushFields={false}
                     />
                     {postbodyResponsePresent && (
@@ -233,16 +233,14 @@ const RapidApiEditorForm: React.FC<Props> = (props: Props) => {
                         <FormLabel>{"Body"}</FormLabel>
                         {typeof actionConfigurationBodyFormData ===
                           "object" && (
-                          <React.Fragment>
-                            <KeyValueFieldArray
-                              name="actionConfiguration.bodyFormData"
-                              label=""
-                              rightIcon={FormIcons.INFO_ICON}
-                              addOrDeleteFields={false}
-                              actionConfig={actionConfigurationBodyFormData}
-                              pushFields={false}
-                            />
-                          </React.Fragment>
+                          <KeyValueFieldArray
+                            actionConfig={actionConfigurationBodyFormData}
+                            addOrDeleteFields={false}
+                            label=""
+                            name="actionConfiguration.bodyFormData"
+                            pushFields={false}
+                            rightIcon={FormIcons.INFO_ICON}
+                          />
                         )}
                       </PostbodyContainer>
                     )}
@@ -267,7 +265,7 @@ const RapidApiEditorForm: React.FC<Props> = (props: Props) => {
       </SecondaryWrapper>
     </Form>
   );
-};
+}
 
 const selector = formValueSelector(API_EDITOR_FORM_NAME);
 
diff --git a/app/client/src/pages/Editor/APIEditor/ResultPagination.tsx b/app/client/src/pages/Editor/APIEditor/ResultPagination.tsx
index ab817d88d3..e7df48ae39 100644
--- a/app/client/src/pages/Editor/APIEditor/ResultPagination.tsx
+++ b/app/client/src/pages/Editor/APIEditor/ResultPagination.tsx
@@ -36,7 +36,7 @@ class ResultPagination extends React.Component<Props> {
     const { total, handlePageChange, currentPage = 1 } = this.props;
 
     return (
-      <Pagination total={total} limit={40} pageCount={5}>
+      <Pagination limit={40} pageCount={5} total={total}>
         {({
           pages,
           hasNextPage,
diff --git a/app/client/src/pages/Editor/APIEditor/index.tsx b/app/client/src/pages/Editor/APIEditor/index.tsx
index cf5849aa8e..035e01a97d 100644
--- a/app/client/src/pages/Editor/APIEditor/index.tsx
+++ b/app/client/src/pages/Editor/APIEditor/index.tsx
@@ -171,10 +171,10 @@ class ApiEditor extends React.Component<Props> {
     const apiHomeScreen = (
       <ApiHomeScreen
         applicationId={this.props.match.params.applicationId}
-        pageId={this.props.match.params.pageId}
         history={this.props.history}
         location={this.props.location}
         match={this.props.match}
+        pageId={this.props.match.params.pageId}
       />
     );
     return (
@@ -188,37 +188,37 @@ class ApiEditor extends React.Component<Props> {
           <>
             {formUiComponent === "ApiEditorForm" && (
               <ApiEditorForm
-                pluginId={pluginId}
-                paginationType={paginationType}
-                isRunning={isRunning}
-                isDeleting={isDeleting}
-                onDeleteClick={this.handleDeleteClick}
-                onRunClick={this.handleRunClick}
+                apiName={this.props.apiName}
                 appName={
                   this.props.currentApplication
                     ? this.props.currentApplication.name
                     : ""
                 }
-                apiName={this.props.apiName}
+                isDeleting={isDeleting}
+                isRunning={isRunning}
+                onDeleteClick={this.handleDeleteClick}
+                onRunClick={this.handleRunClick}
+                paginationType={paginationType}
+                pluginId={pluginId}
                 settingsConfig={this.props.settingsConfig}
               />
             )}
 
             {formUiComponent === "RapidApiEditorForm" && (
               <RapidApiEditorForm
-                apiName={this.props.apiName}
                 apiId={this.props.match.params.apiId}
-                paginationType={paginationType}
-                isRunning={isRunning}
-                isDeleting={isDeleting}
-                onDeleteClick={this.handleDeleteClick}
-                onRunClick={this.handleRunClick}
+                apiName={this.props.apiName}
                 appName={
                   this.props.currentApplication
                     ? this.props.currentApplication.name
                     : ""
                 }
+                isDeleting={isDeleting}
+                isRunning={isRunning}
                 location={this.props.location}
+                onDeleteClick={this.handleDeleteClick}
+                onRunClick={this.handleRunClick}
+                paginationType={paginationType}
               />
             )}
 
diff --git a/app/client/src/pages/Editor/ActionSettings.tsx b/app/client/src/pages/Editor/ActionSettings.tsx
index 8f3219035a..9523808f59 100644
--- a/app/client/src/pages/Editor/ActionSettings.tsx
+++ b/app/client/src/pages/Editor/ActionSettings.tsx
@@ -15,7 +15,7 @@ const FormRow = styled.div`
   margin-bottom: ${(props) => props.theme.spaces[10] + 1}px;
 `;
 
-const ActionSettings = (props: ActionSettingsProps): JSX.Element => {
+function ActionSettings(props: ActionSettingsProps): JSX.Element {
   return (
     <>
       {props.actionSettingsConfig.map((section: any) =>
@@ -23,7 +23,7 @@ const ActionSettings = (props: ActionSettingsProps): JSX.Element => {
       )}
     </>
   );
-};
+}
 
 const renderEachConfig = (section: any, formName: string): any => {
   return section.children.map((formControlOrSection: ControlProps) => {
diff --git a/app/client/src/pages/Editor/Canvas.tsx b/app/client/src/pages/Editor/Canvas.tsx
index 536f61351a..36d71047ed 100644
--- a/app/client/src/pages/Editor/Canvas.tsx
+++ b/app/client/src/pages/Editor/Canvas.tsx
@@ -14,13 +14,13 @@ interface CanvasProps {
 const Canvas = memo((props: CanvasProps) => {
   try {
     return (
-      <React.Fragment>
+      <>
         <PropertyPane />
         <ArtBoard className="t--canvas-artboard" width={props.dsl.rightColumn}>
           {props.dsl.widgetId &&
             WidgetFactory.createWidget(props.dsl, RenderModes.CANVAS)}
         </ArtBoard>
-      </React.Fragment>
+      </>
     );
   } catch (error) {
     console.log("Error rendering DSL", error);
diff --git a/app/client/src/pages/Editor/ConfirmRunModal.tsx b/app/client/src/pages/Editor/ConfirmRunModal.tsx
index 5d9f572092..e36b92f9ba 100644
--- a/app/client/src/pages/Editor/ConfirmRunModal.tsx
+++ b/app/client/src/pages/Editor/ConfirmRunModal.tsx
@@ -24,7 +24,7 @@ class ConfirmRunModal extends React.Component<Props> {
     };
 
     return (
-      <Dialog title="Confirm Action" isOpen={isModalOpen} onClose={handleClose}>
+      <Dialog isOpen={isModalOpen} onClose={handleClose} title="Confirm Action">
         <div className={Classes.DIALOG_BODY}>
           Are you sure you want to perform this action?
         </div>
@@ -32,22 +32,22 @@ class ConfirmRunModal extends React.Component<Props> {
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
             <Button
               filled
-              text="Cancel"
               onClick={() => {
                 dispatch(cancelRunActionConfirmModal());
 
                 handleClose();
               }}
+              text="Cancel"
             />
             <Button
               filled
-              text="Confirm"
               intent="primary"
               onClick={() => {
                 dispatch(acceptRunActionConfirmModal());
 
                 handleClose();
               }}
+              text="Confirm"
             />
           </div>
         </div>
diff --git a/app/client/src/pages/Editor/DataSourceEditor/BackButton.tsx b/app/client/src/pages/Editor/DataSourceEditor/BackButton.tsx
index db20a7242e..1c018c9bf5 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/BackButton.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/BackButton.tsx
@@ -11,13 +11,13 @@ const Back = styled.span`
   cursor: pointer;
 `;
 
-const BackButton = (props: { onClick: () => void }) => {
+function BackButton(props: { onClick: () => void }) {
   return (
     <Back onClick={props.onClick}>
       <Icon icon="chevron-left" iconSize={16} />
       <BackText>Back</BackText>
     </Back>
   );
-};
+}
 
 export default BackButton;
diff --git a/app/client/src/pages/Editor/DataSourceEditor/Collapsible.tsx b/app/client/src/pages/Editor/DataSourceEditor/Collapsible.tsx
index 7d67461003..9891d6f41e 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/Collapsible.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/Collapsible.tsx
@@ -66,7 +66,7 @@ class Collapsible extends React.Component<Props, ComponentState> {
           />
         </SectionContainer>
 
-        <Collapse keepChildrenMounted={true} isOpen={this.state.isOpen}>
+        <Collapse isOpen={this.state.isOpen} keepChildrenMounted>
           {children}
         </Collapse>
       </>
diff --git a/app/client/src/pages/Editor/DataSourceEditor/Connected.tsx b/app/client/src/pages/Editor/DataSourceEditor/Connected.tsx
index 56f6e01c89..2391789aa5 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/Connected.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/Connected.tsx
@@ -58,7 +58,7 @@ const ActionButton = styled(BaseButton)`
   }
 `;
 
-const Connected = () => {
+function Connected() {
   const params = useParams<{ datasourceId: string; applicationId: string }>();
   const datasource = useSelector((state: AppState) =>
     getDatasource(state, params.datasourceId),
@@ -173,12 +173,12 @@ const Connected = () => {
 
         <OnboardingIndicator step={OnboardingStep.EXAMPLE_DATABASE} width={120}>
           <ActionButton
-            className="t--create-query"
-            icon={"plus"}
-            text={isDBDatasource ? "New Query" : "New API"}
-            filled
             accent="primary"
+            className="t--create-query"
+            filled
+            icon={"plus"}
             onClick={isDBDatasource ? createQueryAction : createApiAction}
+            text={isDBDatasource ? "New Query" : "New API"}
           />
         </OnboardingIndicator>
       </Header>
@@ -189,6 +189,6 @@ const Connected = () => {
       </div>
     </Wrapper>
   );
-};
+}
 
 export default Connected;
diff --git a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
index d8f22577b5..c8fd253e0a 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
@@ -143,28 +143,28 @@ class DatasourceDBEditor extends JSONtoForm<Props> {
         <br />
         <Header>
           <FormTitleContainer>
-            <PluginImage src={this.props.pluginImage} alt="Datasource" />
+            <PluginImage alt="Datasource" src={this.props.pluginImage} />
             <FormTitle focusOnMount={this.props.isNewDatasource} />
           </FormTitleContainer>
           {viewMode && (
             <Boxed step={OnboardingStep.SUCCESSFUL_BINDING}>
               <ActionButton
-                className="t--edit-datasource"
-                text="EDIT"
                 accent="secondary"
+                className="t--edit-datasource"
                 onClick={() => {
                   this.props.setDatasourceEditorMode(
                     this.props.datasourceId,
                     false,
                   );
                 }}
+                text="EDIT"
               />
             </Boxed>
           )}
         </Header>
         {messages &&
           messages.map((msg, i) => (
-            <Callout text={msg} variant={Variant.warning} fill key={i} />
+            <Callout fill key={i} text={msg} variant={Variant.warning} />
           ))}
         {cloudHosting && pluginType === PluginType.DB && !viewMode && (
           <CollapsibleWrapper>
@@ -186,29 +186,29 @@ class DatasourceDBEditor extends JSONtoForm<Props> {
               : undefined}
             <SaveButtonContainer>
               <ActionButton
-                className="t--delete-datasource"
-                text="Delete"
                 accent="error"
+                className="t--delete-datasource"
                 loading={isDeleting}
                 onClick={() => handleDelete(datasourceId)}
+                text="Delete"
               />
 
               <ActionButton
-                className="t--test-datasource"
-                text="Test"
-                loading={isTesting}
                 accent="secondary"
+                className="t--test-datasource"
+                loading={isTesting}
                 onClick={this.test}
+                text="Test"
               />
               <StyledButton
                 className="t--save-datasource"
-                onClick={this.save}
-                text="Save"
                 disabled={this.validate()}
-                loading={isSaving}
-                intent="primary"
                 filled
+                intent="primary"
+                loading={isSaving}
+                onClick={this.save}
                 size="small"
+                text="Save"
               />
             </SaveButtonContainer>
           </>
diff --git a/app/client/src/pages/Editor/DataSourceEditor/DatasourceHome.tsx b/app/client/src/pages/Editor/DataSourceEditor/DatasourceHome.tsx
index c61e8aa5c8..3ae1eecb05 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/DatasourceHome.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/DatasourceHome.tsx
@@ -163,17 +163,17 @@ class DatasourceHomeScreen extends React.Component<Props> {
               {plugins.map((plugin) => {
                 return (
                   <Card
-                    interactive={false}
                     className="eachDatasourceCard"
+                    interactive={false}
                     key={plugin.id}
                     onClick={() =>
                       this.goToCreateDatasource(plugin.id, plugin.name)
                     }
                   >
                     <img
-                      src={pluginImages[plugin.id]}
-                      className="dataSourceImage"
                       alt="Datasource"
+                      className="dataSourceImage"
+                      src={pluginImages[plugin.id]}
                     />
                     <p className="t--plugin-name textBtn">{plugin.name}</p>
                   </Card>
diff --git a/app/client/src/pages/Editor/DataSourceEditor/FormTitle.tsx b/app/client/src/pages/Editor/DataSourceEditor/FormTitle.tsx
index e437ae67ff..ac5e3be1f7 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/FormTitle.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/FormTitle.tsx
@@ -29,7 +29,7 @@ interface ComponentProps {
 
 type FormTitleProps = ComponentProps;
 
-const FormTitle = (props: FormTitleProps) => {
+function FormTitle(props: FormTitleProps) {
   const params = useParams<{ datasourceId: string }>();
   const currentDatasource:
     | Datasource
@@ -107,20 +107,20 @@ const FormTitle = (props: FormTitleProps) => {
     <Wrapper>
       <EditableText
         className="t--edit-datasource-name"
-        type="text"
-        hideEditIcon={hideEditIcon}
-        forceDefault={forceUpdate}
         defaultValue={currentDatasource ? currentDatasource.name : ""}
+        editInteractionKind={EditInteractionKind.SINGLE}
+        forceDefault={forceUpdate}
+        hideEditIcon={hideEditIcon}
+        isEditingDefault={props.focusOnMount && !hideEditIcon}
         isInvalid={isInvalidDatasourceName}
         onTextChanged={handleDatasourceNameChange}
         placeholder="Datasource Name"
-        editInteractionKind={EditInteractionKind.SINGLE}
-        isEditingDefault={props.focusOnMount && !hideEditIcon}
+        type="text"
         updating={saveStatus.isSaving}
       />
       {saveStatus.isSaving && <Spinner size={16} />}
     </Wrapper>
   );
-};
+}
 
 export default FormTitle;
diff --git a/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx
index 5567b588fc..51b96ab12a 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx
@@ -209,7 +209,7 @@ export class JSONtoForm<
   renderMainSection = (section: any, index: number) => {
     if (isHidden(this.props.formData, section.hidden)) return null;
     return (
-      <Collapsible title={section.sectionName} defaultIsOpen={index === 0}>
+      <Collapsible defaultIsOpen={index === 0} title={section.sectionName}>
         {this.renderEachConfig(section)}
       </Collapsible>
     );
diff --git a/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
index 28657ac9ef..efc9a12e6d 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
@@ -324,19 +324,19 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
         <br />
         <Header>
           <FormTitleContainer>
-            <PluginImage src={pluginImage} alt="Datasource" />
+            <PluginImage alt="Datasource" src={pluginImage} />
             <FormTitle focusOnMount={isNewDatasource} />
           </FormTitleContainer>
 
           <CreateApiButton
-            className="t--create-query"
-            icon={"plus"}
-            text="New API"
-            filled
             accent="primary"
+            className="t--create-query"
             disabled={this.disableSave()}
+            filled
+            icon={"plus"}
             loading={isSaving}
             onClick={() => this.createApiAction()}
+            text="New API"
           />
         </Header>
       </>
@@ -348,22 +348,22 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
     return (
       <SaveButtonContainer>
         <ActionButton
-          className="t--delete-datasource"
-          text="Delete"
           accent="error"
+          className="t--delete-datasource"
           loading={isDeleting}
           onClick={() => deleteDatasource(datasourceId)}
+          text="Delete"
         />
 
         <StyledButton
           className="t--save-datasource"
-          onClick={() => this.save()}
-          text="Save"
           disabled={this.disableSave()}
-          loading={isSaving}
-          intent="primary"
           filled
+          intent="primary"
+          loading={isSaving}
+          onClick={() => this.save()}
           size="small"
+          text="Save"
         />
       </SaveButtonContainer>
     );
@@ -376,33 +376,30 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
       <>
         {messages &&
           messages.map((msg, i) => (
-            <Callout text={msg} variant={Variant.warning} fill key={i} />
+            <Callout fill key={i} text={msg} variant={Variant.warning} />
           ))}
         <FormInputContainer>
           <InputTextControl
             {...COMMON_INPUT_PROPS}
-            label="URL"
             configProperty="url"
-            isRequired={true}
+            isRequired
+            label="URL"
             placeholderText="https://example.com"
           />
         </FormInputContainer>
         <FormInputContainer>
           <KeyValueInputControl
             {...COMMON_INPUT_PROPS}
-            label="Headers"
             configProperty="headers"
+            label="Headers"
           />
         </FormInputContainer>
         <FormInputContainer>
           <DropDownControl
             {...COMMON_INPUT_PROPS}
-            label="Send Appsmith signature header"
-            subtitle="Header key: X-APPSMITH-SIGNATURE"
             configProperty="isSendSessionEnabled"
-            isRequired={true}
-            placeholderText=""
-            propertyValue=""
+            isRequired
+            label="Send Appsmith signature header"
             options={[
               {
                 label: "Yes",
@@ -413,14 +410,17 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
                 value: false,
               },
             ]}
+            placeholderText=""
+            propertyValue=""
+            subtitle="Header key: X-APPSMITH-SIGNATURE"
           />
         </FormInputContainer>
         {formData.isSendSessionEnabled && (
           <FormInputContainer>
             <InputTextControl
               {...COMMON_INPUT_PROPS}
-              label="Session Details Signature Key"
               configProperty="sessionSignatureKey"
+              label="Session Details Signature Key"
               placeholderText=""
             />
           </FormInputContainer>
@@ -428,10 +428,8 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
         <FormInputContainer>
           <DropDownControl
             {...COMMON_INPUT_PROPS}
-            label="Authentication Type"
             configProperty="authType"
-            placeholderText=""
-            propertyValue=""
+            label="Authentication Type"
             options={[
               {
                 label: "None",
@@ -442,6 +440,8 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
                 value: AuthType.OAuth2,
               },
             ]}
+            placeholderText=""
+            propertyValue=""
           />
         </FormInputContainer>
         {this.renderAuthFields()}
@@ -458,7 +458,7 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
     }
     if (content) {
       return (
-        <Collapsible title="Authentication" defaultIsOpen={true}>
+        <Collapsible defaultIsOpen title="Authentication">
           {content}
         </Collapsible>
       );
@@ -483,10 +483,8 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
         <FormInputContainer>
           <DropDownControl
             {...COMMON_INPUT_PROPS}
-            label="Grant Type"
             configProperty="authentication.grantType"
-            placeholderText=""
-            propertyValue=""
+            label="Grant Type"
             options={[
               {
                 label: "Client Credentials",
@@ -497,6 +495,8 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
                 value: GrantType.AuthorizationCode,
               },
             ]}
+            placeholderText=""
+            propertyValue=""
           />
         </FormInputContainer>
         {content}
@@ -511,8 +511,8 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
         <FormInputContainer>
           <DropDownControl
             {...COMMON_INPUT_PROPS}
-            label="Add Access Token To"
             configProperty="authentication.isTokenHeader"
+            label="Add Access Token To"
             options={[
               {
                 label: "Request Header",
@@ -529,8 +529,8 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
           <FormInputContainer>
             <InputTextControl
               {...COMMON_INPUT_PROPS}
-              label="Header Prefix"
               configProperty="authentication.headerPrefix"
+              label="Header Prefix"
               placeholderText="eg: Bearer "
             />
           </FormInputContainer>
@@ -538,34 +538,34 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
         <FormInputContainer>
           <InputTextControl
             {...COMMON_INPUT_PROPS}
-            label="Access Token URL"
             configProperty="authentication.accessTokenUrl"
+            label="Access Token URL"
             placeholderText="https://example.com/login/oauth/access_token"
           />
         </FormInputContainer>
         <FormInputContainer>
           <InputTextControl
             {...COMMON_INPUT_PROPS}
-            label="Client ID"
             configProperty="authentication.clientId"
+            label="Client ID"
             placeholderText="Client ID"
           />
         </FormInputContainer>
         <FormInputContainer>
           <InputTextControl
             {...COMMON_INPUT_PROPS}
-            label="Client Secret"
-            dataType="PASSWORD"
-            encrypted={true}
             configProperty="authentication.clientSecret"
+            dataType="PASSWORD"
+            encrypted
+            label="Client Secret"
             placeholderText="Client Secret"
           />
         </FormInputContainer>
         <FormInputContainer>
           <InputTextControl
             {...COMMON_INPUT_PROPS}
-            label="Scope(s)"
             configProperty="authentication.scopeString"
+            label="Scope(s)"
             placeholderText="e.g. read, write"
           />
         </FormInputContainer>
@@ -592,8 +592,8 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
         <FormInputContainer>
           <InputTextControl
             {...COMMON_INPUT_PROPS}
-            label="Authorization URL"
             configProperty="authentication.authorizationUrl"
+            label="Authorization URL"
             placeholderText="https://example.com/login/oauth/authorize"
           />
         </FormInputContainer>
@@ -612,15 +612,15 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
         <FormInputContainer>
           <KeyValueInputControl
             {...COMMON_INPUT_PROPS}
-            label="Custom Authentication Parameters"
             configProperty="authentication.customAuthenticationParameters"
+            label="Custom Authentication Parameters"
           />
         </FormInputContainer>
         <FormInputContainer>
           <DropDownControl
             {...COMMON_INPUT_PROPS}
-            label="Client Authentication"
             configProperty="authentication.isAuthorizationHeader"
+            label="Client Authentication"
             options={[
               {
                 label: "Send as Basic Auth header",
@@ -635,17 +635,17 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
         </FormInputContainer>
         <FormInputContainer>
           <AuthorizeButton
+            disabled={this.disableSave()}
+            filled
+            intent="primary"
+            loading={isSaving}
             onClick={() =>
               this.save(
                 redirectAuthorizationCode(pageId, datasourceId, PluginType.API),
               )
             }
-            text={isAuthorized ? "Save and Re-Authorize" : "Save and Authorize"}
-            intent="primary"
-            loading={isSaving}
-            disabled={this.disableSave()}
-            filled
             size="small"
+            text={isAuthorized ? "Save and Re-Authorize" : "Save and Authorize"}
           />
         </FormInputContainer>
       </>
diff --git a/app/client/src/pages/Editor/DataSourceEditor/index.tsx b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
index 0c6db32fbd..1f858b7243 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/index.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
@@ -95,25 +95,25 @@ class DataSourceEditor extends React.Component<Props> {
 
     return (
       <DataSourceEditorForm
-        pluginImage={pluginImages[pluginId]}
         applicationId={this.props.match.params.applicationId}
-        pageId={this.props.match.params.pageId}
-        isSaving={isSaving}
-        isTesting={isTesting}
+        datasourceId={datasourceId}
+        formConfig={formConfig}
+        formData={formData}
+        formName={DATASOURCE_DB_FORM}
+        handleDelete={deleteDatasource}
         isDeleting={isDeleting}
         isNewDatasource={isNewDatasource}
-        onSubmit={this.handleSubmit}
+        isSaving={isSaving}
+        isTesting={isTesting}
         onSave={this.handleSave}
+        onSubmit={this.handleSubmit}
         onTest={this.props.testDatasource}
-        datasourceId={datasourceId}
-        formData={formData}
-        formConfig={formConfig}
-        handleDelete={deleteDatasource}
-        viewMode={viewMode}
-        setDatasourceEditorMode={setDatasourceEditorMode}
         openOmnibarReadMore={openOmnibarReadMore}
+        pageId={this.props.match.params.pageId}
+        pluginImage={pluginImages[pluginId]}
         pluginType={pluginType}
-        formName={DATASOURCE_DB_FORM}
+        setDatasourceEditorMode={setDatasourceEditorMode}
+        viewMode={viewMode}
       />
     );
   }
@@ -192,11 +192,11 @@ class DatasourceEditorRouter extends React.Component<Props> {
     if (!datasourceId) {
       return (
         <DatasourceHome
-          isSaving={isSaving}
           applicationId={applicationId}
-          pageId={pageId}
           history={history}
+          isSaving={isSaving}
           location={location}
+          pageId={pageId}
         />
       );
     }
@@ -205,14 +205,14 @@ class DatasourceEditorRouter extends React.Component<Props> {
     if (pluginDatasourceForm === "RestAPIDatasourceForm") {
       return (
         <RestAPIDatasourceForm
-          pluginImage={pluginImages[pluginId]}
           applicationId={this.props.match.params.applicationId}
           datasourceId={datasourceId}
-          pageId={this.props.match.params.pageId}
-          isSaving={isSaving}
           isDeleting={isDeleting}
           isNewDatasource={isNewDatasource}
+          isSaving={isSaving}
           location={location}
+          pageId={this.props.match.params.pageId}
+          pluginImage={pluginImages[pluginId]}
         />
       );
     }
diff --git a/app/client/src/pages/Editor/EditableAppName.tsx b/app/client/src/pages/Editor/EditableAppName.tsx
index 8b38549510..8de2a2f11a 100644
--- a/app/client/src/pages/Editor/EditableAppName.tsx
+++ b/app/client/src/pages/Editor/EditableAppName.tsx
@@ -45,17 +45,12 @@ export default function EditableTextWrapper(props: EditableTextWrapperProps) {
   return (
     <Container>
       <EditableText
+        className={props.className}
         defaultValue={props.defaultValue}
         editInteractionKind={props.editInteractionKind}
-        placeholder={props.placeholder}
-        isEditingDefault={isEditingDefault}
-        savingState={props.savingState}
         fill={props.fill}
-        onBlur={(value) => {
-          if (props.onBlur) props.onBlur(value);
-          setIsEditingDefault(false);
-        }}
-        className={props.className}
+        hideEditIcon
+        isEditingDefault={isEditingDefault}
         isInvalid={(value: string) => {
           if (value.trim() === "") {
             Toaster.show({
@@ -65,7 +60,12 @@ export default function EditableTextWrapper(props: EditableTextWrapperProps) {
           }
           return false;
         }}
-        hideEditIcon
+        onBlur={(value) => {
+          if (props.onBlur) props.onBlur(value);
+          setIsEditingDefault(false);
+        }}
+        placeholder={props.placeholder}
+        savingState={props.savingState}
       />
     </Container>
   );
diff --git a/app/client/src/pages/Editor/EditorHeader.tsx b/app/client/src/pages/Editor/EditorHeader.tsx
index 2ec26f47cd..81fe0cc3fc 100644
--- a/app/client/src/pages/Editor/EditorHeader.tsx
+++ b/app/client/src/pages/Editor/EditorHeader.tsx
@@ -143,7 +143,7 @@ type EditorHeaderProps = {
   darkTheme: any;
 };
 
-export const EditorHeader = (props: EditorHeaderProps) => {
+export function EditorHeader(props: EditorHeaderProps) {
   const {
     currentApplication,
     isSaving,
@@ -179,19 +179,19 @@ export const EditorHeader = (props: EditorHeaderProps) => {
     if (!pageSaveError) {
       saveStatusIcon = (
         <HeaderIcons.SAVE_SUCCESS
+          className="t--save-status-success"
           color={"#36AB80"}
           height={20}
           width={20}
-          className="t--save-status-success"
         />
       );
     } else {
       saveStatusIcon = (
         <HeaderIcons.SAVE_FAILURE
+          className={"t--save-status-error"}
           color={"#F69D2C"}
           height={20}
           width={20}
-          className={"t--save-status-error"}
         />
       );
     }
@@ -208,23 +208,20 @@ export const EditorHeader = (props: EditorHeaderProps) => {
     <ThemeProvider theme={props.darkTheme}>
       <HeaderWrapper>
         <HeaderSection>
-          <Link to={APPLICATIONS_URL} style={{ height: 24 }}>
+          <Link style={{ height: 24 }} to={APPLICATIONS_URL}>
             <AppsmithLogoImg
-              src={AppsmithLogo}
               alt="Appsmith logo"
               className="t--appsmith-logo"
+              src={AppsmithLogo}
             />
           </Link>
           <Boxed step={OnboardingStep.FINISH}>
             {currentApplication && (
               <EditableAppName
+                className="t--application-name editable-application-name"
                 defaultValue={currentApplication.name || ""}
                 editInteractionKind={EditInteractionKind.SINGLE}
-                className="t--application-name editable-application-name"
-                fill={true}
-                savingState={
-                  isSavingName ? SavingState.STARTED : SavingState.NOT_STARTED
-                }
+                fill
                 isNewApp={
                   applicationList.filter((el) => el.id === applicationId)
                     .length > 0
@@ -235,6 +232,9 @@ export const EditorHeader = (props: EditorHeaderProps) => {
                     currentApp: true,
                   })
                 }
+                savingState={
+                  isSavingName ? SavingState.STARTED : SavingState.NOT_STARTED
+                }
               />
             )}
           </Boxed>
@@ -249,59 +249,59 @@ export const EditorHeader = (props: EditorHeaderProps) => {
               {saveStatusIcon}
             </SaveStatusContainer>
             <FormDialogComponent
-              trigger={
-                <Button
-                  text={"Share"}
-                  icon={"share"}
-                  size={Size.small}
-                  className="t--application-share-btn header__application-share-btn"
-                />
-              }
-              canOutsideClickClose={true}
               Form={AppInviteUsersForm}
-              orgId={orgId}
               applicationId={applicationId}
+              canOutsideClickClose
+              orgId={orgId}
               title={
                 currentApplication
                   ? currentApplication.name
                   : "Share Application"
               }
+              trigger={
+                <Button
+                  className="t--application-share-btn header__application-share-btn"
+                  icon={"share"}
+                  size={Size.small}
+                  text={"Share"}
+                />
+              }
             />
           </Boxed>
           <Boxed
-            step={OnboardingStep.DEPLOY}
             alternative={<EndOnboardingTour />}
+            step={OnboardingStep.DEPLOY}
           >
             <DeploySection>
               <OnboardingIndicator
-                step={OnboardingStep.DEPLOY}
                 hasButton={false}
+                step={OnboardingStep.DEPLOY}
                 width={75}
               >
                 <StyledDeployButton
-                  fill
-                  onClick={handlePublish}
-                  text={"Deploy"}
-                  isLoading={isPublishing}
-                  size={Size.small}
                   className="t--application-publish-btn"
+                  fill
+                  isLoading={isPublishing}
+                  onClick={handlePublish}
+                  size={Size.small}
+                  text={"Deploy"}
                 />
               </OnboardingIndicator>
 
               <DeployLinkButtonDialog
+                link={getApplicationViewerPageURL(applicationId, pageId)}
                 trigger={
                   <StyledDeployButton icon={"downArrow"} size={Size.xxs} />
                 }
-                link={getApplicationViewerPageURL(applicationId, pageId)}
               />
             </DeploySection>
           </Boxed>
           {user && user.username !== ANONYMOUS_USERNAME && (
             <ProfileDropdownContainer>
               <ProfileDropdown
-                userName={user?.username || ""}
                 hideThemeSwitch
                 name={user.name}
+                userName={user?.username || ""}
               />
             </ProfileDropdownContainer>
           )}
@@ -311,7 +311,7 @@ export const EditorHeader = (props: EditorHeaderProps) => {
       </HeaderWrapper>
     </ThemeProvider>
   );
-};
+}
 
 const mapStateToProps = (state: AppState) => ({
   pageName: state.ui.editor.currentPageName,
diff --git a/app/client/src/pages/Editor/EditorSidebar.tsx b/app/client/src/pages/Editor/EditorSidebar.tsx
index 1fcc664aa7..38e56d3518 100644
--- a/app/client/src/pages/Editor/EditorSidebar.tsx
+++ b/app/client/src/pages/Editor/EditorSidebar.tsx
@@ -310,173 +310,160 @@ class EditorSidebar extends React.Component<Props, State> {
       "importTo",
     );
 
-    return (
-      <React.Fragment>
-        {isLoading ? (
-          <LoadingContainer>
-            <Spinner size={30} />
-          </LoadingContainer>
-        ) : (
-          <Wrapper>
-            <ItemsWrapper>
-              <Controls>
-                <SearchBar
-                  icon="search"
-                  input={{
-                    value: search,
-                    onChange: this.handleSearchChange,
-                  }}
-                  placeholder="Search"
-                />
-              </Controls>
-              <DragDropContext
-                onDragStart={this.onDragStart}
-                onDragEnd={this.onDragEnd}
-              >
-                <React.Fragment>
-                  {pageWiseList.map((page, i) => {
-                    return (
-                      <PageContainer key={page.id}>
-                        <PageName isMain={i === 0}>{page.name}</PageName>
-                        <Droppable
-                          droppableId={page.id}
-                          type="API"
-                          isDropDisabled={
-                            page.id === this.state.itemDraggingFrom
-                          }
+    return isLoading ? (
+      <LoadingContainer>
+        <Spinner size={30} />
+      </LoadingContainer>
+    ) : (
+      <Wrapper>
+        <ItemsWrapper>
+          <Controls>
+            <SearchBar
+              icon="search"
+              input={{
+                value: search,
+                onChange: this.handleSearchChange,
+              }}
+              placeholder="Search"
+            />
+          </Controls>
+          <DragDropContext
+            onDragEnd={this.onDragEnd}
+            onDragStart={this.onDragStart}
+          >
+            <>
+              {pageWiseList.map((page, i) => {
+                return (
+                  <PageContainer key={page.id}>
+                    <PageName isMain={i === 0}>{page.name}</PageName>
+                    <Droppable
+                      droppableId={page.id}
+                      isDropDisabled={page.id === this.state.itemDraggingFrom}
+                      type="API"
+                    >
+                      {(provided, snapshot) => (
+                        <PageDropContainer
+                          ref={provided.innerRef}
+                          {...provided.droppableProps}
                         >
-                          {(provided, snapshot) => (
-                            <PageDropContainer
-                              ref={provided.innerRef}
-                              {...provided.droppableProps}
-                            >
-                              {provided.placeholder}
-                              <div>
-                                <StyledAddButton
-                                  text={createButtonTitle}
-                                  icon="plus"
-                                  fluid
-                                  className={
-                                    destinationPageId === page.id
-                                      ? "highlightButton"
-                                      : "createBtn"
-                                  }
-                                  style={{ padding: "10px" }}
-                                  onClick={() => this.handleCreateNew(page.id)}
-                                />
-                                {page.items.length === 0 && (
-                                  <NoItemMessage>
-                                    {"No APIs on this page yet"}
-                                  </NoItemMessage>
-                                )}
-                                {page.items.map((item: Item, index) => (
-                                  <Draggable
-                                    key={item.id}
-                                    draggableId={item.id}
-                                    index={index}
+                          {provided.placeholder}
+                          <div>
+                            <StyledAddButton
+                              className={
+                                destinationPageId === page.id
+                                  ? "highlightButton"
+                                  : "createBtn"
+                              }
+                              fluid
+                              icon="plus"
+                              onClick={() => this.handleCreateNew(page.id)}
+                              style={{ padding: "10px" }}
+                              text={createButtonTitle}
+                            />
+                            {page.items.length === 0 && (
+                              <NoItemMessage>
+                                {"No APIs on this page yet"}
+                              </NoItemMessage>
+                            )}
+                            {page.items.map((item: Item, index) => (
+                              <Draggable
+                                draggableId={item.id}
+                                index={index}
+                                key={item.id}
+                              >
+                                {(provided) => (
+                                  <ItemContainer
+                                    isBeingDragged={
+                                      this.state.itemDragging === item.id
+                                    }
+                                    isDraggingOver={snapshot.isDraggingOver}
+                                    isSelected={item.id === selectedItemId}
+                                    ref={provided.innerRef}
+                                    {...provided.draggableProps}
+                                    {...provided.dragHandleProps}
+                                    onClick={() =>
+                                      this.handleItemSelect(
+                                        item.id,
+                                        item.pageId,
+                                      )
+                                    }
                                   >
-                                    {(provided) => (
-                                      <ItemContainer
-                                        isSelected={item.id === selectedItemId}
-                                        isDraggingOver={snapshot.isDraggingOver}
-                                        isBeingDragged={
-                                          this.state.itemDragging === item.id
-                                        }
-                                        ref={provided.innerRef}
-                                        {...provided.draggableProps}
-                                        {...provided.dragHandleProps}
-                                        onClick={() =>
-                                          this.handleItemSelect(
-                                            item.id,
-                                            item.pageId,
-                                          )
-                                        }
-                                      >
-                                        {itemRender(item)}
-                                        {this.state.itemDragging !==
-                                          item.id && (
-                                          <React.Fragment>
-                                            <TreeDropdown
-                                              defaultText=""
-                                              onSelect={() => {
-                                                return null;
-                                              }}
-                                              selectedValue=""
-                                              optionTree={[
-                                                {
-                                                  value: "copy",
-                                                  onSelect: () => null,
-                                                  label: "Copy to",
-                                                  children: pageWiseList.map(
-                                                    (p) => ({
-                                                      label: p.name,
-                                                      id: p.id,
-                                                      value: p.name,
-                                                      onSelect: () =>
-                                                        this.props.copyItem(
-                                                          item.id,
-                                                          p.id,
-                                                        ),
-                                                    }),
+                                    {itemRender(item)}
+                                    {this.state.itemDragging !== item.id && (
+                                      <TreeDropdown
+                                        defaultText=""
+                                        onSelect={() => {
+                                          return null;
+                                        }}
+                                        optionTree={[
+                                          {
+                                            value: "copy",
+                                            onSelect: () => null,
+                                            label: "Copy to",
+                                            children: pageWiseList.map((p) => ({
+                                              label: p.name,
+                                              id: p.id,
+                                              value: p.name,
+                                              onSelect: () =>
+                                                this.props.copyItem(
+                                                  item.id,
+                                                  p.id,
+                                                ),
+                                            })),
+                                          },
+                                          {
+                                            value: "move",
+                                            onSelect: () => null,
+                                            label: "Move to",
+                                            children: pageWiseList
+                                              .filter((p) => p.id !== page.id)
+                                              .map((p) => ({
+                                                label: p.name,
+                                                id: p.id,
+                                                value: p.name,
+                                                onSelect: () =>
+                                                  this.props.moveItem(
+                                                    item.id,
+                                                    p.id,
                                                   ),
-                                                },
-                                                {
-                                                  value: "move",
-                                                  onSelect: () => null,
-                                                  label: "Move to",
-                                                  children: pageWiseList
-                                                    .filter(
-                                                      (p) => p.id !== page.id,
-                                                    )
-                                                    .map((p) => ({
-                                                      label: p.name,
-                                                      id: p.id,
-                                                      value: p.name,
-                                                      onSelect: () =>
-                                                        this.props.moveItem(
-                                                          item.id,
-                                                          p.id,
-                                                        ),
-                                                    })),
-                                                },
-                                                {
-                                                  value: "delete",
-                                                  onSelect: () =>
-                                                    this.props.deleteItem(
-                                                      item.id,
-                                                      item.name,
-                                                      page.name,
-                                                    ),
-                                                  label: "Delete",
-                                                  intent: "danger",
-                                                },
-                                              ]}
-                                              toggle={
-                                                <ControlIcons.MORE_HORIZONTAL_CONTROL
-                                                  width={theme.fontSizes[4]}
-                                                  height={theme.fontSizes[4]}
-                                                />
-                                              }
-                                            />
-                                          </React.Fragment>
-                                        )}
-                                      </ItemContainer>
+                                              })),
+                                          },
+                                          {
+                                            value: "delete",
+                                            onSelect: () =>
+                                              this.props.deleteItem(
+                                                item.id,
+                                                item.name,
+                                                page.name,
+                                              ),
+                                            label: "Delete",
+                                            intent: "danger",
+                                          },
+                                        ]}
+                                        selectedValue=""
+                                        toggle={
+                                          <ControlIcons.MORE_HORIZONTAL_CONTROL
+                                            height={theme.fontSizes[4]}
+                                            width={theme.fontSizes[4]}
+                                          />
+                                        }
+                                      />
                                     )}
-                                  </Draggable>
-                                ))}
-                              </div>
-                            </PageDropContainer>
-                          )}
-                        </Droppable>
-                      </PageContainer>
-                    );
-                  })}
-                </React.Fragment>
-              </DragDropContext>
-            </ItemsWrapper>
-          </Wrapper>
-        )}
-      </React.Fragment>
+                                  </ItemContainer>
+                                )}
+                              </Draggable>
+                            ))}
+                          </div>
+                        </PageDropContainer>
+                      )}
+                    </Droppable>
+                  </PageContainer>
+                );
+              })}
+            </>
+          </DragDropContext>
+        </ItemsWrapper>
+      </Wrapper>
     );
   }
 }
diff --git a/app/client/src/pages/Editor/EntityNotFoundPane.tsx b/app/client/src/pages/Editor/EntityNotFoundPane.tsx
index f9d6fce174..70b8e26fbe 100644
--- a/app/client/src/pages/Editor/EntityNotFoundPane.tsx
+++ b/app/client/src/pages/Editor/EntityNotFoundPane.tsx
@@ -46,30 +46,30 @@ const Wrapper = styled.div`
   }
 `;
 
-const EntityNotFoundPane = () => {
+function EntityNotFoundPane() {
   const history = useHistory();
   return (
     <Wrapper>
       <img
-        src={PageUnavailableImage}
         alt="Page Unavailable"
         className="page-unavailable-img"
+        src={PageUnavailableImage}
       />
       <div className="page-details">
         <p className="bold-text">{createMessage(INVALID_URL_ERROR)}</p>
         <p className="page-message">{createMessage(PAGE_NOT_FOUND_ERROR)}</p>
         <Button
+          category={Category.secondary}
+          className="button-position"
+          cypressSelector="t--invalid-page-go-back"
+          onClick={history.goBack}
+          size={Size.large}
           tag="button"
           text="Go Back"
-          cypressSelector="t--invalid-page-go-back"
-          className="button-position"
-          size={Size.large}
-          category={Category.secondary}
-          onClick={history.goBack}
         />
       </div>
     </Wrapper>
   );
-};
+}
 
 export default EntityNotFoundPane;
diff --git a/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx b/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx
index 922c24bf03..c59d94e17d 100644
--- a/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx
+++ b/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx
@@ -43,33 +43,33 @@ export const ExplorerActionEntity = memo((props: ExplorerActionEntityProps) => {
 
   const contextMenu = (
     <ActionEntityContextMenu
+      className={EntityClassNames.CONTEXT_MENU}
       id={props.action.config.id}
       name={props.action.config.name}
-      className={EntityClassNames.CONTEXT_MENU}
       pageId={props.pageId}
     />
   );
   return (
     <Entity
-      key={props.action.config.id}
-      icon={props.icon}
-      name={props.action.config.name}
       action={switchToAction}
       active={props.active}
+      className="action"
+      contextMenu={contextMenu}
       entityId={props.action.config.id}
+      icon={props.icon}
+      key={props.action.config.id}
+      name={props.action.config.name}
+      searchKeyword={props.searchKeyword}
       step={props.step}
       updateEntityName={getUpdateActionNameReduxAction}
-      searchKeyword={props.searchKeyword}
-      contextMenu={contextMenu}
-      className="action"
     >
       <EntityProperties
+        entity={props.action}
+        entityId={props.action.config.id}
         entityName={props.action.config.name}
         entityType={ENTITY_TYPE.ACTION}
         pageId={props.pageId}
         step={props.step + 1}
-        entity={props.action}
-        entityId={props.action.config.id}
       />
     </Entity>
   );
diff --git a/app/client/src/pages/Editor/Explorer/Actions/ActionEntityContextMenu.tsx b/app/client/src/pages/Editor/Explorer/Actions/ActionEntityContextMenu.tsx
index 8b94cdd492..2689a1f8bd 100644
--- a/app/client/src/pages/Editor/Explorer/Actions/ActionEntityContextMenu.tsx
+++ b/app/client/src/pages/Editor/Explorer/Actions/ActionEntityContextMenu.tsx
@@ -22,7 +22,7 @@ type EntityContextMenuProps = {
   className?: string;
   pageId: string;
 };
-export const ActionEntityContextMenu = (props: EntityContextMenuProps) => {
+export function ActionEntityContextMenu(props: EntityContextMenuProps) {
   const nextEntityName = useNewActionName();
 
   const dispatch = useDispatch();
@@ -74,7 +74,6 @@ export const ActionEntityContextMenu = (props: EntityContextMenuProps) => {
       defaultText=""
       modifiers={ContextMenuPopoverModifiers}
       onSelect={noop}
-      selectedValue=""
       optionTree={[
         {
           value: "rename",
@@ -116,9 +115,10 @@ export const ActionEntityContextMenu = (props: EntityContextMenuProps) => {
           intent: "danger",
         },
       ]}
+      selectedValue=""
       toggle={<ContextMenuTrigger />}
     />
   );
-};
+}
 
 export default ActionEntityContextMenu;
diff --git a/app/client/src/pages/Editor/Explorer/Actions/ActionsGroup.tsx b/app/client/src/pages/Editor/Explorer/Actions/ActionsGroup.tsx
index 16a3402f42..ab9779bcd4 100644
--- a/app/client/src/pages/Editor/Explorer/Actions/ActionsGroup.tsx
+++ b/app/client/src/pages/Editor/Explorer/Actions/ActionsGroup.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, memo } from "react";
+import React, { memo, ReactElement } from "react";
 import ExplorerActionEntity from "./ActionEntity";
 import { Page } from "constants/ReduxActionConstants";
 import { ExplorerURLParams, getActionIdFromURL } from "../helpers";
@@ -16,36 +16,38 @@ type ExplorerActionsGroupProps = {
 };
 export const ExplorerActionsGroup = memo((props: ExplorerActionsGroupProps) => {
   const params = useParams<ExplorerURLParams>();
-  const childNode: ReactNode = props.actions.map((action: any) => {
-    const plugin = props.plugins[action.config.pluginId];
-    const url = props.config?.getURL(
-      params.applicationId,
-      props.page.pageId,
-      action.config.id,
-      plugin,
-    );
-    const actionId = getActionIdFromURL();
-    const active = actionId === action.config.id;
+  const childNode: ReactElement<ExplorerActionsGroupProps> = (
+    <>
+      {props.actions.map((action: any) => {
+        const url = props.config?.getURL(
+          params.applicationId,
+          props.page.pageId,
+          action.config.id,
+        );
+        const actionId = getActionIdFromURL();
+        const active = actionId === action.config.id;
 
-    const icon = props.config?.getIcon(
-      action.config,
-      props.plugins[action.config.datasource.pluginId],
-    );
-    return (
-      <ExplorerActionEntity
-        key={action.config.id}
-        action={action}
-        url={url}
-        active={active}
-        icon={icon}
-        step={props.step + 1}
-        searchKeyword={props.searchKeyword}
-        pageId={props.page.pageId}
-      />
-    );
-  });
+        const icon = props.config?.getIcon(
+          action.config,
+          props.plugins[action.config.datasource.pluginId],
+        );
+        return (
+          <ExplorerActionEntity
+            action={action}
+            active={active}
+            icon={icon}
+            key={action.config.id}
+            pageId={props.page.pageId}
+            searchKeyword={props.searchKeyword}
+            step={props.step + 1}
+            url={url}
+          />
+        );
+      })}
+    </>
+  );
 
-  return <>{childNode}</>;
+  return childNode;
 });
 
 ExplorerActionsGroup.displayName = "ExplorerActionsGroup";
diff --git a/app/client/src/pages/Editor/Explorer/Actions/MoreActionsMenu.tsx b/app/client/src/pages/Editor/Explorer/Actions/MoreActionsMenu.tsx
index 7df9b55cd9..d8bc2a816d 100644
--- a/app/client/src/pages/Editor/Explorer/Actions/MoreActionsMenu.tsx
+++ b/app/client/src/pages/Editor/Explorer/Actions/MoreActionsMenu.tsx
@@ -60,7 +60,7 @@ export const MoreActionablesContainer = styled.div<{ isOpen?: boolean }>`
   }
 `;
 
-export const MoreActionsMenu = (props: EntityContextMenuProps) => {
+export function MoreActionsMenu(props: EntityContextMenuProps) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const nextEntityName = useNewActionName();
 
@@ -107,8 +107,8 @@ export const MoreActionsMenu = (props: EntityContextMenuProps) => {
       className={props.className}
       defaultText=""
       modifiers={ContextMenuPopoverModifiers}
+      onMenuToggle={(isOpen: boolean) => setIsMenuOpen(isOpen)}
       onSelect={noop}
-      selectedValue=""
       optionTree={[
         {
           icon: "duplicate",
@@ -149,17 +149,17 @@ export const MoreActionsMenu = (props: EntityContextMenuProps) => {
           className: "t--apiFormDeleteBtn",
         },
       ]}
+      selectedValue=""
       toggle={
         <MoreActionablesContainer
           className={props.className}
           isOpen={isMenuOpen}
         >
-          <Icon name="context-menu" size={IconSize.XXXL}></Icon>
+          <Icon name="context-menu" size={IconSize.XXXL} />
         </MoreActionablesContainer>
       }
-      onMenuToggle={(isOpen: boolean) => setIsMenuOpen(isOpen)}
     />
   );
-};
+}
 
 export default MoreActionsMenu;
diff --git a/app/client/src/pages/Editor/Explorer/Actions/helpers.tsx b/app/client/src/pages/Editor/Explorer/Actions/helpers.tsx
index 11e7853cac..6c84e74c27 100644
--- a/app/client/src/pages/Editor/Explorer/Actions/helpers.tsx
+++ b/app/client/src/pages/Editor/Explorer/Actions/helpers.tsx
@@ -164,13 +164,13 @@ export const getPluginGroups = (
 
     return (
       <PluginGroup
-        key={page.pageId + "_" + config.types.join("_")}
+        actionConfig={config}
         actions={entries}
         datasources={filteredDatasources}
-        step={step}
-        searchKeyword={searchKeyword}
+        key={page.pageId + "_" + config.types.join("_")}
         page={page}
-        actionConfig={config}
+        searchKeyword={searchKeyword}
+        step={step}
       />
     );
   });
diff --git a/app/client/src/pages/Editor/Explorer/ContextMenuTrigger.tsx b/app/client/src/pages/Editor/Explorer/ContextMenuTrigger.tsx
index f0f965415a..f8fcbfac6d 100644
--- a/app/client/src/pages/Editor/Explorer/ContextMenuTrigger.tsx
+++ b/app/client/src/pages/Editor/Explorer/ContextMenuTrigger.tsx
@@ -12,18 +12,18 @@ const ToggleIcon = styled(ControlIcons.MORE_VERTICAL_CONTROL)`
     height: ${(props) => props.theme.fontSizes[3]}px;
   }
 `;
-export const ContextMenuTrigger = (props: {
+export function ContextMenuTrigger(props: {
   className?: string;
   theme: Theme;
-}) => {
+}) {
   return (
     <EntityTogglesWrapper className={props.className}>
       <ToggleIcon
-        width={props.theme.fontSizes[3]}
         height={props.theme.fontSizes[3]}
+        width={props.theme.fontSizes[3]}
       />
     </EntityTogglesWrapper>
   );
-};
+}
 
 export default withTheme(ContextMenuTrigger);
diff --git a/app/client/src/pages/Editor/Explorer/Datasources/DataSourceContextMenu.tsx b/app/client/src/pages/Editor/Explorer/Datasources/DataSourceContextMenu.tsx
index fc3dfcae04..1dbff95196 100644
--- a/app/client/src/pages/Editor/Explorer/Datasources/DataSourceContextMenu.tsx
+++ b/app/client/src/pages/Editor/Explorer/Datasources/DataSourceContextMenu.tsx
@@ -10,11 +10,11 @@ import { noop } from "lodash";
 import { ContextMenuPopoverModifiers } from "../helpers";
 import { initExplorerEntityNameEdit } from "actions/explorerActions";
 
-export const DataSourceContextMenu = (props: {
+export function DataSourceContextMenu(props: {
   datasourceId: string;
   entityId: string;
   className?: string;
-}) => {
+}) {
   const dispatch = useDispatch();
   const dispatchDelete = useCallback(() => {
     dispatch(deleteDatasource({ id: props.datasourceId }));
@@ -29,10 +29,9 @@ export const DataSourceContextMenu = (props: {
   return (
     <TreeDropdown
       className={props.className}
-      modifiers={ContextMenuPopoverModifiers}
       defaultText=""
+      modifiers={ContextMenuPopoverModifiers}
       onSelect={noop}
-      selectedValue=""
       optionTree={[
         {
           value: "rename",
@@ -51,9 +50,10 @@ export const DataSourceContextMenu = (props: {
           intent: "danger",
         },
       ]}
+      selectedValue=""
       toggle={<ContextMenuTrigger />}
     />
   );
-};
+}
 
 export default DataSourceContextMenu;
diff --git a/app/client/src/pages/Editor/Explorer/Datasources/DatasourceEntity.tsx b/app/client/src/pages/Editor/Explorer/Datasources/DatasourceEntity.tsx
index bb71db4256..9a95ee51db 100644
--- a/app/client/src/pages/Editor/Explorer/Datasources/DatasourceEntity.tsx
+++ b/app/client/src/pages/Editor/Explorer/Datasources/DatasourceEntity.tsx
@@ -32,9 +32,7 @@ type ExplorerDatasourceEntityProps = {
   pageId: string;
 };
 
-export const ExplorerDatasourceEntity = (
-  props: ExplorerDatasourceEntityProps,
-) => {
+export function ExplorerDatasourceEntity(props: ExplorerDatasourceEntityProps) {
   const params = useParams<ExplorerURLParams>();
   const dispatch = useDispatch();
   const icon = getPluginIcon(props.plugin);
@@ -98,32 +96,32 @@ export const ExplorerDatasourceEntity = (
 
   return (
     <Entity
-      entityId={`${props.datasource.id}-${props.pageId}`}
-      className="datasource"
-      key={props.datasource.id}
-      icon={icon}
-      name={props.datasource.name}
-      active={active}
-      step={props.step}
-      searchKeyword={props.searchKeyword}
-      isDefaultExpanded={isDefaultExpanded}
       action={switchDatasource}
-      updateEntityName={updateDatasourceName}
+      active={active}
+      className="datasource"
       contextMenu={
         <DataSourceContextMenu
-          entityId={`${props.datasource.id}-${props.pageId}`}
-          datasourceId={props.datasource.id}
           className={EntityClassNames.CONTEXT_MENU}
+          datasourceId={props.datasource.id}
+          entityId={`${props.datasource.id}-${props.pageId}`}
         />
       }
+      entityId={`${props.datasource.id}-${props.pageId}`}
+      icon={icon}
+      isDefaultExpanded={isDefaultExpanded}
+      key={props.datasource.id}
+      name={props.datasource.name}
       onToggle={getDatasourceStructure}
+      searchKeyword={props.searchKeyword}
+      step={props.step}
+      updateEntityName={updateDatasourceName}
     >
       <DatasourceStructureContainer
-        datasourceStructure={datasourceStructure}
         datasourceId={props.datasource.id}
+        datasourceStructure={datasourceStructure}
         step={props.step}
       />
     </Entity>
   );
-};
+}
 export default ExplorerDatasourceEntity;
diff --git a/app/client/src/pages/Editor/Explorer/Datasources/DatasourceField.tsx b/app/client/src/pages/Editor/Explorer/Datasources/DatasourceField.tsx
index 69fd774ea6..409bf6a7f3 100644
--- a/app/client/src/pages/Editor/Explorer/Datasources/DatasourceField.tsx
+++ b/app/client/src/pages/Editor/Explorer/Datasources/DatasourceField.tsx
@@ -84,14 +84,14 @@ type DatabaseFieldProps = {
   step: number;
 };
 
-export const DatabaseColumns = (props: DatabaseFieldProps) => {
+export function DatabaseColumns(props: DatabaseFieldProps) {
   const field = props.field;
   const fieldName = field.name;
   const fieldType = field.type;
   const icon = DATASOURCE_FIELD_ICONS_MAP[fieldType] || datasourceColumnIcon;
 
   const content = (
-    <Wrapper step={props.step + 1} className="t--datasource-column">
+    <Wrapper className="t--datasource-column" step={props.step + 1}>
       {icon}
       <Content>
         <FieldName>{fieldName}</FieldName>
@@ -102,11 +102,11 @@ export const DatabaseColumns = (props: DatabaseFieldProps) => {
 
   return (
     <Popover
-      minimal
-      position={Position.RIGHT_TOP}
       boundary={"viewport"}
       hoverCloseDelay={0}
       interactionKind={PopoverInteractionKind.HOVER}
+      minimal
+      position={Position.RIGHT_TOP}
     >
       {content}
       <Container>
@@ -118,6 +118,6 @@ export const DatabaseColumns = (props: DatabaseFieldProps) => {
       </Container>
     </Popover>
   );
-};
+}
 
 export default DatabaseColumns;
diff --git a/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStructure.tsx b/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStructure.tsx
index d85429c3b4..74599807fd 100644
--- a/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStructure.tsx
+++ b/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStructure.tsx
@@ -39,7 +39,7 @@ type DatasourceStructureProps = {
   datasourceId: string;
 };
 
-export const DatasourceStructure = (props: DatasourceStructureProps) => {
+export function DatasourceStructure(props: DatasourceStructureProps) {
   const dbStructure = props.dbStructure;
   const iconProps: IconProps = {
     width: 12,
@@ -66,34 +66,34 @@ export const DatasourceStructure = (props: DatasourceStructureProps) => {
 
   return (
     <Popover
-      canEscapeKeyClose={true}
-      isOpen={active}
-      className={`t--structure-template-menu`}
-      minimal
-      position={Position.RIGHT_TOP}
       boundary={"viewport"}
+      canEscapeKeyClose
+      className={`t--structure-template-menu`}
+      isOpen={active}
+      minimal
       onInteraction={(nextOpenState: boolean) => {
         if (!nextOpenState) {
           setActive(false);
         }
       }}
+      position={Position.RIGHT_TOP}
     >
       <StyledEntity
-        entityId={"DatasourceStructure"}
-        className={`datasourceStructure`}
-        name={dbStructure.name}
-        icon={datasourceTableIcon}
-        step={props.step}
-        active={active}
-        contextMenu={templateMenu}
         action={() => setActive(!active)}
+        active={active}
+        className={`datasourceStructure`}
+        contextMenu={templateMenu}
+        entityId={"DatasourceStructure"}
+        icon={datasourceTableIcon}
+        name={dbStructure.name}
+        step={props.step}
       >
         {columnsAndKeys.map((field, index) => {
           return (
             <DatasourceField
+              field={field}
               key={`${field.name}${index}`}
               step={props.step + 1}
-              field={field}
             />
           );
         })}
@@ -104,6 +104,6 @@ export const DatasourceStructure = (props: DatasourceStructureProps) => {
       />
     </Popover>
   );
-};
+}
 
 export default DatasourceStructure;
diff --git a/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStructureContainer.tsx b/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStructureContainer.tsx
index f45d859a0d..7199bc8049 100644
--- a/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStructureContainer.tsx
+++ b/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStructureContainer.tsx
@@ -4,7 +4,7 @@ import {
   DatasourceStructure as DatasourceStructureType,
   DatasourceTable,
 } from "entities/Datasource";
-import React, { memo, ReactNode } from "react";
+import React, { memo, ReactElement } from "react";
 import EntityPlaceholder from "../Entity/Placeholder";
 import { useEntityUpdateState } from "../hooks";
 import DatasourceStructure from "./DatasourceStructure";
@@ -15,32 +15,32 @@ type Props = {
   step: number;
 };
 
-export const DatasourceStructureContainer = memo((props: Props) => {
+const Container = (props: Props) => {
   const isLoading = useEntityUpdateState(props.datasourceId);
-  let view: ReactNode = <div />;
+  let view: ReactElement<Props> = <div />;
 
   if (!isLoading) {
-    if (
-      props.datasourceStructure &&
-      props.datasourceStructure.tables &&
-      props.datasourceStructure.tables.length
-    ) {
-      view = props.datasourceStructure.tables.map(
-        (structure: DatasourceTable) => {
-          return (
-            <Boxed
-              key={`${props.datasourceId}${structure.name}`}
-              step={OnboardingStep.DEPLOY}
-              show={structure.name === "public.standup_updates"}
-            >
-              <DatasourceStructure
-                dbStructure={structure}
-                step={props.step + 1}
-                datasourceId={props.datasourceId}
-              />
-            </Boxed>
-          );
-        },
+    if (props.datasourceStructure?.tables?.length) {
+      view = (
+        <>
+          {props.datasourceStructure.tables.map(
+            (structure: DatasourceTable) => {
+              return (
+                <Boxed
+                  key={`${props.datasourceId}${structure.name}`}
+                  show={structure.name === "public.standup_updates"}
+                  step={OnboardingStep.DEPLOY}
+                >
+                  <DatasourceStructure
+                    datasourceId={props.datasourceId}
+                    dbStructure={structure}
+                    step={props.step + 1}
+                  />
+                </Boxed>
+              );
+            },
+          )}
+        </>
       );
     } else {
       view = (
@@ -55,7 +55,9 @@ export const DatasourceStructureContainer = memo((props: Props) => {
     }
   }
 
-  return <>{view}</>;
-});
+  return view;
+};
+
+export const DatasourceStructureContainer = memo(Container);
 
 DatasourceStructureContainer.displayName = "DatasourceStructureContainer";
diff --git a/app/client/src/pages/Editor/Explorer/Datasources/QueryTemplates.tsx b/app/client/src/pages/Editor/Explorer/Datasources/QueryTemplates.tsx
index a0571999ab..838cf7408c 100644
--- a/app/client/src/pages/Editor/Explorer/Datasources/QueryTemplates.tsx
+++ b/app/client/src/pages/Editor/Explorer/Datasources/QueryTemplates.tsx
@@ -36,7 +36,7 @@ type QueryTemplatesProps = {
   datasourceId: string;
 };
 
-export const QueryTemplates = (props: QueryTemplatesProps) => {
+export function QueryTemplates(props: QueryTemplatesProps) {
   const dispatch = useDispatch();
   const params = useParams<ExplorerURLParams>();
   const actions = useSelector((state: AppState) => state.entities.actions);
@@ -91,8 +91,8 @@ export const QueryTemplates = (props: QueryTemplatesProps) => {
       {props.templates.map((template) => {
         return (
           <TemplateType
-            key={template.title}
             className={Classes.POPOVER_DISMISS}
+            key={template.title}
             onClick={() => createQueryAction(template)}
           >
             {template.title}
@@ -101,6 +101,6 @@ export const QueryTemplates = (props: QueryTemplatesProps) => {
       })}
     </Container>
   );
-};
+}
 
 export default QueryTemplates;
diff --git a/app/client/src/pages/Editor/Explorer/Entity/AddButton.tsx b/app/client/src/pages/Editor/Explorer/Entity/AddButton.tsx
index 4f5ffde562..77aea000ed 100644
--- a/app/client/src/pages/Editor/Explorer/Entity/AddButton.tsx
+++ b/app/client/src/pages/Editor/Explorer/Entity/AddButton.tsx
@@ -19,7 +19,7 @@ export const EntityAddButton = (props: {
   if (!props.onClick) return null;
   else {
     return (
-      <Wrapper onClick={handleClick} className={props.className}>
+      <Wrapper className={props.className} onClick={handleClick}>
         <span>+</span>
       </Wrapper>
     );
diff --git a/app/client/src/pages/Editor/Explorer/Entity/Collapse.tsx b/app/client/src/pages/Editor/Explorer/Entity/Collapse.tsx
index 9eddc7d519..e294ed6638 100644
--- a/app/client/src/pages/Editor/Explorer/Entity/Collapse.tsx
+++ b/app/client/src/pages/Editor/Explorer/Entity/Collapse.tsx
@@ -18,20 +18,20 @@ const CollapsedContainer = styled.div<{ step: number; active?: boolean }>`
     position: absolute;
   }
 `;
-export const EntityCollapse = (props: {
+export function EntityCollapse(props: {
   children: ReactNode;
   isOpen: boolean;
   step: number;
   active?: boolean;
-}) => {
+}) {
   if (!props.children) return null;
   return (
     <Collapse isOpen={props.isOpen}>
-      <CollapsedContainer step={props.step} active={props.active}>
+      <CollapsedContainer active={props.active} step={props.step}>
         {props.children}
       </CollapsedContainer>
     </Collapse>
   );
-};
+}
 
 export default EntityCollapse;
diff --git a/app/client/src/pages/Editor/Explorer/Entity/CollapseToggle.tsx b/app/client/src/pages/Editor/Explorer/Entity/CollapseToggle.tsx
index b062f140d8..4184636cfb 100644
--- a/app/client/src/pages/Editor/Explorer/Entity/CollapseToggle.tsx
+++ b/app/client/src/pages/Editor/Explorer/Entity/CollapseToggle.tsx
@@ -3,13 +3,13 @@ import { Icon, IconName } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
 import { Colors } from "constants/Colors";
 
-export const CollapseToggle = (props: {
+export function CollapseToggle(props: {
   isOpen: boolean;
   isVisible: boolean;
   onClick: () => void;
   disabled: boolean;
   className: string;
-}) => {
+}) {
   const handleClick = (e: any) => {
     props.onClick();
     e.stopPropagation();
@@ -18,15 +18,15 @@ export const CollapseToggle = (props: {
     ? IconNames.CARET_DOWN
     : IconNames.CARET_RIGHT;
 
-  if (!props.isVisible) return <span></span>;
+  if (!props.isVisible) return <span />;
   return (
     <Icon
       className={props.className}
+      color={props.disabled ? Colors.SLATE_GRAY : Colors.WHITE}
       icon={icon}
       onClick={handleClick}
-      color={props.disabled ? Colors.SLATE_GRAY : Colors.WHITE}
     />
   );
-};
+}
 
 export default CollapseToggle;
diff --git a/app/client/src/pages/Editor/Explorer/Entity/EntityProperty.tsx b/app/client/src/pages/Editor/Explorer/Entity/EntityProperty.tsx
index 62727d3adf..0ab85e06ea 100644
--- a/app/client/src/pages/Editor/Explorer/Entity/EntityProperty.tsx
+++ b/app/client/src/pages/Editor/Explorer/Entity/EntityProperty.tsx
@@ -143,7 +143,7 @@ const StyledPopoverContent = styled.div`
 `;
 
 const CollapseIcon = ControlIcons.COLLAPSE_CONTROL;
-const collapseIcon = <CollapseIcon width={10} height={8} color={Colors.ALTO} />;
+const collapseIcon = <CollapseIcon color={Colors.ALTO} height={8} width={10} />;
 
 export type EntityPropertyProps = {
   propertyName: string;
@@ -188,23 +188,23 @@ export const EntityProperty = memo((props: EntityPropertyProps) => {
   );
   if (showPopup) {
     propertyValue = (
-      <React.Fragment>
-        <StyledValue step={props.step} className="value">
+      <>
+        <StyledValue className="value" step={props.step}>
           {transformedValue(props.value)}
         </StyledValue>
         <Popover
           interactionKind={PopoverInteractionKind.HOVER}
-          position="left"
           modifiers={ContextMenuPopoverModifiers}
+          position="left"
         >
           {collapseIcon}
           {showPopup && (
             <StyledPopoverContent ref={popoverContentRef}>
               {!isString && (
                 <CurrentValueViewer
-                  theme={EditorTheme.DARK}
                   evaluatedValue={props.value}
                   hideLabel
+                  theme={EditorTheme.DARK}
                 />
               )}
               {isString && <pre>{props.value}</pre>}
@@ -212,21 +212,21 @@ export const EntityProperty = memo((props: EntityPropertyProps) => {
             </StyledPopoverContent>
           )}
         </Popover>
-      </React.Fragment>
+      </>
     );
   }
 
   return (
-    <Wrapper step={props.step} className={`${EntityClassNames.PROPERTY}`}>
+    <Wrapper className={`${EntityClassNames.PROPERTY}`} step={props.step}>
       <HighlightedCode
-        skin={Skin.DARK}
         className="binding"
-        ref={propertyRef}
-        onClick={copyBindingToClipboard}
         codeText={codeText}
         language={SYNTAX_HIGHLIGHTING_SUPPORTED_LANGUAGES.APPSMITH}
+        onClick={copyBindingToClipboard}
+        ref={propertyRef}
+        skin={Skin.DARK}
       />
-      <Icon icon="duplicate" iconSize={14} color={Colors.ALTO} />
+      <Icon color={Colors.ALTO} icon="duplicate" iconSize={14} />
       {propertyValue}
     </Wrapper>
   );
diff --git a/app/client/src/pages/Editor/Explorer/Entity/Loader.tsx b/app/client/src/pages/Editor/Explorer/Entity/Loader.tsx
index 1558cc18b5..e1149652c9 100644
--- a/app/client/src/pages/Editor/Explorer/Entity/Loader.tsx
+++ b/app/client/src/pages/Editor/Explorer/Entity/Loader.tsx
@@ -43,13 +43,13 @@ const Wrapper = styled.div`
     }
   }
 `;
-export const EntityLoader = (props: { isVisible: boolean }) => {
+export function EntityLoader(props: { isVisible: boolean }) {
   if (!props.isVisible) return null;
   return (
     <Wrapper>
-      <div></div>
+      <div />
     </Wrapper>
   );
-};
+}
 
 export default EntityLoader;
diff --git a/app/client/src/pages/Editor/Explorer/Entity/Name.tsx b/app/client/src/pages/Editor/Explorer/Entity/Name.tsx
index eb000a7d2a..c68dd2eefc 100644
--- a/app/client/src/pages/Editor/Explorer/Entity/Name.tsx
+++ b/app/client/src/pages/Editor/Explorer/Entity/Name.tsx
@@ -51,7 +51,7 @@ const replace = (
   );
   const final = [
     <span key={`tokenize-${keyIndex}`}>{str.slice(0, occurrenceIndex)}</span>,
-    <span key={`tokenize-${keyIndex}-token`} className={className}>
+    <span className={className} key={`tokenize-${keyIndex}-token`}>
       {token}
     </span>,
   ].concat(replace(rest, delimiter, className, keyIndex + 1));
@@ -198,8 +198,8 @@ export const EntityName = forwardRef(
       return (
         <Wrapper
           className={props.className}
-          ref={ref}
           onDoubleClick={enterEditMode}
+          ref={ref}
         >
           {searchHighlightedName}
         </Wrapper>
@@ -207,17 +207,17 @@ export const EntityName = forwardRef(
     return (
       <Wrapper>
         <EditableText
-          type="text"
           className={`${props.className} editing`}
           defaultValue={updatedName}
-          placeholder="Name"
-          onTextChanged={handleAPINameChange}
-          isInvalid={isInvalidName}
-          valueTransform={props.nameTransformFn || removeSpecialChars}
-          isEditingDefault
           editInteractionKind={EditInteractionKind.SINGLE}
+          isEditingDefault
+          isInvalid={isInvalidName}
           minimal
           onBlur={exitEditMode}
+          onTextChanged={handleAPINameChange}
+          placeholder="Name"
+          type="text"
+          valueTransform={props.nameTransformFn || removeSpecialChars}
         />
       </Wrapper>
     );
diff --git a/app/client/src/pages/Editor/Explorer/Entity/Placeholder.tsx b/app/client/src/pages/Editor/Explorer/Entity/Placeholder.tsx
index be0a47f0f0..536f1d6e5b 100644
--- a/app/client/src/pages/Editor/Explorer/Entity/Placeholder.tsx
+++ b/app/client/src/pages/Editor/Explorer/Entity/Placeholder.tsx
@@ -13,15 +13,15 @@ const Wrapper = styled.div<{ step: number }>`
   align-items: center;
 `;
 
-export const EntityPlaceholder = (props: {
+export function EntityPlaceholder(props: {
   step: number;
   children: ReactNode;
-}) => {
+}) {
   return (
     <Wrapper step={props.step}>
       <p>{props.children}</p>
     </Wrapper>
   );
-};
+}
 
 export default EntityPlaceholder;
diff --git a/app/client/src/pages/Editor/Explorer/Entity/index.tsx b/app/client/src/pages/Editor/Explorer/Entity/index.tsx
index fb00a146bb..508daf0760 100644
--- a/app/client/src/pages/Editor/Explorer/Entity/index.tsx
+++ b/app/client/src/pages/Editor/Explorer/Entity/index.tsx
@@ -161,38 +161,38 @@ export const Entity = forwardRef(
       >
         <EntityItem
           active={!!props.active}
-          step={props.step}
           spaced={!!props.children}
+          step={props.step}
         >
           <CollapseToggle
+            className={`${EntityClassNames.COLLAPSE_TOGGLE}`}
+            disabled={!!props.disabled}
             isOpen={isOpen}
             isVisible={!!props.children}
             onClick={toggleChildren}
-            disabled={!!props.disabled}
-            className={`${EntityClassNames.COLLAPSE_TOGGLE}`}
           />
           <IconWrapper onClick={handleClick}>{props.icon}</IconWrapper>
           <EntityName
-            entityId={props.entityId}
             className={`${EntityClassNames.NAME}`}
-            ref={itemRef}
+            entityId={props.entityId}
+            isEditing={!!props.updateEntityName && isEditing}
             name={props.name}
             nameTransformFn={props.onNameEdit}
-            isEditing={!!props.updateEntityName && isEditing}
-            updateEntityName={updateNameCallback}
+            ref={itemRef}
             searchKeyword={props.searchKeyword}
+            updateEntityName={updateNameCallback}
           />
           <IconWrapper className={EntityClassNames.RIGHT_ICON}>
             {props.rightIcon}
           </IconWrapper>
           <AddButton
-            onClick={props.onCreate}
             className={`${EntityClassNames.ADD_BUTTON}`}
+            onClick={props.onCreate}
           />
           {props.contextMenu}
           <Loader isVisible={isUpdating} />
         </EntityItem>
-        <Collapse step={props.step} isOpen={isOpen} active={props.active}>
+        <Collapse active={props.active} isOpen={isOpen} step={props.step}>
           {props.children}
         </Collapse>
       </Wrapper>
diff --git a/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx b/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx
index 7a5d860ee3..f2fafbe660 100644
--- a/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx
+++ b/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx
@@ -44,7 +44,7 @@ const StyledDivider = styled(Divider)`
   border-bottom-color: rgba(255, 255, 255, 0.1);
 `;
 
-const EntityExplorer = (props: IPanelProps) => {
+function EntityExplorer(props: IPanelProps) {
   const { applicationId } = useParams<ExplorerURLParams>();
 
   const searchInputRef: MutableRefObject<HTMLInputElement | null> = useRef(
@@ -86,22 +86,22 @@ const EntityExplorer = (props: IPanelProps) => {
 
   return (
     <Wrapper ref={explorerRef}>
-      <Search ref={searchInputRef} clear={clearSearch} />
+      <Search clear={clearSearch} ref={searchInputRef} />
       <ExplorerPageGroup
-        searchKeyword={searchKeyword}
-        step={0}
-        widgets={widgets}
         actions={actions}
         datasources={datasources}
         plugins={plugins}
+        searchKeyword={searchKeyword}
         showWidgetsSidebar={showWidgetsSidebar}
+        step={0}
+        widgets={widgets}
       />
       {noResults && (
         <NoResult
           className={Classes.DARK}
           description="Try modifying the search keyword."
-          title="No entities found"
           icon="search"
+          title="No entities found"
         />
       )}
       <StyledDivider />
@@ -109,7 +109,7 @@ const EntityExplorer = (props: IPanelProps) => {
       <ScrollIndicator containerRef={explorerRef} />
     </Wrapper>
   );
-};
+}
 
 EntityExplorer.displayName = "EntityExplorer";
 
diff --git a/app/client/src/pages/Editor/Explorer/ExplorerIcons.tsx b/app/client/src/pages/Editor/Explorer/ExplorerIcons.tsx
index 586412c6dd..e0cd508a76 100644
--- a/app/client/src/pages/Editor/Explorer/ExplorerIcons.tsx
+++ b/app/client/src/pages/Editor/Explorer/ExplorerIcons.tsx
@@ -19,42 +19,42 @@ const ENTITY_ICON_SIZE = 14;
 const PagesIcon = MenuIcons.PAGES_ICON;
 export const pageGroupIcon = (
   <PagesIcon
-    width={ENTITY_ICON_SIZE}
-    height={ENTITY_ICON_SIZE}
     color={Colors.ALTO}
+    height={ENTITY_ICON_SIZE}
+    width={ENTITY_ICON_SIZE}
   />
 );
 
 const PageIcon = MenuIcons.PAGE_ICON;
 export const pageIcon = (
   <PageIcon
-    width={ENTITY_ICON_SIZE}
-    height={ENTITY_ICON_SIZE}
     color={Colors.ALTO}
+    height={ENTITY_ICON_SIZE}
+    width={ENTITY_ICON_SIZE}
   />
 );
 
 export const homePageIcon = (
-  <Icon icon="home" iconSize={ENTITY_ICON_SIZE} color={Colors.JUNGLE_GREEN} />
+  <Icon color={Colors.JUNGLE_GREEN} icon="home" iconSize={ENTITY_ICON_SIZE} />
 );
 
 export const hiddenPageIcon = (
-  <Icon icon="eye-off" iconSize={ENTITY_ICON_SIZE} color={Colors.ALTO} />
+  <Icon color={Colors.ALTO} icon="eye-off" iconSize={ENTITY_ICON_SIZE} />
 );
 
 const WidgetIcon = MenuIcons.WIDGETS_COLORED_ICON;
 export const widgetIcon = (
-  <WidgetIcon width={ENTITY_ICON_SIZE} height={ENTITY_ICON_SIZE} keepColors />
+  <WidgetIcon height={ENTITY_ICON_SIZE} keepColors width={ENTITY_ICON_SIZE} />
 );
 
 const ApiIcon = MenuIcons.APIS_COLORED_ICON;
 export const apiIcon = (
-  <ApiIcon width={ENTITY_ICON_SIZE} height={ENTITY_ICON_SIZE} keepColors />
+  <ApiIcon height={ENTITY_ICON_SIZE} keepColors width={ENTITY_ICON_SIZE} />
 );
 
 const DBQueryIcon = MenuIcons.DATASOURCES_COLORED_ICON;
 export const dbQueryIcon = (
-  <DBQueryIcon width={ENTITY_ICON_SIZE} height={ENTITY_ICON_SIZE} keepColors />
+  <DBQueryIcon height={ENTITY_ICON_SIZE} keepColors width={ENTITY_ICON_SIZE} />
 );
 
 const QueryIconWrapper = styled.div`
@@ -72,57 +72,57 @@ const QueryIconWrapper = styled.div`
   }
 `;
 
-export const QueryIcon = (props: { plugin: Plugin }) => {
+export function QueryIcon(props: { plugin: Plugin }) {
   return (
     <QueryIconWrapper>
-      <img src={props.plugin.iconLocation} className="inner-image" />
-      <img src={QueryImageOutline} className="outer-image" />
+      <img className="inner-image" src={props.plugin.iconLocation} />
+      <img className="outer-image" src={QueryImageOutline} />
     </QueryIconWrapper>
   );
-};
+}
 
 const DataSourceIcon = MenuIcons.DATASOURCES_ICON;
 export const datasourceIcon = (
   <DataSourceIcon
-    width={ENTITY_ICON_SIZE}
-    height={ENTITY_ICON_SIZE}
     color={Colors.ALTO}
+    height={ENTITY_ICON_SIZE}
+    width={ENTITY_ICON_SIZE}
   />
 );
 
 const DataSourceTableIcon = MenuIcons.DATASOURCES_TABLE_ICON;
 export const datasourceTableIcon = (
   <DataSourceTableIcon
-    width={ENTITY_ICON_SIZE}
     height={ENTITY_ICON_SIZE}
     keepColors
+    width={ENTITY_ICON_SIZE}
   />
 );
 
 const PrimaryKeyIcon = MenuIcons.PRIMARY_KEY_ICON;
 export const primaryKeyIcon = (
   <PrimaryKeyIcon
-    width={ENTITY_ICON_SIZE}
     height={ENTITY_ICON_SIZE}
     keepColors
+    width={ENTITY_ICON_SIZE}
   />
 );
 
 export const ForeignKeyIcon = MenuIcons.FOREIGN_KEY_ICON;
 export const foreignKeyIcon = (
   <ForeignKeyIcon
-    width={ENTITY_ICON_SIZE}
     height={ENTITY_ICON_SIZE}
     keepColors
+    width={ENTITY_ICON_SIZE}
   />
 );
 
 const DatasourceColumnIcon = MenuIcons.DATASOURCE_COLUMN_ICON;
 export const datasourceColumnIcon = (
   <DatasourceColumnIcon
-    width={ENTITY_ICON_SIZE}
     height={ENTITY_ICON_SIZE}
     keepColors
+    width={ENTITY_ICON_SIZE}
   />
 );
 
@@ -134,7 +134,7 @@ export const DATASOURCE_FIELD_ICONS_MAP: Record<string, ReactNode> = {
 export const getWidgetIcon = (type: WidgetType) => {
   const WidgetIcon = WidgetIcons[type];
   if (WidgetIcon)
-    return <WidgetIcon width={ENTITY_ICON_SIZE} height={ENTITY_ICON_SIZE} />;
+    return <WidgetIcon height={ENTITY_ICON_SIZE} width={ENTITY_ICON_SIZE} />;
   return null;
 };
 
@@ -162,10 +162,10 @@ const StyledTag = styled.div<{ color: string }>`
   line-height: 16px;
 `;
 
-export const MethodTag = (props: { type: typeof HTTP_METHODS[number] }) => {
+export function MethodTag(props: { type: typeof HTTP_METHODS[number] }) {
   return (
     <StyledTag color={HTTP_METHOD_COLOR_MAP[props.type]}>
       {props.type}
     </StyledTag>
   );
-};
+}
diff --git a/app/client/src/pages/Editor/Explorer/ExplorerSearch.tsx b/app/client/src/pages/Editor/Explorer/ExplorerSearch.tsx
index 2bcfbd958c..895d8c98e4 100644
--- a/app/client/src/pages/Editor/Explorer/ExplorerSearch.tsx
+++ b/app/client/src/pages/Editor/Explorer/ExplorerSearch.tsx
@@ -71,12 +71,12 @@ export const ExplorerSearch = forwardRef(
       <ExplorerSearchWrapper>
         <Icon icon="search" iconSize={12} />
         <input
-          id={ENTITY_EXPLORER_SEARCH_ID}
-          type="text"
-          placeholder={props.placeholder || "Search entities..."}
-          ref={ref}
           autoComplete="off"
           autoFocus={props.autoFocus}
+          id={ENTITY_EXPLORER_SEARCH_ID}
+          placeholder={props.placeholder || "Search entities..."}
+          ref={ref}
+          type="text"
         />
         <Icon icon="cross" iconSize={12} onClick={props.clear} />
         <Underline className="underline" />
diff --git a/app/client/src/pages/Editor/Explorer/ExplorerTitle.tsx b/app/client/src/pages/Editor/Explorer/ExplorerTitle.tsx
index 6c99461aa9..21a0a7a0fe 100644
--- a/app/client/src/pages/Editor/Explorer/ExplorerTitle.tsx
+++ b/app/client/src/pages/Editor/Explorer/ExplorerTitle.tsx
@@ -12,12 +12,12 @@ const Wrapper = styled.div`
   }
 `;
 
-export const ExplorerTitle = () => {
+export function ExplorerTitle() {
   return (
     <Wrapper>
       <h1>EXPLORER</h1>
     </Wrapper>
   );
-};
+}
 
 export default ExplorerTitle;
diff --git a/app/client/src/pages/Editor/Explorer/JSDependencies.tsx b/app/client/src/pages/Editor/Explorer/JSDependencies.tsx
index 271ca850da..3762e2cc3c 100644
--- a/app/client/src/pages/Editor/Explorer/JSDependencies.tsx
+++ b/app/client/src/pages/Editor/Explorer/JSDependencies.tsx
@@ -45,7 +45,7 @@ const Help = styled(Icon)`
     fill: ${Colors.WHITE};
   }
 `;
-export const JSDependencies = () => {
+export function JSDependencies() {
   const [isOpen, setIsOpen] = useState(false);
   const openDocs = (name: string, url: string) => () => window.open(url, name);
   const dependencyList = extraLibraries.map((lib) => {
@@ -83,11 +83,11 @@ export const JSDependencies = () => {
       <Title onClick={toggleDependencies}>
         <Icon icon={icon} />
         <span>JS libraries you can use</span>
-        <Tooltip content={TooltipContent} position="top" boundary="viewport">
+        <Tooltip boundary="viewport" content={TooltipContent} position="top">
           <Help
+            color={Colors.DOVE_GRAY}
             icon="help"
             iconSize={12}
-            color={Colors.DOVE_GRAY}
             onClick={showDocs}
           />
         </Tooltip>
@@ -97,6 +97,6 @@ export const JSDependencies = () => {
       </Collapse>
     </Wrapper>
   );
-};
+}
 
 export default JSDependencies;
diff --git a/app/client/src/pages/Editor/Explorer/Onboarding/DBQueryGroup.tsx b/app/client/src/pages/Editor/Explorer/Onboarding/DBQueryGroup.tsx
index 4655694fbb..27d8db4984 100644
--- a/app/client/src/pages/Editor/Explorer/Onboarding/DBQueryGroup.tsx
+++ b/app/client/src/pages/Editor/Explorer/Onboarding/DBQueryGroup.tsx
@@ -36,7 +36,7 @@ const Wrapper = styled.div`
   padding-top: 25px;
 `;
 
-const DBQueryGroup = (props: any) => {
+function DBQueryGroup(props: any) {
   const pages = useSelector((state: AppState) => {
     return state.entities.pageList.pages;
   });
@@ -101,6 +101,6 @@ const DBQueryGroup = (props: any) => {
       )}
     </Wrapper>
   );
-};
+}
 
 export default DBQueryGroup;
diff --git a/app/client/src/pages/Editor/Explorer/Onboarding/Loading.tsx b/app/client/src/pages/Editor/Explorer/Onboarding/Loading.tsx
index 195b29ec9e..dc5e187f00 100644
--- a/app/client/src/pages/Editor/Explorer/Onboarding/Loading.tsx
+++ b/app/client/src/pages/Editor/Explorer/Onboarding/Loading.tsx
@@ -8,14 +8,14 @@ const SkeletonRows = styled.div<{ size: number }>`
   margin-top: 12px;
 `;
 
-const Loading = () => {
+function Loading() {
   return (
     <>
-      <SkeletonRows size={90} className={Classes.SKELETON} />
-      <SkeletonRows size={60} className={Classes.SKELETON} />
-      <SkeletonRows size={30} className={Classes.SKELETON} />
+      <SkeletonRows className={Classes.SKELETON} size={90} />
+      <SkeletonRows className={Classes.SKELETON} size={60} />
+      <SkeletonRows className={Classes.SKELETON} size={30} />
     </>
   );
-};
+}
 
 export default Loading;
diff --git a/app/client/src/pages/Editor/Explorer/Onboarding/index.tsx b/app/client/src/pages/Editor/Explorer/Onboarding/index.tsx
index c3f4adfbab..eda4021d48 100644
--- a/app/client/src/pages/Editor/Explorer/Onboarding/index.tsx
+++ b/app/client/src/pages/Editor/Explorer/Onboarding/index.tsx
@@ -17,7 +17,7 @@ const Wrapper = styled.div`
   overflow-y: auto;
 `;
 
-const OnboardingExplorer = (props: IPanelProps) => {
+function OnboardingExplorer(props: IPanelProps) {
   const wrapperRef = React.createRef<HTMLDivElement>();
 
   let node = <Loading />;
@@ -41,6 +41,6 @@ const OnboardingExplorer = (props: IPanelProps) => {
       <ScrollIndicator containerRef={wrapperRef} mode="DARK" />
     </Wrapper>
   );
-};
+}
 
 export default OnboardingExplorer;
diff --git a/app/client/src/pages/Editor/Explorer/Pages/PageContextMenu.tsx b/app/client/src/pages/Editor/Explorer/Pages/PageContextMenu.tsx
index 1df3d93587..7fe9728784 100644
--- a/app/client/src/pages/Editor/Explorer/Pages/PageContextMenu.tsx
+++ b/app/client/src/pages/Editor/Explorer/Pages/PageContextMenu.tsx
@@ -19,14 +19,14 @@ const CustomLabel = styled.div`
   align-items: center;
 `;
 
-export const PageContextMenu = (props: {
+export function PageContextMenu(props: {
   pageId: string;
   name: string;
   applicationId: string;
   className?: string;
   isDefaultPage: boolean;
   isHidden: boolean;
-}) => {
+}) {
   const dispatch = useDispatch();
 
   const deletePage = useCallback(
@@ -116,11 +116,11 @@ export const PageContextMenu = (props: {
       defaultText=""
       modifiers={ContextMenuPopoverModifiers}
       onSelect={noop}
-      selectedValue=""
       optionTree={optionTree}
+      selectedValue=""
       toggle={<ContextMenuTrigger />}
     />
   );
-};
+}
 
 export default PageContextMenu;
diff --git a/app/client/src/pages/Editor/Explorer/Pages/PageEntity.tsx b/app/client/src/pages/Editor/Explorer/Pages/PageEntity.tsx
index 557ead89eb..defdf54a3d 100644
--- a/app/client/src/pages/Editor/Explorer/Pages/PageEntity.tsx
+++ b/app/client/src/pages/Editor/Explorer/Pages/PageEntity.tsx
@@ -29,7 +29,7 @@ type ExplorerPageEntityProps = {
   showWidgetsSidebar: (pageId: string) => void;
 };
 
-export const ExplorerPageEntity = (props: ExplorerPageEntityProps) => {
+export function ExplorerPageEntity(props: ExplorerPageEntityProps) {
   const params = useParams<ExplorerURLParams>();
 
   const currentPageId = useSelector((state: AppState) => {
@@ -45,13 +45,13 @@ export const ExplorerPageEntity = (props: ExplorerPageEntityProps) => {
 
   const contextMenu = (
     <PageContextMenu
-      key={props.page.pageId}
       applicationId={params.applicationId}
-      pageId={props.page.pageId}
-      name={props.page.pageName}
       className={EntityClassNames.CONTEXT_MENU}
       isDefaultPage={props.page.isDefault}
       isHidden={!!props.page.isHidden}
+      key={props.page.pageId}
+      name={props.page.pageName}
+      pageId={props.page.pageId}
     />
   );
 
@@ -65,28 +65,28 @@ export const ExplorerPageEntity = (props: ExplorerPageEntityProps) => {
 
   return (
     <Entity
-      icon={icon}
-      name={props.page.pageName}
-      className="page"
-      step={props.step}
       action={switchPage}
-      entityId={props.page.pageId}
       active={isCurrentPage}
-      isDefaultExpanded={isCurrentPage || !!props.searchKeyword}
-      updateEntityName={(id, name) =>
-        updatePage(id, name, !!props.page.isHidden)
-      }
+      className="page"
       contextMenu={contextMenu}
+      entityId={props.page.pageId}
+      icon={icon}
+      isDefaultExpanded={isCurrentPage || !!props.searchKeyword}
+      name={props.page.pageName}
       onNameEdit={resolveAsSpaceChar}
       rightIcon={rightIcon}
       searchKeyword={props.searchKeyword}
+      step={props.step}
+      updateEntityName={(id, name) =>
+        updatePage(id, name, !!props.page.isHidden)
+      }
     >
       <ExplorerWidgetGroup
-        step={props.step + 1}
-        searchKeyword={props.searchKeyword}
-        widgets={props.widgets}
-        pageId={props.page.pageId}
         addWidgetsFn={addWidgetsFn}
+        pageId={props.page.pageId}
+        searchKeyword={props.searchKeyword}
+        step={props.step + 1}
+        widgets={props.widgets}
       />
 
       {getPluginGroups(
@@ -99,7 +99,7 @@ export const ExplorerPageEntity = (props: ExplorerPageEntityProps) => {
       )}
     </Entity>
   );
-};
+}
 
 ExplorerPageEntity.displayName = "ExplorerPageEntity";
 (ExplorerPageEntity as any).whyDidYouRender = {
diff --git a/app/client/src/pages/Editor/Explorer/Pages/PageGroup.tsx b/app/client/src/pages/Editor/Explorer/Pages/PageGroup.tsx
index aa10968696..25ed28a3c1 100644
--- a/app/client/src/pages/Editor/Explorer/Pages/PageGroup.tsx
+++ b/app/client/src/pages/Editor/Explorer/Pages/PageGroup.tsx
@@ -63,15 +63,15 @@ export const ExplorerPageGroup = memo((props: ExplorerPageGroupProps) => {
       return null;
     return (
       <ExplorerPageEntity
-        key={page.pageId}
-        step={props.step + 1}
-        widgets={pageWidgets}
         actions={pageActions}
         datasources={datasources}
+        key={page.pageId}
+        page={page}
         plugins={props.plugins}
         searchKeyword={props.searchKeyword}
-        page={page}
         showWidgetsSidebar={props.showWidgetsSidebar}
+        step={props.step + 1}
+        widgets={pageWidgets}
       />
     );
   });
@@ -80,14 +80,14 @@ export const ExplorerPageGroup = memo((props: ExplorerPageGroupProps) => {
 
   return (
     <Entity
-      name="Pages"
       className="group pages"
+      entityId="Pages"
       icon={pageGroupIcon}
       isDefaultExpanded
-      entityId="Pages"
-      step={props.step}
+      name="Pages"
       onCreate={createPageCallback}
       searchKeyword={props.searchKeyword}
+      step={props.step}
     >
       {pageEntities}
     </Entity>
diff --git a/app/client/src/pages/Editor/Explorer/PluginGroup/PluginGroup.tsx b/app/client/src/pages/Editor/Explorer/PluginGroup/PluginGroup.tsx
index 82920de11e..80afc5161c 100644
--- a/app/client/src/pages/Editor/Explorer/PluginGroup/PluginGroup.tsx
+++ b/app/client/src/pages/Editor/Explorer/PluginGroup/PluginGroup.tsx
@@ -54,21 +54,21 @@ const ExplorerPluginGroup = memo((props: ExplorerPluginGroupProps) => {
 
   return (
     <Entity
-      entityId={props.page.pageId + "_" + props.actionConfig?.types.join("_")}
-      step={props.step}
+      active={props.actionConfig?.isGroupActive(params, props.page.pageId)}
       className={`group ${props.actionConfig?.groupName
         .toLowerCase()
         .replace(/ /g, "")}`}
-      name={props.actionConfig?.groupName || "Plugin Group"}
+      disabled={disableGroup}
+      entityId={props.page.pageId + "_" + props.actionConfig?.types.join("_")}
       icon={props.actionConfig?.icon}
-      active={props.actionConfig?.isGroupActive(params, props.page.pageId)}
       isDefaultExpanded={
         props.actionConfig?.isGroupExpanded(params, props.page.pageId) ||
         !!props.searchKeyword ||
         !!props.datasources.length
       }
-      disabled={disableGroup}
+      name={props.actionConfig?.groupName || "Plugin Group"}
       onCreate={switchToCreateActionPage}
+      step={props.step}
     >
       {isEmpty ? (
         emptyNode
@@ -76,21 +76,21 @@ const ExplorerPluginGroup = memo((props: ExplorerPluginGroupProps) => {
         <>
           <ExplorerActionsGroup
             actions={props.actions}
-            step={props.step}
-            page={props.page}
-            searchKeyword={props.searchKeyword}
             config={props.actionConfig}
+            page={props.page}
             plugins={pluginGroups}
+            searchKeyword={props.searchKeyword}
+            step={props.step}
           />
           {props.datasources.map((datasource: Datasource) => {
             return (
               <ExplorerDatasourceEntity
-                key={datasource.id}
-                plugin={pluginGroups[datasource.pluginId]}
                 datasource={datasource}
-                step={props.step + 1}
-                searchKeyword={props.searchKeyword}
+                key={datasource.id}
                 pageId={props.page.pageId}
+                plugin={pluginGroups[datasource.pluginId]}
+                searchKeyword={props.searchKeyword}
+                step={props.step + 1}
               />
             );
           })}
diff --git a/app/client/src/pages/Editor/Explorer/TreeDropdown.tsx b/app/client/src/pages/Editor/Explorer/TreeDropdown.tsx
index 37e2b49a5d..bcb0adbf3c 100644
--- a/app/client/src/pages/Editor/Explorer/TreeDropdown.tsx
+++ b/app/client/src/pages/Editor/Explorer/TreeDropdown.tsx
@@ -100,10 +100,11 @@ export default function TreeDropdown(props: TreeDropdownProps) {
       selectedOption.type === option.value;
     return (
       <StyledMenuItem
-        className={option.className || "single-select"}
         active={isSelected}
-        key={option.value}
+        className={option.className || "single-select"}
         icon={option.id === "create" ? "plus" : undefined}
+        intent={option.intent}
+        key={option.value}
         onClick={
           option.children
             ? noop
@@ -113,14 +114,13 @@ export default function TreeDropdown(props: TreeDropdownProps) {
                 e.stopPropagation();
               }
         }
-        text={option.label}
-        intent={option.intent}
         popoverProps={{
           minimal: true,
           interactionKind: PopoverInteractionKind.CLICK,
           position: PopoverPosition.RIGHT,
           targetProps: { onClick: (e: any) => e.stopPropagation() },
         }}
+        text={option.label}
       >
         {option.children && option.children.map(renderTreeOption)}
       </StyledMenuItem>
@@ -132,29 +132,29 @@ export default function TreeDropdown(props: TreeDropdownProps) {
   const defaultToggle = (
     <StyledDropDownContainer>
       <BlueprintButton
+        className={`t--open-dropdown-${defaultText.split(" ").join("-")} ${
+          selectedLabelModifier ? "code-highlight" : ""
+        }`}
         rightIcon={IconNames.CHEVRON_DOWN}
         text={
           selectedLabelModifier
             ? selectedLabelModifier(selectedOption, displayValue)
             : selectedOption.label
         }
-        className={`t--open-dropdown-${defaultText.split(" ").join("-")} ${
-          selectedLabelModifier ? "code-highlight" : ""
-        }`}
       />
     </StyledDropDownContainer>
   );
   return (
     <StyledPopover
+      className={props.className}
+      content={menuItems}
       isOpen={isOpen}
       minimal
-      content={menuItems}
-      position={PopoverPosition.AUTO_END}
-      className={props.className}
       modifiers={props.modifiers}
       onClose={() => {
         setIsOpen(false);
       }}
+      position={PopoverPosition.AUTO_END}
       targetProps={{
         onClick: (e: any) => {
           setIsOpen(true);
diff --git a/app/client/src/pages/Editor/Explorer/Widgets/WidgetContextMenu.tsx b/app/client/src/pages/Editor/Explorer/Widgets/WidgetContextMenu.tsx
index c28bf0bfae..c721c3533e 100644
--- a/app/client/src/pages/Editor/Explorer/Widgets/WidgetContextMenu.tsx
+++ b/app/client/src/pages/Editor/Explorer/Widgets/WidgetContextMenu.tsx
@@ -10,11 +10,11 @@ import { AppState } from "reducers";
 import { updateWidgetPropertyRequest } from "actions/controlActions";
 import { RenderModes, WidgetTypes } from "constants/WidgetConstants";
 
-export const WidgetContextMenu = (props: {
+export function WidgetContextMenu(props: {
   widgetId: string;
   pageId: string;
   className?: string;
-}) => {
+}) {
   const { widgetId } = props;
   const parentId = useSelector((state: AppState) => {
     // console.log(state.ui.pageWidgets[props.pageId], props.widgetId);
@@ -67,10 +67,9 @@ export const WidgetContextMenu = (props: {
   return (
     <TreeDropdown
       className={props.className}
-      modifiers={ContextMenuPopoverModifiers}
       defaultText=""
+      modifiers={ContextMenuPopoverModifiers}
       onSelect={noop}
-      selectedValue=""
       optionTree={[
         {
           value: "rename",
@@ -84,9 +83,10 @@ export const WidgetContextMenu = (props: {
           intent: "danger",
         },
       ]}
+      selectedValue=""
       toggle={<ContextMenuTrigger />}
     />
   );
-};
+}
 
 export default WidgetContextMenu;
diff --git a/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx b/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx
index 2c7671ca22..aec72768e8 100644
--- a/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx
+++ b/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx
@@ -140,69 +140,68 @@ export const WidgetEntity = memo((props: WidgetEntityProps) => {
     return widgetType === "MODAL_WIDGET" ? widgetId : parentModalId;
   }, [widgetType, widgetId, parentModalId]);
 
-  if (UNREGISTERED_WIDGETS.indexOf(props.widgetType) > -1)
-    return <React.Fragment />;
+  if (UNREGISTERED_WIDGETS.indexOf(props.widgetType) > -1) return null;
 
   const contextMenu = (
     <WidgetContextMenu
-      widgetId={props.widgetId}
-      pageId={props.pageId}
       className={EntityClassNames.CONTEXT_MENU}
+      pageId={props.pageId}
+      widgetId={props.widgetId}
     />
   );
 
   return (
     <Entity
-      key={props.widgetId}
-      className="widget"
-      active={isWidgetSelected}
       action={navigateToWidget}
-      icon={getWidgetIcon(props.widgetType)}
-      name={props.widgetName}
+      active={isWidgetSelected}
+      className="widget"
+      contextMenu={props.pageId === pageId && contextMenu}
       entityId={props.widgetId}
-      step={props.step}
-      updateEntityName={props.pageId === pageId ? updateWidgetName : undefined}
-      searchKeyword={props.searchKeyword}
+      icon={getWidgetIcon(props.widgetType)}
       isDefaultExpanded={
         shouldExpand ||
         (!!props.searchKeyword && !!props.childWidgets) ||
         !!props.isDefaultExpanded
       }
-      contextMenu={props.pageId === pageId && contextMenu}
+      key={props.widgetId}
+      name={props.widgetName}
+      searchKeyword={props.searchKeyword}
+      step={props.step}
+      updateEntityName={props.pageId === pageId ? updateWidgetName : undefined}
     >
       {props.childWidgets &&
         props.childWidgets.length > 0 &&
         props.childWidgets.map((child) => (
           <WidgetEntity
+            childWidgets={child.children}
+            key={child.widgetId}
+            pageId={props.pageId}
+            parentModalId={parentModalIdForChildren}
+            searchKeyword={props.searchKeyword}
             step={props.step + 1}
             widgetId={child.widgetId}
             widgetName={child.widgetName}
             widgetType={child.type}
-            childWidgets={child.children}
-            key={child.widgetId}
-            searchKeyword={props.searchKeyword}
-            pageId={props.pageId}
-            parentModalId={parentModalIdForChildren}
           />
         ))}
       {!(props.childWidgets && props.childWidgets.length > 0) &&
         pageId === props.pageId && (
           <CurrentPageEntityProperties
-            key={props.widgetId}
-            entityType={ENTITY_TYPE.WIDGET}
             entityName={props.widgetName}
+            entityType={ENTITY_TYPE.WIDGET}
+            key={props.widgetId}
             step={props.step + 1}
           />
         )}
       {!(props.childWidgets && props.childWidgets.length > 0) &&
         pageId !== props.pageId && (
           <EntityProperties
-            key={props.widgetId}
-            entityType={ENTITY_TYPE.WIDGET}
-            entityName={props.widgetName}
-            step={props.step + 1}
-            pageId={props.pageId}
             entityId={props.widgetId}
+            entityName={props.widgetName}
+            entityType={ENTITY_TYPE.WIDGET}
+            key={props.widgetId}
+            pageId={props.pageId}
+            step={props.step + 1}
           />
         )}
     </Entity>
diff --git a/app/client/src/pages/Editor/Explorer/Widgets/WidgetGroup.tsx b/app/client/src/pages/Editor/Explorer/Widgets/WidgetGroup.tsx
index 611606f178..4b42a13ced 100644
--- a/app/client/src/pages/Editor/Explorer/Widgets/WidgetGroup.tsx
+++ b/app/client/src/pages/Editor/Explorer/Widgets/WidgetGroup.tsx
@@ -39,12 +39,12 @@ export const ExplorerWidgetGroup = memo((props: ExplorerWidgetGroupProps) => {
     <EntityPlaceholder step={props.step + 1}>
       No widgets yet. Please{" "}
       {params.pageId !== props.pageId ? (
-        <React.Fragment>
+        <>
           <StyledLink to={BUILDER_PAGE_URL(params.applicationId, props.pageId)}>
             switch to this page
           </StyledLink>
           ,&nbsp;then&nbsp;
-        </React.Fragment>
+        </>
       ) : (
         "  "
       )}
@@ -55,30 +55,30 @@ export const ExplorerWidgetGroup = memo((props: ExplorerWidgetGroupProps) => {
 
   return (
     <Entity
-      key={props.pageId + "_widgets"}
-      icon={widgetIcon}
       className={`group widgets ${props.addWidgetsFn ? "current" : ""}`}
-      step={props.step}
-      name="Widgets"
       disabled={!props.widgets && !!props.searchKeyword}
       entityId={props.pageId + "_widgets"}
+      icon={widgetIcon}
       isDefaultExpanded={
         !!props.searchKeyword ||
         (params.pageId === props.pageId && !!selectedWidget)
       }
+      key={props.pageId + "_widgets"}
+      name="Widgets"
       onCreate={props.addWidgetsFn}
       searchKeyword={props.searchKeyword}
+      step={props.step}
     >
       {props.widgets?.children?.map((child) => (
         <WidgetEntity
+          childWidgets={child.children}
+          key={child.widgetId}
+          pageId={props.pageId}
+          searchKeyword={props.searchKeyword}
+          step={props.step + 1}
           widgetId={child.widgetId}
           widgetName={child.widgetName}
           widgetType={child.type}
-          childWidgets={child.children}
-          step={props.step + 1}
-          key={child.widgetId}
-          searchKeyword={props.searchKeyword}
-          pageId={props.pageId}
         />
       ))}
       {(!props.widgets?.children || props.widgets?.children.length === 0) &&
diff --git a/app/client/src/pages/Editor/Explorer/index.tsx b/app/client/src/pages/Editor/Explorer/index.tsx
index 24299d13ee..b80797f153 100644
--- a/app/client/src/pages/Editor/Explorer/index.tsx
+++ b/app/client/src/pages/Editor/Explorer/index.tsx
@@ -5,7 +5,7 @@ import { inOnboarding, isAddWidgetComplete } from "sagas/OnboardingSagas";
 import EntityExplorer from "./EntityExplorer";
 import OnboardingExplorer from "./Onboarding";
 
-const ExplorerContent = (props: IPanelProps) => {
+function ExplorerContent(props: IPanelProps) {
   const isInOnboarding = useSelector(inOnboarding);
   const addWidgetComplete = useSelector(isAddWidgetComplete);
 
@@ -14,6 +14,6 @@ const ExplorerContent = (props: IPanelProps) => {
   }
 
   return <EntityExplorer {...props} />;
-};
+}
 
 export default ExplorerContent;
diff --git a/app/client/src/pages/Editor/FormControl.tsx b/app/client/src/pages/Editor/FormControl.tsx
index b5e56f12c6..9c895f637b 100644
--- a/app/client/src/pages/Editor/FormControl.tsx
+++ b/app/client/src/pages/Editor/FormControl.tsx
@@ -11,7 +11,7 @@ interface FormControlProps {
   multipleConfig?: ControlProps[];
 }
 
-const FormControl = (props: FormControlProps) => {
+function FormControl(props: FormControlProps) {
   const formValues = useSelector((state) =>
     getFormValues(props.formName)(state),
   );
@@ -28,6 +28,6 @@ const FormControl = (props: FormControlProps) => {
       )}
     </div>
   );
-};
+}
 
 export default FormControl;
diff --git a/app/client/src/pages/Editor/GlobalHotKeys.tsx b/app/client/src/pages/Editor/GlobalHotKeys.tsx
index 2036d76a9a..a172220d72 100644
--- a/app/client/src/pages/Editor/GlobalHotKeys.tsx
+++ b/app/client/src/pages/Editor/GlobalHotKeys.tsx
@@ -51,8 +51,8 @@ class GlobalHotKeys extends React.Component<Props> {
     return (
       <Hotkeys>
         <Hotkey
-          global={true}
           combo="mod + f"
+          global
           label="Search entities"
           onKeyDown={(e: any) => {
             const entitySearchInput = document.getElementById(
@@ -68,32 +68,32 @@ class GlobalHotKeys extends React.Component<Props> {
           }}
         />
         <Hotkey
+          allowInInput={false}
           combo="mod + k"
+          global
+          label="Show omnibar"
           onKeyDown={(e: KeyboardEvent) => {
             console.log("toggleShowGlobalSearchModal");
             e.preventDefault();
             this.props.toggleShowGlobalSearchModal();
             AnalyticsUtil.logEvent("OPEN_OMNIBAR", { source: "HOTKEY_COMBO" });
           }}
-          allowInInput={false}
-          label="Show omnibar"
-          global={true}
         />
         <Hotkey
-          global={true}
           combo="mod + d"
-          label="Open Debugger"
+          global
           group="Canvas"
+          label="Open Debugger"
           onKeyDown={() => {
             this.props.openDebugger();
           }}
           preventDefault
         />
         <Hotkey
-          global={true}
           combo="mod + c"
-          label="Copy Widget"
+          global
           group="Canvas"
+          label="Copy Widget"
           onKeyDown={(e: any) => {
             if (this.stopPropagationIfWidgetSelected(e)) {
               this.props.copySelectedWidget();
@@ -101,19 +101,19 @@ class GlobalHotKeys extends React.Component<Props> {
           }}
         />
         <Hotkey
-          global={true}
           combo="mod + v"
-          label="Paste Widget"
+          global
           group="Canvas"
+          label="Paste Widget"
           onKeyDown={() => {
             this.props.pasteCopiedWidget();
           }}
         />
         <Hotkey
-          global={true}
           combo="backspace"
-          label="Delete Widget"
+          global
           group="Canvas"
+          label="Delete Widget"
           onKeyDown={(e: any) => {
             if (this.stopPropagationIfWidgetSelected(e) && isMac()) {
               this.props.deleteSelectedWidget();
@@ -121,10 +121,10 @@ class GlobalHotKeys extends React.Component<Props> {
           }}
         />
         <Hotkey
-          global={true}
           combo="del"
-          label="Delete Widget"
+          global
           group="Canvas"
+          label="Delete Widget"
           onKeyDown={(e: any) => {
             if (this.stopPropagationIfWidgetSelected(e)) {
               this.props.deleteSelectedWidget();
@@ -132,10 +132,10 @@ class GlobalHotKeys extends React.Component<Props> {
           }}
         />
         <Hotkey
-          global={true}
           combo="mod + x"
-          label="Cut Widget"
+          global
           group="Canvas"
+          label="Cut Widget"
           onKeyDown={(e: any) => {
             if (this.stopPropagationIfWidgetSelected(e)) {
               this.props.cutSelectedWidget();
diff --git a/app/client/src/pages/Editor/HelpButton.tsx b/app/client/src/pages/Editor/HelpButton.tsx
index 9668cb2efa..743cbe35f2 100644
--- a/app/client/src/pages/Editor/HelpButton.tsx
+++ b/app/client/src/pages/Editor/HelpButton.tsx
@@ -31,9 +31,9 @@ const StyledTrigger = styled.div`
 const Trigger = withTheme(({ theme }: { theme: Theme }) => (
   <StyledTrigger>
     <Icon
+      fillColor={theme.colors.globalSearch.helpIcon}
       name="help"
       size={IconSize.XS}
-      fillColor={theme.colors.globalSearch.helpIcon}
     />
   </StyledTrigger>
 ));
@@ -41,29 +41,29 @@ const Trigger = withTheme(({ theme }: { theme: Theme }) => (
 const onOpened = () => {
   AnalyticsUtil.logEvent("OPEN_HELP", { page: "Editor" });
 };
-const HelpButton = () => {
+function HelpButton() {
   return (
     <Popover
+      minimal
       modifiers={{
         offset: {
           enabled: true,
           offset: "0, 6",
         },
       }}
-      minimal
-      position={Position.BOTTOM_RIGHT}
       onOpened={onOpened}
       popoverClassName="navbar-help-popover"
+      position={Position.BOTTOM_RIGHT}
     >
       <>
         <HelpPopoverStyle />
         <Trigger />
       </>
       <div style={{ width: HELP_MODAL_WIDTH }}>
-        <DocumentationSearch hitsPerPage={4} hideSearch hideMinimizeBtn />
+        <DocumentationSearch hideMinimizeBtn hideSearch hitsPerPage={4} />
       </div>
     </Popover>
   );
-};
+}
 
 export default HelpButton;
diff --git a/app/client/src/pages/Editor/MainContainer.tsx b/app/client/src/pages/Editor/MainContainer.tsx
index 71ccccff07..c1de213d94 100644
--- a/app/client/src/pages/Editor/MainContainer.tsx
+++ b/app/client/src/pages/Editor/MainContainer.tsx
@@ -20,19 +20,19 @@ const EditorContainer = styled.div`
   width: calc(100vw - ${(props) => props.theme.sidebarWidth});
 `;
 
-const MainContainer = () => {
+function MainContainer() {
   return (
     <Container>
       <Sidebar />
       <EditorContainer>
         <Switch>
-          <SentryRoute exact path={BUILDER_URL} component={WidgetsEditor} />
+          <SentryRoute component={WidgetsEditor} exact path={BUILDER_URL} />
           <SentryRoute component={EditorsRouter} />
         </Switch>
       </EditorContainer>
     </Container>
   );
-};
+}
 
 MainContainer.displayName = "MainContainer";
 
diff --git a/app/client/src/pages/Editor/MainContainerLayoutControl.tsx b/app/client/src/pages/Editor/MainContainerLayoutControl.tsx
index 89034497e5..c3ccfff169 100644
--- a/app/client/src/pages/Editor/MainContainerLayoutControl.tsx
+++ b/app/client/src/pages/Editor/MainContainerLayoutControl.tsx
@@ -71,7 +71,7 @@ const LayoutControlWrapper = styled.div`
   }
 `;
 
-export const MainContainerLayoutControl: React.FC<any> = () => {
+export function MainContainerLayoutControl() {
   const appId = useSelector(getCurrentApplicationId);
   const appLayout = useSelector(getCurrentApplicationLayout);
   const layoutOptions = AppsmithLayouts.map((each) => {
@@ -105,7 +105,6 @@ export const MainContainerLayoutControl: React.FC<any> = () => {
     <LayoutControlWrapper>
       <div className="layout-control t--layout-control-wrapper">
         <Dropdown
-          width={"30px"}
           SelectedValueNode={({ selected }) => {
             return (
               <Icon
@@ -116,12 +115,13 @@ export const MainContainerLayoutControl: React.FC<any> = () => {
             );
           }}
           className="layout-control"
-          showDropIcon={false}
+          onSelect={noop}
           options={layoutOptions}
           selected={selectedLayout || layoutOptions[0]}
-          onSelect={noop}
+          showDropIcon={false}
+          width={"30px"}
         />
       </div>
     </LayoutControlWrapper>
   );
-};
+}
diff --git a/app/client/src/pages/Editor/PageListSidebar/PageListItem.tsx b/app/client/src/pages/Editor/PageListSidebar/PageListItem.tsx
index 8bc395b6a7..34e95c5bfd 100644
--- a/app/client/src/pages/Editor/PageListSidebar/PageListItem.tsx
+++ b/app/client/src/pages/Editor/PageListSidebar/PageListItem.tsx
@@ -86,32 +86,32 @@ const PageListItem = withTheme((props: PageListItemProps) => {
   );
   return (
     <PageListItemWrapper
-      onClick={() => props.switchPage(props.id)}
       active={props.active}
       className={`t--page-sidebar-${props.name}`}
+      onClick={() => props.switchPage(props.id)}
     >
       <div>
         {pageIcon}
         <Tooltip content="Double click to edit">
           <EditableText
-            type="text"
-            placeholder="Enter page name"
+            className="t--page-list-item"
             defaultValue={props.name}
             editInteractionKind={EditInteractionKind.DOUBLE}
-            onTextChanged={onEditPageName}
             hideEditIcon
-            className="t--page-list-item"
+            onTextChanged={onEditPageName}
+            placeholder="Enter page name"
+            type="text"
           />
         </Tooltip>
       </div>
       <ContextDropdown
+        className="more t--page-sidebar-menu-actions"
         options={props.contextActions}
         toggle={{
           type: "icon",
           icon: "MORE_VERTICAL_CONTROL",
           iconSize: props.theme.fontSizes[6],
         }}
-        className="more t--page-sidebar-menu-actions"
       />
     </PageListItemWrapper>
   );
diff --git a/app/client/src/pages/Editor/Popper.tsx b/app/client/src/pages/Editor/Popper.tsx
index 324409f8c7..689d659faa 100644
--- a/app/client/src/pages/Editor/Popper.tsx
+++ b/app/client/src/pages/Editor/Popper.tsx
@@ -15,7 +15,7 @@ export type PopperProps = {
   isOpen: boolean;
   themeMode?: ThemeMode;
   targetNode?: Element;
-  children: JSX.Element;
+  children: JSX.Element | null;
   placement: Placement;
   modifiers?: Partial<PopperOptions["modifiers"]>;
   isDraggable?: boolean;
@@ -42,13 +42,13 @@ const DragHandleBlock = styled.div`
   clip-path: inset(-2px 0px -2px -2px);
 `;
 
-export const PopperDragHandle: React.FC<any> = () => {
+export function PopperDragHandle() {
   return (
     <DragHandleBlock>
       <DragHandleIcon />
     </DragHandleBlock>
   );
-};
+}
 
 /* eslint-disable react/display-name */
 export default (props: PopperProps) => {
@@ -120,7 +120,7 @@ export default (props: PopperProps) => {
           position,
           () => (
             <ThemeProvider theme={popperTheme}>
-              <PopperDragHandle {...props} />
+              <PopperDragHandle />
             </ThemeProvider>
           ),
         );
diff --git a/app/client/src/pages/Editor/PropertyPane/Generator.tsx b/app/client/src/pages/Editor/PropertyPane/Generator.tsx
index c14ee9bdb2..1b9a9dd690 100644
--- a/app/client/src/pages/Editor/PropertyPane/Generator.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/Generator.tsx
@@ -28,12 +28,12 @@ export const generatePropertyControl = (
       const sectionConfig: PropertyPaneSectionConfig = config as PropertyPaneSectionConfig;
       return (
         <PropertySection
-          key={config.id + props.id}
-          id={config.id || sectionConfig.sectionName}
-          name={sectionConfig.sectionName}
           hidden={sectionConfig.hidden}
-          propertyPath={sectionConfig.propertySectionPath}
+          id={config.id || sectionConfig.sectionName}
           isDefaultOpen
+          key={config.id + props.id}
+          name={sectionConfig.sectionName}
+          propertyPath={sectionConfig.propertySectionPath}
         >
           {config.children && generatePropertyControl(config.children, props)}
         </PropertySection>
@@ -52,15 +52,15 @@ export const generatePropertyControl = (
   });
 };
 
-export const PropertyControlsGenerator = (
+export function PropertyControlsGenerator(
   props: PropertyControlsGeneratorProps,
-) => {
+) {
   const config = WidgetFactory.getWidgetPropertyPaneConfig(props.type);
   return (
     <>
       {generatePropertyControl(config as readonly PropertyPaneConfig[], props)}
     </>
   );
-};
+}
 
 export default PropertyControlsGenerator;
diff --git a/app/client/src/pages/Editor/PropertyPane/PanelPropertiesEditor.tsx b/app/client/src/pages/Editor/PropertyPane/PanelPropertiesEditor.tsx
index 91585346e6..3f41f5af3a 100644
--- a/app/client/src/pages/Editor/PropertyPane/PanelPropertiesEditor.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PanelPropertiesEditor.tsx
@@ -19,7 +19,7 @@ import PropertyPaneTitle from "../PropertyPaneTitle";
 import { BindingText } from "../APIEditor/Form";
 import { PropertyControlsWrapper } from ".";
 
-const PanelHeader = (props: PanelHeaderProps) => {
+function PanelHeader(props: PanelHeaderProps) {
   return (
     <div
       onClick={(e: any) => {
@@ -27,10 +27,6 @@ const PanelHeader = (props: PanelHeaderProps) => {
       }}
     >
       <PropertyPaneTitle
-        title={props.title}
-        updatePropertyTitle={props.updatePropertyTitle}
-        onBackClick={props.closePanel}
-        isPanelTitle={true}
         actions={[
           {
             tooltipContent: (
@@ -46,22 +42,26 @@ const PanelHeader = (props: PanelHeaderProps) => {
             tooltipContent: "Close",
             icon: (
               <Icon
+                className={"t--property-pane-close-btn"}
+                icon="cross"
+                iconSize={16}
                 onClick={(e: any) => {
                   props.hidePropertyPane();
                   e.preventDefault();
                   e.stopPropagation();
                 }}
-                iconSize={16}
-                icon="cross"
-                className={"t--property-pane-close-btn"}
               />
             ),
           },
         ]}
+        isPanelTitle
+        onBackClick={props.closePanel}
+        title={props.title}
+        updatePropertyTitle={props.updatePropertyTitle}
       />
     </div>
   );
-};
+}
 
 const updateConfigPaths = (config: PropertyPaneConfig[], basePath: string) => {
   return config.map((_childConfig) => {
@@ -82,11 +82,11 @@ const updateConfigPaths = (config: PropertyPaneConfig[], basePath: string) => {
   });
 };
 
-export const PanelPropertiesEditor = (
+export function PanelPropertiesEditor(
   props: PanelPropertiesEditorProps &
     PanelPropertiesEditorPanelProps &
     IPanelProps,
-) => {
+) {
   const dispatch = useDispatch();
   const widgetProperties: any = useSelector(getWidgetPropsForPropertyPane);
   const hidePropertyPane = useCallback(() => {
@@ -183,10 +183,10 @@ export const PanelPropertiesEditor = (
   return (
     <>
       <PanelHeader
+        closePanel={closePanel}
+        hidePropertyPane={hidePropertyPane}
         isEditable={panelConfig.editableTitle}
         propertyName={panelConfig.titlePropertyName}
-        hidePropertyPane={hidePropertyPane}
-        closePanel={closePanel}
         title={panelProps[panelConfig.titlePropertyName]}
         updatePropertyTitle={updatePropertyTitle}
       />
@@ -201,7 +201,7 @@ export const PanelPropertiesEditor = (
       </PropertyControlsWrapper>
     </>
   );
-};
+}
 
 interface PanelPropertiesEditorProps {
   panelProps: any;
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
index 9cb33fdf35..c5297e4b87 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
@@ -347,30 +347,30 @@ const PropertyControl = memo((props: Props) => {
           }
         >
           <Boxed
-            step={OnboardingStep.DEPLOY}
             show={
               propertyName !== "isRequired" && propertyName !== "isDisabled"
             }
+            step={OnboardingStep.DEPLOY}
           >
             <ControlPropertyLabelContainer>
               <PropertyHelpLabel
-                tooltip={props.helpText}
                 label={label}
                 theme={props.theme}
+                tooltip={props.helpText}
               />
               {isConvertible && (
                 <JSToggleButton
                   active={isDynamic}
-                  onClick={() => toggleDynamicProperty(propertyName, isDynamic)}
                   className={`t--js-toggle ${isDynamic ? "is-active" : ""}`}
+                  onClick={() => toggleDynamicProperty(propertyName, isDynamic)}
                 >
                   <ControlIcons.JS_TOGGLE />
                 </JSToggleButton>
               )}
             </ControlPropertyLabelContainer>
             <Indicator
-              step={OnboardingStep.ADD_INPUT_WIDGET}
               show={propertyName === "onSubmit"}
+              step={OnboardingStep.ADD_INPUT_WIDGET}
             >
               {PropertyControlFactory.createControl(
                 config,
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyHelpLabel.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyHelpLabel.tsx
index 3b65c8b79a..671cfd3a3d 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertyHelpLabel.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertyHelpLabel.tsx
@@ -9,17 +9,17 @@ type Props = {
   theme?: EditorTheme;
 };
 
-const PropertyHelpLabel = (props: Props) => {
+function PropertyHelpLabel(props: Props) {
   const toolTipDefined = props.tooltip !== undefined;
   if (!props.label) {
-    return <></>;
+    return null;
   }
   return (
     <Tooltip
-      disabled={!toolTipDefined}
       content={props.tooltip || ""}
-      position={Position.TOP}
+      disabled={!toolTipDefined}
       hoverOpenDelay={200}
+      position={Position.TOP}
     >
       <div
         style={{
@@ -27,6 +27,7 @@ const PropertyHelpLabel = (props: Props) => {
         }}
       >
         <label
+          className={`t--property-control-label`}
           style={
             toolTipDefined
               ? {
@@ -34,7 +35,6 @@ const PropertyHelpLabel = (props: Props) => {
                 }
               : {}
           }
-          className={`t--property-control-label`}
         >
           {props.label}
         </label>
@@ -55,6 +55,6 @@ const PropertyHelpLabel = (props: Props) => {
       </div>
     </Tooltip>
   );
-};
+}
 
 export default PropertyHelpLabel;
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyPaneGenerator.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyPaneGenerator.tsx
index c14ee9bdb2..1b9a9dd690 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertyPaneGenerator.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertyPaneGenerator.tsx
@@ -28,12 +28,12 @@ export const generatePropertyControl = (
       const sectionConfig: PropertyPaneSectionConfig = config as PropertyPaneSectionConfig;
       return (
         <PropertySection
-          key={config.id + props.id}
-          id={config.id || sectionConfig.sectionName}
-          name={sectionConfig.sectionName}
           hidden={sectionConfig.hidden}
-          propertyPath={sectionConfig.propertySectionPath}
+          id={config.id || sectionConfig.sectionName}
           isDefaultOpen
+          key={config.id + props.id}
+          name={sectionConfig.sectionName}
+          propertyPath={sectionConfig.propertySectionPath}
         >
           {config.children && generatePropertyControl(config.children, props)}
         </PropertySection>
@@ -52,15 +52,15 @@ export const generatePropertyControl = (
   });
 };
 
-export const PropertyControlsGenerator = (
+export function PropertyControlsGenerator(
   props: PropertyControlsGeneratorProps,
-) => {
+) {
   const config = WidgetFactory.getWidgetPropertyPaneConfig(props.type);
   return (
     <>
       {generatePropertyControl(config as readonly PropertyPaneConfig[], props)}
     </>
   );
-};
+}
 
 export default PropertyControlsGenerator;
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertySection.tsx b/app/client/src/pages/Editor/PropertyPane/PropertySection.tsx
index f0ccd8d313..9b56da5e9f 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertySection.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertySection.tsx
@@ -67,13 +67,13 @@ export const PropertySection = memo((props: PropertySectionProps) => {
   return (
     <SectionWrapper>
       <SectionTitle
-        onClick={() => open(!isOpen)}
         className={`t--property-pane-section-collapse-${className}`}
+        onClick={() => open(!isOpen)}
       >
         <span>{props.name}</span>
         <Icon
-          icon={IconNames.CHEVRON_RIGHT}
           className={isOpen ? "open-collapse" : ""}
+          icon={IconNames.CHEVRON_RIGHT}
         />
       </SectionTitle>
       {props.children && (
diff --git a/app/client/src/pages/Editor/PropertyPane/index.tsx b/app/client/src/pages/Editor/PropertyPane/index.tsx
index 6ecc6a4f9d..3382066828 100644
--- a/app/client/src/pages/Editor/PropertyPane/index.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/index.tsx
@@ -84,12 +84,12 @@ export const PropertyControlsWrapper = styled.div`
   margin-top: ${(props) => props.theme.propertyPane.titleHeight}px;
 `;
 
-const PropertyPaneView = (
+function PropertyPaneView(
   props: {
     hidePropertyPane: () => void;
     theme: EditorTheme;
   } & IPanelProps,
-) => {
+) {
   const { hidePropertyPane, theme, ...panel } = props;
   const widgetProperties: any = useSelector(getWidgetPropsForPropertyPane);
 
@@ -102,19 +102,15 @@ const PropertyPaneView = (
   return (
     <>
       <PropertyPaneTitle
-        key={widgetProperties.widgetId}
-        title={widgetProperties.widgetName}
-        widgetId={widgetProperties.widgetId}
-        widgetType={widgetProperties?.type}
         actions={[
           {
             tooltipContent: "Copy Widget",
             icon: (
               <CopyIcon
                 className="t--copy-widget"
-                width={14}
                 height={14}
                 onClick={handleCopy}
+                width={14}
               />
             ),
           },
@@ -123,9 +119,9 @@ const PropertyPaneView = (
             icon: (
               <DeleteIcon
                 className="t--delete-widget"
-                width={16}
                 height={16}
                 onClick={handleDelete}
+                width={16}
               />
             ),
           },
@@ -137,6 +133,9 @@ const PropertyPaneView = (
             tooltipContent: "Close",
             icon: (
               <Icon
+                className={"t--property-pane-close-btn"}
+                icon="cross"
+                iconSize={16}
                 onClick={(e: any) => {
                   AnalyticsUtil.logEvent("PROPERTY_PANE_CLOSE_CLICK", {
                     widgetType: widgetProperties.widgetType,
@@ -146,25 +145,26 @@ const PropertyPaneView = (
                   e.preventDefault();
                   e.stopPropagation();
                 }}
-                iconSize={16}
-                icon="cross"
-                className={"t--property-pane-close-btn"}
               />
             ),
           },
         ]}
+        key={widgetProperties.widgetId}
+        title={widgetProperties.widgetName}
+        widgetId={widgetProperties.widgetId}
+        widgetType={widgetProperties?.type}
       />
       <PropertyControlsWrapper>
         <PropertyControlsGenerator
           id={widgetProperties.widgetId}
-          type={widgetProperties.type}
           panel={panel}
           theme={theme}
+          type={widgetProperties.type}
         />
       </PropertyControlsWrapper>
     </>
   );
-};
+}
 
 class PropertyPane extends Component<PropertyPaneProps, PropertyPaneState> {
   private panelWrapperRef = React.createRef<HTMLDivElement>();
@@ -191,20 +191,20 @@ class PropertyPane extends Component<PropertyPaneProps, PropertyPaneState> {
 
       return (
         <Popper
-          themeMode={this.getPopperTheme()}
-          position={this.props?.propPanePreference?.position}
           disablePopperEvents={this.props?.propPanePreference?.isMoved}
+          isDraggable
+          isOpen
           onPositionChange={(position: any) =>
             this.props.setPropPanePoistion(
               position,
               this.props.widgetProperties?.widgetId,
             )
           }
-          isDraggable={true}
-          isOpen={true}
-          targetNode={el}
-          zIndex={3}
           placement="right-start"
+          position={this.props?.propPanePreference?.position}
+          targetNode={el}
+          themeMode={this.getPopperTheme()}
+          zIndex={3}
         >
           {content}
         </Popper>
@@ -218,27 +218,23 @@ class PropertyPane extends Component<PropertyPaneProps, PropertyPaneState> {
     const { widgetProperties } = this.props;
 
     if (!widgetProperties) {
-      return <></>;
+      return null;
     }
 
     // if settings control is disabled, don't render anything
     // for e.g - this will be true for list widget tempalte container widget
-    if (widgetProperties?.disablePropertyPane) return <></>;
+    if (widgetProperties?.disablePropertyPane) return null;
 
     return (
       <PropertyPaneWrapper
         className={"t--propertypane"}
-        themeMode={this.getTheme()}
-        ref={this.panelWrapperRef}
         onClick={(e: any) => {
           e.stopPropagation();
         }}
+        ref={this.panelWrapperRef}
+        themeMode={this.getTheme()}
       >
         <StyledPanelStack
-          onOpen={() => {
-            const parent = this.panelWrapperRef.current;
-            parent?.scrollTo(0, 0);
-          }}
           initialPanel={{
             component: PropertyPaneView,
             props: {
@@ -246,6 +242,10 @@ class PropertyPane extends Component<PropertyPaneProps, PropertyPaneState> {
               theme: this.getTheme(),
             },
           }}
+          onOpen={() => {
+            const parent = this.panelWrapperRef.current;
+            parent?.scrollTo(0, 0);
+          }}
           showPanelHeader={false}
         />
       </PropertyPaneWrapper>
diff --git a/app/client/src/pages/Editor/PropertyPaneHelpButton.tsx b/app/client/src/pages/Editor/PropertyPaneHelpButton.tsx
index be01472d4d..7f89d013eb 100644
--- a/app/client/src/pages/Editor/PropertyPaneHelpButton.tsx
+++ b/app/client/src/pages/Editor/PropertyPaneHelpButton.tsx
@@ -32,10 +32,10 @@ const PropertyPaneHelpButton = withTheme(({ theme }: Props) => {
 
   return (
     <Icon
-      onClick={openHelpModal}
       color={theme.colors.paneSectionLabel}
       icon="help"
       iconSize={16}
+      onClick={openHelpModal}
     />
   );
 });
diff --git a/app/client/src/pages/Editor/PropertyPaneTitle.tsx b/app/client/src/pages/Editor/PropertyPaneTitle.tsx
index 729dc882df..8e019fce89 100644
--- a/app/client/src/pages/Editor/PropertyPaneTitle.tsx
+++ b/app/client/src/pages/Editor/PropertyPaneTitle.tsx
@@ -159,28 +159,28 @@ const PropertyPaneTitle = memo((props: PropertyPaneTitleProps) => {
           <>
             {props.isPanelTitle && (
               <StyledBackIcon
-                onClick={props.onBackClick}
                 className="t--property-pane-back-btn"
+                onClick={props.onBackClick}
               />
             )}
 
             <EditableText
-              valueTransform={
-                !props.isPanelTitle ? removeSpecialChars : undefined
-              }
+              className="t--propery-page-title"
               defaultValue={name}
-              placeholder={props.title}
               editInteractionKind={EditInteractionKind.SINGLE}
+              fill
+              hideEditIcon
               isEditingDefault={!props.isPanelTitle ? isNew : undefined}
               onBlur={!props.isPanelTitle ? updateTitle : undefined}
               onTextChanged={!props.isPanelTitle ? undefined : updateNewTitle}
-              hideEditIcon
-              className="t--propery-page-title"
+              placeholder={props.title}
               savingState={
                 updating ? SavingState.STARTED : SavingState.NOT_STARTED
               }
-              fill
               underline
+              valueTransform={
+                !props.isPanelTitle ? removeSpecialChars : undefined
+              }
             />
           </>
         </NameWrapper>
diff --git a/app/client/src/pages/Editor/QueryEditor/AddDatasourceSecurely.tsx b/app/client/src/pages/Editor/QueryEditor/AddDatasourceSecurely.tsx
index de64141b3b..1adb20e084 100644
--- a/app/client/src/pages/Editor/QueryEditor/AddDatasourceSecurely.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/AddDatasourceSecurely.tsx
@@ -37,7 +37,7 @@ type AddDatasourceSecurelyProps = {
   onAddDatasource: () => void;
 };
 
-const AddDatasourceSecurely = (props: AddDatasourceSecurelyProps) => {
+function AddDatasourceSecurely(props: AddDatasourceSecurelyProps) {
   return (
     <Wrapper>
       <div>
@@ -49,17 +49,17 @@ const AddDatasourceSecurely = (props: AddDatasourceSecurelyProps) => {
           That’s a promise.
         </Content>
         <ActionButton
-          className="t--add-datasource"
-          icon={"plus"}
-          text="New Datasource"
-          filled
           accent="primary"
+          className="t--add-datasource"
+          filled
+          icon={"plus"}
           onClick={props.onAddDatasource}
+          text="New Datasource"
         />
       </div>
       <img src={AppsmithDatasource} />
     </Wrapper>
   );
-};
+}
 
 export default AddDatasourceSecurely;
diff --git a/app/client/src/pages/Editor/QueryEditor/DatasourceCard.tsx b/app/client/src/pages/Editor/QueryEditor/DatasourceCard.tsx
index 11f0c6b644..e385797791 100644
--- a/app/client/src/pages/Editor/QueryEditor/DatasourceCard.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/DatasourceCard.tsx
@@ -81,7 +81,7 @@ type DatasourceCardProps = {
   onCreateQuery: (datasource: Datasource) => void;
 };
 
-const DatasourceCard = (props: DatasourceCardProps) => {
+function DatasourceCard(props: DatasourceCardProps) {
   const dispatch = useDispatch();
   const pluginImages = useSelector(getPluginImages);
   const params = useParams<{ applicationId: string; pageId: string }>();
@@ -117,9 +117,9 @@ const DatasourceCard = (props: DatasourceCardProps) => {
         <div style={{ flex: 1 }}>
           <DatasourceNameWrapper>
             <DatasourceImage
-              src={pluginImages[datasource.pluginId]}
-              className="dataSourceImage"
               alt="Datasource"
+              className="dataSourceImage"
+              src={pluginImages[datasource.pluginId]}
             />
             <DatasourceName>{datasource.name}</DatasourceName>
           </DatasourceNameWrapper>
@@ -133,16 +133,16 @@ const DatasourceCard = (props: DatasourceCardProps) => {
           <EditDatasourceButton
             className="t--edit-datasource"
             icon={"edit"}
-            text="Edit Datasource"
             onClick={editDatasource}
+            text="Edit Datasource"
           />
           <ActionButton
-            className="t--create-query"
-            icon={"plus"}
-            text="New Query"
-            filled
             accent="primary"
+            className="t--create-query"
+            filled
+            icon={"plus"}
             onClick={() => props.onCreateQuery(datasource)}
+            text="New Query"
           />
         </ButtonsWrapper>
       </DatasourceCardHeader>
@@ -151,6 +151,6 @@ const DatasourceCard = (props: DatasourceCardProps) => {
         : undefined}
     </Wrapper>
   );
-};
+}
 
 export default DatasourceCard;
diff --git a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
index 50d962fa7b..6be9152fad 100644
--- a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
@@ -127,6 +127,13 @@ const GenerateWidgetButton = styled.a`
   }
 `;
 
+const ResultsCount = styled.div`
+  position: absolute;
+  right: 180px;
+  top: 8px;
+  color: #716e6e;
+`;
+
 const FieldWrapper = styled.div`
   margin-top: 15px;
 `;
@@ -345,7 +352,7 @@ export type EditorJSONtoFormProps = QueryFormProps & ReduxProps;
 type Props = EditorJSONtoFormProps &
   InjectedFormProps<Action, EditorJSONtoFormProps>;
 
-export const EditorJSONtoForm: React.FC<Props> = (props: Props) => {
+export function EditorJSONtoForm(props: Props) {
   const {
     handleSubmit,
     isDeleting,
@@ -391,51 +398,47 @@ export const EditorJSONtoForm: React.FC<Props> = (props: Props) => {
     dispatch(addTableWidgetFromQuery(actionName));
   };
 
-  const MenuList = (props: MenuListComponentProps<{ children: Node }>) => {
+  function MenuList(props: MenuListComponentProps<{ children: Node }>) {
     return (
       <>
         <components.MenuList {...props}>{props.children}</components.MenuList>
         <CreateDatasource onClick={() => onCreateDatasourceClick()}>
-          <Icon icon="plus" iconSize={11} className="createIcon" />
+          <Icon className="createIcon" icon="plus" iconSize={11} />
           Create new datasource
         </CreateDatasource>
       </>
     );
-  };
+  }
 
-  const SingleValue = (props: SingleValueProps<OptionTypeBase>) => {
+  function SingleValue(props: SingleValueProps<OptionTypeBase>) {
     return (
-      <>
-        <components.SingleValue {...props}>
-          <Container>
-            <img
-              className="plugin-image"
-              src={props.data.image}
-              alt="Datasource"
-            />
-            <div className="selected-value">{props.children}</div>
-          </Container>
-        </components.SingleValue>
-      </>
+      <components.SingleValue {...props}>
+        <Container>
+          <img
+            alt="Datasource"
+            className="plugin-image"
+            src={props.data.image}
+          />
+          <div className="selected-value">{props.children}</div>
+        </Container>
+      </components.SingleValue>
     );
-  };
+  }
 
-  const CustomOption = (props: OptionProps<OptionTypeBase>) => {
+  function CustomOption(props: OptionProps<OptionTypeBase>) {
     return (
-      <>
-        <components.Option {...props}>
-          <Container className="t--datasource-option">
-            <img
-              className="plugin-image"
-              src={props.data.image}
-              alt="Datasource"
-            />
-            <div style={{ marginLeft: "6px" }}>{props.children}</div>
-          </Container>
-        </components.Option>
-      </>
+      <components.Option {...props}>
+        <Container className="t--datasource-option">
+          <img
+            alt="Datasource"
+            className="plugin-image"
+            src={props.data.image}
+          />
+          <div style={{ marginLeft: "6px" }}>{props.children}</div>
+        </Container>
+      </components.Option>
     );
-  };
+  }
 
   const handleDocumentationClick = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -464,20 +467,20 @@ export const EditorJSONtoForm: React.FC<Props> = (props: Props) => {
           <DropdownSelect>
             <DropdownField
               className={"t--switch-datasource"}
-              placeholder="Datasource"
+              components={{ MenuList, Option: CustomOption, SingleValue }}
+              maxMenuHeight={200}
               name="datasource.id"
               options={DATASOURCES_OPTIONS}
+              placeholder="Datasource"
               width={232}
-              maxMenuHeight={200}
-              components={{ MenuList, Option: CustomOption, SingleValue }}
             />
           </DropdownSelect>
           <ActionButton
-            className="t--delete-query"
-            text="Delete"
             accent="error"
+            className="t--delete-query"
             loading={isDeleting}
             onClick={onDeleteClick}
+            text="Delete"
           />
 
           <OnboardingIndicator
@@ -485,12 +488,12 @@ export const EditorJSONtoForm: React.FC<Props> = (props: Props) => {
             width={75}
           >
             <ActionButton
+              accent="primary"
               className="t--run-query"
-              text="Run"
               filled
               loading={isRunning}
-              accent="primary"
               onClick={onRunClick}
+              text="Run"
             />
           </OnboardingIndicator>
         </ActionsWrapper>
@@ -499,8 +502,8 @@ export const EditorJSONtoForm: React.FC<Props> = (props: Props) => {
         <TabContainerView>
           {documentationLink && (
             <DocumentationLink
-              onClick={(e: React.MouseEvent) => handleDocumentationClick(e)}
               className="t--datasource-documentation-link"
+              onClick={(e: React.MouseEvent) => handleDocumentationClick(e)}
             >
               {"Documentation "}
               <StyledOpenDocsIcon icon="document-open" />
@@ -522,11 +525,11 @@ export const EditorJSONtoForm: React.FC<Props> = (props: Props) => {
                           An unexpected error occurred
                         </ErrorMessage>
                         <Tag
-                          round
                           intent="warning"
                           interactive
                           minimal
                           onClick={() => window.location.reload()}
+                          round
                         >
                           Refresh
                         </Tag>
@@ -539,12 +542,12 @@ export const EditorJSONtoForm: React.FC<Props> = (props: Props) => {
                           query
                         </p>
                         <Button
-                          onClick={() => onCreateDatasourceClick()}
-                          text="Add a Datasource"
-                          intent="primary"
                           filled
-                          size="small"
                           icon="plus"
+                          intent="primary"
+                          onClick={() => onCreateDatasourceClick()}
+                          size="small"
+                          text="Add a Datasource"
                         />
                       </NoDataSourceContainer>
                     )}
@@ -571,6 +574,14 @@ export const EditorJSONtoForm: React.FC<Props> = (props: Props) => {
           <Resizable panelRef={panelRef} />
           {output && !!output.length && (
             <Boxed step={OnboardingStep.SUCCESSFUL_BINDING}>
+              <ResultsCount>
+                <Text type={TextType.P3}>
+                  Result:
+                  <Text type={TextType.H5}>{`${output.length} Record${
+                    output.length > 1 ? "s" : ""
+                  }`}</Text>
+                </Text>
+              </ResultsCount>
               <GenerateWidgetButton
                 className="t--add-widget"
                 onClick={onAddWidget}
@@ -582,8 +593,8 @@ export const EditorJSONtoForm: React.FC<Props> = (props: Props) => {
           )}
 
           <TabComponent
-            selectedIndex={selectedIndex}
             onSelect={setSelectedIndex}
+            selectedIndex={selectedIndex}
             tabs={[
               {
                 key: "Response",
@@ -592,8 +603,8 @@ export const EditorJSONtoForm: React.FC<Props> = (props: Props) => {
                   <ResponseContentWrapper>
                     {error && (
                       <ErrorContainer>
-                        <AdsIcon name="warning-triangle" keepColors />
-                        <Text type={TextType.H3} style={{ color: "#F22B2B" }}>
+                        <AdsIcon keepColors name="warning-triangle" />
+                        <Text style={{ color: "#F22B2B" }} type={TextType.H3}>
                           An error occurred
                         </Text>
 
@@ -617,23 +628,20 @@ export const EditorJSONtoForm: React.FC<Props> = (props: Props) => {
                       <HelpSection>
                         {hintMessages.map((msg, index) => (
                           <Callout
-                            text={msg}
-                            key={index}
-                            variant={Variant.warning}
                             fill
+                            key={index}
+                            text={msg}
+                            variant={Variant.warning}
                           />
                         ))}
                       </HelpSection>
                     )}
-                    {output && (
-                      <>
-                        {isTableResponse ? (
-                          <Table data={output} />
-                        ) : (
-                          <JSONViewer src={output} />
-                        )}
-                      </>
-                    )}
+                    {output &&
+                      (isTableResponse ? (
+                        <Table data={output} />
+                      ) : (
+                        <JSONViewer src={output} />
+                      ))}
                     {!output && !error && (
                       <NoResponseContainer>
                         <AdsIcon name="no-response" />
@@ -661,7 +669,7 @@ export const EditorJSONtoForm: React.FC<Props> = (props: Props) => {
       </SecondaryWrapper>
     </QueryFormContainer>
   );
-};
+}
 
 const renderEachConfig = (formName: string) => (section: any): any => {
   return section.children.map((formControlOrSection: ControlProps) => {
diff --git a/app/client/src/pages/Editor/QueryEditor/QueryHomeScreen.tsx b/app/client/src/pages/Editor/QueryEditor/QueryHomeScreen.tsx
index 49e11d1478..33a67966b5 100644
--- a/app/client/src/pages/Editor/QueryEditor/QueryHomeScreen.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/QueryHomeScreen.tsx
@@ -137,20 +137,20 @@ class QueryHomeScreen extends React.Component<QueryHomeScreenProps> {
         ) : (
           <AddDatasource
             className="t--add-datasource"
+            fill
+            icon={"plus"}
+            minimal
             onClick={() => {
               history.push(DATA_SOURCES_EDITOR_URL(applicationId, pageId));
             }}
-            fill
-            minimal
             text="New Datasource"
-            icon={"plus"}
           />
         )}
         {dataSources.map((datasource) => {
           return (
             <DatasourceCard
-              key={datasource.id}
               datasource={datasource}
+              key={datasource.id}
               onCreateQuery={this.handleCreateNewQuery}
             />
           );
diff --git a/app/client/src/pages/Editor/QueryEditor/Table.tsx b/app/client/src/pages/Editor/QueryEditor/Table.tsx
index ce19736bc3..d56813fc8b 100644
--- a/app/client/src/pages/Editor/QueryEditor/Table.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/Table.tsx
@@ -185,7 +185,7 @@ const renderCell = (props: any) => {
   );
 };
 
-const Table = (props: TableProps) => {
+function Table(props: TableProps) {
   const data = React.useMemo(() => props.data, [props.data]);
   const columns = React.useMemo(() => {
     if (data.length) {
@@ -305,6 +305,6 @@ const Table = (props: TableProps) => {
       </TableWrapper>
     </ErrorBoundary>
   );
-};
+}
 
 export default Table;
diff --git a/app/client/src/pages/Editor/QueryEditor/TemplateMenu.tsx b/app/client/src/pages/Editor/QueryEditor/TemplateMenu.tsx
index c0d3b0593e..ac64ee3045 100644
--- a/app/client/src/pages/Editor/QueryEditor/TemplateMenu.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/TemplateMenu.tsx
@@ -70,10 +70,7 @@ class TemplateMenu extends React.Component<Props> {
     return (
       <Container
         className="t--template-menu"
-        ref={(input) => {
-          this.nameInput = input;
-        }}
-        tabIndex={0}
+        onClick={() => createTemplate("")}
         onKeyPress={(e) => {
           e.preventDefault();
 
@@ -81,7 +78,10 @@ class TemplateMenu extends React.Component<Props> {
             createTemplate("");
           }
         }}
-        onClick={() => createTemplate("")}
+        ref={(input) => {
+          this.nameInput = input;
+        }}
+        tabIndex={0}
       >
         <div style={{ fontSize: 14 }}>
           Click here to start with a blank state or select a template.
diff --git a/app/client/src/pages/Editor/QueryEditor/index.tsx b/app/client/src/pages/Editor/QueryEditor/index.tsx
index f6b6a50d46..62afe6e0c7 100644
--- a/app/client/src/pages/Editor/QueryEditor/index.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/index.tsx
@@ -149,34 +149,30 @@ class QueryEditor extends React.Component<Props> {
     const onCreateDatasourceClick = () => {
       history.push(DATA_SOURCES_EDITOR_URL(applicationId, pageId));
     };
-    return (
-      <React.Fragment>
-        {queryId ? (
-          <QueryEditorForm
-            location={this.props.location}
-            isRunning={isRunning}
-            isDeleting={isDeleting}
-            onDeleteClick={this.handleDeleteClick}
-            onRunClick={this.handleRunClick}
-            dataSources={dataSources}
-            editorConfig={editorConfig}
-            settingConfig={settingConfig}
-            DATASOURCES_OPTIONS={DATASOURCES_OPTIONS}
-            executedQueryData={responses[queryId]}
-            runErrorMessage={runErrorMessage[queryId]}
-            onCreateDatasourceClick={onCreateDatasourceClick}
-          />
-        ) : (
-          <QueryHomeScreen
-            dataSources={dataSources}
-            applicationId={applicationId}
-            pageId={pageId}
-            history={this.props.history}
-            location={this.props.location}
-            isCreating={isCreating}
-          />
-        )}
-      </React.Fragment>
+    return queryId ? (
+      <QueryEditorForm
+        DATASOURCES_OPTIONS={DATASOURCES_OPTIONS}
+        dataSources={dataSources}
+        editorConfig={editorConfig}
+        executedQueryData={responses[queryId]}
+        isDeleting={isDeleting}
+        isRunning={isRunning}
+        location={this.props.location}
+        onCreateDatasourceClick={onCreateDatasourceClick}
+        onDeleteClick={this.handleDeleteClick}
+        onRunClick={this.handleRunClick}
+        runErrorMessage={runErrorMessage[queryId]}
+        settingConfig={settingConfig}
+      />
+    ) : (
+      <QueryHomeScreen
+        applicationId={applicationId}
+        dataSources={dataSources}
+        history={this.props.history}
+        isCreating={isCreating}
+        location={this.props.location}
+        pageId={pageId}
+      />
     );
   }
 }
diff --git a/app/client/src/pages/Editor/SaaSEditor/ActionForm.tsx b/app/client/src/pages/Editor/SaaSEditor/ActionForm.tsx
index 8dcd1e1d04..f10e3afbf1 100644
--- a/app/client/src/pages/Editor/SaaSEditor/ActionForm.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/ActionForm.tsx
@@ -36,7 +36,7 @@ type StateAndRouteProps = EditorJSONtoFormProps &
 
 type Props = StateAndRouteProps & InjectedFormProps<Action, StateAndRouteProps>;
 
-const ActionForm: React.FC<Props> = (props: Props) => {
+function ActionForm(props: Props) {
   const {
     match: {
       params: { pageId, applicationId, apiId },
@@ -64,7 +64,7 @@ const ActionForm: React.FC<Props> = (props: Props) => {
     onCreateDatasourceClick,
   };
   return <EditorJSONtoForm {...childProps} />;
-};
+}
 
 const mapStateToProps = (state: AppState, props: any) => {
   const { apiId } = props.match.params;
diff --git a/app/client/src/pages/Editor/SaaSEditor/DatasourceCard.tsx b/app/client/src/pages/Editor/SaaSEditor/DatasourceCard.tsx
index 95037b467d..787a576b05 100644
--- a/app/client/src/pages/Editor/SaaSEditor/DatasourceCard.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/DatasourceCard.tsx
@@ -82,7 +82,7 @@ type DatasourceCardProps = {
 
 // TODO: This is largely a quick copy pasta and edit of QueryEditor/DatasourceCard.tsx
 // When we move Google Sheets over to regular oauth2 integrations, we will need to refactor this.
-const DatasourceCard = (props: DatasourceCardProps) => {
+function DatasourceCard(props: DatasourceCardProps) {
   const pluginImages = useSelector(getPluginImages);
   const params = useParams<{
     applicationId: string;
@@ -121,9 +121,9 @@ const DatasourceCard = (props: DatasourceCardProps) => {
         <div style={{ flex: 1 }}>
           <DatasourceNameWrapper>
             <DatasourceImage
-              src={pluginImages[datasource.pluginId]}
-              className="dataSourceImage"
               alt="Datasource"
+              className="dataSourceImage"
+              src={pluginImages[datasource.pluginId]}
             />
             <DatasourceName>{datasource.name}</DatasourceName>
           </DatasourceNameWrapper>
@@ -137,16 +137,16 @@ const DatasourceCard = (props: DatasourceCardProps) => {
           <EditDatasourceButton
             className="t--edit-datasource"
             icon={"edit"}
-            text="Edit Datasource"
             onClick={editDatasource}
+            text="Edit Datasource"
           />
           <ActionButton
-            className="t--create-api"
-            icon={"plus"}
-            text="New API"
-            filled
             accent="primary"
+            className="t--create-api"
+            filled
+            icon={"plus"}
             onClick={() => props.onCreate(datasource)}
+            text="New API"
           />
         </ButtonsWrapper>
       </DatasourceCardHeader>
@@ -155,6 +155,6 @@ const DatasourceCard = (props: DatasourceCardProps) => {
         : undefined}
     </Wrapper>
   );
-};
+}
 
 export default DatasourceCard;
diff --git a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
index 94680acf29..d977b8f501 100644
--- a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
@@ -168,61 +168,59 @@ class DatasourceSaaSEditor extends JSONtoForm<Props> {
         <br />
         <Header>
           <FormTitleContainer>
-            <PluginImage src={this.props.pluginImage} alt="Datasource" />
+            <PluginImage alt="Datasource" src={this.props.pluginImage} />
             <FormTitle focusOnMount={this.props.isNewDatasource} />
           </FormTitleContainer>
           <CreateApiButton
-            className="t--create-query"
-            icon={"plus"}
-            text="New API"
-            filled
             accent="primary"
+            className="t--create-query"
             disabled={this.validate()}
+            filled
+            icon={"plus"}
             loading={isSaving}
             onClick={() => this.createApiAction()}
+            text="New API"
           />
         </Header>
 
-        <>
-          {!_.isNil(sections)
-            ? _.map(sections, this.renderMainSection)
-            : undefined}
-          <SaveButtonContainer>
-            <ActionButton
-              className="t--delete-datasource"
-              text="Delete"
-              accent="error"
-              loading={isDeleting}
-              onClick={() =>
-                deleteDatasource(
-                  datasourceId,
-                  historyPush(
-                    SAAS_EDITOR_URL(applicationId, pageId, pluginPackageName),
-                  ),
-                )
-              }
-            />
+        {!_.isNil(sections)
+          ? _.map(sections, this.renderMainSection)
+          : undefined}
+        <SaveButtonContainer>
+          <ActionButton
+            accent="error"
+            className="t--delete-datasource"
+            loading={isDeleting}
+            onClick={() =>
+              deleteDatasource(
+                datasourceId,
+                historyPush(
+                  SAAS_EDITOR_URL(applicationId, pageId, pluginPackageName),
+                ),
+              )
+            }
+            text="Delete"
+          />
 
-            <StyledButton
-              className="t--save-datasource"
-              onClick={() =>
-                this.save(
-                  redirectAuthorizationCode(
-                    pageId,
-                    datasourceId,
-                    PluginType.SAAS,
-                  ),
-                )
-              }
-              text="Save and Authorize"
-              disabled={this.validate()}
-              loading={isSaving}
-              intent="primary"
-              filled
-              size="small"
-            />
-          </SaveButtonContainer>
-        </>
+          <StyledButton
+            className="t--save-datasource"
+            disabled={this.validate()}
+            filled
+            intent="primary"
+            loading={isSaving}
+            onClick={() =>
+              this.save(
+                redirectAuthorizationCode(
+                  pageId,
+                  datasourceId,
+                  PluginType.SAAS,
+                ),
+              )
+            }
+            size="small"
+            text="Save and Authorize"
+          />
+        </SaveButtonContainer>
       </form>
     );
   };
diff --git a/app/client/src/pages/Editor/SaaSEditor/ListView.tsx b/app/client/src/pages/Editor/SaaSEditor/ListView.tsx
index a6bd8e7dcd..3110c242e0 100644
--- a/app/client/src/pages/Editor/SaaSEditor/ListView.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/ListView.tsx
@@ -129,18 +129,18 @@ class ListView extends React.Component<Props> {
 
         <AddDatasource
           className="t--add-datasource"
-          onClick={() => this.handleCreateNewDatasource(plugin.id)}
           fill
-          minimal
-          text="New Datasource"
           icon={"plus"}
+          minimal
+          onClick={() => this.handleCreateNewDatasource(plugin.id)}
+          text="New Datasource"
         />
 
         {datasources.map((datasource) => {
           return (
             <DatasourceCard
-              key={datasource.id}
               datasource={datasource}
+              key={datasource.id}
               onCreate={this.handleCreateNewAPI}
             />
           );
@@ -167,11 +167,11 @@ class ListView extends React.Component<Props> {
     return (
       <IntegrationHomePage>
         <NotFound
-          title="Integration Not found"
           buttonText="Go back to Integrations"
           onBackButton={() =>
             history.push(API_EDITOR_URL(applicationId, pageId))
           }
+          title="Integration Not found"
         />
       </IntegrationHomePage>
     );
diff --git a/app/client/src/pages/Editor/ShareApplicationForm.tsx b/app/client/src/pages/Editor/ShareApplicationForm.tsx
index 98e6ed9a50..ab8c7a1e72 100644
--- a/app/client/src/pages/Editor/ShareApplicationForm.tsx
+++ b/app/client/src/pages/Editor/ShareApplicationForm.tsx
@@ -27,7 +27,7 @@ const ShareToggle = styled.div`
   }
 `;
 
-export const ShareApplicationForm = (props: any) => {
+export function ShareApplicationForm(props: any) {
   const {
     match: {
       params: { applicationId },
@@ -47,21 +47,21 @@ export const ShareApplicationForm = (props: any) => {
         )}
         {currentApplicationDetails && (
           <Switch
+            checked={currentApplicationDetails.isPublic}
+            disabled={isChangingViewAccess || isFetchingApplication}
+            large
             onChange={() => {
               changeAppViewAccess(
                 applicationId,
                 !currentApplicationDetails.isPublic,
               );
             }}
-            disabled={isChangingViewAccess || isFetchingApplication}
-            checked={currentApplicationDetails.isPublic}
-            large
           />
         )}
       </ShareToggle>
     </ShareWithPublicOption>
   );
-};
+}
 
 const mapStateToProps = (state: AppState) => ({
   currentApplicationDetails: state.ui.applications.currentApplication,
diff --git a/app/client/src/pages/Editor/Welcome.tsx b/app/client/src/pages/Editor/Welcome.tsx
index e6b07eba07..ac1fd3ab54 100644
--- a/app/client/src/pages/Editor/Welcome.tsx
+++ b/app/client/src/pages/Editor/Welcome.tsx
@@ -72,7 +72,7 @@ const StyledButton = styled.button`
   margin-top: 24px;
 `;
 
-const Welcome = () => {
+function Welcome() {
   const datasourceCreated = useSelector(
     (state: AppState) => state.ui.onBoarding.createdDBQuery,
   );
@@ -108,6 +108,6 @@ const Welcome = () => {
       )}
     </Wrapper>
   );
-};
+}
 
 export default Welcome;
diff --git a/app/client/src/pages/Editor/WidgetCard.tsx b/app/client/src/pages/Editor/WidgetCard.tsx
index f7e0c75fe3..545596a2b9 100644
--- a/app/client/src/pages/Editor/WidgetCard.tsx
+++ b/app/client/src/pages/Editor/WidgetCard.tsx
@@ -79,7 +79,7 @@ export const IconLabel = styled.h5`
   }
 `;
 
-const WidgetCard = (props: CardProps) => {
+function WidgetCard(props: CardProps) {
   const { setIsDragging } = useWidgetDragResize();
   const { selectWidget } = useWidgetSelection();
 
@@ -122,17 +122,17 @@ const WidgetCard = (props: CardProps) => {
     .join("")
     .toLowerCase()}`;
   return (
-    <React.Fragment>
+    <>
       <DragPreviewImage connect={preview} src={blankImage} />
-      <Wrapper ref={drag} className={className}>
+      <Wrapper className={className} ref={drag}>
         <div>
           <Icon />
           <IconLabel>{props.details.widgetCardName}</IconLabel>
           {props.details.isBeta && <BetaLabel>Beta</BetaLabel>}
         </div>
       </Wrapper>
-    </React.Fragment>
+    </>
   );
-};
+}
 
 export default WidgetCard;
diff --git a/app/client/src/pages/Editor/WidgetCardsPane.tsx b/app/client/src/pages/Editor/WidgetCardsPane.tsx
index 71eb75151e..28d3e175eb 100644
--- a/app/client/src/pages/Editor/WidgetCardsPane.tsx
+++ b/app/client/src/pages/Editor/WidgetCardsPane.tsx
@@ -16,7 +16,7 @@ const CardsWrapper = styled.div`
   align-items: stretch;
 `;
 
-const WidgetCardsPane = (props: WidgetCardPaneProps) => {
+function WidgetCardsPane(props: WidgetCardPaneProps) {
   if (!props.cards) {
     return null;
   }
@@ -36,6 +36,6 @@ const WidgetCardsPane = (props: WidgetCardPaneProps) => {
       ))}
     </PaneWrapper>
   );
-};
+}
 
 export default WidgetCardsPane;
diff --git a/app/client/src/pages/Editor/WidgetSidebar.tsx b/app/client/src/pages/Editor/WidgetSidebar.tsx
index b60af96495..5c8b6b019e 100644
--- a/app/client/src/pages/Editor/WidgetSidebar.tsx
+++ b/app/client/src/pages/Editor/WidgetSidebar.tsx
@@ -85,7 +85,7 @@ const Info = styled.div`
   }
 `;
 
-const WidgetSidebar = (props: IPanelProps) => {
+function WidgetSidebar(props: IPanelProps) {
   const cards = useSelector(getWidgetCards);
   const [filteredCards, setFilteredCards] = useState(cards);
   const searchInputRef = useRef<HTMLInputElement | null>(null);
@@ -143,10 +143,10 @@ const WidgetSidebar = (props: IPanelProps) => {
     <>
       <Boxed step={OnboardingStep.DEPLOY}>
         <ExplorerSearch
-          ref={searchInputRef}
+          autoFocus
           clear={clearSearchInput}
           placeholder="Search widgets..."
-          autoFocus={true}
+          ref={searchInputRef}
         />
       </Boxed>
 
@@ -157,30 +157,25 @@ const WidgetSidebar = (props: IPanelProps) => {
           </Info>
           <CloseIcon
             className="t--close-widgets-sidebar"
+            color={Colors.WHITE}
             icon="cross"
             iconSize={16}
-            color={Colors.WHITE}
             onClick={props.closePanel}
           />
         </Header>
         <CardsWrapper>
           {filteredCards.map((card: WidgetCardProps) => (
             <Boxed
-              step={OnboardingStep.DEPLOY}
+              key={card.key}
               show={
                 (card.type === "TABLE_WIDGET" && showTableWidget) ||
                 (card.type === "INPUT_WIDGET" && showInputWidget)
               }
-              key={card.key}
+              step={OnboardingStep.DEPLOY}
             >
               <OnboardingIndicator
-                width={100}
-                hasButton={false}
                 className="onboarding-widget-menu"
-                step={
-                  OnboardingStep.RUN_QUERY_SUCCESS ||
-                  OnboardingStep.ADD_INPUT_WIDGET
-                }
+                hasButton={false}
                 show={
                   (card.type === "TABLE_WIDGET" &&
                     currentStep === OnboardingStep.RUN_QUERY_SUCCESS) ||
@@ -188,6 +183,11 @@ const WidgetSidebar = (props: IPanelProps) => {
                     currentSubStep === 0 &&
                     currentStep === OnboardingStep.ADD_INPUT_WIDGET)
                 }
+                step={
+                  OnboardingStep.RUN_QUERY_SUCCESS ||
+                  OnboardingStep.ADD_INPUT_WIDGET
+                }
+                width={100}
               >
                 <WidgetCard details={card} />
               </OnboardingIndicator>
@@ -197,7 +197,7 @@ const WidgetSidebar = (props: IPanelProps) => {
       </MainWrapper>
     </>
   );
-};
+}
 
 WidgetSidebar.displayName = "WidgetSidebar";
 
diff --git a/app/client/src/pages/Editor/WidgetsEditor.tsx b/app/client/src/pages/Editor/WidgetsEditor.tsx
index 13cf4929d8..365361f36d 100644
--- a/app/client/src/pages/Editor/WidgetsEditor.tsx
+++ b/app/client/src/pages/Editor/WidgetsEditor.tsx
@@ -52,7 +52,7 @@ const CanvasContainer = styled.section`
 `;
 
 /* eslint-disable react/display-name */
-const WidgetsEditor = () => {
+function WidgetsEditor() {
   const { focusWidget, selectWidget } = useWidgetSelection();
   const params = useParams<{ applicationId: string; pageId: string }>();
   const dispatch = useDispatch();
@@ -121,13 +121,13 @@ const WidgetsEditor = () => {
     <EditorContextProvider>
       <EditorWrapper onClick={handleWrapperClick}>
         <MainContainerLayoutControl />
-        <CanvasContainer key={currentPageId} className={getCanvasClassName()}>
+        <CanvasContainer className={getCanvasClassName()} key={currentPageId}>
           {node}
         </CanvasContainer>
         <Debugger />
       </EditorWrapper>
     </EditorContextProvider>
   );
-};
+}
 
 export default WidgetsEditor;
diff --git a/app/client/src/pages/Editor/routes.tsx b/app/client/src/pages/Editor/routes.tsx
index 89c0eeb0b8..83210415aa 100644
--- a/app/client/src/pages/Editor/routes.tsx
+++ b/app/client/src/pages/Editor/routes.tsx
@@ -130,55 +130,55 @@ class EditorsRouter extends React.Component<
     return (
       <Wrapper isVisible={this.state.isVisible} onClick={this.handleClose}>
         <PaneDrawer
-          isVisible={this.state.isVisible}
           isActionPath={this.state.isActionPath}
+          isVisible={this.state.isVisible}
           onClick={this.preventClose}
         >
           <Switch>
-            <SentryRoute exact path={API_EDITOR_URL()} component={ApiEditor} />
+            <SentryRoute component={ApiEditor} exact path={API_EDITOR_URL()} />
             <SentryRoute
+              component={ApiEditor}
               exact
               path={API_EDITOR_ID_URL()}
-              component={ApiEditor}
             />
             <SentryRoute
+              component={ApiEditor}
               exact
               path={API_EDITOR_URL_WITH_SELECTED_PAGE_ID()}
-              component={ApiEditor}
             />
             <SentryRoute
+              component={QueryEditor}
               exact
               path={QUERIES_EDITOR_URL()}
-              component={QueryEditor}
             />
             <SentryRoute
+              component={QueryEditor}
               exact
               path={QUERIES_EDITOR_ID_URL()}
-              component={QueryEditor}
             />
 
             <SentryRoute
+              component={CurlImportForm}
               exact
               path={getCurlImportPageURL()}
-              component={CurlImportForm}
             />
             {SaaSEditorRoutes.map((props) => (
               <SentryRoute exact key={props.path} {...props} />
             ))}
             <SentryRoute
+              component={DataSourceEditor}
               exact
               path={DATA_SOURCES_EDITOR_URL()}
-              component={DataSourceEditor}
             />
             <SentryRoute
+              component={DataSourceEditor}
               exact
               path={DATA_SOURCES_EDITOR_ID_URL()}
-              component={DataSourceEditor}
             />
             <SentryRoute
+              component={ProviderTemplates}
               exact
               path={getProviderTemplatesURL()}
-              component={ProviderTemplates}
             />
           </Switch>
         </PaneDrawer>
@@ -192,7 +192,7 @@ type PaneDrawerProps = {
   onClick: (e: React.MouseEvent) => void;
   children: ReactNode;
 };
-const PaneDrawer = (props: PaneDrawerProps) => {
+function PaneDrawer(props: PaneDrawerProps) {
   const showPropertyPane = useShowPropertyPane();
   const { selectWidget, focusWidget } = useWidgetSelection();
   const dispatch = useDispatch();
@@ -210,7 +210,7 @@ const PaneDrawer = (props: PaneDrawerProps) => {
     }
   }, [dispatch, props.isVisible, selectWidget, showPropertyPane, focusWidget]);
   return <DrawerWrapper {...props}>{props.children}</DrawerWrapper>;
-};
+}
 
 PaneDrawer.displayName = "PaneDrawer";
 
diff --git a/app/client/src/pages/UserAuth/FooterLinks.tsx b/app/client/src/pages/UserAuth/FooterLinks.tsx
index 7cf506fb68..c20b996134 100644
--- a/app/client/src/pages/UserAuth/FooterLinks.tsx
+++ b/app/client/src/pages/UserAuth/FooterLinks.tsx
@@ -25,15 +25,17 @@ const FooterLinksContainer = styled.div`
   max-width: ${(props) => props.theme.authCard.width}px;
 `;
 
-const FooterLinks = () => (
-  <FooterLinksContainer>
-    <FooterLink target="_blank" href="/privacy-policy.html">
-      Privacy Policy
-    </FooterLink>
-    <FooterLink target="_blank" href="/terms-and-conditions.html">
-      Terms and conditions
-    </FooterLink>
-  </FooterLinksContainer>
-);
+function FooterLinks() {
+  return (
+    <FooterLinksContainer>
+      <FooterLink href="/privacy-policy.html" target="_blank">
+        Privacy Policy
+      </FooterLink>
+      <FooterLink href="/terms-and-conditions.html" target="_blank">
+        Terms and conditions
+      </FooterLink>
+    </FooterLinksContainer>
+  );
+}
 
 export default FooterLinks;
diff --git a/app/client/src/pages/UserAuth/ForgotPassword.tsx b/app/client/src/pages/UserAuth/ForgotPassword.tsx
index 3b3936ce68..8907e670da 100644
--- a/app/client/src/pages/UserAuth/ForgotPassword.tsx
+++ b/app/client/src/pages/UserAuth/ForgotPassword.tsx
@@ -88,10 +88,6 @@ export const ForgotPassword = withTheme(
           )}
           {!mailEnabled && (
             <FormMessage
-              intent="warning"
-              message={
-                "You haven’t setup any email service yet. Please configure your email service to receive a reset link"
-              }
               actions={[
                 {
                   url: "https://docs.appsmith.com/v/v1.2.1/setup/docker/email",
@@ -99,6 +95,10 @@ export const ForgotPassword = withTheme(
                   intent: "primary",
                 },
               ]}
+              intent="warning"
+              message={
+                "You haven’t setup any email service yet. Please configure your email service to receive a reset link"
+              }
             />
           )}
           {submitFailed && error && (
@@ -111,22 +111,22 @@ export const ForgotPassword = withTheme(
             label={createMessage(FORGOT_PASSWORD_PAGE_EMAIL_INPUT_LABEL)}
           >
             <FormTextField
+              disabled={submitting}
               name="email"
               placeholder={createMessage(
                 FORGOT_PASSWORD_PAGE_EMAIL_INPUT_PLACEHOLDER,
               )}
-              disabled={submitting}
             />
           </FormGroup>
           <FormActions>
             <Button
-              tag="button"
-              type="submit"
-              text={createMessage(FORGOT_PASSWORD_PAGE_SUBMIT_BUTTON_TEXT)}
-              fill
-              size={Size.large}
               disabled={!isEmail(props.emailValue)}
+              fill
               isLoading={submitting}
+              size={Size.large}
+              tag="button"
+              text={createMessage(FORGOT_PASSWORD_PAGE_SUBMIT_BUTTON_TEXT)}
+              type="submit"
             />
           </FormActions>
         </StyledForm>
diff --git a/app/client/src/pages/UserAuth/Login.tsx b/app/client/src/pages/UserAuth/Login.tsx
index 1214a1bc71..d9c8bd15cc 100644
--- a/app/client/src/pages/UserAuth/Login.tsx
+++ b/app/client/src/pages/UserAuth/Login.tsx
@@ -84,7 +84,7 @@ const SocialLoginList: string[] = [];
 if (enableGoogleOAuth) SocialLoginList.push(SocialLoginTypes.GOOGLE);
 if (enableGithubOAuth) SocialLoginList.push(SocialLoginTypes.GITHUB);
 
-export const Login = (props: LoginFormProps) => {
+export function Login(props: LoginFormProps) {
   const { error, valid, emailValue: email } = props;
   const isFormValid = valid && email && !isEmptyString(email);
   const location = useLocation();
@@ -115,16 +115,14 @@ export const Login = (props: LoginFormProps) => {
       <SignUpLinkSection>
         {createMessage(NEW_TO_APPSMITH)}
         <AuthCardNavLink
-          to={signupURL}
           style={{ marginLeft: props.theme.spaces[3] }}
+          to={signupURL}
         >
           {createMessage(LOGIN_PAGE_SIGN_UP_LINK_TEXT)}
         </AuthCardNavLink>
       </SignUpLinkSection>
       {showError && (
         <FormMessage
-          intent="warning"
-          message={createMessage(LOGIN_PAGE_INVALID_CREDS_ERROR)}
           actions={[
             {
               url: FORGOT_PASSWORD_URL,
@@ -134,21 +132,23 @@ export const Login = (props: LoginFormProps) => {
               intent: "success",
             },
           ]}
+          intent="warning"
+          message={createMessage(LOGIN_PAGE_INVALID_CREDS_ERROR)}
         />
       )}
       {SocialLoginList.length > 0 && (
-        <ThirdPartyAuth type={"SIGNIN"} logins={SocialLoginList} />
+        <ThirdPartyAuth logins={SocialLoginList} type={"SIGNIN"} />
       )}
-      <SpacedSubmitForm method="POST" action={loginURL}>
+      <SpacedSubmitForm action={loginURL} method="POST">
         <FormGroup
           intent={error ? "danger" : "none"}
           label={createMessage(LOGIN_PAGE_EMAIL_INPUT_LABEL)}
         >
           <FormTextField
-            name={LOGIN_FORM_EMAIL_FIELD_NAME}
-            type="email"
-            placeholder={createMessage(LOGIN_PAGE_EMAIL_INPUT_PLACEHOLDER)}
             autoFocus
+            name={LOGIN_FORM_EMAIL_FIELD_NAME}
+            placeholder={createMessage(LOGIN_PAGE_EMAIL_INPUT_PLACEHOLDER)}
+            type="email"
           />
         </FormGroup>
         <FormGroup
@@ -156,20 +156,16 @@ export const Login = (props: LoginFormProps) => {
           label={createMessage(LOGIN_PAGE_PASSWORD_INPUT_LABEL)}
         >
           <FormTextField
-            type="password"
             name={LOGIN_FORM_PASSWORD_FIELD_NAME}
             placeholder={createMessage(LOGIN_PAGE_PASSWORD_INPUT_PLACEHOLDER)}
+            type="password"
           />
         </FormGroup>
 
         <FormActions>
           <Button
-            tag="button"
-            type="submit"
             disabled={!isFormValid}
-            text={createMessage(LOGIN_PAGE_LOGIN_BUTTON_TEXT)}
             fill
-            size={Size.large}
             onClick={() => {
               PerformanceTracker.startTracking(
                 PerformanceTransactionName.LOGIN_CLICK,
@@ -178,6 +174,10 @@ export const Login = (props: LoginFormProps) => {
                 loginMethod: "EMAIL",
               });
             }}
+            size={Size.large}
+            tag="button"
+            text={createMessage(LOGIN_PAGE_LOGIN_BUTTON_TEXT)}
+            type="submit"
           />
         </FormActions>
       </SpacedSubmitForm>
@@ -188,7 +188,7 @@ export const Login = (props: LoginFormProps) => {
       </ForgotPasswordLink>
     </>
   );
-};
+}
 
 const selector = formValueSelector(LOGIN_FORM_NAME);
 export default connect((state) => ({
diff --git a/app/client/src/pages/UserAuth/ResetPassword.tsx b/app/client/src/pages/UserAuth/ResetPassword.tsx
index 368db41707..38cf460624 100644
--- a/app/client/src/pages/UserAuth/ResetPassword.tsx
+++ b/app/client/src/pages/UserAuth/ResetPassword.tsx
@@ -68,7 +68,7 @@ type ResetPasswordProps = InjectedFormProps<
   theme: Theme;
 } & RouteComponentProps<{ email: string; token: string }>;
 
-export const ResetPassword = (props: ResetPasswordProps) => {
+export function ResetPassword(props: ResetPasswordProps) {
   const {
     error,
     handleSubmit,
@@ -178,31 +178,31 @@ export const ResetPassword = (props: ResetPasswordProps) => {
           label={createMessage(RESET_PASSWORD_PAGE_PASSWORD_INPUT_LABEL)}
         >
           <FormTextField
+            disabled={submitSucceeded}
             name="password"
-            type="password"
             placeholder={createMessage(
               RESET_PASSWORD_PAGE_PASSWORD_INPUT_PLACEHOLDER,
             )}
-            disabled={submitSucceeded}
+            type="password"
           />
         </FormGroup>
-        <Field type="hidden" name="email" component="input" />
-        <Field type="hidden" name="token" component="input" />
+        <Field component="input" name="email" type="hidden" />
+        <Field component="input" name="token" type="hidden" />
         <FormActions>
           <Button
-            tag="button"
-            fill
-            size={Size.large}
-            type="submit"
-            text={createMessage(RESET_PASSWORD_SUBMIT_BUTTON_TEXT)}
             disabled={pristine || submitSucceeded}
+            fill
             isLoading={submitting}
+            size={Size.large}
+            tag="button"
+            text={createMessage(RESET_PASSWORD_SUBMIT_BUTTON_TEXT)}
+            type="submit"
           />
         </FormActions>
       </StyledForm>
     </>
   );
-};
+}
 
 export default connect(
   (state: AppState, props: ResetPasswordProps) => {
diff --git a/app/client/src/pages/UserAuth/SignUp.tsx b/app/client/src/pages/UserAuth/SignUp.tsx
index 894e03632b..bf6e042ea7 100644
--- a/app/client/src/pages/UserAuth/SignUp.tsx
+++ b/app/client/src/pages/UserAuth/SignUp.tsx
@@ -75,7 +75,7 @@ type SignUpFormProps = InjectedFormProps<
 > &
   RouteComponentProps<{ email: string }> & { theme: Theme; emailValue: string };
 
-export const SignUp = (props: SignUpFormProps) => {
+export function SignUp(props: SignUpFormProps) {
   const { error, submitting, pristine, valid, emailValue: email } = props;
   const isFormValid = valid && email && !isEmptyString(email);
 
@@ -106,25 +106,25 @@ export const SignUp = (props: SignUpFormProps) => {
       <SignUpLinkSection>
         {createMessage(ALREADY_HAVE_AN_ACCOUNT)}
         <AuthCardNavLink
-          to={AUTH_LOGIN_URL}
           style={{ marginLeft: props.theme.spaces[3] }}
+          to={AUTH_LOGIN_URL}
         >
           {createMessage(SIGNUP_PAGE_LOGIN_LINK_TEXT)}
         </AuthCardNavLink>
       </SignUpLinkSection>
       {SocialLoginList.length > 0 && (
-        <ThirdPartyAuth type={"SIGNUP"} logins={SocialLoginList} />
+        <ThirdPartyAuth logins={SocialLoginList} type={"SIGNUP"} />
       )}
-      <SpacedSubmitForm method="POST" action={signupURL}>
+      <SpacedSubmitForm action={signupURL} method="POST">
         <FormGroup
           intent={error ? "danger" : "none"}
           label={createMessage(SIGNUP_PAGE_EMAIL_INPUT_LABEL)}
         >
           <FormTextField
-            name="email"
-            type="email"
-            placeholder={createMessage(SIGNUP_PAGE_EMAIL_INPUT_PLACEHOLDER)}
             autoFocus
+            name="email"
+            placeholder={createMessage(SIGNUP_PAGE_EMAIL_INPUT_PLACEHOLDER)}
+            type="email"
           />
         </FormGroup>
         <FormGroup
@@ -132,20 +132,16 @@ export const SignUp = (props: SignUpFormProps) => {
           label={createMessage(SIGNUP_PAGE_PASSWORD_INPUT_LABEL)}
         >
           <FormTextField
-            type="password"
             name="password"
             placeholder={createMessage(SIGNUP_PAGE_PASSWORD_INPUT_PLACEHOLDER)}
+            type="password"
           />
         </FormGroup>
         <FormActions>
           <Button
-            tag="button"
-            type="submit"
             disabled={pristine || !isFormValid}
-            isLoading={submitting}
-            text={createMessage(SIGNUP_PAGE_SUBMIT_BUTTON_TEXT)}
             fill
-            size={Size.large}
+            isLoading={submitting}
             onClick={() => {
               AnalyticsUtil.logEvent("SIGNUP_CLICK", {
                 signupMethod: "EMAIL",
@@ -155,12 +151,16 @@ export const SignUp = (props: SignUpFormProps) => {
               );
               initiateOnboarding();
             }}
+            size={Size.large}
+            tag="button"
+            text={createMessage(SIGNUP_PAGE_SUBMIT_BUTTON_TEXT)}
+            type="submit"
           />
         </FormActions>
       </SpacedSubmitForm>
     </>
   );
-};
+}
 
 const selector = formValueSelector(SIGNUP_FORM_NAME);
 export default connect((state: AppState, props: SignUpFormProps) => {
diff --git a/app/client/src/pages/UserAuth/ThirdPartyAuth.tsx b/app/client/src/pages/UserAuth/ThirdPartyAuth.tsx
index 4e2f7d7e8a..8c6d2af3a5 100644
--- a/app/client/src/pages/UserAuth/ThirdPartyAuth.tsx
+++ b/app/client/src/pages/UserAuth/ThirdPartyAuth.tsx
@@ -58,12 +58,12 @@ export const SocialLoginTypes: Record<string, string> = {
 
 type SignInType = "SIGNIN" | "SIGNUP";
 
-const SocialLoginButton = (props: {
+function SocialLoginButton(props: {
   logo: string;
   name: string;
   url: string;
   type: SignInType;
-}) => {
+}) {
   const location = useLocation();
   const initiateOnboarding = useIntiateOnboarding();
   const queryParams = new URLSearchParams(location.search);
@@ -97,18 +97,18 @@ const SocialLoginButton = (props: {
       <div className="login-method">{`continue with ${props.name}`}</div>
     </StyledSocialLoginButton>
   );
-};
+}
 
-export const ThirdPartyAuth = (props: {
+export function ThirdPartyAuth(props: {
   logins: SocialLoginType[];
   type: SignInType;
-}) => {
+}) {
   const socialLoginButtons = getSocialLoginButtonProps(props.logins).map(
     (item) => {
       return <SocialLoginButton key={item.name} {...item} type={props.type} />;
     },
   );
   return <ThirdPartyAuthWrapper>{socialLoginButtons}</ThirdPartyAuthWrapper>;
-};
+}
 
 export default ThirdPartyAuth;
diff --git a/app/client/src/pages/UserAuth/index.tsx b/app/client/src/pages/UserAuth/index.tsx
index a60d032644..1f217889a7 100644
--- a/app/client/src/pages/UserAuth/index.tsx
+++ b/app/client/src/pages/UserAuth/index.tsx
@@ -16,7 +16,7 @@ import { ThemeProvider } from "styled-components";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
-export const UserAuth = () => {
+export function UserAuth() {
   const { path } = useRouteMatch();
   const location = useLocation();
   const darkTheme = useSelector((state: AppState) =>
@@ -29,17 +29,17 @@ export const UserAuth = () => {
         <AuthCardContainer>
           <AuthCard>
             <Switch location={location}>
-              <SentryRoute exact path={`${path}/login`} component={Login} />
-              <SentryRoute exact path={`${path}/signup`} component={SignUp} />
+              <SentryRoute component={Login} exact path={`${path}/login`} />
+              <SentryRoute component={SignUp} exact path={`${path}/signup`} />
               <SentryRoute
+                component={ResetPassword}
                 exact
                 path={`${path}/resetPassword`}
-                component={ResetPassword}
               />
               <SentryRoute
+                component={ForgotPassword}
                 exact
                 path={`${path}/forgotPassword`}
-                component={ForgotPassword}
               />
               <SentryRoute component={PageNotFound} />
             </Switch>
@@ -49,6 +49,6 @@ export const UserAuth = () => {
       </AuthContainer>
     </ThemeProvider>
   );
-};
+}
 
 export default requiresAuthHOC(UserAuth);
diff --git a/app/client/src/pages/UserAuth/requiresAuthHOC.tsx b/app/client/src/pages/UserAuth/requiresAuthHOC.tsx
index 24bf10dbe5..b6ff1f9dd7 100644
--- a/app/client/src/pages/UserAuth/requiresAuthHOC.tsx
+++ b/app/client/src/pages/UserAuth/requiresAuthHOC.tsx
@@ -7,14 +7,14 @@ import { ANONYMOUS_USERNAME } from "constants/userConstants";
 import { APPLICATIONS_URL } from "constants/routes";
 
 const requiresAuthHOC = (Component: React.ComponentType) => {
-  const Wrapped = (props: any) => {
+  function Wrapped(props: any) {
     const user = useSelector(getCurrentUser);
 
     if (user?.email && user?.email !== ANONYMOUS_USERNAME) {
       return <Redirect to={APPLICATIONS_URL} />;
     }
     return <Component {...props} />;
-  };
+  }
 
   return Wrapped;
 };
diff --git a/app/client/src/pages/UserProfile/General.tsx b/app/client/src/pages/UserProfile/General.tsx
index a4088176c0..d0c85bd90d 100644
--- a/app/client/src/pages/UserProfile/General.tsx
+++ b/app/client/src/pages/UserProfile/General.tsx
@@ -56,7 +56,7 @@ const TextLoader = styled.div`
   border-radius: 0;
 `;
 
-const General = () => {
+function General() {
   const user = useSelector(getCurrentUser);
   const dispatch = useDispatch();
   const forgotPassword = async () => {
@@ -94,15 +94,15 @@ const General = () => {
         <LabelWrapper>
           <Text type={TextType.H4}>Display name</Text>
         </LabelWrapper>
-        {isFetchingUser && <Loader className={Classes.SKELETON}></Loader>}
+        {isFetchingUser && <Loader className={Classes.SKELETON} />}
         {!isFetchingUser && (
           <TextInput
-            validator={notEmptyValidator}
-            placeholder="Display name"
-            onChange={onNameChange}
-            defaultValue={user?.name}
             cypressSelector="t--display-name"
-          ></TextInput>
+            defaultValue={user?.name}
+            onChange={onNameChange}
+            placeholder="Display name"
+            validator={notEmptyValidator}
+          />
         )}
       </InputWrapper>
       <FieldWrapper>
@@ -142,6 +142,6 @@ const General = () => {
       </InputWrapper> */}
     </Wrapper>
   );
-};
+}
 
 export default General;
diff --git a/app/client/src/pages/UserProfile/index.tsx b/app/client/src/pages/UserProfile/index.tsx
index 2d6bf761ca..1a303f9a46 100644
--- a/app/client/src/pages/UserProfile/index.tsx
+++ b/app/client/src/pages/UserProfile/index.tsx
@@ -26,7 +26,7 @@ const LinkToApplications = styled(Link)`
   }
 `;
 
-const UserProfile = () => {
+function UserProfile() {
   const tabs: TabProp[] = [
     {
       key: "general",
@@ -39,17 +39,17 @@ const UserProfile = () => {
   return (
     <PageWrapper displayName={"Profile"}>
       <ProfileWrapper>
-        <LinkToApplications to={"/applications"} className="t--back">
+        <LinkToApplications className="t--back" to={"/applications"}>
           <IconComponent
-            iconName="chevron-left"
             color={Colors.SILVER_CHALICE}
-          ></IconComponent>
+            iconName="chevron-left"
+          />
           <Text type={TextType.H1}>Profile</Text>
         </LinkToApplications>
         <TabComponent tabs={tabs} />
       </ProfileWrapper>
     </PageWrapper>
   );
-};
+}
 
 export default UserProfile;
diff --git a/app/client/src/pages/common/AppHeader.tsx b/app/client/src/pages/common/AppHeader.tsx
index 3e131a9649..52dc414750 100644
--- a/app/client/src/pages/common/AppHeader.tsx
+++ b/app/client/src/pages/common/AppHeader.tsx
@@ -33,14 +33,12 @@ class AppHeader extends React.Component<Props, any> {
   }
   get header() {
     return (
-      <React.Fragment>
-        <Switch>
-          <Route path={BUILDER_URL} component={AppEditorHeader} />
-          <Route path={APP_VIEW_URL} component={AppViewerHeader} />
-          <Route path={USER_AUTH_URL} component={LoginHeader} />
-          <Route path={BASE_URL} component={PageHeader} />
-        </Switch>
-      </React.Fragment>
+      <Switch>
+        <Route component={AppEditorHeader} path={BUILDER_URL} />
+        <Route component={AppViewerHeader} path={APP_VIEW_URL} />
+        <Route component={LoginHeader} path={USER_AUTH_URL} />
+        <Route component={PageHeader} path={BASE_URL} />
+      </Switch>
     );
   }
   render() {
diff --git a/app/client/src/pages/common/ClientError.tsx b/app/client/src/pages/common/ClientError.tsx
index af468dcc22..c5b13bb882 100644
--- a/app/client/src/pages/common/ClientError.tsx
+++ b/app/client/src/pages/common/ClientError.tsx
@@ -24,36 +24,36 @@ interface Props {
   flushErrors?: any;
 }
 
-const ClientError: React.FC<Props> = (props: Props) => {
+function ClientError(props: Props) {
   const { flushErrors } = props;
 
   return (
     <Wrapper>
       <img
-        src={PageUnavailableImage}
         alt="Page Unavailable"
         className="page-unavailable-img"
+        src={PageUnavailableImage}
       />
       <div>
         <p className="bold-text">Whoops something went wrong!</p>
         <p>This is embarrassing, please contact Appsmith support for help</p>
         <Button
+          className="button-position"
           filled
-          text="Contact us on discord"
-          intent="primary"
           icon="arrow-right"
           iconAlignment="right"
-          size="small"
-          className="button-position"
+          intent="primary"
           onClick={() => {
             flushErrors();
             window.open("https://discord.gg/rBTTVJp", "_blank");
           }}
+          size="small"
+          text="Contact us on discord"
         />
       </div>
     </Wrapper>
   );
-};
+}
 
 export default connect(null, {
   flushErrors,
diff --git a/app/client/src/pages/common/CustomizedDropdown/Badge.tsx b/app/client/src/pages/common/CustomizedDropdown/Badge.tsx
index cf6485c7ef..95f049f222 100644
--- a/app/client/src/pages/common/CustomizedDropdown/Badge.tsx
+++ b/app/client/src/pages/common/CustomizedDropdown/Badge.tsx
@@ -36,16 +36,16 @@ type BadgeProps = {
   subtext?: string;
 };
 
-export const Badge = (props: BadgeProps) => {
+export function Badge(props: BadgeProps) {
   return (
     <BadgeWrapper>
-      <img src={props.imageURL} alt={props.text}></img>
+      <img alt={props.text} src={props.imageURL} />
       <div>
         <h3>{props.text}</h3>
         {props.subtext && <h5>{props.subtext}</h5>}
       </div>
     </BadgeWrapper>
   );
-};
+}
 
 export default Badge;
diff --git a/app/client/src/pages/common/CustomizedDropdown/OrgDropdownData.tsx b/app/client/src/pages/common/CustomizedDropdown/OrgDropdownData.tsx
index c1e9691e7a..ce8b55d01e 100644
--- a/app/client/src/pages/common/CustomizedDropdown/OrgDropdownData.tsx
+++ b/app/client/src/pages/common/CustomizedDropdown/OrgDropdownData.tsx
@@ -17,7 +17,7 @@ export const options = (
         options: [
           {
             content: (
-              <Badge text={orgName} imageURL="https://via.placeholder.com/32" />
+              <Badge imageURL="https://via.placeholder.com/32" text={orgName} />
             ),
             disabled: true,
             shouldCloseDropdown: false,
diff --git a/app/client/src/pages/common/CustomizedDropdown/index.tsx b/app/client/src/pages/common/CustomizedDropdown/index.tsx
index e72990bcb4..a03e6145e3 100644
--- a/app/client/src/pages/common/CustomizedDropdown/index.tsx
+++ b/app/client/src/pages/common/CustomizedDropdown/index.tsx
@@ -65,9 +65,9 @@ export const getIcon = (icon?: string | MaybeElement, intent?: Intent) => {
     if (iconNames.indexOf(icon) > -1) {
       return (
         <Icon
+          color={intent ? IntentColors[intent] : IntentColors["secondary"]}
           icon={icon as IconName}
           iconSize={16}
-          color={intent ? IntentColors[intent] : IntentColors["secondary"]}
         />
       );
     }
@@ -79,87 +79,84 @@ const getContentSection = (
   skin: Skin,
 ) => {
   return (
-    <React.Fragment>
-      {section.options &&
-        section.options.map((option, index) => {
-          const shouldClose =
-            option.shouldCloseDropdown === undefined ||
-            option.shouldCloseDropdown;
-          return (
-            <Option
-              key={index}
-              className={
-                shouldClose
-                  ? `${Classes.POPOVER_DISMISS} t--dropdown-option`
-                  : "t--dropdown-option"
-              }
-              onClick={option.onSelect}
-              active={!!option.active}
-              disabled={!!option.disabled}
-              skin={skin}
-            >
-              {option.content}
-            </Option>
-          );
-        })}
-    </React.Fragment>
+    section.options &&
+    section.options.map((option, index) => {
+      const shouldClose =
+        option.shouldCloseDropdown === undefined || option.shouldCloseDropdown;
+      return (
+        <Option
+          active={!!option.active}
+          className={
+            shouldClose
+              ? `${Classes.POPOVER_DISMISS} t--dropdown-option`
+              : "t--dropdown-option"
+          }
+          disabled={!!option.disabled}
+          key={index}
+          onClick={option.onSelect}
+          skin={skin}
+        >
+          {option.content}
+        </Option>
+      );
+    })
   );
 };
 
-export const CustomizedDropdown = (
+export function CustomizedDropdown(
   props: CustomizedDropdownProps & { theme: Theme },
-) => {
+) {
   const skin = props.skin ? props.skin : Skin.LIGHT;
   const icon = getIcon(props.trigger.icon, props.trigger.intent);
   const trigger = (
-    <React.Fragment>
+    <>
       {icon && <div>{icon}</div>}
       {props.trigger.content || (
         <Button
-          outline={props.trigger.outline}
           filled={props.trigger.filled}
-          size={props.trigger.size}
           icon={getDirectionBased.ICON_NAME(props.openDirection) as IconName}
           iconAlignment={Directions.RIGHT}
-          text={props.trigger.text}
           intent={props.trigger.intent}
+          outline={props.trigger.outline}
+          size={props.trigger.size}
           skin={skin}
+          text={props.trigger.text}
           type="button"
         />
       )}
-    </React.Fragment>
+    </>
   );
 
   const content = props.sections.map((section, index) => (
-    <DropdownContentSection key={index} stick={!!section.isSticky} skin={skin}>
+    <DropdownContentSection key={index} skin={skin} stick={!!section.isSticky}>
       {getContentSection(section, skin)}
     </DropdownContentSection>
   ));
   return (
     <Popover
-      position={
-        getDirectionBased.POPPER_POSITION(
-          props.openDirection,
-        ) as PopoverPosition
-      }
+      enforceFocus={false}
       interactionKind={
         props.openOnHover
           ? PopoverInteractionKind.HOVER
           : PopoverInteractionKind.CLICK
       }
       minimal
-      enforceFocus={false}
+      modifiers={props.modifiers}
       onClose={() => {
         if (props.onCloseDropDown) {
           props.onCloseDropDown();
         }
       }}
-      modifiers={props.modifiers}
+      position={
+        getDirectionBased.POPPER_POSITION(
+          props.openDirection,
+        ) as PopoverPosition
+      }
     >
       <DropdownTrigger skin={skin}>{trigger}</DropdownTrigger>
       <DropdownContent skin={skin}>{content}</DropdownContent>
     </Popover>
   );
-};
+}
 
 export default withTheme(CustomizedDropdown);
diff --git a/app/client/src/pages/common/ErrorPage.tsx b/app/client/src/pages/common/ErrorPage.tsx
index 0ecaba01ea..03e7178da2 100644
--- a/app/client/src/pages/common/ErrorPage.tsx
+++ b/app/client/src/pages/common/ErrorPage.tsx
@@ -10,7 +10,7 @@ interface ErrorPageProps {
   code: ERROR_CODES;
 }
 
-const ErrorPage: React.FC<ErrorPageProps> = (props: ErrorPageProps) => {
+function ErrorPage(props: ErrorPageProps) {
   const { code } = props;
 
   switch (code) {
@@ -25,6 +25,6 @@ const ErrorPage: React.FC<ErrorPageProps> = (props: ErrorPageProps) => {
     default:
       return <ServerUnavailable />;
   }
-};
+}
 
 export default ErrorPage;
diff --git a/app/client/src/pages/common/ErrorPageHeader.tsx b/app/client/src/pages/common/ErrorPageHeader.tsx
index fa1f3e97c0..5e78e2493a 100644
--- a/app/client/src/pages/common/ErrorPageHeader.tsx
+++ b/app/client/src/pages/common/ErrorPageHeader.tsx
@@ -44,7 +44,7 @@ type ErrorPageHeaderProps = {
   safeCrash: boolean;
 };
 
-export const ErrorPageHeader = (props: ErrorPageHeaderProps) => {
+export function ErrorPageHeader(props: ErrorPageHeaderProps) {
   const { user, flushErrors, flushErrorsAndRedirect, safeCrash } = props;
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
@@ -57,13 +57,13 @@ export const ErrorPageHeader = (props: ErrorPageHeaderProps) => {
     <StyledPageHeader>
       <HeaderSection>
         <Link
-          to={APPLICATIONS_URL}
           className="t--appsmith-logo"
           onClick={() => {
             if (safeCrash) flushErrors();
           }}
+          to={APPLICATIONS_URL}
         >
-          <AppsmithLogoImg src={AppsmithLogo} alt="Appsmith logo" />
+          <AppsmithLogoImg alt="Appsmith logo" src={AppsmithLogo} />
         </Link>
       </HeaderSection>
       {user && (
@@ -71,21 +71,21 @@ export const ErrorPageHeader = (props: ErrorPageHeaderProps) => {
           {user.username === ANONYMOUS_USERNAME ? (
             <Button
               filled
-              text="Sign In"
               intent={"primary"}
-              size="small"
               onClick={() => {
                 flushErrorsAndRedirect(loginUrl);
               }}
+              size="small"
+              text="Sign In"
             />
           ) : (
-            <ProfileDropdown userName={user.username} name={user.name} />
+            <ProfileDropdown name={user.name} userName={user.username} />
           )}
         </StyledDropDownContainer>
       )}
     </StyledPageHeader>
   );
-};
+}
 
 const mapStateToProps = (state: AppState) => ({
   user: getCurrentUser(state),
diff --git a/app/client/src/pages/common/Loader.tsx b/app/client/src/pages/common/Loader.tsx
index 36f7a7df44..7f93896b5c 100644
--- a/app/client/src/pages/common/Loader.tsx
+++ b/app/client/src/pages/common/Loader.tsx
@@ -3,8 +3,8 @@ import styled from "styled-components";
 
 const StyledLoader = styled.div``;
 
-export const Loader = () => {
+export function Loader() {
   return <StyledLoader className="pace" />;
-};
+}
 
 export default Loader;
diff --git a/app/client/src/pages/common/LoginHeader.tsx b/app/client/src/pages/common/LoginHeader.tsx
index 36ac879ded..7d646169ba 100644
--- a/app/client/src/pages/common/LoginHeader.tsx
+++ b/app/client/src/pages/common/LoginHeader.tsx
@@ -25,21 +25,21 @@ const LogoContainer = styled.div`
   }
 `;
 
-export const LoginHeader = () => {
+export function LoginHeader() {
   return (
     <StyledPageHeader>
       <LogoContainer>
         <Link to={BASE_URL}>
           <img
+            alt="Appsmith Logo"
             className="logoimg t--Appsmith-logo-image"
             src={AppsmithLogo}
-            alt="Appsmith Logo"
           />
         </Link>
       </LogoContainer>
     </StyledPageHeader>
   );
-};
+}
 
 const mapStateToProps = (state: AppState) => ({
   user: getCurrentUser(state),
diff --git a/app/client/src/pages/common/NotFound.tsx b/app/client/src/pages/common/NotFound.tsx
index c6c00d8313..a91b32fdad 100644
--- a/app/client/src/pages/common/NotFound.tsx
+++ b/app/client/src/pages/common/NotFound.tsx
@@ -25,32 +25,32 @@ interface Props {
   onBackButton: () => void;
 }
 
-const NotFound: React.FC<Props> = (props: Props) => {
+function NotFound(props: Props) {
   const { title, subtitle, buttonText, onBackButton } = props;
 
   return (
     <Wrapper>
       <img
-        src={IntegrationUnavailableImage}
         alt={title || "Unavailable"}
         className="unavailable-img"
+        src={IntegrationUnavailableImage}
       />
       <div>
         <p className="bold-text">{title}</p>
         {subtitle && <p>{subtitle}</p>}
         <Button
+          className="button-position"
           filled
-          text={buttonText}
-          intent="primary"
           icon="arrow-right"
           iconAlignment="right"
-          size="small"
-          className="button-position"
+          intent="primary"
           onClick={() => onBackButton()}
+          size="small"
+          text={buttonText}
         />
       </div>
     </Wrapper>
   );
-};
+}
 
 export default NotFound;
diff --git a/app/client/src/pages/common/PageHeader.tsx b/app/client/src/pages/common/PageHeader.tsx
index f619460a3c..92f358de2a 100644
--- a/app/client/src/pages/common/PageHeader.tsx
+++ b/app/client/src/pages/common/PageHeader.tsx
@@ -40,7 +40,7 @@ type PageHeaderProps = {
   user?: User;
 };
 
-export const PageHeader = (props: PageHeaderProps) => {
+export function PageHeader(props: PageHeaderProps) {
   const { user } = props;
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
@@ -53,8 +53,8 @@ export const PageHeader = (props: PageHeaderProps) => {
   return (
     <StyledPageHeader>
       <HeaderSection>
-        <Link to={APPLICATIONS_URL} className="t--appsmith-logo">
-          <AppsmithLogoImg src={AppsmithLogo} alt="Appsmith logo" />
+        <Link className="t--appsmith-logo" to={APPLICATIONS_URL}>
+          <AppsmithLogoImg alt="Appsmith logo" src={AppsmithLogo} />
         </Link>
       </HeaderSection>
       {user && (
@@ -62,19 +62,19 @@ export const PageHeader = (props: PageHeaderProps) => {
           {user.username === ANONYMOUS_USERNAME ? (
             <Button
               filled
-              text="Sign In"
               intent={"primary"}
-              size="small"
               onClick={() => history.push(loginUrl)}
+              size="small"
+              text="Sign In"
             />
           ) : (
-            <ProfileDropdown userName={user.username} name={user.name} />
+            <ProfileDropdown name={user.name} userName={user.username} />
           )}
         </StyledDropDownContainer>
       )}
     </StyledPageHeader>
   );
-};
+}
 
 const mapStateToProps = (state: AppState) => ({
   user: getCurrentUser(state),
diff --git a/app/client/src/pages/common/PageLoadingBar.tsx b/app/client/src/pages/common/PageLoadingBar.tsx
index b640d3d09c..30c7c9f751 100644
--- a/app/client/src/pages/common/PageLoadingBar.tsx
+++ b/app/client/src/pages/common/PageLoadingBar.tsx
@@ -35,11 +35,13 @@ const StyledLoader = styled.div`
   }
 `;
 
-const PageLoadingBar = () => (
-  <StyledLoader>
-    <div className="line" />
-    <div className="subline inc" />
-  </StyledLoader>
-);
+function PageLoadingBar() {
+  return (
+    <StyledLoader>
+      <div className="line" />
+      <div className="subline inc" />
+    </StyledLoader>
+  );
+}
 
 export default PageLoadingBar;
diff --git a/app/client/src/pages/common/PageNotFound.tsx b/app/client/src/pages/common/PageNotFound.tsx
index 70d8b3c8a8..b8b665a720 100644
--- a/app/client/src/pages/common/PageNotFound.tsx
+++ b/app/client/src/pages/common/PageNotFound.tsx
@@ -30,15 +30,15 @@ interface Props {
   flushErrorsAndRedirect?: any;
 }
 
-const PageNotFound: React.FC<Props> = (props: Props) => {
+function PageNotFound(props: Props) {
   const { flushErrorsAndRedirect } = props;
 
   return (
     <Wrapper>
       <img
-        src={PageUnavailableImage}
         alt="Page Unavailable"
         className="page-unavailable-img"
+        src={PageUnavailableImage}
       />
       <div>
         <p className="bold-text">{createMessage(PAGE_NOT_FOUND)}</p>
@@ -48,19 +48,19 @@ const PageNotFound: React.FC<Props> = (props: Props) => {
           this page.
         </p>
         <Button
+          className="button-position"
           filled
-          text={createMessage(BACK_TO_HOMEPAGE)}
-          intent="primary"
           icon="arrow-right"
           iconAlignment="right"
-          size="small"
-          className="button-position"
+          intent="primary"
           onClick={() => flushErrorsAndRedirect(APPLICATIONS_URL)}
+          size="small"
+          text={createMessage(BACK_TO_HOMEPAGE)}
         />
       </div>
     </Wrapper>
   );
-};
+}
 
 export default connect(null, {
   flushErrorsAndRedirect,
diff --git a/app/client/src/pages/common/PageWrapper.tsx b/app/client/src/pages/common/PageWrapper.tsx
index ee83d04ad0..37ab754c4b 100644
--- a/app/client/src/pages/common/PageWrapper.tsx
+++ b/app/client/src/pages/common/PageWrapper.tsx
@@ -45,7 +45,7 @@ type PageWrapperProps = {
   displayName?: string;
 };
 
-export const PageWrapper = (props: PageWrapperProps) => {
+export function PageWrapper(props: PageWrapperProps) {
   return (
     <Wrapper>
       <Helmet>
@@ -56,6 +56,6 @@ export const PageWrapper = (props: PageWrapperProps) => {
       <PageBody>{props.children}</PageBody>
     </Wrapper>
   );
-};
+}
 
 export default PageWrapper;
diff --git a/app/client/src/pages/common/ProfileDropdown.tsx b/app/client/src/pages/common/ProfileDropdown.tsx
index f3b164d711..ccc18a6e9b 100644
--- a/app/client/src/pages/common/ProfileDropdown.tsx
+++ b/app/client/src/pages/common/ProfileDropdown.tsx
@@ -79,25 +79,25 @@ export default function ProfileDropdown(props: TagProps) {
   const Profile = <ProfileImage userName={props.userName} />;
 
   return (
-    <Fragment>
+    <>
       <ProfileMenuStyle />
       <Menu
         className="profile-menu t--profile-menu"
+        modifiers={props.modifiers}
         position={Position.BOTTOM}
         target={Profile}
-        modifiers={props.modifiers}
       >
         <UserInformation>
           <div className="user-image">{Profile}</div>
           <UserNameWrapper>
             <div className="user-name t--user-name">
-              <Text type={TextType.P1} highlight>
+              <Text highlight type={TextType.P1}>
                 {props.name}
               </Text>
             </div>
 
             <div className="user-username">
-              <Text type={TextType.P3} highlight>
+              <Text highlight type={TextType.P3}>
                 {props.userName}
               </Text>
             </div>
@@ -111,26 +111,26 @@ export default function ProfileDropdown(props: TagProps) {
           </>
         )}
         <MenuItem
-          icon="edit"
-          text="Edit Profile"
           className={`t--edit-profile ${BlueprintClasses.POPOVER_DISMISS}`}
+          icon="edit"
           onSelect={() => {
             getOnSelectAction(DropdownOnSelectActions.REDIRECT, {
               path: PROFILE,
             });
           }}
+          text="Edit Profile"
         />
         <MenuItem
-          icon="logout"
-          text="Sign Out"
           className="t--logout-icon"
+          icon="logout"
           onSelect={() =>
             getOnSelectAction(DropdownOnSelectActions.DISPATCH, {
               type: ReduxActionTypes.LOGOUT_USER_INIT,
             })
           }
+          text="Sign Out"
         />
       </Menu>
-    </Fragment>
+    </>
   );
 }
diff --git a/app/client/src/pages/common/ProfileImage.tsx b/app/client/src/pages/common/ProfileImage.tsx
index 5ab927bd61..a370fe5194 100644
--- a/app/client/src/pages/common/ProfileImage.tsx
+++ b/app/client/src/pages/common/ProfileImage.tsx
@@ -34,7 +34,7 @@ export default function ProfileImage(props: {
       backgroundColor={initialsAndColorCode[1]}
       className={props.className}
     >
-      <Text type={TextType.H6} highlight>
+      <Text highlight type={TextType.H6}>
         {props.commonName || initialsAndColorCode[0]}
       </Text>
     </Profile>
diff --git a/app/client/src/pages/common/ServerTimeout.tsx b/app/client/src/pages/common/ServerTimeout.tsx
index 523a2389d3..7d4171f69e 100644
--- a/app/client/src/pages/common/ServerTimeout.tsx
+++ b/app/client/src/pages/common/ServerTimeout.tsx
@@ -32,13 +32,13 @@ const RetryButton = styled.button`
   font-size: 17px;
 `;
 
-const ServerTimeout = () => {
+function ServerTimeout() {
   return (
     <Wrapper>
       <img
-        src={AppTimeoutImage}
         alt="Page Unavailable"
         className="page-unavailable-img"
+        src={AppTimeoutImage}
       />
       <div>
         <p className="bold-text">
@@ -51,6 +51,6 @@ const ServerTimeout = () => {
       </div>
     </Wrapper>
   );
-};
+}
 
 export default ServerTimeout;
diff --git a/app/client/src/pages/common/ServerUnavailable.tsx b/app/client/src/pages/common/ServerUnavailable.tsx
index d0374e8df2..99307583f8 100644
--- a/app/client/src/pages/common/ServerUnavailable.tsx
+++ b/app/client/src/pages/common/ServerUnavailable.tsx
@@ -29,13 +29,13 @@ const RetryButton = styled.button`
   font-size: 17px;
 `;
 
-const ServerUnavailable = () => {
+function ServerUnavailable() {
   return (
     <Wrapper>
       <img
-        src={PageUnavailableImage}
         alt="Page Unavailable"
         className="page-unavailable-img"
+        src={PageUnavailableImage}
       />
       <div>
         <p className="bold-text">Appsmith server is unavailable</p>
@@ -46,6 +46,6 @@ const ServerUnavailable = () => {
       </div>
     </Wrapper>
   );
-};
+}
 
 export default ServerUnavailable;
diff --git a/app/client/src/pages/common/SubHeader.tsx b/app/client/src/pages/common/SubHeader.tsx
index 786c1fa1fe..cc05418d20 100644
--- a/app/client/src/pages/common/SubHeader.tsx
+++ b/app/client/src/pages/common/SubHeader.tsx
@@ -49,14 +49,14 @@ type SubHeaderProps = {
   };
 };
 
-export const ApplicationsSubHeader = (props: SubHeaderProps) => {
+export function ApplicationsSubHeader(props: SubHeaderProps) {
   const isFetchingApplications = useSelector(getIsFetchingApplications);
   const query =
     props.search &&
     props.search.queryFn &&
     _.debounce(props.search.queryFn, 250, { maxWait: 1000 });
   const createTrigger = props.add && (
-    <Button text={props.add.title} size={Size.medium} />
+    <Button size={Size.medium} text={props.add.title} />
   );
 
   return (
@@ -66,10 +66,10 @@ export const ApplicationsSubHeader = (props: SubHeaderProps) => {
           <ControlGroup>
             <SearchInput
               cypressSelector={"t--application-search-input"}
+              disabled={isFetchingApplications}
+              onChange={query || noop}
               placeholder={props.search.placeholder}
               variant={SearchVariant.SEAMLESS}
-              onChange={query || noop}
-              disabled={isFetchingApplications}
             />
           </ControlGroup>
         )}
@@ -77,13 +77,13 @@ export const ApplicationsSubHeader = (props: SubHeaderProps) => {
 
       {props.add && (
         <FormDialogComponent
-          trigger={createTrigger}
           Form={props.add.form}
           title={props.add.title}
+          trigger={createTrigger}
         />
       )}
     </SubHeaderWrapper>
   );
-};
+}
 
 export default ApplicationsSubHeader;
diff --git a/app/client/src/pages/common/ThemeSwitcher.tsx b/app/client/src/pages/common/ThemeSwitcher.tsx
index 097a816638..307f804265 100644
--- a/app/client/src/pages/common/ThemeSwitcher.tsx
+++ b/app/client/src/pages/common/ThemeSwitcher.tsx
@@ -12,17 +12,17 @@ export default function ThemeSwitcher(props: { className?: string }) {
 
   return (
     <MenuItem
-      text="Theme"
       label={
         <Switch
           className={props.className}
-          value={switchedOn}
           onSwitch={(value) => {
             setSwitchOn(value);
             dispatch(setThemeMode(value ? ThemeMode.DARK : ThemeMode.LIGHT));
           }}
+          value={switchedOn}
         />
       }
+      text="Theme"
     />
   );
 }
diff --git a/app/client/src/pages/organization/AppInviteUsersForm.tsx b/app/client/src/pages/organization/AppInviteUsersForm.tsx
index ee5326c883..71a84ed865 100644
--- a/app/client/src/pages/organization/AppInviteUsersForm.tsx
+++ b/app/client/src/pages/organization/AppInviteUsersForm.tsx
@@ -32,7 +32,7 @@ const ShareToggle = styled.div`
   height: 23px;
 `;
 
-const AppInviteUsersForm = (props: any) => {
+function AppInviteUsersForm(props: any) {
   const {
     isFetchingApplication,
     isChangingViewAccess,
@@ -73,26 +73,24 @@ const AppInviteUsersForm = (props: any) => {
   return (
     <>
       {canShareWithPublic && (
-        <>
-          <ShareWithPublicOption>
-            <Text type={TextType.H5}>Make the application public</Text>
-            <ShareToggle>
-              {currentApplicationDetails && (
-                <Toggle
-                  isLoading={isChangingViewAccess || isFetchingApplication}
-                  value={currentApplicationDetails.isPublic}
-                  disabled={isChangingViewAccess || isFetchingApplication}
-                  onToggle={() => {
-                    changeAppViewAccess(
-                      applicationId,
-                      !currentApplicationDetails.isPublic,
-                    );
-                  }}
-                />
-              )}
-            </ShareToggle>
-          </ShareWithPublicOption>
-        </>
+        <ShareWithPublicOption>
+          <Text type={TextType.H5}>Make the application public</Text>
+          <ShareToggle>
+            {currentApplicationDetails && (
+              <Toggle
+                disabled={isChangingViewAccess || isFetchingApplication}
+                isLoading={isChangingViewAccess || isFetchingApplication}
+                onToggle={() => {
+                  changeAppViewAccess(
+                    applicationId,
+                    !currentApplicationDetails.isPublic,
+                  );
+                }}
+                value={currentApplicationDetails.isPublic}
+              />
+            )}
+          </ShareToggle>
+        </ShareWithPublicOption>
       )}
       <Title>
         <Text type={TextType.H5}>
@@ -102,11 +100,11 @@ const AppInviteUsersForm = (props: any) => {
       <CopyToClipBoard copyText={getViewApplicationURL()} />
 
       {canInviteToOrg && (
-        <OrgInviteUsersForm orgId={props.orgId} isApplicationInvite={true} />
+        <OrgInviteUsersForm isApplicationInvite orgId={props.orgId} />
       )}
     </>
   );
-};
+}
 
 export default connect(
   (state: AppState) => {
diff --git a/app/client/src/pages/organization/CreateOrganizationForm.tsx b/app/client/src/pages/organization/CreateOrganizationForm.tsx
index 5e02b2a001..644f24c774 100644
--- a/app/client/src/pages/organization/CreateOrganizationForm.tsx
+++ b/app/client/src/pages/organization/CreateOrganizationForm.tsx
@@ -12,14 +12,14 @@ import FormFooter from "components/editorComponents/form/FormFooter";
 import FormMessage from "components/editorComponents/form/FormMessage";
 
 // TODO(abhinav): abstract onCancel out.
-export const CreateApplicationForm = (
+export function CreateApplicationForm(
   props: InjectedFormProps<
     CreateOrganizationFormValues,
     { onCancel: () => void }
   > & {
     onCancel: () => void;
   },
-) => {
+) {
   const {
     error,
     handleSubmit,
@@ -39,33 +39,33 @@ export const CreateApplicationForm = (
 
   return (
     <Form
-      onSubmit={handleSubmit(submitHandler)}
       data-cy="create-organisation-form"
+      onSubmit={handleSubmit(submitHandler)}
     >
       {error && !pristine && <FormMessage intent="danger" message={error} />}
-      <FormGroup intent={error ? "danger" : "none"} helperText={error}>
+      <FormGroup helperText={error} intent={error ? "danger" : "none"}>
         <TextField
+          autoFocus
+          data-cy="create-organisation-form__name"
           name="name"
           placeholder="Name"
           validate={noSpaces}
-          autoFocus
-          data-cy="create-organisation-form__name"
         />
       </FormGroup>
       <FormFooter
-        onCancel={onCancel}
-        divider
-        data-cy="t--create-org-submit"
-        submitOnEnter
         canSubmit={!invalid}
-        submitText="Submit"
+        data-cy="t--create-org-submit"
+        divider
+        onCancel={onCancel}
         onSubmit={handleSubmit(submitHandler)}
         size="small"
+        submitOnEnter
+        submitText="Submit"
         submitting={submitting && !error}
       />
     </Form>
   );
-};
+}
 
 export default reduxForm<
   CreateOrganizationFormValues,
diff --git a/app/client/src/pages/organization/General.tsx b/app/client/src/pages/organization/General.tsx
index 406eece61a..f9bd6e2010 100644
--- a/app/client/src/pages/organization/General.tsx
+++ b/app/client/src/pages/organization/General.tsx
@@ -146,17 +146,15 @@ export function GeneralSettings() {
             </InputLabelWrapper>
           </Col>
           <Col>
-            {isFetchingApplications && (
-              <Loader className={Classes.SKELETON}></Loader>
-            )}
+            {isFetchingApplications && <Loader className={Classes.SKELETON} />}
             {!isFetchingApplications && (
               <TextInput
-                validator={notEmptyValidator}
-                placeholder="Organization Name"
-                onChange={onWorkspaceNameChange}
-                defaultValue={currentOrg && currentOrg.name}
                 cypressSelector="t--org-name-input"
-              ></TextInput>
+                defaultValue={currentOrg && currentOrg.name}
+                onChange={onWorkspaceNameChange}
+                placeholder="Organization Name"
+                validator={notEmptyValidator}
+              />
             )}
           </Col>
         </Row>
@@ -170,15 +168,13 @@ export function GeneralSettings() {
             </InputLabelWrapper>
           </Col>
           <Col>
-            {isFetchingOrg && (
-              <FilePickerLoader className={Classes.SKELETON}></FilePickerLoader>
-            )}
+            {isFetchingOrg && <FilePickerLoader className={Classes.SKELETON} />}
             {!isFetchingOrg && (
               <FilePicker
-                url={currentOrg && currentOrg.logoUrl}
                 fileUploader={FileUploader}
-                onFileRemoved={DeleteLogo}
                 logoUploadError={logoUploadError.message}
+                onFileRemoved={DeleteLogo}
+                url={currentOrg && currentOrg.logoUrl}
               />
             )}
           </Col>
@@ -193,16 +189,14 @@ export function GeneralSettings() {
             </InputLabelWrapper>
           </Col>
           <Col>
-            {isFetchingApplications && (
-              <Loader className={Classes.SKELETON}></Loader>
-            )}
+            {isFetchingApplications && <Loader className={Classes.SKELETON} />}
             {!isFetchingApplications && (
               <TextInput
-                placeholder="Your website"
-                onChange={onWebsiteChange}
-                defaultValue={(currentOrg && currentOrg.website) || ""}
                 cypressSelector="t--org-website-input"
-              ></TextInput>
+                defaultValue={(currentOrg && currentOrg.website) || ""}
+                onChange={onWebsiteChange}
+                placeholder="Your website"
+              />
             )}
           </Col>
         </Row>
@@ -216,17 +210,15 @@ export function GeneralSettings() {
             </InputLabelWrapper>
           </Col>
           <Col>
-            {isFetchingApplications && (
-              <Loader className={Classes.SKELETON}></Loader>
-            )}
+            {isFetchingApplications && <Loader className={Classes.SKELETON} />}
             {!isFetchingApplications && (
               <TextInput
-                validator={emailValidator}
-                placeholder="Email"
-                onChange={onEmailChange}
-                defaultValue={(currentOrg && currentOrg.email) || ""}
                 cypressSelector="t--org-email-input"
-              ></TextInput>
+                defaultValue={(currentOrg && currentOrg.email) || ""}
+                onChange={onEmailChange}
+                placeholder="Email"
+                validator={emailValidator}
+              />
             )}
           </Col>
         </Row>
diff --git a/app/client/src/pages/organization/ManageUsers.tsx b/app/client/src/pages/organization/ManageUsers.tsx
index 7f3d6cd7bb..9b4b8a1686 100644
--- a/app/client/src/pages/organization/ManageUsers.tsx
+++ b/app/client/src/pages/organization/ManageUsers.tsx
@@ -35,7 +35,7 @@ const StyledManageUsers = styled("a")`
   }
 `;
 
-const ManageUsers = ({ orgId }: { orgId: string }) => {
+function ManageUsers({ orgId }: { orgId: string }) {
   const currentPath = useLocation().pathname;
   const pathRegex = /(?:\/org\/)\w+(?:\/settings)/;
 
@@ -50,5 +50,5 @@ const ManageUsers = ({ orgId }: { orgId: string }) => {
       <Icon name="manage" size={IconSize.XXS} />
     </StyledManageUsers>
   ) : null;
-};
+}
 export default ManageUsers;
diff --git a/app/client/src/pages/organization/Members.tsx b/app/client/src/pages/organization/Members.tsx
index 80303eec0f..b2b45debe4 100644
--- a/app/client/src/pages/organization/Members.tsx
+++ b/app/client/src/pages/organization/Members.tsx
@@ -105,8 +105,6 @@ export default function MemberSettings(props: PageProps) {
         }
         return (
           <TableDropdown
-            selectedIndex={index}
-            options={roles}
             isLoading={
               roleChangingUserInfo &&
               roleChangingUserInfo.username ===
@@ -121,7 +119,9 @@ export default function MemberSettings(props: PageProps) {
                 ),
               );
             }}
-          ></TableDropdown>
+            options={roles}
+            selectedIndex={index}
+          />
         );
       },
     },
@@ -138,18 +138,18 @@ export default function MemberSettings(props: PageProps) {
         }
         return (
           <Icon
-            name="delete"
-            size={IconSize.LARGE}
             cypressSelector="t--deleteUser"
             isLoading={
               deletingUserInfo &&
               deletingUserInfo.username === cellProps.cell.row.values.username
             }
+            name="delete"
             onClick={() => {
               dispatch(
                 deleteOrgUser(orgId, cellProps.cell.row.values.username),
               );
             }}
+            size={IconSize.LARGE}
           />
         );
       },
@@ -159,29 +159,29 @@ export default function MemberSettings(props: PageProps) {
   const currentOrgName = currentOrg?.name ?? "";
 
   return (
-    <React.Fragment>
+    <>
       <PageSectionHeader>
         <SettingsHeading type={TextType.H2}>Manage Users</SettingsHeading>
         <FormDialogComponent
+          Form={OrgInviteUsersForm}
+          canOutsideClickClose
+          orgId={orgId}
+          title={`Invite Users to ${currentOrgName}`}
           trigger={
             <Button
               cypressSelector="t--invite-users"
-              variant={Variant.info}
-              text="Invite Users"
               size={Size.medium}
-            ></Button>
+              text="Invite Users"
+              variant={Variant.info}
+            />
           }
-          canOutsideClickClose={true}
-          Form={OrgInviteUsersForm}
-          orgId={orgId}
-          title={`Invite Users to ${currentOrgName}`}
         />
       </PageSectionHeader>
       {isFetchingAllUsers && isFetchingAllRoles ? (
         <Loader className={Classes.SKELETON} />
       ) : (
-        <Table data={userTableData} columns={columns}></Table>
+        <Table columns={columns} data={userTableData} />
       )}
-    </React.Fragment>
+    </>
   );
 }
diff --git a/app/client/src/pages/organization/OrgInviteUsersForm.tsx b/app/client/src/pages/organization/OrgInviteUsersForm.tsx
index a7c7b16014..437c3ab050 100644
--- a/app/client/src/pages/organization/OrgInviteUsersForm.tsx
+++ b/app/client/src/pages/organization/OrgInviteUsersForm.tsx
@@ -202,7 +202,7 @@ const validate = (values: any) => {
 
 const { mailEnabled } = getAppsmithConfigs();
 
-const OrgInviteUsersForm = (props: any) => {
+function OrgInviteUsersForm(props: any) {
   const [emailError, setEmailError] = useState("");
   const userRef = React.createRef<HTMLDivElement>();
   const {
@@ -287,51 +287,51 @@ const OrgInviteUsersForm = (props: any) => {
         <StyledInviteFieldGroup>
           <div className="wrapper">
             <TagListField
+              customError={(err: string) => setEmailError(err)}
+              data-cy="t--invite-email-input"
+              intent="success"
+              label="Emails"
               name="users"
               placeholder="Enter email address"
               type="email"
-              label="Emails"
-              intent="success"
-              data-cy="t--invite-email-input"
-              customError={(err: string) => setEmailError(err)}
             />
             <SelectField
-              name="role"
-              placeholder="Select a role"
-              options={styledRoles}
-              size="small"
-              outline={false}
               data-cy="t--invite-role-input"
+              name="role"
+              options={styledRoles}
+              outline={false}
+              placeholder="Select a role"
+              size="small"
             />
           </div>
           <Button
-            tag="button"
             className="t--invite-user-btn"
             disabled={!valid}
-            text="Invite"
-            size={Size.large}
-            variant={Variant.info}
             isLoading={submitting && !(submitFailed && !anyTouched)}
+            size={Size.large}
+            tag="button"
+            text="Invite"
+            variant={Variant.info}
           />
         </StyledInviteFieldGroup>
         {isLoading ? (
           <Loading size={30} />
         ) : (
-          <React.Fragment>
+          <>
             {!mailEnabled && (
               <MailConfigContainer>
                 {allUsers.length === 0 && <NoEmailConfigImage />}
                 <span>You haven’t setup any email service yet</span>
                 <a
                   href="https://docs.appsmith.com/v/v1.2.1/setup/docker/email"
-                  target="_blank"
                   rel="noopener noreferrer"
+                  target="_blank"
                 >
                   Please configure your email service to invite people
                 </a>
               </MailConfigContainer>
             )}
-            <UserList style={{ justifyContent: "space-between" }} ref={userRef}>
+            <UserList ref={userRef} style={{ justifyContent: "space-between" }}>
               {allUsersProfiles.map(
                 (user: {
                   username: string;
@@ -361,29 +361,29 @@ const OrgInviteUsersForm = (props: any) => {
               )}
               <ScrollIndicator containerRef={userRef} mode="DARK" />
             </UserList>
-          </React.Fragment>
+          </>
         )}
         <ErrorBox message={submitSucceeded || submitFailed}>
           {submitSucceeded && (
             <Callout
-              variant={Variant.success}
               fill
               text={
                 numberOfUsersInvited > 1
                   ? INVITE_USERS_SUBMIT_SUCCESS()
                   : INVITE_USER_SUBMIT_SUCCESS()
               }
+              variant={Variant.success}
             />
           )}
           {((submitFailed && error) || emailError) && (
-            <Callout variant={Variant.danger} fill text={error || emailError} />
+            <Callout fill text={error || emailError} variant={Variant.danger} />
           )}
         </ErrorBox>
         {canManage && <ManageUsers orgId={props.orgId} />}
       </StyledForm>
     </>
   );
-};
+}
 
 export default connect(
   (state: AppState) => {
diff --git a/app/client/src/pages/organization/defaultOrgPage.tsx b/app/client/src/pages/organization/defaultOrgPage.tsx
index 24fba504c8..5b8f0f4758 100644
--- a/app/client/src/pages/organization/defaultOrgPage.tsx
+++ b/app/client/src/pages/organization/defaultOrgPage.tsx
@@ -1,8 +1,10 @@
 import React from "react";
 import Centered from "components/designSystems/appsmith/CenteredWrapper";
-export const DefaultOrgPage = () => (
-  <Centered>
-    <p>This page is under construction</p>
-  </Centered>
-);
+export function DefaultOrgPage() {
+  return (
+    <Centered>
+      <p>This page is under construction</p>
+    </Centered>
+  );
+}
 export default DefaultOrgPage;
diff --git a/app/client/src/pages/organization/index.tsx b/app/client/src/pages/organization/index.tsx
index 7b731c4009..0efda6e35c 100644
--- a/app/client/src/pages/organization/index.tsx
+++ b/app/client/src/pages/organization/index.tsx
@@ -6,17 +6,17 @@ import Settings from "./settings";
 import * as Sentry from "@sentry/react";
 const SentryRoute = Sentry.withSentryRouting(Route);
 
-export const Organization = () => {
+export function Organization() {
   const { path } = useRouteMatch();
   const location = useLocation();
   return (
     <PageWrapper displayName="Organization Settings">
       <Switch location={location}>
-        <SentryRoute path={`${path}/:orgId/settings`} component={Settings} />
+        <SentryRoute component={Settings} path={`${path}/:orgId/settings`} />
         <SentryRoute component={DefaultOrgPage} />
       </Switch>
     </PageWrapper>
   );
-};
+}
 
 export default Organization;
diff --git a/app/client/src/pages/organization/settings.tsx b/app/client/src/pages/organization/settings.tsx
index 0d778796c7..1024c4bfe4 100644
--- a/app/client/src/pages/organization/settings.tsx
+++ b/app/client/src/pages/organization/settings.tsx
@@ -56,14 +56,14 @@ export default function Settings() {
   const SettingsRenderer = (
     <div>
       <SentryRoute
-        path={`${path}/general`}
         component={GeneralSettings}
         location={location}
+        path={`${path}/general`}
       />
       <SentryRoute
-        path={`${path}/members`}
         component={MemberSettings}
         location={location}
+        path={`${path}/members`}
       />
     </div>
   );
@@ -87,14 +87,12 @@ export default function Settings() {
   return (
     <SettingsWrapper>
       <LinkToApplications to={"/applications"}>
-        <IconComponent iconName="chevron-left" color="#9F9F9F"></IconComponent>
-        <Text type={TextType.H1} className="t--organization-header">
+        <IconComponent color="#9F9F9F" iconName="chevron-left" />
+        <Text className="t--organization-header" type={TextType.H1}>
           {currentOrg && currentOrg.name}
         </Text>
       </LinkToApplications>
       <TabComponent
-        tabs={tabArr}
-        selectedIndex={isMembersPage ? 1 : 0}
         onSelect={(index: number) => {
           const settingsStartIndex = location.pathname.indexOf("settings");
           const settingsEndIndex = settingsStartIndex + "settings".length;
@@ -110,7 +108,9 @@ export default function Settings() {
           }
           history.push(newUrl);
         }}
-      ></TabComponent>
+        selectedIndex={isMembersPage ? 1 : 0}
+        tabs={tabArr}
+      />
     </SettingsWrapper>
   );
 }
diff --git a/app/client/src/pages/organization/users.tsx b/app/client/src/pages/organization/users.tsx
index 2feed942c8..b4988d94ae 100644
--- a/app/client/src/pages/organization/users.tsx
+++ b/app/client/src/pages/organization/users.tsx
@@ -4,24 +4,22 @@ import { ORG_INVITE_USERS_PAGE_URL } from "constants/routes";
 import PageSectionHeader from "pages/common/PageSectionHeader";
 import Button from "components/editorComponents/Button";
 
-export const OrgMembers = () => {
+export function OrgMembers() {
   const history = useHistory();
 
   return (
-    <React.Fragment>
-      <PageSectionHeader>
-        <h2>Users</h2>
-        <Button
-          intent="primary"
-          text="Invite Users"
-          icon="plus"
-          iconAlignment="left"
-          filled
-          onClick={() => history.push(ORG_INVITE_USERS_PAGE_URL)}
-        />
-      </PageSectionHeader>
-    </React.Fragment>
+    <PageSectionHeader>
+      <h2>Users</h2>
+      <Button
+        filled
+        icon="plus"
+        iconAlignment="left"
+        intent="primary"
+        onClick={() => history.push(ORG_INVITE_USERS_PAGE_URL)}
+        text="Invite Users"
+      />
+    </PageSectionHeader>
   );
-};
+}
 
 export default OrgMembers;
diff --git a/app/client/src/pages/users/index.tsx b/app/client/src/pages/users/index.tsx
index 53286689ca..d8078ff45e 100644
--- a/app/client/src/pages/users/index.tsx
+++ b/app/client/src/pages/users/index.tsx
@@ -5,7 +5,7 @@ import PageSectionHeader from "pages/common/PageSectionHeader";
 import Button from "components/editorComponents/Button";
 import PageWrapper from "pages/common/PageWrapper";
 
-export const OrgMembers = () => {
+export function OrgMembers() {
   const history = useHistory();
 
   return (
@@ -13,16 +13,16 @@ export const OrgMembers = () => {
       <PageSectionHeader>
         <h2>Users</h2>
         <Button
-          intent="primary"
-          text="Invite Users"
+          filled
           icon="plus"
           iconAlignment="left"
-          filled
+          intent="primary"
           onClick={() => history.push(ORG_INVITE_USERS_PAGE_URL)}
+          text="Invite Users"
         />
       </PageSectionHeader>
     </PageWrapper>
   );
-};
+}
 
 export default OrgMembers;
diff --git a/app/client/src/resizable/index.tsx b/app/client/src/resizable/index.tsx
index 0827200d40..360e82840b 100644
--- a/app/client/src/resizable/index.tsx
+++ b/app/client/src/resizable/index.tsx
@@ -34,7 +34,7 @@ type ResizableHandleProps = {
   };
 };
 
-const ResizableHandle = (props: ResizableHandleProps) => {
+function ResizableHandle(props: ResizableHandleProps) {
   const bind = useDrag(
     ({ first, last, dragging, movement: [mx, my], memo }) => {
       const snapped = getSnappedValues(mx, my, props.snapGrid);
@@ -52,7 +52,7 @@ const ResizableHandle = (props: ResizableHandleProps) => {
   );
 
   return <props.component {...bind()} />;
-};
+}
 
 type ResizableProps = {
   handles: {
@@ -236,28 +236,28 @@ export const Resizable = forwardRef(
 
     return (
       <Spring
-        from={{
-          width: props.componentWidth,
-          height: props.componentHeight,
-        }}
-        to={{
-          width: newDimensions.width,
-          height: newDimensions.height,
-          transform: `translate3d(${newDimensions.x}px,${newDimensions.y}px,0)`,
-        }}
         config={{
           clamp: true,
           friction: 0,
           tension: 999,
         }}
+        from={{
+          width: props.componentWidth,
+          height: props.componentHeight,
+        }}
         immediate={newDimensions.reset ? true : false}
+        to={{
+          width: newDimensions.width,
+          height: newDimensions.height,
+          transform: `translate3d(${newDimensions.x}px,${newDimensions.y}px,0)`,
+        }}
       >
         {(_props) => (
           <ResizeWrapper
-            ref={ref}
-            style={_props}
             className={props.className}
             pevents={pointerEvents}
+            ref={ref}
+            style={_props}
           >
             {props.children}
             {props.enable && renderHandles}
diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx
index c32ccbbdc6..b957acf041 100644
--- a/app/client/src/widgets/BaseWidget.tsx
+++ b/app/client/src/widgets/BaseWidget.tsx
@@ -206,11 +206,11 @@ abstract class BaseWidget<
       <>
         {!this.props.disablePropertyPane && (
           <WidgetNameComponent
-            widgetName={this.props.widgetName}
-            widgetId={this.props.widgetId}
             parentId={this.props.parentId}
-            type={this.props.type}
             showControls={showControls}
+            type={this.props.type}
+            widgetId={this.props.widgetId}
+            widgetName={this.props.widgetName}
           />
         )}
         {content}
@@ -232,9 +232,9 @@ abstract class BaseWidget<
     const style = this.getPositionStyle();
     return (
       <PositionedContainer
+        style={style}
         widgetId={this.props.widgetId}
         widgetType={this.props.type}
-        style={style}
       >
         {content}
       </PositionedContainer>
@@ -269,7 +269,7 @@ abstract class BaseWidget<
           }
           return content;
         }
-        return <React.Fragment />;
+        return null;
       default:
         throw Error("RenderMode not defined");
     }
diff --git a/app/client/src/widgets/ButtonWidget.tsx b/app/client/src/widgets/ButtonWidget.tsx
index 232141f485..acabd0b96a 100644
--- a/app/client/src/widgets/ButtonWidget.tsx
+++ b/app/client/src/widgets/ButtonWidget.tsx
@@ -157,16 +157,16 @@ class ButtonWidget extends BaseWidget<ButtonWidgetProps, ButtonWidgetState> {
     return (
       <ButtonComponent
         buttonStyle={this.props.buttonStyle}
-        widgetId={this.props.widgetId}
-        key={this.props.widgetId}
-        widgetName={this.props.widgetName}
-        text={this.props.text}
-        disabled={this.props.isDisabled}
-        onClick={!this.props.isDisabled ? this.onButtonClickBound : undefined}
-        isLoading={this.props.isLoading || this.state.isLoading}
-        type={this.props.buttonType || ButtonType.BUTTON}
-        googleRecaptchaKey={this.props.googleRecaptchaKey}
         clickWithRecaptcha={this.clickWithRecaptchaBound}
+        disabled={this.props.isDisabled}
+        googleRecaptchaKey={this.props.googleRecaptchaKey}
+        isLoading={this.props.isLoading || this.state.isLoading}
+        key={this.props.widgetId}
+        onClick={!this.props.isDisabled ? this.onButtonClickBound : undefined}
+        text={this.props.text}
+        type={this.props.buttonType || ButtonType.BUTTON}
+        widgetId={this.props.widgetId}
+        widgetName={this.props.widgetName}
       />
     );
   }
diff --git a/app/client/src/widgets/ChartWidget/index.tsx b/app/client/src/widgets/ChartWidget/index.tsx
index 305a8231c2..84432435a9 100644
--- a/app/client/src/widgets/ChartWidget/index.tsx
+++ b/app/client/src/widgets/ChartWidget/index.tsx
@@ -46,17 +46,17 @@ class ChartWidget extends BaseWidget<ChartWidgetProps, WidgetState> {
     return (
       <Suspense fallback={<Skeleton />}>
         <ChartComponent
-          key={this.props.widgetId}
-          isVisible={this.props.isVisible}
+          allowHorizontalScroll={this.props.allowHorizontalScroll}
+          chartData={this.props.chartData}
+          chartName={this.props.chartName}
           chartType={this.props.chartType}
+          customFusionChartConfig={this.props.customFusionChartConfig}
+          isVisible={this.props.isVisible}
+          key={this.props.widgetId}
+          onDataPointClick={this.onDataPointClick}
+          widgetId={this.props.widgetId}
           xAxisName={this.props.xAxisName}
           yAxisName={this.props.yAxisName}
-          chartName={this.props.chartName}
-          chartData={this.props.chartData}
-          customFusionChartConfig={this.props.customFusionChartConfig}
-          widgetId={this.props.widgetId}
-          onDataPointClick={this.onDataPointClick}
-          allowHorizontalScroll={this.props.allowHorizontalScroll}
         />
       </Suspense>
     );
diff --git a/app/client/src/widgets/CheckboxWidget.tsx b/app/client/src/widgets/CheckboxWidget.tsx
index b53bfda153..9ed27f3730 100644
--- a/app/client/src/widgets/CheckboxWidget.tsx
+++ b/app/client/src/widgets/CheckboxWidget.tsx
@@ -126,15 +126,15 @@ class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
   getPageView() {
     return (
       <CheckboxComponent
-        isRequired={this.props.isRequired}
-        isChecked={!!this.props.isChecked}
         alignWidget={this.props.alignWidget}
-        label={this.props.label}
-        widgetId={this.props.widgetId}
-        key={this.props.widgetId}
+        isChecked={!!this.props.isChecked}
         isDisabled={this.props.isDisabled}
-        onCheckChange={this.onCheckChange}
         isLoading={this.props.isLoading}
+        isRequired={this.props.isRequired}
+        key={this.props.widgetId}
+        label={this.props.label}
+        onCheckChange={this.onCheckChange}
+        widgetId={this.props.widgetId}
       />
     );
   }
diff --git a/app/client/src/widgets/DatePickerWidget.tsx b/app/client/src/widgets/DatePickerWidget.tsx
index 46b621dd45..c3986277bc 100644
--- a/app/client/src/widgets/DatePickerWidget.tsx
+++ b/app/client/src/widgets/DatePickerWidget.tsx
@@ -176,16 +176,16 @@ class DatePickerWidget extends BaseWidget<DatePickerWidgetProps, WidgetState> {
   getPageView() {
     return (
       <DatePickerComponent
-        label={`${this.props.label}`}
         dateFormat={this.props.dateFormat}
-        widgetId={this.props.widgetId}
-        isDisabled={this.props.isDisabled}
         datePickerType={"DATE_PICKER"}
+        isDisabled={this.props.isDisabled}
+        isLoading={this.props.isLoading}
+        label={`${this.props.label}`}
+        maxDate={this.props.maxDate}
+        minDate={this.props.minDate}
         onDateSelected={this.onDateSelected}
         selectedDate={this.props.selectedDate}
-        isLoading={this.props.isLoading}
-        minDate={this.props.minDate}
-        maxDate={this.props.maxDate}
+        widgetId={this.props.widgetId}
       />
     );
   }
diff --git a/app/client/src/widgets/DatePickerWidget2.tsx b/app/client/src/widgets/DatePickerWidget2.tsx
index e7586e027a..dabd725dd9 100644
--- a/app/client/src/widgets/DatePickerWidget2.tsx
+++ b/app/client/src/widgets/DatePickerWidget2.tsx
@@ -214,16 +214,16 @@ class DatePickerWidget extends BaseWidget<DatePickerWidget2Props, WidgetState> {
   getPageView() {
     return (
       <DatePickerComponent
-        label={`${this.props.label}`}
         dateFormat={this.props.dateFormat}
-        widgetId={this.props.widgetId}
-        isDisabled={this.props.isDisabled}
         datePickerType={"DATE_PICKER"}
+        isDisabled={this.props.isDisabled}
+        isLoading={this.props.isLoading}
+        label={`${this.props.label}`}
+        maxDate={this.props.maxDate}
+        minDate={this.props.minDate}
         onDateSelected={this.onDateSelected}
         selectedDate={this.props.value}
-        isLoading={this.props.isLoading}
-        minDate={this.props.minDate}
-        maxDate={this.props.maxDate}
+        widgetId={this.props.widgetId}
       />
     );
   }
diff --git a/app/client/src/widgets/DropdownWidget.tsx b/app/client/src/widgets/DropdownWidget.tsx
index 0e4efcbf05..829f52c7f0 100644
--- a/app/client/src/widgets/DropdownWidget.tsx
+++ b/app/client/src/widgets/DropdownWidget.tsx
@@ -144,29 +144,23 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
     const selectedIndex = _.findIndex(this.props.options, {
       value: this.props.selectedOptionValue,
     });
-    const computedSelectedIndexArr = this.getSelectedOptionValueArr()
-      .map((opt: string) =>
-        _.findIndex(this.props.options, {
-          value: opt,
-        }),
-      )
-      .filter((i: number) => i > -1);
+    const computedSelectedIndexArr = this.props.selectedIndexArr || [];
     const { componentWidth, componentHeight } = this.getComponentDimensions();
     return (
       <DropDownComponent
-        onOptionSelected={this.onOptionSelected}
-        onOptionRemoved={this.onOptionRemoved}
-        widgetId={this.props.widgetId}
-        placeholder={this.props.placeholderText}
-        options={options}
+        disabled={this.props.isDisabled}
         height={componentHeight}
-        width={componentWidth}
-        selectionType={this.props.selectionType}
+        isLoading={this.props.isLoading}
+        label={`${this.props.label}`}
+        onOptionRemoved={this.onOptionRemoved}
+        onOptionSelected={this.onOptionSelected}
+        options={options}
+        placeholder={this.props.placeholderText}
         selectedIndex={selectedIndex > -1 ? selectedIndex : undefined}
         selectedIndexArr={computedSelectedIndexArr}
-        label={`${this.props.label}`}
-        isLoading={this.props.isLoading}
-        disabled={this.props.isDisabled}
+        selectionType={this.props.selectionType}
+        widgetId={this.props.widgetId}
+        width={componentWidth}
       />
     );
   }
diff --git a/app/client/src/widgets/FilepickerWidget.tsx b/app/client/src/widgets/FilepickerWidget.tsx
index 502c5f214d..73310e59f1 100644
--- a/app/client/src/widgets/FilepickerWidget.tsx
+++ b/app/client/src/widgets/FilepickerWidget.tsx
@@ -439,13 +439,13 @@ class FilePickerWidget extends BaseWidget<
   getPageView() {
     return (
       <FilePickerComponent
-        uppy={this.state.uppy}
-        widgetId={this.props.widgetId}
+        files={this.props.selectedFiles || []}
+        isDisabled={this.props.isDisabled}
+        isLoading={this.props.isLoading || this.state.isLoading}
         key={this.props.widgetId}
         label={this.props.label}
-        files={this.props.selectedFiles || []}
-        isLoading={this.props.isLoading || this.state.isLoading}
-        isDisabled={this.props.isDisabled}
+        uppy={this.state.uppy}
+        widgetId={this.props.widgetId}
       />
     );
   }
diff --git a/app/client/src/widgets/FormButtonWidget.tsx b/app/client/src/widgets/FormButtonWidget.tsx
index 797c726a7a..179db41297 100644
--- a/app/client/src/widgets/FormButtonWidget.tsx
+++ b/app/client/src/widgets/FormButtonWidget.tsx
@@ -183,16 +183,16 @@ class FormButtonWidget extends BaseWidget<
     return (
       <ButtonComponent
         buttonStyle={this.props.buttonStyle}
-        widgetId={this.props.widgetId}
-        key={this.props.widgetId}
-        widgetName={this.props.widgetName}
-        text={this.props.text}
-        disabled={disabled}
-        onClick={!disabled ? this.onButtonClickBound : undefined}
-        isLoading={this.props.isLoading || this.state.isLoading}
-        type={this.props.buttonType || ButtonType.BUTTON}
-        googleRecaptchaKey={this.props.googleRecaptchaKey}
         clickWithRecaptcha={this.clickWithRecaptchaBound}
+        disabled={disabled}
+        googleRecaptchaKey={this.props.googleRecaptchaKey}
+        isLoading={this.props.isLoading || this.state.isLoading}
+        key={this.props.widgetId}
+        onClick={!disabled ? this.onButtonClickBound : undefined}
+        text={this.props.text}
+        type={this.props.buttonType || ButtonType.BUTTON}
+        widgetId={this.props.widgetId}
+        widgetName={this.props.widgetName}
       />
     );
   }
diff --git a/app/client/src/widgets/IconWidget.tsx b/app/client/src/widgets/IconWidget.tsx
index 1a36f57b22..690a67106c 100644
--- a/app/client/src/widgets/IconWidget.tsx
+++ b/app/client/src/widgets/IconWidget.tsx
@@ -40,10 +40,10 @@ class IconWidget extends BaseWidget<IconWidgetProps, WidgetState> {
     return (
       <IconWrapper>
         <IconComponent
-          iconName={this.props.iconName}
-          disabled={this.props.disabled}
-          iconSize={this.props.iconSize}
           color={this.props.color}
+          disabled={this.props.disabled}
+          iconName={this.props.iconName}
+          iconSize={this.props.iconSize}
           onClick={this.onClick}
         />
       </IconWrapper>
diff --git a/app/client/src/widgets/ImageWidget.tsx b/app/client/src/widgets/ImageWidget.tsx
index 565651b97c..a8331784ee 100644
--- a/app/client/src/widgets/ImageWidget.tsx
+++ b/app/client/src/widgets/ImageWidget.tsx
@@ -101,16 +101,16 @@ class ImageWidget extends BaseWidget<ImageWidgetProps, WidgetState> {
     const { maxZoomLevel } = this.props;
     return (
       <ImageComponent
+        defaultImageUrl={this.props.defaultImage}
         disableDrag={(disable: boolean) => {
           this.disableDrag(disable);
         }}
-        maxZoomLevel={maxZoomLevel}
-        widgetId={this.props.widgetId}
         imageUrl={this.props.image || ""}
+        isLoading={this.props.isLoading}
+        maxZoomLevel={maxZoomLevel}
         onClick={this.props.onClick ? this.onImageClick : undefined}
         showHoverPointer={this.props.renderMode === RenderModes.PAGE}
-        defaultImageUrl={this.props.defaultImage}
-        isLoading={this.props.isLoading}
+        widgetId={this.props.widgetId}
       />
     );
   }
diff --git a/app/client/src/widgets/InputWidget.tsx b/app/client/src/widgets/InputWidget.tsx
index 5fea4926e8..0c065881a5 100644
--- a/app/client/src/widgets/InputWidget.tsx
+++ b/app/client/src/widgets/InputWidget.tsx
@@ -303,25 +303,25 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
 
     return (
       <InputComponent
-        value={value}
-        isInvalid={isInvalid}
-        onValueChange={this.onValueChange}
-        widgetId={this.props.widgetId}
-        inputType={this.props.inputType}
-        disabled={this.props.isDisabled}
-        label={this.props.label}
         defaultValue={this.props.defaultText}
-        placeholder={this.props.placeholderText}
+        disableNewLineOnPressEnterKey={!!this.props.onSubmit}
+        disabled={this.props.isDisabled}
+        inputType={this.props.inputType}
+        isInvalid={isInvalid}
         isLoading={this.props.isLoading}
+        label={this.props.label}
         multiline={
           this.props.bottomRow - this.props.topRow > 1 &&
           this.props.inputType === "TEXT"
         }
-        stepSize={1}
         onFocusChange={this.handleFocusChange}
-        showError={!!this.props.isFocused}
-        disableNewLineOnPressEnterKey={!!this.props.onSubmit}
         onKeyDown={this.handleKeyDown}
+        onValueChange={this.onValueChange}
+        placeholder={this.props.placeholderText}
+        showError={!!this.props.isFocused}
+        stepSize={1}
+        value={value}
+        widgetId={this.props.widgetId}
         {...conditionalProps}
       />
     );
diff --git a/app/client/src/widgets/ListWidget/ListComponent.tsx b/app/client/src/widgets/ListWidget/ListComponent.tsx
index d81b933351..b192630b65 100644
--- a/app/client/src/widgets/ListWidget/ListComponent.tsx
+++ b/app/client/src/widgets/ListWidget/ListComponent.tsx
@@ -32,7 +32,7 @@ const ScrollableCanvasWrapper = styled.div<
   height: 100%;
 `;
 
-const ListComponent = (props: GridComponentProps) => {
+function ListComponent(props: GridComponentProps) {
   // using memoized class name
   const scrollableCanvasClassName = useMemo(() => {
     return `${
@@ -47,7 +47,7 @@ const ListComponent = (props: GridComponentProps) => {
       </ScrollableCanvasWrapper>
     </GridContainer>
   );
-};
+}
 
 export const ListComponentEmpty = styled.div`
   height: 100%;
diff --git a/app/client/src/widgets/ListWidget/ListPagination.tsx b/app/client/src/widgets/ListWidget/ListPagination.tsx
index 1f9947ca26..bdeaaabc33 100644
--- a/app/client/src/widgets/ListWidget/ListPagination.tsx
+++ b/app/client/src/widgets/ListWidget/ListPagination.tsx
@@ -310,17 +310,17 @@ interface ListPaginationProps {
   onChange: (page: number) => void;
 }
 
-const ListPagination = (props: ListPaginationProps) => {
+function ListPagination(props: ListPaginationProps) {
   return (
     <StyledPagination
-      locale={locale}
-      total={props.total}
       current={props.current}
-      pageSize={props.perPage}
-      onChange={props.onChange}
       disabled={props.disabled}
+      locale={locale}
+      onChange={props.onChange}
+      pageSize={props.perPage}
+      total={props.total}
     />
   );
-};
+}
 
 export default ListPagination;
diff --git a/app/client/src/widgets/ListWidget/ListWidget.tsx b/app/client/src/widgets/ListWidget/ListWidget.tsx
index 828aca5669..acffc99698 100644
--- a/app/client/src/widgets/ListWidget/ListWidget.tsx
+++ b/app/client/src/widgets/ListWidget/ListWidget.tsx
@@ -537,11 +537,11 @@ class ListWidget extends BaseWidget<ListWidgetProps<WidgetProps>, WidgetState> {
 
         {shouldPaginate && (
           <ListPagination
-            total={this.props.items.length}
             current={this.state.page}
-            perPage={perPage}
-            onChange={(page: number) => this.setState({ page })}
             disabled={false && this.props.renderMode === RenderModes.CANVAS}
+            onChange={(page: number) => this.setState({ page })}
+            perPage={perPage}
+            total={this.props.items.length}
           />
         )}
       </ListComponent>
diff --git a/app/client/src/widgets/MapWidget.tsx b/app/client/src/widgets/MapWidget.tsx
index a4929ed4c6..4882fd8512 100644
--- a/app/client/src/widgets/MapWidget.tsx
+++ b/app/client/src/widgets/MapWidget.tsx
@@ -228,9 +228,9 @@ class MapWidget extends BaseWidget<MapWidgetProps, WidgetState> {
             <p>
               {"See our"}
               <a
-                target="_blank"
-                rel="noopener noreferrer"
                 href="https://docs.appsmith.com/v/v1.2.1/setup/docker/google-maps"
+                rel="noopener noreferrer"
+                target="_blank"
               >
                 {" documentation "}
               </a>
@@ -240,26 +240,26 @@ class MapWidget extends BaseWidget<MapWidgetProps, WidgetState> {
         )}
         {google.enabled && (
           <MapComponent
-            apiKey={google.apiKey}
-            widgetId={this.props.widgetId}
-            isVisible={this.props.isVisible}
-            zoomLevel={this.props.zoomLevel}
             allowZoom={this.props.allowZoom}
+            apiKey={google.apiKey}
             center={this.getCenter()}
             enableCreateMarker={this.props.enableCreateMarker}
-            selectedMarker={this.props.selectedMarker}
-            updateCenter={this.updateCenter}
-            isDisabled={this.props.isDisabled}
-            enableSearch={this.props.enableSearch}
-            enablePickLocation={this.props.enablePickLocation}
-            saveMarker={this.onCreateMarker}
-            updateMarker={this.updateMarker}
-            selectMarker={this.onMarkerClick}
-            unselectMarker={this.unselectMarker}
-            markers={this.props.markers}
             enableDrag={() => {
               this.disableDrag(false);
             }}
+            enablePickLocation={this.props.enablePickLocation}
+            enableSearch={this.props.enableSearch}
+            isDisabled={this.props.isDisabled}
+            isVisible={this.props.isVisible}
+            markers={this.props.markers}
+            saveMarker={this.onCreateMarker}
+            selectMarker={this.onMarkerClick}
+            selectedMarker={this.props.selectedMarker}
+            unselectMarker={this.unselectMarker}
+            updateCenter={this.updateCenter}
+            updateMarker={this.updateMarker}
+            widgetId={this.props.widgetId}
+            zoomLevel={this.props.zoomLevel}
           />
         )}
       </>
diff --git a/app/client/src/widgets/ModalWidget.tsx b/app/client/src/widgets/ModalWidget.tsx
index 59cfd55835..07cada407e 100644
--- a/app/client/src/widgets/ModalWidget.tsx
+++ b/app/client/src/widgets/ModalWidget.tsx
@@ -115,22 +115,18 @@ export class ModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
 
   makeModalComponent(content: ReactNode) {
     return (
-      <React.Fragment>
-        <ModalComponent
-          isOpen={!!this.props.isVisible}
-          onClose={this.closeModal}
-          width={this.getModalWidth()}
-          height={MODAL_SIZE[this.props.size].height}
-          className={`t--modal-widget ${generateClassName(
-            this.props.widgetId,
-          )}`}
-          canOutsideClickClose={!!this.props.canOutsideClickClose}
-          canEscapeKeyClose={!!this.props.canEscapeKeyClose}
-          scrollContents={!!this.props.shouldScrollContents}
-        >
-          {content}
-        </ModalComponent>
-      </React.Fragment>
+      <ModalComponent
+        canEscapeKeyClose={!!this.props.canEscapeKeyClose}
+        canOutsideClickClose={!!this.props.canOutsideClickClose}
+        className={`t--modal-widget ${generateClassName(this.props.widgetId)}`}
+        height={MODAL_SIZE[this.props.size].height}
+        isOpen={!!this.props.isVisible}
+        onClose={this.closeModal}
+        scrollContents={!!this.props.shouldScrollContents}
+        width={this.getModalWidth()}
+      >
+        {content}
+      </ModalComponent>
     );
   }
 
diff --git a/app/client/src/widgets/RadioGroupWidget.tsx b/app/client/src/widgets/RadioGroupWidget.tsx
index ea80c912ab..b3a7c9f4ec 100644
--- a/app/client/src/widgets/RadioGroupWidget.tsx
+++ b/app/client/src/widgets/RadioGroupWidget.tsx
@@ -107,14 +107,14 @@ class RadioGroupWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
   getPageView() {
     return (
       <RadioGroupComponent
-        widgetId={this.props.widgetId}
-        onRadioSelectionChange={this.onRadioSelectionChange}
+        isDisabled={this.props.isDisabled}
+        isLoading={this.props.isLoading}
         key={this.props.widgetId}
         label={`${this.props.label}`}
-        selectedOptionValue={this.props.selectedOptionValue}
+        onRadioSelectionChange={this.onRadioSelectionChange}
         options={this.props.options}
-        isLoading={this.props.isLoading}
-        isDisabled={this.props.isDisabled}
+        selectedOptionValue={this.props.selectedOptionValue}
+        widgetId={this.props.widgetId}
       />
     );
   }
diff --git a/app/client/src/widgets/RichTextEditorWidget.tsx b/app/client/src/widgets/RichTextEditorWidget.tsx
index bcd624b911..bbce76d93b 100644
--- a/app/client/src/widgets/RichTextEditorWidget.tsx
+++ b/app/client/src/widgets/RichTextEditorWidget.tsx
@@ -137,13 +137,13 @@ class RichTextEditorWidget extends BaseWidget<
     return (
       <Suspense fallback={<Skeleton />}>
         <RichTextEditorComponent
-          onValueChange={this.onValueChange}
           defaultValue={defaultValue}
-          widgetId={this.props.widgetId}
-          placeholder={this.props.placeholder}
-          key={this.props.widgetId}
           isDisabled={this.props.isDisabled}
           isVisible={this.props.isVisible}
+          key={this.props.widgetId}
+          onValueChange={this.onValueChange}
+          placeholder={this.props.placeholder}
+          widgetId={this.props.widgetId}
         />
       </Suspense>
     );
diff --git a/app/client/src/widgets/SwitchWidget.tsx b/app/client/src/widgets/SwitchWidget.tsx
index 5739e5af21..a7dd24ccb0 100644
--- a/app/client/src/widgets/SwitchWidget.tsx
+++ b/app/client/src/widgets/SwitchWidget.tsx
@@ -94,14 +94,14 @@ class SwitchWidget extends BaseWidget<SwitchWidgetProps, WidgetState> {
   getPageView() {
     return (
       <SwitchComponent
-        isSwitchedOn={!!this.props.isSwitchedOn}
         alignWidget={this.props.alignWidget ? this.props.alignWidget : "LEFT"}
-        label={this.props.label}
-        widgetId={this.props.widgetId}
-        key={this.props.widgetId}
         isDisabled={this.props.isDisabled}
-        onChange={this.onChange}
         isLoading={this.props.isLoading}
+        isSwitchedOn={!!this.props.isSwitchedOn}
+        key={this.props.widgetId}
+        label={this.props.label}
+        onChange={this.onChange}
+        widgetId={this.props.widgetId}
       />
     );
   }
diff --git a/app/client/src/widgets/TableWidget/index.tsx b/app/client/src/widgets/TableWidget/index.tsx
index 253eae307c..3ab7652ff5 100644
--- a/app/client/src/widgets/TableWidget/index.tsx
+++ b/app/client/src/widgets/TableWidget/index.tsx
@@ -612,46 +612,46 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     return (
       <Suspense fallback={<Skeleton />}>
         <ReactTableComponent
-          height={componentHeight}
-          width={componentWidth}
-          tableData={transformedData}
-          columns={tableColumns}
-          isLoading={this.props.isLoading}
-          widgetId={this.props.widgetId}
-          widgetName={this.props.widgetName}
-          searchKey={this.props.searchText}
-          editMode={this.props.renderMode === RenderModes.CANVAS}
-          triggerRowSelection={this.props.triggerRowSelection}
+          applyFilter={(filters: ReactTableFilter[]) => {
+            this.resetSelectedRowIndex();
+            this.props.updateWidgetMetaProperty("filters", filters);
+          }}
           columnSizeMap={this.props.columnSizeMap}
-          pageSize={Math.max(1, pageSize)}
+          columns={tableColumns}
+          compactMode={this.props.compactMode || CompactModeTypes.DEFAULT}
+          disableDrag={(disable: boolean) => {
+            this.disableDrag(disable);
+          }}
+          editMode={this.props.renderMode === RenderModes.CANVAS}
+          filters={this.props.filters}
+          handleReorderColumn={this.handleReorderColumn}
+          handleResizeColumn={this.handleResizeColumn}
+          height={componentHeight}
+          isLoading={this.props.isLoading}
+          multiRowSelection={this.props.multiRowSelection}
+          nextPageClick={this.handleNextPageClick}
           onCommandClick={this.onCommandClick}
+          onRowClick={this.handleRowClick}
+          pageNo={this.props.pageNo}
+          pageSize={Math.max(1, pageSize)}
+          prevPageClick={this.handlePrevPageClick}
+          searchKey={this.props.searchText}
+          searchTableData={this.handleSearchTable}
           selectedRowIndex={
             this.props.selectedRowIndex === undefined
               ? -1
               : this.props.selectedRowIndex
           }
-          multiRowSelection={this.props.multiRowSelection}
           selectedRowIndices={this.getSelectedRowIndices()}
           serverSidePaginationEnabled={!!this.props.serverSidePaginationEnabled}
-          onRowClick={this.handleRowClick}
-          pageNo={this.props.pageNo}
-          nextPageClick={this.handleNextPageClick}
-          prevPageClick={this.handlePrevPageClick}
-          handleResizeColumn={this.handleResizeColumn}
-          updatePageNo={this.updatePageNumber}
-          handleReorderColumn={this.handleReorderColumn}
-          disableDrag={(disable: boolean) => {
-            this.disableDrag(disable);
-          }}
-          searchTableData={this.handleSearchTable}
-          filters={this.props.filters}
-          applyFilter={(filters: ReactTableFilter[]) => {
-            this.resetSelectedRowIndex();
-            this.props.updateWidgetMetaProperty("filters", filters);
-          }}
-          compactMode={this.props.compactMode || CompactModeTypes.DEFAULT}
-          updateCompactMode={this.handleCompactModeChange}
           sortTableColumn={this.handleColumnSorting}
+          tableData={transformedData}
+          triggerRowSelection={this.props.triggerRowSelection}
+          updateCompactMode={this.handleCompactModeChange}
+          updatePageNo={this.updatePageNumber}
+          widgetId={this.props.widgetId}
+          widgetName={this.props.widgetName}
+          width={componentWidth}
         />
       </Suspense>
     );
diff --git a/app/client/src/widgets/Tabs/TabsMigrator.tsx b/app/client/src/widgets/Tabs/TabsMigrator.tsx
index 14f4f5888b..ddfa41c674 100644
--- a/app/client/src/widgets/Tabs/TabsMigrator.tsx
+++ b/app/client/src/widgets/Tabs/TabsMigrator.tsx
@@ -1,6 +1,5 @@
 import BaseWidget, { WidgetState } from "widgets/BaseWidget";
 import { TabContainerWidgetProps, TabsWidgetProps } from "./TabsWidget";
-import React from "react";
 import { WidgetType, WidgetTypes } from "constants/WidgetConstants";
 import withMeta from "widgets/MetaHOC";
 import * as Sentry from "@sentry/react";
@@ -13,7 +12,7 @@ class TabsMigratorWidget extends BaseWidget<
   WidgetState
 > {
   getPageView() {
-    return <></>;
+    return null;
   }
   static getPropertyPaneConfig() {
     return [
diff --git a/app/client/src/widgets/Tabs/TabsWidget.test.tsx b/app/client/src/widgets/Tabs/TabsWidget.test.tsx
index b9bae0720a..72635ff1d5 100644
--- a/app/client/src/widgets/Tabs/TabsWidget.test.tsx
+++ b/app/client/src/widgets/Tabs/TabsWidget.test.tsx
@@ -13,7 +13,7 @@ import { getCanvasWidgetsPayload } from "sagas/PageSagas";
 import { noop } from "utils/AppsmithUtils";
 
 Element.prototype.scrollTo = noop;
-const SetCanvas = ({ dsl, children }: any) => {
+function SetCanvas({ dsl, children }: any) {
   const dispatch = useDispatch();
   const mockResp: any = {
     data: {
@@ -32,8 +32,8 @@ const SetCanvas = ({ dsl, children }: any) => {
   };
   const canvasWidgetsPayload = getCanvasWidgetsPayload(mockResp);
   dispatch(initCanvasLayout(canvasWidgetsPayload));
-  return <>{children}</>;
-};
+  return children;
+}
 describe("Tabs widget functional cases", () => {
   it("Should render 2 tabs by default", () => {
     editorInitializer();
@@ -43,7 +43,7 @@ describe("Tabs widget functional cases", () => {
     });
     const component = render(
       <SetCanvas dsl={dsl}>
-        <Canvas dsl={dsl}></Canvas>
+        <Canvas dsl={dsl} />
       </SetCanvas>,
     );
     const tab1 = component.queryByText("Tab 1");
@@ -70,7 +70,7 @@ describe("Tabs widget functional cases", () => {
     });
     const component = render(
       <SetCanvas dsl={dsl}>
-        <Canvas dsl={dsl}></Canvas>
+        <Canvas dsl={dsl} />
       </SetCanvas>,
     );
     const tab1 = component.queryByText("Tab 1");
diff --git a/app/client/src/widgets/TextWidget.tsx b/app/client/src/widgets/TextWidget.tsx
index 0ccc039c68..22c291cadc 100644
--- a/app/client/src/widgets/TextWidget.tsx
+++ b/app/client/src/widgets/TextWidget.tsx
@@ -145,16 +145,16 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
   getPageView() {
     return (
       <TextComponent
-        widgetId={this.props.widgetId}
-        key={this.props.widgetId}
-        text={this.props.text}
-        fontStyle={this.props.fontStyle}
-        fontSize={this.props.fontSize}
-        textColor={this.props.textColor}
         backgroundColor={this.props.backgroundColor}
-        textAlign={this.props.textAlign ? this.props.textAlign : "LEFT"}
+        fontSize={this.props.fontSize}
+        fontStyle={this.props.fontStyle}
         isLoading={this.props.isLoading}
+        key={this.props.widgetId}
         shouldScroll={this.props.shouldScroll}
+        text={this.props.text}
+        textAlign={this.props.textAlign ? this.props.textAlign : "LEFT"}
+        textColor={this.props.textColor}
+        widgetId={this.props.widgetId}
       />
     );
   }
diff --git a/app/client/src/widgets/VideoWidget.tsx b/app/client/src/widgets/VideoWidget.tsx
index 2161a1f6ea..16dbf4d462 100644
--- a/app/client/src/widgets/VideoWidget.tsx
+++ b/app/client/src/widgets/VideoWidget.tsx
@@ -115,10 +115,27 @@ class VideoWidget extends BaseWidget<VideoWidgetProps, WidgetState> {
     return (
       <Suspense fallback={<Skeleton />}>
         <VideoComponent
-          player={this._player}
-          url={url}
           autoplay={autoPlay}
-          controls={true}
+          controls
+          onEnded={() => {
+            this.props.updateWidgetMetaProperty("playState", PlayState.ENDED, {
+              triggerPropertyName: "onEnd",
+              dynamicString: onEnd,
+              event: {
+                type: EventType.ON_VIDEO_END,
+              },
+            });
+          }}
+          onPause={() => {
+            //TODO: We do not want the pause event for onSeek or onEnd.
+            this.props.updateWidgetMetaProperty("playState", PlayState.PAUSED, {
+              triggerPropertyName: "onPause",
+              dynamicString: onPause,
+              event: {
+                type: EventType.ON_VIDEO_PAUSE,
+              },
+            });
+          }}
           onPlay={() => {
             this.props.updateWidgetMetaProperty(
               "playState",
@@ -132,25 +149,8 @@ class VideoWidget extends BaseWidget<VideoWidgetProps, WidgetState> {
               },
             );
           }}
-          onPause={() => {
-            //TODO: We do not want the pause event for onSeek or onEnd.
-            this.props.updateWidgetMetaProperty("playState", PlayState.PAUSED, {
-              triggerPropertyName: "onPause",
-              dynamicString: onPause,
-              event: {
-                type: EventType.ON_VIDEO_PAUSE,
-              },
-            });
-          }}
-          onEnded={() => {
-            this.props.updateWidgetMetaProperty("playState", PlayState.ENDED, {
-              triggerPropertyName: "onEnd",
-              dynamicString: onEnd,
-              event: {
-                type: EventType.ON_VIDEO_END,
-              },
-            });
-          }}
+          player={this._player}
+          url={url}
         />
       </Suspense>
     );
diff --git a/app/client/src/workers/validations.ts b/app/client/src/workers/validations.ts
index 52fafa33b6..1d15580d65 100644
--- a/app/client/src/workers/validations.ts
+++ b/app/client/src/workers/validations.ts
@@ -761,7 +761,9 @@ export const VALIDATORS: Record<VALIDATION_TYPES, Validator> = {
 
     if (props) {
       if (props.selectionType === "SINGLE_SELECT") {
-        return VALIDATORS[VALIDATION_TYPES.TEXT](value, props, dataTree);
+        const defaultValue =
+          value && !Array.isArray(value) ? value.trim() : value;
+        return VALIDATORS[VALIDATION_TYPES.TEXT](defaultValue, props, dataTree);
       } else if (props.selectionType === "MULTI_SELECT") {
         if (typeof value === "string") {
           try {
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/LayoutActionServiceImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/LayoutActionServiceImpl.java
index cc130c0611..0e625ddf4d 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/LayoutActionServiceImpl.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/LayoutActionServiceImpl.java
@@ -223,6 +223,13 @@ public class LayoutActionServiceImpl implements LayoutActionService {
                             } catch (ParseException e) {
                                 log.debug("Exception caught during DSL conversion from string to Json object. ", e);
                             }
+                            // DSL has removed all the old names and replaced it with new name. If the change of name
+                            // was one of the mongoEscaped widgets, then update the names in the set as well
+                            Set<String> mongoEscapedWidgetNames = layout.getMongoEscapedWidgetNames();
+                            if (mongoEscapedWidgetNames != null && mongoEscapedWidgetNames.contains(oldName)) {
+                                mongoEscapedWidgetNames.remove(oldName);
+                                mongoEscapedWidgetNames.add(newName);
+                            }
                             page.setLayouts(layouts);
                             // Since the page has most probably changed, save the page and return.
                             return newPageService.saveUnpublishedPage(page);
diff --git a/app/server/appsmith-server/src/test/java/com/appsmith/server/services/LayoutActionServiceTest.java b/app/server/appsmith-server/src/test/java/com/appsmith/server/services/LayoutActionServiceTest.java
index 805d733a1f..0864b1c957 100644
--- a/app/server/appsmith-server/src/test/java/com/appsmith/server/services/LayoutActionServiceTest.java
+++ b/app/server/appsmith-server/src/test/java/com/appsmith/server/services/LayoutActionServiceTest.java
@@ -17,6 +17,7 @@ import com.appsmith.server.dtos.LayoutActionUpdateDTO;
 import com.appsmith.server.dtos.LayoutDTO;
 import com.appsmith.server.dtos.PageDTO;
 import com.appsmith.server.dtos.RefactorActionNameDTO;
+import com.appsmith.server.dtos.RefactorNameDTO;
 import com.appsmith.server.exceptions.AppsmithError;
 import com.appsmith.server.exceptions.AppsmithException;
 import com.appsmith.server.helpers.MockPluginExecutor;
@@ -616,4 +617,50 @@ public class LayoutActionServiceTest {
                         throwable.getMessage().equals(AppsmithError.DUPLICATE_KEY_USER_ERROR.getMessage(name, FieldName.NAME)))
                 .verify();
     }
+
+    @Test
+    @WithUserDetails(value = "api_user")
+    public void tableWidgetKeyEscapeRefactorName() {
+        Mockito.when(pluginExecutorHelper.getPluginExecutor(Mockito.any())).thenReturn(Mono.just(new MockPluginExecutor()));
+
+        JSONObject dsl = new JSONObject();
+        dsl.put("widgetName", "Table1");
+        dsl.put("type", "TABLE_WIDGET");
+        Map primaryColumns = new HashMap<String, Object>();
+        JSONObject jsonObject = new JSONObject(Map.of("key", "value"));
+        primaryColumns.put("_id", jsonObject);
+        primaryColumns.put("_class", jsonObject);
+        dsl.put("primaryColumns", primaryColumns);
+        Layout layout = testPage.getLayouts().get(0);
+        layout.setDsl(dsl);
+
+        layoutActionService.updateLayout(testPage.getId(), layout.getId(), layout).block();
+
+        RefactorNameDTO refactorNameDTO = new RefactorNameDTO();
+        refactorNameDTO.setPageId(testPage.getId());
+        refactorNameDTO.setLayoutId(layout.getId());
+        refactorNameDTO.setOldName("Table1");
+        refactorNameDTO.setNewName("NewNameTable1");
+
+        Mono<LayoutDTO> widgetRenameMono = layoutActionService.refactorWidgetName(refactorNameDTO).cache();
+
+        Mono<PageDTO> pageFromRepoMono = widgetRenameMono.then(newPageService.findPageById(testPage.getId(), READ_PAGES, false));
+
+        StepVerifier
+                .create(Mono.zip(widgetRenameMono, pageFromRepoMono))
+                .assertNext(tuple -> {
+                    LayoutDTO updatedLayout = tuple.getT1();
+                    PageDTO pageFromRepo = tuple.getT2();
+
+                    String widgetName = (String) updatedLayout.getDsl().get("widgetName");
+                    assertThat(widgetName).isEqualTo("NewNameTable1");
+
+                    Map primaryColumns1 = (Map) updatedLayout.getDsl().get("primaryColumns");
+                    assertThat(primaryColumns1.keySet()).containsAll(Set.of(FieldName.MONGO_UNESCAPED_ID, FieldName.MONGO_UNESCAPED_CLASS));
+
+                    Map primaryColumns2 = (Map) pageFromRepo.getLayouts().get(0).getDsl().get("primaryColumns");
+                    assertThat(primaryColumns2.keySet()).containsAll(Set.of(FieldName.MONGO_ESCAPE_ID, FieldName.MONGO_ESCAPE_CLASS));
+                })
+                .verifyComplete();
+    }
 }