Merge branch 'main' into dql-autosuggest-updates

Signed-off-by: Paul Sebastian <[email protected]>

changelogs/fragments/7673.yml

@@ -0,0 +1,2 @@
+feat:
+- [Workspace]Essential/Analytics(All) use case overview page ([#7673](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7673))

changelogs/fragments/7731.yml

@@ -0,0 +1,2 @@
+refactor:
+- Multi-datasources and multi-query languages features to use generic structured types, abstract data querying, and the language service ([#7731](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7731))

package.json

@@ -65,7 +65,7 @@
     "start": "scripts/use_node scripts/opensearch_dashboards --dev",
     "start:docker": "scripts/use_node scripts/opensearch_dashboards --dev --opensearch.hosts=$OPENSEARCH_HOSTS --opensearch.ignoreVersionMismatch=true --server.host=$SERVER_HOST",
     "start:security": "scripts/use_node scripts/opensearch_dashboards --dev --security",
-    "start:enhancements": "scripts/use_node scripts/opensearch_dashboards --dev --uiSettings.overrides['query:enhancements:enabled']=true --uiSettings.overrides['home:useNewHomePage']=true --uiSettings.overrides['state:storeInSessionStorage']=true",
+    "start:enhancements": "scripts/use_node scripts/opensearch_dashboards --dev --uiSettings.overrides['query:enhancements:enabled']=true --uiSettings.overrides['home:useNewHomePage']=true",
     "debug": "scripts/use_node --nolazy --inspect scripts/opensearch_dashboards --dev",
     "debug-break": "scripts/use_node --nolazy --inspect-brk scripts/opensearch_dashboards --dev",
     "lint": "yarn run lint:es && yarn run lint:style",

packages/osd-stylelint-config/config/global_selectors.json

@@ -27,8 +27,7 @@
       "src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss",
       "src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss",
       "src/plugins/data/public/ui/query_string_input/_query_bar.scss",
-      "src/plugins/data/public/ui/query_editor/_query_editor.scss",
-      "src/plugins/data/public/ui/dataset_navigator/_dataset_navigator.scss"
+      "src/plugins/data/public/ui/query_editor/_query_editor.scss"
     ]
   }
 }

src/core/public/index.ts

@@ -112,6 +112,10 @@ export {
   cleanWorkspaceId,
   DEFAULT_NAV_GROUPS,
   ALL_USE_CASE_ID,
+  SEARCH_USE_CASE_ID,
+  ESSENTIAL_USE_CASE_ID,
+  OBSERVABILITY_USE_CASE_ID,
+  SECURITY_ANALYTICS_USE_CASE_ID,
 } from '../utils';
 export {
   AppCategory,
@@ -126,6 +130,7 @@ export {
   ChromeNavGroup,
   NavGroupType,
   NavGroupStatus,
+  WorkspaceAttributeWithPermission,
 } from '../types';
 
 export {

src/core/public/saved_objects/saved_objects_client.ts

@@ -457,14 +457,14 @@ export class SavedObjectsClient {
    *   { id: 'foo', type: 'index-pattern' }
    * ])
    */
-  public bulkGet = (objects: Array<{ id: string; type: string }> = []) => {
+  public bulkGet = <T = unknown>(objects: Array<{ id: string; type: string }> = []) => {
     const filteredObjects = objects.map((obj) => pick(obj, ['id', 'type']));
     return this.performBulkGet(filteredObjects).then((resp) => {
       resp.saved_objects = resp.saved_objects.map((d) => this.createSavedObject(d));
       return renameKeys<
         PromiseType<ReturnType<SavedObjectsApi['bulkGet']>>,
-        SavedObjectsBatchResponse
-      >({ saved_objects: 'savedObjects' }, resp) as SavedObjectsBatchResponse;
+        SavedObjectsBatchResponse<T>
+      >({ saved_objects: 'savedObjects' }, resp) as SavedObjectsBatchResponse<T>;
     });
   };
 

src/core/public/saved_objects/simple_saved_object.ts

@@ -52,6 +52,7 @@ export class SimpleSavedObject<T = unknown> {
   public error: SavedObjectType<T>['error'];
   public references: SavedObjectType<T>['references'];
   public updated_at: SavedObjectType<T>['updated_at'];
+  public workspaces: SavedObjectType<T>['workspaces'];
 
   constructor(
     private client: SavedObjectsClientContract,
@@ -64,6 +65,7 @@ export class SimpleSavedObject<T = unknown> {
       references,
       migrationVersion,
       updated_at: updateAt,
+      workspaces,
     }: SavedObjectType<T>
   ) {
     this.id = id;
@@ -73,6 +75,7 @@ export class SimpleSavedObject<T = unknown> {
     this._version = version;
     this.migrationVersion = migrationVersion;
     this.updated_at = updateAt;
+    this.workspaces = workspaces;
     if (error) {
       this.error = error;
     }

src/core/utils/default_nav_groups.ts

@@ -7,6 +7,10 @@ import { i18n } from '@osd/i18n';
 import { ChromeNavGroup, NavGroupType } from '../types';
 
 export const ALL_USE_CASE_ID = 'all';
+export const OBSERVABILITY_USE_CASE_ID = 'observability';
+export const SECURITY_ANALYTICS_USE_CASE_ID = 'security-analytics';
+export const ESSENTIAL_USE_CASE_ID = 'analytics';
+export const SEARCH_USE_CASE_ID = 'search';
 
 const defaultNavGroups = {
   dataAdministration: {
@@ -40,9 +44,10 @@ const defaultNavGroups = {
       defaultMessage: 'This is a use case contains all the features.',
     }),
     order: 3000,
+    icon: 'wsAnalytics',
   },
   observability: {
-    id: 'observability',
+    id: OBSERVABILITY_USE_CASE_ID,
     title: i18n.translate('core.ui.group.observability.title', {
       defaultMessage: 'Observability',
     }),
@@ -51,9 +56,10 @@ const defaultNavGroups = {
         'Gain visibility into system health, performance, and reliability through monitoring and analysis of logs, metrics, and traces.',
     }),
     order: 4000,
+    icon: 'wsObservability',
   },
   'security-analytics': {
-    id: 'security-analytics',
+    id: SECURITY_ANALYTICS_USE_CASE_ID,
     title: i18n.translate('core.ui.group.security.analytics.title', {
       defaultMessage: 'Security Analytics',
     }),
@@ -62,9 +68,10 @@ const defaultNavGroups = {
         'Detect and investigate potential security threats and vulnerabilities across your systems and data.',
     }),
     order: 5000,
+    icon: 'wsSecurityAnalytics',
   },
   essentials: {
-    id: 'analytics',
+    id: ESSENTIAL_USE_CASE_ID,
     title: i18n.translate('core.ui.group.essential.title', {
       defaultMessage: 'Essentials',
     }),
@@ -73,9 +80,10 @@ const defaultNavGroups = {
         'Analyze data to derive insights, identify patterns and trends, and make data-driven decisions.',
     }),
     order: 7000,
+    icon: 'wsEssentials',
   },
   search: {
-    id: 'search',
+    id: SEARCH_USE_CASE_ID,
     title: i18n.translate('core.ui.group.search.title', {
       defaultMessage: 'Search',
     }),
@@ -84,6 +92,7 @@ const defaultNavGroups = {
         "Quickly find and explore relevant information across your organization's data sources.",
     }),
     order: 6000,
+    icon: 'wsSearch',
   },
 } as const;
 

src/core/utils/index.ts

@@ -39,4 +39,11 @@ export {
 export { DEFAULT_APP_CATEGORIES } from './default_app_categories';
 export { WORKSPACE_PATH_PREFIX, WORKSPACE_TYPE } from './constants';
 export { getWorkspaceIdFromUrl, formatUrlWithWorkspaceId, cleanWorkspaceId } from './workspace';
-export { DEFAULT_NAV_GROUPS, ALL_USE_CASE_ID } from './default_nav_groups';
+export {
+  DEFAULT_NAV_GROUPS,
+  ALL_USE_CASE_ID,
+  SEARCH_USE_CASE_ID,
+  ESSENTIAL_USE_CASE_ID,
+  OBSERVABILITY_USE_CASE_ID,
+  SECURITY_ANALYTICS_USE_CASE_ID,
+} from './default_nav_groups';

src/plugins/content_management/public/components/card_container/card_embeddable.test.tsx

@@ -28,3 +28,34 @@ test('CardEmbeddable should render a card with the title', () => {
     Array.from(node.querySelectorAll('*')).find((ele) => ele.textContent?.trim() === 'card title')
   ).toBeFalsy();
 });
+
+test('CardEmbeddable should render a card with the cardProps', () => {
+  const embeddable = new CardEmbeddable({
+    id: 'card-id',
+    title: 'card title',
+    description: '',
+    cardProps: {
+      selectable: {
+        children: 'selectable line',
+        onSelect: () => {},
+      },
+    },
+  });
+
+  const node = document.createElement('div');
+  embeddable.render(node);
+
+  // it should render the card with title specified
+  expect(
+    Array.from(node.querySelectorAll('*')).find(
+      (ele) => ele.textContent?.trim() === 'selectable line'
+    )
+  ).toBeTruthy();
+
+  embeddable.destroy();
+  expect(
+    Array.from(node.querySelectorAll('*')).find(
+      (ele) => ele.textContent?.trim() === 'selectable line'
+    )
+  ).toBeFalsy();
+});

src/plugins/content_management/public/components/card_container/card_embeddable.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { EuiCard } from '@elastic/eui';
+import { EuiCard, EuiCardProps } from '@elastic/eui';
 
 import { Embeddable, EmbeddableInput, IContainer } from '../../../../embeddable/public';
 
@@ -15,6 +15,7 @@ export type CardEmbeddableInput = EmbeddableInput & {
   onClick?: () => void;
   getIcon?: () => React.ReactElement;
   getFooter?: () => React.ReactElement;
+  cardProps?: Omit<EuiCardProps, 'title' | 'description'>;
 };
 
 export class CardEmbeddable extends Embeddable<CardEmbeddableInput> {
@@ -30,18 +31,21 @@ export class CardEmbeddable extends Embeddable<CardEmbeddableInput> {
       ReactDOM.unmountComponentAtNode(this.node);
     }
     this.node = node;
-    ReactDOM.render(
-      <EuiCard
-        textAlign="left"
-        title={this.input.title ?? ''}
-        description={this.input.description}
-        display="plain"
-        onClick={this.input.onClick}
-        icon={this.input?.getIcon?.()}
-        footer={this.input?.getFooter?.()}
-      />,
-      node
-    );
+
+    const cardProps: EuiCardProps = {
+      ...this.input.cardProps,
+      title: this.input.title ?? '',
+      description: this.input.description,
+      onClick: this.input.onClick,
+      icon: this.input?.getIcon?.(),
+    };
+
+    if (!cardProps.layout || cardProps.layout === 'vertical') {
+      cardProps.textAlign = 'left';
+      cardProps.footer = this.input?.getFooter?.();
+    }
+
+    ReactDOM.render(<EuiCard {...cardProps} />, node);
   }
 
   public destroy() {

src/plugins/content_management/public/components/card_container/card_list.tsx

@@ -47,7 +47,12 @@ const CardListInner = ({ embeddable, input, embeddableServices }: Props) => {
     const child = embeddable.getChild(panel.explicitInput.id);
     return (
       <EuiFlexItem key={panel.explicitInput.id}>
-        <embeddableServices.EmbeddablePanel embeddable={child} />
+        <embeddableServices.EmbeddablePanel
+          embeddable={child}
+          hideHeader
+          hasBorder={false}
+          hasShadow={false}
+        />
       </EuiFlexItem>
     );
   });

src/plugins/content_management/public/components/card_container/types.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { EuiCardProps } from '@elastic/eui';
 import { ContainerInput } from '../../../../embeddable/public';
 
 export interface CardExplicitInput {
@@ -11,6 +12,7 @@ export interface CardExplicitInput {
   onClick?: () => void;
   getIcon?: () => React.ReactElement;
   getFooter?: () => React.ReactElement;
+  cardProps?: Omit<EuiCardProps, 'title' | 'description'>;
 }
 
 export type CardContainerInput = ContainerInput<CardExplicitInput> & {

src/plugins/content_management/public/components/section_input.ts

@@ -49,6 +49,7 @@ export const createCardInput = (
           onClick: content.onClick,
           getIcon: content?.getIcon,
           getFooter: content?.getFooter,
+          cardProps: content.cardProps,
         },
       };
     }

src/plugins/content_management/public/components/section_render.tsx

@@ -41,7 +41,12 @@ const DashboardSection = ({ section, embeddable, contents$, savedObjectsClient }
 
   if (section.kind === 'dashboard' && factory && input) {
     // const input = createDashboardSection(section, contents ?? []);
-    return <EmbeddableRenderer factory={factory} input={input} />;
+    return (
+      // to make dashboard section align with others add margin left and right -8px
+      <div style={{ margin: '0 -8px' }}>
+        <EmbeddableRenderer factory={factory} input={input} />
+      </div>
+    );
   }
 
   return null;
@@ -61,18 +66,20 @@ const CardSection = ({ section, embeddable, contents$ }: Props) => {
 
   if (section.kind === 'card' && factory && input) {
     return (
-      <EuiPanel>
-        <EuiTitle size="s">
-          <h2>
-            <EuiButtonIcon
-              iconType={isCardVisible ? 'arrowDown' : 'arrowUp'}
-              onClick={toggleCardVisibility}
-              color="text"
-              aria-label={isCardVisible ? 'Show panel' : 'Hide panel'}
-            />
-            {section.title}
-          </h2>
-        </EuiTitle>
+      <EuiPanel paddingSize="none" hasBorder={false} hasShadow={false} color="transparent">
+        {section.title ? (
+          <EuiTitle size="s">
+            <h2>
+              <EuiButtonIcon
+                iconType={isCardVisible ? 'arrowDown' : 'arrowUp'}
+                onClick={toggleCardVisibility}
+                color="text"
+                aria-label={isCardVisible ? 'Show panel' : 'Hide panel'}
+              />
+              {section.title}
+            </h2>
+          </EuiTitle>
+        ) : null}
         {isCardVisible && (
           <>
             <EuiSpacer size="m" /> <EmbeddableRenderer factory={factory} input={input} />

src/plugins/content_management/public/constants.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  ESSENTIAL_USE_CASE_ID,
+  ALL_USE_CASE_ID,
+  SEARCH_USE_CASE_ID,
+  OBSERVABILITY_USE_CASE_ID,
+  SECURITY_ANALYTICS_USE_CASE_ID,
+} from '../../../core/public';
+
+// central place for all content ids rendered by content management
+
+// page ids
+export const ANALYTICS_ALL_OVERVIEW_PAGE_ID = `${ALL_USE_CASE_ID}_overview`;
+export const ESSENTIAL_OVERVIEW_PAGE_ID = `${ESSENTIAL_USE_CASE_ID}_overview`;
+export const SEARCH_OVERVIEW_PAGE_ID = `${SEARCH_USE_CASE_ID}_overview`;
+export const OBSERVABILITY_OVERVIEW_PAGE_ID = `${OBSERVABILITY_USE_CASE_ID}_overview`;
+export const SECURITY_ANALYTICS_OVERVIEW_PAGE_ID = `${SECURITY_ANALYTICS_USE_CASE_ID}_overview`;
+export const HOME_PAGE_ID = 'osd_homepage';
+
+// section ids
+export enum SECTIONS {
+  GET_STARTED = `get_started`,
+  SERVICE_CARDS = `service_cards`,
+  RECENTLY_VIEWED = `recently_viewed`,
+  DIFFERENT_SEARCH_TYPES = 'different_search_types',
+  CONFIG_EVALUATE_SEARCH = 'config_evaluate_search',
+}
+
+export enum HOME_CONTENT_AREAS {
+  GET_STARTED = `${HOME_PAGE_ID}/${SECTIONS.GET_STARTED}`,
+  SERVICE_CARDS = `${HOME_PAGE_ID}/${SECTIONS.SERVICE_CARDS}`,
+  RECENTLY_VIEWED = `${HOME_PAGE_ID}/${SECTIONS.RECENTLY_VIEWED}`,
+}
+
+export enum ESSENTIAL_OVERVIEW_CONTENT_AREAS {
+  GET_STARTED = `${ESSENTIAL_OVERVIEW_PAGE_ID}/${SECTIONS.GET_STARTED}`,
+  SERVICE_CARDS = `${ESSENTIAL_OVERVIEW_PAGE_ID}/${SECTIONS.SERVICE_CARDS}`,
+  RECENTLY_VIEWED = `${ESSENTIAL_OVERVIEW_PAGE_ID}/${SECTIONS.RECENTLY_VIEWED}`,
+}
+
+export enum ANALYTICS_ALL_OVERVIEW_CONTENT_AREAS {
+  GET_STARTED = `${ANALYTICS_ALL_OVERVIEW_PAGE_ID}/${SECTIONS.GET_STARTED}`,
+  SERVICE_CARDS = `${ANALYTICS_ALL_OVERVIEW_PAGE_ID}/${SECTIONS.SERVICE_CARDS}`,
+  RECENTLY_VIEWED = `${ANALYTICS_ALL_OVERVIEW_PAGE_ID}/${SECTIONS.RECENTLY_VIEWED}`,
+}
+
+export enum SEARCH_OVERVIEW_CONTENT_AREAS {
+  DIFFERENT_SEARCH_TYPES = `${SEARCH_OVERVIEW_PAGE_ID}/${SECTIONS.DIFFERENT_SEARCH_TYPES}`,
+  CONFIG_EVALUATE_SEARCH = `${SEARCH_OVERVIEW_PAGE_ID}/${SECTIONS.CONFIG_EVALUATE_SEARCH}`,
+  GET_STARTED = `${SEARCH_OVERVIEW_PAGE_ID}/${SECTIONS.GET_STARTED}`,
+}