Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(safari): remove autocomplete in table select #23361

Merged
merged 3 commits into from
Mar 14, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -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');
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand Down
8 changes: 4 additions & 4 deletions superset-frontend/src/components/DatabaseSelector/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -273,15 +273,15 @@ 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>}
lazyLoading={false}
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}
/>,
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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(
Expand All @@ -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();
Expand All @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down
4 changes: 2 additions & 2 deletions superset-frontend/src/components/TableSelector/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -188,15 +188,15 @@ 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();
userEvent.click(screen.getByText('test-postgres'));

// 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();
Expand All @@ -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());
Expand Down Expand Up @@ -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());
Expand Down