[ResponseOps][Cases] Design Review changes #1

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>

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',
 });

x-pack/plugins/cases/public/components/links/index.test.tsx

@@ -34,23 +34,23 @@ describe('Configuration button', () => {
     });
   });
 
-  test('it renders without the tooltip', () => {
+  it('renders without the tooltip', () => {
     expect(wrapper.find('[data-test-subj="configure-case-button"]').first().exists()).toBe(true);
 
     expect(wrapper.find('[data-test-subj="configure-case-tooltip"]').first().exists()).toBe(false);
   });
 
-  test('it pass the correct props to the button', () => {
+  it('passes the correct props to the button', () => {
     expect(wrapper.find('[data-test-subj="configure-case-button"]').first().props()).toMatchObject({
       href: `/app/security/cases/configure`,
-      iconType: 'controlsHorizontal',
+      iconType: 'gear',
       isDisabled: false,
       'aria-label': 'My label',
       children: 'My label',
     });
   });
 
-  test('it renders the tooltip', () => {
+  it('renders the tooltip', () => {
     const msgTooltip = <EuiText>{'My message tooltip'}</EuiText>;
 
     const newWrapper = mount(
@@ -72,7 +72,7 @@ describe('Configuration button', () => {
     expect(wrapper.find('[data-test-subj="configure-case-button"]').first().exists()).toBe(true);
   });
 
-  test('it shows the tooltip when hovering the button', () => {
+  it('shows the tooltip when hovering the button', () => {
     // Use fake timers so we don't have to wait for the EuiToolTip timeout
     jest.useFakeTimers({ legacyFakeTimers: true });
 
@@ -120,43 +120,45 @@ describe('CaseDetailsLink', () => {
     useCaseViewNavigationMock.mockReturnValue({ getCaseViewUrl, navigateToCaseView });
   });
 
-  test('it renders', () => {
+  it('renders', async () => {
     render(<CaseDetailsLink {...props} />);
-    expect(screen.getByText('test detail name')).toBeInTheDocument();
+    expect(await screen.findByText('test detail name')).toBeInTheDocument();
   });
 
-  test('it renders the children instead of the detail name if provided', () => {
+  it('renders the children instead of the detail name if provided', async () => {
     render(<CaseDetailsLink {...props}>{'children'}</CaseDetailsLink>);
     expect(screen.queryByText('test detail name')).toBeFalsy();
-    expect(screen.getByText('children')).toBeInTheDocument();
+    expect(await screen.findByText('children')).toBeInTheDocument();
   });
 
-  test('it uses the detailName in the aria-label if the title is not provided', () => {
+  it('uses the detailName in the aria-label if the title is not provided', async () => {
     render(<CaseDetailsLink {...props} />);
     expect(
-      screen.getByLabelText(`click to visit case with title ${props.detailName}`)
+      await screen.findByLabelText(`click to visit case with title ${props.detailName}`)
     ).toBeInTheDocument();
   });
 
-  test('it uses the title in the aria-label if provided', () => {
+  it('uses the title in the aria-label if provided', async () => {
     render(<CaseDetailsLink {...props} title={'my title'} />);
-    expect(screen.getByText('test detail name')).toBeInTheDocument();
-    expect(screen.getByLabelText(`click to visit case with title my title`)).toBeInTheDocument();
+    expect(await screen.findByText('test detail name')).toBeInTheDocument();
+    expect(
+      await screen.findByLabelText(`click to visit case with title my title`)
+    ).toBeInTheDocument();
   });
 
-  test('it calls navigateToCaseViewClick on click', () => {
+  it('calls navigateToCaseViewClick on click', async () => {
     render(<CaseDetailsLink {...props} />);
-    userEvent.click(screen.getByText('test detail name'));
+    userEvent.click(await screen.findByText('test detail name'));
     expect(navigateToCaseView).toHaveBeenCalledWith({
       detailName: props.detailName,
     });
   });
 
-  test('it set the href correctly', () => {
+  it('sets the href correctly', async () => {
     render(<CaseDetailsLink {...props} />);
     expect(getCaseViewUrl).toHaveBeenCalledWith({
       detailName: props.detailName,
     });
-    expect(screen.getByRole('link')).toHaveAttribute('href', '/cases/test');
+    expect(await screen.findByRole('link')).toHaveAttribute('href', '/cases/test');
   });
 });

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}

x-pack/plugins/translations/translations/fr-FR.json

@@ -13138,7 +13138,6 @@
     "xpack.cases.actions.viewCase": "Afficher le cas",
     "xpack.cases.actions.visualizationActions.addToExistingCase.displayName": "Ajouter au cas",
     "xpack.cases.addConnector.title": "Ajouter un connecteur",
-    "xpack.cases.additionalFields": "Champs supplémentaires",
     "xpack.cases.allCases.actions": "Actions",
     "xpack.cases.allCases.comments": "Commentaires",
     "xpack.cases.allCases.noCategoriesAvailable": "Pas de catégories disponibles",

x-pack/plugins/translations/translations/ja-JP.json

@@ -13129,7 +13129,6 @@
     "xpack.cases.actions.viewCase": "ケースの表示",
     "xpack.cases.actions.visualizationActions.addToExistingCase.displayName": "ケースに追加",
     "xpack.cases.addConnector.title": "コネクターの追加",
-    "xpack.cases.additionalFields": "追加フィールド",
     "xpack.cases.allCases.actions": "アクション",
     "xpack.cases.allCases.comments": "コメント",
     "xpack.cases.allCases.noCategoriesAvailable": "カテゴリがありません",

x-pack/plugins/translations/translations/zh-CN.json

@@ -13151,7 +13151,6 @@
     "xpack.cases.actions.viewCase": "查看案例",
     "xpack.cases.actions.visualizationActions.addToExistingCase.displayName": "添加到案例",
     "xpack.cases.addConnector.title": "添加连接器",
-    "xpack.cases.additionalFields": "其他字段",
     "xpack.cases.allCases.actions": "操作",
     "xpack.cases.allCases.comments": "注释",
     "xpack.cases.allCases.noCategoriesAvailable": "没有可用类别",