[Attack Discovery][Scheduling] Cases support followup 1 (#225452)

## Summary

Summarize your PR. If it involves visual changes include a screenshot or
gif.

These changes addresses the review comment from my previous PR
36ed6b38c1 (r2150081638)

Initially I broke up rendered component into multiple memoized
sub-sections. Reverting that back and adding tests coverage for the new
functionality - Case actions UI for the Attack Discovery rule type:
* Hidden `group by` component
* Hidden `time window` component
* Hidden `reopen case` component
* Disabled `template selector` component
* Tooltip explaining why we disabled the `template selector` component

x-pack/platform/plugins/shared/cases/public/components/system_actions/cases/cases_params.test.tsx

@@ -19,6 +19,7 @@ import { useGetAllCaseConfigurations } from '../../../containers/configure/use_g
 import { useGetAllCaseConfigurationsResponse } from '../../configure_cases/__mock__';
 import { templatesConfigurationMock } from '../../../containers/mock';
 import * as utils from '../../../containers/configure/utils';
+import { ATTACK_DISCOVERY_SCHEDULES_ALERT_TYPE_ID } from '@kbn/elastic-assistant-common';
 
 jest.mock('@kbn/alerts-ui-shared/src/common/hooks/use_alerts_data_view');
 jest.mock('../../../common/lib/kibana/use_application');
@@ -72,6 +73,7 @@ describe('CasesParamsFields renders', () => {
     // Workaround for timeout via https://github.com/testing-library/user-event/issues/833#issuecomment-1171452841
     user = userEvent.setup({
       advanceTimers: jest.advanceTimersByTime,
+      pointerEventsCheck: 0,
     });
     useApplicationMock.mockReturnValueOnce({ appId: 'management' });
     useAlertsDataViewMock.mockReturnValue({
@@ -397,4 +399,67 @@ describe('CasesParamsFields renders', () => {
       expect(editAction.mock.calls[0][1].reopenClosedCases).toEqual(true);
     });
   });
+
+  describe('Attack Discovery', () => {
+    it('does not render `group by` component', async () => {
+      const newProps = {
+        ...defaultProps,
+        ruleTypeId: ATTACK_DISCOVERY_SCHEDULES_ALERT_TYPE_ID,
+      };
+      render(<CasesParamsFields {...newProps} />);
+
+      expect(screen.queryByTestId('group-by-alert-field-combobox')).not.toBeInTheDocument();
+    });
+
+    it('does not render `time window` component', async () => {
+      const newProps = {
+        ...defaultProps,
+        ruleTypeId: ATTACK_DISCOVERY_SCHEDULES_ALERT_TYPE_ID,
+      };
+      render(<CasesParamsFields {...newProps} />);
+
+      expect(screen.queryByTestId('time-window-size-input')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('time-window-unit-select')).not.toBeInTheDocument();
+    });
+
+    it('does not render `reopen case` component', async () => {
+      const newProps = {
+        ...defaultProps,
+        ruleTypeId: ATTACK_DISCOVERY_SCHEDULES_ALERT_TYPE_ID,
+      };
+      render(<CasesParamsFields {...newProps} />);
+
+      expect(screen.queryByTestId('reopen-case')).not.toBeInTheDocument();
+    });
+
+    it('renders disabled `template selector` component', async () => {
+      const newProps = {
+        ...defaultProps,
+        ruleTypeId: ATTACK_DISCOVERY_SCHEDULES_ALERT_TYPE_ID,
+      };
+      render(<CasesParamsFields {...newProps} />);
+
+      const templateSelectorComponent = await screen.findByTestId('create-case-template-select');
+
+      expect(templateSelectorComponent).toBeInTheDocument();
+      expect(templateSelectorComponent).toBeDisabled();
+    });
+
+    it('shows attack discovery explanation tooltip', async () => {
+      const newProps = {
+        ...defaultProps,
+        ruleTypeId: ATTACK_DISCOVERY_SCHEDULES_ALERT_TYPE_ID,
+      };
+      render(<CasesParamsFields {...newProps} />);
+
+      await user.hover(await screen.findByTestId('create-case-template-select'));
+
+      expect(await screen.findByTestId('case-action-attack-discovery-tooltip')).toBeTruthy();
+      expect(
+        await screen.findByText(
+          'Attack Discovery Schedules fully manage Case actions, automatically filling in all fields for new Cases.'
+        )
+      ).toBeInTheDocument();
+    });
+  });
 });

x-pack/platform/plugins/shared/cases/public/components/system_actions/cases/cases_params.tsx

@@ -188,8 +188,26 @@ export const CasesParamsFieldsComponent: React.FunctionComponent<
     [editSubActionProperty]
   );
 
