From 0776378477a5fa781cf9227b1934d4dbbe837184 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Mon, 7 Oct 2024 22:47:38 +1100
Subject: [PATCH] [8.x] [ResponseOps][Cases] Design Review changes PR 2
 (#194681) (#195205)
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 2
(#194681)](https://github.com/elastic/kibana/pull/194681)

<!--- 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-07T09:47:40Z","message":"[ResponseOps][Cases]
Design Review changes PR 2 (#194681)\n\n## Summary\r\n\r\nConnects to
https://github.com/elastic/kibana/issues/188187 \r\n\r\n- the \"add
template\" button is now hidden once the user reaches the\r\nlimit of 10
templates and the message is displayed in a subdued color to\r\ninform
the user that the limit has been reached.\r\n\r\n![Screenshot 2024-10-03
at 13
47\r\n32](https://github.com/user-attachments/assets/42622eff-2582-41e6-9318-18126e477f12)\r\n\r\n-
same applies to custom fields\r\n\r\n![Screenshot 2024-10-03 at 13
52\r\n20](https://github.com/user-attachments/assets/b0f13235-4345-45f1-b772-0cc5ccc771bb)","sha":"d5e2afdeee9a48d2da763fc6e300723cb855b953","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
2","number":194681,"url":"https://github.com/elastic/kibana/pull/194681","mergeCommit":{"message":"[ResponseOps][Cases]
Design Review changes PR 2 (#194681)\n\n## Summary\r\n\r\nConnects to
https://github.com/elastic/kibana/issues/188187 \r\n\r\n- the \"add
template\" button is now hidden once the user reaches the\r\nlimit of 10
templates and the message is displayed in a subdued color to\r\ninform
the user that the limit has been reached.\r\n\r\n![Screenshot 2024-10-03
at 13
47\r\n32](https://github.com/user-attachments/assets/42622eff-2582-41e6-9318-18126e477f12)\r\n\r\n-
same applies to custom fields\r\n\r\n![Screenshot 2024-10-03 at 13
52\r\n20](https://github.com/user-attachments/assets/b0f13235-4345-45f1-b772-0cc5ccc771bb)","sha":"d5e2afdeee9a48d2da763fc6e300723cb855b953"}},"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/194681","number":194681,"mergeCommit":{"message":"[ResponseOps][Cases]
Design Review changes PR 2 (#194681)\n\n## Summary\r\n\r\nConnects to
https://github.com/elastic/kibana/issues/188187 \r\n\r\n- the \"add
template\" button is now hidden once the user reaches the\r\nlimit of 10
templates and the message is displayed in a subdued color to\r\ninform
the user that the limit has been reached.\r\n\r\n![Screenshot 2024-10-03
at 13
47\r\n32](https://github.com/user-attachments/assets/42622eff-2582-41e6-9318-18126e477f12)\r\n\r\n-
same applies to custom fields\r\n\r\n![Screenshot 2024-10-03 at 13
52\r\n20](https://github.com/user-attachments/assets/b0f13235-4345-45f1-b772-0cc5ccc771bb)","sha":"d5e2afdeee9a48d2da763fc6e300723cb855b953"}},{"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/custom_fields/index.test.tsx   |  5 +--
 .../public/components/custom_fields/index.tsx | 40 +++++++++----------
 .../components/templates/index.test.tsx       |  4 +-
 .../public/components/templates/index.tsx     | 38 +++++++++---------
 4 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/x-pack/plugins/cases/public/components/custom_fields/index.test.tsx b/x-pack/plugins/cases/public/components/custom_fields/index.test.tsx
index 26ee9b8476da6..fc6c774c20b0c 100644
--- a/x-pack/plugins/cases/public/components/custom_fields/index.test.tsx
+++ b/x-pack/plugins/cases/public/components/custom_fields/index.test.tsx
@@ -97,13 +97,12 @@ describe('CustomFields', () => {
         required: false,
       });
     }
+
     const customFields = [...customFieldsConfigurationMock, ...generatedMockCustomFields];
 
     appMockRender.render(<CustomFields {...{ ...props, customFields }} />);
 
-    await userEvent.click(await screen.findByTestId('add-custom-field'));
-
     expect(await screen.findByText(i18n.MAX_CUSTOM_FIELD_LIMIT(MAX_CUSTOM_FIELDS_PER_CASE)));
-    expect(await screen.findByTestId('add-custom-field')).toHaveAttribute('disabled');
+    expect(screen.queryByTestId('add-custom-field')).not.toBeInTheDocument();
   });
 });
diff --git a/x-pack/plugins/cases/public/components/custom_fields/index.tsx b/x-pack/plugins/cases/public/components/custom_fields/index.tsx
index 3c754d39a63fb..d749a7aba9bea 100644
--- a/x-pack/plugins/cases/public/components/custom_fields/index.tsx
+++ b/x-pack/plugins/cases/public/components/custom_fields/index.tsx
@@ -80,18 +80,9 @@ const CustomFieldsComponent: React.FC<Props> = ({
               onDeleteCustomField={handleDeleteCustomField}
               onEditCustomField={onEditCustomField}
             />
-            {error ? (
-              <EuiFlexGroup justifyContent="center">
-                <EuiFlexItem grow={false}>
-                  <EuiText color="danger">
-                    {i18n.MAX_CUSTOM_FIELD_LIMIT(MAX_CUSTOM_FIELDS_PER_CASE)}
-                  </EuiText>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            ) : null}
           </>
         ) : null}
-        <EuiSpacer size="m" />
+        <EuiSpacer size="s" />
         {!customFields.length ? (
           <EuiFlexGroup justifyContent="center">
             <EuiFlexItem grow={false} data-test-subj="empty-custom-fields">
@@ -102,18 +93,27 @@ const CustomFieldsComponent: React.FC<Props> = ({
         ) : null}
         <EuiFlexGroup justifyContent="center">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              isLoading={isLoading}
-              isDisabled={disabled || error}
-              size="s"
-              onClick={onAddCustomField}
-              iconType="plusInCircle"
-              data-test-subj="add-custom-field"
-            >
-              {i18n.ADD_CUSTOM_FIELD}
-            </EuiButtonEmpty>
+            {customFields.length < MAX_CUSTOM_FIELDS_PER_CASE ? (
+              <EuiButtonEmpty
+                isLoading={isLoading}
+                isDisabled={disabled || error}
+                size="s"
+                onClick={onAddCustomField}
+                iconType="plusInCircle"
+                data-test-subj="add-custom-field"
+              >
+                {i18n.ADD_CUSTOM_FIELD}
+              </EuiButtonEmpty>
+            ) : (
+              <EuiFlexGroup justifyContent="center">
+                <EuiFlexItem grow={false}>
+                  <EuiText>{i18n.MAX_CUSTOM_FIELD_LIMIT(MAX_CUSTOM_FIELDS_PER_CASE)}</EuiText>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            )}
           </EuiFlexItem>
         </EuiFlexGroup>
+        <EuiSpacer size="s" />
       </EuiPanel>
     </EuiDescribedFormGroup>
   ) : null;
diff --git a/x-pack/plugins/cases/public/components/templates/index.test.tsx b/x-pack/plugins/cases/public/components/templates/index.test.tsx
index 1c7b6cc3ff0e6..7fcb563a54dde 100644
--- a/x-pack/plugins/cases/public/components/templates/index.test.tsx
+++ b/x-pack/plugins/cases/public/components/templates/index.test.tsx
@@ -130,9 +130,7 @@ describe('Templates', () => {
 
     appMockRender.render(<Templates {...{ ...props, templates: mockTemplates }} />);
 
-    await userEvent.click(await screen.findByTestId('add-template'));
-
     expect(await screen.findByText(i18n.MAX_TEMPLATE_LIMIT(MAX_TEMPLATES_LENGTH)));
-    expect(await screen.findByTestId('add-template')).toHaveAttribute('disabled');
+    expect(screen.queryByTestId('add-template')).not.toBeInTheDocument();
   });
 });
diff --git a/x-pack/plugins/cases/public/components/templates/index.tsx b/x-pack/plugins/cases/public/components/templates/index.tsx
index 3be2bf92411a9..479101d2889ad 100644
--- a/x-pack/plugins/cases/public/components/templates/index.tsx
+++ b/x-pack/plugins/cases/public/components/templates/index.tsx
@@ -92,16 +92,9 @@ const TemplatesComponent: React.FC<Props> = ({
               onEditTemplate={handleEditTemplate}
               onDeleteTemplate={handleDeleteTemplate}
             />
-            {error ? (
-              <EuiFlexGroup justifyContent="center">
-                <EuiFlexItem grow={false}>
-                  <EuiText color="danger">{i18n.MAX_TEMPLATE_LIMIT(MAX_TEMPLATES_LENGTH)}</EuiText>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            ) : null}
           </>
         ) : null}
-        <EuiSpacer size="m" />
+        <EuiSpacer size="s" />
         {!templates.length ? (
           <EuiFlexGroup justifyContent="center">
             <EuiFlexItem grow={false} data-test-subj="empty-templates">
@@ -113,16 +106,25 @@ const TemplatesComponent: React.FC<Props> = ({
         {canAddTemplates ? (
           <EuiFlexGroup justifyContent="center">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                isLoading={isLoading}
-                isDisabled={disabled || error}
-                size="s"
-                onClick={handleAddTemplate}
-                iconType="plusInCircle"
-                data-test-subj="add-template"
-              >
-                {i18n.ADD_TEMPLATE}
-              </EuiButtonEmpty>
+              {templates.length < MAX_TEMPLATES_LENGTH ? (
+                <EuiButtonEmpty
+                  isLoading={isLoading}
+                  isDisabled={disabled || error}
+                  size="s"
+                  onClick={handleAddTemplate}
+                  iconType="plusInCircle"
+                  data-test-subj="add-template"
+                >
+                  {i18n.ADD_TEMPLATE}
+                </EuiButtonEmpty>
+              ) : (
+                <EuiFlexGroup justifyContent="center">
+                  <EuiFlexItem grow={false}>
+                    <EuiText>{i18n.MAX_TEMPLATE_LIMIT(MAX_TEMPLATES_LENGTH)}</EuiText>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              )}
+              <EuiSpacer size="s" />
             </EuiFlexItem>
           </EuiFlexGroup>
         ) : null}