[DO NOT MERGE] TESTING EXTERNAL SCRIPT: external merge request from Contributor

app/client/cypress/support/Pages/DataSources.ts

@@ -194,7 +194,7 @@ export class DataSources {
   _globalSearchInput = ".t--global-search-input";
   _gsScopeDropdown =
     "[data-testid^='datasourceStorages.'][data-testid$='.datasourceConfiguration.authentication.scopeString']";
-  _gsScopeOptions = ".ads-v2-select__dropdown .rc-select-item-option";
+  _gsScopeOptions = ".ads-v2-radio-group";
   _queryTimeout = "//input[@name='actionConfiguration.timeoutInMillisecond']";
   _getStructureReq = "/api/v1/datasources/*/structure?ignoreCache=true";
   _editDatasourceFromActiveTab = (dsName: string) =>

app/client/src/components/formControls/RadioButtonControl.test.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import RadioButtonControl from "./RadioButtonControl";
+import { render, screen } from "test/testUtils";
+import { Provider } from "react-redux";
+import { reduxForm } from "redux-form";
+import configureStore from "redux-mock-store";
+import "@testing-library/jest-dom";
+
+const mockStore = configureStore([]);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function TestForm(props: any) {
+  return <div>{props.children}</div>;
+}
+
+const ReduxFormDecorator = reduxForm({
+  form: "TestForm",
+})(TestForm);
+
+const mockOptions = [
+  { label: "Option 1", value: "option1", children: "Option 1" },
+  { label: "Option 2", value: "option2", children: "Option 2" },
+  { label: "Option 3", value: "option3", children: "Option 3" },
+];
+
+let radioButtonProps = {
+  options: mockOptions,
+  configProperty: "actionConfiguration.testPath",
+  controlType: "PROJECTION",
+  label: "Columns",
+  id: "column",
+  formName: "",
+  isValid: true,
+  initialValue: "option1",
+};
+
+describe("RadioButtonControl", () => {
+  const mockStoreInstance = mockStore();
+  let store: typeof mockStoreInstance;
+
+  beforeEach(() => {
+    store = mockStore();
+  });
+  it("should render RadioButtonControl and options properly", async () => {
+    render(
+      <Provider store={store}>
+        <ReduxFormDecorator>
+          <RadioButtonControl {...radioButtonProps} />
+        </ReduxFormDecorator>
+      </Provider>,
+    );
+    const radioButton = (await screen.findByTestId(
+      "actionConfiguration.testPath",
+    )) as HTMLElement;
+
+    expect(radioButton).toBeInTheDocument();
+
+    const options = screen.getAllByRole("radio");
+
+    expect(options).toHaveLength(3);
+  });
+
+  it("should show the default selected option", async () => {
+    radioButtonProps = {
+      ...radioButtonProps,
+    };
+
+    render(
+      <Provider store={store}>
+        <ReduxFormDecorator>
+          <RadioButtonControl {...radioButtonProps} />
+        </ReduxFormDecorator>
+      </Provider>,
+    );
+    const radioButton = (await screen.findByTestId(
+      "actionConfiguration.testPath",
+    )) as HTMLElement;
+
+    expect(radioButton).toBeInTheDocument();
+
+    const options = screen.getAllByRole("radio");
+
+    expect(options[0]).toBeChecked();
+    expect(options[1]).not.toBeChecked();
+    expect(options[2]).not.toBeChecked();
+  });
+
+  it("should select the option when clicked", async () => {
+    radioButtonProps = {
+      ...radioButtonProps,
+    };
+
+    render(
+      <Provider store={store}>
+        <ReduxFormDecorator>
+          <RadioButtonControl {...radioButtonProps} />
+        </ReduxFormDecorator>
+      </Provider>,
+    );
+    const radioButton = (await screen.findByTestId(
+      "actionConfiguration.testPath",
+    )) as HTMLElement;
+
+    expect(radioButton).toBeInTheDocument();
+
+    const options = screen.getAllByRole("radio");
+
+    expect(options[0]).toBeChecked();
+    expect(options[1]).not.toBeChecked();
+    expect(options[2]).not.toBeChecked();
+
+    options[1].click();
+
+    expect(options[0]).not.toBeChecked();
+    expect(options[1]).toBeChecked();
+    expect(options[2]).not.toBeChecked();
+  });
+});

app/client/src/components/formControls/RadioButtonControl.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import type { ControlProps } from "./BaseControl";
+import BaseControl from "./BaseControl";
+import type { ControlType } from "constants/PropertyControlConstants";
+import type { WrappedFieldInputProps, WrappedFieldMetaProps } from "redux-form";
+import { Field } from "redux-form";
+import { Radio, RadioGroup, type SelectOptionProps } from "@appsmith/ads";
+import styled from "styled-components";
+
+class RadioButtonControl extends BaseControl<RadioButtonControlProps> {
+  getControlType(): ControlType {
+    return "RADIO_BUTTON";
+  }
+  render() {
+    return (
+      <Field
+        component={renderComponent}
+        name={this.props.configProperty}
+        props={{ ...this.props }}
+        type="radiobutton"
+      />
+    );
+  }
+}
+
+type renderComponentProps = RadioButtonControlProps & {
+  input?: WrappedFieldInputProps;
+  meta?: WrappedFieldMetaProps;
+  options?: Array<{ label: string; value: string }>;
+};
+
+const StyledRadioGroup = styled(RadioGroup)({
+  display: "flex",
+  flexDirection: "column",
+  gap: "16px",
+  marginTop: "16px",
+});
+
+function renderComponent(props: renderComponentProps) {
+  const onChangeHandler = (value: string) => {
+    if (typeof props.input?.onChange === "function") {
+      props.input.onChange(value);
+    }
+  };
+
+  const options = props.options || [];
+  const defaultValue = props.initialValue as string;
+
+  return (
+    <StyledRadioGroup
+      data-testid={props.input?.name}
+      defaultValue={defaultValue}
+      onChange={onChangeHandler}
+    >
+      {options.map((option) => {
+        return (
+          <Radio key={option.value} value={option.value}>
+            {option.label}
+          </Radio>
+        );
+      })}
+    </StyledRadioGroup>
+  );
+}
+
+export interface RadioButtonControlProps extends ControlProps {
+  options: SelectOptionProps[];
+}
+
+export default RadioButtonControl;

app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx

@@ -662,17 +662,6 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
                 >
                   {(!viewMode || createFlow || isInsideReconnectModal) && (
                     <>
-                      {/* This adds information banner when creating google sheets datasource,
-              this info banner explains why appsmith requires permissions from users google account */}
-                      {datasource && isGoogleSheetPlugin && createFlow ? (
-                        <AuthMessage
-                          actionType={ActionType.DOCUMENTATION}
-                          calloutType="info"
-                          datasource={datasource}
-                          description={googleSheetsInfoMessage}
-                          pageId={pageId}
-                        />
-                      ) : null}
                       {/* This adds error banner for google sheets datasource if the datasource is unauthorised */}
                       {datasource &&
                       isGoogleSheetPlugin &&
@@ -688,6 +677,17 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
                         ? map(sections, this.renderMainSection)
                         : null}
                       {""}
+                      {/* This adds information banner when creating google sheets datasource,
+              this info banner explains why appsmith requires permissions from users google account */}
+                      {datasource && isGoogleSheetPlugin && createFlow ? (
+                        <AuthMessage
+                          actionType={ActionType.DOCUMENTATION}
+                          calloutType="info"
+                          datasource={datasource}
+                          description={googleSheetsInfoMessage}
+                          pageId={pageId}
+                        />
+                      ) : null}
                     </>
                   )}
                   {viewMode &&

app/client/src/utils/formControl/FormControlRegistry.tsx

@@ -35,6 +35,8 @@ import FormTemplateControl from "components/formControls/FormTemplateControl";
 import type { FormTemplateControlProps } from "components/formControls/FormTemplateControl";
 import MultiFilePickerControl from "components/formControls/MultiFilePickerControl";
 import type { MultipleFilePickerControlProps } from "components/formControls/MultiFilePickerControl";
+import type { RadioButtonControlProps } from "components/formControls/RadioButtonControl";
+import RadioButtonControl from "components/formControls/RadioButtonControl";
 
 /**
  * NOTE: If you are adding a component that uses FormControl
@@ -183,6 +185,11 @@ class FormControlRegistry {
         },
       },
     );
+    FormControlFactory.registerControlBuilder(formControlTypes.RADIO_BUTTON, {
+      buildPropertyControl(controlProps: RadioButtonControlProps): JSX.Element {
+        return <RadioButtonControl {...controlProps} />;
+      },
+    });
   }
 }
 

app/client/src/utils/formControl/formControlTypes.ts

@@ -18,4 +18,5 @@ export default {
   PROJECTION: "PROJECTION",
   FORM_TEMPLATE: "FORM_TEMPLATE",
   MULTIPLE_FILE_PICKER: "MULTIPLE_FILE_PICKER",
+  RADIO_BUTTON: "RADIO_BUTTON",
 };

app/server/appsmith-plugins/googleSheetsPlugin/src/main/resources/form.json

@@ -33,7 +33,7 @@
         {
           "label": "Permissions | Scope",
           "configProperty": "datasourceConfiguration.authentication.scopeString",
-          "controlType": "DROP_DOWN",
+          "controlType": "RADIO_BUTTON",
           "options": [
             {
               "label": "Read / Write / Delete | Selected google sheets",