[Cases] Custom fields MVP UI leftovers (#168327)

## Summary

- Change the `No "My label" added` text to `No value is added` when a
field does not have a value in the case detail page
- Center the header of `Settings/Configure cases` as in the create case
form

### Screenshots

<details>
  <summary>No value is added</summary>
<img width="1715" alt="Screenshot 2023-10-09 at 11 09 31"
src="d9af42a1-a84a-42dd-bb50-9e86b84bfbbf">
</details>

<details>
  <summary>Settings header 1</summary>
<img width="1734" alt="Screenshot 2023-10-09 at 11 08 34"
src="2852d544-d85b-4f82-a8b7-9ac3591ce2da">
</details>

<details>
  <summary>Settings header 2</summary>
<img width="1731" alt="Screenshot 2023-10-09 at 11 09 12"
src="cdedf5a6-0d1f-4b7e-92a2-b6c4f62c2f10">
</details>

<details>
  <summary>Settings header 3</summary>
<img width="1735" alt="Screenshot 2023-10-09 at 11 07 29"
src="a1428c0a-3fb6-4424-ad74-ea4711d52c26">
</details>
This commit is contained in:
Antonio 2023-10-09 18:25:28 +02:00 committed by GitHub
parent 413715f134
commit 1d7e23a78f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 15 deletions

View file

@ -9,7 +9,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
import styled, { css } from 'styled-components';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiCallOut, EuiFlexItem, EuiLink, EuiPageBody } from '@elastic/eui';
import { EuiCallOut, EuiFlexItem, EuiLink, EuiPageBody, EuiPageSection } from '@elastic/eui';
import type { ActionConnectorTableItem } from '@kbn/triggers-actions-ui-plugin/public/types';
import { CasesConnectorFeatureId } from '@kbn/actions-plugin/common';
@ -328,19 +328,18 @@ export const ConfigureCases: React.FC = React.memo(() => {
) : null;
return (
<>
<EuiPageSection restrictWidth={true}>
<HeaderPage
border={true}
showBackButton={true}
data-test-subj="case-configure-title"
title={i18n.CONFIGURE_CASES_PAGE_TITLE}
/>
<EuiPageBody restrictWidth={true}>
<FormWrapper>
<FormWrapper style={{ paddingTop: 0 }}>
{hasMinimumLicensePermissions && (
<>
{!connectorIsValid && (
<SectionWrapper style={{ marginTop: 0 }}>
<SectionWrapper>
<EuiCallOut
title={i18n.WARNING_NO_CONNECTOR_TITLE}
color="warning"
@ -400,7 +399,7 @@ export const ConfigureCases: React.FC = React.memo(() => {
{CustomFieldAddFlyout}
</FormWrapper>
</EuiPageBody>
</>
</EuiPageSection>
);
});

View file

@ -108,7 +108,7 @@ describe('Edit ', () => {
</FormTestComponent>
);
expect(screen.getByText('No "My test label 1" added')).toBeInTheDocument();
expect(screen.getByText('No value is added')).toBeInTheDocument();
});
it('shows the no value text if the the value is null', async () => {
@ -124,7 +124,7 @@ describe('Edit ', () => {
</FormTestComponent>
);
expect(screen.getByText('No "My test label 1" added')).toBeInTheDocument();
expect(screen.getByText('No value is added')).toBeInTheDocument();
});
it('does not show the value when the custom field is undefined', async () => {

View file

@ -162,7 +162,7 @@ const EditComponent: CustomFieldType<CaseCustomFieldText>['Edit'] = ({
direction="column"
>
{!isCustomFieldValueDefined && !isEdit && (
<p data-test-subj="no-tags">{NO_CUSTOM_FIELD_SET(customFieldConfiguration.label)}</p>
<p data-test-subj="no-custom-field-value">{NO_CUSTOM_FIELD_SET}</p>
)}
{!isEdit && isCustomFieldValueDefined && (
<EuiFlexItem>

View file

@ -78,10 +78,8 @@ export const EDIT_CUSTOM_FIELDS_ARIA_LABEL = (customFieldLabel: string) =>
defaultMessage: 'click to edit {customFieldLabel}',
});
export const NO_CUSTOM_FIELD_SET = (customFieldLabel: string) =>
i18n.translate('xpack.cases.caseView.noCustomFieldSet', {
values: { customFieldLabel },
defaultMessage: 'No "{customFieldLabel}" added',
export const NO_CUSTOM_FIELD_SET = i18n.translate('xpack.cases.caseView.noCustomFieldSet', {
defaultMessage: 'No value is added',
});
export const DELETE_FIELD_TITLE = (fieldName: string) =>

View file

@ -9,7 +9,6 @@ import styled from 'styled-components';
export const SectionWrapper = styled.div`
box-sizing: content-box;
margin: 0 auto;
max-width: 1175px;
width: 100%;
`;