[8.x] [ResponseOps][Cases]Design Review changes PR 3 (elastic#194936) (…

…elastic#195408)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ResponseOps][Cases]Design Review changes PR 3
(elastic#194936)](elastic#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":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-08T13:10:24Z","message":"[ResponseOps][Cases]Design
Review changes PR 3 (elastic#194936)\n\n## Summary\r\n\r\nCloses
elastic#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 (elastic#194936)\n\n## Summary\r\n\r\nCloses
elastic#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 (elastic#194936)\n\n## Summary\r\n\r\nCloses
elastic#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ță <[email protected]>

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

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

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