From b90a11191f056225090196219fb243ac6d885324 Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Tue, 14 Mar 2023 15:20:33 +0200
Subject: [PATCH] fix(safari): remove autocomplete in table select (#23361)

---
 .../SqlEditorLeftBar/SqlEditorLeftBar.test.jsx   |  4 ++--
 .../DatabaseSelector/DatabaseSelector.test.tsx   | 12 ++++++------
 .../src/components/DatabaseSelector/index.tsx    |  8 ++++----
 .../TableSelector/TableSelector.test.tsx         | 16 ++++++++--------
 .../src/components/TableSelector/index.tsx       |  4 ++--
 .../AddDataset/LeftPanel/LeftPanel.test.tsx      | 16 ++++++++--------
 6 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx
index 2c816d0e8447b..b3ef02743ffed 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx
@@ -91,10 +91,10 @@ test('table should be visible when expanded is true', async () => {
   const { container } = await renderAndWait(mockedProps, store);
 
   const dbSelect = screen.getByRole('combobox', {
-    name: 'Select database or type database name',
+    name: 'Select database or type to search databases',
   });
   const schemaSelect = screen.getByRole('combobox', {
-    name: 'Select schema or type schema name',
+    name: 'Select schema or type to search schemas',
   });
   const dropdown = screen.getByText(/Table/i);
   const abUser = screen.queryAllByText(/ab_user/i);
diff --git a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
index 57b6a539ae188..ce2016a8aa9ce 100644
--- a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
@@ -186,7 +186,7 @@ test('Refresh should work', async () => {
   expect(fetchMock.calls(schemaApiRoute).length).toBe(0);
 
   const select = screen.getByRole('combobox', {
-    name: 'Select schema or type schema name',
+    name: 'Select schema or type to search schemas',
   });
 
   userEvent.click(select);
@@ -215,7 +215,7 @@ test('Should database select display options', async () => {
   const props = createProps();
   render(<DatabaseSelector {...props} />, { useRedux: true });
   const select = screen.getByRole('combobox', {
-    name: 'Select database or type database name',
+    name: 'Select database or type to search databases',
   });
   expect(select).toBeInTheDocument();
   userEvent.click(select);
@@ -237,7 +237,7 @@ test('should show empty state if there are no options', async () => {
     { useRedux: true },
   );
   const select = screen.getByRole('combobox', {
-    name: 'Select database or type database name',
+    name: 'Select database or type to search databases',
   });
   userEvent.click(select);
   const emptystate = await screen.findByText('empty');
@@ -249,7 +249,7 @@ test('Should schema select display options', async () => {
   const props = createProps();
   render(<DatabaseSelector {...props} />, { useRedux: true });
   const select = screen.getByRole('combobox', {
-    name: 'Select schema or type schema name',
+    name: 'Select schema or type to search schemas',
   });
   expect(select).toBeInTheDocument();
   userEvent.click(select);
@@ -265,7 +265,7 @@ test('Sends the correct db when changing the database', async () => {
   const props = createProps();
   render(<DatabaseSelector {...props} />, { useRedux: true });
   const select = screen.getByRole('combobox', {
-    name: 'Select database or type database name',
+    name: 'Select database or type to search databases',
   });
   expect(select).toBeInTheDocument();
   userEvent.click(select);
@@ -285,7 +285,7 @@ test('Sends the correct schema when changing the schema', async () => {
   const props = createProps();
   render(<DatabaseSelector {...props} />, { useRedux: true });
   const select = screen.getByRole('combobox', {
-    name: 'Select schema or type schema name',
+    name: 'Select schema or type to search schemas',
   });
   expect(select).toBeInTheDocument();
   userEvent.click(select);
diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index d78a94bde60fc..65b93d356126d 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -273,7 +273,7 @@ export default function DatabaseSelector({
   function renderDatabaseSelect() {
     return renderSelectRow(
       <AsyncSelect
-        ariaLabel={t('Select database or type database name')}
+        ariaLabel={t('Select database or type to search databases')}
         optionFilterProps={['database_name', 'value']}
         data-test="select-database"
         header={<FormLabel>{t('Database')}</FormLabel>}
@@ -281,7 +281,7 @@ export default function DatabaseSelector({
         notFoundContent={emptyState}
         onChange={changeDataBase}
         value={currentDb}
-        placeholder={t('Select database or type database name')}
+        placeholder={t('Select database or type to search databases')}
         disabled={!isDatabaseSelectEnabled || readOnly}
         options={loadDatabases}
       />,
@@ -298,14 +298,14 @@ export default function DatabaseSelector({
     );
     return renderSelectRow(
       <Select
-        ariaLabel={t('Select schema or type schema name')}
+        ariaLabel={t('Select schema or type to search schemas')}
         disabled={!currentDb || readOnly}
         header={<FormLabel>{t('Schema')}</FormLabel>}
         labelInValue
         loading={loadingSchemas}
         name="select-schema"
         notFoundContent={t('No compatible schema found')}
-        placeholder={t('Select schema or type schema name')}
+        placeholder={t('Select schema or type to search schemas')}
         onChange={item => changeSchema(item as SchemaOption)}
         options={schemaOptions}
         showSearch
diff --git a/superset-frontend/src/components/TableSelector/TableSelector.test.tsx b/superset-frontend/src/components/TableSelector/TableSelector.test.tsx
index b4b67deb92dca..3ab045a8a9454 100644
--- a/superset-frontend/src/components/TableSelector/TableSelector.test.tsx
+++ b/superset-frontend/src/components/TableSelector/TableSelector.test.tsx
@@ -77,13 +77,13 @@ test('renders with default props', async () => {
   const props = createProps();
   render(<TableSelector {...props} />, { useRedux: true });
   const databaseSelect = screen.getByRole('combobox', {
-    name: 'Select database or type database name',
+    name: 'Select database or type to search databases',
   });
   const schemaSelect = screen.getByRole('combobox', {
-    name: 'Select schema or type schema name',
+    name: 'Select schema or type to search schemas',
   });
   const tableSelect = screen.getByRole('combobox', {
-    name: 'Select table or type table name',
+    name: 'Select table or type to search tables',
   });
   await waitFor(() => {
     expect(databaseSelect).toBeInTheDocument();
@@ -99,7 +99,7 @@ test('renders table options', async () => {
   const props = createProps();
   render(<TableSelector {...props} />, { useRedux: true });
   const tableSelect = screen.getByRole('combobox', {
-    name: 'Select table or type table name',
+    name: 'Select table or type to search tables',
   });
   userEvent.click(tableSelect);
   expect(
@@ -117,7 +117,7 @@ test('renders disabled without schema', async () => {
   const props = createProps();
   render(<TableSelector {...props} schema={undefined} />, { useRedux: true });
   const tableSelect = screen.getByRole('combobox', {
-    name: 'Select table or type table name',
+    name: 'Select table or type to search tables',
   });
   await waitFor(() => {
     expect(tableSelect).toBeDisabled();
@@ -135,7 +135,7 @@ test('table options are notified after schema selection', async () => {
   render(<TableSelector {...props} />, { useRedux: true });
 
   const schemaSelect = screen.getByRole('combobox', {
-    name: 'Select schema or type schema name',
+    name: 'Select schema or type to search schemas',
   });
   expect(schemaSelect).toBeInTheDocument();
   expect(callback).not.toHaveBeenCalled();
@@ -178,7 +178,7 @@ test('table select retain value if not in SQL Lab mode', async () => {
   render(<TableSelector {...props} />, { useRedux: true });
 
   const tableSelect = screen.getByRole('combobox', {
-    name: 'Select table or type table name',
+    name: 'Select table or type to search tables',
   });
 
   expect(screen.queryByText('table_a')).not.toBeInTheDocument();
@@ -218,7 +218,7 @@ test('table multi select retain all the values selected', async () => {
   render(<TableSelectorMultiple {...props} />, { useRedux: true });
 
   const tableSelect = screen.getByRole('combobox', {
-    name: 'Select table or type table name',
+    name: 'Select table or type to search tables',
   });
 
   expect(screen.queryByText('table_a')).not.toBeInTheDocument();
diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
index ffb45cc8fed9f..d04de217158bc 100644
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@@ -295,7 +295,7 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
 
     const select = (
       <Select
-        ariaLabel={t('Select table or type table name')}
+        ariaLabel={t('Select table or type to search tables')}
         disabled={disabled}
         filterOption={handleFilterOption}
         header={header}
@@ -306,7 +306,7 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
           internalTableChange(options)
         }
         options={tableOptions}
-        placeholder={t('Select table or type table name')}
+        placeholder={t('Select table or type to search tables')}
         showSearch
         mode={tableSelectMode}
         value={tableSelectValue}
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx
index 3996dc0fec5c6..f9174e1994354 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx
@@ -162,10 +162,10 @@ test('should render schema selector, database selector container, and selects',
   expect(await screen.findByText(/select database & schema/i)).toBeVisible();
 
   const databaseSelect = screen.getByRole('combobox', {
-    name: 'Select database or type database name',
+    name: 'Select database or type to search databases',
   });
   const schemaSelect = screen.getByRole('combobox', {
-    name: 'Select schema or type schema name',
+    name: 'Select schema or type to search schemas',
   });
   expect(databaseSelect).toBeInTheDocument();
   expect(schemaSelect).toBeInTheDocument();
@@ -188,7 +188,7 @@ test('renders list of options when user clicks on schema', async () => {
 
   // Click 'test-postgres' database to access schemas
   const databaseSelect = screen.getByRole('combobox', {
-    name: 'Select database or type database name',
+    name: 'Select database or type to search databases',
   });
   userEvent.click(databaseSelect);
   expect(await screen.findByText('test-postgres')).toBeInTheDocument();
@@ -196,7 +196,7 @@ test('renders list of options when user clicks on schema', async () => {
 
   // Schema select will be automatically populated if there is only one schema
   const schemaSelect = screen.getByRole('combobox', {
-    name: /select schema or type schema name/i,
+    name: /select schema or type to search schemas/i,
   });
   await waitFor(() => {
     expect(schemaSelect).toBeEnabled();
@@ -210,13 +210,13 @@ test('searches for a table name', async () => {
 
   // Click 'test-postgres' database to access schemas
   const databaseSelect = screen.getByRole('combobox', {
-    name: /select database or type database name/i,
+    name: /select database or type to search databases/i,
   });
   userEvent.click(databaseSelect);
   userEvent.click(await screen.findByText('test-postgres'));
 
   const schemaSelect = screen.getByRole('combobox', {
-    name: /select schema or type schema name/i,
+    name: /select schema or type to search schemas/i,
   });
 
   await waitFor(() => expect(schemaSelect).toBeEnabled());
@@ -254,13 +254,13 @@ test('renders a warning icon when a table name has a pre-existing dataset', asyn
 
   // Click 'test-postgres' database to access schemas
   const databaseSelect = screen.getByRole('combobox', {
-    name: /select database or type database name/i,
+    name: /select database or type to search databases/i,
   });
   userEvent.click(databaseSelect);
   userEvent.click(await screen.findByText('test-postgres'));
 
   const schemaSelect = screen.getByRole('combobox', {
-    name: /select schema or type schema name/i,
+    name: /select schema or type to search schemas/i,
   });
 
   await waitFor(() => expect(schemaSelect).toBeEnabled());