[Discover][Tabs] New tabs package and initial implementation of compo…

…nents (#210674) - Closes #210500 - Closes #210502 ## Summary This PR introduces a new package `@kbn/unified-tabs` which includes an initial implementation for tabs UI/UX which we are planning to add to Discover. - [x] New package - [x] Storybook support - [x] Initial styles and interactions - [x] New example plugin for testing together with UnifiedSearch bar - [x] Minimal tests ### In the new Storybook Start Storybook with `NODE_OPTIONS="--openssl-legacy-provider" node scripts/storybook unified_tabs` and navigate to `http://localhost:9001`. <img width="1024" alt="Screenshot 2025-02-12 at 13 35 46" src="https://github.com/user-attachments/assets/0723b0c4-c3f7-44f8-af8d-f68d7a7b6ea8" /> ### In the new Unified Tabs example plugin Start Kibana with `yarn start --run-examples`. Then navigate to the Unified Tabs example plugin `http://localhost:5601/app/unifiedTabsExamples`. <img width="1221" alt="Screenshot 2025-02-12 at 16 11 55" src="https://github.com/user-attachments/assets/2edff817-0aae-424c-978c-c4c67450c9eb" /> <img width="1219" alt="Screenshot 2025-02-12 at 16 13 57" src="https://github.com/user-attachments/assets/2e6e6b0b-88e9-4689-a175-9612e8507535" /> ![Feb-12-2025 16-13-17](https://github.com/user-attachments/assets/a1d511da-d554-432c-bea9-cbe8349f9772) ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Davis McPhee <davismcphee@hotmail.com>
elastic · Feb 21, 2025 · 705df21 · 705df21
1 parent 4783925
commit 705df21
Show file tree

Hide file tree

Showing 39 changed files with 1,423 additions and 56 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -39,6 +39,7 @@ examples/ui_action_examples @elastic/appex-sharedux
 examples/ui_actions_explorer @elastic/appex-sharedux
 examples/unified_doc_viewer @elastic/kibana-core
 examples/unified_field_list_examples @elastic/kibana-data-discovery
+examples/unified_tabs_examples @elastic/kibana-data-discovery
 examples/user_profile_examples @elastic/kibana-security
 examples/v8_profiler_examples @elastic/response-ops
 packages/kbn-ambient-common-types @elastic/kibana-operations
@@ -539,6 +540,7 @@ src/platform/packages/shared/kbn-ui-theme @elastic/kibana-operations
 src/platform/packages/shared/kbn-unified-data-table @elastic/kibana-data-discovery @elastic/security-threat-hunting-investigations
 src/platform/packages/shared/kbn-unified-doc-viewer @elastic/kibana-data-discovery
 src/platform/packages/shared/kbn-unified-field-list @elastic/kibana-data-discovery
+src/platform/packages/shared/kbn-unified-tabs @elastic/kibana-data-discovery
 src/platform/packages/shared/kbn-unsaved-changes-prompt @elastic/kibana-management
 src/platform/packages/shared/kbn-use-tracked-promise @elastic/obs-ux-logs-team
 src/platform/packages/shared/kbn-user-profile-components @elastic/kibana-security

diff --git a/.i18nrc.json b/.i18nrc.json
@@ -163,6 +163,7 @@
     "unifiedFieldList": "src/platform/packages/shared/kbn-unified-field-list",
     "unifiedHistogram": "src/platform/plugins/shared/unified_histogram",
     "unifiedDataTable": "src/platform/packages/shared/kbn-unified-data-table",
+    "unifiedTabs": "src/platform/packages/shared/kbn-unified-tabs",
     "dataGridInTableSearch": "src/platform/packages/shared/kbn-data-grid-in-table-search",
     "unsavedChangesBadge": "src/platform/packages/private/kbn-unsaved-changes-badge",
     "unsavedChangesPrompt": "src/platform/packages/shared/kbn-unsaved-changes-prompt",

diff --git a/examples/developer_examples/public/app.tsx b/examples/developer_examples/public/app.tsx
@@ -61,64 +61,66 @@ function DeveloperExamples({ startServices, examples, navigateToApp, getUrlForAp
 
   return (
     <KibanaRenderContextProvider {...startServices}>
-      <EuiPageTemplate.Header>
-        <EuiFlexGroup justifyContent={'spaceBetween'}>
-          <EuiFlexItem>
-            <EuiPageHeader pageTitle={'Developer examples'} />
-            <EuiText>
-              The following examples showcase services and APIs that are available to developers.
-            </EuiText>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFieldSearch
-              fullWidth
-              placeholder="Search"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              isClearable={true}
-              aria-label="Search developer examples"
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPageTemplate.Header>
-      <EuiPageTemplate.Section>
-        <EuiFlexGroup wrap>
-          {filteredExamples.map((def) => (
-            <EuiFlexItem style={{ minWidth: 300, maxWidth: 500 }} key={def.appId}>
-              <EuiCard
-                description={
-                  <EuiHighlight search={search} highlightAll={true}>
-                    {def.description}
-                  </EuiHighlight>
-                }
-                title={
-                  <React.Fragment>
-                    <EuiLink
-                      onClick={() => {
-                        navigateToApp(def.appId);
-                      }}
-                    >
-                      <EuiHighlight search={search} highlightAll={true}>
-                        {def.title}
-                      </EuiHighlight>
-                    </EuiLink>
-                    <EuiButtonIcon
-                      iconType="popout"
-                      onClick={() =>
-                        window.open(getUrlForApp(def.appId), '_blank', 'noopener, noreferrer')
-                      }
-                    >
-                      Open in new tab
-                    </EuiButtonIcon>
-                  </React.Fragment>
-                }
-                image={def.image}
-                footer={def.links ? <EuiListGroup size={'s'} listItems={def.links} /> : undefined}
+      <EuiPageTemplate offset={0}>
+        <EuiPageTemplate.Header>
+          <EuiFlexGroup justifyContent={'spaceBetween'}>
+            <EuiFlexItem>
+              <EuiPageHeader pageTitle={'Developer examples'} />
+              <EuiText>
+                The following examples showcase services and APIs that are available to developers.
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiFieldSearch
+                fullWidth
+                placeholder="Search"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                isClearable={true}
+                aria-label="Search developer examples"
               />
             </EuiFlexItem>
-          ))}
-        </EuiFlexGroup>
-      </EuiPageTemplate.Section>
+          </EuiFlexGroup>
+        </EuiPageTemplate.Header>
+        <EuiPageTemplate.Section>
+          <EuiFlexGroup wrap>
+            {filteredExamples.map((def) => (
+              <EuiFlexItem style={{ minWidth: 300, maxWidth: 500 }} key={def.appId}>
+                <EuiCard
+                  description={
+                    <EuiHighlight search={search} highlightAll={true}>
+                      {def.description}
+                    </EuiHighlight>
+                  }
+                  title={
+                    <React.Fragment>
+                      <EuiLink
+                        onClick={() => {
+                          navigateToApp(def.appId);
+                        }}
+                      >
+                        <EuiHighlight search={search} highlightAll={true}>
+                          {def.title}
+                        </EuiHighlight>
+                      </EuiLink>
+                      <EuiButtonIcon
+                        iconType="popout"
+                        onClick={() =>
+                          window.open(getUrlForApp(def.appId), '_blank', 'noopener, noreferrer')
+                        }
+                      >
+                        Open in new tab
+                      </EuiButtonIcon>
+                    </React.Fragment>
+                  }
+                  image={def.image}
+                  footer={def.links ? <EuiListGroup size={'s'} listItems={def.links} /> : undefined}
+                />
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGroup>
+        </EuiPageTemplate.Section>
+      </EuiPageTemplate>
     </KibanaRenderContextProvider>
   );
 }

diff --git a/examples/unified_tabs_examples/README.md b/examples/unified_tabs_examples/README.md
@@ -0,0 +1,9 @@
+# unified_tabs_examples
+
+Examples of unified tabs components.
+
+To run this example, ensure you have data to search against (for example, the sample datasets) and start kibana with the `--run-examples` flag.
+
+```bash
+yarn start --run-examples
+```
diff --git a/examples/unified_tabs_examples/common/index.ts b/examples/unified_tabs_examples/common/index.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export const PLUGIN_ID = 'unifiedTabsExamples';
+export const PLUGIN_NAME = 'Unified Tabs Examples';
diff --git a/examples/unified_tabs_examples/kibana.jsonc b/examples/unified_tabs_examples/kibana.jsonc
@@ -0,0 +1,24 @@
+{
+  "type": "plugin",
+  "id": "@kbn/unified-tabs-examples-plugin",
+  "owner": "@elastic/kibana-data-discovery",
+  "description": "Examples of using unified tabs.",
+  "plugin": {
+    "id": "unifiedTabsExamples",
+    "server": false,
+    "browser": true,
+    "requiredPlugins": [
+      "navigation",
+      "developerExamples",
+      "inspector",
+      "kibanaUtils",
+      "unifiedSearch",
+      "data",
+      "dataViews",
+      "dataViewFieldEditor",
+      "charts",
+      "fieldFormats",
+      "uiActions"
+    ]
+  }
+}
diff --git a/examples/unified_tabs_examples/public/application.tsx b/examples/unified_tabs_examples/public/application.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { I18nProvider } from '@kbn/i18n-react';
+import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
+import type { AppMountParameters, CoreStart } from '@kbn/core/public';
+import { AppPluginStartDependencies } from './types';
+import { UnifiedTabsExampleApp } from './example_app';
+
+export const renderApp = (
+  core: CoreStart,
+  deps: AppPluginStartDependencies,
+  { element, setHeaderActionMenu }: AppMountParameters
+) => {
+  ReactDOM.render(
+    <I18nProvider>
+      <KibanaThemeProvider {...core}>
+        <UnifiedTabsExampleApp
+          services={{
+            core,
+            ...deps,
+          }}
+          setHeaderActionMenu={setHeaderActionMenu}
+        />
+      </KibanaThemeProvider>
+    </I18nProvider>,
+    element
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};