From 7907b6ad45ad2235dd8bbd0dff3aaf05bf76ea2a Mon Sep 17 00:00:00 2001 From: Kyle Pollich Date: Wed, 7 Jul 2021 13:57:51 -0400 Subject: [PATCH] [Fleet + Integrations UI] Integrations UI Cleanup (#104641) * Remove Beta wording from Fleet messaging in ingestion tutorials * Rename fleet feature registration to include integrations * Pluralize + sentence case assets and expand dashboards by default * Update global search from packages -> integrations * Expand auth settings by default in package policy add agent flyout * Update wording for various fleet modules * Fix i18n * Fix unit test * Fix failing tests --- .../integrations/sections/epm/constants.tsx | 26 +++++++++---------- .../detail/assets/assets_accordion.tsx | 6 +++++ ...advanced_agent_authentication_settings.tsx | 6 ++++- .../agent_enrollment_flyout/steps.tsx | 5 ++-- .../tutorial_directory_header_link.tsx | 4 +-- .../tutorial_directory_notice.tsx | 20 ++++++++------ .../tutorial_module_notice.tsx | 8 +++--- x-pack/plugins/fleet/public/plugin.ts | 8 +++--- .../fleet/public/search_provider.test.ts | 20 +++++++------- .../plugins/fleet/public/search_provider.ts | 4 +-- x-pack/plugins/fleet/server/plugin.ts | 2 +- .../translations/translations/ja-JP.json | 14 +++++----- .../translations/translations/zh-CN.json | 14 +++++----- 13 files changed, 76 insertions(+), 61 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/constants.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/constants.tsx index f8e4c9994e57..8e900e625215 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/constants.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/constants.tsx @@ -22,20 +22,20 @@ export const DisplayedAssets: ServiceNameToAssetTypes = { export type DisplayedAssetType = ElasticsearchAssetType | KibanaAssetType | 'view'; export const AssetTitleMap: Record = { - dashboard: 'Dashboard', - ilm_policy: 'ILM Policy', - ingest_pipeline: 'Ingest Pipeline', - transform: 'Transform', - index_pattern: 'Index Pattern', - index_template: 'Index Template', - component_template: 'Component Template', - search: 'Saved Search', - visualization: 'Visualization', - map: 'Map', - data_stream_ilm_policy: 'Data Stream ILM Policy', + dashboard: 'Dashboards', + ilm_policy: 'ILM policies', + ingest_pipeline: 'Ingest pipelines', + transform: 'Transforms', + index_pattern: 'Index patterns', + index_template: 'Index templates', + component_template: 'Component templates', + search: 'Saved searches', + visualization: 'Visualizations', + map: 'Maps', + data_stream_ilm_policy: 'Data stream ILM policies', lens: 'Lens', - security_rule: 'Security Rule', - ml_module: 'ML Module', + security_rule: 'Security rules', + ml_module: 'ML modules', view: 'Views', }; diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets_accordion.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets_accordion.tsx index 91c6b68c6622..4a2d64fb8401 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets_accordion.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets_accordion.tsx @@ -24,6 +24,8 @@ import { AssetTitleMap } from '../../../constants'; import { getHrefToObjectInKibanaApp, useStartServices } from '../../../../../hooks'; +import { KibanaAssetType } from '../../../../../types'; + import type { AllowedAssetType, AssetSavedObject } from './types'; interface Props { @@ -33,8 +35,12 @@ interface Props { export const AssetsAccordion: FunctionComponent = ({ savedObjects, type }) => { const { http } = useStartServices(); + + const isDashboard = type === KibanaAssetType.dashboard; + return ( diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/advanced_agent_authentication_settings.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/advanced_agent_authentication_settings.tsx index 96fab27a5505..adc6ba44dbb1 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/advanced_agent_authentication_settings.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/advanced_agent_authentication_settings.tsx @@ -22,12 +22,14 @@ import { interface Props { agentPolicyId?: string; selectedApiKeyId?: string; + initialAuthenticationSettingsOpen?: boolean; onKeyChange: (key?: string) => void; } export const AdvancedAgentAuthenticationSettings: FunctionComponent = ({ agentPolicyId, selectedApiKeyId, + initialAuthenticationSettingsOpen = false, onKeyChange, }) => { const { notifications } = useStartServices(); @@ -35,7 +37,9 @@ export const AdvancedAgentAuthenticationSettings: FunctionComponent = ({ [] ); const [isLoadingEnrollmentKey, setIsLoadingEnrollmentKey] = useState(false); - const [isAuthenticationSettingsOpen, setIsAuthenticationSettingsOpen] = useState(false); + const [isAuthenticationSettingsOpen, setIsAuthenticationSettingsOpen] = useState( + initialAuthenticationSettingsOpen + ); const onCreateEnrollmentTokenClick = async () => { setIsLoadingEnrollmentKey(true); diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps.tsx index 329e0c144687..6cffa39628d9 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps.tsx @@ -137,14 +137,14 @@ export const AgentEnrollmentKeySelectionStep = ({ }) => { return { title: i18n.translate('xpack.fleet.agentEnrollment.stepConfigurePolicyAuthenticationTitle', { - defaultMessage: 'Configure agent authentication', + defaultMessage: 'Select enrollment token', }), children: ( <> {agentPolicy.name}, }} @@ -154,6 +154,7 @@ export const AgentEnrollmentKeySelectionStep = ({ diff --git a/x-pack/plugins/fleet/public/components/home_integration/tutorial_directory_header_link.tsx b/x-pack/plugins/fleet/public/components/home_integration/tutorial_directory_header_link.tsx index 819fa03e2b6d..074a1c40bdb1 100644 --- a/x-pack/plugins/fleet/public/components/home_integration/tutorial_directory_header_link.tsx +++ b/x-pack/plugins/fleet/public/components/home_integration/tutorial_directory_header_link.tsx @@ -33,10 +33,10 @@ const TutorialDirectoryHeaderLink: TutorialDirectoryHeaderLinkComponent = memo(( return hasIngestManager && noticeState.settingsDataLoaded && noticeState.hasSeenNotice ? ( - + diff --git a/x-pack/plugins/fleet/public/components/home_integration/tutorial_directory_notice.tsx b/x-pack/plugins/fleet/public/components/home_integration/tutorial_directory_notice.tsx index 23754571c5bc..e784ff1ac6ad 100644 --- a/x-pack/plugins/fleet/public/components/home_integration/tutorial_directory_notice.tsx +++ b/x-pack/plugins/fleet/public/components/home_integration/tutorial_directory_notice.tsx @@ -71,13 +71,13 @@ const TutorialDirectoryNotice: TutorialDirectoryNoticeComponent = memo(() => { title={ ), @@ -88,12 +88,16 @@ const TutorialDirectoryNotice: TutorialDirectoryNoticeComponent = memo(() => {

+ {

- + diff --git a/x-pack/plugins/fleet/public/components/home_integration/tutorial_module_notice.tsx b/x-pack/plugins/fleet/public/components/home_integration/tutorial_module_notice.tsx index f5b76de46e3a..6b9b441551a5 100644 --- a/x-pack/plugins/fleet/public/components/home_integration/tutorial_module_notice.tsx +++ b/x-pack/plugins/fleet/public/components/home_integration/tutorial_module_notice.tsx @@ -31,8 +31,8 @@ const TutorialModuleNotice: TutorialModuleNoticeComponent = memo(({ moduleName }

@@ -50,13 +50,13 @@ const TutorialModuleNotice: TutorialModuleNoticeComponent = memo(({ moduleName } > ), blogPostLink: ( diff --git a/x-pack/plugins/fleet/public/plugin.ts b/x-pack/plugins/fleet/public/plugin.ts index 9b3aefa488f7..f4a347c2ab3f 100644 --- a/x-pack/plugins/fleet/public/plugin.ts +++ b/x-pack/plugins/fleet/public/plugin.ts @@ -32,7 +32,7 @@ import type { CheckPermissionsResponse, PostIngestSetupResponse } from '../commo import type { FleetConfigType } from '../common/types'; -import { CUSTOM_LOGS_INTEGRATION_NAME, FLEET_BASE_PATH } from './constants'; +import { CUSTOM_LOGS_INTEGRATION_NAME, INTEGRATIONS_BASE_PATH } from './constants'; import { licenseService } from './hooks'; import { setHttpClient } from './hooks/use_request'; import { createPackageSearchProvider } from './search_provider'; @@ -183,14 +183,14 @@ export class FleetPlugin implements Plugin { id: 'test-test', score: 80, title: 'test', - type: 'package', + type: 'integration', url: { path: 'undefined#/detail/test-test/overview', prependBasePath: false, @@ -100,7 +100,7 @@ describe('Package search provider', () => { id: 'test1-test1', score: 80, title: 'test1', - type: 'package', + type: 'integration', url: { path: 'undefined#/detail/test1-test1/overview', prependBasePath: false, @@ -173,7 +173,7 @@ describe('Package search provider', () => { id: 'test-test', score: 80, title: 'test', - type: 'package', + type: 'integration', url: { path: 'undefined#/detail/test-test/overview', prependBasePath: false, @@ -209,7 +209,7 @@ describe('Package search provider', () => { expect(sendGetPackages).toHaveBeenCalledTimes(0); }); - test('with packages tag, with no search term', () => { + test('with integration tag, with no search term', () => { getTestScheduler().run(({ hot, expectObservable }) => { mockSendGetPackages.mockReturnValue( hot('--(a|)', { a: { data: { response: testResponse } } }) @@ -220,7 +220,7 @@ describe('Package search provider', () => { const packageSearchProvider = createPackageSearchProvider(setupMock); expectObservable( packageSearchProvider.find( - { types: ['package'] }, + { types: ['integration'] }, { aborted$: NEVER, maxResults: 100, preference: '' } ) ).toBe('--(a|)', { @@ -229,7 +229,7 @@ describe('Package search provider', () => { id: 'test-test', score: 80, title: 'test', - type: 'package', + type: 'integration', url: { path: 'undefined#/detail/test-test/overview', prependBasePath: false, @@ -239,7 +239,7 @@ describe('Package search provider', () => { id: 'test1-test1', score: 80, title: 'test1', - type: 'package', + type: 'integration', url: { path: 'undefined#/detail/test1-test1/overview', prependBasePath: false, @@ -252,7 +252,7 @@ describe('Package search provider', () => { expect(sendGetPackages).toHaveBeenCalledTimes(1); }); - test('with packages tag, with search term', () => { + test('with integration tag, with search term', () => { getTestScheduler().run(({ hot, expectObservable }) => { mockSendGetPackages.mockReturnValue( hot('--(a|)', { a: { data: { response: testResponse } } }) @@ -263,7 +263,7 @@ describe('Package search provider', () => { const packageSearchProvider = createPackageSearchProvider(setupMock); expectObservable( packageSearchProvider.find( - { term: 'test1', types: ['package'] }, + { term: 'test1', types: ['integration'] }, { aborted$: NEVER, maxResults: 100, preference: '' } ) ).toBe('--(a|)', { @@ -272,7 +272,7 @@ describe('Package search provider', () => { id: 'test1-test1', score: 80, title: 'test1', - type: 'package', + type: 'integration', url: { path: 'undefined#/detail/test1-test1/overview', prependBasePath: false, diff --git a/x-pack/plugins/fleet/public/search_provider.ts b/x-pack/plugins/fleet/public/search_provider.ts index 56e08ecad29f..a8b46a3dc0f0 100644 --- a/x-pack/plugins/fleet/public/search_provider.ts +++ b/x-pack/plugins/fleet/public/search_provider.ts @@ -21,7 +21,7 @@ import { sendGetPackages } from './hooks'; import type { GetPackagesResponse } from './types'; import { pagePathGetters } from './constants'; -const packageType = 'package'; +const packageType = 'integration'; const createPackages$ = () => from(sendGetPackages()).pipe( @@ -70,7 +70,7 @@ export const createPackageSearchProvider = (core: CoreSetup): GlobalSearchResult }; return { - id: 'packages', + id: 'integrations', getSearchableTypes: () => [packageType], find: ({ term, types }, { maxResults, aborted$ }) => { if (types?.includes(packageType) === false) { diff --git a/x-pack/plugins/fleet/server/plugin.ts b/x-pack/plugins/fleet/server/plugin.ts index a4c0df6dd370..0ab102d91cd4 100644 --- a/x-pack/plugins/fleet/server/plugin.ts +++ b/x-pack/plugins/fleet/server/plugin.ts @@ -218,7 +218,7 @@ export class FleetPlugin if (deps.features) { deps.features.registerKibanaFeature({ id: PLUGIN_ID, - name: 'Fleet', + name: 'Fleet and Integrations', category: DEFAULT_APP_CATEGORIES.management, app: [PLUGIN_ID, INTEGRATIONS_PLUGIN_ID, 'kibana'], catalogue: ['fleet'], diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index b16c5764f9d7..aed7a80fe996 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -6340,11 +6340,6 @@ "xpack.canvas.functions.repeatImage.args.maxHelpText": "画像が繰り返される最高回数です。", "xpack.canvas.functions.repeatImage.args.sizeHelpText": "画像の高さまたは幅のピクセル単位での最高値です。画像が縦長の場合、この関数は高さを制限します。", "xpack.canvas.functions.repeatImageHelpText": "繰り返し画像エレメントを構成します。", - "expressionRevealImage.functions.revealImage.args.emptyImageHelpText": "表示される背景画像です。画像アセットは「{BASE64}」データ {URL} として提供するか、部分式で渡します。", - "expressionRevealImage.functions.revealImage.args.imageHelpText": "表示する画像です。画像アセットは{BASE64}データ{URL}として提供するか、部分式で渡します。", - "expressionRevealImage.functions.revealImage.args.originHelpText": "画像で埋め始める位置です。たとえば、{list}、または {end}です。", - "expressionRevealImage.functions.revealImage.invalidPercentErrorMessage": "無効な値：「{percent}」。パーセンテージは 0 と 1 の間でなければなりません ", - "expressionRevealImage.functions.revealImageHelpText": "画像表示エレメントを構成します。", "xpack.canvas.functions.replace.args.flagsHelpText": "フラグを指定します。{url}を参照してください。", "xpack.canvas.functions.replace.args.patternHelpText": "{JS} 正規表現のテキストまたはパターンです。例：{example}。ここではキャプチャグループを使用できます。", "xpack.canvas.functions.replace.args.replacementHelpText": "文字列の一致する部分の代わりです。キャプチャグループはノードによってアクセス可能です。例：{example}。", @@ -6543,8 +6538,6 @@ "xpack.canvas.renderer.progress.helpDescription": "エレメントのパーセンテージを示す進捗インジケーターをレンダリングします", "xpack.canvas.renderer.repeatImage.displayName": "画像の繰り返し", "xpack.canvas.renderer.repeatImage.helpDescription": "画像を指定回数繰り返し表示します", - "expressionRevealImage.renderer.revealImage.displayName": "画像の部分表示", - "expressionRevealImage.renderer.revealImage.helpDescription": "カスタムゲージスタイルチャートを作成するため、画像のパーセンテージを表示します", "xpack.canvas.renderer.shape.displayName": "形状", "xpack.canvas.renderer.shape.helpDescription": "基本的な図形をレンダリングします", "xpack.canvas.renderer.table.displayName": "データテーブル", @@ -7014,6 +7007,13 @@ "xpack.canvas.workpadTemplates.table.descriptionColumnTitle": "説明", "xpack.canvas.workpadTemplates.table.nameColumnTitle": "テンプレート名", "xpack.canvas.workpadTemplates.table.tagsColumnTitle": "タグ", + "expressionRevealImage.functions.revealImage.args.emptyImageHelpText": "表示される背景画像です。画像アセットは「{BASE64}」データ {URL} として提供するか、部分式で渡します。", + "expressionRevealImage.functions.revealImage.args.imageHelpText": "表示する画像です。画像アセットは{BASE64}データ{URL}として提供するか、部分式で渡します。", + "expressionRevealImage.functions.revealImage.args.originHelpText": "画像で埋め始める位置です。たとえば、{list}、または {end}です。", + "expressionRevealImage.functions.revealImage.invalidPercentErrorMessage": "無効な値：「{percent}」。パーセンテージは 0 と 1 の間でなければなりません ", + "expressionRevealImage.functions.revealImageHelpText": "画像表示エレメントを構成します。", + "expressionRevealImage.renderer.revealImage.displayName": "画像の部分表示", + "expressionRevealImage.renderer.revealImage.helpDescription": "カスタムゲージスタイルチャートを作成するため、画像のパーセンテージを表示します", "xpack.cases.connectors.cases.externalIncidentAdded": " ({date}に{user}が追加) ", "xpack.cases.connectors.cases.externalIncidentCreated": " ({date}に{user}が作成) ", "xpack.cases.connectors.cases.externalIncidentDefault": " ({date}に{user}が作成) ", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index f1b174e5ad0e..7b921c050a1f 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -6385,11 +6385,6 @@ "xpack.canvas.functions.replace.args.replacementHelpText": "字符串匹配部分的替代。捕获组可以通过其索引进行访问。例如，{example}。", "xpack.canvas.functions.rounddate.args.formatHelpText": "用于存储桶存储的 {MOMENTJS} 格式。例如，{example} 四舍五入到月份。请参见 {url}。", "xpack.canvas.functions.replaceImageHelpText": "使用正则表达式替换字符串的各部分。", - "expressionRevealImage.functions.revealImage.args.emptyImageHelpText": "要显示的可选背景图像。以 `{BASE64}` 数据 {URL} 的形式提供图像资产或传入子表达式。", - "expressionRevealImage.functions.revealImage.args.imageHelpText": "要显示的图像。以 {BASE64} 数据 {URL} 的形式提供图像资产或传入子表达式。", - "expressionRevealImage.functions.revealImage.args.originHelpText": "要开始图像填充的位置。例如 {list} 或 {end}。", - "expressionRevealImage.functions.revealImage.invalidPercentErrorMessage": "无效值：“{percent}”。百分比必须介于 0 和 1 之间", - "expressionRevealImage.functions.revealImageHelpText": "配置图像显示元素。", "xpack.canvas.functions.rounddateHelpText": "使用 {MOMENTJS} 格式字符串舍入自 Epoch 起毫秒数，并返回自 Epoch 起毫秒数。", "xpack.canvas.functions.rowCountHelpText": "返回行数。与 {plyFn} 搭配使用，可获取唯一列值的计数或唯一列值的组合。", "xpack.canvas.functions.savedLens.args.idHelpText": "已保存 Lens 可视化对象的 ID", @@ -6583,8 +6578,6 @@ "xpack.canvas.renderer.progress.helpDescription": "呈现显示元素百分比的进度指示", "xpack.canvas.renderer.repeatImage.displayName": "图像重复", "xpack.canvas.renderer.repeatImage.helpDescription": "重复图像给定次数", - "expressionRevealImage.renderer.revealImage.displayName": "图像显示", - "expressionRevealImage.renderer.revealImage.helpDescription": "显示一定百分比的图像，以制作定制的仪表样式图表", "xpack.canvas.renderer.shape.displayName": "形状", "xpack.canvas.renderer.shape.helpDescription": "呈现基本形状", "xpack.canvas.renderer.table.displayName": "数据表", @@ -7062,6 +7055,13 @@ "xpack.canvas.workpadTemplates.table.descriptionColumnTitle": "描述", "xpack.canvas.workpadTemplates.table.nameColumnTitle": "模板名称", "xpack.canvas.workpadTemplates.table.tagsColumnTitle": "标签", + "expressionRevealImage.functions.revealImage.args.emptyImageHelpText": "要显示的可选背景图像。以 `{BASE64}` 数据 {URL} 的形式提供图像资产或传入子表达式。", + "expressionRevealImage.functions.revealImage.args.imageHelpText": "要显示的图像。以 {BASE64} 数据 {URL} 的形式提供图像资产或传入子表达式。", + "expressionRevealImage.functions.revealImage.args.originHelpText": "要开始图像填充的位置。例如 {list} 或 {end}。", + "expressionRevealImage.functions.revealImage.invalidPercentErrorMessage": "无效值：“{percent}”。百分比必须介于 0 和 1 之间", + "expressionRevealImage.functions.revealImageHelpText": "配置图像显示元素。", + "expressionRevealImage.renderer.revealImage.displayName": "图像显示", + "expressionRevealImage.renderer.revealImage.helpDescription": "显示一定百分比的图像，以制作定制的仪表样式图表", "xpack.cases.connectors.cases.externalIncidentAdded": " (由 {user} 于 {date}添加) ", "xpack.cases.connectors.cases.externalIncidentCreated": " (由 {user} 于 {date}创建) ", "xpack.cases.connectors.cases.externalIncidentDefault": " (由 {user} 于 {date}创建) ",