-  const groupByComponent = useMemo(() => {
+  if (isAttackDiscoveryRuleType) {
     return (
+      <EuiToolTip
+        data-test-subj="case-action-attack-discovery-tooltip"
+        content={i18n.ATTACK_DISCOVERY_TEMPLATE_TOOLTIP}
+      >
+        <TemplateSelector
+          key={currentConfiguration.id}
+          isLoading={isLoadingCaseConfiguration}
+          templates={[defaultTemplate, ...currentConfiguration.templates]}
+          onTemplateChange={onTemplateChange}
+          initialTemplate={selectedTemplate}
+          isDisabled={true}
+        />
+      </EuiToolTip>
+    );
+  }
+
+  return (
+    <>
       <EuiFlexGroup>
         <EuiFlexItem grow={true}>
           <EuiFormRow fullWidth label={i18n.GROUP_BY_ALERT} labelAppend={OptionalFieldLabel}>
@@ -207,12 +225,7 @@ export const CasesParamsFieldsComponent: React.FunctionComponent<
           </EuiFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
-    );
+      <EuiSpacer size="m" />
-  }, [loadingAlertDataViews, onChangeComboBox, options, selectedOptions]);
-
-  const timeWindowComponent = useMemo(() => {
-    return (
-      <>
       <EuiFormRow
         fullWidth
         id="timeWindow"
@@ -259,19 +272,7 @@ export const CasesParamsFieldsComponent: React.FunctionComponent<
           size="s"
         />
       )}
-      </>
+      <EuiSpacer size="m" />
-    );
-  }, [
-    errors.timeWindow,
-    handleTimeWindowChange,
-    showTimeWindowWarning,
-    timeWindow,
-    timeWindowSize,
-    timeWindowUnit,
-  ]);
-
-  const templateSelectorComponent = useMemo(() => {
-    return (
       <EuiFlexGroup>
         <EuiFlexItem grow={true}>
           <TemplateSelector
@@ -280,23 +281,10 @@ export const CasesParamsFieldsComponent: React.FunctionComponent<
             templates={[defaultTemplate, ...currentConfiguration.templates]}
             onTemplateChange={onTemplateChange}
             initialTemplate={selectedTemplate}
-            isDisabled={isAttackDiscoveryRuleType}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-    );
+      <EuiSpacer size="m" />
-  }, [
-    currentConfiguration.id,
-    currentConfiguration.templates,
-    defaultTemplate,
-    isAttackDiscoveryRuleType,
-    isLoadingCaseConfiguration,
-    onTemplateChange,
-    selectedTemplate,
-  ]);
-
-  const reopenClosedCasesComponent = useMemo(() => {
-    return (
       <EuiFlexGroup>
         <EuiFlexItem>
           <EuiCheckbox
@@ -310,26 +298,6 @@ export const CasesParamsFieldsComponent: React.FunctionComponent<
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-    );
-  }, [editSubActionProperty, index, reopenClosedCases]);
-
-  if (isAttackDiscoveryRuleType) {
-    return (
-      <EuiToolTip content={i18n.ATTACK_DISCOVERY_TEMPLATE_TOOLTIP}>
-        {templateSelectorComponent}
-      </EuiToolTip>
-    );
-  }
-
-  return (
-    <>
-      {groupByComponent}
-      <EuiSpacer size="m" />
-      {timeWindowComponent}
-      <EuiSpacer size="m" />
-      {templateSelectorComponent}
-      <EuiSpacer size="m" />
-      {reopenClosedCasesComponent}
     </>
   );
 };