[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>
jen-huang · Jul 20, 2020 · adfada0 · adfada0
1 parent 6130e8b
commit adfada0
Showing 1 changed file with 21 additions and 12 deletions.
diff --git a/...manager/public/applications/ingest_manager/sections/epm/components/assets_facet_group.tsx b/...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>
                 );