From e3da05c1965c414fccfb5c309ace6175c10a7755 Mon Sep 17 00:00:00 2001 From: Janki Salvi <117571355+js-jankisalvi@users.noreply.github.com> Date: Fri, 2 Jun 2023 10:44:28 +0200 Subject: [PATCH 01/18] [Cases] Fix severity loading spinner visible while updating tags or assignees bug (#158838) ## Summary This PR fixes https://github.com/elastic/kibana/issues/157364 https://github.com/elastic/kibana/assets/117571355/10ea3519-92cd-4b66-9d18-db38ab98f830 --- .../components/case_view_activity.test.tsx | 33 ++++++++++++++++++- .../components/case_view_activity.tsx | 2 +- 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.test.tsx b/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.test.tsx index 850c3b3060a9f..791782001a5f9 100644 --- a/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.test.tsx +++ b/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.test.tsx @@ -36,6 +36,7 @@ import { defaultInfiniteUseFindCaseUserActions, defaultUseFindCaseUserActions } import { ActionTypes } from '../../../../common/api'; import { useGetCaseUserActionsStats } from '../../../containers/use_get_case_user_actions_stats'; import { useInfiniteFindCaseUserActions } from '../../../containers/use_infinite_find_case_user_actions'; +import { useOnUpdateField } from '../use_on_update_field'; jest.mock('../../../containers/use_infinite_find_case_user_actions'); jest.mock('../../../containers/use_find_case_user_actions'); @@ -51,6 +52,7 @@ jest.mock('../../../containers/use_get_tags'); jest.mock('../../../containers/user_profiles/use_bulk_get_user_profiles'); jest.mock('../../../containers/use_get_case_connectors'); jest.mock('../../../containers/use_get_case_users'); +jest.mock('../use_on_update_field'); (useGetTags as jest.Mock).mockReturnValue({ data: ['coke', 'pepsi'], refetch: jest.fn() }); @@ -118,11 +120,12 @@ const useGetConnectorsMock = useGetSupportedActionConnectors as jest.Mock; const usePostPushToServiceMock = usePostPushToService as jest.Mock; const useGetCaseConnectorsMock = useGetCaseConnectors as jest.Mock; const useGetCaseUsersMock = useGetCaseUsers as jest.Mock; +const useOnUpdateFieldMock = useOnUpdateField as jest.Mock; // FLAKY: https://github.com/elastic/kibana/issues/151979 // FLAKY: https://github.com/elastic/kibana/issues/151980 // FLAKY: https://github.com/elastic/kibana/issues/151981 -describe.skip('Case View Page activity tab', () => { +describe('Case View Page activity tab', () => { const caseConnectors = getCaseConnectorsMockResponse(); beforeAll(() => { @@ -138,6 +141,10 @@ describe.skip('Case View Page activity tab', () => { isLoading: false, data: caseConnectors, }); + useOnUpdateFieldMock.mockReturnValue({ + isLoading: false, + useOnUpdateField: jest.fn, + }); }); let appMockRender: AppMockRenderer; @@ -228,6 +235,30 @@ describe.skip('Case View Page activity tab', () => { expect(result.queryByTestId('user-actions-list')).not.toBeInTheDocument(); }); + it('should show a loading when updating severity ', async () => { + useOnUpdateFieldMock.mockReturnValue({ isLoading: true, loadingKey: 'severity' }); + + const result = appMockRender.render(); + + expect( + result + .getByTestId('case-severity-selection') + .classList.contains('euiSuperSelectControl-isLoading') + ).toBeTruthy(); + }); + + it('should not show a loading for severity when updating tags', async () => { + useOnUpdateFieldMock.mockReturnValue({ isLoading: true, loadingKey: 'tags' }); + + const result = appMockRender.render(); + + expect( + result + .getByTestId('case-severity-selection') + .classList.contains('euiSuperSelectControl-isLoading') + ).not.toBeTruthy(); + }); + it('should not render the assignees on basic license', () => { appMockRender = createAppMockRenderer({ license: basicLicense }); diff --git a/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.tsx b/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.tsx index 11ef882ec5a42..d4802d4090221 100644 --- a/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.tsx +++ b/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.tsx @@ -271,7 +271,7 @@ export const CaseViewActivity = ({ ) : null} From e3c3ba8aeb835cc6e42a165e0a9dce2462d679cc Mon Sep 17 00:00:00 2001 From: Peter Pisljar Date: Fri, 2 Jun 2023 11:42:41 +0200 Subject: [PATCH 02/18] bwca for unified search suggestions route (#158796) ## Summary Makes unified search field suggestion route bwca resolves https://github.com/elastic/kibana/issues/157085 - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .../providers/value_suggestion_provider.ts | 3 +- .../autocomplete/value_suggestions_route.ts | 99 ++++++++++--------- .../apis/suggestions/suggestions.js | 37 ++++--- test/tsconfig.json | 3 +- .../tests/data_view/static.spec.ts | 4 +- 5 files changed, 85 insertions(+), 61 deletions(-) diff --git a/src/plugins/unified_search/public/autocomplete/providers/value_suggestion_provider.ts b/src/plugins/unified_search/public/autocomplete/providers/value_suggestion_provider.ts index 3b64ea759316b..7ce405d124533 100644 --- a/src/plugins/unified_search/public/autocomplete/providers/value_suggestion_provider.ts +++ b/src/plugins/unified_search/public/autocomplete/providers/value_suggestion_provider.ts @@ -65,7 +65,7 @@ export const setupValueSuggestionProvider = ( ) => { usageCollector?.trackRequest(); return core.http - .fetch(`/api/kibana/suggestions/values/${index}`, { + .fetch(`/internal/kibana/suggestions/values/${index}`, { method: 'POST', body: JSON.stringify({ query, @@ -75,6 +75,7 @@ export const setupValueSuggestionProvider = ( method, }), signal, + version: '1', }) .then((r) => { usageCollector?.trackResult(); diff --git a/src/plugins/unified_search/server/autocomplete/value_suggestions_route.ts b/src/plugins/unified_search/server/autocomplete/value_suggestions_route.ts index 74a7e5202a541..00a5d3eba3a13 100644 --- a/src/plugins/unified_search/server/autocomplete/value_suggestions_route.ts +++ b/src/plugins/unified_search/server/autocomplete/value_suggestions_route.ts @@ -16,55 +16,62 @@ import { termsEnumSuggestions } from './terms_enum'; import { termsAggSuggestions } from './terms_agg'; export function registerValueSuggestionsRoute(router: IRouter, config$: Observable) { - router.post( - { - path: '/api/kibana/suggestions/values/{index}', - validate: { - params: schema.object( - { - index: schema.string(), - }, - { unknowns: 'allow' } - ), - body: schema.object( - { - field: schema.string(), - query: schema.string(), - filters: schema.maybe(schema.any()), - fieldMeta: schema.maybe(schema.any()), - method: schema.maybe( - schema.oneOf([schema.literal('terms_agg'), schema.literal('terms_enum')]) + router.versioned + .post({ + path: '/internal/kibana/suggestions/values/{index}', + access: 'internal', + }) + .addVersion( + { + version: '1', + validate: { + request: { + params: schema.object( + { + index: schema.string(), + }, + { unknowns: 'allow' } + ), + body: schema.object( + { + field: schema.string(), + query: schema.string(), + filters: schema.maybe(schema.any()), + fieldMeta: schema.maybe(schema.any()), + method: schema.maybe( + schema.oneOf([schema.literal('terms_agg'), schema.literal('terms_enum')]) + ), + }, + { unknowns: 'allow' } ), }, - { unknowns: 'allow' } - ), + }, }, - }, - async (context, request, response) => { - const config = await firstValueFrom(config$); - const { field: fieldName, query, filters, fieldMeta, method } = request.body; - const { index } = request.params; - const abortSignal = getRequestAbortedSignal(request.events.aborted$); - const { savedObjects, elasticsearch } = await context.core; + async (context, request, response) => { + const config = await firstValueFrom(config$); + const { field: fieldName, query, filters, fieldMeta, method } = request.body; + const { index } = request.params; + const abortSignal = getRequestAbortedSignal(request.events.aborted$); + const { savedObjects, elasticsearch } = await context.core; - try { - const fn = method === 'terms_agg' ? termsAggSuggestions : termsEnumSuggestions; - const body = await fn( - config, - savedObjects.client, - elasticsearch.client.asCurrentUser, - index, - fieldName, - query, - filters, - fieldMeta, - abortSignal - ); - return response.ok({ body }); - } catch (e) { - const kbnErr = getKbnServerError(e); - return reportServerError(response, kbnErr); + try { + const fn = method === 'terms_agg' ? termsAggSuggestions : termsEnumSuggestions; + const body = await fn( + config, + savedObjects.client, + elasticsearch.client.asCurrentUser, + index, + fieldName, + query, + filters, + fieldMeta, + abortSignal + ); + return response.ok({ body }); + } catch (e) { + const kbnErr = getKbnServerError(e); + return reportServerError(response, kbnErr); + } } - } - ); + ); } diff --git a/test/api_integration/apis/suggestions/suggestions.js b/test/api_integration/apis/suggestions/suggestions.js index ea8da57eda065..928fd995a4b5d 100644 --- a/test/api_integration/apis/suggestions/suggestions.js +++ b/test/api_integration/apis/suggestions/suggestions.js @@ -6,6 +6,7 @@ * Side Public License, v 1. */ import expect from '@kbn/expect'; +import { ELASTIC_HTTP_VERSION_HEADER } from '@kbn/core-http-common'; export default function ({ getService }) { const esArchiver = getService('esArchiver'); @@ -32,7 +33,8 @@ export default function ({ getService }) { }); it('should return 200 without a query', () => supertest - .post('/api/kibana/suggestions/values/basic_index') + .post('/internal/kibana/suggestions/values/basic_index') + .set(ELASTIC_HTTP_VERSION_HEADER, '1') .send({ field: 'baz.keyword', query: '', @@ -45,7 +47,8 @@ export default function ({ getService }) { it('should return 200 without a query and with method set to terms_agg', () => supertest - .post('/api/kibana/suggestions/values/basic_index') + .post('/internal/kibana/suggestions/values/basic_index') + .set(ELASTIC_HTTP_VERSION_HEADER, '1') .send({ field: 'baz.keyword', method: 'terms_agg', @@ -59,7 +62,8 @@ export default function ({ getService }) { it('should return 200 without a query and with method set to terms_enum', () => supertest - .post('/api/kibana/suggestions/values/basic_index') + .post('/internal/kibana/suggestions/values/basic_index') + .set(ELASTIC_HTTP_VERSION_HEADER, '1') .send({ field: 'baz.keyword', method: 'terms_enum', @@ -73,7 +77,8 @@ export default function ({ getService }) { it('should return 200 with special characters', () => supertest - .post('/api/kibana/suggestions/values/basic_index') + .post('/internal/kibana/suggestions/values/basic_index') + .set(ELASTIC_HTTP_VERSION_HEADER, '1') .send({ field: 'baz.keyword', query: ' supertest - .post('/api/kibana/suggestions/values/basic_index') + .post('/internal/kibana/suggestions/values/basic_index') + .set(ELASTIC_HTTP_VERSION_HEADER, '1') .send({ field: 'nestedField.child', query: 'nes', @@ -94,7 +100,8 @@ export default function ({ getService }) { it('should return 404 if index is not found', () => supertest - .post('/api/kibana/suggestions/values/not_found') + .post('/internal/kibana/suggestions/values/not_found') + .set(ELASTIC_HTTP_VERSION_HEADER, '1') .send({ field: 'baz.keyword', query: '1', @@ -103,7 +110,8 @@ export default function ({ getService }) { it('should return 400 without a query', () => supertest - .post('/api/kibana/suggestions/values/basic_index') + .post('/internal/kibana/suggestions/values/basic_index') + .set(ELASTIC_HTTP_VERSION_HEADER, '1') .send({ field: 'baz.keyword', }) @@ -111,7 +119,8 @@ export default function ({ getService }) { it('should return 400 with a bad method', () => supertest - .post('/api/kibana/suggestions/values/basic_index') + .post('/internal/kibana/suggestions/values/basic_index') + .set(ELASTIC_HTTP_VERSION_HEADER, '1') .send({ field: 'baz.keyword', query: '', @@ -138,7 +147,8 @@ export default function ({ getService }) { it('filter is applied on a document level with terms_agg', () => supertest - .post('/api/kibana/suggestions/values/logstash-*') + .post('/internal/kibana/suggestions/values/logstash-*') + .set(ELASTIC_HTTP_VERSION_HEADER, '1') .send({ field: 'extension.raw', query: '', @@ -163,7 +173,8 @@ export default function ({ getService }) { it('filter returns all results because it was applied on an index level with terms_enum', () => supertest - .post('/api/kibana/suggestions/values/logstash-*') + .post('/internal/kibana/suggestions/values/logstash-*') + .set(ELASTIC_HTTP_VERSION_HEADER, '1') .send({ field: 'extension.raw', query: '', @@ -188,7 +199,8 @@ export default function ({ getService }) { it('filter is applied on an index level with terms_enum - find in range', () => supertest - .post('/api/kibana/suggestions/values/logstash-*') + .post('/internal/kibana/suggestions/values/logstash-*') + .set(ELASTIC_HTTP_VERSION_HEADER, '1') .send({ field: 'request.raw', query: '/uploads/anatoly-art', @@ -212,7 +224,8 @@ export default function ({ getService }) { it('filter is applied on an index level with terms_enum - DONT find in range', () => { supertest - .post('/api/kibana/suggestions/values/logstash-*') + .post('/internal/kibana/suggestions/values/logstash-*') + .set(ELASTIC_HTTP_VERSION_HEADER, '1') .send({ field: 'request.raw', query: '/uploads/anatoly-art', diff --git a/test/tsconfig.json b/test/tsconfig.json index d3454cc99745a..165093dce8572 100644 --- a/test/tsconfig.json +++ b/test/tsconfig.json @@ -67,6 +67,7 @@ "@kbn/dev-proc-runner", "@kbn/enterprise-search-plugin", "@kbn/core-saved-objects-server", - "@kbn/discover-plugin" + "@kbn/discover-plugin", + "@kbn/core-http-common" ] } diff --git a/x-pack/test/apm_api_integration/tests/data_view/static.spec.ts b/x-pack/test/apm_api_integration/tests/data_view/static.spec.ts index 23eb05acf315e..a49e698c86c65 100644 --- a/x-pack/test/apm_api_integration/tests/data_view/static.spec.ts +++ b/x-pack/test/apm_api_integration/tests/data_view/static.spec.ts @@ -10,6 +10,7 @@ import type { ApmSynthtraceEsClient } from '@kbn/apm-synthtrace'; import expect from '@kbn/expect'; import { APM_STATIC_DATA_VIEW_ID } from '@kbn/apm-plugin/common/data_view_constants'; import { DataView } from '@kbn/data-views-plugin/common'; +import { ELASTIC_HTTP_VERSION_HEADER } from '@kbn/core-http-common'; import request from 'superagent'; import { FtrProviderContext } from '../../common/ftr_provider_context'; import { SupertestReturnType, ApmApiError } from '../../common/apm_api_supertest'; @@ -46,8 +47,9 @@ export default function ApiTest({ getService }: FtrProviderContext) { function getDataViewSuggestions(field: string) { return supertest - .post(`/api/kibana/suggestions/values/${dataViewPattern}`) + .post(`/internal/kibana/suggestions/values/${dataViewPattern}`) .set('kbn-xsrf', 'foo') + .set(ELASTIC_HTTP_VERSION_HEADER, '1') .send({ query: '', field, method: 'terms_agg' }); } From 1ba8be4b8a247665986bb894632fcae07dee0e1d Mon Sep 17 00:00:00 2001 From: Pierre Gayvallet Date: Fri, 2 Jun 2023 06:35:48 -0400 Subject: [PATCH 03/18] V2 migration algorithm: add tests for model versions (#158697) ## Summary Add integration tests of scenarios using the v2 migration algorithm with SO types that are using the model version API --- .../validate_migration.test.ts | 11 +- .../document_migrator/validate_migrations.ts | 68 ++--- .../group4/jest.integration.config.js | 19 ++ .../v2_with_mv_same_stack_version.test.ts | 184 ++++++++++++ .../v2_with_mv_stack_version_bump.test.ts | 278 ++++++++++++++++++ 5 files changed, 526 insertions(+), 34 deletions(-) create mode 100644 src/core/server/integration_tests/saved_objects/migrations/group4/jest.integration.config.js create mode 100644 src/core/server/integration_tests/saved_objects/migrations/group4/v2_with_mv_same_stack_version.test.ts create mode 100644 src/core/server/integration_tests/saved_objects/migrations/group4/v2_with_mv_stack_version_bump.test.ts diff --git a/packages/core/saved-objects/core-saved-objects-migration-server-internal/src/document_migrator/validate_migration.test.ts b/packages/core/saved-objects/core-saved-objects-migration-server-internal/src/document_migrator/validate_migration.test.ts index 8fbaf06b56f80..f2a43545319a0 100644 --- a/packages/core/saved-objects/core-saved-objects-migration-server-internal/src/document_migrator/validate_migration.test.ts +++ b/packages/core/saved-objects/core-saved-objects-migration-server-internal/src/document_migrator/validate_migration.test.ts @@ -187,7 +187,7 @@ describe('validateTypeMigrations', () => { }); expect(() => validate({ type, kibanaVersion: '3.2.3' })).toThrowErrorMatchingInlineSnapshot( - `"Type foo: Uusing modelVersions requires to specify switchToModelVersionAt"` + `"Type foo: Using modelVersions requires to specify switchToModelVersionAt"` ); }); @@ -234,6 +234,15 @@ describe('validateTypeMigrations', () => { `"Type foo: gaps between model versions aren't allowed (missing versions: 2,4,5)"` ); }); + + it('does not throw passing an empty model version map', () => { + const type = createType({ + name: 'foo', + modelVersions: {}, + }); + + expect(() => validate({ type, kibanaVersion: '3.2.3' })).not.toThrow(); + }); }); describe('modelVersions mapping additions', () => { diff --git a/packages/core/saved-objects/core-saved-objects-migration-server-internal/src/document_migrator/validate_migrations.ts b/packages/core/saved-objects/core-saved-objects-migration-server-internal/src/document_migrator/validate_migrations.ts index 42ee0ad6ae8e1..be3ff2e0e325b 100644 --- a/packages/core/saved-objects/core-saved-objects-migration-server-internal/src/document_migrator/validate_migrations.ts +++ b/packages/core/saved-objects/core-saved-objects-migration-server-internal/src/document_migrator/validate_migrations.ts @@ -73,45 +73,47 @@ export function validateTypeMigrations({ const modelVersionMap = typeof type.modelVersions === 'function' ? type.modelVersions() : type.modelVersions ?? {}; - if (Object.keys(modelVersionMap).length > 0 && !type.switchToModelVersionAt) { - throw new Error( - `Type ${type.name}: Uusing modelVersions requires to specify switchToModelVersionAt` - ); - } + if (Object.keys(modelVersionMap).length > 0) { + if (!type.switchToModelVersionAt) { + throw new Error( + `Type ${type.name}: Using modelVersions requires to specify switchToModelVersionAt` + ); + } - Object.entries(modelVersionMap).forEach(([version, definition]) => { - assertValidModelVersion(version); - }); + Object.entries(modelVersionMap).forEach(([version, definition]) => { + assertValidModelVersion(version); + }); - const { min: minVersion, max: maxVersion } = Object.keys(modelVersionMap).reduce( - (minMax, rawVersion) => { - const version = Number.parseInt(rawVersion, 10); - minMax.min = Math.min(minMax.min, version); - minMax.max = Math.max(minMax.max, version); - return minMax; - }, - { min: Infinity, max: -Infinity } - ); + const { min: minVersion, max: maxVersion } = Object.keys(modelVersionMap).reduce( + (minMax, rawVersion) => { + const version = Number.parseInt(rawVersion, 10); + minMax.min = Math.min(minMax.min, version); + minMax.max = Math.max(minMax.max, version); + return minMax; + }, + { min: Infinity, max: -Infinity } + ); - if (minVersion > 1) { - throw new Error(`Type ${type.name}: model versioning must start with version 1`); - } + if (minVersion > 1) { + throw new Error(`Type ${type.name}: model versioning must start with version 1`); + } - validateAddedMappings(type.name, type.mappings, modelVersionMap); + validateAddedMappings(type.name, type.mappings, modelVersionMap); - const missingVersions = getMissingVersions( - minVersion, - maxVersion, - Object.keys(modelVersionMap).map((v) => Number.parseInt(v, 10)) - ); - if (missingVersions.length) { - throw new Error( - `Type ${ - type.name - }: gaps between model versions aren't allowed (missing versions: ${missingVersions.join( - ',' - )})` + const missingVersions = getMissingVersions( + minVersion, + maxVersion, + Object.keys(modelVersionMap).map((v) => Number.parseInt(v, 10)) ); + if (missingVersions.length) { + throw new Error( + `Type ${ + type.name + }: gaps between model versions aren't allowed (missing versions: ${missingVersions.join( + ',' + )})` + ); + } } } diff --git a/src/core/server/integration_tests/saved_objects/migrations/group4/jest.integration.config.js b/src/core/server/integration_tests/saved_objects/migrations/group4/jest.integration.config.js new file mode 100644 index 0000000000000..9b2c7be87ac8e --- /dev/null +++ b/src/core/server/integration_tests/saved_objects/migrations/group4/jest.integration.config.js @@ -0,0 +1,19 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +module.exports = { + // TODO replace the line below with + // preset: '@kbn/test/jest_integration_node + // to do so, we must fix all integration tests first + // see https://github.com/elastic/kibana/pull/130255/ + preset: '@kbn/test/jest_integration', + rootDir: '../../../../../../..', + roots: ['/src/core/server/integration_tests/saved_objects/migrations/group4'], + // must override to match all test given there is no `integration_tests` subfolder + testMatch: ['**/*.test.{js,mjs,ts,tsx}'], +}; diff --git a/src/core/server/integration_tests/saved_objects/migrations/group4/v2_with_mv_same_stack_version.test.ts b/src/core/server/integration_tests/saved_objects/migrations/group4/v2_with_mv_same_stack_version.test.ts new file mode 100644 index 0000000000000..c20a9d1aa6f75 --- /dev/null +++ b/src/core/server/integration_tests/saved_objects/migrations/group4/v2_with_mv_same_stack_version.test.ts @@ -0,0 +1,184 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import Path from 'path'; +import fs from 'fs/promises'; +import { range, sortBy } from 'lodash'; +import { type TestElasticsearchUtils } from '@kbn/core-test-helpers-kbn-server'; +import { SavedObjectsBulkCreateObject } from '@kbn/core-saved-objects-api-server'; +import { modelVersionToVirtualVersion } from '@kbn/core-saved-objects-base-server-internal'; +import '../jest_matchers'; +import { getKibanaMigratorTestKit, startElasticsearch } from '../kibana_migrator_test_kit'; +import { delay, createType, parseLogFile } from '../test_utils'; +import { getBaseMigratorParams } from '../fixtures/zdt_base.fixtures'; + +const logFilePath = Path.join(__dirname, 'v2_with_mv_same_stack_version.test.log'); + +const NB_DOCS_PER_TYPE = 25; + +describe('V2 algorithm - using model versions - upgrade without stack version increase', () => { + let esServer: TestElasticsearchUtils['es']; + + beforeAll(async () => { + await fs.unlink(logFilePath).catch(() => {}); + esServer = await startElasticsearch(); + }); + + afterAll(async () => { + await esServer?.stop(); + await delay(10); + }); + + const getTestModelVersionType = ({ beforeUpgrade }: { beforeUpgrade: boolean }) => { + const type = createType({ + name: 'test_mv', + namespaceType: 'single', + migrations: {}, + switchToModelVersionAt: '8.8.0', + modelVersions: { + 1: { + changes: [], + }, + }, + mappings: { + properties: { + field1: { type: 'text' }, + field2: { type: 'text' }, + }, + }, + }); + + if (!beforeUpgrade) { + Object.assign>(type, { + modelVersions: { + ...type.modelVersions, + 2: { + changes: [ + { + type: 'mappings_addition', + addedMappings: { + field3: { type: 'text' }, + }, + }, + { + type: 'data_backfill', + transform: (document) => { + document.attributes.field3 = 'test_mv-backfilled'; + return { document }; + }, + }, + ], + }, + }, + mappings: { + ...type.mappings, + properties: { + ...type.mappings.properties, + field3: { type: 'text' }, + }, + }, + }); + } + + return type; + }; + + const createBaseline = async () => { + const { runMigrations, savedObjectsRepository } = await getKibanaMigratorTestKit({ + ...getBaseMigratorParams({ + migrationAlgorithm: 'v2', + kibanaVersion: '8.8.0', + }), + types: [getTestModelVersionType({ beforeUpgrade: true })], + }); + await runMigrations(); + + const mvObjs = range(NB_DOCS_PER_TYPE).map((number) => ({ + id: `mv-${String(number).padStart(3, '0')}`, + type: 'test_mv', + attributes: { + field1: `f1-${number}`, + field2: `f2-${number}`, + }, + })); + + await savedObjectsRepository.bulkCreate(mvObjs); + }; + + it('migrates the documents', async () => { + await createBaseline(); + + const modelVersionType = getTestModelVersionType({ beforeUpgrade: false }); + + const { runMigrations, client, savedObjectsRepository } = await getKibanaMigratorTestKit({ + ...getBaseMigratorParams({ migrationAlgorithm: 'v2', kibanaVersion: '8.8.0' }), + logFilePath, + types: [modelVersionType], + }); + await runMigrations(); + + const indices = await client.indices.get({ index: '.kibana*' }); + expect(Object.keys(indices)).toEqual(['.kibana_8.8.0_001']); + + const index = indices['.kibana_8.8.0_001']; + const mappings = index.mappings ?? {}; + const mappingMeta = mappings._meta ?? {}; + + expect(mappings.properties).toEqual( + expect.objectContaining({ + test_mv: modelVersionType.mappings, + }) + ); + + expect(mappingMeta).toEqual({ + indexTypesMap: { + '.kibana': ['test_mv'], + }, + migrationMappingPropertyHashes: expect.any(Object), + }); + + const { saved_objects: testMvDocs } = await savedObjectsRepository.find({ + type: 'test_mv', + perPage: 1000, + }); + + expect(testMvDocs).toHaveLength(NB_DOCS_PER_TYPE); + + const testMvData = sortBy(testMvDocs, 'id').map((object) => ({ + id: object.id, + type: object.type, + attributes: object.attributes, + version: object.typeMigrationVersion, + })); + + expect(testMvData).toEqual( + range(NB_DOCS_PER_TYPE).map((number) => ({ + id: `mv-${String(number).padStart(3, '0')}`, + type: 'test_mv', + attributes: { + field1: `f1-${number}`, + field2: `f2-${number}`, + field3: 'test_mv-backfilled', + }, + version: modelVersionToVirtualVersion(2), + })) + ); + + const records = await parseLogFile(logFilePath); + expect(records).toContainLogEntries( + [ + 'INIT -> WAIT_FOR_YELLOW_SOURCE', + 'CHECK_TARGET_MAPPINGS -> UPDATE_TARGET_MAPPINGS_PROPERTIES', + 'Migration completed', + ], + { + ordered: true, + } + ); + }); +}); diff --git a/src/core/server/integration_tests/saved_objects/migrations/group4/v2_with_mv_stack_version_bump.test.ts b/src/core/server/integration_tests/saved_objects/migrations/group4/v2_with_mv_stack_version_bump.test.ts new file mode 100644 index 0000000000000..e259e0f12d178 --- /dev/null +++ b/src/core/server/integration_tests/saved_objects/migrations/group4/v2_with_mv_stack_version_bump.test.ts @@ -0,0 +1,278 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import Path from 'path'; +import fs from 'fs/promises'; +import { range, sortBy } from 'lodash'; +import { type TestElasticsearchUtils } from '@kbn/core-test-helpers-kbn-server'; +import { SavedObjectsBulkCreateObject } from '@kbn/core-saved-objects-api-server'; +import { modelVersionToVirtualVersion } from '@kbn/core-saved-objects-base-server-internal'; +import '../jest_matchers'; +import { getKibanaMigratorTestKit, startElasticsearch } from '../kibana_migrator_test_kit'; +import { delay, createType, parseLogFile } from '../test_utils'; +import { getBaseMigratorParams } from '../fixtures/zdt_base.fixtures'; + +const logFilePath = Path.join(__dirname, 'v2_with_mv_stack_version_bump.test.log'); + +const NB_DOCS_PER_TYPE = 100; + +describe('V2 algorithm - using model versions - stack version bump scenario', () => { + let esServer: TestElasticsearchUtils['es']; + + beforeAll(async () => { + await fs.unlink(logFilePath).catch(() => {}); + esServer = await startElasticsearch(); + }); + + afterAll(async () => { + await esServer?.stop(); + await delay(10); + }); + + const getTestSwitchType = ({ beforeUpgrade }: { beforeUpgrade: boolean }) => { + const type = createType({ + name: 'test_switch', + namespaceType: 'single', + migrations: { + '8.7.0': (doc) => { + return doc; + }, + }, + modelVersions: {}, + mappings: { + properties: { + field1: { type: 'text' }, + field2: { type: 'text' }, + }, + }, + }); + + if (!beforeUpgrade) { + Object.assign>(type, { + switchToModelVersionAt: '8.8.0', + modelVersions: { + 1: { + changes: [ + { + type: 'mappings_addition', + addedMappings: { + field3: { type: 'text' }, + }, + }, + { + type: 'data_backfill', + transform: (document) => { + document.attributes.field3 = 'test_switch-backfilled'; + return { document }; + }, + }, + ], + }, + }, + mappings: { + ...type.mappings, + properties: { + ...type.mappings.properties, + field3: { type: 'text' }, + }, + }, + }); + } + + return type; + }; + + const getTestModelVersionType = ({ beforeUpgrade }: { beforeUpgrade: boolean }) => { + const type = createType({ + name: 'test_mv', + namespaceType: 'single', + migrations: {}, + switchToModelVersionAt: '8.8.0', + modelVersions: { + 1: { + changes: [], + }, + }, + mappings: { + properties: { + field1: { type: 'text' }, + field2: { type: 'text' }, + }, + }, + }); + + if (!beforeUpgrade) { + Object.assign>(type, { + modelVersions: { + ...type.modelVersions, + 2: { + changes: [ + { + type: 'mappings_addition', + addedMappings: { + field3: { type: 'text' }, + }, + }, + { + type: 'data_backfill', + transform: (document) => { + document.attributes.field3 = 'test_mv-backfilled'; + return { document }; + }, + }, + ], + }, + }, + mappings: { + ...type.mappings, + properties: { + ...type.mappings.properties, + field3: { type: 'text' }, + }, + }, + }); + } + + return type; + }; + + const createBaseline = async () => { + const { runMigrations, savedObjectsRepository } = await getKibanaMigratorTestKit({ + ...getBaseMigratorParams({ + migrationAlgorithm: 'v2', + kibanaVersion: '8.8.0', + }), + types: [ + getTestSwitchType({ beforeUpgrade: true }), + getTestModelVersionType({ beforeUpgrade: true }), + ], + }); + await runMigrations(); + + const switchObjs = range(NB_DOCS_PER_TYPE).map((number) => ({ + id: `switch-${String(number).padStart(3, '0')}`, + type: 'test_switch', + attributes: { + field1: `f1-${number}`, + field2: `f2-${number}`, + }, + })); + + await savedObjectsRepository.bulkCreate(switchObjs); + + const mvObjs = range(NB_DOCS_PER_TYPE).map((number) => ({ + id: `mv-${String(number).padStart(3, '0')}`, + type: 'test_mv', + attributes: { + field1: `f1-${number}`, + field2: `f2-${number}`, + }, + })); + + await savedObjectsRepository.bulkCreate(mvObjs); + }; + + it('migrates the documents', async () => { + await createBaseline(); + + const switchType = getTestSwitchType({ beforeUpgrade: false }); + const modelVersionType = getTestModelVersionType({ beforeUpgrade: false }); + + const { runMigrations, client, savedObjectsRepository } = await getKibanaMigratorTestKit({ + ...getBaseMigratorParams({ migrationAlgorithm: 'v2' }), + logFilePath, + types: [switchType, modelVersionType], + }); + await runMigrations(); + + const indices = await client.indices.get({ index: '.kibana*' }); + expect(Object.keys(indices)).toEqual(['.kibana_8.8.0_001']); + + const index = indices['.kibana_8.8.0_001']; + const mappings = index.mappings ?? {}; + const mappingMeta = mappings._meta ?? {}; + + expect(mappings.properties).toEqual( + expect.objectContaining({ + test_switch: switchType.mappings, + test_mv: modelVersionType.mappings, + }) + ); + + expect(mappingMeta).toEqual({ + indexTypesMap: { + '.kibana': ['test_mv', 'test_switch'], + }, + migrationMappingPropertyHashes: expect.any(Object), + }); + + const { saved_objects: testSwitchDocs } = await savedObjectsRepository.find({ + type: 'test_switch', + perPage: 1000, + }); + const { saved_objects: testMvDocs } = await savedObjectsRepository.find({ + type: 'test_mv', + perPage: 1000, + }); + + expect(testSwitchDocs).toHaveLength(NB_DOCS_PER_TYPE); + expect(testMvDocs).toHaveLength(NB_DOCS_PER_TYPE); + + const testSwitchDocsData = sortBy(testSwitchDocs, 'id').map((object) => ({ + id: object.id, + type: object.type, + attributes: object.attributes, + version: object.typeMigrationVersion, + })); + + expect(testSwitchDocsData).toEqual( + range(NB_DOCS_PER_TYPE).map((number) => ({ + id: `switch-${String(number).padStart(3, '0')}`, + type: 'test_switch', + attributes: { + field1: `f1-${number}`, + field2: `f2-${number}`, + field3: 'test_switch-backfilled', + }, + version: modelVersionToVirtualVersion(1), + })) + ); + + const testMvData = sortBy(testMvDocs, 'id').map((object) => ({ + id: object.id, + type: object.type, + attributes: object.attributes, + version: object.typeMigrationVersion, + })); + + expect(testMvData).toEqual( + range(NB_DOCS_PER_TYPE).map((number) => ({ + id: `mv-${String(number).padStart(3, '0')}`, + type: 'test_mv', + attributes: { + field1: `f1-${number}`, + field2: `f2-${number}`, + field3: 'test_mv-backfilled', + }, + version: modelVersionToVirtualVersion(2), + })) + ); + + const records = await parseLogFile(logFilePath); + expect(records).toContainLogEntries( + [ + 'INIT -> WAIT_FOR_YELLOW_SOURCE', + 'CLEANUP_UNKNOWN_AND_EXCLUDED_WAIT_FOR_TASK -> PREPARE_COMPATIBLE_MIGRATION', + 'Migration completed', + ], + { + ordered: true, + } + ); + }); +}); From b8eed601f1675a4ce1787dd1d5a5631a06589932 Mon Sep 17 00:00:00 2001 From: Angela Chuang <6295984+angorayc@users.noreply.github.com> Date: Fri, 2 Jun 2023 11:52:47 +0100 Subject: [PATCH 04/18] Register Add to new case and add to existing case action (#154918) ## Summary Original issue: https://github.com/elastic/kibana/issues/154842 Collaboration with @cnasikas In dashboard, when clicking on `...` of each chart, we should be able to: - [x] - Add to New case - [x] - Add to existing case - [x] - Create case from existing case modal - [x] - Create case from existing case modal when no existing cases https://github.com/elastic/kibana/assets/6295984/512b32f9-10df-4f8b-a456-08f28a987826 ### Checklist Delete any items that are not applicable to this PR. - [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 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Christos Nasikas --- packages/kbn-optimizer/limits.yml | 2 +- .../plugins/cases/common/utils/owner.test.ts | 28 ++- x-pack/plugins/cases/common/utils/owner.ts | 3 + x-pack/plugins/cases/kibana.jsonc | 3 +- .../public/common/lib/kibana/services.ts | 8 +- .../all_cases/all_cases_list.test.tsx | 20 +- .../components/all_cases/all_cases_list.tsx | 10 +- .../all_cases_selector_modal.tsx | 19 +- .../use_cases_add_to_existing_case_modal.tsx | 12 +- .../actions/__mocks__/action_wrapper.tsx | 12 + .../actions/action_wrapper.test.tsx | 152 ++++++++++++ .../visualizations/actions/action_wrapper.tsx | 91 ++++++++ .../actions/add_to_existing_case.test.tsx | 217 ++++++++++++++++++ .../actions/add_to_existing_case.tsx | 132 +++++++++++ .../actions/add_to_new_case.test.tsx | 208 +++++++++++++++++ .../actions/add_to_new_case.tsx | 122 ++++++++++ .../visualizations/actions/index.ts | 8 + .../visualizations/actions/mocks.ts | 96 ++++++++ .../visualizations/actions/register.ts | 48 ++++ .../visualizations/actions/translations.ts | 29 +++ .../visualizations/actions/types.ts | 44 ++++ .../visualizations/actions/utils.test.ts | 60 +++++ .../visualizations/actions/utils.ts | 27 +++ x-pack/plugins/cases/public/plugin.ts | 18 +- x-pack/plugins/cases/public/types.ts | 15 +- x-pack/plugins/cases/tsconfig.json | 2 + 26 files changed, 1344 insertions(+), 42 deletions(-) create mode 100644 x-pack/plugins/cases/public/components/visualizations/actions/__mocks__/action_wrapper.tsx create mode 100644 x-pack/plugins/cases/public/components/visualizations/actions/action_wrapper.test.tsx create mode 100644 x-pack/plugins/cases/public/components/visualizations/actions/action_wrapper.tsx create mode 100644 x-pack/plugins/cases/public/components/visualizations/actions/add_to_existing_case.test.tsx create mode 100644 x-pack/plugins/cases/public/components/visualizations/actions/add_to_existing_case.tsx create mode 100644 x-pack/plugins/cases/public/components/visualizations/actions/add_to_new_case.test.tsx create mode 100644 x-pack/plugins/cases/public/components/visualizations/actions/add_to_new_case.tsx create mode 100644 x-pack/plugins/cases/public/components/visualizations/actions/index.ts create mode 100644 x-pack/plugins/cases/public/components/visualizations/actions/mocks.ts create mode 100644 x-pack/plugins/cases/public/components/visualizations/actions/register.ts create mode 100644 x-pack/plugins/cases/public/components/visualizations/actions/translations.ts create mode 100644 x-pack/plugins/cases/public/components/visualizations/actions/types.ts create mode 100644 x-pack/plugins/cases/public/components/visualizations/actions/utils.test.ts create mode 100644 x-pack/plugins/cases/public/components/visualizations/actions/utils.ts diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml index 3dc0710a62c5d..f9c11d419fa02 100644 --- a/packages/kbn-optimizer/limits.yml +++ b/packages/kbn-optimizer/limits.yml @@ -7,7 +7,7 @@ pageLoadAssetSize: banners: 17946 bfetch: 22837 canvas: 1066647 - cases: 175000 + cases: 180000 charts: 55000 cloud: 21076 cloudChat: 19894 diff --git a/x-pack/plugins/cases/common/utils/owner.test.ts b/x-pack/plugins/cases/common/utils/owner.test.ts index 09016880c0a95..94e2c50ea7f08 100644 --- a/x-pack/plugins/cases/common/utils/owner.test.ts +++ b/x-pack/plugins/cases/common/utils/owner.test.ts @@ -6,16 +6,30 @@ */ import { OWNER_INFO } from '../constants'; -import { isValidOwner } from './owner'; +import { getCaseOwnerByAppId, isValidOwner } from './owner'; -describe('isValidOwner', () => { - const owners = Object.keys(OWNER_INFO) as Array; +describe('owner utils', () => { + describe('isValidOwner', () => { + const owners = Object.keys(OWNER_INFO) as Array; - it.each(owners)('returns true for valid owner: %s', (owner) => { - expect(isValidOwner(owner)).toBe(true); + it.each(owners)('returns true for valid owner: %s', (owner) => { + expect(isValidOwner(owner)).toBe(true); + }); + + it('return false for invalid owner', () => { + expect(isValidOwner('not-valid')).toBe(false); + }); }); - it('return false for invalid owner', () => { - expect(isValidOwner('not-valid')).toBe(false); + describe('getCaseOwnerByAppId', () => { + const tests = Object.values(OWNER_INFO).map((info) => [info.id, info.appId]); + + it.each(tests)('for owner %s it returns %s', (owner, appId) => { + expect(getCaseOwnerByAppId(appId)).toBe(owner); + }); + + it('return undefined for invalid application ID', () => { + expect(getCaseOwnerByAppId('not-valid')).toBe(undefined); + }); }); }); diff --git a/x-pack/plugins/cases/common/utils/owner.ts b/x-pack/plugins/cases/common/utils/owner.ts index 44068f36f0d3f..cd817a59a375e 100644 --- a/x-pack/plugins/cases/common/utils/owner.ts +++ b/x-pack/plugins/cases/common/utils/owner.ts @@ -9,3 +9,6 @@ import { OWNER_INFO } from '../constants'; export const isValidOwner = (owner: string): owner is keyof typeof OWNER_INFO => Object.keys(OWNER_INFO).includes(owner); + +export const getCaseOwnerByAppId = (currentAppId?: string) => + Object.values(OWNER_INFO).find((info) => info.appId === currentAppId)?.id; diff --git a/x-pack/plugins/cases/kibana.jsonc b/x-pack/plugins/cases/kibana.jsonc index a37320379b76d..6604dc63402ef 100644 --- a/x-pack/plugins/cases/kibana.jsonc +++ b/x-pack/plugins/cases/kibana.jsonc @@ -28,7 +28,8 @@ "ruleRegistry", "files", "savedObjectsFinder", - "savedObjectsManagement" + "savedObjectsManagement", + "uiActions", ], "optionalPlugins": [ "home", diff --git a/x-pack/plugins/cases/public/common/lib/kibana/services.ts b/x-pack/plugins/cases/public/common/lib/kibana/services.ts index ab06c1be0bf02..b1248488e5286 100644 --- a/x-pack/plugins/cases/public/common/lib/kibana/services.ts +++ b/x-pack/plugins/cases/public/common/lib/kibana/services.ts @@ -8,7 +8,7 @@ import type { CoreStart } from '@kbn/core/public'; import type { CasesUiConfigType } from '../../../../common/ui/types'; -type GlobalServices = Pick; +type GlobalServices = Pick; export class KibanaServices { private static kibanaVersion?: string; @@ -16,14 +16,16 @@ export class KibanaServices { private static config?: CasesUiConfigType; public static init({ + application, + config, http, kibanaVersion, - config, + theme, }: GlobalServices & { kibanaVersion: string; config: CasesUiConfigType; }) { - this.services = { http }; + this.services = { application, http, theme }; this.kibanaVersion = kibanaVersion; this.config = config; } diff --git a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx b/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx index eecde112f3907..5126aadc32fea 100644 --- a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx @@ -66,7 +66,6 @@ const useKibanaMock = useKibana as jest.MockedFunction; const useGetConnectorsMock = useGetSupportedActionConnectors as jest.Mock; const useUpdateCaseMock = useUpdateCase as jest.Mock; const useLicenseMock = useLicense as jest.Mock; - const mockTriggersActionsUiService = triggersActionsUiMock.createStart(); const mockKibana = () => { @@ -165,7 +164,6 @@ describe('AllCasesListGeneric', () => { it('should render AllCasesList', async () => { useLicenseMock.mockReturnValue({ isAtLeastPlatinum: () => true }); - appMockRenderer.render(); await waitFor(() => { @@ -260,6 +258,21 @@ describe('AllCasesListGeneric', () => { }); }); + it('should not call onCreateCasePressed if onRowClick is not provided when create case from case page', async () => { + useGetCasesMock.mockReturnValue({ + ...defaultGetCases, + data: { + ...defaultGetCases.data, + cases: [], + }, + }); + appMockRenderer.render(); + userEvent.click(screen.getByTestId('cases-table-add-case')); + await waitFor(() => { + expect(onRowClick).not.toHaveBeenCalled(); + }); + }); + it('should tableHeaderSortButton AllCasesList', async () => { appMockRenderer.render(); @@ -347,9 +360,10 @@ describe('AllCasesListGeneric', () => { it('should call onRowClick with no cases and isSelectorView=true when create case is clicked', async () => { appMockRenderer.render(); userEvent.click(screen.getByTestId('cases-table-add-case-filter-bar')); - + const isCreateCase = true; await waitFor(() => { expect(onRowClick).toHaveBeenCalled(); + expect(onRowClick).toBeCalledWith(undefined, isCreateCase); }); }); diff --git a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.tsx b/x-pack/plugins/cases/public/components/all_cases/all_cases_list.tsx index e63315d7e6299..d0fc6f038e1e6 100644 --- a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/all_cases_list.tsx @@ -69,7 +69,7 @@ const mapToReadableSolutionName = (solution: string): Solution => { export interface AllCasesListProps { hiddenStatuses?: CaseStatusWithAllStatus[]; isSelectorView?: boolean; - onRowClick?: (theCase?: CaseUI) => void; + onRowClick?: (theCase?: CaseUI, isCreateCase?: boolean) => void; } export const AllCasesList = React.memo( @@ -250,6 +250,10 @@ export const AllCasesList = React.memo( mapToReadableSolutionName(solution) ); + const onCreateCasePressed = useCallback(() => { + onRowClick?.(undefined, true); + }, [onRowClick]); + return ( <> ( severity: filterOptions.severity, }} hiddenStatuses={hiddenStatuses} - onCreateCasePressed={onRowClick} + onCreateCasePressed={onCreateCasePressed} isSelectorView={isSelectorView} isLoading={isLoadingCurrentUserProfile} currentUserProfile={currentUserProfile} @@ -284,7 +288,7 @@ export const AllCasesList = React.memo( void; - onClose?: () => void; + onClose?: (theCase?: CaseUI, isCreateCase?: boolean) => void; + onCreateCaseClicked?: () => void; } const Modal = styled(EuiModal)` @@ -37,20 +38,18 @@ export const AllCasesSelectorModal = React.memo( ({ hiddenStatuses, onRowClick, onClose }) => { const [isModalOpen, setIsModalOpen] = useState(true); const closeModal = useCallback(() => { - if (onClose) { - onClose(); - } + onClose?.(); setIsModalOpen(false); }, [onClose]); const onClick = useCallback( - (theCase?: CaseUI) => { - closeModal(); - if (onRowClick) { - onRowClick(theCase); - } + (theCase?: CaseUI, isCreateCase?: boolean) => { + onClose?.(theCase, isCreateCase); + setIsModalOpen(false); + + onRowClick?.(theCase); }, - [closeModal, onRowClick] + [onClose, onRowClick] ); return isModalOpen ? ( diff --git a/x-pack/plugins/cases/public/components/all_cases/selector_modal/use_cases_add_to_existing_case_modal.tsx b/x-pack/plugins/cases/public/components/all_cases/selector_modal/use_cases_add_to_existing_case_modal.tsx index 8e5a27ae06b5e..301baba1d1ccd 100644 --- a/x-pack/plugins/cases/public/components/all_cases/selector_modal/use_cases_add_to_existing_case_modal.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/selector_modal/use_cases_add_to_existing_case_modal.tsx @@ -106,13 +106,13 @@ export const useCasesAddToExistingCaseModal = (props: AddToExistingCaseModalProp } }, [ - props, + appId, + casesToasts, closeModal, + createAttachments, createNewCaseFlyout, + props, startTransaction, - appId, - createAttachments, - casesToasts, ] ); @@ -130,11 +130,11 @@ export const useCasesAddToExistingCaseModal = (props: AddToExistingCaseModalProp onRowClick: (theCase?: CaseUI) => { handleOnRowClick(theCase, getAttachments); }, - onClose: () => { + onClose: (theCase?: CaseUI, isCreateCase?: boolean) => { closeModal(); if (props.onClose) { - return props.onClose(); + return props.onClose(theCase, isCreateCase); } }, }, diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/__mocks__/action_wrapper.tsx b/x-pack/plugins/cases/public/components/visualizations/actions/__mocks__/action_wrapper.tsx new file mode 100644 index 0000000000000..6b1dda42d8fe1 --- /dev/null +++ b/x-pack/plugins/cases/public/components/visualizations/actions/__mocks__/action_wrapper.tsx @@ -0,0 +1,12 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; + +export const ActionWrapper = jest + .fn() + .mockImplementation(({ children }) =>
{children}
); diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/action_wrapper.test.tsx b/x-pack/plugins/cases/public/components/visualizations/actions/action_wrapper.test.tsx new file mode 100644 index 0000000000000..31f34de24d5ed --- /dev/null +++ b/x-pack/plugins/cases/public/components/visualizations/actions/action_wrapper.test.tsx @@ -0,0 +1,152 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { render } from '@testing-library/react'; +import React from 'react'; +import { SECURITY_SOLUTION_OWNER } from '../../../../common'; +import { canUseCases } from '../../../client/helpers/can_use_cases'; +import CasesProvider from '../../cases_context'; +import { ActionWrapper } from './action_wrapper'; +import { getMockCaseUiActionProps } from './mocks'; + +jest.mock('../../cases_context', () => + jest.fn().mockImplementation(({ children, ...props }) =>
{children}
) +); + +jest.mock('../../../client/helpers/can_use_cases', () => { + const actual = jest.requireActual('../../../client/helpers/can_use_cases'); + return { + ...actual, + canUseCases: jest.fn(), + }; +}); + +const mockCasePermissions = jest.fn().mockReturnValue({ create: true, update: true }); + +describe('ActionWrapper', () => { + const props = { ...getMockCaseUiActionProps(), currentAppId: 'securitySolutionUI' }; + + beforeEach(() => { + jest.clearAllMocks(); + (canUseCases as jest.Mock).mockReturnValue(mockCasePermissions); + }); + + it('reads cases permissions', () => { + render( + +
+ + ); + expect(mockCasePermissions).toHaveBeenCalledWith([SECURITY_SOLUTION_OWNER]); + }); + + it('renders CasesProvider with correct props for Security solution', () => { + render( + +
+ + ); + expect((CasesProvider as jest.Mock).mock.calls[0][0].value).toMatchInlineSnapshot(` + Object { + "features": Object { + "alerts": Object { + "sync": true, + }, + }, + "owner": Array [ + "securitySolution", + ], + "permissions": Object { + "create": true, + "update": true, + }, + } + `); + }); + + it('renders CasesProvider with correct props for stack management', () => { + render( + +
+ + ); + + expect((CasesProvider as jest.Mock).mock.calls[0][0].value).toMatchInlineSnapshot(` + Object { + "features": Object { + "alerts": Object { + "sync": false, + }, + }, + "owner": Array [ + "cases", + ], + "permissions": Object { + "create": true, + "update": true, + }, + } + `); + }); + + it('renders CasesProvider with correct props for observability', () => { + render( + +
+ + ); + + expect((CasesProvider as jest.Mock).mock.calls[0][0].value).toMatchInlineSnapshot(` + Object { + "features": Object { + "alerts": Object { + "sync": false, + }, + }, + "owner": Array [ + "observability", + ], + "permissions": Object { + "create": true, + "update": true, + }, + } + `); + }); + + it('renders CasesProvider with correct props for an application without cases', () => { + render( + +
+ + ); + + expect((CasesProvider as jest.Mock).mock.calls[0][0].value).toMatchInlineSnapshot(` + Object { + "features": Object { + "alerts": Object { + "sync": false, + }, + }, + "owner": Array [], + "permissions": Object { + "create": true, + "update": true, + }, + } + `); + }); + + it('should check permission with undefined if owner is not found', () => { + render( + +
+ + ); + expect(mockCasePermissions).toBeCalledWith(undefined); + }); +}); diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/action_wrapper.tsx b/x-pack/plugins/cases/public/components/visualizations/actions/action_wrapper.tsx new file mode 100644 index 0000000000000..5dd448b9b73e3 --- /dev/null +++ b/x-pack/plugins/cases/public/components/visualizations/actions/action_wrapper.tsx @@ -0,0 +1,91 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import type { PropsWithChildren } from 'react'; +import React from 'react'; +import { Router } from 'react-router-dom'; +import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; + +import { useIsDarkTheme } from '../../../common/use_is_dark_theme'; +import { SECURITY_SOLUTION_OWNER } from '../../../../common'; +import type { CasesUIActionProps } from './types'; +import { KibanaContextProvider, useKibana } from '../../../common/lib/kibana'; +import CasesProvider from '../../cases_context'; +import { getCaseOwnerByAppId } from '../../../../common/utils/owner'; +import { canUseCases } from '../../../client/helpers/can_use_cases'; + +export const DEFAULT_DARK_MODE = 'theme:darkMode' as const; + +interface Props { + caseContextProps: CasesUIActionProps['caseContextProps']; + currentAppId?: string; +} + +const ActionWrapperWithContext: React.FC> = ({ + children, + caseContextProps, + currentAppId, +}) => { + const { application } = useKibana().services; + const isDarkTheme = useIsDarkTheme(); + + const owner = getCaseOwnerByAppId(currentAppId); + const casePermissions = canUseCases(application.capabilities)(owner ? [owner] : undefined); + // TODO: Remove when https://github.com/elastic/kibana/issues/143201 is developed + const syncAlerts = owner === SECURITY_SOLUTION_OWNER; + + return ( + + + {children} + + + ); +}; + +ActionWrapperWithContext.displayName = 'ActionWrapperWithContext'; + +type ActionWrapperComponentProps = PropsWithChildren< + CasesUIActionProps & { currentAppId?: string } +>; + +const ActionWrapperComponent: React.FC = ({ + core, + plugins, + storage, + history, + children, + caseContextProps, + currentAppId, +}) => { + return ( + + + + {children} + + + + ); +}; + +ActionWrapperComponent.displayName = 'ActionWrapper'; + +export const ActionWrapper = React.memo(ActionWrapperComponent); diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/add_to_existing_case.test.tsx b/x-pack/plugins/cases/public/components/visualizations/actions/add_to_existing_case.test.tsx new file mode 100644 index 0000000000000..08a96ccb8587b --- /dev/null +++ b/x-pack/plugins/cases/public/components/visualizations/actions/add_to_existing_case.test.tsx @@ -0,0 +1,217 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { LENS_EMBEDDABLE_TYPE } from '@kbn/lens-plugin/public'; +import { ErrorEmbeddable } from '@kbn/embeddable-plugin/public'; +import type { Action } from '@kbn/ui-actions-plugin/public'; +import ReactDOM, { unmountComponentAtNode } from 'react-dom'; + +import { createAddToExistingCaseLensAction } from './add_to_existing_case'; +import type { ActionContext, DashboardVisualizationEmbeddable } from './types'; +import { useCasesAddToExistingCaseModal } from '../../all_cases/selector_modal/use_cases_add_to_existing_case_modal'; +import React from 'react'; +import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { + getMockApplications$, + getMockCaseUiActionProps, + getMockCurrentAppId$, + mockAttributes, + MockEmbeddable, + mockTimeRange, +} from './mocks'; +import { CommentType } from '../../../../common'; +import { useKibana } from '../../../common/lib/kibana'; +import { waitFor } from '@testing-library/dom'; +import { canUseCases } from '../../../client/helpers/can_use_cases'; +import { getCaseOwnerByAppId } from '../../../../common/utils/owner'; + +const element = document.createElement('div'); +document.body.appendChild(element); + +jest.mock('../../all_cases/selector_modal/use_cases_add_to_existing_case_modal', () => ({ + useCasesAddToExistingCaseModal: jest.fn(), +})); + +jest.mock('../../../client/helpers/can_use_cases', () => { + const actual = jest.requireActual('../../../client/helpers/can_use_cases'); + return { + ...actual, + canUseCases: jest.fn(), + }; +}); + +jest.mock('@kbn/kibana-react-plugin/public', () => ({ + toMountPoint: jest.fn(), + KibanaThemeProvider: jest.fn().mockImplementation(({ children }) => <>{children}), +})); + +jest.mock('../../../common/lib/kibana', () => { + return { + useKibana: jest.fn(), + KibanaContextProvider: jest + .fn() + .mockImplementation(({ children, ...props }) =>
{children}
), + }; +}); + +jest.mock('react-dom', () => { + const original = jest.requireActual('react-dom'); + return { ...original, unmountComponentAtNode: jest.fn() }; +}); + +jest.mock('./action_wrapper'); + +jest.mock('../../../../common/utils/owner', () => ({ + getCaseOwnerByAppId: jest.fn().mockReturnValue('securitySolution'), +})); + +describe('createAddToExistingCaseLensAction', () => { + const mockEmbeddable = new MockEmbeddable(LENS_EMBEDDABLE_TYPE, { + id: 'mockId', + attributes: mockAttributes, + timeRange: mockTimeRange, + }) as unknown as DashboardVisualizationEmbeddable; + + const context = { + embeddable: mockEmbeddable, + } as unknown as ActionContext; + + const caseUiActionProps = getMockCaseUiActionProps(); + + const mockUseCasesAddToExistingCaseModal = useCasesAddToExistingCaseModal as jest.Mock; + const mockOpenModal = jest.fn(); + const mockMount = jest.fn(); + let action: Action; + const mockCasePermissions = jest.fn(); + beforeEach(() => { + mockUseCasesAddToExistingCaseModal.mockReturnValue({ + open: mockOpenModal, + }); + (useKibana as jest.Mock).mockReturnValue({ + services: { + application: { + currentAppId$: getMockCurrentAppId$(), + applications$: getMockApplications$(), + }, + }, + }); + (canUseCases as jest.Mock).mockReturnValue( + mockCasePermissions.mockReturnValue({ create: true, update: true }) + ); + (toMountPoint as jest.Mock).mockImplementation((node) => { + ReactDOM.render(node, element); + return mockMount; + }); + jest.clearAllMocks(); + action = createAddToExistingCaseLensAction(caseUiActionProps); + }); + + test('it should return display name', () => { + expect(action.getDisplayName(context)).toEqual('Add to existing case'); + }); + + it('should return icon type', () => { + expect(action.getIconType(context)).toEqual('casesApp'); + }); + + describe('isCompatible', () => { + it('should return false if error embeddable', async () => { + expect( + await action.isCompatible({ + ...context, + embeddable: new ErrorEmbeddable('some error', { + id: '123', + }) as unknown as DashboardVisualizationEmbeddable, + }) + ).toEqual(false); + }); + + it('should return false if not lens embeddable', async () => { + expect( + await action.isCompatible({ + ...context, + embeddable: new MockEmbeddable('not_lens') as unknown as DashboardVisualizationEmbeddable, + }) + ).toEqual(false); + }); + + it('should return false if no permission', async () => { + mockCasePermissions.mockReturnValue({ create: false, update: false }); + expect(await action.isCompatible(context)).toEqual(false); + }); + + it('should return true if is lens embeddable', async () => { + expect(await action.isCompatible(context)).toEqual(true); + }); + + it('should check permission with undefined if owner is not found', async () => { + (getCaseOwnerByAppId as jest.Mock).mockReturnValue(undefined); + await action.isCompatible(context); + expect(mockCasePermissions).toBeCalledWith(undefined); + }); + }); + + describe('execute', () => { + beforeEach(async () => { + await action.execute(context); + }); + + it('should execute', () => { + expect(toMountPoint).toHaveBeenCalled(); + expect(mockMount).toHaveBeenCalled(); + }); + }); + + describe('Add to existing case modal', () => { + beforeEach(async () => { + await action.execute(context); + }); + + it('should open modal with an attachment', async () => { + await waitFor(() => { + expect(mockOpenModal).toHaveBeenCalled(); + + const getAttachments = mockOpenModal.mock.calls[0][0].getAttachments; + expect(getAttachments()).toEqual( + expect.objectContaining([ + { + comment: `!{lens${JSON.stringify({ + timeRange: mockTimeRange, + attributes: mockAttributes, + })}}`, + type: CommentType.user as const, + }, + ]) + ); + }); + }); + + it('should have correct onClose handler - when close modal clicked', () => { + const onClose = mockUseCasesAddToExistingCaseModal.mock.calls[0][0].onClose; + onClose(); + expect(unmountComponentAtNode as jest.Mock).toHaveBeenCalled(); + }); + + it('should have correct onClose handler - when case selected', () => { + const onClose = mockUseCasesAddToExistingCaseModal.mock.calls[0][0].onClose; + onClose({ id: 'case-id', title: 'case-title' }); + expect(unmountComponentAtNode as jest.Mock).toHaveBeenCalled(); + }); + + it('should have correct onClose handler - when case created', () => { + const onClose = mockUseCasesAddToExistingCaseModal.mock.calls[0][0].onClose; + onClose(null, true); + expect(unmountComponentAtNode as jest.Mock).not.toHaveBeenCalled(); + }); + + it('should have correct onSuccess handler', () => { + const onSuccess = mockUseCasesAddToExistingCaseModal.mock.calls[0][0].onSuccess; + onSuccess(); + expect(unmountComponentAtNode as jest.Mock).toHaveBeenCalled(); + }); + }); +}); diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/add_to_existing_case.tsx b/x-pack/plugins/cases/public/components/visualizations/actions/add_to_existing_case.tsx new file mode 100644 index 0000000000000..ef5a7c794f1f5 --- /dev/null +++ b/x-pack/plugins/cases/public/components/visualizations/actions/add_to_existing_case.tsx @@ -0,0 +1,132 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import React, { useEffect, useMemo } from 'react'; +import { unmountComponentAtNode } from 'react-dom'; + +import { createAction } from '@kbn/ui-actions-plugin/public'; +import { isErrorEmbeddable } from '@kbn/embeddable-plugin/public'; + +import { toMountPoint } from '@kbn/kibana-react-plugin/public'; + +import type { CaseUI } from '../../../../common'; +import { isLensEmbeddable, hasInput, getLensCaseAttachment } from './utils'; + +import type { ActionContext, CasesUIActionProps, DashboardVisualizationEmbeddable } from './types'; +import { useCasesAddToExistingCaseModal } from '../../all_cases/selector_modal/use_cases_add_to_existing_case_modal'; +import { ADD_TO_EXISTING_CASE_DISPLAYNAME } from './translations'; +import { ActionWrapper } from './action_wrapper'; +import { canUseCases } from '../../../client/helpers/can_use_cases'; +import { getCaseOwnerByAppId } from '../../../../common/utils/owner'; + +export const ACTION_ID = 'embeddable_addToExistingCase'; +export const DEFAULT_DARK_MODE = 'theme:darkMode' as const; + +interface Props { + embeddable: DashboardVisualizationEmbeddable; + onSuccess: () => void; + onClose: (theCase?: CaseUI) => void; +} + +const AddExistingCaseModalWrapper: React.FC = ({ embeddable, onClose, onSuccess }) => { + const modal = useCasesAddToExistingCaseModal({ + onClose, + onSuccess, + }); + + const attachments = useMemo(() => { + const { attributes, timeRange } = embeddable.getInput(); + + return [getLensCaseAttachment({ attributes, timeRange })]; + }, [embeddable]); + useEffect(() => { + modal.open({ getAttachments: () => attachments }); + }, [attachments, modal]); + + return null; +}; + +AddExistingCaseModalWrapper.displayName = 'AddExistingCaseModalWrapper'; + +export const createAddToExistingCaseLensAction = ({ + core, + plugins, + storage, + history, + caseContextProps, +}: CasesUIActionProps) => { + const { application: applicationService, theme } = core; + + let currentAppId: string | undefined; + + applicationService?.currentAppId$.subscribe((appId) => { + currentAppId = appId; + }); + + return createAction({ + id: ACTION_ID, + type: 'actionButton', + getIconType: () => 'casesApp', + getDisplayName: () => ADD_TO_EXISTING_CASE_DISPLAYNAME, + isCompatible: async ({ embeddable }) => { + const owner = getCaseOwnerByAppId(currentAppId); + const casePermissions = canUseCases(applicationService.capabilities)( + owner ? [owner] : undefined + ); + + return ( + !isErrorEmbeddable(embeddable) && + isLensEmbeddable(embeddable) && + casePermissions.update && + casePermissions.create && + hasInput(embeddable) + ); + }, + execute: async ({ embeddable }) => { + const targetDomElement = document.createElement('div'); + + const cleanupDom = (shouldCleanup?: boolean) => { + if (targetDomElement != null && shouldCleanup) { + unmountComponentAtNode(targetDomElement); + } + }; + + const onClose = (theCase?: CaseUI, isCreateCase?: boolean) => { + const closeModalClickedScenario = theCase == null && !isCreateCase; + const caseSelectedScenario = theCase != null; + // When `Creating` a case from the `add to existing case modal`, + // we close the modal and then open the flyout. + // If we clean up dom when closing the modal, then the flyout won't open. + // Thus we do not clean up dom when `Creating` a case. + const shouldCleanup = closeModalClickedScenario || caseSelectedScenario; + cleanupDom(shouldCleanup); + }; + + const onSuccess = () => { + cleanupDom(true); + }; + const mount = toMountPoint( + + + , + { theme$: theme.theme$ } + ); + + mount(targetDomElement); + }, + }); +}; diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/add_to_new_case.test.tsx b/x-pack/plugins/cases/public/components/visualizations/actions/add_to_new_case.test.tsx new file mode 100644 index 0000000000000..7e99bbaae24c6 --- /dev/null +++ b/x-pack/plugins/cases/public/components/visualizations/actions/add_to_new_case.test.tsx @@ -0,0 +1,208 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { LENS_EMBEDDABLE_TYPE } from '@kbn/lens-plugin/public'; +import { ErrorEmbeddable } from '@kbn/embeddable-plugin/public'; +import type { Action } from '@kbn/ui-actions-plugin/public'; + +import { createAddToNewCaseLensAction } from './add_to_new_case'; +import type { ActionContext, DashboardVisualizationEmbeddable } from './types'; +import { useCasesAddToNewCaseFlyout } from '../../create/flyout/use_cases_add_to_new_case_flyout'; +import React from 'react'; +import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { + getMockApplications$, + getMockCaseUiActionProps, + getMockCurrentAppId$, + mockAttributes, + MockEmbeddable, + mockTimeRange, +} from './mocks'; +import ReactDOM, { unmountComponentAtNode } from 'react-dom'; +import { useKibana } from '../../../common/lib/kibana'; +import { CommentType } from '../../../../common'; +import { waitFor } from '@testing-library/dom'; +import { canUseCases } from '../../../client/helpers/can_use_cases'; +import { getCaseOwnerByAppId } from '../../../../common/utils/owner'; + +const element = document.createElement('div'); +document.body.appendChild(element); + +jest.mock('@kbn/kibana-react-plugin/public', () => ({ + toMountPoint: jest.fn(), +})); + +jest.mock('../../../common/lib/kibana', () => { + return { + useKibana: jest.fn(), + KibanaContextProvider: jest + .fn() + .mockImplementation(({ children, ...props }) =>
{children}
), + }; +}); + +jest.mock('../../create/flyout/use_cases_add_to_new_case_flyout', () => ({ + useCasesAddToNewCaseFlyout: jest.fn(), +})); + +jest.mock('../../../client/helpers/can_use_cases', () => { + const actual = jest.requireActual('../../../client/helpers/can_use_cases'); + return { + ...actual, + canUseCases: jest.fn(), + }; +}); + +jest.mock('react-dom', () => { + const original = jest.requireActual('react-dom'); + return { ...original, unmountComponentAtNode: jest.fn() }; +}); + +jest.mock('./action_wrapper'); + +jest.mock('../../../../common/utils/owner', () => ({ + getCaseOwnerByAppId: jest.fn().mockReturnValue('securitySolution'), +})); + +describe('createAddToNewCaseLensAction', () => { + const mockEmbeddable = new MockEmbeddable(LENS_EMBEDDABLE_TYPE, { + id: 'mockId', + attributes: mockAttributes, + timeRange: mockTimeRange, + }) as unknown as DashboardVisualizationEmbeddable; + + const context = { + embeddable: mockEmbeddable, + } as unknown as ActionContext; + + const caseUiActionProps = getMockCaseUiActionProps(); + + const mockUseCasesAddToNewCaseFlyout = useCasesAddToNewCaseFlyout as jest.Mock; + const mockOpenFlyout = jest.fn(); + const mockMount = jest.fn(); + let action: Action; + const mockCasePermissions = jest.fn(); + + beforeEach(() => { + mockUseCasesAddToNewCaseFlyout.mockReturnValue({ + open: mockOpenFlyout, + }); + + (useKibana as jest.Mock).mockReturnValue({ + services: { + application: { + currentAppId$: getMockCurrentAppId$(), + applications$: getMockApplications$(), + }, + }, + }); + + (canUseCases as jest.Mock).mockReturnValue( + mockCasePermissions.mockReturnValue({ create: true, update: true }) + ); + + (toMountPoint as jest.Mock).mockImplementation((node) => { + ReactDOM.render(node, element); + return mockMount; + }); + + jest.clearAllMocks(); + action = createAddToNewCaseLensAction(caseUiActionProps); + }); + + test('it should return display name', () => { + expect(action.getDisplayName(context)).toEqual('Add to new case'); + }); + + it('should return icon type', () => { + expect(action.getIconType(context)).toEqual('casesApp'); + }); + + describe('isCompatible', () => { + it('should return false if error embeddable', async () => { + expect( + await action.isCompatible({ + ...context, + embeddable: new ErrorEmbeddable('some error', { + id: '123', + }) as unknown as DashboardVisualizationEmbeddable, + }) + ).toEqual(false); + }); + + it('should return false if not lens embeddable', async () => { + expect( + await action.isCompatible({ + ...context, + embeddable: new MockEmbeddable('not_lens') as unknown as DashboardVisualizationEmbeddable, + }) + ).toEqual(false); + }); + + it('should return false if no permission', async () => { + mockCasePermissions.mockReturnValue({ create: false, update: false }); + expect(await action.isCompatible(context)).toEqual(false); + }); + + it('should return true if is lens embeddable', async () => { + expect(await action.isCompatible(context)).toEqual(true); + }); + + it('should check permission with undefined if owner is not found', async () => { + (getCaseOwnerByAppId as jest.Mock).mockReturnValue(undefined); + await action.isCompatible(context); + expect(mockCasePermissions).toBeCalledWith(undefined); + }); + }); + + describe('execute', () => { + beforeEach(async () => { + await action.execute(context); + }); + + it('should execute', () => { + expect(toMountPoint).toHaveBeenCalled(); + expect(mockMount).toHaveBeenCalled(); + }); + }); + + describe('Add to new case flyout', () => { + beforeEach(async () => { + await action.execute(context); + }); + + it('should open flyout', async () => { + await waitFor(() => { + expect(mockOpenFlyout).toHaveBeenCalledWith( + expect.objectContaining({ + attachments: [ + { + comment: `!{lens${JSON.stringify({ + timeRange: mockTimeRange, + attributes: mockAttributes, + })}}`, + type: CommentType.user as const, + }, + ], + }) + ); + }); + }); + + it('should have correct onClose handler', () => { + const onClose = mockUseCasesAddToNewCaseFlyout.mock.calls[0][0].onClose; + onClose(); + expect(unmountComponentAtNode as jest.Mock).toHaveBeenCalled(); + }); + + it('should have correct onSuccess handler', () => { + const onSuccess = mockUseCasesAddToNewCaseFlyout.mock.calls[0][0].onSuccess; + onSuccess(); + expect(unmountComponentAtNode as jest.Mock).toHaveBeenCalled(); + }); + }); +}); diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/add_to_new_case.tsx b/x-pack/plugins/cases/public/components/visualizations/actions/add_to_new_case.tsx new file mode 100644 index 0000000000000..f09ccaa3a4baf --- /dev/null +++ b/x-pack/plugins/cases/public/components/visualizations/actions/add_to_new_case.tsx @@ -0,0 +1,122 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import React, { useEffect, useMemo } from 'react'; +import { unmountComponentAtNode } from 'react-dom'; + +import { createAction } from '@kbn/ui-actions-plugin/public'; +import { isErrorEmbeddable } from '@kbn/embeddable-plugin/public'; + +import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { getCaseOwnerByAppId } from '../../../../common/utils/owner'; +import { hasInput, isLensEmbeddable, getLensCaseAttachment } from './utils'; + +import type { ActionContext, CasesUIActionProps, DashboardVisualizationEmbeddable } from './types'; +import { ADD_TO_CASE_SUCCESS, ADD_TO_NEW_CASE_DISPLAYNAME } from './translations'; +import { useCasesAddToNewCaseFlyout } from '../../create/flyout/use_cases_add_to_new_case_flyout'; +import { ActionWrapper } from './action_wrapper'; +import { canUseCases } from '../../../client/helpers/can_use_cases'; + +export const ACTION_ID = 'embeddable_addToNewCase'; +export const DEFAULT_DARK_MODE = 'theme:darkMode' as const; + +interface Props { + embeddable: DashboardVisualizationEmbeddable; + onSuccess: () => void; + onClose: () => void; +} + +const AddToNewCaseFlyoutWrapper: React.FC = ({ embeddable, onClose, onSuccess }) => { + const { attributes, timeRange } = embeddable.getInput(); + const createNewCaseFlyout = useCasesAddToNewCaseFlyout({ + onClose, + onSuccess, + toastContent: ADD_TO_CASE_SUCCESS, + }); + + const attachments = useMemo( + () => [getLensCaseAttachment({ attributes, timeRange })], + [attributes, timeRange] + ); + + useEffect(() => { + createNewCaseFlyout.open({ attachments }); + }, [attachments, createNewCaseFlyout]); + + return null; +}; + +AddToNewCaseFlyoutWrapper.displayName = 'AddToNewCaseFlyoutWrapper'; + +export const createAddToNewCaseLensAction = ({ + core, + plugins, + storage, + history, + caseContextProps, +}: CasesUIActionProps) => { + const { application: applicationService, theme } = core; + + let currentAppId: string | undefined; + + applicationService?.currentAppId$.subscribe((appId) => { + currentAppId = appId; + }); + + return createAction({ + id: ACTION_ID, + type: 'actionButton', + getIconType: () => 'casesApp', + getDisplayName: () => ADD_TO_NEW_CASE_DISPLAYNAME, + isCompatible: async ({ embeddable }) => { + const owner = getCaseOwnerByAppId(currentAppId); + const casePermissions = canUseCases(applicationService.capabilities)( + owner ? [owner] : undefined + ); + + return ( + !isErrorEmbeddable(embeddable) && + isLensEmbeddable(embeddable) && + casePermissions.update && + casePermissions.create && + hasInput(embeddable) + ); + }, + execute: async ({ embeddable }) => { + const targetDomElement = document.createElement('div'); + + const cleanupDom = () => { + if (targetDomElement != null) { + unmountComponentAtNode(targetDomElement); + } + }; + + const onFlyoutClose = () => { + cleanupDom(); + }; + + const mount = toMountPoint( + + + , + { theme$: theme.theme$ } + ); + + mount(targetDomElement); + }, + }); +}; diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/index.ts b/x-pack/plugins/cases/public/components/visualizations/actions/index.ts new file mode 100644 index 0000000000000..e96d41d4466e5 --- /dev/null +++ b/x-pack/plugins/cases/public/components/visualizations/actions/index.ts @@ -0,0 +1,8 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +export { registerUIActions as registerActions } from './register'; diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/mocks.ts b/x-pack/plugins/cases/public/components/visualizations/actions/mocks.ts new file mode 100644 index 0000000000000..808935fddd2e8 --- /dev/null +++ b/x-pack/plugins/cases/public/components/visualizations/actions/mocks.ts @@ -0,0 +1,96 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import type { CoreTheme, PublicAppInfo } from '@kbn/core/public'; +import { BehaviorSubject, of } from 'rxjs'; +import type { TypedLensByValueInput } from '@kbn/lens-plugin/public'; +import { createBrowserHistory } from 'history'; +import type { CasesUIActionProps } from './types'; + +const mockTheme: CoreTheme = { + darkMode: false, +}; + +const createThemeMock = (): CoreTheme => { + return { ...mockTheme }; +}; + +export const createTheme$Mock = () => { + return of(createThemeMock()); +}; + +export class MockEmbeddable { + public type; + private input; + constructor( + type: string, + input?: { + attributes: TypedLensByValueInput['attributes']; + id: string; + timeRange: { from: string; to: string; fromStr: string; toStr: string }; + } + ) { + this.type = type; + this.input = input; + } + getFilters() {} + getQuery() {} + getInput() { + return this.input; + } +} + +export const mockAttributes = { + title: 'mockTitle', + description: 'mockDescription', + references: [], + state: { + visualization: { + id: 'mockId', + type: 'mockType', + title: 'mockTitle', + visualizationType: 'mockVisualizationType', + references: [], + state: { + datasourceStates: { + indexpattern: {}, + }, + }, + }, + }, +} as unknown as TypedLensByValueInput['attributes']; + +export const mockTimeRange = { from: '', to: '', fromStr: '', toStr: '' }; + +export const getMockCurrentAppId$ = () => new BehaviorSubject('securitySolutionUI'); +export const getMockApplications$ = () => + new BehaviorSubject>( + new Map([['securitySolutionUI', { category: { label: 'Test' } } as unknown as PublicAppInfo]]) + ); + +export const getMockCaseUiActionProps = () => { + const core = { + application: { currentAppId$: getMockCurrentAppId$(), capabilities: {} }, + theme: { theme$: createTheme$Mock() }, + uiSettings: { + get: jest.fn().mockReturnValue(true), + }, + }; + const plugins = {}; + const storage = {}; + const history = createBrowserHistory(); + const caseContextProps = {}; + + const caseUiActionProps = { + core, + plugins, + storage, + history, + caseContextProps, + } as unknown as CasesUIActionProps; + + return caseUiActionProps; +}; diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/register.ts b/x-pack/plugins/cases/public/components/visualizations/actions/register.ts new file mode 100644 index 0000000000000..f470a0a34fdcd --- /dev/null +++ b/x-pack/plugins/cases/public/components/visualizations/actions/register.ts @@ -0,0 +1,48 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { CONTEXT_MENU_TRIGGER } from '@kbn/embeddable-plugin/public'; + +import { createAddToNewCaseLensAction } from './add_to_new_case'; +import { createAddToExistingCaseLensAction } from './add_to_existing_case'; +import type { CasesUIActionProps } from './types'; + +export const registerUIActions = ({ + core, + plugins, + caseContextProps, + history, + storage, +}: CasesUIActionProps) => { + registerLensActions({ core, plugins, caseContextProps, history, storage }); +}; + +const registerLensActions = ({ + core, + plugins, + caseContextProps, + history, + storage, +}: CasesUIActionProps) => { + const addToNewCaseAction = createAddToNewCaseLensAction({ + core, + plugins, + caseContextProps, + history, + storage, + }); + plugins.uiActions.addTriggerAction(CONTEXT_MENU_TRIGGER, addToNewCaseAction); + + const addToExistingCaseAction = createAddToExistingCaseLensAction({ + core, + plugins, + caseContextProps, + history, + storage, + }); + plugins.uiActions.addTriggerAction(CONTEXT_MENU_TRIGGER, addToExistingCaseAction); +}; diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/translations.ts b/x-pack/plugins/cases/public/components/visualizations/actions/translations.ts new file mode 100644 index 0000000000000..ed7ee1370d875 --- /dev/null +++ b/x-pack/plugins/cases/public/components/visualizations/actions/translations.ts @@ -0,0 +1,29 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { i18n } from '@kbn/i18n'; + +export const ADD_TO_CASE_SUCCESS = i18n.translate( + 'xpack.cases.visualizationActions.addToExistingCaseSuccessContent', + { + defaultMessage: 'Successfully added visualization to the case', + } +); + +export const ADD_TO_NEW_CASE_DISPLAYNAME = i18n.translate( + 'xpack.cases.actions.visualizationActions.addToNewCase.displayName', + { + defaultMessage: 'Add to new case', + } +); + +export const ADD_TO_EXISTING_CASE_DISPLAYNAME = i18n.translate( + 'xpack.cases.actions.visualizationActions.addToExistingCase.displayName', + { + defaultMessage: 'Add to existing case', + } +); diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/types.ts b/x-pack/plugins/cases/public/components/visualizations/actions/types.ts new file mode 100644 index 0000000000000..53a2e9d5fd06e --- /dev/null +++ b/x-pack/plugins/cases/public/components/visualizations/actions/types.ts @@ -0,0 +1,44 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import type { TimeRange } from '@kbn/data-plugin/common'; +import type { CoreStart } from '@kbn/core-lifecycle-browser'; +import type { IEmbeddable } from '@kbn/embeddable-plugin/public'; +import type { TypedLensByValueInput } from '@kbn/lens-plugin/public'; +import type * as H from 'history'; +import type { Storage } from '@kbn/kibana-utils-plugin/public'; + +import type { ActionExecutionContext } from '@kbn/ui-actions-plugin/public'; +import type { CasesPluginStart } from '../../../types'; +import type { CasesContextProps } from '../../cases_context'; + +export type CasesUIActionContextProps = Pick< + CasesContextProps, + | 'externalReferenceAttachmentTypeRegistry' + | 'persistableStateAttachmentTypeRegistry' + | 'getFilesClient' +>; + +export interface CasesUIActionProps { + core: CoreStart; + plugins: CasesPluginStart; + caseContextProps: CasesUIActionContextProps; + history: H.History; + storage: Storage; +} + +export interface EmbeddableInput { + attributes: TypedLensByValueInput['attributes']; + id: string; + timeRange: TimeRange; +} + +export type DashboardVisualizationEmbeddable = IEmbeddable; + +export type ActionContext = ActionExecutionContext<{ + embeddable: DashboardVisualizationEmbeddable; +}>; diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/utils.test.ts b/x-pack/plugins/cases/public/components/visualizations/actions/utils.test.ts new file mode 100644 index 0000000000000..3f61ac958dd18 --- /dev/null +++ b/x-pack/plugins/cases/public/components/visualizations/actions/utils.test.ts @@ -0,0 +1,60 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { LENS_EMBEDDABLE_TYPE } from '@kbn/lens-plugin/public'; +import { isLensEmbeddable, hasInput, getLensCaseAttachment } from './utils'; + +describe('utils', () => { + describe('isLensEmbeddable', () => { + it('return true if it is a lens embeddable', () => { + // @ts-expect-error: extra attributes are not needed + expect(isLensEmbeddable({ type: LENS_EMBEDDABLE_TYPE })).toBe(true); + }); + + it('return false if it is not a lens embeddable', () => { + // @ts-expect-error: extra attributes are not needed + expect(isLensEmbeddable({ type: 'not-exist' })).toBe(false); + }); + }); + + describe('hasInput', () => { + it('return true if it has correct input', () => { + const embeddable = { getInput: () => ({ attributes: {}, timeRange: {} }) }; + + // @ts-expect-error: extra attributes are not needed + expect(hasInput(embeddable)).toBe(true); + }); + + it('return false if attributes are null', () => { + const embeddable = { getInput: () => ({ attributes: null, timeRange: {} }) }; + + // @ts-expect-error: extra attributes are not needed + expect(hasInput(embeddable)).toBe(false); + }); + + it('return false if timeRange is null', () => { + const embeddable = { getInput: () => ({ attributes: {}, timeRange: null }) }; + + // @ts-expect-error: extra attributes are not needed + expect(hasInput(embeddable)).toBe(false); + }); + }); + + describe('getLensCaseAttachment', () => { + it('create a case lens attachment correctly', () => { + const embeddable = { attributes: {}, timeRange: {} }; + + // @ts-expect-error: extra attributes are not needed + expect(getLensCaseAttachment(embeddable)).toMatchInlineSnapshot(` + Object { + "comment": "!{lens{\\"timeRange\\":{},\\"attributes\\":{}}}", + "type": "user", + } + `); + }); + }); +}); diff --git a/x-pack/plugins/cases/public/components/visualizations/actions/utils.ts b/x-pack/plugins/cases/public/components/visualizations/actions/utils.ts new file mode 100644 index 0000000000000..fcf48bfaf0d8b --- /dev/null +++ b/x-pack/plugins/cases/public/components/visualizations/actions/utils.ts @@ -0,0 +1,27 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import type { IEmbeddable } from '@kbn/embeddable-plugin/public'; +import { LENS_EMBEDDABLE_TYPE, type Embeddable as LensEmbeddable } from '@kbn/lens-plugin/public'; +import { CommentType } from '../../../../common'; +import type { DashboardVisualizationEmbeddable, EmbeddableInput } from './types'; + +export const isLensEmbeddable = (embeddable: IEmbeddable): embeddable is LensEmbeddable => { + return embeddable.type === LENS_EMBEDDABLE_TYPE; +}; + +export const hasInput = (embeddable: DashboardVisualizationEmbeddable) => { + const { attributes, timeRange } = embeddable.getInput(); + return attributes != null && timeRange != null; +}; + +export const getLensCaseAttachment = ({ timeRange, attributes }: Omit) => ({ + comment: `!{lens${JSON.stringify({ + timeRange, + attributes, + })}}`, + type: CommentType.user as const, +}); diff --git a/x-pack/plugins/cases/public/plugin.ts b/x-pack/plugins/cases/public/plugin.ts index 8897b9ccbd046..1f9d3edf35776 100644 --- a/x-pack/plugins/cases/public/plugin.ts +++ b/x-pack/plugins/cases/public/plugin.ts @@ -8,7 +8,8 @@ import type { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from '@kbn/core/public'; import type { ManagementAppMountParams } from '@kbn/management-plugin/public'; import { Storage } from '@kbn/kibana-utils-plugin/public'; -import type { CasesUiStart, CasesPluginSetup, CasesPluginStart, CasesUiSetup } from './types'; +import { createBrowserHistory } from 'history'; + import { KibanaServices } from './common/lib/kibana'; import type { CasesUiConfigType } from '../common/ui/types'; import { APP_ID, APP_PATH } from '../common/constants'; @@ -28,7 +29,9 @@ import { getUICapabilities } from './client/helpers/capabilities'; import { ExternalReferenceAttachmentTypeRegistry } from './client/attachment_framework/external_reference_registry'; import { PersistableStateAttachmentTypeRegistry } from './client/attachment_framework/persistable_state_registry'; import { registerCaseFileKinds } from './files'; +import type { CasesPluginSetup, CasesPluginStart, CasesUiSetup, CasesUiStart } from './types'; import { registerInternalAttachments } from './internal_attachments'; +import { registerActions } from './components/visualizations/actions'; /** * @public @@ -57,7 +60,6 @@ export class CasesUiPlugin registerInternalAttachments(externalReferenceAttachmentTypeRegistry); const config = this.initializerContext.config.get(); registerCaseFileKinds(config.files, plugins.files); - if (plugins.home) { plugins.home.featureCatalogue.register({ id: APP_ID, @@ -127,6 +129,18 @@ export class CasesUiPlugin getFilesClient: plugins.files.filesClientFactory.asScoped, }); + registerActions({ + core, + plugins, + caseContextProps: { + externalReferenceAttachmentTypeRegistry: this.externalReferenceAttachmentTypeRegistry, + persistableStateAttachmentTypeRegistry: this.persistableStateAttachmentTypeRegistry, + getFilesClient: plugins.files.filesClientFactory.asScoped, + }, + history: createBrowserHistory(), + storage: this.storage, + }); + return { api: createClientAPI({ http: core.http }), ui: { diff --git a/x-pack/plugins/cases/public/types.ts b/x-pack/plugins/cases/public/types.ts index f8fd9270d7cba..4f401dce1df45 100644 --- a/x-pack/plugins/cases/public/types.ts +++ b/x-pack/plugins/cases/public/types.ts @@ -24,6 +24,8 @@ import type { ApmBase } from '@elastic/apm-rum'; import type { LicensingPluginStart } from '@kbn/licensing-plugin/public'; import type { FilesSetup, FilesStart } from '@kbn/files-plugin/public'; import type { SavedObjectsManagementPluginStart } from '@kbn/saved-objects-management-plugin/public'; +import type { UiActionsStart } from '@kbn/ui-actions-plugin/public'; + import type { CasesBulkGetRequest, CasesBulkGetResponse, @@ -62,18 +64,19 @@ export interface CasesPluginSetup { } export interface CasesPluginStart { + apm?: ApmBase; data: DataPublicPluginStart; embeddable: EmbeddableStart; + features: FeaturesPluginStart; files: FilesStart; - licensing?: LicensingPluginStart; lens: LensPublicStart; - storage: Storage; - triggersActionsUi: TriggersActionsStart; - features: FeaturesPluginStart; + licensing?: LicensingPluginStart; + savedObjectsManagement: SavedObjectsManagementPluginStart; security: SecurityPluginStart; spaces?: SpacesPluginStart; - apm?: ApmBase; - savedObjectsManagement: SavedObjectsManagementPluginStart; + storage: Storage; + triggersActionsUi: TriggersActionsStart; + uiActions: UiActionsStart; } /** diff --git a/x-pack/plugins/cases/tsconfig.json b/x-pack/plugins/cases/tsconfig.json index 118370770e138..4314e82ce6ba7 100644 --- a/x-pack/plugins/cases/tsconfig.json +++ b/x-pack/plugins/cases/tsconfig.json @@ -63,6 +63,8 @@ "@kbn/saved-objects-finder-plugin", "@kbn/saved-objects-management-plugin", "@kbn/utility-types-jest", + "@kbn/ui-actions-plugin", + "@kbn/core-lifecycle-browser", "@kbn/core-saved-objects-api-server-mocks", "@kbn/core-theme-browser", ], From 4281e6b9eff59bffd68ff2d44b899c82bec1adb9 Mon Sep 17 00:00:00 2001 From: Peter Pisljar Date: Fri, 2 Jun 2023 13:20:31 +0200 Subject: [PATCH 05/18] Discover SQL mode: Allow sorting (#158708) ## Summary Closes https://github.com/elastic/kibana/issues/154331 Enables sorting the table in Discover when in SQL (text based) mode. - sorting is performed on the client (inmemory) - inmemory sorting configuration is not preserved in the appstate (to prevent unnecesarry data fetches) - all fields can be sorted, even the ones that can't be sorted on the elasticsearch side. ### Checklist Delete any items that are not applicable to this PR. - [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 --------- Co-authored-by: Stratoula Kalafateli --- .../components/layout/discover_documents.tsx | 2 +- .../discover_grid/discover_grid.test.tsx | 23 +++ .../discover_grid/discover_grid.tsx | 21 +- .../discover_grid_columns.test.tsx | 189 ++++++++++++++++++ .../discover_grid/discover_grid_columns.tsx | 7 +- .../embeddable/saved_search_embeddable.tsx | 2 +- .../apps/discover/group2/_sql_view.ts | 2 +- 7 files changed, 237 insertions(+), 9 deletions(-) diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx index bf26ffaade95a..64f857d0d9aed 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx @@ -251,7 +251,7 @@ function DiscoverDocumentsComponent({ useNewFieldsApi={useNewFieldsApi} rowHeightState={rowHeight} onUpdateRowHeight={onUpdateRowHeight} - isSortEnabled={!isPlainRecord} + isSortEnabled={true} isPlainRecord={isPlainRecord} query={query} rowsPerPageState={rowsPerPage} diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.test.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid.test.tsx index 97e951635288f..33f507b43333b 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid.test.tsx +++ b/src/plugins/discover/public/components/discover_grid/discover_grid.test.tsx @@ -209,4 +209,27 @@ describe('DiscoverGrid', () => { expect(findTestSubject(component, 'gridEditFieldButton').exists()).toBe(false); }); }); + + describe('sorting', () => { + it('should enable in memory sorting with plain records', () => { + const component = getComponent({ + ...getProps(), + columns: ['message'], + isPlainRecord: true, + }); + + expect( + ( + findTestSubject(component, 'docTable') + .find('EuiDataGridInMemoryRenderer') + .first() + .props() as Record + ).inMemory + ).toMatchInlineSnapshot(` + Object { + "level": "sorting", + } + `); + }); + }); }); diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx index 34ddd0c995666..69748b449b05c 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx +++ b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx @@ -362,13 +362,18 @@ export const DiscoverGrid = ({ */ const sortingColumns = useMemo(() => sort.map(([id, direction]) => ({ id, direction })), [sort]); + const [inmemorySortingColumns, setInmemorySortingColumns] = useState([]); const onTableSort = useCallback( (sortingColumnsData) => { - if (isSortEnabled && onSort) { - onSort(sortingColumnsData.map(({ id, direction }: SortObj) => [id, direction])); + if (isSortEnabled) { + if (isPlainRecord) { + setInmemorySortingColumns(sortingColumnsData); + } else if (onSort) { + onSort(sortingColumnsData.map(({ id, direction }: SortObj) => [id, direction])); + } } }, - [onSort, isSortEnabled] + [onSort, isSortEnabled, isPlainRecord, setInmemorySortingColumns] ); const showMultiFields = services.uiSettings.get(SHOW_MULTIFIELDS); @@ -437,6 +442,7 @@ export const DiscoverGrid = ({ showTimeCol, defaultColumns, isSortEnabled, + isPlainRecord, services: { uiSettings, toastNotifications, @@ -455,6 +461,7 @@ export const DiscoverGrid = ({ settings, defaultColumns, isSortEnabled, + isPlainRecord, uiSettings, toastNotifications, dataViewFieldEditor, @@ -479,10 +486,13 @@ export const DiscoverGrid = ({ ); const sorting = useMemo(() => { if (isSortEnabled) { - return { columns: sortingColumns, onSort: onTableSort }; + return { + columns: isPlainRecord ? inmemorySortingColumns : sortingColumns, + onSort: onTableSort, + }; } return { columns: sortingColumns, onSort: () => {} }; - }, [sortingColumns, onTableSort, isSortEnabled]); + }, [isSortEnabled, sortingColumns, isPlainRecord, inmemorySortingColumns, onTableSort]); const canSetExpandedDoc = Boolean(setExpandedDoc && DocumentView); @@ -619,6 +629,7 @@ export const DiscoverGrid = ({ sorting={sorting as EuiDataGridSorting} toolbarVisibility={toolbarVisibility} rowHeightsOptions={rowHeightsOptions} + inMemory={isPlainRecord ? { level: 'sorting' } : undefined} gridStyle={GRID_STYLE} />
diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid_columns.test.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_columns.test.tsx index fd7122fccbd95..c4c68bf0132d0 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid_columns.test.tsx +++ b/src/plugins/discover/public/components/discover_grid/discover_grid_columns.test.tsx @@ -21,6 +21,7 @@ describe('Discover grid columns', function () { showTimeCol: false, defaultColumns: false, isSortEnabled: true, + isPlainRecord: false, valueToStringConverter: discoverGridContextMock.valueToStringConverter, rowsCount: 100, services: { @@ -140,6 +141,7 @@ describe('Discover grid columns', function () { showTimeCol: false, defaultColumns: true, isSortEnabled: true, + isPlainRecord: false, valueToStringConverter: discoverGridContextMock.valueToStringConverter, rowsCount: 100, services: { @@ -253,6 +255,7 @@ describe('Discover grid columns', function () { showTimeCol: true, defaultColumns: false, isSortEnabled: true, + isPlainRecord: false, valueToStringConverter: discoverGridContextMock.valueToStringConverter, rowsCount: 100, services: { @@ -429,4 +432,190 @@ describe('Discover grid columns', function () { ] `); }); + + it('returns eui grid with inmemory sorting', async () => { + const actual = getEuiGridColumns({ + columns: ['extension', 'message'], + settings: {}, + dataView: dataViewWithTimefieldMock, + showTimeCol: true, + defaultColumns: false, + isSortEnabled: true, + isPlainRecord: true, + valueToStringConverter: discoverGridContextMock.valueToStringConverter, + rowsCount: 100, + services: { + uiSettings: discoverServiceMock.uiSettings, + toastNotifications: discoverServiceMock.toastNotifications, + }, + hasEditDataViewPermission: () => + discoverServiceMock.dataViewFieldEditor.userPermissions.editIndexPattern(), + onFilter: () => {}, + }); + expect(actual).toMatchInlineSnapshot(` + Array [ + Object { + "actions": Object { + "additional": Array [ + Object { + "data-test-subj": "gridCopyColumnNameToClipBoardButton", + "iconProps": Object { + "size": "m", + }, + "iconType": "copyClipboard", + "label": , + "onClick": [Function], + "size": "xs", + }, + Object { + "data-test-subj": "gridCopyColumnValuesToClipBoardButton", + "iconProps": Object { + "size": "m", + }, + "iconType": "copyClipboard", + "label": , + "onClick": [Function], + "size": "xs", + }, + ], + "showHide": false, + "showMoveLeft": true, + "showMoveRight": true, + }, + "cellActions": Array [ + [Function], + [Function], + [Function], + ], + "display":
+ + + timestamp + + + + +
, + "displayAsText": "timestamp", + "id": "timestamp", + "initialWidth": 210, + "isSortable": true, + "schema": "datetime", + }, + Object { + "actions": Object { + "additional": Array [ + Object { + "data-test-subj": "gridCopyColumnNameToClipBoardButton", + "iconProps": Object { + "size": "m", + }, + "iconType": "copyClipboard", + "label": , + "onClick": [Function], + "size": "xs", + }, + Object { + "data-test-subj": "gridCopyColumnValuesToClipBoardButton", + "iconProps": Object { + "size": "m", + }, + "iconType": "copyClipboard", + "label": , + "onClick": [Function], + "size": "xs", + }, + ], + "showHide": Object { + "iconType": "cross", + "label": "Remove column", + }, + "showMoveLeft": true, + "showMoveRight": true, + }, + "cellActions": Array [ + [Function], + [Function], + [Function], + ], + "displayAsText": "extension", + "id": "extension", + "isSortable": true, + "schema": "string", + }, + Object { + "actions": Object { + "additional": Array [ + Object { + "data-test-subj": "gridCopyColumnNameToClipBoardButton", + "iconProps": Object { + "size": "m", + }, + "iconType": "copyClipboard", + "label": , + "onClick": [Function], + "size": "xs", + }, + Object { + "data-test-subj": "gridCopyColumnValuesToClipBoardButton", + "iconProps": Object { + "size": "m", + }, + "iconType": "copyClipboard", + "label": , + "onClick": [Function], + "size": "xs", + }, + ], + "showHide": Object { + "iconType": "cross", + "label": "Remove column", + }, + "showMoveLeft": true, + "showMoveRight": true, + }, + "cellActions": Array [ + [Function], + ], + "displayAsText": "message", + "id": "message", + "isSortable": true, + "schema": "string", + }, + ] + `); + }); }); diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid_columns.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_columns.tsx index 6e4c0ec619e2b..b341d6236d235 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid_columns.tsx +++ b/src/plugins/discover/public/components/discover_grid/discover_grid_columns.tsx @@ -65,6 +65,7 @@ function buildEuiGridColumn({ dataView, defaultColumns, isSortEnabled, + isPlainRecord, toastNotifications, hasEditDataViewPermission, valueToStringConverter, @@ -77,6 +78,7 @@ function buildEuiGridColumn({ dataView: DataView; defaultColumns: boolean; isSortEnabled: boolean; + isPlainRecord?: boolean; toastNotifications: ToastsStart; hasEditDataViewPermission: () => boolean; valueToStringConverter: ValueToStringConverter; @@ -99,7 +101,7 @@ function buildEuiGridColumn({ const column: EuiDataGridColumn = { id: columnName, schema: getSchemaByKbnType(dataViewField?.type), - isSortable: isSortEnabled && dataViewField?.sortable === true, + isSortable: isSortEnabled && (isPlainRecord || dataViewField?.sortable === true), displayAsText: columnDisplayName, actions: { showHide: @@ -176,6 +178,7 @@ export function getEuiGridColumns({ showTimeCol, defaultColumns, isSortEnabled, + isPlainRecord, services, hasEditDataViewPermission, valueToStringConverter, @@ -189,6 +192,7 @@ export function getEuiGridColumns({ showTimeCol: boolean; defaultColumns: boolean; isSortEnabled: boolean; + isPlainRecord?: boolean; services: { uiSettings: IUiSettingsClient; toastNotifications: ToastsStart; @@ -213,6 +217,7 @@ export function getEuiGridColumns({ dataView, defaultColumns, isSortEnabled, + isPlainRecord, toastNotifications: services.toastNotifications, hasEditDataViewPermission, valueToStringConverter, diff --git a/src/plugins/discover/public/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/embeddable/saved_search_embeddable.tsx index fa0a74f5d0205..eb6788f9bfe7e 100644 --- a/src/plugins/discover/public/embeddable/saved_search_embeddable.tsx +++ b/src/plugins/discover/public/embeddable/saved_search_embeddable.tsx @@ -258,7 +258,7 @@ export class SavedSearchEmbeddable this.searchProps!.isLoading = false; this.searchProps!.isPlainRecord = true; this.searchProps!.showTimeCol = false; - this.searchProps!.isSortEnabled = false; + this.searchProps!.isSortEnabled = true; return; } diff --git a/test/functional/apps/discover/group2/_sql_view.ts b/test/functional/apps/discover/group2/_sql_view.ts index e2cfb68cef5b5..6374ee405c70a 100644 --- a/test/functional/apps/discover/group2/_sql_view.ts +++ b/test/functional/apps/discover/group2/_sql_view.ts @@ -77,8 +77,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { expect(await testSubjects.exists('unifiedHistogramQueryHits')).to.be(true); expect(await testSubjects.exists('discoverAlertsButton')).to.be(false); expect(await testSubjects.exists('shareTopNavButton')).to.be(true); + expect(await testSubjects.exists('dataGridColumnSortingButton')).to.be(true); expect(await testSubjects.exists('docTableExpandToggleColumn')).to.be(true); - expect(await testSubjects.exists('dataGridColumnSortingButton')).to.be(false); expect(await testSubjects.exists('fieldListFiltersFieldTypeFilterToggle')).to.be(true); await testSubjects.click('field-@message-showDetails'); expect(await testSubjects.exists('discoverFieldListPanelEditItem')).to.be(false); From f21f7ce6ca96c72ebcf02ae21d2f6885a429b27e Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Fri, 2 Jun 2023 13:40:42 +0200 Subject: [PATCH 06/18] [HTTP/Docs] Clarify versioning practices for `internal` vs `public` endpoints (#158828) ## Summary Expands on the HTTP versioning tutorial with more information about `internal` vs `public` endpoints. ## Screenshots Screenshot 2023-06-01 at 15 52 18 Screenshot 2023-06-01 at 15 52 33 --- dev_docs/tutorials/versioning_http_apis.mdx | 39 ++++++++++++++++++--- 1 file changed, 34 insertions(+), 5 deletions(-) diff --git a/dev_docs/tutorials/versioning_http_apis.mdx b/dev_docs/tutorials/versioning_http_apis.mdx index 81599028819b9..b0a4bf899158c 100644 --- a/dev_docs/tutorials/versioning_http_apis.mdx +++ b/dev_docs/tutorials/versioning_http_apis.mdx @@ -212,17 +212,45 @@ The changes are: ### 4. Adhere to the HTTP versioning specification -#### Choosing the right version -##### Public endpoints +We categorize our endpoints based on their intended audience: `public` or `internal`. Different versioning practices apply to each. + +#### Public endpoints Public endpoints include any endpoint that is intended for users to directly integrate with via HTTP. + + All Kibana's public endpoints must be versioned using the format described below. + + +##### Version lifecycle + +Introducing a new version or moving a current version into deprecation to eventually be deleted must +follow [this process](https://github.com/elastic/dev/issues/new?assignees=&labels=breaking-change-proposal&projects=&template=breaking-change.md). + +##### Version format + Choose a date string in the format `YYYY-MM-DD`. This date should be the date that a (group) of APIs was made available. -##### Internal endpoints -Internal endpoints are all non-public endpoints (see definition above). +-------- + +#### Internal endpoints +Internal endpoints are all non-public endpoints (see definition above). Note: these endpoints do not need to be versioned, +but versioning can be leveraged to maintain BWC with existing clients. -If you need to maintain backwards-compatibility for an internal endpoint use a single, larger-than-zero number. Ex. `1`. +##### Version lifecycle + +Introducing/removing a version is up to the team who owns the HTTP API. Consider how introduction or removal might +affect client code when being rolled out. + + + To keep maintenance light it is **highly** recommended to reduce the number of versions you have for internal endpoints. In your code it is possible to + centrally define and share internal versions through code that is `common` to your browser- and server-side plugin code. + + + +##### Version format + +If you need to version an internal endpoint use a single, larger-than-zero major version. Ex. `1`. #### Use the versioned router @@ -335,4 +363,5 @@ export class MyPlugin implements Plugin { ``` #### Additional reading + For more details on the versioning specification see [this document](https://docs.google.com/document/d/1YpF6hXIHZaHvwNaQAxWFzexUF1nbqACTtH2IfDu0ldA/edit?usp=sharing). From a4889b48517ea79974a2eca584f0c7273a6f032a Mon Sep 17 00:00:00 2001 From: Pablo Machado Date: Fri, 2 Jun 2023 13:42:15 +0200 Subject: [PATCH 07/18] Fix hover Action showing for zero Count on D&R Dashboard (#158902) issue: https://github.com/elastic/kibana/issues/158057 ## Summary Remove hover actions from the table when the count of alerts is zero. **BEFORE** ![Jun-02-2023 11-02-16](https://github.com/elastic/kibana/assets/1490444/e1e17b61-1311-40b1-beb0-3756f51dc7eb) **AFTER** ![Jun-02-2023 11-03-14](https://github.com/elastic/kibana/assets/1490444/41340076-716d-42b0-89ad-1b6216c6439a) ### Checklist - [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 --- .../host_alerts_table.test.tsx | 27 +++ .../host_alerts_table/host_alerts_table.tsx | 184 +++++++++--------- .../user_alerts_table/user_alerts_table.tsx | 184 +++++++++--------- 3 files changed, 217 insertions(+), 178 deletions(-) diff --git a/x-pack/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.test.tsx b/x-pack/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.test.tsx index f0ef8f8d00da7..fb18a3a6a4459 100644 --- a/x-pack/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.test.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.test.tsx @@ -157,4 +157,31 @@ describe('HostAlertsTable', () => { }, ]); }); + + it('should render cellActions when count is bigger than zero', () => { + mockUseHostAlertsItemsReturn({ + items: [parsedVulnerableHostsAlertsResult[0]], + }); + const { getAllByTestId } = renderComponent(); + + expect(getAllByTestId('cellActions-renderContent-host.name').length).toBe(5); + }); + + it('should not render cellActions when count is zero', () => { + mockUseHostAlertsItemsReturn({ + items: [ + { + hostName: 'Host-342m5gl1g2', + totalAlerts: 100, + critical: 0, + high: 0, + low: 0, + medium: 0, + }, + ], + }); + const { getAllByTestId } = renderComponent(); + + expect(getAllByTestId('cellActions-renderContent-host.name').length).toBe(1); + }); }); diff --git a/x-pack/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx b/x-pack/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx index 5a3d2462e3e9a..8ac908bad945a 100644 --- a/x-pack/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx @@ -179,30 +179,33 @@ const getTableColumns: GetTableColumns = (handleClick) => [ name: i18n.STATUS_CRITICAL_LABEL, render: (count: number, { hostName }) => ( - - handleClick({ hostName, severity: 'critical' })} + {count > 0 ? ( + - - - + handleClick({ hostName, severity: 'critical' })} + > + + + + ) : ( + + )} ), }, @@ -211,29 +214,30 @@ const getTableColumns: GetTableColumns = (handleClick) => [ name: i18n.STATUS_HIGH_LABEL, render: (count: number, { hostName }) => ( - - handleClick({ hostName, severity: 'high' })} + {count > 0 ? ( + - - - + handleClick({ hostName, severity: 'high' })}> + + + + ) : ( + + )} ), }, @@ -242,29 +246,30 @@ const getTableColumns: GetTableColumns = (handleClick) => [ name: i18n.STATUS_MEDIUM_LABEL, render: (count: number, { hostName }) => ( - - handleClick({ hostName, severity: 'medium' })} + {count > 0 ? ( + - - - + handleClick({ hostName, severity: 'medium' })}> + + + + ) : ( + + )} ), }, @@ -273,29 +278,30 @@ const getTableColumns: GetTableColumns = (handleClick) => [ name: i18n.STATUS_LOW_LABEL, render: (count: number, { hostName }) => ( - - handleClick({ hostName, severity: 'low' })} + {count > 0 ? ( + - - - + handleClick({ hostName, severity: 'low' })}> + + + + ) : ( + + )} ), }, diff --git a/x-pack/plugins/security_solution/public/overview/components/detection_response/user_alerts_table/user_alerts_table.tsx b/x-pack/plugins/security_solution/public/overview/components/detection_response/user_alerts_table/user_alerts_table.tsx index 875556f12fb8d..d63e5b88e3660 100644 --- a/x-pack/plugins/security_solution/public/overview/components/detection_response/user_alerts_table/user_alerts_table.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/detection_response/user_alerts_table/user_alerts_table.tsx @@ -176,30 +176,33 @@ const getTableColumns: GetTableColumns = (handleClick) => [ name: i18n.STATUS_CRITICAL_LABEL, render: (count: number, { userName }) => ( - - handleClick({ userName, severity: 'critical' })} + {count > 0 ? ( + - - - + handleClick({ userName, severity: 'critical' })} + > + + + + ) : ( + + )} ), }, @@ -208,29 +211,30 @@ const getTableColumns: GetTableColumns = (handleClick) => [ name: i18n.STATUS_HIGH_LABEL, render: (count: number, { userName }) => ( - - handleClick({ userName, severity: 'high' })} + {count > 0 ? ( + - - - + handleClick({ userName, severity: 'high' })}> + + + + ) : ( + + )} ), }, @@ -239,29 +243,30 @@ const getTableColumns: GetTableColumns = (handleClick) => [ name: i18n.STATUS_MEDIUM_LABEL, render: (count: number, { userName }) => ( - - handleClick({ userName, severity: 'medium' })} + {count > 0 ? ( + - - - + handleClick({ userName, severity: 'medium' })}> + + + + ) : ( + + )} ), }, @@ -270,29 +275,30 @@ const getTableColumns: GetTableColumns = (handleClick) => [ name: i18n.STATUS_LOW_LABEL, render: (count: number, { userName }) => ( - - handleClick({ userName, severity: 'low' })} + {count > 0 ? ( + - - - + handleClick({ userName, severity: 'low' })}> + + + + ) : ( + + )} ), }, From 801919702ae03d8946c4a5677d387566f43f615c Mon Sep 17 00:00:00 2001 From: Jeramy Soucy Date: Fri, 2 Jun 2023 13:58:29 +0200 Subject: [PATCH 08/18] [RCS 2.0] Bypasses query for field list when configuring FLS against a remote cluster (#158728) Closes #158280 ## Summary This PR implements an index type (local vs remote) check within the index privilege form in order to bypass querying the field list from the index API client for remote cluster indices. ## Testing - Augmented functional tests in `index_privilege_form.test.tsx` with '_does not query availble fields for remote cluster indices_' test case. --- .../es/index_privilege_form.test.tsx | 20 +++++++++++++++++++ .../privileges/es/index_privilege_form.tsx | 7 ++++++- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.test.tsx b/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.test.tsx index 8ed57e646326f..09160ce3b6967 100644 --- a/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.test.tsx +++ b/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.test.tsx @@ -416,6 +416,26 @@ describe('field level security', () => { expect(testProps.indicesAPIClient.getFields).toHaveBeenCalledWith('newPattern'); }); + test('does not query availble fields for remote cluster indices', async () => { + const testProps = { + ...props, + indexType: 'remote_indices' as const, + indexPrivilege: { + ...props.indexPrivilege, + clusters: ['test-cluster'], + names: ['foo', 'bar-*'], + }, + indicesAPIClient: indicesAPIClientMock.create(), + allowFieldLevelSecurity: true, + }; + + testProps.indicesAPIClient.getFields.mockResolvedValue(['a', 'b', 'c']); + + mountWithIntl(); + await nextTick(); + expect(testProps.indicesAPIClient.getFields).not.toHaveBeenCalled(); + }); + test('it displays a warning when no fields are granted', () => { const testProps = { ...props, diff --git a/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx b/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx index 58d1bd8061bf8..2540316caac89 100644 --- a/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx +++ b/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx @@ -227,7 +227,12 @@ export class IndexPrivilegeForm extends Component { }; private loadFLSOptions = (indexNames: string[], force = false) => { - if (!force && (this.isFieldListLoading || indexNames.length === 0)) return; + if ( + this.props.indexType === 'remote_indices' || + (!force && (this.isFieldListLoading || indexNames.length === 0)) + ) { + return; + } this.isFieldListLoading = true; this.setState({ From 238d5bb825de4f16fb3b84b0b7272d249474c2c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Loix?= Date: Fri, 2 Jun 2023 13:50:48 +0100 Subject: [PATCH 09/18] [SharedUxChromeNavigation V2] Add EUI component to building blocks (#158297) --- .../src/project_navigation.ts | 29 +- .../src/ui/v2/components/cloud_link.tsx | 64 ++ .../navigation/src/ui/v2/components/index.ts | 2 + .../src/ui/v2/components/navigation.test.tsx | 407 ++++++++++--- .../src/ui/v2/components/navigation.tsx | 72 ++- .../ui/v2/components/navigation_bucket.tsx | 75 +++ .../ui/v2/components/navigation_footer.tsx | 28 + .../src/ui/v2/components/navigation_group.tsx | 94 +-- .../ui/v2/components/navigation_header.tsx | 61 ++ .../src/ui/v2/components/navigation_item.tsx | 86 ++- .../v2/components/navigation_section_ui.tsx | 82 +++ .../src/ui/v2/components/navigation_ui.tsx | 44 ++ .../ui/v2/components/recently_accessed.tsx | 64 ++ .../ui/v2/default_navigation.test.helpers.ts | 449 ++++++++++++++ .../src/ui/v2/default_navigation.test.tsx | 399 ++++++++++--- .../src/ui/v2/default_navigation.tsx | 151 +++-- .../navigation/src/ui/v2/hooks/index.ts | 9 + .../src/ui/v2/hooks/use_init_navnode.ts | 221 +++++++ .../v2/{ => hooks}/use_register_tree_node.ts | 8 +- .../src/ui/v2/nav_tree_presets/analytics.ts | 37 ++ .../src/ui/v2/nav_tree_presets/devtools.ts | 46 ++ .../src/ui/v2/nav_tree_presets/index.ts | 67 +++ .../src/ui/v2/nav_tree_presets/management.ts | 226 +++++++ .../src/ui/v2/nav_tree_presets/ml.ts | 136 +++++ .../src/ui/v2/navigation.stories.tsx | 564 ++++++++++++++---- .../chrome/navigation/src/ui/v2/types.ts | 179 +++++- .../navigation/src/ui/v2/use_init_navnode.ts | 181 ------ 27 files changed, 3143 insertions(+), 638 deletions(-) create mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/components/cloud_link.tsx create mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_bucket.tsx create mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_footer.tsx create mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_header.tsx create mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_section_ui.tsx create mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_ui.tsx create mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/components/recently_accessed.tsx create mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.helpers.ts create mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/hooks/index.ts create mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/hooks/use_init_navnode.ts rename packages/shared-ux/chrome/navigation/src/ui/v2/{ => hooks}/use_register_tree_node.ts (75%) create mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/analytics.ts create mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/devtools.ts create mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/index.ts create mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/management.ts create mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/ml.ts delete mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/use_init_navnode.ts diff --git a/packages/core/chrome/core-chrome-browser/src/project_navigation.ts b/packages/core/chrome/core-chrome-browser/src/project_navigation.ts index deea1a9cb3d52..cd8f634c07836 100644 --- a/packages/core/chrome/core-chrome-browser/src/project_navigation.ts +++ b/packages/core/chrome/core-chrome-browser/src/project_navigation.ts @@ -7,6 +7,7 @@ */ import type { ComponentType } from 'react'; +import type { ChromeNavLink } from './nav_links'; /** @internal */ type AppId = string; @@ -17,20 +18,38 @@ type DeepLinkId = string; /** @internal */ export type AppDeepLinkId = `${AppId}:${DeepLinkId}`; -/** @public */ +/** + * @public + * + * App id or deeplink id + */ export type ChromeProjectNavigationLink = AppId | AppDeepLinkId; /** @public */ export interface ChromeProjectNavigationNode { - id?: string; - link?: ChromeProjectNavigationLink; - children?: ChromeProjectNavigationNode[]; - title?: string; + /** Optional id, if not passed a "link" must be provided. */ + id: string; + /** Optional title. If not provided and a "link" is provided the title will be the Deep link title */ + title: string; + /** Path in the tree of the node */ + path: string[]; + /** App id or deeplink id */ + deepLink?: ChromeNavLink; + /** Optional icon for the navigation node. Note: not all navigation depth will render the icon */ icon?: string; + /** Optional children of the navigation node */ + children?: ChromeProjectNavigationNode[]; } /** @public */ export interface ChromeProjectNavigation { + /** + * The URL href for the home link + */ + homeRef: string; + /** + * The navigation tree representation of the side bar navigation. + */ navigationTree: ChromeProjectNavigationNode[]; } diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/cloud_link.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/components/cloud_link.tsx new file mode 100644 index 0000000000000..8e8ac169eded9 --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/components/cloud_link.tsx @@ -0,0 +1,64 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ +import { EuiCollapsibleNavGroup, EuiLink } from '@elastic/eui'; +import React, { FC } from 'react'; +import { getI18nStrings } from '../../i18n_strings'; + +const i18nTexts = getI18nStrings(); + +const presets = { + projects: { + href: 'https://cloud.elastic.co/projects', + icon: 'spaces', + title: i18nTexts.linkToCloudProjects, + dataTestSubj: 'nav-header-link-to-projects', + }, + deployments: { + href: 'https://cloud.elastic.co/deployments', + icon: 'spaces', + title: i18nTexts.linkToCloudDeployments, + dataTestSubj: 'nav-header-link-to-deployments', + }, +}; + +export interface Props { + /** Use one of the cloud link presets */ + preset?: 'projects' | 'deployments' | null; + /** Optional. If "preset" is not provided it is required */ + href?: string; + /** Optional. If "preset" is not provided it is required */ + icon?: string; + /** Optional. If "preset" is not provided it is required */ + title?: string; +} + +export const CloudLink: FC = ({ preset, href: _href, icon: _icon, title: _title }) => { + if (preset === null) { + return null; + } + + if (!preset && (!_href || !_icon || !_title)) { + throw new Error(`Navigation.CloudLink requires href, icon, and title`); + } + + const { href, icon, title, dataTestSubj } = + preset && presets[preset] + ? presets[preset]! + : { + href: _href, + icon: _icon, + title: _title, + dataTestSubj: 'nav-header-link-to-cloud', + }; + + return ( + + + + ); +}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/index.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/components/index.ts index 50ab11e2263b7..bb7aeacdfabb7 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/components/index.ts +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/components/index.ts @@ -6,4 +6,6 @@ * Side Public License, v 1. */ +export type { Props as CloudLinkProps } from './cloud_link'; export { Navigation } from './navigation'; +export type { Props as RecentlyAccessedProps } from './recently_accessed'; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.test.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.test.tsx index 2f5a3781cb3a2..80bc5cd0c7abe 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.test.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.test.tsx @@ -14,16 +14,101 @@ import type { ChromeNavLink } from '@kbn/core-chrome-browser'; import { getServicesMock } from '../../../../mocks/src/jest'; import { NavigationProvider } from '../../../services'; import { Navigation } from './navigation'; +import { defaultNavigationTree } from '../default_navigation.test.helpers'; describe('', () => { const services = getServicesMock(); describe('builds the navigation tree', () => { + test('render reference UI and build the navigation tree', async () => { + const onProjectNavigationChange = jest.fn(); + + const { findByTestId } = render( + + + + + + + + + + + + + + + ); + + expect(await findByTestId('nav-item-group1.item1')).toBeVisible(); + expect(await findByTestId('nav-item-group1.item2')).toBeVisible(); + expect(await findByTestId('nav-item-group1.group1A')).toBeVisible(); + expect(await findByTestId('nav-item-group1.group1A.item1')).toBeVisible(); + expect(await findByTestId('nav-item-group1.group1A.group1A_1')).toBeVisible(); + + // Click the last group to expand and show the last depth + (await findByTestId('nav-item-group1.group1A.group1A_1')).click(); + + expect(await findByTestId('nav-item-group1.group1A.group1A_1.item1')).toBeVisible(); + + expect(onProjectNavigationChange).toHaveBeenCalled(); + const lastCall = + onProjectNavigationChange.mock.calls[onProjectNavigationChange.mock.calls.length - 1]; + const [navTree] = lastCall; + + expect(navTree).toEqual({ + homeRef: 'https://elastic.co', + navigationTree: [ + { + id: 'group1', + path: ['group1'], + title: '', + children: [ + { + id: 'item1', + title: 'Item 1', + path: ['group1', 'item1'], + }, + { + id: 'item2', + title: 'Item 2', + path: ['group1', 'item2'], + }, + { + id: 'group1A', + title: 'Group1A', + path: ['group1', 'group1A'], + children: [ + { + id: 'item1', + title: 'Group 1A Item 1', + path: ['group1', 'group1A', 'item1'], + }, + { + id: 'group1A_1', + title: 'Group1A_1', + path: ['group1', 'group1A', 'group1A_1'], + children: [ + { + id: 'item1', + title: 'Group 1A_1 Item 1', + path: ['group1', 'group1A', 'group1A_1', 'item1'], + }, + ], + }, + ], + }, + ], + }, + ], + }); + }); + test('should read the title from props, children or deeplink', async () => { const navLinks$: Observable = of([ { - id: 'item3', - title: 'Title from deeplink!', + id: 'item1', + title: 'Title from deeplink', baseUrl: '', url: '', href: '', @@ -38,19 +123,16 @@ describe('', () => { navLinks$={navLinks$} onProjectNavigationChange={onProjectNavigationChange} > - - Title in children - - {/* Title will be read from the deeplink */} - - {/* Title will be read from the props */} - - {/* Title will be read from the children */} - - Override the deeplink with children - - {/* Should not appear */} - + + + + {/* Title from deeplink */} + + + + Title in children + + ); @@ -61,57 +143,138 @@ describe('', () => { const [navTree] = lastCall; expect(navTree).toEqual({ + homeRef: 'https://elastic.co', navigationTree: [ { - id: 'item1', - title: 'Title in children', - }, - { - id: 'item2', - title: 'Title in props', - }, - { - id: 'item3-a', - title: 'Title from deeplink!', - deepLink: { - id: 'item3', - title: 'Title from deeplink!', - baseUrl: '', - url: '', - href: '', - }, - }, - { - id: 'item3-b', - title: 'Override the deeplink with props', - deepLink: { - id: 'item3', - title: 'Title from deeplink!', - baseUrl: '', - url: '', - href: '', - }, + id: 'root', + path: ['root'], + title: '', + children: [ + { + id: 'group1', + path: ['root', 'group1'], + title: '', + children: [ + { + id: 'item1', + path: ['root', 'group1', 'item1'], + title: 'Title from deeplink', + deepLink: { + id: 'item1', + title: 'Title from deeplink', + baseUrl: '', + url: '', + href: '', + }, + }, + { + id: 'item2', + title: 'Overwrite deeplink title', + path: ['root', 'group1', 'item2'], + deepLink: { + id: 'item1', + title: 'Title from deeplink', + baseUrl: '', + url: '', + href: '', + }, + }, + { + id: 'item3', + title: 'Title in props', + path: ['root', 'group1', 'item3'], + }, + { + id: 'item4', + path: ['root', 'group1', 'item4'], + title: 'Title in children', + }, + ], + }, + ], }, + ], + }); + }); + + test('should filter out unknown deeplinks', async () => { + const navLinks$: Observable = of([ + { + id: 'item1', + title: 'Title from deeplink', + baseUrl: '', + url: '', + href: '', + }, + ]); + + const onProjectNavigationChange = jest.fn(); + + const { findByTestId } = render( + + + + + {/* Title from deeplink */} + + {/* Should not appear */} + + + + + + ); + + expect(await findByTestId('nav-item-root.group1.item1')).toBeVisible(); + expect(await findByTestId('nav-item-root.group1.item1')).toBeVisible(); + + expect(onProjectNavigationChange).toHaveBeenCalled(); + const lastCall = + onProjectNavigationChange.mock.calls[onProjectNavigationChange.mock.calls.length - 1]; + const [navTree] = lastCall; + + expect(navTree).toEqual({ + homeRef: 'https://elastic.co', + navigationTree: [ { - id: 'item3-c', - title: 'Override the deeplink with children', - deepLink: { - id: 'item3', - title: 'Title from deeplink!', - baseUrl: '', - url: '', - href: '', - }, + id: 'root', + path: ['root'], + title: '', + children: [ + { + id: 'group1', + path: ['root', 'group1'], + title: '', + children: [ + { + id: 'item1', + path: ['root', 'group1', 'item1'], + title: 'Title from deeplink', + deepLink: { + id: 'item1', + title: 'Title from deeplink', + baseUrl: '', + url: '', + href: '', + }, + }, + ], + }, + ], }, ], }); }); - test('should render any level of depth', async () => { + test('should render custom react element', async () => { const navLinks$: Observable = of([ { - id: 'item3', - title: 'Title from deeplink!', + id: 'item1', + title: 'Title from deeplink', baseUrl: '', url: '', href: '', @@ -120,56 +283,69 @@ describe('', () => { const onProjectNavigationChange = jest.fn(); - render( + const { findByTestId } = render( - - - - {/* Will read the title from the deeplink */} - - - + + + + +
Custom element
+ + + {(navNode) =>
{navNode.title}
} + ); + expect(await findByTestId('my-custom-element')).toBeVisible(); + expect(await findByTestId('my-other-custom-element')).toBeVisible(); + expect(await (await findByTestId('my-other-custom-element')).textContent).toBe( + 'Children prop' + ); + expect(onProjectNavigationChange).toHaveBeenCalled(); const lastCall = onProjectNavigationChange.mock.calls[onProjectNavigationChange.mock.calls.length - 1]; const [navTree] = lastCall; expect(navTree).toEqual({ + homeRef: 'https://elastic.co', navigationTree: [ { - id: 'item1', - title: 'Item 1', + id: 'root', + path: ['root'], + title: '', children: [ { - id: 'item1', - title: 'Item 1', + id: 'group1', + path: ['root', 'group1'], + title: '', children: [ { - id: 'item3', - title: 'Title from deeplink!', + id: 'item1', + path: ['root', 'group1', 'item1'], + title: 'Title from deeplink', + renderItem: expect.any(Function), deepLink: { + id: 'item1', + title: 'Title from deeplink', baseUrl: '', - href: '', - id: 'item3', - title: 'Title from deeplink!', url: '', + href: '', }, - children: [ - { - id: 'item1', - title: 'Item 1', - }, - ], + }, + { + id: 'item2', + path: ['root', 'group1', 'item2'], + title: 'Children prop', + renderItem: expect.any(Function), }, ], }, @@ -179,9 +355,78 @@ describe('', () => { }); }); - test.skip('does not render in the UI the nodes that points to unexisting deeplinks', async () => { - // TODO: This test will be added when we'll have the UI and be able to add - // data-test-subj to all the nodes with their paths + test('should render group preset (analytics, ml...)', async () => { + const onProjectNavigationChange = jest.fn(); + + render( + + + + + + + + + ); + + expect(onProjectNavigationChange).toHaveBeenCalled(); + const lastCall = + onProjectNavigationChange.mock.calls[onProjectNavigationChange.mock.calls.length - 1]; + const [navTree] = lastCall; + + expect(navTree).toEqual({ + homeRef: 'https://elastic.co', + navigationTree: defaultNavigationTree.map(({ type, ...rest }) => rest), + }); + }); + + test('should render cloud link', async () => { + const onProjectNavigationChange = jest.fn(); + + const { findByTestId } = render( + + + + + + + + + + + + ); + + expect(await findByTestId('nav-header-link-to-projects')).toBeVisible(); + expect(await findByTestId('nav-header-link-to-deployments')).toBeVisible(); + expect(await findByTestId('nav-header-link-to-cloud')).toBeVisible(); + expect(await (await findByTestId('nav-header-link-to-cloud')).textContent).toBe( + 'Custom link' + ); + }); + + test('should render recently accessed items', async () => { + const recentlyAccessed$ = of([ + { label: 'This is an example', link: '/app/example/39859', id: '39850' }, + { label: 'Another example', link: '/app/example/5235', id: '5235' }, + ]); + + const { findByTestId } = render( + + + + + + + + + + ); + + expect(await findByTestId('nav-bucket-recentlyAccessed')).toBeVisible(); + expect(await (await findByTestId('nav-bucket-recentlyAccessed')).textContent).toBe( + 'RecentThis is an exampleAnother example' + ); }); }); }); diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.tsx index 378648c26012d..2cbbe766059d6 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.tsx @@ -16,14 +16,21 @@ import React, { useContext, useRef, } from 'react'; +import type { ChromeProjectNavigationNode } from '@kbn/core-chrome-browser'; import { useNavigation as useNavigationServices } from '../../../services'; -import { InternalNavigationNode, RegisterFunction } from '../types'; +import { RegisterFunction, UnRegisterFunction } from '../types'; +import { CloudLink } from './cloud_link'; +import { NavigationFooter } from './navigation_footer'; import { NavigationGroup } from './navigation_group'; import { NavigationItem } from './navigation_item'; +import { NavigationUI } from './navigation_ui'; +import { RecentlyAccessed } from './recently_accessed'; interface Context { register: RegisterFunction; + updateFooterChildren: (children: ReactNode) => void; + unstyled: boolean; } const NavigationContext = createContext({ @@ -31,14 +38,24 @@ const NavigationContext = createContext({ unregister: () => {}, path: [], }), + updateFooterChildren: () => {}, + unstyled: false, }); interface Props { children: ReactNode; - onRootItemRemove?: (id: string) => void; + /** + * Href to the home page + */ + homeRef: string; + /** + * Flag to indicate if the Navigation should not be styled with EUI components. + * If set to true, the children will be rendered as is. + */ + unstyled?: boolean; } -export function Navigation({ children, onRootItemRemove }: Props) { +export function Navigation({ children, homeRef, unstyled = false }: Props) { const { onProjectNavigationChange } = useNavigationServices(); // We keep a reference of the order of the children that register themselves when mounting. @@ -47,12 +64,21 @@ export function Navigation({ children, onRootItemRemove }: Props) { const orderChildrenRef = useRef>({}); const idx = useRef(0); - const [navigationItems, setNavigationItems] = useState>( - {} - ); + const [navigationItems, setNavigationItems] = useState< + Record + >({}); + const [footerChildren, setFooterChildren] = useState(null); + + const unregister: UnRegisterFunction = useCallback((id: string) => { + setNavigationItems((prevItems) => { + const updatedItems = { ...prevItems }; + delete updatedItems[id]; + return updatedItems; + }); + }, []); const register = useCallback( - (navNode: InternalNavigationNode) => { + (navNode: ChromeProjectNavigationNode) => { orderChildrenRef.current[navNode.id] = idx.current++; setNavigationItems((prevItems) => { @@ -63,44 +89,39 @@ export function Navigation({ children, onRootItemRemove }: Props) { }); return { - unregister: () => { - if (onRootItemRemove) { - onRootItemRemove(navNode.id); - } - - setNavigationItems((prevItems) => { - const updatedItems = { ...prevItems }; - delete updatedItems[navNode.id]; - return updatedItems; - }); - }, - path: [], + unregister, + path: [navNode.id], }; }, - [onRootItemRemove] + [unregister] ); const contextValue = useMemo( () => ({ register, + updateFooterChildren: setFooterChildren, + unstyled, }), - [register] + [register, unstyled] ); useEffect(() => { - // Send the navigation tree to the Chrome service + // This will update the navigation tree in the Chrome service (calling the serverless.setNavigation()) onProjectNavigationChange({ + homeRef, navigationTree: Object.values(navigationItems).sort((a, b) => { const aOrder = orderChildrenRef.current[a.id]; const bOrder = orderChildrenRef.current[b.id]; return aOrder - bOrder; }), }); - }, [navigationItems, onProjectNavigationChange]); + }, [navigationItems, onProjectNavigationChange, homeRef]); return ( -
    {children}
+ + {children} + ); } @@ -115,3 +136,6 @@ export function useNavigation() { Navigation.Group = NavigationGroup; Navigation.Item = NavigationItem; +Navigation.Footer = NavigationFooter; +Navigation.CloudLink = CloudLink; +Navigation.RecentlyAccessed = RecentlyAccessed; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_bucket.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_bucket.tsx new file mode 100644 index 0000000000000..5d8cc8a989e0c --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_bucket.tsx @@ -0,0 +1,75 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import React, { FC, useCallback } from 'react'; + +import { analytics, devtools, ml, management } from '../nav_tree_presets'; +import { Navigation } from './navigation'; +import type { NavigationGroupPreset, NodeDefinition } from '../types'; + +const navTreePresets: { [preset in NavigationGroupPreset]: NodeDefinition } = { + analytics, + ml, + devtools, + management, +}; + +export interface Props { + preset?: NavigationGroupPreset; + nodeDefinition?: NodeDefinition; + defaultIsCollapsed?: boolean; +} + +export const NavigationBucket: FC = ({ + nodeDefinition: _nodeDefinition, + defaultIsCollapsed, + preset, +}) => { + const nodeDefinition = preset ? navTreePresets[preset] : _nodeDefinition; + + if (!nodeDefinition) { + throw new Error('Either preset or nodeDefinition must be defined'); + } + + const renderItems = useCallback( + (items: NodeDefinition[], isRoot = false) => { + return items.map((item) => { + const id = item.id ?? item.link; + + if (!id) { + throw new Error( + `At least one of id or link must be defined for navigation item ${item.title}` + ); + } + + return ( + + {item.children ? ( + + {renderItems(item.children)} + + ) : ( + + )} + + ); + }); + }, + [defaultIsCollapsed] + ); + + return <>{renderItems([nodeDefinition], true)}; +}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_footer.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_footer.tsx new file mode 100644 index 0000000000000..d4b78c1e93053 --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_footer.tsx @@ -0,0 +1,28 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import React, { useEffect } from 'react'; +import { useNavigation } from './navigation'; + +export interface Props { + children?: React.ReactNode; +} + +function NavigationFooterComp({ children }: Props) { + const { updateFooterChildren } = useNavigation(); + + useEffect(() => { + if (children) { + updateFooterChildren(children); + } + }, [children, updateFooterChildren]); + + return null; +} + +export const NavigationFooter = React.memo(NavigationFooterComp); diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_group.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_group.tsx index 71d33b62f432b..aa896f6bf45e5 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_group.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_group.tsx @@ -8,16 +8,18 @@ import React, { createContext, useCallback, useMemo, useContext } from 'react'; -import { EuiButton } from '@elastic/eui'; -import { useInitNavnode } from '../use_init_navnode'; -import { NodeProps, RegisterFunction } from '../types'; - -export const NavigationGroupContext = createContext(undefined); +import { useInitNavNode } from '../hooks'; +import type { NodeProps, RegisterFunction } from '../types'; +import { NavigationSectionUI } from './navigation_section_ui'; +import { useNavigation } from './navigation'; +import { NavigationBucket, Props as NavigationBucketProps } from './navigation_bucket'; interface Context { register: RegisterFunction; } +export const NavigationGroupContext = createContext(undefined); + export function useNavigationGroup( throwIfNotFound: T = true as T ): T extends true ? Context : Context | undefined { @@ -28,45 +30,48 @@ export function useNavigationGroup( return context as T extends true ? Context : Context | undefined; } -function NavigationGroupComp(node: NodeProps) { - const { children, onRemove } = node; - const { navNode, registerChildNode } = useInitNavnode(node); - const { title, deepLink } = navNode ?? {}; - - const wrapTextWithLink = useCallback( - (text?: string) => - deepLink ? ( - - {text} - - ) : ( - text - ), - [deepLink] - ); +export interface Props extends NodeProps { + unstyled?: boolean; + defaultIsCollapsed?: boolean; +} - const renderTempUIToTestRemoveBehavior = useCallback( - () => - onRemove ? ( - <> - {' '} - onRemove()}> - Remove - - - ) : null, - [onRemove] - ); +function NavigationGroupInternalComp(props: Props) { + const navigationContext = useNavigation(); + const { children, defaultIsCollapsed, ...node } = props; + const { navNode, registerChildNode, path, childrenNodes } = useInitNavNode(node); + + const unstyled = props.unstyled ?? navigationContext.unstyled; const renderContent = useCallback(() => { + if (!path || !navNode) { + return null; + } + + if (unstyled) { + // No UI for unstyled groups + return children; + } + + // Each "top level" group is rendered using the EuiCollapsibleNavGroup component + // inside the NavigationSectionUI. That's how we get the "collapsible" behavior. + const isTopLevel = path && path.length === 1; + return ( <> - {wrapTextWithLink(title)} - {renderTempUIToTestRemoveBehavior()} -
    {children}
+ {isTopLevel && ( + + )} + {/* We render the children so they mount and can register themselves but + visually they don't appear here in the DOM. They are rendered inside the + "items" prop (see ) */} + {children} ); - }, [children, renderTempUIToTestRemoveBehavior, title, wrapTextWithLink]); + }, [navNode, path, childrenNodes, children, defaultIsCollapsed, unstyled]); const contextValue = useMemo(() => { return { @@ -80,10 +85,19 @@ function NavigationGroupComp(node: NodeProps) { return ( - {/* Note: temporary UI. In future PR we'll have an EUI component here */} -
  • {renderContent()}
    • + {renderContent()}     ); } -export const NavigationGroup = React.memo(NavigationGroupComp); +function NavigationGroupComp(props: Props & NavigationBucketProps) { + if (props.preset) { + const { id, title, link, icon, children, ...rest } = props; + return ; + } + + const { preset, nodeDefinition, ...rest } = props; + return ; +} + +export const NavigationGroup = React.memo(NavigationGroupComp) as typeof NavigationGroupComp; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_header.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_header.tsx new file mode 100644 index 0000000000000..92f93e8092979 --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_header.tsx @@ -0,0 +1,61 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import React, { FC } from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiHeaderLogo, EuiLoadingSpinner } from '@elastic/eui'; +import useObservable from 'react-use/lib/useObservable'; +import { useNavigation as useServices } from '../../../services'; +import { ElasticMark } from '../../elastic_mark'; +import { getI18nStrings } from '../../i18n_strings'; + +import '../../header_logo.scss'; + +interface Props { + homeHref: string; +} + +export const NavHeader: FC = ({ homeHref }) => { + const strings = getI18nStrings(); + const { basePath, navigateToUrl, loadingCount$ } = useServices(); + const loadingCount = useObservable(loadingCount$, 0); + const homeUrl = basePath.prepend(homeHref); + + const navigateHome = (event: React.MouseEvent) => { + event.preventDefault(); + navigateToUrl(homeUrl); + }; + + const logo = + loadingCount === 0 ? ( + + ) : ( + + + + ); + + return ( + + {logo} + + + + + ); +}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_item.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_item.tsx index 0aedd52fb2e07..44ffe44572d6e 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_item.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_item.tsx @@ -6,65 +6,55 @@ * Side Public License, v 1. */ -import { EuiButton } from '@elastic/eui'; -import React, { useCallback } from 'react'; +import React, { Fragment, ReactElement, ReactNode, useEffect } from 'react'; -import { NodeProps } from '../types'; -import { useInitNavnode } from '../use_init_navnode'; +import type { ChromeProjectNavigationNodeEnhanced, NodeProps } from '../types'; +import { useInitNavNode } from '../hooks'; +import { useNavigation } from './navigation'; -function NavigationItemComp(node: NodeProps) { - const { children, onRemove } = node; - const { navNode } = useInitNavnode(node); - const { title, deepLink } = navNode ?? {}; +export interface Props extends NodeProps { + element?: string; + unstyled?: boolean; +} - // Note: temporary UI. In future PR we'll have an EUI component here - const wrapTextWithLink = useCallback( - (text?: string) => - deepLink ? ( - - {text} - - ) : ( - text - ), - [deepLink] - ); +function isReactElement(element: ReactNode): element is ReactElement { + return React.isValidElement(element); +} - const renderContent = useCallback(() => { - if (!children) { - return wrapTextWithLink(title); - } +function NavigationItemComp(props: Props) { + const navigationContext = useNavigation(); + const navNodeRef = React.useRef(null); - if (typeof children === 'string') { - return wrapTextWithLink(children); - } else if (typeof children === 'function') { - return children(deepLink); - } + const { element, children, ...node } = props; + const unstyled = props.unstyled ?? navigationContext.unstyled; + + let renderItem: (() => ReactElement) | undefined; - return children; - }, [children, deepLink, title, wrapTextWithLink]); + if (!unstyled && children && (typeof children === 'function' || isReactElement(children))) { + renderItem = + typeof children === 'function' ? () => children(navNodeRef.current) : () => children; + } - const renderTempUIToTestRemoveBehavior = () => - onRemove ? ( - <> - {' '} - onRemove()}> - Remove - - - ) : null; + const { navNode } = useInitNavNode({ ...node, children, renderItem }); - if (!navNode) { + useEffect(() => { + navNodeRef.current = navNode; + }, [navNode]); + + if (!navNode || !unstyled) { return null; } - return ( - // Note: temporary UI. In future PR we'll have an EUI component here -
  • - {renderContent()} - {renderTempUIToTestRemoveBehavior()} -
    • - ); + if (children) { + if (typeof children === 'function') { + return children(navNode); + } + return <>{children}; + } + + const Element = element || Fragment; + + return {navNode.title}; } export const NavigationItem = React.memo(NavigationItemComp); diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_section_ui.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_section_ui.tsx new file mode 100644 index 0000000000000..1efa885ace4aa --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_section_ui.tsx @@ -0,0 +1,82 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import React, { FC } from 'react'; +import { + EuiCollapsibleNavGroup, + EuiIcon, + EuiSideNav, + EuiSideNavItemType, + EuiText, +} from '@elastic/eui'; +import type { BasePathService, NavigateToUrlFn } from '../../../../types/internal'; +import { navigationStyles as styles } from '../../../styles'; +import { useNavigation as useServices } from '../../../services'; +import { ChromeProjectNavigationNodeEnhanced } from '../types'; + +const navigationNodeToEuiItem = ( + item: ChromeProjectNavigationNodeEnhanced, + { navigateToUrl, basePath }: { navigateToUrl: NavigateToUrlFn; basePath: BasePathService } +): EuiSideNavItemType => { + const href = item.deepLink?.href; + const id = item.path ? item.path.join('.') : item.id; + + return { + id, + name: item.title, + onClick: + href !== undefined + ? (event: React.MouseEvent) => { + event.preventDefault(); + navigateToUrl(basePath.prepend(href!)); + } + : undefined, + href, + renderItem: item.renderItem, + items: item.children?.map((_item) => + navigationNodeToEuiItem(_item, { navigateToUrl, basePath }) + ), + ['data-test-subj']: `nav-item-${id}`, + ...(item.icon && { + icon: , + }), + }; +}; + +interface Props { + navNode: ChromeProjectNavigationNodeEnhanced; + items?: ChromeProjectNavigationNodeEnhanced[]; + defaultIsCollapsed?: boolean; +} + +export const NavigationSectionUI: FC = ({ + navNode, + items = [], + defaultIsCollapsed = true, +}) => { + const { id, title, icon } = navNode; + const { navigateToUrl, basePath } = useServices(); + + return ( + + + navigationNodeToEuiItem(item, { navigateToUrl, basePath }))} + css={styles.euiSideNavItems} + /> + + + ); +}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_ui.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_ui.tsx new file mode 100644 index 0000000000000..7c754b3a9ce76 --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_ui.tsx @@ -0,0 +1,44 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import { EuiCollapsibleNavGroup, EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui'; +import React, { FC } from 'react'; +import { NavHeader } from './navigation_header'; + +interface Props { + homeRef: string; + unstyled?: boolean; + footerChildren?: React.ReactNode; +} + +export const NavigationUI: FC = ({ children, unstyled, footerChildren, homeRef }) => { + const { euiTheme } = useEuiTheme(); + + return ( + <> + + + + + {unstyled ? ( + <>{children} + ) : ( + + {children} + + {footerChildren && {footerChildren}} + + )} + + ); +}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/recently_accessed.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/components/recently_accessed.tsx new file mode 100644 index 0000000000000..0c5b0b0ead1fe --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/components/recently_accessed.tsx @@ -0,0 +1,64 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import { EuiCollapsibleNavGroup, EuiSideNav, EuiSideNavItemType } from '@elastic/eui'; +import React, { FC } from 'react'; +import useObservable from 'react-use/lib/useObservable'; +import type { Observable } from 'rxjs'; + +import { RecentItem } from '../../../../types/internal'; +import { useNavigation as useServices } from '../../../services'; +import { navigationStyles as styles } from '../../../styles'; + +import { getI18nStrings } from '../../i18n_strings'; + +export interface Props { + recentlyAccessed$?: Observable; + /** + * If true, the recently accessed list will be collapsed by default. + * @default false + */ + defaultIsCollapsed?: boolean; +} + +export const RecentlyAccessed: FC = ({ + recentlyAccessed$: recentlyAccessedProp$, + defaultIsCollapsed = false, +}) => { + const strings = getI18nStrings(); + const { recentlyAccessed$ } = useServices(); + const recentlyAccessed = useObservable(recentlyAccessedProp$ ?? recentlyAccessed$, []); + + if (recentlyAccessed.length === 0) { + return null; + } + + const navItems: Array> = [ + { + name: '', // no list header title + id: 'recents_root', + items: recentlyAccessed.map(({ id, label, link }) => ({ + id, + name: label, + href: link, + })), + }, + ]; + + return ( + + + + ); +}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.helpers.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.helpers.ts new file mode 100644 index 0000000000000..2b5f1a85e5d56 --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.helpers.ts @@ -0,0 +1,449 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +/** + * This is the default navigation tree that is added to a project + * when only a project navigation tree is provided. + * NOTE: This will have to be updated once we add the deep link ids as each of the node + * will contain the deep link information. + */ +export const defaultNavigationTree = [ + { + type: 'navGroup', + id: 'sharedux:analytics', + title: 'Data exploration', + icon: 'stats', + path: ['sharedux:analytics'], + children: [ + { + id: 'root', + path: ['sharedux:analytics', 'root'], + title: '', + children: [ + { + id: 'discover', + title: 'Discover', + path: ['sharedux:analytics', 'root', 'discover'], + }, + { + id: 'dashboard', + title: 'Dashboard', + path: ['sharedux:analytics', 'root', 'dashboard'], + }, + { + id: 'visualize', + title: 'Visualize library', + path: ['sharedux:analytics', 'root', 'visualize'], + }, + ], + }, + ], + }, + { + type: 'navGroup', + id: 'sharedux:ml', + title: 'Machine learning', + icon: 'indexMapping', + path: ['sharedux:ml'], + children: [ + { + title: '', + id: 'root', + path: ['sharedux:ml', 'root'], + children: [ + { + title: 'Overview', + id: 'overview', + path: ['sharedux:ml', 'root', 'overview'], + }, + { + title: 'Notifications', + id: 'notifications', + path: ['sharedux:ml', 'root', 'notifications'], + }, + ], + }, + { + title: 'Anomaly detection', + id: 'anomaly_detection', + path: ['sharedux:ml', 'anomaly_detection'], + children: [ + { + title: 'Jobs', + id: 'jobs', + path: ['sharedux:ml', 'anomaly_detection', 'jobs'], + }, + { + title: 'Anomaly explorer', + id: 'explorer', + path: ['sharedux:ml', 'anomaly_detection', 'explorer'], + }, + { + title: 'Single metric viewer', + id: 'single_metric_viewer', + path: ['sharedux:ml', 'anomaly_detection', 'single_metric_viewer'], + }, + { + title: 'Settings', + id: 'settings', + path: ['sharedux:ml', 'anomaly_detection', 'settings'], + }, + ], + }, + { + title: 'Data frame analytics', + id: 'data_frame_analytics', + path: ['sharedux:ml', 'data_frame_analytics'], + children: [ + { + title: 'Jobs', + id: 'jobs', + path: ['sharedux:ml', 'data_frame_analytics', 'jobs'], + }, + { + title: 'Results explorer', + id: 'results_explorer', + path: ['sharedux:ml', 'data_frame_analytics', 'results_explorer'], + }, + { + title: 'Analytics map', + id: 'analytics_map', + path: ['sharedux:ml', 'data_frame_analytics', 'analytics_map'], + }, + ], + }, + { + title: 'Model management', + id: 'model_management', + path: ['sharedux:ml', 'model_management'], + children: [ + { + title: 'Trained models', + id: 'trained_models', + path: ['sharedux:ml', 'model_management', 'trained_models'], + }, + { + title: 'Nodes', + id: 'nodes', + path: ['sharedux:ml', 'model_management', 'nodes'], + }, + ], + }, + { + title: 'Data visualizer', + id: 'data_visualizer', + path: ['sharedux:ml', 'data_visualizer'], + children: [ + { + title: 'File', + id: 'file', + path: ['sharedux:ml', 'data_visualizer', 'file'], + }, + { + title: 'Data view', + id: 'data_view', + path: ['sharedux:ml', 'data_visualizer', 'data_view'], + }, + ], + }, + { + title: 'AIOps labs', + id: 'aiops_labs', + path: ['sharedux:ml', 'aiops_labs'], + children: [ + { + title: 'Explain log rate spikes', + id: 'explain_log_rate_spikes', + path: ['sharedux:ml', 'aiops_labs', 'explain_log_rate_spikes'], + }, + { + title: 'Log pattern analysis', + id: 'log_pattern_analysis', + path: ['sharedux:ml', 'aiops_labs', 'log_pattern_analysis'], + }, + ], + }, + ], + }, + { + type: 'navGroup', + title: 'Developer tools', + id: 'sharedux:devtools', + icon: 'editorCodeBlock', + path: ['sharedux:devtools'], + children: [ + { + id: 'root', + path: ['sharedux:devtools', 'root'], + title: '', + children: [ + { + title: 'Console', + id: 'console', + path: ['sharedux:devtools', 'root', 'console'], + }, + { + title: 'Search profiler', + id: 'search_profiler', + path: ['sharedux:devtools', 'root', 'search_profiler'], + }, + { + title: 'Grok debugger', + id: 'grok_debugger', + path: ['sharedux:devtools', 'root', 'grok_debugger'], + }, + { + title: 'Painless lab', + id: 'painless_lab', + path: ['sharedux:devtools', 'root', 'painless_lab'], + }, + ], + }, + ], + }, + { + type: 'navGroup', + id: 'sharedux:management', + title: 'Management', + icon: 'gear', + path: ['sharedux:management'], + children: [ + { + title: '', + id: 'root', + path: ['sharedux:management', 'root'], + children: [ + { + title: 'Stack monitoring', + id: 'stack_monitoring', + path: ['sharedux:management', 'root', 'stack_monitoring'], + }, + ], + }, + { + title: 'Integration management', + id: 'integration_management', + path: ['sharedux:management', 'integration_management'], + children: [ + { + title: 'Integrations', + id: 'integrations', + path: ['sharedux:management', 'integration_management', 'integrations'], + }, + { + title: 'Fleet', + id: 'fleet', + path: ['sharedux:management', 'integration_management', 'fleet'], + }, + { + title: 'Osquery', + id: 'osquery', + path: ['sharedux:management', 'integration_management', 'osquery'], + }, + ], + }, + { + title: 'Stack management', + id: 'stack_management', + path: ['sharedux:management', 'stack_management'], + children: [ + { + title: 'Upgrade assistant', + id: 'upgrade_assistant', + path: ['sharedux:management', 'stack_management', 'upgrade_assistant'], + }, + { + title: 'Ingest', + id: 'ingest', + path: ['sharedux:management', 'stack_management', 'ingest'], + children: [ + { + title: 'Ingest pipelines', + id: 'ingest_pipelines', + path: ['sharedux:management', 'stack_management', 'ingest', 'ingest_pipelines'], + }, + { + title: 'Logstash pipelines', + id: 'logstash_pipelines', + path: ['sharedux:management', 'stack_management', 'ingest', 'logstash_pipelines'], + }, + ], + }, + { + title: 'Data', + id: 'data', + path: ['sharedux:management', 'stack_management', 'data'], + children: [ + { + title: 'Index management', + id: 'index_management', + path: ['sharedux:management', 'stack_management', 'data', 'index_management'], + }, + { + title: 'Index lifecycle policies', + id: 'index_lifecycle_policies', + path: [ + 'sharedux:management', + 'stack_management', + 'data', + 'index_lifecycle_policies', + ], + }, + { + title: 'Snapshot and restore', + id: 'snapshot_and_restore', + path: ['sharedux:management', 'stack_management', 'data', 'snapshot_and_restore'], + }, + { + title: 'Rollup jobs', + id: 'rollup_jobs', + path: ['sharedux:management', 'stack_management', 'data', 'rollup_jobs'], + }, + { + title: 'Transforms', + id: 'transforms', + path: ['sharedux:management', 'stack_management', 'data', 'transforms'], + }, + { + title: 'Cross-cluster replication', + id: 'cross_cluster_replication', + path: [ + 'sharedux:management', + 'stack_management', + 'data', + 'cross_cluster_replication', + ], + }, + { + title: 'Remote clusters', + id: 'remote_clusters', + path: ['sharedux:management', 'stack_management', 'data', 'remote_clusters'], + }, + ], + }, + { + title: 'Alerts and insights', + id: 'alerts_and_insights', + path: ['sharedux:management', 'stack_management', 'alerts_and_insights'], + children: [ + { + title: 'Rules', + id: 'rules', + path: ['sharedux:management', 'stack_management', 'alerts_and_insights', 'rules'], + }, + { + title: 'Cases', + id: 'cases', + path: ['sharedux:management', 'stack_management', 'alerts_and_insights', 'cases'], + }, + { + title: 'Connectors', + id: 'connectors', + path: [ + 'sharedux:management', + 'stack_management', + 'alerts_and_insights', + 'connectors', + ], + }, + { + title: 'Reporting', + id: 'reporting', + path: [ + 'sharedux:management', + 'stack_management', + 'alerts_and_insights', + 'reporting', + ], + }, + { + title: 'Machine learning', + id: 'machine_learning', + path: [ + 'sharedux:management', + 'stack_management', + 'alerts_and_insights', + 'machine_learning', + ], + }, + { + title: 'Watcher', + id: 'watcher', + path: ['sharedux:management', 'stack_management', 'alerts_and_insights', 'watcher'], + }, + ], + }, + { + title: 'Security', + id: 'security', + path: ['sharedux:management', 'stack_management', 'security'], + children: [ + { + title: 'Users', + id: 'users', + path: ['sharedux:management', 'stack_management', 'security', 'users'], + }, + { + title: 'Roles', + id: 'roles', + path: ['sharedux:management', 'stack_management', 'security', 'roles'], + }, + { + title: 'Role mappings', + id: 'role_mappings', + path: ['sharedux:management', 'stack_management', 'security', 'role_mappings'], + }, + { + title: 'API keys', + id: 'api_keys', + path: ['sharedux:management', 'stack_management', 'security', 'api_keys'], + }, + ], + }, + { + title: 'Kibana', + id: 'kibana', + path: ['sharedux:management', 'stack_management', 'kibana'], + children: [ + { + title: 'Data view', + id: 'data_views', + path: ['sharedux:management', 'stack_management', 'kibana', 'data_views'], + }, + { + title: 'Saved objects', + id: 'saved_objects', + path: ['sharedux:management', 'stack_management', 'kibana', 'saved_objects'], + }, + { + title: 'Tags', + id: 'tags', + path: ['sharedux:management', 'stack_management', 'kibana', 'tags'], + }, + { + title: 'Search sessions', + id: 'search_sessions', + path: ['sharedux:management', 'stack_management', 'kibana', 'search_sessions'], + }, + { + title: 'Spaces', + id: 'spaces', + path: ['sharedux:management', 'stack_management', 'kibana', 'spaces'], + }, + { + title: 'Advanced settings', + id: 'advanced_settings', + path: ['sharedux:management', 'stack_management', 'kibana', 'advanced_settings'], + }, + ], + }, + ], + }, + ], + }, +]; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.tsx index 89ef5c8017734..496f693a82ee4 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.tsx @@ -9,21 +9,142 @@ import React from 'react'; import { render } from '@testing-library/react'; import { type Observable, of } from 'rxjs'; -import type { ChromeNavLink, ChromeProjectNavigationNode } from '@kbn/core-chrome-browser'; +import type { ChromeNavLink } from '@kbn/core-chrome-browser'; import { getServicesMock } from '../../../mocks/src/jest'; import { NavigationProvider } from '../../services'; import { DefaultNavigation } from './default_navigation'; +import type { ProjectNavigationTreeDefinition, RootNavigationItemDefinition } from './types'; +import { defaultNavigationTree } from './default_navigation.test.helpers'; + +const defaultProps = { + homeRef: 'https://elastic.co', +}; describe('', () => { const services = getServicesMock(); - describe('builds the navigation tree', () => { - test('should read the title from config or deeplink', async () => { + describe('builds custom navigation tree', () => { + test('render reference UI and build the navigation tree', async () => { + const onProjectNavigationChange = jest.fn(); + + const navigationBody: RootNavigationItemDefinition[] = [ + { + type: 'navGroup', + id: 'group1', + children: [ + { + id: 'item1', + title: 'Item 1', + }, + { + id: 'item2', + title: 'Item 2', + }, + { + id: 'group1A', + title: 'Group1A', + children: [ + { + id: 'item1', + title: 'Group 1A Item 1', + }, + { + id: 'group1A_1', + title: 'Group1A_1', + children: [ + { + id: 'item1', + title: 'Group 1A_1 Item 1', + }, + ], + }, + ], + }, + ], + }, + ]; + + const { findByTestId } = render( + + + + ); + + expect(await findByTestId('nav-item-group1.item1')).toBeVisible(); + expect(await findByTestId('nav-item-group1.item2')).toBeVisible(); + expect(await findByTestId('nav-item-group1.group1A')).toBeVisible(); + expect(await findByTestId('nav-item-group1.group1A.item1')).toBeVisible(); + expect(await findByTestId('nav-item-group1.group1A.group1A_1')).toBeVisible(); + + // Click the last group to expand and show the last depth + (await findByTestId('nav-item-group1.group1A.group1A_1')).click(); + + expect(await findByTestId('nav-item-group1.group1A.group1A_1.item1')).toBeVisible(); + + expect(onProjectNavigationChange).toHaveBeenCalled(); + const lastCall = + onProjectNavigationChange.mock.calls[onProjectNavigationChange.mock.calls.length - 1]; + const [navTreeGenerated] = lastCall; + + expect(navTreeGenerated).toEqual({ + homeRef: 'https://elastic.co', + navigationTree: [ + { + id: 'group1', + path: ['group1'], + title: '', + children: [ + { + id: 'item1', + title: 'Item 1', + path: ['group1', 'item1'], + }, + { + id: 'item2', + title: 'Item 2', + path: ['group1', 'item2'], + }, + { + id: 'group1A', + title: 'Group1A', + path: ['group1', 'group1A'], + children: [ + { + id: 'item1', + title: 'Group 1A Item 1', + path: ['group1', 'group1A', 'item1'], + }, + { + id: 'group1A_1', + title: 'Group1A_1', + path: ['group1', 'group1A', 'group1A_1'], + children: [ + { + id: 'item1', + title: 'Group 1A_1 Item 1', + path: ['group1', 'group1A', 'group1A_1', 'item1'], + }, + ], + }, + ], + }, + ], + }, + ], + }); + }); + + test('should read the title from deeplink', async () => { const navLinks$: Observable = of([ { - id: 'item2', - title: 'Title from deeplink!', + id: 'item1', + title: 'Title from deeplink', baseUrl: '', url: '', href: '', @@ -32,23 +153,31 @@ describe('', () => { const onProjectNavigationChange = jest.fn(); - const navTreeConfig: ChromeProjectNavigationNode[] = [ + const navigationBody: RootNavigationItemDefinition[] = [ { - id: 'item1', - title: 'Item 1', - }, - { - id: 'item2-a', - link: 'item2', // Title from deeplink - }, - { - id: 'item2-b', - link: 'item2', - title: 'Override the deeplink with props', - }, - { - link: 'disabled', - title: 'Should NOT be there', + type: 'navGroup', + id: 'root', + children: [ + { + id: 'group1', + children: [ + { + id: 'item1', + link: 'item1', // Title from deeplink + }, + { + id: 'item2', + link: 'item1', // Overwrite title from deeplink + title: 'Overwrite deeplink title', + }, + { + id: 'item3', + link: 'unknown', // Unknown deeplink + title: 'Should not be rendered', + }, + ], + }, + ], }, ]; @@ -58,7 +187,12 @@ describe('', () => { navLinks$={navLinks$} onProjectNavigationChange={onProjectNavigationChange} > - + ); @@ -68,38 +202,119 @@ describe('', () => { const [navTreeGenerated] = lastCall; expect(navTreeGenerated).toEqual({ + homeRef: 'https://elastic.co', navigationTree: [ { - id: 'item1', - title: 'Item 1', - }, - { - id: 'item2-a', - title: 'Title from deeplink!', - deepLink: { - id: 'item2', - title: 'Title from deeplink!', - baseUrl: '', - url: '', - href: '', - }, - }, - { - id: 'item2-b', - title: 'Override the deeplink with props', - deepLink: { - id: 'item2', - title: 'Title from deeplink!', - baseUrl: '', - url: '', - href: '', - }, + id: 'root', + path: ['root'], + title: '', + children: [ + { + id: 'group1', + path: ['root', 'group1'], + title: '', + children: [ + { + id: 'item1', + path: ['root', 'group1', 'item1'], + title: 'Title from deeplink', + deepLink: { + id: 'item1', + title: 'Title from deeplink', + baseUrl: '', + url: '', + href: '', + }, + }, + { + id: 'item2', + title: 'Overwrite deeplink title', + path: ['root', 'group1', 'item2'], + deepLink: { + id: 'item1', + title: 'Title from deeplink', + baseUrl: '', + url: '', + href: '', + }, + }, + ], + }, + ], }, ], }); }); - test('should render any level of depth', async () => { + test('should render cloud link', async () => { + const navigationBody: RootNavigationItemDefinition[] = [ + { + type: 'cloudLink', + preset: 'deployments', + }, + { + type: 'cloudLink', + preset: 'projects', + }, + { + type: 'cloudLink', + href: 'https://foo.com', + icon: 'myIcon', + title: 'Custom link', + }, + ]; + + const { findByTestId } = render( + + + + ); + + expect(await findByTestId('nav-header-link-to-projects')).toBeVisible(); + expect(await findByTestId('nav-header-link-to-deployments')).toBeVisible(); + expect(await findByTestId('nav-header-link-to-cloud')).toBeVisible(); + expect(await (await findByTestId('nav-header-link-to-cloud')).textContent).toBe( + 'Custom link' + ); + }); + + test('should render recently accessed items', async () => { + const recentlyAccessed$ = of([ + { label: 'This is an example', link: '/app/example/39859', id: '39850' }, + { label: 'Another example', link: '/app/example/5235', id: '5235' }, + ]); + + const navigationBody: RootNavigationItemDefinition[] = [ + { + type: 'recentlyAccessed', + }, + ]; + + const { findByTestId } = render( + + + + ); + + expect(await findByTestId('nav-bucket-recentlyAccessed')).toBeVisible(); + expect(await (await findByTestId('nav-bucket-recentlyAccessed')).textContent).toBe( + 'RecentThis is an exampleAnother example' + ); + }); + }); + + describe('builds the full navigation tree when only custom project is provided', () => { + test('reading the title from config or deeplink', async () => { const navLinks$: Observable = of([ { id: 'item2', @@ -112,25 +327,28 @@ describe('', () => { const onProjectNavigationChange = jest.fn(); - const navTreeConfig: ChromeProjectNavigationNode[] = [ + // Custom project navigation tree definition + const projectNavigationTree: ProjectNavigationTreeDefinition = [ { - id: 'item1', - title: 'Item 1', + id: 'group1', + title: 'Group 1', children: [ { id: 'item1', title: 'Item 1', - children: [ - { - link: 'item2', // Title from deeplink - children: [ - { - id: 'item1', - title: 'Item 1', - }, - ], - }, - ], + }, + { + id: 'item2', + link: 'item2', // Title from deeplink + }, + { + id: 'item3', + link: 'item2', + title: 'Deeplink title overriden', // Override title from deeplink + }, + { + link: 'disabled', + title: 'Should NOT be there', }, ], }, @@ -142,7 +360,7 @@ describe('', () => { navLinks$={navLinks$} onProjectNavigationChange={onProjectNavigationChange} > - + ); @@ -152,43 +370,48 @@ describe('', () => { const [navTreeGenerated] = lastCall; expect(navTreeGenerated).toEqual({ + homeRef: 'https://elastic.co', navigationTree: [ { - id: 'item1', - title: 'Item 1', + id: 'group1', + title: 'Group 1', + path: ['group1'], children: [ { id: 'item1', title: 'Item 1', - children: [ - { - id: 'item2', - title: 'Title from deeplink!', - deepLink: { - id: 'item2', - title: 'Title from deeplink!', - baseUrl: '', - url: '', - href: '', - }, - children: [ - { - id: 'item1', - title: 'Item 1', - }, - ], - }, - ], + path: ['group1', 'item1'], + }, + { + id: 'item2', + path: ['group1', 'item2'], + title: 'Title from deeplink!', + deepLink: { + id: 'item2', + title: 'Title from deeplink!', + baseUrl: '', + url: '', + href: '', + }, + }, + { + id: 'item3', + title: 'Deeplink title overriden', + path: ['group1', 'item3'], + deepLink: { + id: 'item2', + title: 'Title from deeplink!', + baseUrl: '', + url: '', + href: '', + }, }, ], }, + // The default navigation tree is added at the end + ...defaultNavigationTree.map(({ type, ...rest }) => rest), ], }); }); - - test.skip('does not render in the UI the nodes that points to unexisting deeplinks', async () => { - // TODO: This test will be added when we'll have the UI and be able to add - // data-test-subj to all the nodes with their paths - }); }); }); diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.tsx index b3f4145d52d54..e1a34b5e5092d 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.tsx @@ -6,36 +6,103 @@ * Side Public License, v 1. */ -import React, { FC, useCallback, useState } from 'react'; -import { ChromeProjectNavigationNode } from '@kbn/core-chrome-browser'; +import React, { FC, useCallback } from 'react'; import { Navigation } from './components'; +import type { + GroupDefinition, + NavigationGroupPreset, + NavigationTreeDefinition, + NodeDefinition, + ProjectNavigationDefinition, + ProjectNavigationTreeDefinition, + RootNavigationItemDefinition, +} from './types'; +import { CloudLink } from './components/cloud_link'; +import { RecentlyAccessed } from './components/recently_accessed'; +import { NavigationFooter } from './components/navigation_footer'; +import { getPresets } from './nav_tree_presets'; -interface Props { - navTree: ChromeProjectNavigationNode[]; -} +type NodeDefinitionWithPreset = NodeDefinition & { preset?: NavigationGroupPreset }; -export const DefaultNavigation: FC = ({ navTree }) => { - // Temp logic to demo removing items from the tree - const [removedItems, setRemovedItems] = useState>(new Set()); +const isRootNavigationItemDefinition = ( + item: RootNavigationItemDefinition | NodeDefinitionWithPreset +): item is RootNavigationItemDefinition => { + // Only RootNavigationItemDefinition has a "type" property + return (item as RootNavigationItemDefinition).type !== undefined; +}; + +const getDefaultNavigationTree = ( + projectDefinition: ProjectNavigationTreeDefinition +): NavigationTreeDefinition => { + return { + body: [ + { + type: 'cloudLink', + preset: 'deployments', + }, + { + type: 'recentlyAccessed', + }, + ...projectDefinition.map((def) => ({ ...def, type: 'navGroup' as const })), + { + type: 'navGroup', + ...getPresets('analytics'), + }, + { + type: 'navGroup', + ...getPresets('ml'), + }, + ], + footer: [ + { + type: 'navGroup', + ...getPresets('devtools'), + }, + { + type: 'navGroup', + ...getPresets('management'), + }, + ], + }; +}; - const onRemove = useCallback((path: string[]) => { - setRemovedItems((prevItems) => { - const newItems = new Set(prevItems); - newItems.add(path.join('.')); - return newItems; - }); - }, []); +let idCounter = 0; + +export const DefaultNavigation: FC = ({ + homeRef, + projectNavigationTree, + navigationTree, +}) => { + if (!navigationTree && !projectNavigationTree) { + throw new Error('One of navigationTree or projectNavigationTree must be defined'); + } + + const navigationDefinition = !navigationTree + ? getDefaultNavigationTree(projectNavigationTree!) + : navigationTree!; const renderItems = useCallback( - (items: ChromeProjectNavigationNode[], path: string[] = []) => { - const filtered = items.filter(({ id: _id, link = '' }) => { - const id = _id ?? link; - const itemPath = (id ? [...path, id] : path).join('.'); - return !removedItems.has(itemPath); - }); + ( + items: Array = [], + path: string[] = [] + ) => { + return items.map((item) => { + const isRootNavigationItem = isRootNavigationItemDefinition(item); + if (isRootNavigationItem) { + if (item.type === 'cloudLink') { + return ; + } + + if (item.type === 'recentlyAccessed') { + return ; + } + } + + if (item.preset) { + return ; + } - return filtered.map((item) => { const id = item.id ?? item.link; if (!id) { @@ -44,44 +111,32 @@ export const DefaultNavigation: FC = ({ navTree }) => { ); } + const { type, ...rest } = item as GroupDefinition; + return ( - {item.children ? ( - onRemove([...path, id])} - > - {renderItems(item.children, [...path, id])} + {rest.children ? ( + + {renderItems(rest.children, [...path, id])} ) : ( - onRemove([...path, id])} - /> + )} ); }); }, - [removedItems, onRemove] + [] ); - const filteredNavTree = navTree.filter(({ id: _id, link }) => { - const id = _id ?? link; - return !removedItems.has(id ?? ''); - }); - return ( - { - onRemove([id]); - }} - > - {renderItems(filteredNavTree)} + + <> + {renderItems(navigationDefinition.body)} + {navigationDefinition.footer && ( + {renderItems(navigationDefinition.footer)} + )} + ); }; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/hooks/index.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/hooks/index.ts new file mode 100644 index 0000000000000..631ad5f590ce4 --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/hooks/index.ts @@ -0,0 +1,9 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +export { useInitNavNode } from './use_init_navnode'; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/hooks/use_init_navnode.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/hooks/use_init_navnode.ts new file mode 100644 index 0000000000000..2d3e332b7b890 --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/hooks/use_init_navnode.ts @@ -0,0 +1,221 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import { ChromeNavLink, ChromeProjectNavigationNode } from '@kbn/core-chrome-browser'; +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import useObservable from 'react-use/lib/useObservable'; + +import { useNavigation as useNavigationServices } from '../../../services'; +import { + ChromeProjectNavigationNodeEnhanced, + NodeProps, + NodePropsEnhanced, + RegisterFunction, + UnRegisterFunction, +} from '../types'; +import { useRegisterTreeNode } from './use_register_tree_node'; + +function getIdFromNavigationNode({ id: _id, link, title }: NodeProps): string { + const id = _id ?? link; + + if (!id) { + throw new Error(`Id or link prop missing for navigation item [${title}]`); + } + + return id; +} + +function isNodeVisible({ link, deepLink }: { link?: string; deepLink?: ChromeNavLink }) { + if (link && !deepLink) { + // If a link is provided, but no deepLink is found, don't render anything + return false; + } + return true; +} + +function createInternalNavNode( + id: string, + _navNode: NodePropsEnhanced, + deepLinks: Readonly, + path: string[] | null +): ChromeProjectNavigationNodeEnhanced | null { + const { children, link, ...navNode } = _navNode; + const deepLink = deepLinks.find((dl) => dl.id === link); + const isVisible = isNodeVisible({ link, deepLink }); + + const titleFromDeepLinkOrChildren = typeof children === 'string' ? children : deepLink?.title; + const title = navNode.title ?? titleFromDeepLinkOrChildren; + + if (!isVisible) { + return null; + } + + return { + ...navNode, + id, + path: path ?? [id], + title: title ?? '', + deepLink, + }; +} + +export const useInitNavNode = (node: NodePropsEnhanced) => { + /** + * Map of children nodes + */ + const [childrenNodes, setChildrenNodes] = useState< + Record + >({}); + + const isMounted = useRef(false); + + /** + * Flag to indicate if the current node has been registered + */ + const isRegistered = useRef(false); + + /** + * Reference to the unregister function + */ + const unregisterRef = useRef(); + + /** + * Map to keep track of the order of the children when they mount. + * This allows us to keep in sync the nav tree sent to the Chrome service + * with the order of the DOM elements + */ + const orderChildrenRef = useRef>({}); + + /** + * Index to keep track of the order of the children when they mount. + */ + const idx = useRef(0); + + /** + * The current node path, including all of its parents. We'll use it to match it against + * the list of active routes based on current URL location (passed by the Chrome service) + */ + const [nodePath, setNodePath] = useState(null); + + /** + * Whenever a child node is registered, we need to re-register the current node + * on the parent. This state keeps track when child node register. + */ + const [childrenNodesUpdated, setChildrenNodesUpdated] = useState([]); + + const { navLinks$ } = useNavigationServices(); + const deepLinks = useObservable(navLinks$, []); + const { register: registerNodeOnParent } = useRegisterTreeNode(); + + const id = getIdFromNavigationNode(node); + + const internalNavNode = useMemo( + () => createInternalNavNode(id, node, deepLinks, nodePath), + [node, id, deepLinks, nodePath] + ); + + // Register the node on the parent whenever its properties change or whenever + // a child node is registered. + const register = useCallback(() => { + if (!internalNavNode) { + return; + } + + if (!isRegistered.current || childrenNodesUpdated.length > 0) { + const children = Object.values(childrenNodes).sort((a, b) => { + const aOrder = orderChildrenRef.current[a.id]; + const bOrder = orderChildrenRef.current[b.id]; + return aOrder - bOrder; + }); + + const { unregister, path } = registerNodeOnParent({ + ...internalNavNode, + children: children.length ? children : undefined, + }); + + setNodePath(path); + setChildrenNodesUpdated([]); + + unregisterRef.current = unregister; + isRegistered.current = true; + } + }, [internalNavNode, childrenNodesUpdated.length, childrenNodes, registerNodeOnParent]); + + // Un-register from the parent. This will happen when the node is unmounted or if the deeplink + // is not active anymore. + const unregister = useCallback(() => { + isRegistered.current = false; + if (unregisterRef.current) { + unregisterRef.current(id); + unregisterRef.current = undefined; + } + }, [id]); + + const registerChildNode = useCallback( + (childNode) => { + const childPath = nodePath ? [...nodePath, childNode.id] : []; + + setChildrenNodes((prev) => { + return { + ...prev, + [childNode.id]: { + ...childNode, + path: childPath, + }, + }; + }); + + orderChildrenRef.current[childNode.id] = idx.current++; + setChildrenNodesUpdated((prev) => [...prev, childNode.id]); + + return { + unregister: (childId: string) => { + setChildrenNodes((prev) => { + const updatedItems = { ...prev }; + delete updatedItems[childId]; + return updatedItems; + }); + }, + path: childPath, + }; + }, + [nodePath] + ); + + /** Register when mounting and whenever the internal nav node changes */ + useEffect(() => { + if (!isMounted.current) { + return; + } + + if (internalNavNode) { + register(); + } else { + unregister(); + } + }, [unregister, register, internalNavNode]); + + /** Unregister when unmounting */ + useEffect(() => { + isMounted.current = true; + return () => { + isMounted.current = false; + unregister(); + }; + }, [unregister]); + + return useMemo( + () => ({ + navNode: internalNavNode, + path: nodePath, + registerChildNode, + childrenNodes, + }), + [internalNavNode, registerChildNode, nodePath, childrenNodes] + ); +}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/use_register_tree_node.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/hooks/use_register_tree_node.ts similarity index 75% rename from packages/shared-ux/chrome/navigation/src/ui/v2/use_register_tree_node.ts rename to packages/shared-ux/chrome/navigation/src/ui/v2/hooks/use_register_tree_node.ts index 4e5cf26392c93..5ad690b2de2e1 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/use_register_tree_node.ts +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/hooks/use_register_tree_node.ts @@ -8,8 +8,8 @@ import { useMemo } from 'react'; -import { useNavigation } from './components/navigation'; -import { useNavigationGroup } from './components/navigation_group'; +import { useNavigation } from '../components/navigation'; +import { useNavigationGroup } from '../components/navigation_group'; /** * Helper hook that will proxy the correct "register" handler. @@ -17,8 +17,8 @@ import { useNavigationGroup } from './components/navigation_group'; */ export const useRegisterTreeNode = () => { const root = useNavigation(); - const parent = useNavigationGroup(false); - const register = parent ? parent.register : root.register; + const group = useNavigationGroup(false); + const register = group ? group.register : root.register; return useMemo( () => ({ diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/analytics.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/analytics.ts new file mode 100644 index 0000000000000..119b47cd5db3a --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/analytics.ts @@ -0,0 +1,37 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import type { NodeDefinitionWithChildren } from '.'; + +export type ID = 'sharedux:analytics' | 'root' | 'discover' | 'dashboard' | 'visualize'; + +export const analytics: NodeDefinitionWithChildren = { + // Make sure we have a unique id otherwise it might override a custom id from the project + id: 'sharedux:analytics', + title: 'Data exploration', + icon: 'stats', + children: [ + { + id: 'root', + children: [ + { + id: 'discover', + title: 'Discover', + }, + { + id: 'dashboard', + title: 'Dashboard', + }, + { + id: 'visualize', + title: 'Visualize library', + }, + ], + }, + ], +}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/devtools.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/devtools.ts new file mode 100644 index 0000000000000..e0c0dcffcad5f --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/devtools.ts @@ -0,0 +1,46 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import type { NodeDefinitionWithChildren } from '.'; + +export type ID = + | 'sharedux:devtools' + | 'root' + | 'console' + | 'search_profiler' + | 'grok_debugger' + | 'painless_lab'; + +export const devtools: NodeDefinitionWithChildren = { + title: 'Developer tools', + id: 'sharedux:devtools', + icon: 'editorCodeBlock', + children: [ + { + id: 'root', + children: [ + { + title: 'Console', + id: 'console', + }, + { + title: 'Search profiler', + id: 'search_profiler', + }, + { + title: 'Grok debugger', + id: 'grok_debugger', + }, + { + title: 'Painless lab', + id: 'painless_lab', + }, + ], + }, + ], +}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/index.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/index.ts new file mode 100644 index 0000000000000..1cdbdaaa551ea --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/index.ts @@ -0,0 +1,67 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import { cloneDeep } from 'lodash'; +import { NavigationGroupPreset, NodeDefinition } from '../types'; +import { analytics, type ID as AnalyticsID } from './analytics'; +import { devtools, type ID as DevtoolsID } from './devtools'; +import { management, type ID as ManagementID } from './management'; +import { ml, type ID as MlID } from './ml'; + +export { analytics } from './analytics'; +export { devtools } from './devtools'; +export { ml } from './ml'; +export { management } from './management'; + +export type NodeDefinitionWithChildren = NodeDefinition & { + children: Required>['children']; +}; + +export function getPresets(preset: 'devtools'): NodeDefinitionWithChildren; +export function getPresets(preset: 'management'): NodeDefinitionWithChildren; +export function getPresets(preset: 'ml'): NodeDefinitionWithChildren; +export function getPresets(preset: 'analytics'): NodeDefinitionWithChildren; +export function getPresets(preset: 'all'): { + analytics: NodeDefinitionWithChildren; + devtools: NodeDefinitionWithChildren; + ml: NodeDefinitionWithChildren; + management: NodeDefinitionWithChildren; +}; +export function getPresets(preset: NavigationGroupPreset | 'all'): + | NodeDefinitionWithChildren + | NodeDefinitionWithChildren + | NodeDefinitionWithChildren + | NodeDefinitionWithChildren + | { + analytics: NodeDefinitionWithChildren; + devtools: NodeDefinitionWithChildren; + ml: NodeDefinitionWithChildren; + management: NodeDefinitionWithChildren; + } { + if (preset === 'all') { + return { + analytics: cloneDeep(analytics), + devtools: cloneDeep(devtools), + ml: cloneDeep(ml), + management: cloneDeep(management), + }; + } + + switch (preset) { + case 'analytics': + return cloneDeep(analytics); + case 'devtools': + return cloneDeep(devtools); + case 'ml': + return cloneDeep(ml); + case 'management': + return cloneDeep(management); + default: + throw new Error(`Unknown preset: ${preset}`); + } +} diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/management.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/management.ts new file mode 100644 index 0000000000000..3483d0b03ed11 --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/management.ts @@ -0,0 +1,226 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import type { NodeDefinitionWithChildren } from '.'; + +export type ID = + | 'sharedux:management' + | 'root' + | 'stack_monitoring' + | 'integration_management' + | 'integrations' + | 'fleet' + | 'osquery' + | 'stack_management' + | 'ingest' + | 'ingest_pipelines' + | 'logstash_pipelines' + | 'data' + | 'index_management' + | 'index_lifecycle_policies' + | 'snapshot_and_restore' + | 'rollup_jobs' + | 'transforms' + | 'cross_cluster_replication' + | 'remote_clusters' + | 'alerts_and_insights' + | 'rules' + | 'cases' + | 'connectors' + | 'reporting' + | 'machine_learning' + | 'watcher' + | 'security' + | 'users' + | 'roles' + | 'role_mappings' + | 'api_keys' + | 'kibana' + | 'data_views' + | 'saved_objects' + | 'tags' + | 'search_sessions' + | 'spaces' + | 'advanced_settings' + | 'upgrade_assistant'; + +export const management: NodeDefinitionWithChildren = { + id: 'sharedux:management', + title: 'Management', + icon: 'gear', + children: [ + { + title: '', + id: 'root', + children: [ + { + title: 'Stack monitoring', + id: 'stack_monitoring', + }, + ], + }, + { + title: 'Integration management', + id: 'integration_management', + children: [ + { + title: 'Integrations', + id: 'integrations', + }, + { + title: 'Fleet', + id: 'fleet', + }, + { + title: 'Osquery', + id: 'osquery', + }, + ], + }, + { + title: 'Stack management', + id: 'stack_management', + children: [ + { + title: 'Ingest', + id: 'ingest', + children: [ + { + title: 'Ingest pipelines', + id: 'ingest_pipelines', + }, + { + title: 'Logstash pipelines', + id: 'logstash_pipelines', + }, + ], + }, + { + title: 'Data', + id: 'data', + children: [ + { + title: 'Index management', + id: 'index_management', + }, + { + title: 'Index lifecycle policies', + id: 'index_lifecycle_policies', + }, + { + title: 'Snapshot and restore', + id: 'snapshot_and_restore', + }, + { + title: 'Rollup jobs', + id: 'rollup_jobs', + }, + { + title: 'Transforms', + id: 'transforms', + }, + { + title: 'Cross-cluster replication', + id: 'cross_cluster_replication', + }, + { + title: 'Remote clusters', + id: 'remote_clusters', + }, + ], + }, + { + title: 'Alerts and insights', + id: 'alerts_and_insights', + children: [ + { + title: 'Rules', + id: 'rules', + }, + { + title: 'Cases', + id: 'cases', + }, + { + title: 'Connectors', + id: 'connectors', + }, + { + title: 'Reporting', + id: 'reporting', + }, + { + title: 'Machine learning', + id: 'machine_learning', + }, + { + title: 'Watcher', + id: 'watcher', + }, + ], + }, + { + title: 'Security', + id: 'security', + children: [ + { + title: 'Users', + id: 'users', + }, + { + title: 'Roles', + id: 'roles', + }, + { + title: 'Role mappings', + id: 'role_mappings', + }, + { + title: 'API keys', + id: 'api_keys', + }, + ], + }, + { + title: 'Kibana', + id: 'kibana', + children: [ + { + title: 'Data view', + id: 'data_views', + }, + { + title: 'Saved objects', + id: 'saved_objects', + }, + { + title: 'Tags', + id: 'tags', + }, + { + title: 'Search sessions', + id: 'search_sessions', + }, + { + title: 'Spaces', + id: 'spaces', + }, + { + title: 'Advanced settings', + id: 'advanced_settings', + }, + ], + }, + { + title: 'Upgrade assistant', + id: 'upgrade_assistant', + }, + ], + }, + ], +}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/ml.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/ml.ts new file mode 100644 index 0000000000000..d11a97827490c --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/ml.ts @@ -0,0 +1,136 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +import type { NodeDefinitionWithChildren } from '.'; + +export type ID = + | 'sharedux:ml' + | 'root' + | 'overview' + | 'notifications' + | 'anomaly_detection' + | 'jobs' + | 'explorer' + | 'single_metric_viewer' + | 'settings' + | 'data_frame_analytics' + | 'results_explorer' + | 'analytics_map' + | 'model_management' + | 'trained_models' + | 'nodes' + | 'data_visualizer' + | 'file' + | 'data_view' + | 'aiops_labs' + | 'explain_log_rate_spikes' + | 'log_pattern_analysis'; + +export const ml: NodeDefinitionWithChildren = { + id: 'sharedux:ml', + title: 'Machine learning', + icon: 'indexMapping', + children: [ + { + title: '', + id: 'root', + children: [ + { + title: 'Overview', + id: 'overview', + }, + { + title: 'Notifications', + id: 'notifications', + }, + ], + }, + { + title: 'Anomaly detection', + id: 'anomaly_detection', + children: [ + { + title: 'Jobs', + id: 'jobs', + }, + { + title: 'Anomaly explorer', + id: 'explorer', + }, + { + title: 'Single metric viewer', + id: 'single_metric_viewer', + }, + { + title: 'Settings', + id: 'settings', + }, + ], + }, + { + title: 'Data frame analytics', + id: 'data_frame_analytics', + children: [ + { + title: 'Jobs', + id: 'jobs', + }, + { + title: 'Results explorer', + id: 'results_explorer', + }, + { + title: 'Analytics map', + id: 'analytics_map', + }, + ], + }, + { + title: 'Model management', + id: 'model_management', + children: [ + { + title: 'Trained models', + id: 'trained_models', + }, + { + title: 'Nodes', + id: 'nodes', + }, + ], + }, + { + title: 'Data visualizer', + id: 'data_visualizer', + children: [ + { + title: 'File', + id: 'file', + }, + { + title: 'Data view', + id: 'data_view', + }, + ], + }, + { + title: 'AIOps labs', + id: 'aiops_labs', + children: [ + { + title: 'Explain log rate spikes', + id: 'explain_log_rate_spikes', + }, + { + title: 'Log pattern analysis', + id: 'log_pattern_analysis', + }, + ], + }, + ], +}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/navigation.stories.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/navigation.stories.tsx index 4aff0251f85c0..987d6d3dda8f9 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/navigation.stories.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/navigation.stories.tsx @@ -6,172 +6,424 @@ * Side Public License, v 1. */ -import React from 'react'; +import React, { FC, useCallback, useState } from 'react'; import { of } from 'rxjs'; import { ComponentMeta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; -import { ChromeNavLink, ChromeProjectNavigationNode } from '@kbn/core-chrome-browser'; +import type { ChromeNavLink } from '@kbn/core-chrome-browser'; +import { + EuiButton, + EuiButtonIcon, + EuiCollapsibleNav, + EuiFlexGroup, + EuiFlexItem, + EuiLink, + EuiText, + EuiThemeProvider, + EuiTitle, +} from '@elastic/eui'; +import { css } from '@emotion/react'; import { NavigationStorybookMock } from '../../../mocks'; import mdx from '../../../README.mdx'; import { NavigationProvider } from '../../services'; import { DefaultNavigation } from './default_navigation'; import type { ChromeNavigationViewModel, NavigationServices } from '../../../types'; import { Navigation } from './components'; +import { ProjectNavigationDefinition } from './types'; +import { getPresets } from './nav_tree_presets'; const storybookMock = new NavigationStorybookMock(); -const navTree: ChromeProjectNavigationNode[] = [ - { - id: 'group1', - title: 'Group 1', - children: [ +const SIZE_OPEN = 248; +const SIZE_CLOSED = 40; + +const NavigationWrapper: FC = ({ children }) => { + const [isOpen, setIsOpen] = useState(true); + + const collabsibleNavCSS = css` + border-inline-end-width: 1, + display: flex, + flex-direction: row, + `; + + const CollapseButton = () => { + const buttonCSS = css` + margin-left: -32px; + position: fixed; + z-index: 1000; + `; + return ( + + + + ); + }; + + const toggleOpen = useCallback(() => { + setIsOpen(!isOpen); + }, [isOpen, setIsOpen]); + + return ( + + } + > + {isOpen && children} + + + ); +}; + +const baseDeeplink: ChromeNavLink = { + id: 'foo', + title: 'Title from deep link', + href: 'https://elastic.co', + url: '', + baseUrl: '', +}; + +const createDeepLink = (id: string, title: string = baseDeeplink.title) => { + return { + ...baseDeeplink, + id, + title, + }; +}; + +const deepLinks: ChromeNavLink[] = [ + createDeepLink('item1'), + createDeepLink('item2', 'Foo'), + createDeepLink('group1:item1'), + createDeepLink('group1:groupA:groupI:item1'), + createDeepLink('group1:groupA', 'Group title from deep link'), + createDeepLink('group2', 'Group title from deep link'), + createDeepLink('group2:item1'), + createDeepLink('group2:item3'), +]; + +const simpleNavigationDefinition: ProjectNavigationDefinition = { + homeRef: 'https://elastic.co', + projectNavigationTree: [ + { + id: 'example_projet', + title: 'Example project', + icon: 'logoObservability', + defaultIsCollapsed: false, + children: [ + { + id: 'root', + children: [ + { + id: 'item1', + title: 'Get started', + }, + { + id: 'item2', + title: 'Alerts', + }, + { + id: 'item3', + title: 'Dashboards', + }, + ], + }, + { + id: 'group:settings', + title: 'Settings', + children: [ + { + id: 'logs', + title: 'Logs', + }, + { + id: 'signals', + title: 'Signals', + }, + { + id: 'tracing', + title: 'Tracing', + }, + ], + }, + ], + }, + ], +}; + +export const SimpleObjectDefinition = (args: ChromeNavigationViewModel & NavigationServices) => { + const services = storybookMock.getServices({ + ...args, + navLinks$: of(deepLinks), + onProjectNavigationChange: (updated) => { + action('Update chrome navigation')(JSON.stringify(updated, null, 2)); + }, + recentlyAccessed$: of([ + { label: 'This is an example', link: '/app/example/39859', id: '39850' }, + { label: 'Another example', link: '/app/example/5235', id: '5235' }, + ]), + }); + + return ( + + + + + + ); +}; + +const navigationDefinition: ProjectNavigationDefinition = { + homeRef: 'https://elastic.co', + navigationTree: { + body: [ { - id: 'item1', - title: 'Group 1: Item 1', - link: 'group1:item1', + type: 'cloudLink', + preset: 'deployments', }, + // My custom project { - id: 'groupA', - link: 'group1:groupA', + type: 'navGroup', + id: 'example_projet', + title: 'Example project', + icon: 'logoObservability', + defaultIsCollapsed: false, children: [ { - id: 'item1', - title: 'Group 1 > Group A > Item 1', - }, - { - id: 'groupI', - title: 'Group 1 : Group A : Group I', + id: 'root', children: [ { id: 'item1', - title: 'Group 1 > Group A > Group 1 > Item 1', - link: 'group1:groupA:groupI:item1', + title: 'Get started', }, { id: 'item2', - title: 'Group 1 > Group A > Group 1 > Item 2', + title: 'Alerts', + }, + { + id: 'item3', + title: 'Some other node', }, ], }, { - id: 'item2', - title: 'Group 1 > Group A > Item 2', + id: 'group:settings', + title: 'Settings', + children: [ + { + id: 'logs', + title: 'Logs', + }, + { + id: 'signals', + title: 'Signals', + }, + { + id: 'tracing', + title: 'Tracing', + }, + ], }, ], }, + // Add ml { - id: 'item3', - title: 'Group 1: Item 3', + type: 'navGroup', + preset: 'ml', }, - ], - }, - { - id: 'group2', - link: 'group2', - title: 'Group 2', - children: [ + // And specific links from analytics { - id: 'item1', - title: 'Group 2: Item 1', - link: 'group2:item1', + type: 'navGroup', + ...getPresets('analytics'), + title: 'My analytics', // Change the title + children: getPresets('analytics').children.map((child) => ({ + ...child, + children: child.children?.filter((item) => { + // Hide discover and dashboard + return item.id !== 'discover' && item.id !== 'dashboard'; + }), + })), }, + ], + footer: [ { - id: 'item2', - title: 'Group 2: Item 2', - link: 'group2:item2', + type: 'recentlyAccessed', + defaultIsCollapsed: true, + // Override the default recently accessed items with our own + recentlyAccessed$: of([ + { + label: 'My own recent item', + id: '1234', + link: '/app/example/39859', + }, + { + label: 'I also own this', + id: '4567', + link: '/app/example/39859', + }, + ]), }, { - id: 'item3', - title: 'Group 2: Item 3', - link: 'group2:item3', + type: 'navGroup', + ...getPresets('devtools'), }, ], }, - { - id: 'item1', - link: 'item1', - }, - { - id: 'item2', - title: 'Item 2', - link: 'bad', - }, - { - id: 'item3', - title: "I don't have a 'link' prop", - }, - { - id: 'item4', - title: 'Item 4', - }, -]; - -const baseDeeplink: ChromeNavLink = { - id: 'foo', - title: 'Title from deep link', - href: 'https://elastic.co', - url: '', - baseUrl: '', }; -const createDeepLink = (id: string, title: string = baseDeeplink.title) => { - return { - ...baseDeeplink, - id, - title, - }; -}; +export const ComplexObjectDefinition = (args: ChromeNavigationViewModel & NavigationServices) => { + const services = storybookMock.getServices({ + ...args, + navLinks$: of(deepLinks), + onProjectNavigationChange: (updated) => { + action('Update chrome navigation')(JSON.stringify(updated, null, 2)); + }, + recentlyAccessed$: of([ + { label: 'This is an example', link: '/app/example/39859', id: '39850' }, + { label: 'Another example', link: '/app/example/5235', id: '5235' }, + ]), + }); -const deepLinks: ChromeNavLink[] = [ - createDeepLink('item1'), - createDeepLink('item2', 'Foo'), - createDeepLink('group1:item1'), - createDeepLink('group1:groupA:groupI:item1'), - createDeepLink('group1:groupA', 'Group title from deep link'), - createDeepLink('group2', 'Group title from deep link'), - createDeepLink('group2:item1'), - createDeepLink('group2:item3'), -]; + return ( + + + + + + ); +}; -export const FromObjectConfig = (args: ChromeNavigationViewModel & NavigationServices) => { +export const WithUIComponents = (args: ChromeNavigationViewModel & NavigationServices) => { const services = storybookMock.getServices({ ...args, navLinks$: of(deepLinks), onProjectNavigationChange: (updated) => { action('Update chrome navigation')(JSON.stringify(updated, null, 2)); }, + recentlyAccessed$: of([ + { label: 'This is an example', link: '/app/example/39859', id: '39850' }, + { label: 'Another example', link: '/app/example/5235', id: '5235' }, + ]), }); return ( - - - + + + + + + + + + + + + {(navNode) => { + return ( + {`Render prop: ${navNode.id} - ${navNode.title}`} + ); + }} + + + + Title in ReactNode + + + + + + + + + + + + + + + + + + + + + ); }; -export const FromReactNodes = (args: ChromeNavigationViewModel & NavigationServices) => { +export const MinimalUIAndCustomCloudLink = ( + args: ChromeNavigationViewModel & NavigationServices +) => { const services = storybookMock.getServices({ ...args, navLinks$: of(deepLinks), onProjectNavigationChange: (updated) => { action('Update chrome navigation')(JSON.stringify(updated, null, 2)); }, + recentlyAccessed$: of([ + { label: 'This is an example', link: '/app/example/39859', id: '39850' }, + { label: 'Another example', link: '/app/example/5235', id: '5235' }, + ]), }); return ( - - - - - - - - - - Title from react node - - + + + + + + + + + + + + + + Some children node + + + + + + + + + + + + + + + + + ); }; @@ -183,5 +435,113 @@ export default { page: mdx, }, }, - component: FromObjectConfig, -} as ComponentMeta; + component: WithUIComponents, +} as ComponentMeta; + +export const CreativeUI = (args: ChromeNavigationViewModel & NavigationServices) => { + const services = storybookMock.getServices({ + ...args, + navLinks$: of(deepLinks), + onProjectNavigationChange: (updated) => { + action('Update chrome navigation')(JSON.stringify(updated, null, 2)); + }, + recentlyAccessed$: of([ + { label: 'This is an example', link: '/app/example/39859', id: '39850' }, + { label: 'Another example', link: '/app/example/5235', id: '5235' }, + ]), + }); + + return ( + + + + + + + + +

    Hello!

    +     + + + + +

    + As you can see there is really no limit in what UI you can create! +
    +

    +

    + Have fun! +

    +     + + +     +     +     + + +     +     +     + ); +}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/types.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/types.ts index 1f3c8a094d663..27dcd22654bde 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/types.ts +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/types.ts @@ -6,27 +6,172 @@ * Side Public License, v 1. */ -import { ChromeNavLink, ChromeProjectNavigationNode } from '@kbn/core-chrome-browser'; -import { ReactNode } from 'react'; +import type { ReactElement, ReactNode } from 'react'; +import type { + ChromeProjectNavigationLink, + ChromeProjectNavigationNode, +} from '@kbn/core-chrome-browser'; -export interface InternalNavigationNode extends Omit { - id: string; - title: string; - deepLink?: ChromeNavLink; +import type { CloudLinkProps, RecentlyAccessedProps } from './components'; + +/** + * @public + * + * A navigation node definition with its unique id, title, path in the tree and optional + * deep link and children. + */ +export interface NodeDefinition { + /** Optional id, if not passed a "link" must be provided. */ + id?: T; + /** Optional title. If not provided and a "link" is provided the title will be the Deep link title */ + title?: string; + /** App id or deeplink id */ + link?: ChromeProjectNavigationLink; + /** Optional icon for the navigation node. Note: not all navigation depth will render the icon */ + icon?: string; + /** Optional children of the navigation node */ + children?: Array>; +} + +/** + * @public + * + * A navigation node definition with its unique id, title, path in the tree and optional deep link. + * Those are the props that can be passed to the Navigation.Group and Navigation.Item components. + */ +export interface NodeProps extends Omit { + /** + * Children of the node. For Navigation.Item (only) it allows a function to be set. + * This function will receive the ChromeProjectNavigationNode object + */ + children?: ((navNode: ChromeProjectNavigationNode) => ReactNode) | ReactNode; +} + +/** + * @private + * + * Internally we enhance the Props passed to the Navigation.Item component. + */ +export interface NodePropsEnhanced extends NodeProps { + /** + * This function correspond to the same "itemRender" function that can be passed to + * the EuiSideNavItemType (see navigation_section_ui.tsx) + */ + renderItem?: () => ReactElement; } -export type UnRegisterFunction = () => void; +export interface ChromeProjectNavigationNodeEnhanced extends ChromeProjectNavigationNode { + /** + * This function correspond to the same "itemRender" function that can be passed to + * the EuiSideNavItemType (see navigation_section_ui.tsx) + */ + renderItem?: () => ReactElement; +} + +/** The preset that can be pass to the NavigationBucket component */ +export type NavigationGroupPreset = 'analytics' | 'devtools' | 'ml' | 'management'; + +/** + * @public + * + * Definition for the "Recently accessed" section of the side navigation. + */ +export interface RecentlyAccessedDefinition extends RecentlyAccessedProps { + type: 'recentlyAccessed'; +} -export type RegisterFunction = (navNode: InternalNavigationNode) => { +/** + * @public + * + * A cloud link root item definition. Use it to add one or more links to the Cloud console + */ +export interface CloudLinkDefinition extends CloudLinkProps { + type: 'cloudLink'; +} + +/** + * @public + * + * A group root item definition. + */ +export interface GroupDefinition extends NodeDefinition { + type: 'navGroup'; + /** Flag to indicate if the group is initially collapsed or not. */ + defaultIsCollapsed?: boolean; + children?: NodeDefinition[]; + preset?: NavigationGroupPreset; +} + +/** + * @public + * + * The navigation definition for a root item in the side navigation. + */ +export type RootNavigationItemDefinition = + | RecentlyAccessedDefinition + | CloudLinkDefinition + | GroupDefinition; + +export type ProjectNavigationTreeDefinition = Array>; + +/** + * @public + * + * Definition for the complete navigation tree, including body and footer + */ +export interface NavigationTreeDefinition { + /** + * Main content of the navigation. Can contain any number of "cloudLink", "recentlyAccessed" + * or "group" items. Be mindeful though, with great power comes great responsibility. + * */ + body?: RootNavigationItemDefinition[]; + /** + * Footer content of the navigation. Can contain any number of "cloudLink", "recentlyAccessed" + * or "group" items. Be mindeful though, with great power comes great responsibility. + * */ + footer?: RootNavigationItemDefinition[]; +} + +/** + * @public + * + * A project navigation definition that can be passed to the `` component + * or when calling `setNavigation()` on the serverless plugin. + */ +export interface ProjectNavigationDefinition { + /** + * The URL href for the home link + */ + homeRef: string; + /** + * A navigation tree structure with object items containing labels, links, and sub-items + * for a project. Use it if you only need to configure your project navigation and leave + * all the other navigation items to the default (Recently viewed items, Management, etc.) + */ + projectNavigationTree?: ProjectNavigationTreeDefinition; + /** + * A navigation tree structure with object items containing labels, links, and sub-items + * that defines a complete side navigation. This configuration overrides `projectNavigationTree` + * if both are provided. + */ + navigationTree?: NavigationTreeDefinition; +} + +/** + * @private + * + * Function to unregister a navigation node from its parent. + */ +export type UnRegisterFunction = (id: string) => void; + +/** + * @internal + * + * A function to register a navigation node on its parent. + */ +export type RegisterFunction = (navNode: ChromeProjectNavigationNodeEnhanced) => { + /** The function to unregister the node. */ unregister: UnRegisterFunction; + /** The full path of the node in the navigation tree. */ path: string[]; }; - -export interface NodeProps { - children?: ((deepLink?: ChromeNavLink) => ReactNode) | ReactNode; - id?: string; - title?: string; - link?: string; - // Temp to test removing nav nodes - onRemove?: () => void; -} diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/use_init_navnode.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/use_init_navnode.ts deleted file mode 100644 index 6a28f0e07b764..0000000000000 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/use_init_navnode.ts +++ /dev/null @@ -1,181 +0,0 @@ -/* - * 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 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 or the Server - * Side Public License, v 1. - */ - -import { ChromeNavLink } from '@kbn/core-chrome-browser'; -import { useCallback, useEffect, useMemo, useRef } from 'react'; -import useObservable from 'react-use/lib/useObservable'; - -import { useNavigation as useNavigationServices } from '../../services'; -import { InternalNavigationNode, NodeProps, RegisterFunction, UnRegisterFunction } from './types'; -import { useRegisterTreeNode } from './use_register_tree_node'; - -function getIdFromNavigationNode({ id: _id, link, title }: NodeProps): string { - const id = _id ?? link; - - if (!id) { - throw new Error(`Id or link prop missing for navigation item [${title}]`); - } - - return id; -} - -function createInternalNavNode( - id: string, - _navNode: NodeProps, - deepLinks: Readonly -): InternalNavigationNode | null { - const { children, onRemove, link, ...navNode } = _navNode; - const deepLink = deepLinks.find((dl) => dl.id === link); - const isLinkActive = isNodeActive({ link, deepLink }); - - const titleFromDeepLinkOrChildren = typeof children === 'string' ? children : deepLink?.title; - let title = navNode.title ?? titleFromDeepLinkOrChildren; - - if (!title || title.trim().length === 0) { - if (isLinkActive) { - throw new Error(`Title prop missing for navigation item [${id}]`); - } else { - // No title provided but the node is disabled, so we can safely set it to an empty string - title = ''; - } - } - - if (!isLinkActive) { - return null; - } - - return { - ...navNode, - id, - title, - deepLink, - }; -} - -function isNodeActive({ link, deepLink }: { link?: string; deepLink?: ChromeNavLink }) { - if (link && !deepLink) { - // If a link is provided, but no deepLink is found, don't render anything - return false; - } - return true; -} - -export const useInitNavnode = (node: NodeProps) => { - /** - * Map of children nodes - */ - const childrenNodes = useRef>({}); - /** - * Flag to indicate if the current node has been registered - */ - const isRegistered = useRef(false); - /** - * Reference to the unregister function - */ - const unregisterRef = useRef(); - /** - * Map to keep track of the order of the children when they mount. - * This allows us to keep in sync the nav tree sent to the Chrome service - * with the order of the DOM elements - */ - const orderChildrenRef = useRef>({}); - /** - * Index to keep track of the order of the children when they mount. - */ - const idx = useRef(0); - - /** - * The current node path, including all of its parents. We'll use it to match it against - * the list of active routes based on current URL location (passed by the Chrome service) - */ - const nodePath = useRef([]); - - const { navLinks$ } = useNavigationServices(); - const deepLinks = useObservable(navLinks$, []); - const { register: registerNodeOnParent } = useRegisterTreeNode(); - - const id = getIdFromNavigationNode(node); - - const internalNavNode = useMemo( - () => createInternalNavNode(id, node, deepLinks), - [node, id, deepLinks] - ); - - const register = useCallback(() => { - if (internalNavNode) { - const children = Object.values(childrenNodes.current).sort((a, b) => { - const aOrder = orderChildrenRef.current[a.id]; - const bOrder = orderChildrenRef.current[b.id]; - return aOrder - bOrder; - }); - - const { unregister, path } = registerNodeOnParent({ - ...internalNavNode, - children: children.length ? children : undefined, - }); - - nodePath.current = [...path, internalNavNode.id]; - unregisterRef.current = unregister; - isRegistered.current = true; - } - }, [internalNavNode, registerNodeOnParent]); - - const registerChildNode = useCallback( - (childNode) => { - childrenNodes.current[childNode.id] = childNode; - orderChildrenRef.current[childNode.id] = idx.current++; - - if (isRegistered.current) { - register(); - } - - const unregisterFn = () => { - // Remove the child from this children map - const updatedItems = { ...childrenNodes.current }; - delete updatedItems[childNode.id]; - childrenNodes.current = updatedItems; - - if (isRegistered.current) { - // Update the parent tree - register(); - } - }; - - return { - unregister: unregisterFn, - path: [...nodePath.current], - }; - }, - [register] - ); - - const unregister = useCallback(() => { - isRegistered.current = false; - if (unregisterRef.current) { - unregisterRef.current(); - } - }, []); - - useEffect(() => { - if (internalNavNode) { - register(); - } else { - unregister(); - } - }, [internalNavNode, unregister, register]); - - useEffect(() => unregister, [unregister]); - - return useMemo( - () => ({ - navNode: internalNavNode, - registerChildNode, - }), - [internalNavNode, registerChildNode] - ); -}; From 854622d178ab9f229ff95088e3dc6351d91d27de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Loix?= Date: Tue, 30 May 2023 12:03:56 +0100 Subject: [PATCH 10/18] Allow href to be passed in node definition --- .../chrome/core-chrome-browser/src/project_navigation.ts | 6 ++++++ .../src/ui/v2/components/navigation_section_ui.tsx | 2 +- packages/shared-ux/chrome/navigation/src/ui/v2/types.ts | 6 ++++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/core/chrome/core-chrome-browser/src/project_navigation.ts b/packages/core/chrome/core-chrome-browser/src/project_navigation.ts index cd8f634c07836..43acc3897307e 100644 --- a/packages/core/chrome/core-chrome-browser/src/project_navigation.ts +++ b/packages/core/chrome/core-chrome-browser/src/project_navigation.ts @@ -39,6 +39,12 @@ export interface ChromeProjectNavigationNode { icon?: string; /** Optional children of the navigation node */ children?: ChromeProjectNavigationNode[]; + /** + * Temporarilly we allow href to be passed. + * Once all the deeplinks will be exposed in packages we will not allow href anymore + * and force deeplink id to be passed + */ + href?: string; } /** @public */ diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_section_ui.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_section_ui.tsx index 1efa885ace4aa..737cdf0376411 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_section_ui.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_section_ui.tsx @@ -23,7 +23,7 @@ const navigationNodeToEuiItem = ( item: ChromeProjectNavigationNodeEnhanced, { navigateToUrl, basePath }: { navigateToUrl: NavigateToUrlFn; basePath: BasePathService } ): EuiSideNavItemType => { - const href = item.deepLink?.href; + const href = item.deepLink?.href ?? item.href; const id = item.path ? item.path.join('.') : item.id; return { diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/types.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/types.ts index 27dcd22654bde..e04f8af8bdf67 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/types.ts +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/types.ts @@ -31,6 +31,12 @@ export interface NodeDefinition icon?: string; /** Optional children of the navigation node */ children?: Array>; + /** + * Temporarilly we allow href to be passed. + * Once all the deeplinks will be exposed in packages we will not allow href anymore + * and force deeplink id to be passed + */ + href?: string; } /** From 31c712232ac8f5764117bd726275013082eee7d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Loix?= Date: Tue, 30 May 2023 12:04:52 +0100 Subject: [PATCH 11/18] Update group preset with href links --- .../src/ui/v2/nav_tree_presets/analytics.ts | 13 ++- .../src/ui/v2/nav_tree_presets/devtools.ts | 12 +- .../src/ui/v2/nav_tree_presets/management.ts | 106 +++++++++++------- .../src/ui/v2/nav_tree_presets/ml.ts | 53 +++++---- 4 files changed, 118 insertions(+), 66 deletions(-) diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/analytics.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/analytics.ts index 119b47cd5db3a..6435fe6b0f55e 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/analytics.ts +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/analytics.ts @@ -8,7 +8,7 @@ import type { NodeDefinitionWithChildren } from '.'; -export type ID = 'sharedux:analytics' | 'root' | 'discover' | 'dashboard' | 'visualize'; +export type ID = 'sharedux:analytics' | 'root' | 'discover' | 'dashboard' | 'visualize_library'; export const analytics: NodeDefinitionWithChildren = { // Make sure we have a unique id otherwise it might override a custom id from the project @@ -20,16 +20,19 @@ export const analytics: NodeDefinitionWithChildren = { id: 'root', children: [ { - id: 'discover', title: 'Discover', + id: 'discover', + href: '/app/discover', }, { - id: 'dashboard', title: 'Dashboard', + id: 'dashboard', + href: '/app/dashboards', }, { - id: 'visualize', - title: 'Visualize library', + id: 'visualize_library', + title: 'Visualize Library', + href: '/app/visualize', }, ], }, diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/devtools.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/devtools.ts index e0c0dcffcad5f..03b2eff015433 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/devtools.ts +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/devtools.ts @@ -25,20 +25,24 @@ export const devtools: NodeDefinitionWithChildren = { id: 'root', children: [ { - title: 'Console', id: 'console', + title: 'Console', + href: '/app/dev_tools#/console', }, { - title: 'Search profiler', id: 'search_profiler', + title: 'Search profiler', + href: '/app/dev_tools#/searchprofiler', }, { - title: 'Grok debugger', id: 'grok_debugger', + title: 'Grok debugger', + href: '/app/dev_tools#/grokdebugger', }, { - title: 'Painless lab', id: 'painless_lab', + title: 'Painless lab', + href: '/app/dev_tools#/painless_lab', }, ], }, diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/management.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/management.ts index 3483d0b03ed11..db87f84ec37d2 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/management.ts +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/management.ts @@ -55,170 +55,200 @@ export const management: NodeDefinitionWithChildren = { icon: 'gear', children: [ { - title: '', id: 'root', + title: '', children: [ { - title: 'Stack monitoring', id: 'stack_monitoring', + title: 'Stack monitoring', + href: '/app/monitoring', }, ], }, { - title: 'Integration management', id: 'integration_management', + title: 'Integration management', children: [ { - title: 'Integrations', id: 'integrations', + title: 'Integrations', + href: '/app/integrations', }, { - title: 'Fleet', id: 'fleet', + title: 'Fleet', + href: '/app/fleet', }, { - title: 'Osquery', id: 'osquery', + title: 'Osquery', + href: '/app/osquery', }, ], }, { - title: 'Stack management', id: 'stack_management', + title: 'Stack management', children: [ { - title: 'Ingest', id: 'ingest', + title: 'Ingest', children: [ { - title: 'Ingest pipelines', id: 'ingest_pipelines', + title: 'Ingest pipelines', + href: '/app/management/ingest/ingest_pipelines', }, { - title: 'Logstash pipelines', id: 'logstash_pipelines', + title: 'Logstash pipelines', + href: '/app/management/ingest/pipelines', }, ], }, { - title: 'Data', id: 'data', + title: 'Data', children: [ { - title: 'Index management', id: 'index_management', + title: 'Index management', + href: '/app/management/data/index_management', }, { - title: 'Index lifecycle policies', id: 'index_lifecycle_policies', + title: 'Index lifecycle policies', + href: '/app/management/data/index_lifecycle_management', }, { - title: 'Snapshot and restore', id: 'snapshot_and_restore', + title: 'Snapshot and restore', + href: 'app/management/data/snapshot_restore', }, { - title: 'Rollup jobs', id: 'rollup_jobs', + title: 'Rollup jobs', + href: '/app/management/data/rollup_jobs', }, { - title: 'Transforms', id: 'transforms', + title: 'Transforms', + href: '/app/management/data/transform', }, { - title: 'Cross-cluster replication', id: 'cross_cluster_replication', + title: 'Cross-cluster replication', + href: '/app/management/data/cross_cluster_replication', }, { - title: 'Remote clusters', id: 'remote_clusters', + title: 'Remote clusters', + href: '/app/management/data/remote_clusters', }, ], }, { - title: 'Alerts and insights', id: 'alerts_and_insights', + title: 'Alerts and insights', children: [ { - title: 'Rules', id: 'rules', + title: 'Rules', + href: '/app/management/insightsAndAlerting/triggersActions/rules', }, { - title: 'Cases', id: 'cases', + title: 'Cases', + href: '/app/management/insightsAndAlerting/cases', }, { - title: 'Connectors', id: 'connectors', + title: 'Connectors', + href: '/app/management/insightsAndAlerting/triggersActionsConnectors/connectors', }, { - title: 'Reporting', id: 'reporting', + title: 'Reporting', + href: '/app/management/insightsAndAlerting/reporting', }, { - title: 'Machine learning', id: 'machine_learning', + title: 'Machine learning', + href: '/app/management/insightsAndAlerting/jobsListLink', }, { - title: 'Watcher', id: 'watcher', + title: 'Watcher', + href: '/app/management/insightsAndAlerting/watcher', }, ], }, { - title: 'Security', id: 'security', + title: 'Security', children: [ { - title: 'Users', id: 'users', + title: 'Users', + href: '/app/management/security/users', }, { - title: 'Roles', id: 'roles', + title: 'Roles', + href: '/app/management/security/roles', }, { - title: 'Role mappings', id: 'role_mappings', + title: 'Role mappings', + href: '/app/management/security/role_mappings', }, { - title: 'API keys', id: 'api_keys', + title: 'API keys', + href: '/app/management/security/api_keys', }, ], }, { - title: 'Kibana', id: 'kibana', + title: 'Kibana', children: [ { - title: 'Data view', id: 'data_views', + title: 'Data view', + href: '/app/management/kibana/dataViews', }, { - title: 'Saved objects', id: 'saved_objects', + title: 'Saved objects', + href: '/app/management/kibana/objects', }, { - title: 'Tags', id: 'tags', + title: 'Tags', + href: '/app/management/kibana/tags', }, { - title: 'Search sessions', id: 'search_sessions', + title: 'Search sessions', + href: '/app/management/kibana/search_sessions', }, { - title: 'Spaces', id: 'spaces', + title: 'Spaces', + href: '/app/management/kibana/spaces', }, { - title: 'Advanced settings', id: 'advanced_settings', + title: 'Advanced settings', + href: '/app/management/kibana/settings', }, ], }, { - title: 'Upgrade assistant', id: 'upgrade_assistant', + title: 'Upgrade assistant', + href: '/app/management/stack/upgrade_assistant', }, ], }, diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/ml.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/ml.ts index d11a97827490c..ba3b7e0645d67 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/ml.ts +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/ml.ts @@ -41,12 +41,14 @@ export const ml: NodeDefinitionWithChildren = { id: 'root', children: [ { - title: 'Overview', id: 'overview', + title: 'Overview', + href: '/app/ml/overview', }, { - title: 'Notifications', id: 'notifications', + title: 'Notifications', + href: '/app/ml/notifications', }, ], }, @@ -55,80 +57,93 @@ export const ml: NodeDefinitionWithChildren = { id: 'anomaly_detection', children: [ { - title: 'Jobs', id: 'jobs', + title: 'Jobs', + href: '/app/ml/jobs', }, { - title: 'Anomaly explorer', id: 'explorer', + title: 'Anomaly explorer', + href: '/app/ml/explorer', }, { - title: 'Single metric viewer', id: 'single_metric_viewer', + title: 'Single metric viewer', + href: '/app/ml/timeseriesexplorer', }, { - title: 'Settings', id: 'settings', + title: 'Settings', + href: '/app/ml/settings', }, ], }, { - title: 'Data frame analytics', id: 'data_frame_analytics', + title: 'Data frame analytics', children: [ { - title: 'Jobs', id: 'jobs', + title: 'Jobs', + href: '/app/ml/data_frame_analytics', }, { - title: 'Results explorer', id: 'results_explorer', + title: 'Results explorer', + href: '/app/ml/data_frame_analytics/exploration', }, { - title: 'Analytics map', id: 'analytics_map', + title: 'Analytics map', + href: '/app/ml/data_frame_analytics/map', }, ], }, { - title: 'Model management', id: 'model_management', + title: 'Model management', children: [ { - title: 'Trained models', id: 'trained_models', + title: 'Trained models', + href: '/app/ml/trained_models', }, { - title: 'Nodes', id: 'nodes', + title: 'Nodes', + href: '/app/ml/nodes', }, ], }, { - title: 'Data visualizer', id: 'data_visualizer', + title: 'Data visualizer', children: [ { - title: 'File', id: 'file', + title: 'File', + href: '/app/ml/filedatavisualizer', }, { - title: 'Data view', id: 'data_view', + title: 'Data view', + href: '/app/ml/datavisualizer_index_select', }, ], }, { - title: 'AIOps labs', id: 'aiops_labs', + title: 'AIOps labs', children: [ { - title: 'Explain log rate spikes', id: 'explain_log_rate_spikes', + title: 'Explain log rate spikes', + href: '/app/ml/aiops/explain_log_rate_spikes_index_select', }, { - title: 'Log pattern analysis', id: 'log_pattern_analysis', + title: 'Log pattern analysis', + href: '/app/ml/aiops/log_categorization_index_select', }, ], }, From 6db8e5f4d775f2f578f44ca21e94c19d6fc7856b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Loix?= Date: Tue, 30 May 2023 12:44:57 +0100 Subject: [PATCH 12/18] Update jest tests --- .../src/ui/v2/components/navigation.test.tsx | 25 +- .../ui/v2/components/navigation_bucket.tsx | 7 +- .../ui/v2/default_navigation.test.helpers.ts | 913 +++++++++--------- .../src/ui/v2/default_navigation.test.tsx | 92 +- 4 files changed, 557 insertions(+), 480 deletions(-) diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.test.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.test.tsx index 80bc5cd0c7abe..7206da81e261a 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.test.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.test.tsx @@ -14,7 +14,12 @@ import type { ChromeNavLink } from '@kbn/core-chrome-browser'; import { getServicesMock } from '../../../../mocks/src/jest'; import { NavigationProvider } from '../../../services'; import { Navigation } from './navigation'; -import { defaultNavigationTree } from '../default_navigation.test.helpers'; +import { + defaultAnalyticsNavGroup, + defaultDevtoolsNavGroup, + defaultManagementNavGroup, + defaultMlNavGroup, +} from '../default_navigation.test.helpers'; describe('', () => { const services = getServicesMock(); @@ -372,12 +377,24 @@ describe('', () => { expect(onProjectNavigationChange).toHaveBeenCalled(); const lastCall = onProjectNavigationChange.mock.calls[onProjectNavigationChange.mock.calls.length - 1]; - const [navTree] = lastCall; + const [navTreeGenerated] = lastCall; - expect(navTree).toEqual({ + expect(navTreeGenerated).toEqual({ homeRef: 'https://elastic.co', - navigationTree: defaultNavigationTree.map(({ type, ...rest }) => rest), + navigationTree: expect.any(Array), }); + + // The default navigation tree for analytics + expect(navTreeGenerated.navigationTree[0]).toEqual(defaultAnalyticsNavGroup); + + // The default navigation tree for ml + expect(navTreeGenerated.navigationTree[1]).toEqual(defaultMlNavGroup); + + // The default navigation tree for devtools+ + expect(navTreeGenerated.navigationTree[2]).toEqual(defaultDevtoolsNavGroup); + + // The default navigation tree for management + expect(navTreeGenerated.navigationTree[3]).toEqual(defaultManagementNavGroup); }); test('should render cloud link', async () => { diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_bucket.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_bucket.tsx index 5d8cc8a989e0c..ac5f9691f6f03 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_bucket.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_bucket.tsx @@ -51,10 +51,7 @@ export const NavigationBucket: FC = ({ {item.children ? ( = ({ {renderItems(item.children)} ) : ( - + )} ); diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.helpers.ts b/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.helpers.ts index 2b5f1a85e5d56..35d0cd1728a80 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.helpers.ts +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.helpers.ts @@ -12,438 +12,485 @@ * NOTE: This will have to be updated once we add the deep link ids as each of the node * will contain the deep link information. */ + +export const defaultAnalyticsNavGroup = { + id: 'sharedux:analytics', + title: 'Data exploration', + icon: 'stats', + path: ['sharedux:analytics'], + children: [ + { + id: 'root', + path: ['sharedux:analytics', 'root'], + title: '', + children: [ + { + title: 'Discover', + id: 'discover', + href: '/app/discover', + path: ['sharedux:analytics', 'root', 'discover'], + }, + { + title: 'Dashboard', + id: 'dashboard', + href: '/app/dashboards', + path: ['sharedux:analytics', 'root', 'dashboard'], + }, + { + id: 'visualize_library', + title: 'Visualize Library', + href: '/app/visualize', + path: ['sharedux:analytics', 'root', 'visualize_library'], + }, + ], + }, + ], +}; + +export const defaultMlNavGroup = { + id: 'sharedux:ml', + title: 'Machine learning', + icon: 'indexMapping', + path: ['sharedux:ml'], + children: [ + { + title: '', + id: 'root', + path: ['sharedux:ml', 'root'], + children: [ + { + id: 'overview', + title: 'Overview', + href: '/app/ml/overview', + path: ['sharedux:ml', 'root', 'overview'], + }, + { + id: 'notifications', + title: 'Notifications', + href: '/app/ml/notifications', + path: ['sharedux:ml', 'root', 'notifications'], + }, + ], + }, + { + title: 'Anomaly detection', + id: 'anomaly_detection', + path: ['sharedux:ml', 'anomaly_detection'], + children: [ + { + id: 'jobs', + title: 'Jobs', + href: '/app/ml/jobs', + path: ['sharedux:ml', 'anomaly_detection', 'jobs'], + }, + { + id: 'explorer', + title: 'Anomaly explorer', + href: '/app/ml/explorer', + path: ['sharedux:ml', 'anomaly_detection', 'explorer'], + }, + { + id: 'single_metric_viewer', + title: 'Single metric viewer', + href: '/app/ml/timeseriesexplorer', + path: ['sharedux:ml', 'anomaly_detection', 'single_metric_viewer'], + }, + { + id: 'settings', + title: 'Settings', + href: '/app/ml/settings', + path: ['sharedux:ml', 'anomaly_detection', 'settings'], + }, + ], + }, + { + id: 'data_frame_analytics', + title: 'Data frame analytics', + path: ['sharedux:ml', 'data_frame_analytics'], + children: [ + { + id: 'jobs', + title: 'Jobs', + href: '/app/ml/data_frame_analytics', + path: ['sharedux:ml', 'data_frame_analytics', 'jobs'], + }, + { + id: 'results_explorer', + title: 'Results explorer', + href: '/app/ml/data_frame_analytics/exploration', + path: ['sharedux:ml', 'data_frame_analytics', 'results_explorer'], + }, + { + id: 'analytics_map', + title: 'Analytics map', + href: '/app/ml/data_frame_analytics/map', + path: ['sharedux:ml', 'data_frame_analytics', 'analytics_map'], + }, + ], + }, + { + id: 'model_management', + title: 'Model management', + path: ['sharedux:ml', 'model_management'], + children: [ + { + id: 'trained_models', + title: 'Trained models', + href: '/app/ml/trained_models', + path: ['sharedux:ml', 'model_management', 'trained_models'], + }, + { + id: 'nodes', + title: 'Nodes', + href: '/app/ml/nodes', + path: ['sharedux:ml', 'model_management', 'nodes'], + }, + ], + }, + { + id: 'data_visualizer', + title: 'Data visualizer', + path: ['sharedux:ml', 'data_visualizer'], + children: [ + { + id: 'file', + title: 'File', + href: '/app/ml/filedatavisualizer', + path: ['sharedux:ml', 'data_visualizer', 'file'], + }, + { + id: 'data_view', + title: 'Data view', + href: '/app/ml/datavisualizer_index_select', + path: ['sharedux:ml', 'data_visualizer', 'data_view'], + }, + ], + }, + { + id: 'aiops_labs', + title: 'AIOps labs', + path: ['sharedux:ml', 'aiops_labs'], + children: [ + { + id: 'explain_log_rate_spikes', + title: 'Explain log rate spikes', + href: '/app/ml/aiops/explain_log_rate_spikes_index_select', + path: ['sharedux:ml', 'aiops_labs', 'explain_log_rate_spikes'], + }, + { + id: 'log_pattern_analysis', + title: 'Log pattern analysis', + href: '/app/ml/aiops/log_categorization_index_select', + path: ['sharedux:ml', 'aiops_labs', 'log_pattern_analysis'], + }, + ], + }, + ], +}; + +export const defaultDevtoolsNavGroup = { + title: 'Developer tools', + id: 'sharedux:devtools', + icon: 'editorCodeBlock', + path: ['sharedux:devtools'], + children: [ + { + id: 'root', + path: ['sharedux:devtools', 'root'], + title: '', + children: [ + { + id: 'console', + title: 'Console', + href: '/app/dev_tools#/console', + path: ['sharedux:devtools', 'root', 'console'], + }, + { + id: 'search_profiler', + title: 'Search profiler', + href: '/app/dev_tools#/searchprofiler', + path: ['sharedux:devtools', 'root', 'search_profiler'], + }, + { + id: 'grok_debugger', + title: 'Grok debugger', + href: '/app/dev_tools#/grokdebugger', + path: ['sharedux:devtools', 'root', 'grok_debugger'], + }, + { + id: 'painless_lab', + title: 'Painless lab', + href: '/app/dev_tools#/painless_lab', + path: ['sharedux:devtools', 'root', 'painless_lab'], + }, + ], + }, + ], +}; + +export const defaultManagementNavGroup = { + id: 'sharedux:management', + title: 'Management', + icon: 'gear', + path: ['sharedux:management'], + children: [ + { + id: 'root', + title: '', + path: ['sharedux:management', 'root'], + children: [ + { + id: 'stack_monitoring', + title: 'Stack monitoring', + href: '/app/monitoring', + path: ['sharedux:management', 'root', 'stack_monitoring'], + }, + ], + }, + { + id: 'integration_management', + title: 'Integration management', + path: ['sharedux:management', 'integration_management'], + children: [ + { + id: 'integrations', + title: 'Integrations', + href: '/app/integrations', + path: ['sharedux:management', 'integration_management', 'integrations'], + }, + { + id: 'fleet', + title: 'Fleet', + href: '/app/fleet', + path: ['sharedux:management', 'integration_management', 'fleet'], + }, + { + id: 'osquery', + title: 'Osquery', + href: '/app/osquery', + path: ['sharedux:management', 'integration_management', 'osquery'], + }, + ], + }, + { + id: 'stack_management', + title: 'Stack management', + path: ['sharedux:management', 'stack_management'], + children: [ + { + id: 'upgrade_assistant', + title: 'Upgrade assistant', + href: '/app/management/stack/upgrade_assistant', + path: ['sharedux:management', 'stack_management', 'upgrade_assistant'], + }, + { + id: 'ingest', + title: 'Ingest', + path: ['sharedux:management', 'stack_management', 'ingest'], + children: [ + { + id: 'ingest_pipelines', + title: 'Ingest pipelines', + href: '/app/management/ingest/ingest_pipelines', + path: ['sharedux:management', 'stack_management', 'ingest', 'ingest_pipelines'], + }, + { + id: 'logstash_pipelines', + title: 'Logstash pipelines', + href: '/app/management/ingest/pipelines', + path: ['sharedux:management', 'stack_management', 'ingest', 'logstash_pipelines'], + }, + ], + }, + { + id: 'data', + title: 'Data', + path: ['sharedux:management', 'stack_management', 'data'], + children: [ + { + id: 'index_management', + title: 'Index management', + href: '/app/management/data/index_management', + path: ['sharedux:management', 'stack_management', 'data', 'index_management'], + }, + { + id: 'index_lifecycle_policies', + title: 'Index lifecycle policies', + href: '/app/management/data/index_lifecycle_management', + path: ['sharedux:management', 'stack_management', 'data', 'index_lifecycle_policies'], + }, + { + id: 'snapshot_and_restore', + title: 'Snapshot and restore', + href: 'app/management/data/snapshot_restore', + path: ['sharedux:management', 'stack_management', 'data', 'snapshot_and_restore'], + }, + { + id: 'rollup_jobs', + title: 'Rollup jobs', + href: '/app/management/data/rollup_jobs', + path: ['sharedux:management', 'stack_management', 'data', 'rollup_jobs'], + }, + { + id: 'transforms', + title: 'Transforms', + href: '/app/management/data/transform', + path: ['sharedux:management', 'stack_management', 'data', 'transforms'], + }, + { + id: 'cross_cluster_replication', + title: 'Cross-cluster replication', + href: '/app/management/data/cross_cluster_replication', + path: [ + 'sharedux:management', + 'stack_management', + 'data', + 'cross_cluster_replication', + ], + }, + { + id: 'remote_clusters', + title: 'Remote clusters', + href: '/app/management/data/remote_clusters', + path: ['sharedux:management', 'stack_management', 'data', 'remote_clusters'], + }, + ], + }, + { + id: 'alerts_and_insights', + title: 'Alerts and insights', + path: ['sharedux:management', 'stack_management', 'alerts_and_insights'], + children: [ + { + id: 'rules', + title: 'Rules', + href: '/app/management/insightsAndAlerting/triggersActions/rules', + path: ['sharedux:management', 'stack_management', 'alerts_and_insights', 'rules'], + }, + { + id: 'cases', + title: 'Cases', + href: '/app/management/insightsAndAlerting/cases', + path: ['sharedux:management', 'stack_management', 'alerts_and_insights', 'cases'], + }, + { + id: 'connectors', + title: 'Connectors', + href: '/app/management/insightsAndAlerting/triggersActionsConnectors/connectors', + path: [ + 'sharedux:management', + 'stack_management', + 'alerts_and_insights', + 'connectors', + ], + }, + { + id: 'reporting', + title: 'Reporting', + href: '/app/management/insightsAndAlerting/reporting', + path: ['sharedux:management', 'stack_management', 'alerts_and_insights', 'reporting'], + }, + { + id: 'machine_learning', + title: 'Machine learning', + href: '/app/management/insightsAndAlerting/jobsListLink', + path: [ + 'sharedux:management', + 'stack_management', + 'alerts_and_insights', + 'machine_learning', + ], + }, + { + id: 'watcher', + title: 'Watcher', + href: '/app/management/insightsAndAlerting/watcher', + path: ['sharedux:management', 'stack_management', 'alerts_and_insights', 'watcher'], + }, + ], + }, + { + id: 'security', + title: 'Security', + path: ['sharedux:management', 'stack_management', 'security'], + children: [ + { + id: 'users', + title: 'Users', + href: '/app/management/security/users', + path: ['sharedux:management', 'stack_management', 'security', 'users'], + }, + { + id: 'roles', + title: 'Roles', + href: '/app/management/security/roles', + path: ['sharedux:management', 'stack_management', 'security', 'roles'], + }, + { + id: 'role_mappings', + title: 'Role mappings', + href: '/app/management/security/role_mappings', + path: ['sharedux:management', 'stack_management', 'security', 'role_mappings'], + }, + { + id: 'api_keys', + title: 'API keys', + href: '/app/management/security/api_keys', + path: ['sharedux:management', 'stack_management', 'security', 'api_keys'], + }, + ], + }, + { + id: 'kibana', + title: 'Kibana', + path: ['sharedux:management', 'stack_management', 'kibana'], + children: [ + { + id: 'data_views', + title: 'Data view', + href: '/app/management/kibana/dataViews', + path: ['sharedux:management', 'stack_management', 'kibana', 'data_views'], + }, + { + id: 'saved_objects', + title: 'Saved objects', + href: '/app/management/kibana/objects', + path: ['sharedux:management', 'stack_management', 'kibana', 'saved_objects'], + }, + { + id: 'tags', + title: 'Tags', + href: '/app/management/kibana/tags', + path: ['sharedux:management', 'stack_management', 'kibana', 'tags'], + }, + { + id: 'search_sessions', + title: 'Search sessions', + href: '/app/management/kibana/search_sessions', + path: ['sharedux:management', 'stack_management', 'kibana', 'search_sessions'], + }, + { + id: 'spaces', + title: 'Spaces', + href: '/app/management/kibana/spaces', + path: ['sharedux:management', 'stack_management', 'kibana', 'spaces'], + }, + { + id: 'advanced_settings', + title: 'Advanced settings', + href: '/app/management/kibana/settings', + path: ['sharedux:management', 'stack_management', 'kibana', 'advanced_settings'], + }, + ], + }, + ], + }, + ], +}; + export const defaultNavigationTree = [ - { - type: 'navGroup', - id: 'sharedux:analytics', - title: 'Data exploration', - icon: 'stats', - path: ['sharedux:analytics'], - children: [ - { - id: 'root', - path: ['sharedux:analytics', 'root'], - title: '', - children: [ - { - id: 'discover', - title: 'Discover', - path: ['sharedux:analytics', 'root', 'discover'], - }, - { - id: 'dashboard', - title: 'Dashboard', - path: ['sharedux:analytics', 'root', 'dashboard'], - }, - { - id: 'visualize', - title: 'Visualize library', - path: ['sharedux:analytics', 'root', 'visualize'], - }, - ], - }, - ], - }, - { - type: 'navGroup', - id: 'sharedux:ml', - title: 'Machine learning', - icon: 'indexMapping', - path: ['sharedux:ml'], - children: [ - { - title: '', - id: 'root', - path: ['sharedux:ml', 'root'], - children: [ - { - title: 'Overview', - id: 'overview', - path: ['sharedux:ml', 'root', 'overview'], - }, - { - title: 'Notifications', - id: 'notifications', - path: ['sharedux:ml', 'root', 'notifications'], - }, - ], - }, - { - title: 'Anomaly detection', - id: 'anomaly_detection', - path: ['sharedux:ml', 'anomaly_detection'], - children: [ - { - title: 'Jobs', - id: 'jobs', - path: ['sharedux:ml', 'anomaly_detection', 'jobs'], - }, - { - title: 'Anomaly explorer', - id: 'explorer', - path: ['sharedux:ml', 'anomaly_detection', 'explorer'], - }, - { - title: 'Single metric viewer', - id: 'single_metric_viewer', - path: ['sharedux:ml', 'anomaly_detection', 'single_metric_viewer'], - }, - { - title: 'Settings', - id: 'settings', - path: ['sharedux:ml', 'anomaly_detection', 'settings'], - }, - ], - }, - { - title: 'Data frame analytics', - id: 'data_frame_analytics', - path: ['sharedux:ml', 'data_frame_analytics'], - children: [ - { - title: 'Jobs', - id: 'jobs', - path: ['sharedux:ml', 'data_frame_analytics', 'jobs'], - }, - { - title: 'Results explorer', - id: 'results_explorer', - path: ['sharedux:ml', 'data_frame_analytics', 'results_explorer'], - }, - { - title: 'Analytics map', - id: 'analytics_map', - path: ['sharedux:ml', 'data_frame_analytics', 'analytics_map'], - }, - ], - }, - { - title: 'Model management', - id: 'model_management', - path: ['sharedux:ml', 'model_management'], - children: [ - { - title: 'Trained models', - id: 'trained_models', - path: ['sharedux:ml', 'model_management', 'trained_models'], - }, - { - title: 'Nodes', - id: 'nodes', - path: ['sharedux:ml', 'model_management', 'nodes'], - }, - ], - }, - { - title: 'Data visualizer', - id: 'data_visualizer', - path: ['sharedux:ml', 'data_visualizer'], - children: [ - { - title: 'File', - id: 'file', - path: ['sharedux:ml', 'data_visualizer', 'file'], - }, - { - title: 'Data view', - id: 'data_view', - path: ['sharedux:ml', 'data_visualizer', 'data_view'], - }, - ], - }, - { - title: 'AIOps labs', - id: 'aiops_labs', - path: ['sharedux:ml', 'aiops_labs'], - children: [ - { - title: 'Explain log rate spikes', - id: 'explain_log_rate_spikes', - path: ['sharedux:ml', 'aiops_labs', 'explain_log_rate_spikes'], - }, - { - title: 'Log pattern analysis', - id: 'log_pattern_analysis', - path: ['sharedux:ml', 'aiops_labs', 'log_pattern_analysis'], - }, - ], - }, - ], - }, - { - type: 'navGroup', - title: 'Developer tools', - id: 'sharedux:devtools', - icon: 'editorCodeBlock', - path: ['sharedux:devtools'], - children: [ - { - id: 'root', - path: ['sharedux:devtools', 'root'], - title: '', - children: [ - { - title: 'Console', - id: 'console', - path: ['sharedux:devtools', 'root', 'console'], - }, - { - title: 'Search profiler', - id: 'search_profiler', - path: ['sharedux:devtools', 'root', 'search_profiler'], - }, - { - title: 'Grok debugger', - id: 'grok_debugger', - path: ['sharedux:devtools', 'root', 'grok_debugger'], - }, - { - title: 'Painless lab', - id: 'painless_lab', - path: ['sharedux:devtools', 'root', 'painless_lab'], - }, - ], - }, - ], - }, - { - type: 'navGroup', - id: 'sharedux:management', - title: 'Management', - icon: 'gear', - path: ['sharedux:management'], - children: [ - { - title: '', - id: 'root', - path: ['sharedux:management', 'root'], - children: [ - { - title: 'Stack monitoring', - id: 'stack_monitoring', - path: ['sharedux:management', 'root', 'stack_monitoring'], - }, - ], - }, - { - title: 'Integration management', - id: 'integration_management', - path: ['sharedux:management', 'integration_management'], - children: [ - { - title: 'Integrations', - id: 'integrations', - path: ['sharedux:management', 'integration_management', 'integrations'], - }, - { - title: 'Fleet', - id: 'fleet', - path: ['sharedux:management', 'integration_management', 'fleet'], - }, - { - title: 'Osquery', - id: 'osquery', - path: ['sharedux:management', 'integration_management', 'osquery'], - }, - ], - }, - { - title: 'Stack management', - id: 'stack_management', - path: ['sharedux:management', 'stack_management'], - children: [ - { - title: 'Upgrade assistant', - id: 'upgrade_assistant', - path: ['sharedux:management', 'stack_management', 'upgrade_assistant'], - }, - { - title: 'Ingest', - id: 'ingest', - path: ['sharedux:management', 'stack_management', 'ingest'], - children: [ - { - title: 'Ingest pipelines', - id: 'ingest_pipelines', - path: ['sharedux:management', 'stack_management', 'ingest', 'ingest_pipelines'], - }, - { - title: 'Logstash pipelines', - id: 'logstash_pipelines', - path: ['sharedux:management', 'stack_management', 'ingest', 'logstash_pipelines'], - }, - ], - }, - { - title: 'Data', - id: 'data', - path: ['sharedux:management', 'stack_management', 'data'], - children: [ - { - title: 'Index management', - id: 'index_management', - path: ['sharedux:management', 'stack_management', 'data', 'index_management'], - }, - { - title: 'Index lifecycle policies', - id: 'index_lifecycle_policies', - path: [ - 'sharedux:management', - 'stack_management', - 'data', - 'index_lifecycle_policies', - ], - }, - { - title: 'Snapshot and restore', - id: 'snapshot_and_restore', - path: ['sharedux:management', 'stack_management', 'data', 'snapshot_and_restore'], - }, - { - title: 'Rollup jobs', - id: 'rollup_jobs', - path: ['sharedux:management', 'stack_management', 'data', 'rollup_jobs'], - }, - { - title: 'Transforms', - id: 'transforms', - path: ['sharedux:management', 'stack_management', 'data', 'transforms'], - }, - { - title: 'Cross-cluster replication', - id: 'cross_cluster_replication', - path: [ - 'sharedux:management', - 'stack_management', - 'data', - 'cross_cluster_replication', - ], - }, - { - title: 'Remote clusters', - id: 'remote_clusters', - path: ['sharedux:management', 'stack_management', 'data', 'remote_clusters'], - }, - ], - }, - { - title: 'Alerts and insights', - id: 'alerts_and_insights', - path: ['sharedux:management', 'stack_management', 'alerts_and_insights'], - children: [ - { - title: 'Rules', - id: 'rules', - path: ['sharedux:management', 'stack_management', 'alerts_and_insights', 'rules'], - }, - { - title: 'Cases', - id: 'cases', - path: ['sharedux:management', 'stack_management', 'alerts_and_insights', 'cases'], - }, - { - title: 'Connectors', - id: 'connectors', - path: [ - 'sharedux:management', - 'stack_management', - 'alerts_and_insights', - 'connectors', - ], - }, - { - title: 'Reporting', - id: 'reporting', - path: [ - 'sharedux:management', - 'stack_management', - 'alerts_and_insights', - 'reporting', - ], - }, - { - title: 'Machine learning', - id: 'machine_learning', - path: [ - 'sharedux:management', - 'stack_management', - 'alerts_and_insights', - 'machine_learning', - ], - }, - { - title: 'Watcher', - id: 'watcher', - path: ['sharedux:management', 'stack_management', 'alerts_and_insights', 'watcher'], - }, - ], - }, - { - title: 'Security', - id: 'security', - path: ['sharedux:management', 'stack_management', 'security'], - children: [ - { - title: 'Users', - id: 'users', - path: ['sharedux:management', 'stack_management', 'security', 'users'], - }, - { - title: 'Roles', - id: 'roles', - path: ['sharedux:management', 'stack_management', 'security', 'roles'], - }, - { - title: 'Role mappings', - id: 'role_mappings', - path: ['sharedux:management', 'stack_management', 'security', 'role_mappings'], - }, - { - title: 'API keys', - id: 'api_keys', - path: ['sharedux:management', 'stack_management', 'security', 'api_keys'], - }, - ], - }, - { - title: 'Kibana', - id: 'kibana', - path: ['sharedux:management', 'stack_management', 'kibana'], - children: [ - { - title: 'Data view', - id: 'data_views', - path: ['sharedux:management', 'stack_management', 'kibana', 'data_views'], - }, - { - title: 'Saved objects', - id: 'saved_objects', - path: ['sharedux:management', 'stack_management', 'kibana', 'saved_objects'], - }, - { - title: 'Tags', - id: 'tags', - path: ['sharedux:management', 'stack_management', 'kibana', 'tags'], - }, - { - title: 'Search sessions', - id: 'search_sessions', - path: ['sharedux:management', 'stack_management', 'kibana', 'search_sessions'], - }, - { - title: 'Spaces', - id: 'spaces', - path: ['sharedux:management', 'stack_management', 'kibana', 'spaces'], - }, - { - title: 'Advanced settings', - id: 'advanced_settings', - path: ['sharedux:management', 'stack_management', 'kibana', 'advanced_settings'], - }, - ], - }, - ], - }, - ], - }, + defaultAnalyticsNavGroup, + defaultMlNavGroup, + defaultDevtoolsNavGroup, + defaultManagementNavGroup, ]; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.tsx index 496f693a82ee4..0856fb4d2ced4 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.tsx @@ -15,7 +15,12 @@ import { getServicesMock } from '../../../mocks/src/jest'; import { NavigationProvider } from '../../services'; import { DefaultNavigation } from './default_navigation'; import type { ProjectNavigationTreeDefinition, RootNavigationItemDefinition } from './types'; -import { defaultNavigationTree } from './default_navigation.test.helpers'; +import { + defaultAnalyticsNavGroup, + defaultDevtoolsNavGroup, + defaultManagementNavGroup, + defaultMlNavGroup, +} from './default_navigation.test.helpers'; const defaultProps = { homeRef: 'https://elastic.co', @@ -371,47 +376,58 @@ describe('', () => { expect(navTreeGenerated).toEqual({ homeRef: 'https://elastic.co', - navigationTree: [ + navigationTree: expect.any(Array), + }); + + // The project navigation tree passed + expect(navTreeGenerated.navigationTree[0]).toEqual({ + id: 'group1', + title: 'Group 1', + path: ['group1'], + children: [ { - id: 'group1', - title: 'Group 1', - path: ['group1'], - children: [ - { - id: 'item1', - title: 'Item 1', - path: ['group1', 'item1'], - }, - { - id: 'item2', - path: ['group1', 'item2'], - title: 'Title from deeplink!', - deepLink: { - id: 'item2', - title: 'Title from deeplink!', - baseUrl: '', - url: '', - href: '', - }, - }, - { - id: 'item3', - title: 'Deeplink title overriden', - path: ['group1', 'item3'], - deepLink: { - id: 'item2', - title: 'Title from deeplink!', - baseUrl: '', - url: '', - href: '', - }, - }, - ], + id: 'item1', + title: 'Item 1', + path: ['group1', 'item1'], + }, + { + id: 'item2', + path: ['group1', 'item2'], + title: 'Title from deeplink!', + deepLink: { + id: 'item2', + title: 'Title from deeplink!', + baseUrl: '', + url: '', + href: '', + }, + }, + { + id: 'item3', + title: 'Deeplink title overriden', + path: ['group1', 'item3'], + deepLink: { + id: 'item2', + title: 'Title from deeplink!', + baseUrl: '', + url: '', + href: '', + }, }, - // The default navigation tree is added at the end - ...defaultNavigationTree.map(({ type, ...rest }) => rest), ], }); + + // The default navigation tree for analytics + expect(navTreeGenerated.navigationTree[1]).toEqual(defaultAnalyticsNavGroup); + + // The default navigation tree for ml + expect(navTreeGenerated.navigationTree[2]).toEqual(defaultMlNavGroup); + + // The default navigation tree for devtools+ + expect(navTreeGenerated.navigationTree[3]).toEqual(defaultDevtoolsNavGroup); + + // The default navigation tree for management + expect(navTreeGenerated.navigationTree[4]).toEqual(defaultManagementNavGroup); }); }); }); From 22ee67a94a52cc0a70a29ae92953b94dce717452 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Loix?= Date: Tue, 30 May 2023 16:17:06 +0100 Subject: [PATCH 13/18] Replace v1 with v2 components --- packages/shared-ux/chrome/navigation/index.ts | 15 +- .../src/ui/{v2 => }/components/cloud_link.tsx | 2 +- .../src/ui/{v2 => }/components/index.ts | 0 .../{v2 => }/components/navigation.test.tsx | 4 +- .../src/ui/{v2 => }/components/navigation.tsx | 12 +- .../{v2 => }/components/navigation_bucket.tsx | 0 .../{v2 => }/components/navigation_footer.tsx | 0 .../{v2 => }/components/navigation_group.tsx | 0 .../{v2 => }/components/navigation_header.tsx | 6 +- .../{v2 => }/components/navigation_item.tsx | 0 .../components/navigation_section_ui.tsx | 6 +- .../ui/{v2 => }/components/navigation_ui.tsx | 10 +- .../{v2 => }/components/recently_accessed.tsx | 8 +- .../default_navigation.test.helpers.ts | 0 .../ui/{v2 => }/default_navigation.test.tsx | 0 .../src/ui/{v2 => }/default_navigation.tsx | 5 +- .../navigation/src/ui/{v2 => }/hooks/index.ts | 0 .../src/ui/{v2 => }/hooks/use_init_navnode.ts | 0 .../{v2 => }/hooks/use_register_tree_node.ts | 0 .../chrome/navigation/src/ui/index.ts | 22 + .../ui/{v2 => }/nav_tree_presets/analytics.ts | 0 .../ui/{v2 => }/nav_tree_presets/devtools.ts | 0 .../src/ui/{v2 => }/nav_tree_presets/index.ts | 0 .../{v2 => }/nav_tree_presets/management.ts | 0 .../src/ui/{v2 => }/nav_tree_presets/ml.ts | 0 .../navigation/src/ui/navigation.stories.tsx | 579 ++++++++++++++---- .../navigation/src/ui/navigation.test.tsx | 181 ------ .../chrome/navigation/src/ui/navigation.tsx | 200 ------ .../navigation/src/ui/navigation_bucket.tsx | 101 --- .../navigation/src/ui/{v2 => }/types.ts | 7 +- .../src/ui/v2/navigation.stories.tsx | 547 ----------------- 31 files changed, 547 insertions(+), 1158 deletions(-) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/components/cloud_link.tsx (97%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/components/index.ts (100%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/components/navigation.test.tsx (99%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/components/navigation.tsx (93%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/components/navigation_bucket.tsx (100%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/components/navigation_footer.tsx (100%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/components/navigation_group.tsx (100%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/components/navigation_header.tsx (91%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/components/navigation_item.tsx (100%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/components/navigation_section_ui.tsx (93%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/components/navigation_ui.tsx (87%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/components/recently_accessed.tsx (88%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/default_navigation.test.helpers.ts (100%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/default_navigation.test.tsx (100%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/default_navigation.tsx (95%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/hooks/index.ts (100%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/hooks/use_init_navnode.ts (100%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/hooks/use_register_tree_node.ts (100%) create mode 100644 packages/shared-ux/chrome/navigation/src/ui/index.ts rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/nav_tree_presets/analytics.ts (100%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/nav_tree_presets/devtools.ts (100%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/nav_tree_presets/index.ts (100%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/nav_tree_presets/management.ts (100%) rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/nav_tree_presets/ml.ts (100%) delete mode 100644 packages/shared-ux/chrome/navigation/src/ui/navigation.test.tsx delete mode 100644 packages/shared-ux/chrome/navigation/src/ui/navigation.tsx delete mode 100644 packages/shared-ux/chrome/navigation/src/ui/navigation_bucket.tsx rename packages/shared-ux/chrome/navigation/src/ui/{v2 => }/types.ts (99%) delete mode 100644 packages/shared-ux/chrome/navigation/src/ui/v2/navigation.stories.tsx diff --git a/packages/shared-ux/chrome/navigation/index.ts b/packages/shared-ux/chrome/navigation/index.ts index 9f9e15bacb207..1d500b72117ec 100644 --- a/packages/shared-ux/chrome/navigation/index.ts +++ b/packages/shared-ux/chrome/navigation/index.ts @@ -7,7 +7,20 @@ */ export { NavigationKibanaProvider, NavigationProvider } from './src/services'; -export { Navigation } from './src/ui/navigation'; + +export { DefaultNavigation, Navigation } from './src/ui'; + +export type { + NavigationTreeDefinition, + ProjectNavigationDefinition, + NodeDefinition, + NavigationGroupPreset, + GroupDefinition, + RecentlyAccessedDefinition, + CloudLinkDefinition, + RootNavigationItemDefinition, +} from './src/ui'; + export type { ChromeNavigation, ChromeNavigationViewModel, diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/cloud_link.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/cloud_link.tsx similarity index 97% rename from packages/shared-ux/chrome/navigation/src/ui/v2/components/cloud_link.tsx rename to packages/shared-ux/chrome/navigation/src/ui/components/cloud_link.tsx index 8e8ac169eded9..b71b949e47603 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/components/cloud_link.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/components/cloud_link.tsx @@ -7,7 +7,7 @@ */ import { EuiCollapsibleNavGroup, EuiLink } from '@elastic/eui'; import React, { FC } from 'react'; -import { getI18nStrings } from '../../i18n_strings'; +import { getI18nStrings } from '../i18n_strings'; const i18nTexts = getI18nStrings(); diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/index.ts b/packages/shared-ux/chrome/navigation/src/ui/components/index.ts similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/v2/components/index.ts rename to packages/shared-ux/chrome/navigation/src/ui/components/index.ts diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.test.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation.test.tsx similarity index 99% rename from packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.test.tsx rename to packages/shared-ux/chrome/navigation/src/ui/components/navigation.test.tsx index 7206da81e261a..3eef283038a14 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.test.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/components/navigation.test.tsx @@ -11,8 +11,8 @@ import { render } from '@testing-library/react'; import { type Observable, of } from 'rxjs'; import type { ChromeNavLink } from '@kbn/core-chrome-browser'; -import { getServicesMock } from '../../../../mocks/src/jest'; -import { NavigationProvider } from '../../../services'; +import { getServicesMock } from '../../../mocks/src/jest'; +import { NavigationProvider } from '../../services'; import { Navigation } from './navigation'; import { defaultAnalyticsNavGroup, diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation.tsx similarity index 93% rename from packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.tsx rename to packages/shared-ux/chrome/navigation/src/ui/components/navigation.tsx index 2cbbe766059d6..6825c8a8084bf 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/components/navigation.tsx @@ -18,7 +18,7 @@ import React, { } from 'react'; import type { ChromeProjectNavigationNode } from '@kbn/core-chrome-browser'; -import { useNavigation as useNavigationServices } from '../../../services'; +import { useNavigation as useNavigationServices } from '../../services'; import { RegisterFunction, UnRegisterFunction } from '../types'; import { CloudLink } from './cloud_link'; import { NavigationFooter } from './navigation_footer'; @@ -53,9 +53,10 @@ interface Props { * If set to true, the children will be rendered as is. */ unstyled?: boolean; + dataTestSubj?: string; } -export function Navigation({ children, homeRef, unstyled = false }: Props) { +export function Navigation({ children, homeRef, unstyled = false, dataTestSubj }: Props) { const { onProjectNavigationChange } = useNavigationServices(); // We keep a reference of the order of the children that register themselves when mounting. @@ -119,7 +120,12 @@ export function Navigation({ children, homeRef, unstyled = false }: Props) { return ( - + {children} diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_bucket.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_bucket.tsx similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_bucket.tsx rename to packages/shared-ux/chrome/navigation/src/ui/components/navigation_bucket.tsx diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_footer.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_footer.tsx similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_footer.tsx rename to packages/shared-ux/chrome/navigation/src/ui/components/navigation_footer.tsx diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_group.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_group.tsx similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_group.tsx rename to packages/shared-ux/chrome/navigation/src/ui/components/navigation_group.tsx diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_header.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_header.tsx similarity index 91% rename from packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_header.tsx rename to packages/shared-ux/chrome/navigation/src/ui/components/navigation_header.tsx index 92f93e8092979..e7db1d25aaddb 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_header.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_header.tsx @@ -9,9 +9,9 @@ import React, { FC } from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiHeaderLogo, EuiLoadingSpinner } from '@elastic/eui'; import useObservable from 'react-use/lib/useObservable'; -import { useNavigation as useServices } from '../../../services'; -import { ElasticMark } from '../../elastic_mark'; -import { getI18nStrings } from '../../i18n_strings'; +import { useNavigation as useServices } from '../../services'; +import { ElasticMark } from '../elastic_mark'; +import { getI18nStrings } from '../i18n_strings'; import '../../header_logo.scss'; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_item.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_item.tsx similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_item.tsx rename to packages/shared-ux/chrome/navigation/src/ui/components/navigation_item.tsx diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_section_ui.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx similarity index 93% rename from packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_section_ui.tsx rename to packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx index 737cdf0376411..a592e6cc539b2 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_section_ui.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx @@ -14,9 +14,9 @@ import { EuiSideNavItemType, EuiText, } from '@elastic/eui'; -import type { BasePathService, NavigateToUrlFn } from '../../../../types/internal'; -import { navigationStyles as styles } from '../../../styles'; -import { useNavigation as useServices } from '../../../services'; +import type { BasePathService, NavigateToUrlFn } from '../../../types/internal'; +import { navigationStyles as styles } from '../../styles'; +import { useNavigation as useServices } from '../../services'; import { ChromeProjectNavigationNodeEnhanced } from '../types'; const navigationNodeToEuiItem = ( diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_ui.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_ui.tsx similarity index 87% rename from packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_ui.tsx rename to packages/shared-ux/chrome/navigation/src/ui/components/navigation_ui.tsx index 7c754b3a9ce76..a0f48aef8a112 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/components/navigation_ui.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_ui.tsx @@ -14,9 +14,16 @@ interface Props { homeRef: string; unstyled?: boolean; footerChildren?: React.ReactNode; + dataTestSubj?: string; } -export const NavigationUI: FC = ({ children, unstyled, footerChildren, homeRef }) => { +export const NavigationUI: FC = ({ + children, + unstyled, + footerChildren, + homeRef, + dataTestSubj, +}) => { const { euiTheme } = useEuiTheme(); return ( @@ -33,6 +40,7 @@ export const NavigationUI: FC = ({ children, unstyled, footerChildren, ho gutterSize="none" style={{ overflowY: 'auto' }} justifyContent="spaceBetween" + data-test-subj={dataTestSubj} > {children} diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/components/recently_accessed.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/recently_accessed.tsx similarity index 88% rename from packages/shared-ux/chrome/navigation/src/ui/v2/components/recently_accessed.tsx rename to packages/shared-ux/chrome/navigation/src/ui/components/recently_accessed.tsx index 0c5b0b0ead1fe..b6bbff8904ed4 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/components/recently_accessed.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/components/recently_accessed.tsx @@ -11,11 +11,11 @@ import React, { FC } from 'react'; import useObservable from 'react-use/lib/useObservable'; import type { Observable } from 'rxjs'; -import { RecentItem } from '../../../../types/internal'; -import { useNavigation as useServices } from '../../../services'; -import { navigationStyles as styles } from '../../../styles'; +import { RecentItem } from '../../../types/internal'; +import { useNavigation as useServices } from '../../services'; +import { navigationStyles as styles } from '../../styles'; -import { getI18nStrings } from '../../i18n_strings'; +import { getI18nStrings } from '../i18n_strings'; export interface Props { recentlyAccessed$?: Observable; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.helpers.ts b/packages/shared-ux/chrome/navigation/src/ui/default_navigation.test.helpers.ts similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.helpers.ts rename to packages/shared-ux/chrome/navigation/src/ui/default_navigation.test.helpers.ts diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.tsx b/packages/shared-ux/chrome/navigation/src/ui/default_navigation.test.tsx similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.test.tsx rename to packages/shared-ux/chrome/navigation/src/ui/default_navigation.test.tsx diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.tsx b/packages/shared-ux/chrome/navigation/src/ui/default_navigation.tsx similarity index 95% rename from packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.tsx rename to packages/shared-ux/chrome/navigation/src/ui/default_navigation.tsx index e1a34b5e5092d..ec2b921e01e82 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/default_navigation.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/default_navigation.tsx @@ -69,10 +69,11 @@ const getDefaultNavigationTree = ( let idCounter = 0; -export const DefaultNavigation: FC = ({ +export const DefaultNavigation: FC = ({ homeRef, projectNavigationTree, navigationTree, + dataTestSubj, }) => { if (!navigationTree && !projectNavigationTree) { throw new Error('One of navigationTree or projectNavigationTree must be defined'); @@ -130,7 +131,7 @@ export const DefaultNavigation: FC = ({ ); return ( - + <> {renderItems(navigationDefinition.body)} {navigationDefinition.footer && ( diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/hooks/index.ts b/packages/shared-ux/chrome/navigation/src/ui/hooks/index.ts similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/v2/hooks/index.ts rename to packages/shared-ux/chrome/navigation/src/ui/hooks/index.ts diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/hooks/use_init_navnode.ts b/packages/shared-ux/chrome/navigation/src/ui/hooks/use_init_navnode.ts similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/v2/hooks/use_init_navnode.ts rename to packages/shared-ux/chrome/navigation/src/ui/hooks/use_init_navnode.ts diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/hooks/use_register_tree_node.ts b/packages/shared-ux/chrome/navigation/src/ui/hooks/use_register_tree_node.ts similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/v2/hooks/use_register_tree_node.ts rename to packages/shared-ux/chrome/navigation/src/ui/hooks/use_register_tree_node.ts diff --git a/packages/shared-ux/chrome/navigation/src/ui/index.ts b/packages/shared-ux/chrome/navigation/src/ui/index.ts new file mode 100644 index 0000000000000..34089f5ad633b --- /dev/null +++ b/packages/shared-ux/chrome/navigation/src/ui/index.ts @@ -0,0 +1,22 @@ +/* + * 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 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 or the Server + * Side Public License, v 1. + */ + +export { Navigation } from './components'; + +export { DefaultNavigation } from './default_navigation'; + +export type { + NavigationTreeDefinition, + ProjectNavigationDefinition, + NodeDefinition, + NavigationGroupPreset, + GroupDefinition, + RecentlyAccessedDefinition, + CloudLinkDefinition, + RootNavigationItemDefinition, +} from './types'; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/analytics.ts b/packages/shared-ux/chrome/navigation/src/ui/nav_tree_presets/analytics.ts similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/analytics.ts rename to packages/shared-ux/chrome/navigation/src/ui/nav_tree_presets/analytics.ts diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/devtools.ts b/packages/shared-ux/chrome/navigation/src/ui/nav_tree_presets/devtools.ts similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/devtools.ts rename to packages/shared-ux/chrome/navigation/src/ui/nav_tree_presets/devtools.ts diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/index.ts b/packages/shared-ux/chrome/navigation/src/ui/nav_tree_presets/index.ts similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/index.ts rename to packages/shared-ux/chrome/navigation/src/ui/nav_tree_presets/index.ts diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/management.ts b/packages/shared-ux/chrome/navigation/src/ui/nav_tree_presets/management.ts similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/management.ts rename to packages/shared-ux/chrome/navigation/src/ui/nav_tree_presets/management.ts diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/ml.ts b/packages/shared-ux/chrome/navigation/src/ui/nav_tree_presets/ml.ts similarity index 100% rename from packages/shared-ux/chrome/navigation/src/ui/v2/nav_tree_presets/ml.ts rename to packages/shared-ux/chrome/navigation/src/ui/nav_tree_presets/ml.ts diff --git a/packages/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx b/packages/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx index b666f4d409869..987d6d3dda8f9 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx @@ -6,39 +6,41 @@ * Side Public License, v 1. */ +import React, { FC, useCallback, useState } from 'react'; +import { of } from 'rxjs'; +import { ComponentMeta } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import type { ChromeNavLink } from '@kbn/core-chrome-browser'; + import { - EuiButtonEmpty, + EuiButton, EuiButtonIcon, EuiCollapsibleNav, - EuiPopover, + EuiFlexGroup, + EuiFlexItem, + EuiLink, + EuiText, EuiThemeProvider, + EuiTitle, } from '@elastic/eui'; import { css } from '@emotion/react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import React, { useCallback, useState } from 'react'; -import { BehaviorSubject } from 'rxjs'; -import { getSolutionPropertiesMock, NavigationStorybookMock } from '../../mocks'; -import mdx from '../../README.mdx'; -import { ChromeNavigationViewModel, NavigationServices } from '../../types'; -import { Platform } from '../model'; -import { NavigationProvider } from '../services'; -import { Navigation as Component } from './navigation'; +import { NavigationStorybookMock } from '../../../mocks'; +import mdx from '../../../README.mdx'; +import { NavigationProvider } from '../../services'; +import { DefaultNavigation } from './default_navigation'; +import type { ChromeNavigationViewModel, NavigationServices } from '../../../types'; +import { Navigation } from './components'; +import { ProjectNavigationDefinition } from './types'; +import { getPresets } from './nav_tree_presets'; const storybookMock = new NavigationStorybookMock(); const SIZE_OPEN = 248; const SIZE_CLOSED = 40; -const Template = (args: ChromeNavigationViewModel & NavigationServices) => { - const services = storybookMock.getServices(args); - const props = storybookMock.getProps(args); - +const NavigationWrapper: FC = ({ children }) => { const [isOpen, setIsOpen] = useState(true); - const toggleOpen = useCallback(() => { - setIsOpen(!isOpen); - }, [isOpen, setIsOpen]); - const collabsibleNavCSS = css` border-inline-end-width: 1, display: flex, @@ -57,11 +59,16 @@ const Template = (args: ChromeNavigationViewModel & NavigationServices) => { iconType={isOpen ? 'menuLeft' : 'menuRight'} color={isOpen ? 'ghost' : 'text'} onClick={toggleOpen} + aria-label={isOpen ? 'Collapse navigation' : 'Expand navigation'} /> ); }; + const toggleOpen = useCallback(() => { + setIsOpen(!isOpen); + }, [isOpen, setIsOpen]); + return ( { hideCloseButton={false} button={} > - {isOpen && ( - - - - )} + {isOpen && children} ); }; -export default { - title: 'Chrome/Navigation', - description: 'Navigation container to render items for cross-app linking', - parameters: { - docs: { - page: mdx, - }, - }, - component: Template, -} as ComponentMeta; +const baseDeeplink: ChromeNavLink = { + id: 'foo', + title: 'Title from deep link', + href: 'https://elastic.co', + url: '', + baseUrl: '', +}; -export const SingleExpanded: ComponentStory = Template.bind({}); -SingleExpanded.args = { - activeNavItemId: 'example_project.root.get_started', - navigationTree: [getSolutionPropertiesMock()], +const createDeepLink = (id: string, title: string = baseDeeplink.title) => { + return { + ...baseDeeplink, + id, + title, + }; }; -SingleExpanded.argTypes = storybookMock.getArgumentTypes(); - -export const ReducedPlatformLinks: ComponentStory = Template.bind({}); -ReducedPlatformLinks.args = { - activeNavItemId: 'example_project.root.get_started', - platformConfig: { - [Platform.Analytics]: { enabled: false }, - [Platform.MachineLearning]: { enabled: false }, - [Platform.DevTools]: { enabled: false }, - [Platform.Management]: { - properties: { - root: { - enabled: false, // disables the un-named section that contains only "Stack Monitoring" - }, - integration_management: { - properties: { - integrations: { enabled: false }, // enable only osquery - fleet: { enabled: false }, // enable only osquery - }, + +const deepLinks: ChromeNavLink[] = [ + createDeepLink('item1'), + createDeepLink('item2', 'Foo'), + createDeepLink('group1:item1'), + createDeepLink('group1:groupA:groupI:item1'), + createDeepLink('group1:groupA', 'Group title from deep link'), + createDeepLink('group2', 'Group title from deep link'), + createDeepLink('group2:item1'), + createDeepLink('group2:item3'), +]; + +const simpleNavigationDefinition: ProjectNavigationDefinition = { + homeRef: 'https://elastic.co', + projectNavigationTree: [ + { + id: 'example_projet', + title: 'Example project', + icon: 'logoObservability', + defaultIsCollapsed: false, + children: [ + { + id: 'root', + children: [ + { + id: 'item1', + title: 'Get started', + }, + { + id: 'item2', + title: 'Alerts', + }, + { + id: 'item3', + title: 'Dashboards', + }, + ], }, - stack_management: { - enabled: false, // disables the stack management section + { + id: 'group:settings', + title: 'Settings', + children: [ + { + id: 'logs', + title: 'Logs', + }, + { + id: 'signals', + title: 'Signals', + }, + { + id: 'tracing', + title: 'Tracing', + }, + ], }, - }, + ], + }, + ], +}; + +export const SimpleObjectDefinition = (args: ChromeNavigationViewModel & NavigationServices) => { + const services = storybookMock.getServices({ + ...args, + navLinks$: of(deepLinks), + onProjectNavigationChange: (updated) => { + action('Update chrome navigation')(JSON.stringify(updated, null, 2)); }, + recentlyAccessed$: of([ + { label: 'This is an example', link: '/app/example/39859', id: '39850' }, + { label: 'Another example', link: '/app/example/5235', id: '5235' }, + ]), + }); + + return ( + + + + + + ); +}; + +const navigationDefinition: ProjectNavigationDefinition = { + homeRef: 'https://elastic.co', + navigationTree: { + body: [ + { + type: 'cloudLink', + preset: 'deployments', + }, + // My custom project + { + type: 'navGroup', + id: 'example_projet', + title: 'Example project', + icon: 'logoObservability', + defaultIsCollapsed: false, + children: [ + { + id: 'root', + children: [ + { + id: 'item1', + title: 'Get started', + }, + { + id: 'item2', + title: 'Alerts', + }, + { + id: 'item3', + title: 'Some other node', + }, + ], + }, + { + id: 'group:settings', + title: 'Settings', + children: [ + { + id: 'logs', + title: 'Logs', + }, + { + id: 'signals', + title: 'Signals', + }, + { + id: 'tracing', + title: 'Tracing', + }, + ], + }, + ], + }, + // Add ml + { + type: 'navGroup', + preset: 'ml', + }, + // And specific links from analytics + { + type: 'navGroup', + ...getPresets('analytics'), + title: 'My analytics', // Change the title + children: getPresets('analytics').children.map((child) => ({ + ...child, + children: child.children?.filter((item) => { + // Hide discover and dashboard + return item.id !== 'discover' && item.id !== 'dashboard'; + }), + })), + }, + ], + footer: [ + { + type: 'recentlyAccessed', + defaultIsCollapsed: true, + // Override the default recently accessed items with our own + recentlyAccessed$: of([ + { + label: 'My own recent item', + id: '1234', + link: '/app/example/39859', + }, + { + label: 'I also own this', + id: '4567', + link: '/app/example/39859', + }, + ]), + }, + { + type: 'navGroup', + ...getPresets('devtools'), + }, + ], }, - navigationTree: [getSolutionPropertiesMock()], }; -ReducedPlatformLinks.argTypes = storybookMock.getArgumentTypes(); -export const WithRequestsLoading: ComponentStory = Template.bind({}); -WithRequestsLoading.args = { - activeNavItemId: 'example_project.root.get_started', - loadingCount$: new BehaviorSubject(1), - navigationTree: [getSolutionPropertiesMock()], +export const ComplexObjectDefinition = (args: ChromeNavigationViewModel & NavigationServices) => { + const services = storybookMock.getServices({ + ...args, + navLinks$: of(deepLinks), + onProjectNavigationChange: (updated) => { + action('Update chrome navigation')(JSON.stringify(updated, null, 2)); + }, + recentlyAccessed$: of([ + { label: 'This is an example', link: '/app/example/39859', id: '39850' }, + { label: 'Another example', link: '/app/example/5235', id: '5235' }, + ]), + }); + + return ( + + + + + + ); }; -WithRequestsLoading.argTypes = storybookMock.getArgumentTypes(); - -export const WithRecentlyAccessed: ComponentStory = Template.bind({}); -WithRecentlyAccessed.args = { - activeNavItemId: 'example_project.root.get_started', - loadingCount$: new BehaviorSubject(0), - recentlyAccessed$: new BehaviorSubject([ - { label: 'This is an example', link: '/app/example/39859', id: '39850' }, - { label: 'This is not an example', link: '/app/non-example/39458', id: '39458' }, // NOTE: this will be filtered out - ]), - recentlyAccessedFilter: (items) => - items.filter((item) => item.link.indexOf('/app/example') === 0), - navigationTree: [getSolutionPropertiesMock()], + +export const WithUIComponents = (args: ChromeNavigationViewModel & NavigationServices) => { + const services = storybookMock.getServices({ + ...args, + navLinks$: of(deepLinks), + onProjectNavigationChange: (updated) => { + action('Update chrome navigation')(JSON.stringify(updated, null, 2)); + }, + recentlyAccessed$: of([ + { label: 'This is an example', link: '/app/example/39859', id: '39850' }, + { label: 'Another example', link: '/app/example/5235', id: '5235' }, + ]), + }); + + return ( + + + + + + + + + + + + {(navNode) => { + return ( + {`Render prop: ${navNode.id} - ${navNode.title}`} + ); + }} + + + + Title in ReactNode + + + + + + + + + + + + + + + + + + + + + + ); }; -WithRecentlyAccessed.argTypes = storybookMock.getArgumentTypes(); -export const CustomElements: ComponentStory = Template.bind({}); -CustomElements.args = { - activeNavItemId: 'example_project.custom', - navigationTree: [ - { - ...getSolutionPropertiesMock(), - items: [ - { - title: ( - - Custom element - - } - isOpen={true} - anchorPosition="rightCenter" - > - Cool popover content - - ), - id: 'custom', - }, - ], +export const MinimalUIAndCustomCloudLink = ( + args: ChromeNavigationViewModel & NavigationServices +) => { + const services = storybookMock.getServices({ + ...args, + navLinks$: of(deepLinks), + onProjectNavigationChange: (updated) => { + action('Update chrome navigation')(JSON.stringify(updated, null, 2)); }, - ], + recentlyAccessed$: of([ + { label: 'This is an example', link: '/app/example/39859', id: '39850' }, + { label: 'Another example', link: '/app/example/5235', id: '5235' }, + ]), + }); + + return ( + + + + + + + + + + + + + + Some children node + + + + + + + + + + + + + + + + + + ); +}; + +export default { + title: 'Chrome/Navigation/v2', + description: 'Navigation container to render items for cross-app linking', + parameters: { + docs: { + page: mdx, + }, + }, + component: WithUIComponents, +} as ComponentMeta; + +export const CreativeUI = (args: ChromeNavigationViewModel & NavigationServices) => { + const services = storybookMock.getServices({ + ...args, + navLinks$: of(deepLinks), + onProjectNavigationChange: (updated) => { + action('Update chrome navigation')(JSON.stringify(updated, null, 2)); + }, + recentlyAccessed$: of([ + { label: 'This is an example', link: '/app/example/39859', id: '39850' }, + { label: 'Another example', link: '/app/example/5235', id: '5235' }, + ]), + }); + + return ( + + + + + + + + +

    Hello!

    +     + + + + +

    + As you can see there is really no limit in what UI you can create! +
    +

    +

    + Have fun! +

    +     + + +     +     +     + + +     +     +     + ); }; -CustomElements.argTypes = storybookMock.getArgumentTypes(); diff --git a/packages/shared-ux/chrome/navigation/src/ui/navigation.test.tsx b/packages/shared-ux/chrome/navigation/src/ui/navigation.test.tsx deleted file mode 100644 index 4a39a4e651d7a..0000000000000 --- a/packages/shared-ux/chrome/navigation/src/ui/navigation.test.tsx +++ /dev/null @@ -1,181 +0,0 @@ -/* - * 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 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 or the Server - * Side Public License, v 1. - */ - -import { render } from '@testing-library/react'; -import React from 'react'; -import { BehaviorSubject } from 'rxjs'; -import { getServicesMock } from '../../mocks/src/jest'; -import { ChromeNavigationNodeViewModel, PlatformConfigSet } from '../../types'; -import { Platform } from '../model'; -import { NavigationProvider } from '../services'; -import { Navigation } from './navigation'; - -describe('', () => { - const services = getServicesMock(); - - const homeHref = '#'; - let platformSections: PlatformConfigSet | undefined; - let solutions: ChromeNavigationNodeViewModel[]; - - beforeEach(() => { - platformSections = { analytics: {}, ml: {}, devTools: {}, management: {} }; - solutions = [{ id: 'navigation_testing', title: 'Navigation testing', icon: 'gear' }]; - }); - - test('renders the header logo and top-level navigation buckets', async () => { - const { findByTestId, findByText, queryByTestId } = render( - - - - ); - - expect(await findByText('Navigation testing')).toBeVisible(); - - expect(await findByTestId('nav-header-logo')).toBeVisible(); - expect(await findByTestId('nav-bucket-navigation_testing')).toBeVisible(); - expect(await findByTestId('nav-bucket-analytics')).toBeVisible(); - expect(await findByTestId('nav-bucket-ml')).toBeVisible(); - expect(await findByTestId('nav-bucket-devTools')).toBeVisible(); - expect(await findByTestId('nav-bucket-management')).toBeVisible(); - - expect(queryByTestId('nav-bucket-recentlyAccessed')).not.toBeInTheDocument(); - }); - - test('includes link to deployments', async () => { - const { findByText } = render( - - - - ); - - expect(await findByText('My deployments')).toBeVisible(); - }); - - test('platform links can be disabled', async () => { - platformSections = { - [Platform.Analytics]: { enabled: false }, - [Platform.MachineLearning]: { enabled: false }, - [Platform.DevTools]: { enabled: false }, - [Platform.Management]: { enabled: false }, - }; - - const { findByTestId, queryByTestId } = render( - - - - ); - - expect(await findByTestId('nav-header-logo')).toBeVisible(); - expect(queryByTestId('nav-bucket-analytics')).not.toBeInTheDocument(); - expect(queryByTestId('nav-bucket-ml')).not.toBeInTheDocument(); - expect(queryByTestId('nav-bucket-devTools')).not.toBeInTheDocument(); - expect(queryByTestId('nav-bucket-management')).not.toBeInTheDocument(); - }); - - test('sets the specified nav item to active', async () => { - solutions[0].items = [ - { - id: 'root', - title: '', - items: [ - { - id: 'city', - title: 'City', - }, - { - id: 'town', - title: 'Town', - }, - ], - }, - ]; - - const { findByTestId } = render( - - - - ); - - const label = await findByTestId('nav-item-navigation_testing.root.city-selected'); - expect(label).toHaveTextContent('City'); - expect(label).toBeVisible(); - }); - - test('shows loading state', async () => { - services.loadingCount$ = new BehaviorSubject(5); - - const { findByTestId } = render( - - - - ); - - expect(await findByTestId('nav-header-loading-spinner')).toBeVisible(); - }); - - describe('recent items', () => { - const recentlyAccessed = [ - { id: 'dashboard:234', label: 'Recently Accessed Test Item', link: '/app/dashboard/234' }, - ]; - - test('shows recent items', async () => { - services.recentlyAccessed$ = new BehaviorSubject(recentlyAccessed); - - const { findByTestId } = render( - - - - ); - - expect(await findByTestId('nav-bucket-recentlyAccessed')).toBeVisible(); - }); - - test('shows no recent items container when items are filtered', async () => { - services.recentlyAccessed$ = new BehaviorSubject(recentlyAccessed); - - const { queryByTestId } = render( - - []} - /> - - ); - - expect(queryByTestId('nav-bucket-recentlyAccessed')).not.toBeInTheDocument(); - }); - }); -}); diff --git a/packages/shared-ux/chrome/navigation/src/ui/navigation.tsx b/packages/shared-ux/chrome/navigation/src/ui/navigation.tsx deleted file mode 100644 index 05407fd0b1a7b..0000000000000 --- a/packages/shared-ux/chrome/navigation/src/ui/navigation.tsx +++ /dev/null @@ -1,200 +0,0 @@ -/* - * 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 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 or the Server - * Side Public License, v 1. - */ - -import { - EuiCollapsibleNavGroup, - EuiFlexGroup, - EuiFlexItem, - EuiHeaderLogo, - EuiLink, - EuiLoadingSpinner, - EuiSideNav, - EuiSideNavItemType, - EuiSpacer, - useEuiTheme, -} from '@elastic/eui'; -import React from 'react'; -import useObservable from 'react-use/lib/useObservable'; -import type { ChromeNavigationViewModel } from '../../types'; -import { NavigationModel } from '../model'; -import { useNavigation } from '../services'; -import { navigationStyles as styles } from '../styles'; -import { ElasticMark } from './elastic_mark'; -import './header_logo.scss'; -import { getI18nStrings } from './i18n_strings'; -import { NavigationBucket, type Props as NavigationBucketProps } from './navigation_bucket'; - -interface Props extends ChromeNavigationViewModel { - /** - * ID of sections to highlight - */ - activeNavItemId?: string; - dataTestSubj?: string; // optional test subject for the navigation -} - -export const Navigation = ({ - platformConfig, - navigationTree, - homeHref, - linkToCloud, - activeNavItemId: activeNavItemIdProps, - ...props -}: Props) => { - const { activeNavItemId } = useNavigation(); - const { euiTheme } = useEuiTheme(); - - const activeNav = activeNavItemId ?? activeNavItemIdProps; - - const nav = new NavigationModel(platformConfig, navigationTree); - - const solutions = nav.getSolutions(); - const { analytics, ml, devTools, management } = nav.getPlatform(); - - const strings = getI18nStrings(); - - const NavHeader = () => { - const { basePath, navIsOpen, navigateToUrl, loadingCount$ } = useNavigation(); - const loadingCount = useObservable(loadingCount$, 0); - const homeUrl = basePath.prepend(homeHref); - const navigateHome = (event: React.MouseEvent) => { - event.preventDefault(); - navigateToUrl(homeUrl); - }; - const logo = - loadingCount === 0 ? ( - - ) : ( - - - - ); - - return ( - <> - {logo} - {navIsOpen ? : null} - - ); - }; - - const LinkToCloud = () => { - switch (linkToCloud) { - case 'projects': - return ( - - - - ); - case 'deployments': - return ( - - - - ); - default: - return null; - } - }; - - const RecentlyAccessed = () => { - const { recentlyAccessed$ } = useNavigation(); - const recentlyAccessed = useObservable(recentlyAccessed$, []); - - // consumer may filter objects from recent that are not applicable to the project - let filteredRecent = recentlyAccessed; - if (props.recentlyAccessedFilter) { - filteredRecent = props.recentlyAccessedFilter(recentlyAccessed); - } - - if (filteredRecent.length > 0) { - const navItems: Array> = [ - { - name: '', // no list header title - id: 'recents_root', - items: filteredRecent.map(({ id, label, link }) => ({ - id, - name: label, - href: link, - })), - }, - ]; - - return ( - - - - ); - } - - return null; - }; - - // higher-order-component to keep the common props DRY - const NavigationBucketHoc = (outerProps: Omit) => ( - - ); - - return ( - - - - - - - - - - - {solutions.map((navTree, idx) => { - return ; - })} - - {nav.isEnabled('analytics') ? : null} - {nav.isEnabled('ml') ? : null} - - - - - - - - {nav.isEnabled('devTools') ? : null} - {nav.isEnabled('management') ? : null} - - - ); -}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/navigation_bucket.tsx b/packages/shared-ux/chrome/navigation/src/ui/navigation_bucket.tsx deleted file mode 100644 index 8055daf834a64..0000000000000 --- a/packages/shared-ux/chrome/navigation/src/ui/navigation_bucket.tsx +++ /dev/null @@ -1,101 +0,0 @@ -/* - * 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 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 or the Server - * Side Public License, v 1. - */ - -import { - EuiCollapsibleNavGroup, - EuiIcon, - EuiSideNav, - EuiSideNavItemType, - EuiText, -} from '@elastic/eui'; -import React from 'react'; -import { ChromeNavigationNodeViewModel } from '../../types'; -import type { BasePathService, NavigateToUrlFn } from '../../types/internal'; -import { useNavigation } from '../services'; -import { navigationStyles as styles } from '../styles'; - -const navigationNodeToEuiItem = ( - item: ChromeNavigationNodeViewModel, - { - navigateToUrl, - basePath, - activeNavItemId, - }: { activeNavItemId?: string; navigateToUrl: NavigateToUrlFn; basePath: BasePathService } -): EuiSideNavItemType => { - const path = item.path ?? item.id; - - let subjId = path; - let isSelected: boolean = false; - - if (!item.items && path === activeNavItemId) { - // if there are no subnav items and ID is current, mark the item as selected - isSelected = true; - subjId += '-selected'; - } - - return { - id: path, - name: item.title, - isSelected, - onClick: - item.href !== undefined - ? (event: React.MouseEvent) => { - event.preventDefault(); - navigateToUrl(basePath.prepend(item.href!)); - } - : undefined, - href: item.href, - items: item.items?.map((_item) => - navigationNodeToEuiItem(_item, { navigateToUrl, basePath, activeNavItemId }) - ), - ['data-test-subj']: `nav-item-${subjId}`, - ...(item.icon && { - icon: , - }), - }; -}; - -export interface Props { - navigationTree: ChromeNavigationNodeViewModel; - activeNavItemId?: string; -} - -export const NavigationBucket = (props: Props) => { - const { navigationTree, activeNavItemId } = props; - const { navIsOpen, navigateToUrl, basePath } = useNavigation(); - const { id, title, icon, items } = navigationTree; - - if (navIsOpen) { - return ( - - - - navigationNodeToEuiItem(item, { navigateToUrl, basePath, activeNavItemId }) - )} - css={styles.euiSideNavItems} - /> - - - ); - } - - return ( -
    - -
    -
    - ); -}; diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/types.ts b/packages/shared-ux/chrome/navigation/src/ui/types.ts similarity index 99% rename from packages/shared-ux/chrome/navigation/src/ui/v2/types.ts rename to packages/shared-ux/chrome/navigation/src/ui/types.ts index e04f8af8bdf67..96c283d508f87 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/types.ts +++ b/packages/shared-ux/chrome/navigation/src/ui/types.ts @@ -54,7 +54,7 @@ export interface NodeProps extends Omit { } /** - * @private + * @internal * * Internally we enhance the Props passed to the Navigation.Item component. */ @@ -66,6 +66,9 @@ export interface NodePropsEnhanced extends NodeProps { renderItem?: () => ReactElement; } +/** + * @internal + */ export interface ChromeProjectNavigationNodeEnhanced extends ChromeProjectNavigationNode { /** * This function correspond to the same "itemRender" function that can be passed to @@ -164,7 +167,7 @@ export interface ProjectNavigationDefinition { } /** - * @private + * @internal * * Function to unregister a navigation node from its parent. */ diff --git a/packages/shared-ux/chrome/navigation/src/ui/v2/navigation.stories.tsx b/packages/shared-ux/chrome/navigation/src/ui/v2/navigation.stories.tsx deleted file mode 100644 index 987d6d3dda8f9..0000000000000 --- a/packages/shared-ux/chrome/navigation/src/ui/v2/navigation.stories.tsx +++ /dev/null @@ -1,547 +0,0 @@ -/* - * 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 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 or the Server - * Side Public License, v 1. - */ - -import React, { FC, useCallback, useState } from 'react'; -import { of } from 'rxjs'; -import { ComponentMeta } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; -import type { ChromeNavLink } from '@kbn/core-chrome-browser'; - -import { - EuiButton, - EuiButtonIcon, - EuiCollapsibleNav, - EuiFlexGroup, - EuiFlexItem, - EuiLink, - EuiText, - EuiThemeProvider, - EuiTitle, -} from '@elastic/eui'; -import { css } from '@emotion/react'; -import { NavigationStorybookMock } from '../../../mocks'; -import mdx from '../../../README.mdx'; -import { NavigationProvider } from '../../services'; -import { DefaultNavigation } from './default_navigation'; -import type { ChromeNavigationViewModel, NavigationServices } from '../../../types'; -import { Navigation } from './components'; -import { ProjectNavigationDefinition } from './types'; -import { getPresets } from './nav_tree_presets'; - -const storybookMock = new NavigationStorybookMock(); - -const SIZE_OPEN = 248; -const SIZE_CLOSED = 40; - -const NavigationWrapper: FC = ({ children }) => { - const [isOpen, setIsOpen] = useState(true); - - const collabsibleNavCSS = css` - border-inline-end-width: 1, - display: flex, - flex-direction: row, - `; - - const CollapseButton = () => { - const buttonCSS = css` - margin-left: -32px; - position: fixed; - z-index: 1000; - `; - return ( - - - - ); - }; - - const toggleOpen = useCallback(() => { - setIsOpen(!isOpen); - }, [isOpen, setIsOpen]); - - return ( - - } - > - {isOpen && children} - - - ); -}; - -const baseDeeplink: ChromeNavLink = { - id: 'foo', - title: 'Title from deep link', - href: 'https://elastic.co', - url: '', - baseUrl: '', -}; - -const createDeepLink = (id: string, title: string = baseDeeplink.title) => { - return { - ...baseDeeplink, - id, - title, - }; -}; - -const deepLinks: ChromeNavLink[] = [ - createDeepLink('item1'), - createDeepLink('item2', 'Foo'), - createDeepLink('group1:item1'), - createDeepLink('group1:groupA:groupI:item1'), - createDeepLink('group1:groupA', 'Group title from deep link'), - createDeepLink('group2', 'Group title from deep link'), - createDeepLink('group2:item1'), - createDeepLink('group2:item3'), -]; - -const simpleNavigationDefinition: ProjectNavigationDefinition = { - homeRef: 'https://elastic.co', - projectNavigationTree: [ - { - id: 'example_projet', - title: 'Example project', - icon: 'logoObservability', - defaultIsCollapsed: false, - children: [ - { - id: 'root', - children: [ - { - id: 'item1', - title: 'Get started', - }, - { - id: 'item2', - title: 'Alerts', - }, - { - id: 'item3', - title: 'Dashboards', - }, - ], - }, - { - id: 'group:settings', - title: 'Settings', - children: [ - { - id: 'logs', - title: 'Logs', - }, - { - id: 'signals', - title: 'Signals', - }, - { - id: 'tracing', - title: 'Tracing', - }, - ], - }, - ], - }, - ], -}; - -export const SimpleObjectDefinition = (args: ChromeNavigationViewModel & NavigationServices) => { - const services = storybookMock.getServices({ - ...args, - navLinks$: of(deepLinks), - onProjectNavigationChange: (updated) => { - action('Update chrome navigation')(JSON.stringify(updated, null, 2)); - }, - recentlyAccessed$: of([ - { label: 'This is an example', link: '/app/example/39859', id: '39850' }, - { label: 'Another example', link: '/app/example/5235', id: '5235' }, - ]), - }); - - return ( - - - - - - ); -}; - -const navigationDefinition: ProjectNavigationDefinition = { - homeRef: 'https://elastic.co', - navigationTree: { - body: [ - { - type: 'cloudLink', - preset: 'deployments', - }, - // My custom project - { - type: 'navGroup', - id: 'example_projet', - title: 'Example project', - icon: 'logoObservability', - defaultIsCollapsed: false, - children: [ - { - id: 'root', - children: [ - { - id: 'item1', - title: 'Get started', - }, - { - id: 'item2', - title: 'Alerts', - }, - { - id: 'item3', - title: 'Some other node', - }, - ], - }, - { - id: 'group:settings', - title: 'Settings', - children: [ - { - id: 'logs', - title: 'Logs', - }, - { - id: 'signals', - title: 'Signals', - }, - { - id: 'tracing', - title: 'Tracing', - }, - ], - }, - ], - }, - // Add ml - { - type: 'navGroup', - preset: 'ml', - }, - // And specific links from analytics - { - type: 'navGroup', - ...getPresets('analytics'), - title: 'My analytics', // Change the title - children: getPresets('analytics').children.map((child) => ({ - ...child, - children: child.children?.filter((item) => { - // Hide discover and dashboard - return item.id !== 'discover' && item.id !== 'dashboard'; - }), - })), - }, - ], - footer: [ - { - type: 'recentlyAccessed', - defaultIsCollapsed: true, - // Override the default recently accessed items with our own - recentlyAccessed$: of([ - { - label: 'My own recent item', - id: '1234', - link: '/app/example/39859', - }, - { - label: 'I also own this', - id: '4567', - link: '/app/example/39859', - }, - ]), - }, - { - type: 'navGroup', - ...getPresets('devtools'), - }, - ], - }, -}; - -export const ComplexObjectDefinition = (args: ChromeNavigationViewModel & NavigationServices) => { - const services = storybookMock.getServices({ - ...args, - navLinks$: of(deepLinks), - onProjectNavigationChange: (updated) => { - action('Update chrome navigation')(JSON.stringify(updated, null, 2)); - }, - recentlyAccessed$: of([ - { label: 'This is an example', link: '/app/example/39859', id: '39850' }, - { label: 'Another example', link: '/app/example/5235', id: '5235' }, - ]), - }); - - return ( - - - - - - ); -}; - -export const WithUIComponents = (args: ChromeNavigationViewModel & NavigationServices) => { - const services = storybookMock.getServices({ - ...args, - navLinks$: of(deepLinks), - onProjectNavigationChange: (updated) => { - action('Update chrome navigation')(JSON.stringify(updated, null, 2)); - }, - recentlyAccessed$: of([ - { label: 'This is an example', link: '/app/example/39859', id: '39850' }, - { label: 'Another example', link: '/app/example/5235', id: '5235' }, - ]), - }); - - return ( - - - - - - - - - - - - {(navNode) => { - return ( - {`Render prop: ${navNode.id} - ${navNode.title}`} - ); - }} - - - - Title in ReactNode - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export const MinimalUIAndCustomCloudLink = ( - args: ChromeNavigationViewModel & NavigationServices -) => { - const services = storybookMock.getServices({ - ...args, - navLinks$: of(deepLinks), - onProjectNavigationChange: (updated) => { - action('Update chrome navigation')(JSON.stringify(updated, null, 2)); - }, - recentlyAccessed$: of([ - { label: 'This is an example', link: '/app/example/39859', id: '39850' }, - { label: 'Another example', link: '/app/example/5235', id: '5235' }, - ]), - }); - - return ( - - - - - - - - - - - - - - Some children node - - - - - - - - - - - - - - - - - - ); -}; - -export default { - title: 'Chrome/Navigation/v2', - description: 'Navigation container to render items for cross-app linking', - parameters: { - docs: { - page: mdx, - }, - }, - component: WithUIComponents, -} as ComponentMeta; - -export const CreativeUI = (args: ChromeNavigationViewModel & NavigationServices) => { - const services = storybookMock.getServices({ - ...args, - navLinks$: of(deepLinks), - onProjectNavigationChange: (updated) => { - action('Update chrome navigation')(JSON.stringify(updated, null, 2)); - }, - recentlyAccessed$: of([ - { label: 'This is an example', link: '/app/example/39859', id: '39850' }, - { label: 'Another example', link: '/app/example/5235', id: '5235' }, - ]), - }); - - return ( - - - - - - - - -

    Hello!

    -     - - - - -

    - As you can see there is really no limit in what UI you can create! -
    -

    -

    - Have fun! -

    -     - - -     -     -     - - -     -     -     - ); -}; From 71d43427298cb0a6bd921a55fdc647544fb2dc1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Loix?= Date: Tue, 30 May 2023 16:17:27 +0100 Subject: [PATCH 14/18] Update serverless search --- .../serverless_search/public/layout/nav.tsx | 282 +++++++++--------- 1 file changed, 144 insertions(+), 138 deletions(-) diff --git a/x-pack/plugins/serverless_search/public/layout/nav.tsx b/x-pack/plugins/serverless_search/public/layout/nav.tsx index fb032eb19cbdb..cf01f2400b370 100644 --- a/x-pack/plugins/serverless_search/public/layout/nav.tsx +++ b/x-pack/plugins/serverless_search/public/layout/nav.tsx @@ -7,157 +7,163 @@ import { CoreStart } from '@kbn/core/public'; import { - ChromeNavigationNodeViewModel, - Navigation, + DefaultNavigation, NavigationKibanaProvider, + NavigationTreeDefinition, } from '@kbn/shared-ux-chrome-navigation'; import React from 'react'; import { i18n } from '@kbn/i18n'; import { ServerlessPluginStart } from '@kbn/serverless/public'; -const NAVIGATION_PLATFORM_CONFIG = { - analytics: { enabled: false }, - ml: { enabled: false }, - devTools: { enabled: false }, - management: { enabled: false }, +const navigationTree: NavigationTreeDefinition = { + body: [ + { + type: 'cloudLink', + preset: 'projects', + }, + { + type: 'navGroup', + id: 'search_project_nav', + title: 'Elasticsearch', + icon: 'logoElasticsearch', + children: [ + { + id: 'root', + children: [ + { + id: 'search_getting_started', + title: i18n.translate('xpack.serverlessSearch.nav.gettingStarted', { + defaultMessage: 'Getting started', + }), + href: '/app/elasticsearch', + }, + { + id: 'dev_tools', + title: i18n.translate('xpack.serverlessSearch.nav.devTools', { + defaultMessage: 'Dev Tools', + }), + children: [ + { + id: 'dev_tools_console', + title: i18n.translate('xpack.serverlessSearch.nav.devTools.console', { + defaultMessage: 'Console', + }), + href: '/app/dev_tools#/console', + }, + { + id: 'dev_tools_profiler', + title: i18n.translate('xpack.serverlessSearch.nav.devTools.searchProfiler', { + defaultMessage: 'Search Profiler', + }), + href: '/app/dev_tools#/searchprofiler', + }, + { + id: 'dev_tools_grok_debugger', + title: i18n.translate('xpack.serverlessSearch.nav.devTools.grokDebugger', { + defaultMessage: 'Grok debugger', + }), + href: '/app/dev_tools#/grokdebugger', + }, + { + id: 'dev_tools_painless_lab', + title: i18n.translate('xpack.serverlessSearch.nav.devTools.painlessLab', { + defaultMessage: 'Painless Lab', + }), + href: '/app/dev_tools#/painless_lab', + }, + ], + }, + { + id: 'explore', + title: i18n.translate('xpack.serverlessSearch.nav.explore', { + defaultMessage: 'Explore', + }), + children: [ + { + id: 'explore_discover', + title: i18n.translate('xpack.serverlessSearch.nav.explore.discover', { + defaultMessage: 'Discover', + }), + href: '/app/discover', + }, + { + id: 'explore_dashboard', + title: i18n.translate('xpack.serverlessSearch.nav.explore.dashboard', { + defaultMessage: 'Dashboard', + }), + href: '/app/dashboards', + }, + { + id: 'explore_visualize_library', + title: i18n.translate('xpack.serverlessSearch.nav.explore.visualizeLibrary', { + defaultMessage: 'Visualize Library', + }), + href: '/app/visualize', + }, + ], + }, + { + id: 'content', + title: i18n.translate('xpack.serverlessSearch.nav.content', { + defaultMessage: 'Content', + }), + children: [ + { + id: 'content_indices', + title: i18n.translate('xpack.serverlessSearch.nav.content.indices', { + defaultMessage: 'Indices', + }), + // TODO: this will be updated to a new Indices page + href: '/app/management/data/index_management/indices', + }, + { + id: 'content_transforms', + title: i18n.translate('xpack.serverlessSearch.nav.content.transforms', { + defaultMessage: 'Transforms', + }), + // TODO: this will be updated to a new Transforms page + href: '/app/management/ingest/ingest_pipelines', + }, + { + id: 'content_indexing_api', + title: i18n.translate('xpack.serverlessSearch.nav.content.indexingApi', { + defaultMessage: 'Indexing API', + }), + // TODO: this page does not exist yet, linking to getting started for now + href: '/app/elasticsearch', + }, + ], + }, + { + id: 'security', + title: i18n.translate('xpack.serverlessSearch.nav.security', { + defaultMessage: 'Security', + }), + children: [ + { + id: 'security_api_keys', + title: i18n.translate('xpack.serverlessSearch.nav.security.apiKeys', { + defaultMessage: 'API Keys', + }), + href: '/app/management/security/api_keys', + }, + ], + }, + ], + }, + ], + }, + ], }; -const navItems: ChromeNavigationNodeViewModel[] = [ - { - id: 'search_getting_started', - title: i18n.translate('xpack.serverlessSearch.nav.gettingStarted', { - defaultMessage: 'Getting started', - }), - href: '/app/elasticsearch', - }, - { - id: 'dev_tools', - title: i18n.translate('xpack.serverlessSearch.nav.devTools', { defaultMessage: 'Dev Tools' }), - items: [ - { - id: 'dev_tools_console', - title: i18n.translate('xpack.serverlessSearch.nav.devTools.console', { - defaultMessage: 'Console', - }), - href: '/app/dev_tools#/console', - }, - { - id: 'dev_tools_profiler', - title: i18n.translate('xpack.serverlessSearch.nav.devTools.searchProfiler', { - defaultMessage: 'Search Profiler', - }), - href: '/app/dev_tools#/searchprofiler', - }, - { - id: 'dev_tools_grok_debugger', - title: i18n.translate('xpack.serverlessSearch.nav.devTools.grokDebugger', { - defaultMessage: 'Grok debugger', - }), - href: '/app/dev_tools#/grokdebugger', - }, - { - id: 'dev_tools_painless_lab', - title: i18n.translate('xpack.serverlessSearch.nav.devTools.painlessLab', { - defaultMessage: 'Painless Lab', - }), - href: '/app/dev_tools#/painless_lab', - }, - ], - }, - { - id: 'explore', - title: i18n.translate('xpack.serverlessSearch.nav.explore', { defaultMessage: 'Explore' }), - items: [ - { - id: 'explore_discover', - title: i18n.translate('xpack.serverlessSearch.nav.explore.discover', { - defaultMessage: 'Discover', - }), - href: '/app/discover', - }, - { - id: 'explore_dashboard', - title: i18n.translate('xpack.serverlessSearch.nav.explore.dashboard', { - defaultMessage: 'Dashboard', - }), - href: '/app/dashboards', - }, - { - id: 'explore_visualize_library', - title: i18n.translate('xpack.serverlessSearch.nav.explore.visualizeLibrary', { - defaultMessage: 'Visualize Library', - }), - href: '/app/visualize', - }, - ], - }, - { - id: 'content', - title: i18n.translate('xpack.serverlessSearch.nav.content', { defaultMessage: 'Content' }), - items: [ - { - id: 'content_indices', - title: i18n.translate('xpack.serverlessSearch.nav.content.indices', { - defaultMessage: 'Indices', - }), - // TODO: this will be updated to a new Indices page - href: '/app/management/data/index_management/indices', - }, - { - id: 'content_transforms', - title: i18n.translate('xpack.serverlessSearch.nav.content.transforms', { - defaultMessage: 'Transforms', - }), - // TODO: this will be updated to a new Transforms page - href: '/app/management/ingest/ingest_pipelines', - }, - { - id: 'content_indexing_api', - title: i18n.translate('xpack.serverlessSearch.nav.content.indexingApi', { - defaultMessage: 'Indexing API', - }), - // TODO: this page does not exist yet, linking to getting started for now - href: '/app/elasticsearch', - }, - ], - }, - { - id: 'security', - title: i18n.translate('xpack.serverlessSearch.nav.security', { defaultMessage: 'Security' }), - items: [ - { - id: 'security_api_keys', - title: i18n.translate('xpack.serverlessSearch.nav.security.apiKeys', { - defaultMessage: 'API Keys', - }), - href: '/app/management/security/api_keys', - }, - ], - }, -]; - export const createServerlessSearchSideNavComponent = (core: CoreStart, { serverless }: { serverless: ServerlessPluginStart }) => () => { - // Currently, this allows the "Search" section of the side nav to render as pre-expanded. - // This will soon be powered from state received from core.chrome - const activeNavItemId = 'search_project_nav.search_getting_started'; - return ( - From 06371502a4cb385b5db53a6e29fde61140382189 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Loix?= Date: Wed, 31 May 2023 13:04:53 +0100 Subject: [PATCH 15/18] Fix import paths --- .../navigation/src/ui/components/navigation_header.tsx | 2 +- .../chrome/navigation/src/ui/default_navigation.test.tsx | 4 ++-- .../chrome/navigation/src/ui/hooks/use_init_navnode.ts | 2 +- .../chrome/navigation/src/ui/navigation.stories.tsx | 8 ++++---- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/navigation_header.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_header.tsx index e7db1d25aaddb..7895ca62e7a4b 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/components/navigation_header.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_header.tsx @@ -13,7 +13,7 @@ import { useNavigation as useServices } from '../../services'; import { ElasticMark } from '../elastic_mark'; import { getI18nStrings } from '../i18n_strings'; -import '../../header_logo.scss'; +import '../header_logo.scss'; interface Props { homeHref: string; diff --git a/packages/shared-ux/chrome/navigation/src/ui/default_navigation.test.tsx b/packages/shared-ux/chrome/navigation/src/ui/default_navigation.test.tsx index 0856fb4d2ced4..3820dcd5dd5c9 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/default_navigation.test.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/default_navigation.test.tsx @@ -11,8 +11,8 @@ import { render } from '@testing-library/react'; import { type Observable, of } from 'rxjs'; import type { ChromeNavLink } from '@kbn/core-chrome-browser'; -import { getServicesMock } from '../../../mocks/src/jest'; -import { NavigationProvider } from '../../services'; +import { getServicesMock } from '../../mocks/src/jest'; +import { NavigationProvider } from '../services'; import { DefaultNavigation } from './default_navigation'; import type { ProjectNavigationTreeDefinition, RootNavigationItemDefinition } from './types'; import { diff --git a/packages/shared-ux/chrome/navigation/src/ui/hooks/use_init_navnode.ts b/packages/shared-ux/chrome/navigation/src/ui/hooks/use_init_navnode.ts index 2d3e332b7b890..1ee9972f58a12 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/hooks/use_init_navnode.ts +++ b/packages/shared-ux/chrome/navigation/src/ui/hooks/use_init_navnode.ts @@ -10,7 +10,7 @@ import { ChromeNavLink, ChromeProjectNavigationNode } from '@kbn/core-chrome-bro import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import useObservable from 'react-use/lib/useObservable'; -import { useNavigation as useNavigationServices } from '../../../services'; +import { useNavigation as useNavigationServices } from '../../services'; import { ChromeProjectNavigationNodeEnhanced, NodeProps, diff --git a/packages/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx b/packages/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx index 987d6d3dda8f9..cc6bd2978a9c5 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx @@ -24,11 +24,11 @@ import { EuiTitle, } from '@elastic/eui'; import { css } from '@emotion/react'; -import { NavigationStorybookMock } from '../../../mocks'; -import mdx from '../../../README.mdx'; -import { NavigationProvider } from '../../services'; +import { NavigationStorybookMock } from '../../mocks'; +import mdx from '../../README.mdx'; +import { NavigationProvider } from '../services'; import { DefaultNavigation } from './default_navigation'; -import type { ChromeNavigationViewModel, NavigationServices } from '../../../types'; +import type { ChromeNavigationViewModel, NavigationServices } from '../../types'; import { Navigation } from './components'; import { ProjectNavigationDefinition } from './types'; import { getPresets } from './nav_tree_presets'; From 376d17c6a36399c1339e54e7f7b0f8d7b1868d94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Loix?= Date: Wed, 31 May 2023 13:06:10 +0100 Subject: [PATCH 16/18] Export getPresets handler --- packages/shared-ux/chrome/navigation/index.ts | 2 +- .../navigation/src/ui/components/navigation_bucket.tsx | 9 ++------- packages/shared-ux/chrome/navigation/src/ui/index.ts | 2 ++ .../chrome/navigation/src/ui/nav_tree_presets/index.ts | 5 ----- 4 files changed, 5 insertions(+), 13 deletions(-) diff --git a/packages/shared-ux/chrome/navigation/index.ts b/packages/shared-ux/chrome/navigation/index.ts index 1d500b72117ec..213147a99a093 100644 --- a/packages/shared-ux/chrome/navigation/index.ts +++ b/packages/shared-ux/chrome/navigation/index.ts @@ -8,7 +8,7 @@ export { NavigationKibanaProvider, NavigationProvider } from './src/services'; -export { DefaultNavigation, Navigation } from './src/ui'; +export { DefaultNavigation, Navigation, getPresets } from './src/ui'; export type { NavigationTreeDefinition, diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/navigation_bucket.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_bucket.tsx index ac5f9691f6f03..3d287e918d5c8 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/components/navigation_bucket.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_bucket.tsx @@ -8,16 +8,11 @@ import React, { FC, useCallback } from 'react'; -import { analytics, devtools, ml, management } from '../nav_tree_presets'; +import { getPresets } from '../nav_tree_presets'; import { Navigation } from './navigation'; import type { NavigationGroupPreset, NodeDefinition } from '../types'; -const navTreePresets: { [preset in NavigationGroupPreset]: NodeDefinition } = { - analytics, - ml, - devtools, - management, -}; +const navTreePresets = getPresets('all'); export interface Props { preset?: NavigationGroupPreset; diff --git a/packages/shared-ux/chrome/navigation/src/ui/index.ts b/packages/shared-ux/chrome/navigation/src/ui/index.ts index 34089f5ad633b..9091a261b1dd8 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/index.ts +++ b/packages/shared-ux/chrome/navigation/src/ui/index.ts @@ -10,6 +10,8 @@ export { Navigation } from './components'; export { DefaultNavigation } from './default_navigation'; +export { getPresets } from './nav_tree_presets'; + export type { NavigationTreeDefinition, ProjectNavigationDefinition, diff --git a/packages/shared-ux/chrome/navigation/src/ui/nav_tree_presets/index.ts b/packages/shared-ux/chrome/navigation/src/ui/nav_tree_presets/index.ts index 1cdbdaaa551ea..0aefcf3f92aa7 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/nav_tree_presets/index.ts +++ b/packages/shared-ux/chrome/navigation/src/ui/nav_tree_presets/index.ts @@ -13,11 +13,6 @@ import { devtools, type ID as DevtoolsID } from './devtools'; import { management, type ID as ManagementID } from './management'; import { ml, type ID as MlID } from './ml'; -export { analytics } from './analytics'; -export { devtools } from './devtools'; -export { ml } from './ml'; -export { management } from './management'; - export type NodeDefinitionWithChildren = NodeDefinition & { children: Required>['children']; }; From 4a91888c73fbb94b6cba307549003292d7c0ed32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Loix?= Date: Wed, 31 May 2023 13:06:34 +0100 Subject: [PATCH 17/18] Use devtools preset in serverless search nav --- .../serverless_search/public/layout/nav.tsx | 180 ++++++++---------- 1 file changed, 75 insertions(+), 105 deletions(-) diff --git a/x-pack/plugins/serverless_search/public/layout/nav.tsx b/x-pack/plugins/serverless_search/public/layout/nav.tsx index cf01f2400b370..a0a6083ccce21 100644 --- a/x-pack/plugins/serverless_search/public/layout/nav.tsx +++ b/x-pack/plugins/serverless_search/public/layout/nav.tsx @@ -10,11 +10,14 @@ import { DefaultNavigation, NavigationKibanaProvider, NavigationTreeDefinition, + getPresets, } from '@kbn/shared-ux-chrome-navigation'; import React from 'react'; import { i18n } from '@kbn/i18n'; import { ServerlessPluginStart } from '@kbn/serverless/public'; +const devTools = getPresets('devtools'); + const navigationTree: NavigationTreeDefinition = { body: [ { @@ -26,128 +29,95 @@ const navigationTree: NavigationTreeDefinition = { id: 'search_project_nav', title: 'Elasticsearch', icon: 'logoElasticsearch', + defaultIsCollapsed: false, children: [ { - id: 'root', + id: 'search_getting_started', + title: i18n.translate('xpack.serverlessSearch.nav.gettingStarted', { + defaultMessage: 'Getting started', + }), + href: '/app/elasticsearch', + }, + { + id: 'dev_tools', + title: i18n.translate('xpack.serverlessSearch.nav.devTools', { + defaultMessage: 'Dev Tools', + }), + children: devTools.children[0].children, + }, + { + id: 'explore', + title: i18n.translate('xpack.serverlessSearch.nav.explore', { + defaultMessage: 'Explore', + }), children: [ { - id: 'search_getting_started', - title: i18n.translate('xpack.serverlessSearch.nav.gettingStarted', { - defaultMessage: 'Getting started', + id: 'explore_discover', + title: i18n.translate('xpack.serverlessSearch.nav.explore.discover', { + defaultMessage: 'Discover', }), - href: '/app/elasticsearch', + href: '/app/discover', }, { - id: 'dev_tools', - title: i18n.translate('xpack.serverlessSearch.nav.devTools', { - defaultMessage: 'Dev Tools', + id: 'explore_dashboard', + title: i18n.translate('xpack.serverlessSearch.nav.explore.dashboard', { + defaultMessage: 'Dashboard', }), - children: [ - { - id: 'dev_tools_console', - title: i18n.translate('xpack.serverlessSearch.nav.devTools.console', { - defaultMessage: 'Console', - }), - href: '/app/dev_tools#/console', - }, - { - id: 'dev_tools_profiler', - title: i18n.translate('xpack.serverlessSearch.nav.devTools.searchProfiler', { - defaultMessage: 'Search Profiler', - }), - href: '/app/dev_tools#/searchprofiler', - }, - { - id: 'dev_tools_grok_debugger', - title: i18n.translate('xpack.serverlessSearch.nav.devTools.grokDebugger', { - defaultMessage: 'Grok debugger', - }), - href: '/app/dev_tools#/grokdebugger', - }, - { - id: 'dev_tools_painless_lab', - title: i18n.translate('xpack.serverlessSearch.nav.devTools.painlessLab', { - defaultMessage: 'Painless Lab', - }), - href: '/app/dev_tools#/painless_lab', - }, - ], + href: '/app/dashboards', }, { - id: 'explore', - title: i18n.translate('xpack.serverlessSearch.nav.explore', { - defaultMessage: 'Explore', + id: 'explore_visualize_library', + title: i18n.translate('xpack.serverlessSearch.nav.explore.visualizeLibrary', { + defaultMessage: 'Visualize Library', }), - children: [ - { - id: 'explore_discover', - title: i18n.translate('xpack.serverlessSearch.nav.explore.discover', { - defaultMessage: 'Discover', - }), - href: '/app/discover', - }, - { - id: 'explore_dashboard', - title: i18n.translate('xpack.serverlessSearch.nav.explore.dashboard', { - defaultMessage: 'Dashboard', - }), - href: '/app/dashboards', - }, - { - id: 'explore_visualize_library', - title: i18n.translate('xpack.serverlessSearch.nav.explore.visualizeLibrary', { - defaultMessage: 'Visualize Library', - }), - href: '/app/visualize', - }, - ], + href: '/app/visualize', }, + ], + }, + { + id: 'content', + title: i18n.translate('xpack.serverlessSearch.nav.content', { + defaultMessage: 'Content', + }), + children: [ { - id: 'content', - title: i18n.translate('xpack.serverlessSearch.nav.content', { - defaultMessage: 'Content', + id: 'content_indices', + title: i18n.translate('xpack.serverlessSearch.nav.content.indices', { + defaultMessage: 'Indices', }), - children: [ - { - id: 'content_indices', - title: i18n.translate('xpack.serverlessSearch.nav.content.indices', { - defaultMessage: 'Indices', - }), - // TODO: this will be updated to a new Indices page - href: '/app/management/data/index_management/indices', - }, - { - id: 'content_transforms', - title: i18n.translate('xpack.serverlessSearch.nav.content.transforms', { - defaultMessage: 'Transforms', - }), - // TODO: this will be updated to a new Transforms page - href: '/app/management/ingest/ingest_pipelines', - }, - { - id: 'content_indexing_api', - title: i18n.translate('xpack.serverlessSearch.nav.content.indexingApi', { - defaultMessage: 'Indexing API', - }), - // TODO: this page does not exist yet, linking to getting started for now - href: '/app/elasticsearch', - }, - ], + // TODO: this will be updated to a new Indices page + href: '/app/management/data/index_management/indices', }, { - id: 'security', - title: i18n.translate('xpack.serverlessSearch.nav.security', { - defaultMessage: 'Security', + id: 'content_transforms', + title: i18n.translate('xpack.serverlessSearch.nav.content.transforms', { + defaultMessage: 'Transforms', + }), + // TODO: this will be updated to a new Transforms page + href: '/app/management/ingest/ingest_pipelines', + }, + { + id: 'content_indexing_api', + title: i18n.translate('xpack.serverlessSearch.nav.content.indexingApi', { + defaultMessage: 'Indexing API', + }), + // TODO: this page does not exist yet, linking to getting started for now + href: '/app/elasticsearch', + }, + ], + }, + { + id: 'security', + title: i18n.translate('xpack.serverlessSearch.nav.security', { + defaultMessage: 'Security', + }), + children: [ + { + id: 'security_api_keys', + title: i18n.translate('xpack.serverlessSearch.nav.security.apiKeys', { + defaultMessage: 'API Keys', }), - children: [ - { - id: 'security_api_keys', - title: i18n.translate('xpack.serverlessSearch.nav.security.apiKeys', { - defaultMessage: 'API Keys', - }), - href: '/app/management/security/api_keys', - }, - ], + href: '/app/management/security/api_keys', }, ], }, From 558622c4178f09f8b2087e4f63c3e3b98503d17a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Loix?= Date: Wed, 31 May 2023 13:39:54 +0100 Subject: [PATCH 18/18] Update observability side nav --- .../components/side_navigation/index.tsx | 206 ++++++++++-------- 1 file changed, 112 insertions(+), 94 deletions(-) diff --git a/x-pack/plugins/serverless_observability/public/components/side_navigation/index.tsx b/x-pack/plugins/serverless_observability/public/components/side_navigation/index.tsx index f4393eee4417e..e318e5301f262 100644 --- a/x-pack/plugins/serverless_observability/public/components/side_navigation/index.tsx +++ b/x-pack/plugins/serverless_observability/public/components/side_navigation/index.tsx @@ -8,110 +8,128 @@ import { CoreStart } from '@kbn/core/public'; import { ServerlessPluginStart } from '@kbn/serverless/public'; import { - ChromeNavigationNodeViewModel, - Navigation, + DefaultNavigation, NavigationKibanaProvider, + NavigationTreeDefinition, + getPresets, } from '@kbn/shared-ux-chrome-navigation'; import React from 'react'; -// #TODO translate titles? -const navItems: ChromeNavigationNodeViewModel[] = [ - { - id: 'services-infra', - items: [ - { id: 'services', title: 'Services', href: '/app/apm/services' }, - { - id: 'infra', - title: 'Infrastructure', - href: '/app/metrics/inventory', - }, - ], - }, - { - id: 'alerts-cases-slos', - items: [ - { - id: 'alerts', - title: 'Alerts', - href: '/app/observability/alerts', - }, - { - id: 'Cases', - title: 'Cases', - href: '/app/observability/cases', - }, - { - id: 'slos', - title: 'SLOs', - href: '/app/observability/slos', - }, - ], - }, - { - id: 'signals', - title: 'Signals', - items: [ - { - id: 'traces', - title: 'Traces', - href: '/app/apm/traces', - }, - { - id: 'logs', - title: 'Logs', - href: '/app/logs/stream', - }, - ], - }, - { - id: 'toolbox', - title: 'Toolbox', - items: [ - { - id: 'visualization', - title: 'Visualization', - href: '/app/visualize', - }, - { - id: 'dashboards', - title: 'Dashboards', - href: '/app/dashboards', - }, - ], - }, - { - id: 'on-boarding', - items: [ - { - id: 'get-started', - title: 'Get started', - icon: 'launch', - href: '/app/observabilityOnboarding', - }, - ], - }, -]; +const navigationTree: NavigationTreeDefinition = { + body: [ + { + type: 'cloudLink', + preset: 'projects', + }, + { + type: 'navGroup', + id: 'observability_project_nav', + title: 'Observability', + icon: 'logoObservability', + defaultIsCollapsed: false, + children: [ + { + id: 'services-infra', + children: [ + { id: 'services', title: 'Services', href: '/app/apm/services' }, + { + id: 'infra', + title: 'Infrastructure', + href: '/app/metrics/inventory', + }, + ], + }, + { + id: 'alerts-cases-slos', + children: [ + { + id: 'alerts', + title: 'Alerts', + href: '/app/observability/alerts', + }, + { + id: 'Cases', + title: 'Cases', + href: '/app/observability/cases', + }, + { + id: 'slos', + title: 'SLOs', + href: '/app/observability/slos', + }, + ], + }, + { + id: 'signals', + title: 'Signals', + children: [ + { + id: 'traces', + title: 'Traces', + href: '/app/apm/traces', + }, + { + id: 'logs', + title: 'Logs', + href: '/app/logs/stream', + }, + ], + }, + { + id: 'toolbox', + title: 'Toolbox', + children: [ + { + id: 'visualization', + title: 'Visualization', + href: '/app/visualize', + }, + { + id: 'dashboards', + title: 'Dashboards', + href: '/app/dashboards', + }, + ], + }, + { + id: 'on-boarding', + children: [ + { + id: 'get-started', + title: 'Get started', + icon: 'launch', + href: '/app/observabilityOnboarding', + }, + ], + }, + ], + }, + { + type: 'navGroup', + ...getPresets('analytics'), + }, + { + type: 'navGroup', + ...getPresets('ml'), + }, + ], + footer: [ + { + type: 'navGroup', + ...getPresets('management'), + }, + ], +}; export const getObservabilitySideNavComponent = (core: CoreStart, { serverless }: { serverless: ServerlessPluginStart }) => () => { - const activeNavItemId = 'observability_project_nav.root'; - return ( - );