ui changes

elastic · Sep 9, 2024 · 29b0f53 · 29b0f53
1 parent e308d17
commit 29b0f53
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/x-pack/plugins/cases/public/components/case_form_fields/custom_fields.tsx b/x-pack/plugins/cases/public/components/case_form_fields/custom_fields.tsx
@@ -58,7 +58,7 @@ const CustomFieldsComponent: React.FC<Props> = ({
     <EuiFormRow fullWidth>
       <EuiFlexGroup direction="column" gutterSize="s">
         <EuiText size="m">
-          <h3>{i18n.ADDITIONAL_FIELDS}</h3>
+          <h3>{i18n.CUSTOM_FIELDS}</h3>
         </EuiText>
         <EuiSpacer size="xs" />
         <EuiFlexItem data-test-subj="caseCustomFields">{customFieldsComponents}</EuiFlexItem>

diff --git a/x-pack/plugins/cases/public/components/case_form_fields/translations.ts b/x-pack/plugins/cases/public/components/case_form_fields/translations.ts
@@ -9,6 +9,6 @@ import { i18n } from '@kbn/i18n';
 
 export * from '../../common/translations';
 
-export const ADDITIONAL_FIELDS = i18n.translate('xpack.cases.additionalFields', {
-  defaultMessage: 'Additional fields',
+export const CUSTOM_FIELDS = i18n.translate('xpack.cases.customFields', {
+  defaultMessage: 'Custom fields',
 });
diff --git a/x-pack/plugins/cases/public/components/links/index.tsx b/x-pack/plugins/cases/public/components/links/index.tsx
@@ -6,7 +6,7 @@
  */
 
 import type { EuiButtonProps, EuiLinkProps, PropsForAnchor, PropsForButton } from '@elastic/eui';
-import { EuiButton, EuiLink, EuiToolTip } from '@elastic/eui';
+import { EuiButton, EuiLink, EuiToolTip, EuiButtonEmpty } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';
 import { useCaseViewNavigation, useConfigureCasesNavigation } from '../../common/navigation';
 import * as i18n from './translations';
@@ -18,10 +18,17 @@ export interface CasesNavigation<T = React.MouseEvent | MouseEvent | null, K = n
     : (arg: T) => Promise<void> | void;
 }
 
-export const LinkButton: React.FC<PropsForButton<EuiButtonProps> | PropsForAnchor<EuiButtonProps>> =
-  // TODO: Fix this manually. Issue #123375
-  // eslint-disable-next-line react/display-name
-  ({ children, ...props }) => <EuiButton {...props}>{children}</EuiButton>;
+type LinkButtonProps = React.FC<
+  (PropsForButton<EuiButtonProps> | PropsForAnchor<EuiButtonProps>) & { isEmpty?: boolean }
+>;
+
+export const LinkButton: LinkButtonProps = ({ children, isEmpty, ...props }) =>
+  isEmpty ? (
+    <EuiButtonEmpty {...props}>{children}</EuiButtonEmpty>
+  ) : (
+    <EuiButton {...props}>{children}</EuiButton>
+  );
+LinkButton.displayName = 'LinkButton';
 
 // TODO: Fix this manually. Issue #123375
 // eslint-disable-next-line react/display-name
@@ -62,6 +69,7 @@ const CaseDetailsLinkComponent: React.FC<CaseDetailsLinkProps> = ({
     </LinkAnchor>
   );
 };
+
 export const CaseDetailsLink = React.memo(CaseDetailsLinkComponent);
 CaseDetailsLink.displayName = 'CaseDetailsLink';
 
@@ -95,9 +103,10 @@ const ConfigureCaseButtonComponent: React.FC<ConfigureCaseButtonProps> = ({
       <LinkButton
         onClick={navigateToConfigureCasesClick}
         href={getConfigureCasesUrl()}
-        iconType="controlsHorizontal"
+        iconType="gear"
         isDisabled={false}
         aria-label={label}
+        isEmpty={true}
         data-test-subj="configure-case-button"
       >
         {label}