[Workspace] Refactor 'Associate data sources' in create page to support direct query connections

[Kapian1234]

Description

Refactor 'Associate data sources' in create page to support direct query connections

Issues Resolved

Screenshot

Testing the changes

Changelog

• feat: Support DQCs in create page

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[codecov]

Codecov Report

Attention: Patch coverage is 91.36691% with 12 lines in your changes missing coverage. Please review.

Project coverage is 60.55%. Comparing base (7e8612f) to head (b4b1ac7).
Report is 7 commits behind head on main.

Files with missing lines	Patch %	Lines
src/plugins/workspace/public/utils.ts	60.00%	8 Missing ⚠️
...ents/workspace_detail/select_data_source_panel.tsx	88.23%	2 Missing ⚠️
...components/workspace_creator/workspace_creator.tsx	75.00%	0 Missing and 1 partial ⚠️
...onents/workspace_form/select_data_source_panel.tsx	96.42%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7961      +/-   ##
==========================================
+ Coverage   60.52%   60.55%   +0.02%     
==========================================
  Files        3728     3730       +2     
  Lines       88295    88365      +70     
  Branches    13661    13681      +20     
==========================================
+ Hits        53441    53507      +66     
- Misses      31600    31606       +6     
+ Partials     3254     3252       -2     

Flag	Coverage Δ
Linux_1	28.76% <91.36%> (+0.04%)	⬆️
Linux_2	56.25% <ø> (+<0.01%)	⬆️
Linux_3	37.40% <ø> (-0.02%)	⬇️
Linux_4	29.62% <ø> (+0.01%)	⬆️
Windows_1	28.78% <91.36%> (+0.04%)	⬆️
Windows_2	56.20% <ø> (+<0.01%)	⬆️
Windows_3	37.40% <ø> (-0.02%)	⬇️
Windows_4	29.62% <ø> (+0.02%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[wanglam]

@Kapian1234 Seems we are re-use the same component with workspace detail side. Could you help check with @yubonluo if this width updates can be applied in workspace detail? I'm prefer to add flag here to determine if we need to update the width.

[Kapian1234]

The width updates will indeed be applied in workspace detail, but I've checked with @yubonluo and the new width still presents well there. Perhaps the flag isn't necessary?

[ruanyl]

Could you leave a comment to describe the UI results of setting inCreatePage to true/false?

[Kapian1234]

ok

[ruanyl]

I think Suzhou refers to http.basePath

[ruanyl]

When in create page, click un-assign button will call handleUnassignDataSources directly, otherwise, it will display a confirmation dialog, am I right?

[Kapian1234]

yes

[ruanyl]

looks like the only difference is we show pagination when not in create page?
Nit: what do this?

interface DataSourceConnectionTableProps extends Pick<EuiInMemoryTableProps<DataSourceConnection>, 'pagination'> {
...
}

Then you can pass pagination as props to DataSourceConnectionTable whenever needed.

[Kapian1234]

Another difference is that we show search bar when not in create page, then we have to pass two props. The search props looks like this, we may not need to pass it.

   const renderToolsLeft = useCallback(() => {
    return selectedItems.length > 0 && !modalVisible
      ? [
          <EuiSmallButton
            color="danger"
            onClick={() => setModalVisible(true)}
            data-test-subj="workspace-detail-dataSources-table-bulkRemove"
          >
            {i18n.translate('workspace.detail.dataSources.table.remove.button', {
              defaultMessage: 'Remove {numberOfSelect} association(s)',
              values: { numberOfSelect: selectedItems.length },
            })}
          </EuiSmallButton>,
        ]
      : [];
  }, [selectedItems, modalVisible]);

  const search: EuiSearchBarProps = {
    toolsLeft: renderToolsLeft(),
    box: {
      incremental: true,
    },
    filters: [
      {
        type: 'field_value_selection',
        field: 'type',
        name: 'Type',
        multiSelect: 'or',
        options: Array.from(
          new Set(openSearchConnections.map(({ type }) => type).filter(Boolean))
        ).map((type) => ({
          value: type!,
          name: type!,
        })),
      },
    ],
  };

[SuZhou-Joe]

This component needs a refactor. If we are trying to make this component a reusable component, we should let the parent of the component to pass in different props to control the behavior of the component. For this component, I think we should split this component into 2 components:

1. A table component that renders the built-in columns, and gives a onUnlinkDatasource callback and tableProps: EuiInMemoryTableProps, without the inCreatePage props.
2. The ConfirmModal should be moved to workspace detail page and all the different props should be handled by workspace details page and workspace creation page, the table component just take whatever props their parents pass in and spread to the EuiInMemoryTable.

[wanglam]

Agree with @SuZhou-Joe 's comments. Current implementation of DataSourceConnectionTable contains too much business logic should handled by workspace detail or create page self. I've updated the code. Feel free to help me review it. Thank you.

[ruanyl]

Seems errors is not used any more, is it by intention?

[Kapian1234]

no, I forgot to delete it

[ruanyl]

Seems you don't need as AssociationDataSourceModalMode

[Kapian1234]

ok

[ruanyl]

I see, so that's an existing props. I think you can change the props.isDashboardAdmin of SelectDataSourcePanel because this props is newly aded, let's fix this first if fixing DataSourceConnectionTable is out of the scope of this PR.

[ruanyl]

You can have this logic in onSelectionChange then you don't need this useEffect, then everywhere currently calls setSelectedItems, you can use onSelectionChange

[Kapian1234]

ok, thx!

[ruanyl]

Nit: you checked the existence of chrome already, optional chain is not required here

Suggested change

	logos={chrome?.logos}
	logos={chrome.logos}

[Kapian1234]

thx I forgot to delete it

[SuZhou-Joe]

Suggested change

	url = `${origin}${basePath}/app/dataSources/manage/${name}?dataSourceMDSId=${record.parentId}`;
	url = http.basePath.prepend(`/app/dataSources/${record.id}`, {
	withoutClientBasePath: true,
	});
	url = http.basePath.prepend(`/app/dataSources/manage/${name}?dataSourceMDSId=${record.parentId}`, {
	withoutClientBasePath: true,
	});

[SuZhou-Joe]

Suggested change

	url = http.basePath.prepend(`/app/dataSources/${record.id}`, {
	withoutClientBasePath: true,
	});
	url = http.basePath.prepend(`/app/dataSources/${record.id}`);

If it's opensearch connection, shall we just go to the data source page within the workspace?

[wanglam]

I think we should go to the data source management page within the workspace. @yubonluo , could you help clarify this?

[SuZhou-Joe]

Suggested change

	type DataSourceConnectionTableProps = Omit<
	EuiInMemoryTableProps<DataSourceConnection>,
	| 'columns'
	| 'itemsId'
	| 'isSelectable'
	| 'itemIdToExpandedRowMap'
	| 'isExpandable'
	| 'selection'
	| 'pagination'
	> & {
	type DataSourceConnectionTableProps = {
	tableProps: Partial<EuiInMemoryTableProps<DataSourceConnection>>

What about we moving all the table related props to a standalone entry so that it won't bother other props. And to make the props simple by using Partial.

[SuZhou-Joe]

Suggested change

	{...(restProps as EuiInMemoryTableProps<DataSourceConnection>)}
	{...restProps}

We'd better avoid type assertion.

[SuZhou-Joe]

Run cypress tests (osd:ciGroup6) should be irrelevant to the code changes.