[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

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<DisplayedAssetType, string> = {
-  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',
 };
 

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<Props> = ({ savedObjects, type }) => {
   const { http } = useStartServices();
+
+  const isDashboard = type === KibanaAssetType.dashboard;
+
   return (
     <EuiAccordion
+      initialIsOpen={isDashboard}
       buttonContent={
         <EuiFlexGroup justifyContent="center" alignItems="center" gutterSize="s" responsive={false}>
           <EuiFlexItem grow={false}>

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/advanced_agent_authentication_settings.tsx

@@ -22,20 +22,24 @@ import {
 interface Props {
   agentPolicyId?: string;
   selectedApiKeyId?: string;
+  initialAuthenticationSettingsOpen?: boolean;
   onKeyChange: (key?: string) => void;
 }
 
 export const AdvancedAgentAuthenticationSettings: FunctionComponent<Props> = ({
   agentPolicyId,
   selectedApiKeyId,
+  initialAuthenticationSettingsOpen = false,
   onKeyChange,
 }) => {
   const { notifications } = useStartServices();
   const [enrollmentAPIKeys, setEnrollmentAPIKeys] = useState<GetEnrollmentAPIKeysResponse['list']>(
     []
   );
   const [isLoadingEnrollmentKey, setIsLoadingEnrollmentKey] = useState(false);
-  const [isAuthenticationSettingsOpen, setIsAuthenticationSettingsOpen] = useState<boolean>(false);
+  const [isAuthenticationSettingsOpen, setIsAuthenticationSettingsOpen] = useState<boolean>(
+    initialAuthenticationSettingsOpen
+  );
 
   const onCreateEnrollmentTokenClick = async () => {
     setIsLoadingEnrollmentKey(true);

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: (
       <>
         <EuiText>
           <FormattedMessage
             id="xpack.fleet.agentEnrollment.agentAuthenticationSettings"
-            defaultMessage="{agentPolicyName} has been selected. Configure agent authentication based on the available policy options."
+            defaultMessage="{agentPolicyName} has been selected. Select which enrollment token to use when enrolling agents."
             values={{
               agentPolicyName: <strong>{agentPolicy.name}</strong>,
             }}
@@ -154,6 +154,7 @@ export const AgentEnrollmentKeySelectionStep = ({
         <AdvancedAgentAuthenticationSettings
           agentPolicyId={agentPolicy.id}
           selectedApiKeyId={selectedApiKeyId}
+          initialAuthenticationSettingsOpen
           onKeyChange={setSelectedAPIKeyId}
         />
       </>

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 ? (
     <RedirectAppLinks application={application}>
-      <EuiButtonEmpty size="s" iconType="link" flush="right" href={getHref('overview')}>
+      <EuiButtonEmpty size="s" iconType="link" flush="right" href={getHref('integrations')}>
         <FormattedMessage
           id="xpack.fleet.homeIntegration.tutorialDirectory.fleetAppButtonText"
-          defaultMessage="Try Fleet Beta"
+          defaultMessage="Try Integrations"
         />
       </EuiButtonEmpty>
     </RedirectAppLinks>

x-pack/plugins/fleet/public/components/home_integration/tutorial_directory_notice.tsx

@@ -71,13 +71,13 @@ const TutorialDirectoryNotice: TutorialDirectoryNoticeComponent = memo(() => {
         title={
           <FormattedMessage
             id="xpack.fleet.homeIntegration.tutorialDirectory.noticeTitle"
-            defaultMessage="{newPrefix} Elastic Agent and Fleet Beta"
+            defaultMessage="{newPrefix} Elastic Agent integrations"
             values={{
               newPrefix: (
                 <strong>
                   <FormattedMessage
                     id="xpack.fleet.homeIntegration.tutorialDirectory.noticeTitle.newPrefix"
-                    defaultMessage="New:"
+                    defaultMessage="Now generally available:"
                   />
                 </strong>
               ),
@@ -88,12 +88,16 @@ const TutorialDirectoryNotice: TutorialDirectoryNoticeComponent = memo(() => {
         <p>
           <FormattedMessage
             id="xpack.fleet.homeIntegration.tutorialDirectory.noticeText"
-            defaultMessage="The Elastic Agent provides a simple, unified way to add monitoring for logs, metrics, and other types of data to your hosts.
-                You no longer need to install multiple Beats and other agents, which makes it easier and faster to deploy policies across your infrastructure.
-                For more information, read our {blogPostLink}."
+            defaultMessage="Elastic Agent integrations provide a simple, unified way to add monitoring for logs, metrics, and other types of data to your hosts.
+              You no longer need to install multiple Beats, which makes it easier and faster to deploy policies across your infrastructure.
+              For more information, read our {blogPostLink}."
             values={{
               blogPostLink: (
-                <EuiLink href="https://ela.st/ingest-manager-announcement" external target="_blank">
+                <EuiLink
+                  href="https://ela.st/elastic-agent-ga-announcement"
+                  external
+                  target="_blank"
+                >
                   <FormattedMessage
                     id="xpack.fleet.homeIntegration.tutorialDirectory.noticeText.blogPostLink"
                     defaultMessage="announcement blog post"
@@ -107,10 +111,10 @@ const TutorialDirectoryNotice: TutorialDirectoryNoticeComponent = memo(() => {
           <FlexItemButtonWrapper grow={false}>
             <div>
               <RedirectAppLinks application={application}>
-                <EuiButton size="s" href={getHref('overview')}>
+                <EuiButton size="s" href={getHref('integrations')}>
                   <FormattedMessage
                     id="xpack.fleet.homeIntegration.tutorialDirectory.fleetAppButtonText"
-                    defaultMessage="Try Fleet Beta"
+                    defaultMessage="Try Integrations"
                   />
                 </EuiButton>
               </RedirectAppLinks>

x-pack/plugins/fleet/public/components/home_integration/tutorial_module_notice.tsx

@@ -31,8 +31,8 @@ const TutorialModuleNotice: TutorialModuleNoticeComponent = memo(({ moduleName }
           <p>
             <FormattedMessage
               id="xpack.fleet.homeIntegration.tutorialModule.noticeText"
-              defaultMessage="{notePrefix} a newer version of this module is {availableAsIntegrationLink} in Fleet Beta.
-              To learn more about agent policies and the new Elastic Agent, read our {blogPostLink}."
+              defaultMessage="{notePrefix} a newer version of this module is {availableAsIntegrationLink}.
+              To learn more about integrations and the new Elastic Agent, read our {blogPostLink}."
               values={{
                 notePrefix: (
                   <strong>
@@ -50,13 +50,13 @@ const TutorialModuleNotice: TutorialModuleNoticeComponent = memo(({ moduleName }
                   >
                     <FormattedMessage
                       id="xpack.fleet.homeIntegration.tutorialModule.noticeText.integrationLink"
-                      defaultMessage="available as an Integration"
+                      defaultMessage="available as an Elastic Agent integration"
                     />
                   </EuiLink>
                 ),
                 blogPostLink: (
                   <EuiLink
-                    href="https://ela.st/ingest-manager-announcement"
+                    href="https://ela.st/elastic-agent-ga-announcement"
                     external
                     target="_blank"
                   >

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<FleetSetup, FleetStart, FleetSetupDep
       deps.home.featureCatalogue.register({
         id: 'fleet',
         title: i18n.translate('xpack.fleet.featureCatalogueTitle', {
-          defaultMessage: 'Add Elastic Agent',
+          defaultMessage: 'Add Elastic Agent integrations',
         }),
         description: i18n.translate('xpack.fleet.featureCatalogueDescription', {
-          defaultMessage: 'Add and manage your fleet of Elastic Agents and integrations.',
+          defaultMessage: 'Add and manage integrations with Elastic Agent',
         }),
         icon: 'indexManagementApp',
         showOnHomePage: true,
-        path: FLEET_BASE_PATH,
+        path: INTEGRATIONS_BASE_PATH,
         category: FeatureCatalogueCategory.DATA,
         order: 510,
       });

x-pack/plugins/fleet/public/search_provider.test.ts

@@ -90,7 +90,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,
@@ -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,

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) {

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'],

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}が作成) ",