mirror of
https://github.com/elastic/kibana.git
synced 2025-04-18 23:21:39 -04:00
705df212b8
- Closes https://github.com/elastic/kibana/issues/210500 - Closes https://github.com/elastic/kibana/issues/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" />  ### 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>
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
/*
|
|
* 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 { AppMountParameters, CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
|
|
import {
|
|
AppPluginSetupDependencies,
|
|
AppPluginStartDependencies,
|
|
UnifiedTabsExamplesPluginSetup,
|
|
UnifiedTabsExamplesPluginStart,
|
|
} from './types';
|
|
import { PLUGIN_ID, PLUGIN_NAME } from '../common';
|
|
import image from './unified_tabs.png';
|
|
|
|
export class UnifiedTabsExamplesPlugin
|
|
implements
|
|
Plugin<
|
|
UnifiedTabsExamplesPluginSetup,
|
|
UnifiedTabsExamplesPluginStart,
|
|
AppPluginSetupDependencies,
|
|
AppPluginStartDependencies
|
|
>
|
|
{
|
|
public setup(
|
|
core: CoreSetup<AppPluginStartDependencies>,
|
|
{ developerExamples }: AppPluginSetupDependencies
|
|
): UnifiedTabsExamplesPluginSetup {
|
|
// Register an application into the side navigation menu
|
|
core.application.register({
|
|
id: PLUGIN_ID,
|
|
title: PLUGIN_NAME,
|
|
visibleIn: [],
|
|
mount: async (params: AppMountParameters) => {
|
|
// Load application bundle
|
|
const { renderApp } = await import('./application');
|
|
// Get start services as specified in kibana.json
|
|
const [coreStart, depsStart] = await core.getStartServices();
|
|
// Render the application
|
|
return renderApp(coreStart, depsStart, params);
|
|
},
|
|
});
|
|
|
|
developerExamples.register({
|
|
appId: PLUGIN_ID,
|
|
title: PLUGIN_NAME,
|
|
description: `Examples of unified tabs functionality.`,
|
|
image,
|
|
links: [
|
|
{
|
|
label: 'README',
|
|
href: 'https://github.com/elastic/kibana/tree/main/src/platform/packages/shared/kbn-unified-tabs/README.md',
|
|
iconType: 'logoGithub',
|
|
target: '_blank',
|
|
size: 's',
|
|
},
|
|
],
|
|
});
|
|
|
|
return {};
|
|
}
|
|
|
|
public start(core: CoreStart): UnifiedTabsExamplesPluginStart {
|
|
return {};
|
|
}
|
|
|
|
public stop() {}
|
|
}
|