Merge branch '2.16' into backport/backport-7266-to-2.16

changelogs/fragments/7288.yml

@@ -0,0 +1,2 @@
+feat:
+- [VisBuilder] Add Capability to generate dynamic vega ([#7288](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7288))

changelogs/fragments/7341.yml

@@ -0,0 +1,2 @@
+refactor:
+- [Look&Feel] Apply guidance for visBuilder ([#7341](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7341))

changelogs/fragments/7405.yml

@@ -0,0 +1,2 @@
+fix:
+- [Bug][Workspace] Navigate to detail page when clicking all use case workspace ([#7405](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7405))

changelogs/fragments/7420.yml

@@ -0,0 +1,2 @@
+fix:
+- [Version Decoupling] Add data source version and installed plugins in data source viewer returns ([#7420](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7420))

src/plugins/advanced_settings/public/management_app/lib/get_category_name.ts

@@ -48,6 +48,9 @@ const names: Record<string, string> = {
   visualizations: i18n.translate('advancedSettings.categoryNames.visualizationsLabel', {
     defaultMessage: 'Visualizations',
   }),
+  visbuilder: i18n.translate('advancedSettings.categoryNames.visbuilderLabel', {
+    defaultMessage: 'VisBuilder',
+  }),
   discover: i18n.translate('advancedSettings.categoryNames.discoverLabel', {
     defaultMessage: 'Discover',
   }),

src/plugins/data/public/ui/apply_filters/apply_filter_popover_content.tsx

@@ -38,6 +38,7 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiSwitch,
+  EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import React, { Component } from 'react';
@@ -100,10 +101,14 @@ export default class ApplyFiltersPopoverContent extends Component<Props, State>
       <React.Fragment>
         <EuiModalHeader>
           <EuiModalHeaderTitle>
-            <FormattedMessage
-              id="data.filter.applyFilters.popupHeader"
-              defaultMessage="Select filters to apply"
-            />
+            <EuiText size="s">
+              <h2>
+                <FormattedMessage
+                  id="data.filter.applyFilters.popupHeader"
+                  defaultMessage="Select filters to apply"
+                />
+              </h2>
+            </EuiText>
           </EuiModalHeaderTitle>
         </EuiModalHeader>
 

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

@@ -67,23 +67,23 @@ describe('DataSourceHomePanel', () => {
 
   test('renders DataSourceTableWithRouter when manageOpensearchDataSources tab is selected', () => {
     const wrapper = mountComponent();
-    wrapper.find(EuiTab).at(1).simulate('click');
+    wrapper.find(EuiTab).at(0).simulate('click');
     expect(wrapper.find(DataSourceTableWithRouter)).toHaveLength(1);
     expect(wrapper.find(ManageDirectQueryDataConnectionsTable)).toHaveLength(0);
   });
 
   test('renders ManageDirectQueryDataConnectionsTable when manageDirectQueryDataSources tab is selected', () => {
     const wrapper = mountComponent();
-    wrapper.find(EuiTab).at(0).simulate('click');
+    wrapper.find(EuiTab).at(1).simulate('click');
     expect(wrapper.find(ManageDirectQueryDataConnectionsTable)).toHaveLength(1);
     expect(wrapper.find(DataSourceTableWithRouter)).toHaveLength(0);
   });
 
   test('handles tab changes', () => {
     const wrapper = mountComponent();
-    expect(wrapper.find(ManageDirectQueryDataConnectionsTable)).toHaveLength(1);
-    wrapper.find(EuiTab).at(1).simulate('click');
     expect(wrapper.find(DataSourceTableWithRouter)).toHaveLength(1);
+    wrapper.find(EuiTab).at(1).simulate('click');
+    expect(wrapper.find(ManageDirectQueryDataConnectionsTable)).toHaveLength(1);
   });
 
   test('does not render OpenSearch connections tab when featureFlagStatus is false', () => {

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

@@ -39,7 +39,10 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
     application,
   } = useOpenSearchDashboards<DataSourceManagementContext>().services;
 
-  const [selectedTabId, setSelectedTabId] = useState('manageDirectQueryDataSources');
+  const defaultTabId = featureFlagStatus
+    ? 'manageOpensearchDataSources'
+    : 'manageDirectQueryDataSources';
+  const [selectedTabId, setSelectedTabId] = useState(defaultTabId);
   const canManageDataSource = !!application.capabilities?.dataSource?.canManage;
 
   useEffect(() => {
@@ -51,10 +54,6 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
   };
 
   const tabs = [
-    {
-      id: 'manageDirectQueryDataSources',
-      name: 'Direct query connections',
-    },
     ...(featureFlagStatus
       ? [
           {
@@ -63,6 +62,10 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
           },
         ]
       : []),
+    {
+      id: 'manageDirectQueryDataSources',
+      name: 'Direct query connections',
+    },
   ];
 
   const renderTabs = () => {
@@ -110,6 +113,7 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
               savedObjects={savedObjects}
               uiSettings={uiSettings}
               featureFlagStatus={featureFlagStatus}
+              application={application}
             />
           )}
         </EuiFlexItem>

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

@@ -82,11 +82,7 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
       return;
     }
 
-    if (
-      (optionId === '' && this.props.hideLocalCluster) ||
-      (this.props.dataSourceFilter &&
-        this.props.selectedOption.filter(this.props.dataSourceFilter).length === 0)
-    ) {
+    if (optionId === '' && this.props.hideLocalCluster) {
       this.setState({
         selectedOption: [],
       });
@@ -100,6 +96,17 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
           optionId,
           this.props.savedObjectsClient!
         );
+        if (
+          this.props.dataSourceFilter &&
+          [selectedDataSource].filter(this.props.dataSourceFilter).length === 0
+        ) {
+          this.setState({
+            selectedOption: [],
+          });
+          this.onSelectedDataSources([]);
+          return;
+        }
+
         if (!this._isMounted) return;
         this.setState({
           selectedOption: [{ id: optionId, label: selectedDataSource.title }],

src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.test.tsx

@@ -9,6 +9,7 @@ import '@testing-library/jest-dom';
 import { MemoryRouter, Route } from 'react-router-dom';
 import { DirectQueryDataConnectionDetail } from './direct_query_connection_detail';
 import { ApplicationStart, HttpStart, NotificationsStart } from 'opensearch-dashboards/public';
+import { isPluginInstalled } from '../../utils';
 
 jest.mock('../../../constants', () => ({
   DATACONNECTIONS_BASE: '/api/dataconnections',
@@ -61,19 +62,9 @@ jest.mock('../associated_object_management/utils/associated_objects_tab_utils',
   redirectToExplorerS3: jest.fn(),
 }));
 
-beforeAll(() => {
-  global.fetch = jest.fn(() =>
-    Promise.resolve({
-      json: () =>
-        Promise.resolve({ status: { statuses: [{ id: 'plugin:observabilityDashboards' }] } }),
-    })
-  ) as jest.Mock;
-});
-
-afterAll(() => {
-  global.fetch.mockClear();
-  delete global.fetch;
-});
+jest.mock('../../utils', () => ({
+  isPluginInstalled: jest.fn(),
+}));
 
 const renderComponent = ({
   featureFlagStatus = false,
@@ -98,6 +89,11 @@ const renderComponent = ({
 };
 
 describe('DirectQueryDataConnectionDetail', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (isPluginInstalled as jest.Mock).mockResolvedValue(true);
+  });
+
   test('renders without crashing', async () => {
     const mockHttp = {
       get: jest.fn().mockResolvedValue({

src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx

@@ -53,6 +53,7 @@ import {
   IntegrationInstancesSearchResult,
 } from '../../../../framework/types';
 import { INTEGRATIONS_BASE } from '../../../../framework/utils/shared';
+import { isPluginInstalled } from '../../utils';
 
 interface DirectQueryDataConnectionDetailProps {
   featureFlagStatus: boolean;
@@ -70,41 +71,6 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
   setBreadcrumbs,
 }) => {
   const [observabilityDashboardsExists, setObservabilityDashboardsExists] = useState(false);
-  const checkIfSQLWorkbenchPluginIsInstalled = () => {
-    fetch('/api/status', {
-      headers: {
-        'Content-Type': 'application/json',
-        'osd-xsrf': 'true',
-        'accept-language': 'en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7,zh-TW;q=0.6',
-        pragma: 'no-cache',
-        'sec-fetch-dest': 'empty',
-        'sec-fetch-mode': 'cors',
-        'sec-fetch-site': 'same-origin',
-      },
-      method: 'GET',
-      referrerPolicy: 'strict-origin-when-cross-origin',
-      mode: 'cors',
-      credentials: 'include',
-    })
-      .then(function (response) {
-        return response.json();
-      })
-      .then((data) => {
-        for (let i = 0; i < data.status.statuses.length; ++i) {
-          if (data.status.statuses[i].id.includes('plugin:observabilityDashboards')) {
-            setObservabilityDashboardsExists(true);
-          }
-        }
-      })
-      .catch((error) => {
-        notifications.toasts.addDanger(
-          'Error checking Dashboards Observability Plugin Installation status.'
-        );
-        // eslint-disable-next-line no-console
-        console.error(error);
-      });
-  };
-
   const { dataSourceName } = useParams<{ dataSourceName: string }>();
   const { search } = useLocation();
   const queryParams = new URLSearchParams(search);
@@ -211,7 +177,9 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
   };
 
   useEffect(() => {
-    checkIfSQLWorkbenchPluginIsInstalled();
+    isPluginInstalled('plugin:observabilityDashboards', notifications, http).then(
+      setObservabilityDashboardsExists
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);