From 0c63c0899be288c64069d5bb11ca1026885312a8 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:56:36 +1100
Subject: [PATCH] [8.x] [ResponseOps][Cases]Design Review changes PR 3
 (#194936) (#195408)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ResponseOps][Cases]Design Review changes PR 3
(#194936)](https://github.com/elastic/kibana/pull/194936)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Georgiana-Andreea
Onoleață","email":"georgiana.onoleata@elastic.co"},"sourceCommit":{"committedDate":"2024-10-08T13:10:24Z","message":"[ResponseOps][Cases]Design
Review changes PR 3 (#194936)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/188187 \r\n\r\n- The fly out
title now updates appropriately when editing an existing\r\nfield or
template, displaying \"Edit field\" and \"Edit
template\"\r\nrespectively.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/b85d7d27-ba89-4fbd-97c4-dc5873dda6d8","sha":"c6dd76e76c4bad4c6f0a78dda86b0cc67eb31ca8","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","v9.0.0","Feature:Cases","backport:prev-minor","v8.16.0"],"title":"[ResponseOps][Cases]Design
Review changes PR
3","number":194936,"url":"https://github.com/elastic/kibana/pull/194936","mergeCommit":{"message":"[ResponseOps][Cases]Design
Review changes PR 3 (#194936)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/188187 \r\n\r\n- The fly out
title now updates appropriately when editing an existing\r\nfield or
template, displaying \"Edit field\" and \"Edit
template\"\r\nrespectively.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/b85d7d27-ba89-4fbd-97c4-dc5873dda6d8","sha":"c6dd76e76c4bad4c6f0a78dda86b0cc67eb31ca8"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194936","number":194936,"mergeCommit":{"message":"[ResponseOps][Cases]Design
Review changes PR 3 (#194936)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/188187 \r\n\r\n- The fly out
title now updates appropriately when editing an existing\r\nfield or
template, displaying \"Edit field\" and \"Edit
template\"\r\nrespectively.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/b85d7d27-ba89-4fbd-97c4-dc5873dda6d8","sha":"c6dd76e76c4bad4c6f0a78dda86b0cc67eb31ca8"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Georgiana-Andreea Onoleață <georgiana.onoleata@elastic.co>
---
 .../components/configure_cases/index.test.tsx       | 12 ++++++++++++
 .../public/components/configure_cases/index.tsx     |  8 ++++++--
 .../components/configure_cases/translations.ts      | 13 ++++++++++++-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/cases/public/components/configure_cases/index.test.tsx b/x-pack/plugins/cases/public/components/configure_cases/index.test.tsx
index 7f375ef75938b..6c65eae41c78b 100644
--- a/x-pack/plugins/cases/public/components/configure_cases/index.test.tsx
+++ b/x-pack/plugins/cases/public/components/configure_cases/index.test.tsx
@@ -902,6 +902,10 @@ describe('ConfigureCases', () => {
 
       expect(await screen.findByTestId('common-flyout')).toBeInTheDocument();
 
+      expect(await screen.findByTestId('common-flyout-header')).toHaveTextContent(
+        i18n.EDIT_CUSTOM_FIELD
+      );
+
       await userEvent.click(screen.getByTestId('custom-field-label-input'));
       await userEvent.paste('!!');
       await userEvent.click(screen.getByTestId('text-custom-field-required'));
@@ -941,6 +945,10 @@ describe('ConfigureCases', () => {
       await userEvent.click(screen.getByTestId('add-custom-field'));
 
       expect(await screen.findByTestId('common-flyout')).toBeInTheDocument();
+
+      expect(await screen.findByTestId('common-flyout-header')).toHaveTextContent(
+        i18n.ADD_CUSTOM_FIELD
+      );
     });
 
     it('closes fly out for when click on cancel', async () => {
@@ -1177,6 +1185,10 @@ describe('ConfigureCases', () => {
 
       expect(await screen.findByTestId('common-flyout')).toBeInTheDocument();
 
+      expect(await screen.findByTestId('common-flyout-header')).toHaveTextContent(
+        i18n.EDIT_TEMPLATE
+      );
+
       await userEvent.clear(await screen.findByTestId('template-name-input'));
       await userEvent.click(await screen.findByTestId('template-name-input'));
       await userEvent.paste('Updated template name');
diff --git a/x-pack/plugins/cases/public/components/configure_cases/index.tsx b/x-pack/plugins/cases/public/components/configure_cases/index.tsx
index d26fe1ee185f8..61f99a46a0b08 100644
--- a/x-pack/plugins/cases/public/components/configure_cases/index.tsx
+++ b/x-pack/plugins/cases/public/components/configure_cases/index.tsx
@@ -484,7 +484,9 @@ export const ConfigureCases: React.FC = React.memo(() => {
         }
         onCloseFlyout={onCloseCustomFieldFlyout}
         onSaveField={onCustomFieldSave}
-        renderHeader={() => <span>{i18n.ADD_CUSTOM_FIELD}</span>}
+        renderHeader={() => (
+          <span>{customFieldToEdit ? i18n.EDIT_CUSTOM_FIELD : i18n.ADD_CUSTOM_FIELD} </span>
+        )}
       >
         {({ onChange }) => (
           <CustomFieldsForm onChange={onChange} initialValue={customFieldToEdit} />
@@ -504,7 +506,9 @@ export const ConfigureCases: React.FC = React.memo(() => {
         }
         onCloseFlyout={onCloseTemplateFlyout}
         onSaveField={onTemplateSave}
-        renderHeader={() => <span>{i18n.CREATE_TEMPLATE}</span>}
+        renderHeader={() => (
+          <span>{templateToEdit ? i18n.EDIT_TEMPLATE : i18n.CREATE_TEMPLATE}</span>
+        )}
       >
         {({ onChange }) => (
           <TemplateForm
diff --git a/x-pack/plugins/cases/public/components/configure_cases/translations.ts b/x-pack/plugins/cases/public/components/configure_cases/translations.ts
index 08c83c9564f1e..7a2e0e84b0306 100644
--- a/x-pack/plugins/cases/public/components/configure_cases/translations.ts
+++ b/x-pack/plugins/cases/public/components/configure_cases/translations.ts
@@ -168,6 +168,17 @@ export const ADD_CUSTOM_FIELD = i18n.translate(
   }
 );
 
+export const EDIT_CUSTOM_FIELD = i18n.translate(
+  'xpack.cases.configureCases.customFields.editCustomField',
+  {
+    defaultMessage: 'Edit field',
+  }
+);
+
 export const CREATE_TEMPLATE = i18n.translate('xpack.cases.configureCases.templates.flyoutTitle', {
-  defaultMessage: 'Create template',
+  defaultMessage: 'Add template',
+});
+
+export const EDIT_TEMPLATE = i18n.translate('xpack.cases.configureCases.templates.editTemplate', {
+  defaultMessage: 'Edit template',
 });