[Ingest Manager] Disable asset facet links (elastic#72158) (elastic#7…

…2516)

* Disable asset facets

* Fix prop name

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/assets_facet_group.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
+import React, { Fragment } from 'react';
 import {
  EuiFacetButton,
  EuiFacetGroup,
@@ -14,8 +14,8 @@ import {
  EuiTextColor,
  EuiTitle,
 } from '@elastic/eui';
-import React, { Fragment } from 'react';
 import styled from 'styled-components';
+import { FormattedMessage } from '@kbn/i18n/react';
 import {
  AssetsGroupedByServiceByType,
  AssetTypeToParts,
@@ -43,8 +43,15 @@ const FacetGroup = styled(EuiFacetGroup)`
 `;
 
 const FacetButton = styled(EuiFacetButton)`
- padding: '${(props) => props.theme.eui.paddingSizes.xs} 0';
- height: 'unset';
+ &&& {
+ .euiFacetButton__icon,
+ .euiFacetButton__quantity {
+ opacity: 1;
+ }
+ .euiFacetButton__text {
+ color: ${(props) => props.theme.eui.euiTextColor};
+ }
+ }
 `;
 
 export function AssetsFacetGroup({ assets }: { assets: AssetsGroupedByServiceByType }) {
@@ -70,7 +77,15 @@ export function AssetsFacetGroup({ assets }: { assets: AssetsGroupedByServiceByT
  <EuiFlexItem>
  <EuiTitle key={service} size="xs">
  <EuiText>
- <h4>{ServiceTitleMap[service]} Assets</h4>
+ <h4>
+ <FormattedMessage
+ id="xpack.ingestManager.epm.assetGroupTitle"
+ defaultMessage="{assetType} assets"
+ values={{
+ assetType: ServiceTitleMap[service],
+ }}
+ />
+ </h4>
  </EuiText>
  </EuiTitle>
  </EuiFlexItem>
@@ -83,13 +98,7 @@ export function AssetsFacetGroup({ assets }: { assets: AssetsGroupedByServiceByT
  const iconType = type in AssetIcons && AssetIcons[type];
  const iconNode = iconType ? <EuiIcon type={iconType} size="s" /> : '';
  return (
- <FacetButton
- key={type}
- quantity={parts.length}
- icon={iconNode}
- // https://github.com/elastic/eui/issues/2216
- buttonRef={() => {}}
- >
+ <FacetButton key={type} quantity={parts.length} icon={iconNode} isDisabled={true}>
  <EuiTextColor color="subdued">{AssetTitleMap[type]}</EuiTextColor>
  </FacetButton>
  );