[ResponseOps][Cases]Add the no template selected option (#187552)

## Summary This PR adds a "No template selected" option in the Template Selection component in the Case Creation Page
elastic · Jul 4, 2024 · 05c7a19 · 05c7a19
1 parent 4e31327
commit 05c7a19
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 4 deletions.
diff --git a/x-pack/plugins/cases/public/components/create/form.test.tsx b/x-pack/plugins/cases/public/components/create/form.test.tsx
@@ -24,7 +24,7 @@ import { useAvailableCasesOwners } from '../app/use_available_owners';
 import type { AppMockRenderer } from '../../common/mock';
 import { createAppMockRenderer } from '../../common/mock';
 import userEvent from '@testing-library/user-event';
-import { CustomFieldTypes } from '../../../common/types/domain';
+import { ConnectorTypes, CustomFieldTypes } from '../../../common/types/domain';
 import { useSuggestUserProfiles } from '../../containers/user_profiles/use_suggest_user_profiles';
 import { useGetCurrentUserProfile } from '../../containers/user_profiles/use_get_current_user_profile';
 import { userProfiles } from '../../containers/user_profiles/api.mock';
@@ -334,5 +334,73 @@ describe('CreateCaseForm', () => {
 
       expect(await screen.findByText('No connector selected')).toBeInTheDocument();
     });
+
+    it('selects the placeholder empty template correctly', async () => {
+      useGetAllCaseConfigurationsMock.mockReturnValue({
+        ...useGetAllCaseConfigurationsResponse,
+        data: [
+          {
+            ...useGetAllCaseConfigurationsResponse.data[0],
+            customFields: [
+              {
+                key: 'first_custom_field_key',
+                type: CustomFieldTypes.TEXT,
+                required: false,
+                label: 'My test label 1',
+                defaultValue: 'custom field default value',
+              },
+            ],
+            templates: templatesConfigurationMock,
+            connector: {
+              id: 'servicenow-1',
+              name: 'My SN connector',
+              type: ConnectorTypes.serviceNowITSM,
+              fields: null,
+            },
+          },
+        ],
+      });
+
+      const license = licensingMock.createLicense({
+        license: { type: 'platinum' },
+      });
+      const firstTemplate = templatesConfigurationMock[4];
+
+      appMockRenderer = createAppMockRenderer({ license });
+      appMockRenderer.render(<CreateCaseForm {...casesFormProps} />);
+
+      userEvent.selectOptions(
+        await screen.findByTestId('create-case-template-select'),
+        firstTemplate.name
+      );
+
+      const title = within(await screen.findByTestId('caseTitle')).getByTestId('input');
+      const description = within(await screen.findByTestId('caseDescription')).getByRole('textbox');
+      const tags = within(await screen.findByTestId('caseTags')).getByTestId('comboBoxInput');
+      const category = within(await screen.findByTestId('caseCategory')).getByTestId(
+        'comboBoxSearchInput'
+      );
+      const assignees = within(await screen.findByTestId('caseAssignees')).getByTestId(
+        'comboBoxSearchInput'
+      );
+      const severity = await screen.findByTestId('case-severity-selection');
+      const customField = await screen.findByTestId(
+        'first_custom_field_key-text-create-custom-field'
+      );
+
+      userEvent.selectOptions(
+        await screen.findByTestId('create-case-template-select'),
+        'No template selected'
+      );
+
+      expect(title).not.toHaveValue();
+      expect(description).not.toHaveValue();
+      expect(tags).not.toHaveValue();
+      expect(category).not.toHaveValue();
+      expect(severity).toHaveTextContent('Low');
+      expect(assignees).not.toHaveValue();
+      expect(customField).toHaveValue('custom field default value');
+      expect(await screen.findByText('My SN connector')).toBeInTheDocument();
+    });
   });
 });
diff --git a/x-pack/plugins/cases/public/components/create/form_fields.tsx b/x-pack/plugins/cases/public/components/create/form_fields.tsx
@@ -45,6 +45,8 @@ const transformTemplateCaseFieldsToCaseFormFields = (
   return getInitialCaseValue({ owner, ...caseFields });
 };
 
+const DEFAULT_EMPTY_TEMPLATE_KEY = 'defaultEmptyTemplateKey';
+
 export const CreateCaseFormFields: React.FC<CreateCaseFormFieldsProps> = React.memo(
   ({ configuration, connectors, isLoading, withSteps, draftStorageKey }) => {
     const { reset, updateFieldValues, isSubmitting, setFieldValue } = useFormContext();
@@ -61,6 +63,18 @@ export const CreateCaseFormFields: React.FC<CreateCaseFormFieldsProps> = React.m
       setFieldValue('connectorId', configuration.connector.id);
     }, [configuration.connector.id, setFieldValue]);
 
+    const defaultTemplate = useMemo(
+      () => ({
+        key: DEFAULT_EMPTY_TEMPLATE_KEY,
+        name: i18n.DEFAULT_EMPTY_TEMPLATE_NAME,
+        caseFields: getInitialCaseValue({
+          owner: configurationOwner,
+          connector: configuration.connector,
+        }),
+      }),
+      [configurationOwner, configuration.connector]
+    );
+
     const onTemplateChange = useCallback(
       (caseFields: CasesConfigurationUITemplate['caseFields']) => {
         const caseFormFields = transformTemplateCaseFieldsToCaseFormFields(
@@ -83,12 +97,12 @@ export const CreateCaseFormFields: React.FC<CreateCaseFormFieldsProps> = React.m
         children: (
           <TemplateSelector
             isLoading={isSubmitting || isLoading}
-            templates={configuration.templates}
+            templates={[defaultTemplate, ...configuration.templates]}
             onTemplateChange={onTemplateChange}
           />
         ),
       }),
-      [configuration.templates, isLoading, isSubmitting, onTemplateChange]
+      [configuration.templates, defaultTemplate, isLoading, isSubmitting, onTemplateChange]
     );
 
     const secondStep = useMemo(

diff --git a/x-pack/plugins/cases/public/components/create/templates.tsx b/x-pack/plugins/cases/public/components/create/templates.tsx
@@ -57,7 +57,6 @@ export const TemplateSelectorComponent: React.FC<Props> = ({
         isLoading={isLoading}
         data-test-subj="create-case-template-select"
         fullWidth
-        hasNoInitialSelection
         value={selectedTemplate}
       />
     </EuiFormRow>

diff --git a/x-pack/plugins/cases/public/components/create/translations.ts b/x-pack/plugins/cases/public/components/create/translations.ts
@@ -61,3 +61,10 @@ export const TEMPLATE_HELP_TEXT = i18n.translate('xpack.cases.create.templateHel
 export const SOLUTION_SELECTOR_LABEL = i18n.translate('xpack.cases.create.solutionSelectorLabel', {
   defaultMessage: 'Create case under:',
 });
+
+export const DEFAULT_EMPTY_TEMPLATE_NAME = i18n.translate(
+  'xpack.cases.create.defaultEmptyTemplateName',
+  {
+    defaultMessage: 'No template selected',
+  }
+);