Skip to content

Commit

Permalink
updated UI to have lesser forks; added new logo; table selector in in…
Browse files Browse the repository at this point in the history 
…tegration setup

Signed-off-by: Amardeepsingh Siglani <[email protected]>
  • Loading branch information
@amsiglan
amsiglan committed May 22, 2024
1 parent 88e7751 commit b9bf6f8
Show file tree
Hide file tree
Showing 14 changed files with 322 additions and 314 deletions.
17 changes: 9 additions & 8 deletions ...omponents/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import {
import {
CachedTable,
CreateAccelerationForm,
S3GlueProperties,
} from '../../../../../../../../common/types/data_connections';
import { DirectQueryLoadingStatus } from '../../../../../../../../common/types/explorer';
import { useLoadTableColumnsToCache } from '../../../../../../../framework/catalog_cache/cache_loader';
Expand All @@ -35,12 +34,13 @@ import { IndexAdvancedSettings } from '../selectors/index_advanced_settings';
import { IndexSettingOptions } from '../selectors/index_setting_options';
import { IndexTypeSelector } from '../selectors/index_type_selector';
import { PreviewSQLDefinition } from '../selectors/preview_sql_defintion';
import { AccelerationDataSourceSelector } from '../selectors/source_selector';
import { DataSourceSelector } from '../selectors/source_selector';
import { QueryVisualEditor } from '../visual_editors/query_visual_editor';
import { CreateAccelerationButton } from './create_acceleration_button';
import { CreateAccelerationHeader } from './create_acceleration_header';
import { hasError } from './utils';
import { DATACONNECTIONS_BASE } from '../../../../../../../../common/constants/shared';
import { checkIsConnectionWithLakeFormation } from '../../../../../utils/helpers';

export interface CreateAccelerationProps {
selectedDatasource: string;
Expand Down Expand Up @@ -172,9 +172,7 @@ export const CreateAcceleration = ({

const updateDataSourceConnectionInfo = () => {
coreRefs.http!.get(`${DATACONNECTIONS_BASE}/${selectedDatasource}`).then((data: any) => {
setIsS3ConnectionWithLakeFormation(
!!(data.properties as S3GlueProperties)['glue.lakeformation.enabled']
);
setIsS3ConnectionWithLakeFormation(checkIsConnectionWithLakeFormation(data));
});
};

Expand Down Expand Up @@ -239,10 +237,13 @@ export const CreateAcceleration = ({
component="div"
id="acceleration-form"
>
<AccelerationDataSourceSelector
<DataSourceSelector
http={http!}
accelerationFormData={accelerationFormData}
setAccelerationFormData={setAccelerationFormData}
dataSourceFormProps={{
formType: 'CreateAcceleration',
dataSourceFormData: accelerationFormData,
setDataSourceFormData: setAccelerationFormData,
}}
selectedDatasource={selectedDatasource}
dataSourcesPreselected={dataSourcesPreselected}
tableFieldsLoading={tableFieldsLoading}
Expand Down
2 changes: 1 addition & 1 deletion .../datasources/components/manage/accelerations/create_accelerations_flyout/create/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const pluralizeTime = (timeWindow: number) => {
return timeWindow > 1 ? 's' : '';
};

export const hasError = (formErrors: FormErrorsType, key?: keyof FormErrorsType) => {
export const hasError = (formErrors: Partial<FormErrorsType>, key?: keyof FormErrorsType) => {
if (!key) return Object.values(formErrors).some((e) => !!e.length);
return !!formErrors[key]?.length;
};
Expand Down
20 changes: 13 additions & 7 deletions ...ge/accelerations/create_accelerations_flyout/selectors/__tests__/source_selector.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
createAccelerationEmptyDataMock,
mockDatasourcesQuery,
} from '../../../../../../../../../test/accelerations';
import { AccelerationDataSourceSelector } from '../source_selector';
import { DataSourceSelector } from '../source_selector';

const coreStartMock = coreMock.createStart();

Expand All @@ -29,11 +29,14 @@ describe('Source selector components', () => {
client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);

const wrapper = mount(
<AccelerationDataSourceSelector
<DataSourceSelector
http={client}
selectedDatasource={selectedDatasource}
accelerationFormData={accelerationFormData}
setAccelerationFormData={setAccelerationFormData}
dataSourceFormProps={{
formType: 'CreateAcceleration',
dataSourceFormData: accelerationFormData,
setDataSourceFormData: setAccelerationFormData,
}}
dataSourcesPreselected={false}
tableFieldsLoading={false}
/>
Expand Down Expand Up @@ -62,11 +65,14 @@ describe('Source selector components', () => {
client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
client.post = jest.fn().mockResolvedValue([]);
const wrapper = mount(
<AccelerationDataSourceSelector
<DataSourceSelector
selectedDatasource={selectedDatasource}
http={client}
accelerationFormData={accelerationFormData}
setAccelerationFormData={setAccelerationFormData}
dataSourceFormProps={{
formType: 'CreateAcceleration',
dataSourceFormData: accelerationFormData,
setDataSourceFormData: setAccelerationFormData,
}}
dataSourcesPreselected={true}
tableFieldsLoading={false}
/>
Expand Down
9 changes: 7 additions & 2 deletions ...onents/manage/accelerations/create_accelerations_flyout/selectors/index_type_selector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ export const IndexTypeSelector = ({

useEffect(() => {
if (!valueSetAlready.current) {
setValue(isS3ConnectionWithLakeFormation ? 'materialized' : 'skipping');
const defaultSelectedOption = isS3ConnectionWithLakeFormation ? 'materialized' : 'skipping';
updateState(defaultSelectedOption);
}
}, [isS3ConnectionWithLakeFormation]);

Expand All @@ -46,14 +47,18 @@ export const IndexTypeSelector = ({
);
}, [accelerationFormData.dataTable]);

const onChangeSupeSelect = (indexType: string) => {
const updateState = (indexType: string) => {
setAccelerationFormData({
...accelerationFormData,
accelerationIndexType: indexType as AccelerationIndexType,
accelerationIndexName:
indexType === 'skipping' ? ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME : '',
});
setValue(indexType);
};

const onChangeSupeSelect = (indexType: string) => {
updateState(indexType);
valueSetAlready.current = true;
};

Expand Down
77 changes: 45 additions & 32 deletions ...components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,25 +30,40 @@ import { hasError, validateDataTable, validateDatabase } from '../create/utils';
import { SelectorLoadDatabases } from './selector_helpers/load_databases';
import { SelectorLoadObjects } from './selector_helpers/load_objects';

interface AccelerationDataSourceSelectorProps {
export type BaseDataSourceForm = Pick<
CreateAccelerationForm,
'dataSource' | 'database' | 'dataTable'
> & { formErrors: Partial<CreateAccelerationForm['formErrors']> };

type DataSourceFormProps =
| {
formType: 'CreateAcceleration';
dataSourceFormData: CreateAccelerationForm;
setDataSourceFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
}
| {
formType: 'SetupIntegration';
dataSourceFormData: BaseDataSourceForm;
setDataSourceFormData: React.Dispatch<React.SetStateAction<BaseDataSourceForm>>;
};

interface DataSourceSelectorProps {
http: CoreStart['http'];
accelerationFormData: CreateAccelerationForm;
setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
dataSourceFormProps: DataSourceFormProps;
selectedDatasource: string;
dataSourcesPreselected: boolean;
tableFieldsLoading: boolean;
dataSourceMDSId?: string;
}

export const AccelerationDataSourceSelector = ({
export const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({
http,
accelerationFormData,
setAccelerationFormData,
dataSourceFormProps: { dataSourceFormData, setDataSourceFormData },
selectedDatasource,
dataSourcesPreselected,
tableFieldsLoading,
dataSourceMDSId,
}: AccelerationDataSourceSelectorProps) => {
}) => {
const { setToast } = useToast();
const [databases, setDatabases] = useState<Array<EuiComboBoxOptionOption<string>>>([]);
const [selectedDatabase, setSelectedDatabase] = useState<Array<EuiComboBoxOptionOption<string>>>(
Expand All @@ -65,9 +80,7 @@ export const AccelerationDataSourceSelector = ({
const dataSourceDescription = (
<EuiDescriptionList>
<EuiDescriptionListTitle>Data source</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
{accelerationFormData.dataSource}
</EuiDescriptionListDescription>
<EuiDescriptionListDescription>{dataSourceFormData.dataSource}</EuiDescriptionListDescription>
</EuiDescriptionList>
);

Expand All @@ -94,7 +107,7 @@ export const AccelerationDataSourceSelector = ({
};

const loadDatabases = () => {
const dsCache = CatalogCacheManager.getOrCreateDataSource(accelerationFormData.dataSource);
const dsCache = CatalogCacheManager.getOrCreateDataSource(dataSourceFormData.dataSource);

if (dsCache.status === CachedDataSourceStatus.Updated && dsCache.databases.length > 0) {
const databaseLabels = dsCache.databases.map((db) => ({ label: db.name }));
Expand All @@ -109,16 +122,16 @@ export const AccelerationDataSourceSelector = ({
setSelectedDatabase([]);
setTables([]);
setSelectedTable([]);
setAccelerationFormData({ ...accelerationFormData, database: '', dataTable: '' });
setDataSourceFormData({ ...(dataSourceFormData as any), database: '', dataTable: '' });
};

const loadTables = () => {
if (selectedDatabase.length > 0) {
let dbCache = {} as CachedDatabase;
try {
dbCache = CatalogCacheManager.getDatabase(
accelerationFormData.dataSource,
accelerationFormData.database
dataSourceFormData.dataSource,
dataSourceFormData.database
);
if (dbCache.status === CachedDataSourceStatus.Updated && dbCache.tables.length > 0) {
const tableLabels = dbCache.tables.map((tb) => ({ label: tb.name }));
Expand All @@ -135,7 +148,7 @@ export const AccelerationDataSourceSelector = ({
console.error(error);
}
setSelectedTable([]);
setAccelerationFormData({ ...accelerationFormData, dataTable: '' });
setDataSourceFormData({ ...(dataSourceFormData as any), dataTable: '' });
}
};

Expand All @@ -144,16 +157,16 @@ export const AccelerationDataSourceSelector = ({
}, []);

useEffect(() => {
if (accelerationFormData.dataSource !== '') {
if (dataSourceFormData.dataSource !== '') {
loadDatabases();
}
}, [accelerationFormData.dataSource]);
}, [dataSourceFormData.dataSource]);

useEffect(() => {
if (accelerationFormData.database !== '') {
if (dataSourceFormData.database !== '') {
loadTables();
}
}, [accelerationFormData.database]);
}, [dataSourceFormData.database]);

return (
<>
Expand All @@ -174,15 +187,15 @@ export const AccelerationDataSourceSelector = ({
<EuiDescriptionList>
<EuiDescriptionListTitle>Database</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
{accelerationFormData.database}
{dataSourceFormData.database}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionList>
<EuiDescriptionListTitle>Table</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
{accelerationFormData.dataTable}
{dataSourceFormData.dataTable}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
Expand All @@ -195,8 +208,8 @@ export const AccelerationDataSourceSelector = ({
<EuiFormRow
label="Database"
helpText="Select the database that contains the tables you'd like to use."
isInvalid={hasError(accelerationFormData.formErrors, 'databaseError')}
error={accelerationFormData.formErrors.databaseError}
isInvalid={hasError(dataSourceFormData.formErrors, 'databaseError')}
error={dataSourceFormData.formErrors.databaseError}
>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
Expand All @@ -207,7 +220,7 @@ export const AccelerationDataSourceSelector = ({
selectedOptions={selectedDatabase}
onChange={(databaseOptions) => {
if (databaseOptions.length > 0) {
setAccelerationFormData(
setDataSourceFormData(
producer((accData) => {
accData.database = databaseOptions[0].label;
accData.formErrors.databaseError = validateDatabase(
Expand All @@ -219,15 +232,15 @@ export const AccelerationDataSourceSelector = ({
}
}}
isClearable={false}
isInvalid={hasError(accelerationFormData.formErrors, 'databaseError')}
isInvalid={hasError(dataSourceFormData.formErrors, 'databaseError')}
isDisabled={
loadingComboBoxes.database || loadingComboBoxes.dataTable || tableFieldsLoading
}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<SelectorLoadDatabases
dataSourceName={accelerationFormData.dataSource}
dataSourceName={dataSourceFormData.dataSource}
loadDatabases={loadDatabases}
loadingComboBoxes={loadingComboBoxes}
setLoadingComboBoxes={setLoadingComboBoxes}
Expand All @@ -243,8 +256,8 @@ export const AccelerationDataSourceSelector = ({
? 'Loading tables fields'
: 'Select the Spark table that has the data you would like to index.'
}
isInvalid={hasError(accelerationFormData.formErrors, 'dataTableError')}
error={accelerationFormData.formErrors.dataTableError}
isInvalid={hasError(dataSourceFormData.formErrors, 'dataTableError')}
error={dataSourceFormData.formErrors.dataTableError}
>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
Expand All @@ -255,7 +268,7 @@ export const AccelerationDataSourceSelector = ({
selectedOptions={selectedTable}
onChange={(tableOptions) => {
if (tableOptions.length > 0) {
setAccelerationFormData(
setDataSourceFormData(
producer((accData) => {
accData.dataTable = tableOptions[0].label;
accData.formErrors.dataTableError = validateDataTable(
Expand All @@ -267,16 +280,16 @@ export const AccelerationDataSourceSelector = ({
}
}}
isClearable={false}
isInvalid={hasError(accelerationFormData.formErrors, 'dataTableError')}
isInvalid={hasError(dataSourceFormData.formErrors, 'dataTableError')}
isDisabled={
loadingComboBoxes.database || loadingComboBoxes.dataTable || tableFieldsLoading
}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<SelectorLoadObjects
dataSourceName={accelerationFormData.dataSource}
databaseName={accelerationFormData.database}
dataSourceName={dataSourceFormData.dataSource}
databaseName={dataSourceFormData.database}
loadTables={loadTables}
loadingComboBoxes={loadingComboBoxes}
setLoadingComboBoxes={setLoadingComboBoxes}
Expand Down
Loading

0 comments on commit b9bf6f8

Please sign in to comment.