updating data attributes naming convention to remove console warnings

app/client/cypress/locators/OneClickBindingLocator.ts

@@ -1,58 +1,58 @@
 export default {
-  connectData: '[data-testId="t--one-click-binding-connect-data"]',
+  connectData: '[data-testid="t--one-click-binding-connect-data"]',
   datasourceDropdownSelector:
-    "[data-testId='t--one-click-binding-datasource-selector']",
+    "[data-testid='t--one-click-binding-datasource-selector']",
   datasourceDropdownOptionSelector: (query: string) =>
-    `[data-testId="t--one-click-binding-datasource-trigger"]:contains(${query})`,
+    `[data-testid="t--one-click-binding-datasource-trigger"]:contains(${query})`,
   dropdownOptionSelector: (query: string) =>
-    `[data-testId="t--one-click-binding-datasource-trigger"]:contains(${query})`,
+    `[data-testid="t--one-click-binding-datasource-trigger"]:contains(${query})`,
   datasourceQueryBindHeaderSelector:
-    "[data-testId='t--one-click-binding-datasource-selector--bind-to-query']",
+    "[data-testid='t--one-click-binding-datasource-selector--bind-to-query']",
   datasourceGenerateAQuerySelector:
-    "[data-testId='t--one-click-binding-datasource-selector--generate-a-query']",
+    "[data-testid='t--one-click-binding-datasource-selector--generate-a-query']",
   datasourceOtherActionsSelector:
-    "[data-testId='t--one-click-binding-datasource-selector--other-actions']",
+    "[data-testid='t--one-click-binding-datasource-selector--other-actions']",
   datasourceQuerySelector: (query?: string) =>
-    `[data-testId='t--one-click-binding-datasource-selector--query']${
+    `[data-testid='t--one-click-binding-datasource-selector--query']${
       query ? `:contains(${query})` : ""
     }`,
   datasourceSelector: (datasource?: string) =>
-    `[data-testId="t--one-click-binding-datasource-selector--datasource"]${
+    `[data-testid="t--one-click-binding-datasource-selector--datasource"]${
       datasource ? `:contains(${datasource})` : ""
     }`,
   otherActionSelector: (action?: string) =>
-    `[data-testId='t--one-click-binding-datasource-selector--other-action']${
+    `[data-testid='t--one-click-binding-datasource-selector--other-action']${
       action ? `:contains(${action})` : ""
     }`,
   tableOrSpreadsheetDropdown:
     '[data-testid="t--one-click-binding-table-selector"] .rc-select-selector',
   tableOrSpreadsheetDropdownOption: (table?: string) =>
-    `//div[@data-testId='t--one-click-binding-table-selector--table']//div[text()='${table}']`,
+    `//div[@data-testid='t--one-click-binding-table-selector--table']//div[text()='${table}']`,
   tableOrSpreadsheetSelectedOption: (table?: string) =>
     `[data-testid="t--one-click-binding-table-selector"] .rc-select-selection-item${
       table ? `:contains(${table})` : ""
     }`,
   validTableRowData:
     '.t--widget-tablewidgetv2 [role="rowgroup"] [role="button"]',
   tableError: (error: string) =>
-    `[data-testId="t--one-click-binding-table-selector--error"]:contains(${error})`,
-  dateInput: `[data-testId="datepicker-container"] input`,
+    `[data-testid="t--one-click-binding-table-selector--error"]:contains(${error})`,
+  dateInput: `[data-testid="datepicker-container"] input`,
   dayViewFromDate: ".DayPicker-Day",
-  loadMore: "[data-testId='t--one-click-binding-datasource--load-more']",
-  datasourceSearch: `[data-testId="t--one-click-binding-datasource--search"]`,
+  loadMore: "[data-testid='t--one-click-binding-datasource--load-more']",
+  datasourceSearch: `[data-testid="t--one-click-binding-datasource--search"]`,
   searchableColumn:
-    '[data-testId="t--one-click-binding-column-searchableColumn"]',
-  formType: '[data-testId="t--one-click-binding-column-formType"]',
-  defaultValues: '[data-testId="t--one-click-binding-column-defaultValues"]',
-  dataIdentifier: '[data-testId="t--one-click-binding-column-dataIdentifier"]',
-  label: '[data-testId="t--one-click-binding-column-label"]',
-  value: '[data-testId="t--one-click-binding-column-value"]',
+    '[data-testid="t--one-click-binding-column-searchableColumn"]',
+  formType: '[data-testid="t--one-click-binding-column-formType"]',
+  defaultValues: '[data-testid="t--one-click-binding-column-defaultValues"]',
+  dataIdentifier: '[data-testid="t--one-click-binding-column-dataIdentifier"]',
+  label: '[data-testid="t--one-click-binding-column-label"]',
+  value: '[data-testid="t--one-click-binding-column-value"]',
   columnDropdownOption: (column: string, value?: string) =>
-    `[data-testId='t--one-click-binding-column-${column}--column']${
+    `[data-testid='t--one-click-binding-column-${column}--column']${
       value ? `:contains(${value})` : ""
     }`,
   columnSelectedOption: (column: string, value?: string) =>
-    `[data-testId="t--one-click-binding-column-${column}"] .rc-select-selection-item${
+    `[data-testid="t--one-click-binding-column-${column}"] .rc-select-selection-item${
       value ? `:contains(${value})` : ""
     }`,
   columnSelectorModalTrigger: '[data-testid="t--edit-fields-button"]',

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

@@ -202,7 +202,7 @@ export class DataSources {
   _mandatoryMark = "//span[text()='*']";
   _deleteDSHostPort = ".t--delete-field";
   _dsTabSchema = "[data-testid='t--tab-SCHEMA_TAB']";
-  private _pageSelectionMenu = "[data-testId='t--page-selection']";
+  private _pageSelectionMenu = "[data-testid='t--page-selection']";
 
   private _pageSelectMenuItem = ".ads-v2-menu__menu-item";
 
@@ -295,7 +295,7 @@ export class DataSources {
   _imgFireStoreLogo = "//img[contains(@src, 'firestore.svg')]";
   _dsVirtuosoElement = `div .t--schema-virtuoso-container`;
   private _dsVirtuosoList = `[data-test-id="virtuoso-item-list"]`;
-  private _dsSchemaContainer = `[data-testId="datasource-schema-container"]`;
+  private _dsSchemaContainer = `[data-testid="datasource-schema-container"]`;
   private _dsVirtuosoElementTable = (targetTableName: string) =>
     `${this._dsSchemaEntityItem}[data-testid='t--entity-item-${targetTableName}']`;
   private _dsPageTabListItem = (buttonText: string) =>

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

@@ -92,7 +92,7 @@ export class PropertyPane {
     "div.tab-view span:contains('" + type + "')";
 
   _dropdownSelectType = ".t--open-dropdown-Select-type";
-  _selectorViewLabel = '[data-testId="selector-view-label"]';
+  _selectorViewLabel = '[data-testid="selector-view-label"]';
   _textView = ".text-view";
   _selectorView = ".selector-view";
   _dropdownOptions =

app/client/src/IDE/Components/ToolbarSettingsPopover.tsx

@@ -43,7 +43,7 @@ export const ToolbarSettingsPopover = (props: Props) => {
     <Popover onOpenChange={handleOpenChange} open={isOpen}>
       <PopoverTrigger>
         <ToggleButton
-          data-testId={props.dataTestId}
+          data-testid={props.dataTestId}
           disabled={props.disabled}
           icon="settings-2-line"
           isSelected={isOpen}

app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/index.tsx

@@ -21,7 +21,7 @@ const Section: React.FC<SectionProps> = ({
     <div
       className={classNames}
       data-fullwidth={isFullWidth.toString()}
-      data-withoutPadding={withoutPadding.toString()}
+      data-withoutpadding={withoutPadding.toString()}
       {...props}
     >
       {children}

app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css

@@ -6,22 +6,22 @@
   max-width: 800px;
   justify-content: center;
 
-  &[data-withoutPadding="true"] {
+  &[data-withoutpadding="true"] {
     padding: 0;
   }
 
   /* We do not want padding above the first section */
-  &[data-withoutPadding="false"]:first-child {
+  &[data-withoutpadding="false"]:first-child {
     padding-bottom: var(--ads-v2-spaces-6);
   }
 
   /* All other sections expect first will have padding top and bottom */
-  &[data-withoutPadding="false"]:not(:first-child) {
+  &[data-withoutpadding="false"]:not(:first-child) {
     padding-block: var(--ads-v2-spaces-6);
   }
 
   /* We will also render a border below sections expect for the last section */
-  &[data-withoutPadding="false"]:not(:last-child) {
+  &[data-withoutpadding="false"]:not(:last-child) {
     border-bottom: 1px solid var(--ads-v2-color-border);
   }
 

app/client/src/PluginActionEditor/components/PluginActionResponse/components/BindDataButton.tsx

@@ -385,7 +385,7 @@ function BindDataButton(props: BindDataButtonProps) {
       </MenuTrigger>
       <MenuContent
         align={"end"}
-        data-testId={"t--widget-selection"}
+        data-testid={"t--widget-selection"}
         height={pages.length <= 4 ? "fit-content" : "186px"}
         side={"top"}
         width="235px"

app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema.tsx

@@ -108,7 +108,7 @@ const Schema = (props: Props) => {
       overflow="hidden"
     >
       <Flex
-        data-testId="datasource-schema-container"
+        data-testid="datasource-schema-container"
         flex="1"
         flexDirection="column"
         gap="spaces-3"

app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/DropdownOption.tsx

@@ -59,7 +59,7 @@ export function LoadMoreOptions(props: LoadmoreProps) {
     return (
       <MenuItem>
         <div
-          data-testId="t--one-click-binding-datasource--load-more"
+          data-testid="t--one-click-binding-datasource--load-more"
           onMouseDown={(e) => {
             e?.stopPropagation();
           }}

app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/index.tsx

@@ -100,7 +100,7 @@ function DatasourceDropdown() {
   const onChange = useCallback((value: string) => setSearchText(value), []);
 
   return (
-    <SelectWrapper data-testId="t--one-click-binding-datasource-selector">
+    <SelectWrapper data-testid="t--one-click-binding-datasource-selector">
       <Menu
         onOpenChange={(open: boolean) => {
           setOpen(open);
@@ -110,7 +110,7 @@ function DatasourceDropdown() {
       >
         <MenuTrigger>
           <StyledDropdownTrigger
-            data-testId="t--one-click-binding-datasource-trigger"
+            data-testid="t--one-click-binding-datasource-trigger"
             isDisabled={disabled}
             isValid={!error}
           >
@@ -131,7 +131,7 @@ function DatasourceDropdown() {
             <StyledInputContainer>
               <SearchInput
                 autoFocus
-                data-testId="t--one-click-binding-datasource--search"
+                data-testid="t--one-click-binding-datasource--search"
                 onChange={onChange}
                 size="md"
                 // @ts-expect-error Fix this the next time the file is edited
@@ -141,7 +141,7 @@ function DatasourceDropdown() {
             </StyledInputContainer>
 
             {!!connectToOptions.length && (
-              <StyledMenuGroupName data-testId="t--one-click-binding-datasource-selector--bind-to-query">
+              <StyledMenuGroupName data-testid="t--one-click-binding-datasource-selector--bind-to-query">
                 <Text kind="heading-xs">{constants?.connectToText}</Text>
               </StyledMenuGroupName>
             )}
@@ -156,7 +156,7 @@ function DatasourceDropdown() {
               .map((option) => {
                 return (
                   <MenuItem
-                    data-testId="t--one-click-binding-datasource-selector--query"
+                    data-testid="t--one-click-binding-datasource-selector--query"
                     key={option?.id}
                     onSelect={() => {
                       option?.onSelect(option?.value, option);
@@ -202,7 +202,7 @@ function DatasourceDropdown() {
               .map((option) => {
                 return (
                   <MenuItem
-                    data-testId="t--one-click-binding-datasource-selector--datasource"
+                    data-testid="t--one-click-binding-datasource-selector--datasource"
                     key={option.id}
                     onSelect={() => {
                       option?.onSelect?.(option.value || "", option);
@@ -248,7 +248,7 @@ function DatasourceDropdown() {
             {otherOptions.map((option: DropdownOptionType) => {
               return (
                 <MenuItem
-                  data-testId="t--one-click-binding-datasource-selector--other-action"
+                  data-testid="t--one-click-binding-datasource-selector--other-action"
                   key={option.id}
                   onSelect={() => {
                     option.onSelect?.(option.value || "", option);

app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/TableOrSpreadsheetDropdown/index.tsx

@@ -58,7 +58,7 @@ function TableOrSpreadsheetDropdown() {
           {options.map((option) => {
             return (
               <Option
-                data-testId="t--one-click-binding-table-selector--table"
+                data-testid="t--one-click-binding-table-selector--table"
                 key={option.id}
                 value={option.value}
               >
@@ -67,7 +67,7 @@ function TableOrSpreadsheetDropdown() {
             );
           })}
         </Select>
-        <ErrorMessage data-testId="t--one-click-binding-table-selector--error">
+        <ErrorMessage data-testid="t--one-click-binding-table-selector--error">
           {error}
         </ErrorMessage>
       </SelectWrapper>

app/client/src/components/editorComponents/WidgetQueryGeneratorForm/ConnectData/index.tsx

@@ -9,7 +9,7 @@ export function ConnectData({ btnText }: { btnText: string }) {
   if (show) {
     return (
       <StyledButton
-        data-testId="t--one-click-binding-connect-data"
+        data-testid="t--one-click-binding-connect-data"
         isDisabled={disabled}
         isLoading={isLoading}
         onClick={onClick}

app/client/src/components/editorComponents/WidgetQueryGeneratorForm/DatasourceSpecificControls/GoogleSheetControls/SheetsDropdown/index.tsx

@@ -26,7 +26,7 @@ export default memo(function SheetsDropdown() {
           <Label>{label}</Label>
         </Tooltip>
         <Select
-          data-testId="t--sheetName-dropdown"
+          data-testid="t--sheetName-dropdown"
           dropdownStyle={{
             minWidth: "350px",
             maxHeight: "300px",

app/client/src/components/editorComponents/WidgetQueryGeneratorForm/WidgetSpecificControls/ColumnDropdown/index.tsx

@@ -33,7 +33,7 @@ function ColumnDropdown(props: Props) {
         <Label>{props.label}</Label>
         <Select
           allowClear
-          data-testId={`t--one-click-binding-column-${props.id}`}
+          data-testid={`t--one-click-binding-column-${props.id}`}
           dropdownStyle={{
             minWidth: "350px",
             maxHeight: "300px",
@@ -56,7 +56,7 @@ function ColumnDropdown(props: Props) {
           {options.map((option) => {
             return (
               <Option
-                data-testId={`t--one-click-binding-column-${props.id}--column`}
+                data-testid={`t--one-click-binding-column-${props.id}--column`}
                 key={option.id}
                 value={option.value}
               >

app/client/src/components/editorComponents/WidgetQueryGeneratorForm/WidgetSpecificControls/OtherFields/Field/Dropdown/useDropdown.tsx

@@ -176,7 +176,7 @@ export function useDropdown(props: OneClickDropdownFieldProps) {
     if (options && options.length > 0) {
       return (options as DropdownOptionType[])?.map((option) => (
         <Option
-          data-testId={`t--one-click-binding-column-${props.id}--column`}
+          data-testid={`t--one-click-binding-column-${props.id}--column`}
           key={option.id}
           value={option.value}
         >
@@ -186,7 +186,7 @@ export function useDropdown(props: OneClickDropdownFieldProps) {
     } else {
       return (
         <Option
-          data-testId="t--one-click-binding-no-connectable-widget"
+          data-testid="t--one-click-binding-no-connectable-widget"
           disabled
         >
           {createMessage(NO_CONNECTABLE_WIDGET_FOUND)}

app/client/src/pages/Editor/DataSourceEditor/NewActionButton.tsx

@@ -155,7 +155,7 @@ function NewActionButton(props: NewActionButtonProps) {
       </MenuTrigger>
       <MenuContent
         align={"end"}
-        data-testId={"t--page-selection"}
+        data-testid={"t--page-selection"}
         height={pages.length <= 4 ? "fit-content" : "186px"}
         side={"bottom"}
       >

app/client/src/pages/Editor/DatasourceInfo/DatasourceViewModeSchema.tsx

@@ -246,7 +246,7 @@ const DatasourceViewModeSchema = (props: Props) => {
 
   return (
     <ViewModeSchemaContainer>
-      <DataWrapperContainer data-testId="datasource-schema-container">
+      <DataWrapperContainer data-testid="datasource-schema-container">
         <StructureContainer>
           {props.datasource && (
             <DatasourceStructureHeader

app/client/src/pages/Editor/DatasourceInfo/GoogleSheetSchema.tsx

@@ -399,7 +399,7 @@ function GoogleSheetSchema(props: Props) {
   return (
     <ViewModeSchemaContainer>
       <DataWrapperContainer>
-        <StructureContainer data-testId="datasource-schema-container">
+        <StructureContainer data-testid="datasource-schema-container">
           {datasource && (
             <DatasourceStructureHeader
               datasource={datasource}

app/client/src/pages/Editor/Explorer/Files/Submenu.tsx

@@ -94,7 +94,7 @@ export function ExplorerMenuContent({
       </div>
       <SearchInput
         autoFocus
-        data-testId="t--search-file-operation"
+        data-testid="t--search-file-operation"
         onChange={onChange}
         placeholder="Search datasources"
         value={query}

app/client/src/pages/Editor/gitSync/ReconnectDatasourceModal.tsx

@@ -613,7 +613,7 @@ function ReconnectDatasourceModal() {
   return (
     <Modal open={isModalOpen}>
       <ModalContentWrapper
-        data-testId="reconnect-datasource-modal"
+        data-testid="reconnect-datasource-modal"
         onClick={handleClose}
         onEscapeKeyDown={onClose}
         onInteractOutside={handleClose}

app/client/src/pages/Editor/gitSync/components/StatusLoader.tsx

@@ -12,7 +12,7 @@ const LoaderWrapper = styled.div`
 
 function StatusLoader({ loaderMsg }: { loaderMsg: string }) {
   return (
-    <LoaderWrapper data-testId="t--git-merge-loader">
+    <LoaderWrapper data-testid="t--git-merge-loader">
       <SpinnerLoader size="md" />
       <Text kind={"body-m"} style={{ marginLeft: 8 }}>
         {loaderMsg}

app/client/src/pages/common/SearchBar/ApplicationSearchItem.tsx

@@ -36,7 +36,7 @@ const ApplicationSearchItem = (props: Props) => {
       </Text>
       {applicationsList.map((application: ApplicationPayload) => (
         <SearchListItem
-          data-testId={application.name}
+          data-testid={application.name}
           key={application.id}
           onClick={() => navigateToApplication(application.id)}
         >

app/client/src/pages/common/SearchBar/WorkspaceSearchItems.tsx

@@ -33,7 +33,7 @@ const WorkspaceSearchItems = (props: Props) => {
       </Text>
       {workspacesList.map((workspace: Workspace) => (
         <SearchListItem
-          data-testId={workspace.name}
+          data-testid={workspace.name}
           key={workspace.id}
           onClick={() => {
             setIsDropdownOpen(false);