[ResponseOps][Cases] Design Review changes PR 2 (elastic#194681)

## Summary

Connects to elastic#188187

- the "add template" button is now hidden once the user reaches the
limit of 10 templates and the message is displayed in a subdued color to
inform the user that the limit has been reached.

![Screenshot 2024-10-03 at 13 47
32](https://github.com/user-attachments/assets/42622eff-2582-41e6-9318-18126e477f12)

- same applies to custom fields

![Screenshot 2024-10-03 at 13 52
20](https://github.com/user-attachments/assets/b0f13235-4345-45f1-b772-0cc5ccc771bb)

(cherry picked from commit d5e2afd)

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();
   });
 });

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;

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();
   });
 });

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}