[Cases] Use templates when creating a case

x-pack/plugins/cases/common/ui/types.ts

@@ -130,7 +130,6 @@ export type CasesConfigurationUI = Pick<
 >;
 
 export type CasesConfigurationUICustomField = CasesConfigurationUI['customFields'][number];
-
 export type CasesConfigurationUITemplate = CasesConfigurationUI['templates'][number];
 
 export type SortOrder = 'asc' | 'desc';

x-pack/plugins/cases/public/components/create/assignees.test.tsx → x-pack/plugins/cases/public/components/case_form_fields/assignees.test.tsx

@@ -15,7 +15,6 @@ import type { FormHook } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_l
 import { useForm, Form } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
 import { userProfiles } from '../../containers/user_profiles/api.mock';
 import { Assignees } from './assignees';
-import type { FormProps } from './schema';
 import { act, waitFor, screen } from '@testing-library/react';
 import * as api from '../../containers/user_profiles/api';
 import type { UserProfile } from '@kbn/user-profile-components';
@@ -29,7 +28,7 @@ describe('Assignees', () => {
   let appMockRender: AppMockRenderer;
 
   const MockHookWrapperComponent: FC<PropsWithChildren<unknown>> = ({ children }) => {
-    const { form } = useForm<FormProps>();
+    const { form } = useForm();
     globalForm = form;
 
     return <Form form={form}>{children}</Form>;

x-pack/plugins/cases/public/components/create/assignees.tsx → x-pack/plugins/cases/public/components/case_form_fields/assignees.tsx

@@ -29,8 +29,8 @@ import { MAX_ASSIGNEES_PER_CASE } from '../../../common/constants';
 import { useSuggestUserProfiles } from '../../containers/user_profiles/use_suggest_user_profiles';
 import { useCasesContext } from '../cases_context/use_cases_context';
 import { useGetCurrentUserProfile } from '../../containers/user_profiles/use_get_current_user_profile';
-import { OptionalFieldLabel } from './optional_field_label';
-import * as i18n from './translations';
+import { OptionalFieldLabel } from '../optional_field_label';
+import * as i18n from '../create/translations';
 import { bringCurrentUserToFrontAndSort } from '../user_profiles/sort';
 import { useAvailableCasesOwners } from '../app/use_available_owners';
 import { getAllPermissionsExceptFrom } from '../../utils/permissions';
@@ -40,14 +40,14 @@ interface Props {
   isLoading: boolean;
 }
 
+type UserProfileComboBoxOption = EuiComboBoxOptionOption<string> & UserProfileWithAvatar;
+
 interface FieldProps {
-  field: FieldHook;
-  options: EuiComboBoxOptionOption[];
+  field: FieldHook<CaseAssignees>;
+  options: UserProfileComboBoxOption[];
   isLoading: boolean;
   isDisabled: boolean;
   currentUserProfile?: UserProfile;
-  selectedOptions: EuiComboBoxOptionOption[];
-  setSelectedOptions: React.Dispatch<React.SetStateAction<EuiComboBoxOptionOption[]>>;
   onSearchComboChange: (value: string) => void;
 }
 
@@ -73,91 +73,84 @@ const userProfileToComboBoxOption = (userProfile: UserProfileWithAvatar) => ({
   data: userProfile.data,
 });
 
-const comboBoxOptionToAssignee = (option: EuiComboBoxOptionOption) => ({ uid: option.value });
+const comboBoxOptionToAssignee = (option: EuiComboBoxOptionOption<string>) => ({
+  uid: option.value ?? '',
+});
 
 const AssigneesFieldComponent: React.FC<FieldProps> = React.memo(
-  ({
-    field,
-    isLoading,
-    isDisabled,
-    options,
-    currentUserProfile,
-    selectedOptions,
-    setSelectedOptions,
-    onSearchComboChange,
-  }) => {
-    const { setValue } = field;
+  ({ field, isLoading, isDisabled, options, currentUserProfile, onSearchComboChange }) => {
+    const { setValue, value: selectedAssignees } = field;
     const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
 
+    const selectedOptions: UserProfileComboBoxOption[] = selectedAssignees
+      .map(({ uid }) => {
+        const selectedUserProfile = options.find((userProfile) => userProfile.key === uid);
+
+        if (selectedUserProfile) {
+          return selectedUserProfile;
+        }
+
+        return null;
+      })
+      .filter((value): value is UserProfileComboBoxOption => value != null);
+
     const onComboChange = useCallback(
-      (currentOptions: EuiComboBoxOptionOption[]) => {
-        setSelectedOptions(currentOptions);
+      (currentOptions: Array<EuiComboBoxOptionOption<string>>) => {
         setValue(currentOptions.map((option) => comboBoxOptionToAssignee(option)));
       },
-      [setSelectedOptions, setValue]
+      [setValue]
     );
 
     const onSelfAssign = useCallback(() => {
       if (!currentUserProfile) {
         return;
       }
 
-      setSelectedOptions((prev) => [
-        ...(prev ?? []),
-        userProfileToComboBoxOption(currentUserProfile),
-      ]);
-
-      setValue([
-        ...(selectedOptions?.map((option) => comboBoxOptionToAssignee(option)) ?? []),
-        { uid: currentUserProfile.uid },
-      ]);
-    }, [currentUserProfile, selectedOptions, setSelectedOptions, setValue]);
+      setValue([...selectedAssignees, { uid: currentUserProfile.uid }]);
+    }, [currentUserProfile, selectedAssignees, setValue]);
 
-    const renderOption = useCallback(
-      (option: EuiComboBoxOptionOption, searchValue: string, contentClassName: string) => {
-        const { user, data } = option as EuiComboBoxOptionOption<string> & UserProfileWithAvatar;
+    const renderOption = useCallback((option, searchValue: string, contentClassName: string) => {
+      const { user, data } = option as UserProfileComboBoxOption;
 
-        const displayName = getUserDisplayName(user);
+      const displayName = getUserDisplayName(user);
 
-        return (
+      return (
+        <EuiFlexGroup
+          alignItems="center"
+          justifyContent="flexStart"
+          gutterSize="s"
+          responsive={false}
+        >
+          <EuiFlexItem grow={false}>
+            <UserAvatar user={user} avatar={data.avatar} size="s" />
+          </EuiFlexItem>
           <EuiFlexGroup
             alignItems="center"
-            justifyContent="flexStart"
-            gutterSize="s"
+            justifyContent="spaceBetween"
+            gutterSize="none"
             responsive={false}
           >
-            <EuiFlexItem grow={false}>
-              <UserAvatar user={user} avatar={data.avatar} size="s" />
+            <EuiFlexItem>
+              <EuiHighlight search={searchValue} className={contentClassName}>
+                {displayName}
+              </EuiHighlight>
             </EuiFlexItem>
-            <EuiFlexGroup
-              alignItems="center"
-              justifyContent="spaceBetween"
-              gutterSize="none"
-              responsive={false}
-            >
-              <EuiFlexItem>
-                <EuiHighlight search={searchValue} className={contentClassName}>
-                  {displayName}
-                </EuiHighlight>
+            {user.email && user.email !== displayName ? (
+              <EuiFlexItem grow={false}>
+                <EuiTextColor color={'subdued'}>
+                  <EuiHighlight search={searchValue} className={contentClassName}>
+                    {user.email}
+                  </EuiHighlight>
+                </EuiTextColor>
               </EuiFlexItem>
-              {user.email && user.email !== displayName ? (
-                <EuiFlexItem grow={false}>
-                  <EuiTextColor color={'subdued'}>
-                    <EuiHighlight search={searchValue} className={contentClassName}>
-                      {user.email}
-                    </EuiHighlight>
-                  </EuiTextColor>
-                </EuiFlexItem>
-              ) : null}
-            </EuiFlexGroup>
+            ) : null}
           </EuiFlexGroup>
-        );
-      },
-      []
-    );
+        </EuiFlexGroup>
+      );
+    }, []);
 
     const isCurrentUserSelected = Boolean(
-      selectedOptions?.find((option) => option.value === currentUserProfile?.uid)
+      selectedAssignees?.find((assignee) => assignee.uid === currentUserProfile?.uid)
     );
 
     return (
@@ -204,7 +197,6 @@ const AssigneesComponent: React.FC<Props> = ({ isLoading: isLoadingForm }) => {
   const { owner: owners } = useCasesContext();
   const availableOwners = useAvailableCasesOwners(getAllPermissionsExceptFrom('delete'));
   const [searchTerm, setSearchTerm] = useState('');
-  const [selectedOptions, setSelectedOptions] = useState<EuiComboBoxOptionOption[]>();
   const { isUserTyping, onContentChange, onDebounce } = useIsUserTyping();
   const hasOwners = owners.length > 0;
 
@@ -251,8 +243,6 @@ const AssigneesComponent: React.FC<Props> = ({ isLoading: isLoadingForm }) => {
       componentProps={{
         isLoading,
         isDisabled,
-        selectedOptions,
-        setSelectedOptions,
         options,
         onSearchComboChange,
         currentUserProfile,

x-pack/plugins/cases/public/components/create/category.test.tsx → x-pack/plugins/cases/public/components/case_form_fields/category.test.tsx

@@ -11,7 +11,6 @@ import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { useForm, Form } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
-import type { FormProps } from './schema';
 import type { AppMockRenderer } from '../../common/mock';
 import { createAppMockRenderer } from '../../common/mock';
 import { Category } from './category';
@@ -28,7 +27,7 @@ describe('Category', () => {
   const onSubmit = jest.fn();
 
   const FormComponent: FC<PropsWithChildren<unknown>> = ({ children }) => {
-    const { form } = useForm<FormProps>({ onSubmit });
+    const { form } = useForm({ onSubmit });
 
     return (
       <Form form={form}>

x-pack/plugins/cases/public/components/create/category.tsx → x-pack/plugins/cases/public/components/case_form_fields/category.tsx

@@ -8,7 +8,7 @@
 import React, { memo } from 'react';
 import { useGetCategories } from '../../containers/use_get_categories';
 import { CategoryFormField } from '../category/category_form_field';
-import { OptionalFieldLabel } from './optional_field_label';
+import { OptionalFieldLabel } from '../optional_field_label';
 
 interface Props {
   isLoading: boolean;

x-pack/plugins/cases/public/components/create/connector.test.tsx → x-pack/plugins/cases/public/components/case_form_fields/connector.test.tsx

@@ -20,8 +20,8 @@ import { useGetIncidentTypes } from '../connectors/resilient/use_get_incident_ty
 import { useGetSeverity } from '../connectors/resilient/use_get_severity';
 import { useGetChoices } from '../connectors/servicenow/use_get_choices';
 import { incidentTypes, severity, choices } from '../connectors/mock';
-import type { FormProps } from './schema';
-import { schema } from './schema';
+import type { CreateCaseFormSchema } from '../create/schema';
+import { schema } from '../create/schema';
 import type { AppMockRenderer } from '../../common/mock';
 import {
   noConnectorsCasePermission,
@@ -60,14 +60,15 @@ const defaultProps = {
   connectors: connectorsMock,
   isLoading: false,
   isLoadingConnectors: false,
+  configurationConnector: useCaseConfigureResponse.data.connector,
 };
 
 describe('Connector', () => {
   let appMockRender: AppMockRenderer;
   let globalForm: FormHook;
 
   const MockHookWrapperComponent: FC<PropsWithChildren<unknown>> = ({ children }) => {
-    const { form } = useForm<FormProps>({
+    const { form } = useForm<CreateCaseFormSchema>({
       defaultValue: { connectorId: connectorsMock[0].id, fields: null },
       schema: {
         connectorId: schema.connectorId,

x-pack/plugins/cases/public/components/create/connector.tsx → x-pack/plugins/cases/public/components/case_form_fields/connector.tsx

@@ -5,35 +5,41 @@
  * 2.0.
  */
 
-import React, { memo, useMemo } from 'react';
+import React, { memo, useEffect, useMemo } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 
 import type { FieldConfig } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
-import { UseField, useFormData } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
+import {
+  UseField,
+  useFormData,
+  useFormContext,
+} from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
 import type { ActionConnector } from '../../../common/types/domain';
 import { ConnectorSelector } from '../connector_selector/form';
 import { ConnectorFieldsForm } from '../connectors/fields_form';
-import { schema } from './schema';
-import { useGetCaseConfiguration } from '../../containers/configure/use_get_case_configuration';
+import { schema } from '../create/schema';
 import { getConnectorById, getConnectorsFormValidators } from '../utils';
 import { useApplicationCapabilities } from '../../common/lib/kibana';
 import * as i18n from '../../common/translations';
 import { useCasesContext } from '../cases_context/use_cases_context';
+import type { CasesConfigurationUI } from '../../containers/types';
 
 interface Props {
   connectors: ActionConnector[];
   isLoading: boolean;
   isLoadingConnectors: boolean;
+  configurationConnector: CasesConfigurationUI['connector'];
 }
 
-const ConnectorComponent: React.FC<Props> = ({ connectors, isLoading, isLoadingConnectors }) => {
+const ConnectorComponent: React.FC<Props> = ({
+  connectors,
+  isLoading,
+  isLoadingConnectors,
+  configurationConnector,
+}) => {
   const [{ connectorId }] = useFormData({ watch: ['connectorId'] });
+  const { setFieldValue } = useFormContext();
   const connector = getConnectorById(connectorId, connectors) ?? null;
-
-  const {
-    data: { connector: configurationConnector },
-  } = useGetCaseConfiguration();
-
   const { actions } = useApplicationCapabilities();
   const { permissions } = useCasesContext();
   const hasReadPermissions = permissions.connectors && actions.read;
@@ -49,6 +55,10 @@ const ConnectorComponent: React.FC<Props> = ({ connectors, isLoading, isLoadingC
     connectors,
   });
 
+  useEffect(() => {
+    setFieldValue('connectorId', configurationConnector.id);
+  }, [configurationConnector.id, setFieldValue]);
+
   if (!hasReadPermissions) {
     return (
       <EuiText data-test-subj="create-case-connector-permissions-error-msg" size="s">

x-pack/plugins/cases/public/components/case_form_fields/custom_fields.tsx

@@ -15,13 +15,13 @@ import * as i18n from './translations';
 
 interface Props {
   isLoading: boolean;
-  setCustomFieldsOptional: boolean;
   configurationCustomFields: CasesConfigurationUI['customFields'];
+  setCustomFieldsOptional?: boolean;
 }
 
 const CustomFieldsComponent: React.FC<Props> = ({
   isLoading,
-  setCustomFieldsOptional,
+  setCustomFieldsOptional = false,
   configurationCustomFields,
 }) => {
   const sortedCustomFields = useMemo(

x-pack/plugins/cases/public/components/create/description.test.tsx → x-pack/plugins/cases/public/components/case_form_fields/description.test.tsx

@@ -10,7 +10,7 @@ import { waitFor, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Description } from './description';
-import { schema } from './schema';
+import { schema } from '../create/schema';
 import type { AppMockRenderer } from '../../common/mock';
 import { createAppMockRenderer } from '../../common/mock';
 import { MAX_DESCRIPTION_LENGTH } from '../../../common/constants';

x-pack/plugins/cases/public/components/case_form_fields/index.tsx

@@ -7,13 +7,13 @@
 
 import React, { memo } from 'react';
 import { EuiFlexGroup } from '@elastic/eui';
-import { Title } from '../create/title';
-import { Tags } from '../create/tags';
-import { Category } from '../create/category';
-import { Severity } from '../create/severity';
-import { Description } from '../create/description';
+import { Title } from './title';
+import { Tags } from './tags';
+import { Category } from './category';
+import { Severity } from './severity';
+import { Description } from './description';
 import { useCasesFeatures } from '../../common/use_cases_features';
-import { Assignees } from '../create/assignees';
+import { Assignees } from './assignees';
 import { CustomFields } from './custom_fields';
 import type { CasesConfigurationUI } from '../../containers/types';
 
@@ -33,17 +33,11 @@ const CaseFormFieldsComponent: React.FC<Props> = ({
   return (
     <EuiFlexGroup data-test-subj="case-form-fields" direction="column">
       <Title isLoading={isLoading} />
-
       {caseAssignmentAuthorized ? <Assignees isLoading={isLoading} /> : null}
-
       <Tags isLoading={isLoading} />
-
       <Category isLoading={isLoading} />
-
       <Severity isLoading={isLoading} />
-
       <Description isLoading={isLoading} />
-
       <CustomFields
         isLoading={isLoading}
         setCustomFieldsOptional={setCustomFieldsOptional}