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

This commit is contained in:
Ville Brofeldt 2023-03-14 15:20:33 +02:00 committed by GitHub
parent b820eb8235
commit b90a11191f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 30 additions and 30 deletions

View File

@ -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);

View File

@ -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);

View File

@ -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

View File

@ -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();

View File

@ -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}

View File

@ -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());