[Cases] Use templates when creating a case

x-pack/plugins/cases/common/constants/owners.ts

@@ -56,8 +56,8 @@ export const OWNER_INFO: Record<Owner, RouteInfo> = {
   [GENERAL_CASES_OWNER]: {
     id: GENERAL_CASES_OWNER,
     appId: 'management',
-    label: 'Stack',
-    iconType: 'casesApp',
+    label: 'Management',
+    iconType: 'managementApp',
     appRoute: '/app/management/insightsAndAlerting',
     validRuleConsumers: [AlertConsumers.ML, AlertConsumers.STACK_ALERTS, AlertConsumers.EXAMPLE],
   },

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

@@ -40,113 +40,99 @@ describe('Assignees', () => {
   });
 
   it('renders', async () => {
-    const result = appMockRender.render(
+    appMockRender.render(
       <MockHookWrapperComponent>
         <Assignees isLoading={false} />
       </MockHookWrapperComponent>
     );
 
     await waitFor(() => {
-      expect(result.getByTestId('comboBoxSearchInput')).not.toBeDisabled();
+      expect(screen.queryByTestId('comboBoxSearchInput')).not.toBeDisabled();
     });
 
-    expect(result.getByTestId('createCaseAssigneesComboBox')).toBeInTheDocument();
+    expect(await screen.findByTestId('createCaseAssigneesComboBox')).toBeInTheDocument();
   });
 
   it('does not render the assign yourself link when the current user profile is undefined', async () => {
     const spyOnGetCurrentUserProfile = jest.spyOn(api, 'getCurrentUserProfile');
     spyOnGetCurrentUserProfile.mockResolvedValue(undefined as unknown as UserProfile);
 
-    const result = appMockRender.render(
+    appMockRender.render(
       <MockHookWrapperComponent>
         <Assignees isLoading={false} />
       </MockHookWrapperComponent>
     );
 
     await waitFor(() => {
-      expect(result.getByTestId('comboBoxSearchInput')).not.toBeDisabled();
+      expect(screen.queryByTestId('comboBoxSearchInput')).not.toBeDisabled();
     });
 
-    expect(result.queryByTestId('create-case-assign-yourself-link')).not.toBeInTheDocument();
-    expect(result.getByTestId('createCaseAssigneesComboBox')).toBeInTheDocument();
+    expect(screen.queryByTestId('create-case-assign-yourself-link')).not.toBeInTheDocument();
+    expect(await screen.findByTestId('createCaseAssigneesComboBox')).toBeInTheDocument();
   });
 
   it('selects the current user correctly', async () => {
     const spyOnGetCurrentUserProfile = jest.spyOn(api, 'getCurrentUserProfile');
     spyOnGetCurrentUserProfile.mockResolvedValue(currentUserProfile);
 
-    const result = appMockRender.render(
+    appMockRender.render(
       <MockHookWrapperComponent>
         <Assignees isLoading={false} />
       </MockHookWrapperComponent>
     );
 
     await waitFor(() => {
-      expect(result.getByTestId('comboBoxSearchInput')).not.toBeDisabled();
+      expect(screen.queryByTestId('comboBoxSearchInput')).not.toBeDisabled();
     });
 
-    act(() => {
-      userEvent.click(result.getByTestId('create-case-assign-yourself-link'));
-    });
+    userEvent.click(await screen.findByTestId('create-case-assign-yourself-link'));
 
-    await waitFor(() => {
-      expect(globalForm.getFormData()).toEqual({ assignees: [{ uid: currentUserProfile.uid }] });
-    });
+    expect(globalForm.getFormData()).toEqual({ assignees: [{ uid: currentUserProfile.uid }] });
   });
 
   it('disables the assign yourself button if the current user is already selected', async () => {
     const spyOnGetCurrentUserProfile = jest.spyOn(api, 'getCurrentUserProfile');
     spyOnGetCurrentUserProfile.mockResolvedValue(currentUserProfile);
 
-    const result = appMockRender.render(
+    appMockRender.render(
       <MockHookWrapperComponent>
         <Assignees isLoading={false} />
       </MockHookWrapperComponent>
     );
 
     await waitFor(() => {
-      expect(result.getByTestId('comboBoxSearchInput')).not.toBeDisabled();
+      expect(screen.queryByTestId('comboBoxSearchInput')).not.toBeDisabled();
     });
 
-    act(() => {
-      userEvent.click(result.getByTestId('create-case-assign-yourself-link'));
-    });
+    userEvent.click(await screen.findByTestId('create-case-assign-yourself-link'));
 
     await waitFor(() => {
       expect(globalForm.getFormData()).toEqual({ assignees: [{ uid: currentUserProfile.uid }] });
     });
 
-    expect(result.getByTestId('create-case-assign-yourself-link')).toBeDisabled();
+    expect(await screen.findByTestId('create-case-assign-yourself-link')).toBeDisabled();
   });
 
   it('assignees users correctly', async () => {
-    const result = appMockRender.render(
+    appMockRender.render(
       <MockHookWrapperComponent>
         <Assignees isLoading={false} />
       </MockHookWrapperComponent>
     );
 
     await waitFor(() => {
-      expect(result.getByTestId('comboBoxSearchInput')).not.toBeDisabled();
+      expect(screen.queryByTestId('comboBoxSearchInput')).not.toBeDisabled();
     });
 
-    await act(async () => {
-      await userEvent.type(result.getByTestId('comboBoxSearchInput'), 'dr', { delay: 1 });
-    });
+    await userEvent.type(await screen.findByTestId('comboBoxSearchInput'), 'dr', { delay: 1 });
 
-    await waitFor(() => {
-      expect(
-        result.getByTestId('comboBoxOptionsList createCaseAssigneesComboBox-optionsList')
-      ).toBeInTheDocument();
-    });
+    expect(
+      await screen.findByTestId('comboBoxOptionsList createCaseAssigneesComboBox-optionsList')
+    ).toBeInTheDocument();
 
-    await waitFor(async () => {
-      expect(result.getByText(`${currentUserProfile.user.full_name}`)).toBeInTheDocument();
-    });
+    expect(await screen.findByText(`${currentUserProfile.user.full_name}`)).toBeInTheDocument();
 
-    act(() => {
-      userEvent.click(result.getByText(`${currentUserProfile.user.full_name}`));
-    });
+    userEvent.click(await screen.findByText(`${currentUserProfile.user.full_name}`));
 
     await waitFor(() => {
       expect(globalForm.getFormData()).toEqual({ assignees: [{ uid: currentUserProfile.uid }] });
@@ -185,25 +171,62 @@ describe('Assignees', () => {
     );
 
     await waitFor(() => {
-      expect(screen.getByTestId('comboBoxSearchInput')).not.toBeDisabled();
+      expect(screen.queryByTestId('comboBoxSearchInput')).not.toBeDisabled();
     });
 
+    userEvent.click(await screen.findByTestId('comboBoxSearchInput'));
+
+    expect(await screen.findByText('Turtle')).toBeInTheDocument();
+    expect(await screen.findByText('turtle')).toBeInTheDocument();
+
+    userEvent.click(screen.getByText('Turtle'), undefined, { skipPointerEventsCheck: true });
+
+    // ensure that the similar user is still available for selection
+    expect(await screen.findByText('turtle')).toBeInTheDocument();
+  });
+
+  it('fetches the unknown user profiles using bulk_get', async () => {
+    // the profile is not returned by the suggest API
+    const userProfile = {
+      uid: 'u_qau3P4T1H-_f1dNHyEOWJzVkGQhLH1gnNMVvYxqmZcs_0',
+      enabled: true,
+      data: {},
+      user: {
+        username: 'uncertain_crawdad',
+        email: '[email protected]',
+        full_name: 'Uncertain Crawdad',
+      },
+    };
+
+    const spyOnBulkGetUserProfiles = jest.spyOn(api, 'bulkGetUserProfiles');
+    spyOnBulkGetUserProfiles.mockResolvedValue([userProfile]);
+
+    appMockRender.render(
+      <MockHookWrapperComponent>
+        <Assignees isLoading={false} />
+      </MockHookWrapperComponent>
+    );
+
+    expect(screen.queryByText(userProfile.user.full_name)).not.toBeInTheDocument();
+
     act(() => {
-      userEvent.click(screen.getByTestId('comboBoxSearchInput'));
+      globalForm.setFieldValue('assignees', [{ uid: userProfile.uid }]);
     });
 
     await waitFor(() => {
-      expect(screen.getByText('Turtle')).toBeInTheDocument();
-      expect(screen.getByText('turtle')).toBeInTheDocument();
+      expect(globalForm.getFormData()).toEqual({
+        assignees: [{ uid: userProfile.uid }],
+      });
     });
 
-    act(() => {
-      userEvent.click(screen.getByText('Turtle'), undefined, { skipPointerEventsCheck: true });
-    });
-
-    // ensure that the similar user is still available for selection
     await waitFor(() => {
-      expect(screen.getByText('turtle')).toBeInTheDocument();
+      expect(spyOnBulkGetUserProfiles).toBeCalledTimes(1);
+      expect(spyOnBulkGetUserProfiles).toHaveBeenCalledWith({
+        security: expect.anything(),
+        uids: [userProfile.uid],
+      });
     });
+
+    expect(await screen.findByText(userProfile.user.full_name)).toBeInTheDocument();
   });
 });

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { isEmpty } from 'lodash';
+import { isEmpty, differenceWith } from 'lodash';
 import React, { memo, useCallback, useState } from 'react';
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
 import {
@@ -23,18 +23,22 @@ import type { FieldConfig, FieldHook } from '@kbn/es-ui-shared-plugin/static/for
 import {
   UseField,
   getFieldValidityAndErrorMessage,
+  useFormData,
 } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
 import type { CaseAssignees } from '../../../common/types/domain';
 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';
 import { useIsUserTyping } from '../../common/use_is_user_typing';
+import { useBulkGetUserProfiles } from '../../containers/user_profiles/use_bulk_get_user_profiles';
+
+const FIELD_ID = 'assignees';
 
 interface Props {
   isLoading: boolean;
@@ -172,6 +176,7 @@ const AssigneesFieldComponent: React.FC<FieldProps> = React.memo(
         }
         isInvalid={isInvalid}
         error={errorMessage}
+        data-test-subj="caseAssignees"
       >
         <EuiComboBox
           fullWidth
@@ -195,6 +200,7 @@ AssigneesFieldComponent.displayName = 'AssigneesFieldComponent';
 
 const AssigneesComponent: React.FC<Props> = ({ isLoading: isLoadingForm }) => {
   const { owner: owners } = useCasesContext();
+  const [{ assignees }] = useFormData<{ assignees?: CaseAssignees }>({ watch: [FIELD_ID] });
   const availableOwners = useAvailableCasesOwners(getAllPermissionsExceptFrom('delete'));
   const [searchTerm, setSearchTerm] = useState('');
   const { isUserTyping, onContentChange, onDebounce } = useIsUserTyping();
@@ -204,7 +210,7 @@ const AssigneesComponent: React.FC<Props> = ({ isLoading: isLoadingForm }) => {
     useGetCurrentUserProfile();
 
   const {
-    data: userProfiles,
+    data: userProfiles = [],
     isLoading: isLoadingSuggest,
     isFetching: isFetchingSuggest,
   } = useSuggestUserProfiles({
@@ -213,10 +219,22 @@ const AssigneesComponent: React.FC<Props> = ({ isLoading: isLoadingForm }) => {
     onDebounce,
   });
 
+  const assigneesWithoutProfiles = differenceWith(
+    assignees ?? [],
+    userProfiles ?? [],
+    (assignee, userProfile) => assignee.uid === userProfile.uid
+  );
+
+  const { data: bulkUserProfiles = new Map(), isFetching: isLoadingBulkGetUserProfiles } =
+    useBulkGetUserProfiles({ uids: assigneesWithoutProfiles.map((assignee) => assignee.uid) });
+
+  const bulkUserProfilesAsArray = Array.from(bulkUserProfiles).map(([_, profile]) => profile);
+
   const options =
-    bringCurrentUserToFrontAndSort(currentUserProfile, userProfiles)?.map((userProfile) =>
-      userProfileToComboBoxOption(userProfile)
-    ) ?? [];
+    bringCurrentUserToFrontAndSort(currentUserProfile, [
+      ...userProfiles,
+      ...bulkUserProfilesAsArray,
+    ])?.map((userProfile) => userProfileToComboBoxOption(userProfile)) ?? [];
 
   const onSearchComboChange = (value: string) => {
     if (!isEmpty(value)) {
@@ -229,15 +247,16 @@ const AssigneesComponent: React.FC<Props> = ({ isLoading: isLoadingForm }) => {
   const isLoading =
     isLoadingForm ||
     isLoadingCurrentUserProfile ||
+    isLoadingBulkGetUserProfiles ||
     isLoadingSuggest ||
     isFetchingSuggest ||
     isUserTyping;
 
-  const isDisabled = isLoadingForm || isLoadingCurrentUserProfile;
+  const isDisabled = isLoadingForm || isLoadingCurrentUserProfile || isLoadingBulkGetUserProfiles;
 
   return (
     <UseField
-      path="assignees"
+      path={FIELD_ID}
       config={getConfig()}
       component={AssigneesFieldComponent}
       componentProps={{

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;