display direct query connections of local cluster in data sources page (

opensearch-project#8059)

Signed-off-by: Wei Wang <weiwsde@gmail.com>

src/plugins/data_source_management/public/components/create_button/create_button.test.tsx

@@ -17,7 +17,9 @@ describe('CreateButton', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
 
   beforeEach(() => {
-    component = shallow(<CreateButton history={history} dataTestSubj={dataTestSubj} />);
+    component = shallow(
+      <CreateButton history={history} dataTestSubj={dataTestSubj} featureFlagStatus={true} />
+    );
   });
 
   it('should render normally', () => {

src/plugins/data_source_management/public/components/create_button/create_button.tsx

@@ -13,9 +13,10 @@ interface Props {
   history: History;
   isEmptyState?: boolean;
   dataTestSubj: string;
+  featureFlagStatus: boolean;
 }
 
-export const CreateButton = ({ history, isEmptyState, dataTestSubj }: Props) => {
+export const CreateButton = ({ history, isEmptyState, dataTestSubj, featureFlagStatus }: Props) => {
   return (
     <EuiSmallButton
       data-test-subj={dataTestSubj}
@@ -24,7 +25,9 @@ export const CreateButton = ({ history, isEmptyState, dataTestSubj }: Props) =>
     >
       <FormattedMessage
         id="dataSourcesManagement.dataSourceListing.createButton"
-        defaultMessage="Create data source connection"
+        defaultMessage={
+          featureFlagStatus ? 'Create data source connection' : 'Create direct query connection'
+        }
       />
     </EuiSmallButton>
   );

src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx

@@ -100,9 +100,9 @@ describe('DataSourceHomePanel', () => {
     expect(wrapper.find(ManageDirectQueryDataConnectionsTableWithRouter)).toHaveLength(1);
   });
 
-  test('does not render OpenSearch connections tab when featureFlagStatus is false', () => {
+  test('does not render any tab when featureFlagStatus is false', () => {
     const wrapper = shallowComponent({ ...defaultProps, featureFlagStatus: false });
-    expect(wrapper.find(EuiTab)).toHaveLength(1);
+    expect(wrapper.find(EuiTab)).toHaveLength(0);
   });
 
   test('calls history.push when CreateButton is clicked', () => {

src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx

@@ -38,17 +38,9 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
   useNewUX,
   ...props
 }) => {
-  const {
-    setBreadcrumbs,
-    notifications,
-    http,
-    savedObjects,
-    uiSettings,
-    application,
-    workspaces,
-    docLinks,
-    navigation,
-  } = useOpenSearchDashboards<DataSourceManagementContext>().services;
+  const { setBreadcrumbs, application, workspaces, docLinks, navigation } = useOpenSearchDashboards<
+    DataSourceManagementContext
+  >().services;
 
   const defaultTabId = featureFlagStatus
     ? 'manageOpensearchDataSources'
@@ -69,7 +61,7 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
   const createDataSourceButton = [
     {
       id: 'Create data source',
-      label: 'Create data source connection',
+      label: featureFlagStatus ? 'Create data source connection' : 'Create direct query connection',
       testId: 'createDataSourceButton',
       run: () => props.history.push('/create'),
       fill: true,
@@ -110,6 +102,25 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
     },
   ];
 
+  const description = {
+    description: i18n.translate('dataSourcesManagement.dataSourcesTable.description', {
+      defaultMessage: featureFlagStatus
+        ? 'Create and manage data source connections.'
+        : 'Manage direct query data source connections.',
+    }),
+    links: [
+      {
+        href: docLinks.links.opensearchDashboards.dataSource.guide,
+        controlType: 'link',
+        target: '_blank',
+        className: 'external-link-inline-block',
+        label: i18n.translate('dataSourcesManagement.dataSourcesTable.documentation', {
+          defaultMessage: 'Learn more',
+        }),
+      },
+    ],
+  } as TopNavControlDescriptionData;
+
   const renderTabs = () => {
     return tabs.map((tab) => (
       <EuiTab
@@ -126,10 +137,12 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
     <EuiPanel>
       {useNewUX && (
         <>
-          <HeaderControl
-            setMountPoint={application.setAppCenterControls}
-            controls={connectionTypeButton}
-          />
+          {featureFlagStatus && (
+            <HeaderControl
+              setMountPoint={application.setAppCenterControls}
+              controls={connectionTypeButton}
+            />
+          )}
           {canManageDataSource && (
             <HeaderControl
               setMountPoint={application.setAppRightControls}
@@ -151,28 +164,7 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
                       }
                     ),
                   }
-                : ({
-                    description: i18n.translate(
-                      'dataSourcesManagement.dataSourcesTable.description',
-                      {
-                        defaultMessage: 'Create and manage data source connections.',
-                      }
-                    ),
-                    links: [
-                      {
-                        href: docLinks.links.opensearchDashboards.dataSource.guide,
-                        controlType: 'link',
-                        target: '_blank',
-                        className: 'external-link-inline-block',
-                        label: i18n.translate(
-                          'dataSourcesManagement.dataSourcesTable.documentation',
-                          {
-                            defaultMessage: 'Learn more',
-                          }
-                        ),
-                      },
-                    ],
-                  } as TopNavControlDescriptionData),
+                : description,
             ]}
           />
         </>
@@ -184,28 +176,40 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
               <EuiPageHeader>
                 <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
                   <EuiFlexItem grow={false}>
-                    <DataSourceHeader history={props.history} />
+                    <DataSourceHeader
+                      history={props.history}
+                      featureFlagStatus={featureFlagStatus}
+                    />
                   </EuiFlexItem>
                   {canManageDataSource ? (
                     <EuiFlexItem grow={false}>
-                      <CreateButton history={props.history} dataTestSubj="createDataSourceButton" />
+                      <CreateButton
+                        history={props.history}
+                        featureFlagStatus={featureFlagStatus}
+                        dataTestSubj="createDataSourceButton"
+                      />
                     </EuiFlexItem>
                   ) : null}
                 </EuiFlexGroup>
               </EuiPageHeader>
             </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiSpacer size="s" />
-              <EuiTabs size="s">{renderTabs()}</EuiTabs>
-            </EuiFlexItem>
+            {featureFlagStatus && (
+              <EuiFlexItem>
+                <EuiSpacer size="s" />
+                <EuiTabs size="s">{renderTabs()}</EuiTabs>
+              </EuiFlexItem>
+            )}
           </>
         )}
         <EuiFlexItem>
           {selectedTabId === 'manageOpensearchDataSources' && featureFlagStatus && (
             <DataSourceTableWithRouter {...props} />
           )}
-          {selectedTabId === 'manageDirectQueryDataSources' && featureFlagStatus && (
-            <ManageDirectQueryDataConnectionsTableWithRouter {...props} />
+          {(!featureFlagStatus || selectedTabId === 'manageDirectQueryDataSources') && (
+            <ManageDirectQueryDataConnectionsTableWithRouter
+              featureFlagStatus={featureFlagStatus}
+              {...props}
+            />
           )}
         </EuiFlexItem>
       </EuiFlexGroup>

src/plugins/data_source_management/public/components/data_source_home_panel/data_source_page_header.test.tsx

@@ -16,7 +16,8 @@ describe('DataSourceHeader', () => {
     match: {} as any,
   };
 
-  const shallowComponent = (props = defaultProps) => shallow(<DataSourceHeader {...props} />);
+  const shallowComponent = (props = defaultProps) =>
+    shallow(<DataSourceHeader {...props} featureFlagStatus={true} />);
 
   test('renders correctly', () => {
     const wrapper = shallowComponent();
@@ -31,7 +32,7 @@ describe('DataSourceHeader', () => {
 
     const descriptionMessage = wrapper.find(EuiText).at(1).find(FormattedMessage);
     expect(descriptionMessage.prop('id')).toEqual(
-      'dataSourcesManagement.dataSourcesTable.description'
+      'dataSourcesManagement.dataSourcesTable.mdsEnabled.description'
     );
     expect(descriptionMessage.prop('defaultMessage')).toEqual(
       'Create and manage data source connections.'

src/plugins/data_source_management/public/components/data_source_home_panel/data_source_page_header.tsx

@@ -8,9 +8,11 @@ import React from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
 import { RouteComponentProps } from 'react-router-dom';
 
-type DataSourceHeaderProps = RouteComponentProps;
+interface DataSourceHeaderProps extends RouteComponentProps {
+  featureFlagStatus: boolean;
+}
 
-export const DataSourceHeader: React.FC<DataSourceHeaderProps> = () => {
+export const DataSourceHeader: React.FC<DataSourceHeaderProps> = ({ featureFlagStatus }) => {
   return (
     <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
       <EuiFlexItem grow={false}>
@@ -25,10 +27,17 @@ export const DataSourceHeader: React.FC<DataSourceHeaderProps> = () => {
         <EuiSpacer size="s" />
         <EuiText size="s">
           <p>
-            <FormattedMessage
-              id="dataSourcesManagement.dataSourcesTable.description"
-              defaultMessage="Create and manage data source connections."
-            />
+            {featureFlagStatus ? (
+              <FormattedMessage
+                id="dataSourcesManagement.dataSourcesTable.mdsEnabled.description"
+                defaultMessage="Create and manage data source connections."
+              />
+            ) : (
+              <FormattedMessage
+                id="dataSourcesManagement.dataSourcesTable.mdsDisabled.description"
+                defaultMessage="Manage direct query data source connections."
+              />
+            )}
           </p>
         </EuiText>
       </EuiFlexItem>

src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx

@@ -82,7 +82,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
     setIsLoading(true);
     getDataSources(savedObjects.client)
       .then((response: DataSourceTableItem[]) => {
-        return fetchDataSourceConnections(response, http, notifications);
+        return fetchDataSourceConnections(response, http, notifications, false);
       })
       .then((finalData) => {
         setDataSources(finalData);
@@ -166,7 +166,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
         }
       ) => (
         <>
-          <EuiButtonEmpty size="xs" {...reactRouterNavigate(history, `${index.id}`)}>
+          <EuiButtonEmpty size="xs" {...reactRouterNavigate(history, `${index.id}`)} flush="left">
             {name}
           </EuiButtonEmpty>
           {index.id === getDefaultDataSourceId(uiSettings) ? (