fix: Validation when creating a new data model

frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/SchemaEditorWithToolbar.tsx

@@ -18,7 +18,7 @@ export const SchemaEditorWithToolbar = ({
   createPathOption,
   dataModels,
 }: SchemaEditorWithToolbarProps) => {
-  const [createNewOpen, setCreateNewOpen] = useState<boolean>(false);
+  const [isCreateNewOpen, setIsCreateNewOpen] = useState<boolean>(false);
   const [selectedOption, setSelectedOption] = useState<MetadataOption | undefined>(undefined);
   const [schemaGenerationErrorMessages, setSchemaGenerationErrorMessages] = useState<string[]>([]);
   const { mutate: addXsdFromRepo } = useAddXsdMutation();
@@ -41,11 +41,11 @@ export const SchemaEditorWithToolbar = ({
   return (
     <div className={classes.root}>
       <TopToolbar
-        createNewOpen={createNewOpen}
+        isCreateNewOpen={isCreateNewOpen}
         createPathOption={createPathOption}
         dataModels={dataModels}
         selectedOption={existingSelectedOption}
-        setCreateNewOpen={setCreateNewOpen}
+        setIsCreateNewOpen={setIsCreateNewOpen}
         setSelectedOption={setSelectedOption}
         onSetSchemaGenerationErrorMessages={(errorMessages: string[]) =>
           setSchemaGenerationErrorMessages(errorMessages)
@@ -58,7 +58,7 @@ export const SchemaEditorWithToolbar = ({
         />
       )}
       <main className={classes.main}>
-        {!dataModels.length && <LandingPagePanel openCreateNew={() => setCreateNewOpen(true)} />}
+        {!dataModels.length && <LandingPagePanel openCreateNew={() => setIsCreateNewOpen(true)} />}
         {modelPath && <SelectedSchemaEditor modelPath={modelPath} />}
       </main>
     </div>

frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/CreateNewWrapper.test.tsx

@@ -11,151 +11,141 @@ import {
 import { renderWithProviders } from '../../../../test/testUtils';
 import { app, org } from '@studio/testing/testids';
 import { APP_DEVELOPMENT_BASENAME } from 'app-shared/constants';
-import { QueryKey } from 'app-shared/types/QueryKey';
 import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
+import { useCreateDataModelMutation } from '../../../../hooks/mutations';
 
 // Test data:
-const handleCreateSchema = jest.fn();
-const setCreateNewOpen = jest.fn();
+const mockSetIsCreateNewOpen = jest.fn();
 const defaultProps: CreateNewWrapperProps = {
-  createNewOpen: false,
+  isCreateNewOpen: false,
   dataModels: [],
   disabled: false,
-  handleCreateSchema,
-  setCreateNewOpen,
+  setIsCreateNewOpen: mockSetIsCreateNewOpen,
 };
+const mockCreateDataModel = jest.fn();
+
+jest.mock('../../../../hooks/mutations', () => ({
+  useCreateDataModelMutation: jest.fn(),
+}));
 
 describe('CreateNewWrapper', () => {
+  beforeEach(() => {
+    (useCreateDataModelMutation as jest.Mock).mockReturnValue({ mutate: mockCreateDataModel });
+  });
+
   afterEach(jest.clearAllMocks);
 
   it('should open the popup when clicking "new" button', async () => {
     const user = userEvent.setup();
     render();
 
-    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
-    expect(
-      screen.queryByRole('button', {
-        name: textMock('schema_editor.create_model_confirm_button'),
-      }),
-    ).not.toBeInTheDocument();
+    expect(queryInputField()).not.toBeInTheDocument();
+    expect(queryConfirmButton()).not.toBeInTheDocument();
 
-    const newButton = screen.getByRole('button', {
-      name: textMock('general.create_new'),
-    });
-    await user.click(newButton);
+    await user.click(getNewButton());
 
-    expect(setCreateNewOpen).toHaveBeenCalledTimes(1);
-    expect(setCreateNewOpen).toHaveBeenCalledWith(true);
+    expect(mockSetIsCreateNewOpen).toHaveBeenCalledTimes(1);
+    expect(mockSetIsCreateNewOpen).toHaveBeenCalledWith(true);
   });
 
   it('should close the popup when clicking "new" button', async () => {
     const user = userEvent.setup();
-    render({ createNewOpen: true });
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
-    expect(okButton()).toBeInTheDocument();
+    render({ isCreateNewOpen: true });
 
-    const newButton = screen.getByRole('button', {
-      name: textMock('general.create_new'),
-    });
+    expect(queryInputField()).toBeInTheDocument();
+    expect(queryConfirmButton()).toBeInTheDocument();
+
+    await user.click(getNewButton());
 
-    await user.click(newButton);
-    expect(setCreateNewOpen).toHaveBeenCalledTimes(1);
-    expect(setCreateNewOpen).toHaveBeenCalledWith(false);
+    expect(mockSetIsCreateNewOpen).toHaveBeenCalledTimes(1);
+    expect(mockSetIsCreateNewOpen).toHaveBeenCalledWith(false);
   });
 
-  describe('createAction', () => {
-    it('should call handleCreateSchema callback when ok button is clicked', async () => {
+  it('should show error when validation fails', async () => {
+    const user = userEvent.setup();
+    const newModelName = dataModel1NameMock;
+    const errorMessage = textMock('schema_editor.error_model_name_exists', { newModelName });
+    render({ isCreateNewOpen: true, dataModels: [jsonMetadata1Mock] });
+
+    expect(screen.queryByText(errorMessage)).not.toBeInTheDocument();
+
+    await user.type(queryInputField(), newModelName);
+
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    expect(queryConfirmButton()).toBeDisabled();
+  });
+
+  describe('createDataModel', () => {
+    it('should call createDataModel when confirm button is clicked', async () => {
       const user = userEvent.setup();
-      render({ createNewOpen: true });
+      render({ isCreateNewOpen: true });
 
-      const textInput = screen.getByRole('textbox');
-      await user.type(textInput, 'new-model');
-      await user.click(okButton());
-      expect(handleCreateSchema).toHaveBeenCalledWith({
+      await user.type(queryInputField(), 'new-model');
+      await user.click(queryConfirmButton());
+
+      expect(mockCreateDataModel).toHaveBeenCalledWith({
         name: 'new-model',
         relativePath: undefined,
       });
     });
 
-    it('should call handleCreateSchema callback when input is focused and Enter key is pressed', async () => {
+    it('should call createDataModel when input is focused and Enter key is pressed', async () => {
       const user = userEvent.setup();
-      render({ createNewOpen: true });
-
-      const textInput = screen.getByRole('textbox');
+      render({ isCreateNewOpen: true });
 
-      await user.type(textInput, 'new-model');
+      await user.type(queryInputField(), 'new-model');
       await user.keyboard('{Enter}');
-      expect(handleCreateSchema).toHaveBeenCalledWith({
+
+      expect(mockCreateDataModel).toHaveBeenCalledWith({
         name: 'new-model',
         relativePath: undefined,
       });
     });
 
-    it('should call handleCreateSchema callback with relativePath when createPathOption is set and ok button is clicked', async () => {
+    it('should call createDataModel with relativePath when createPathOption is set and ok button is clicked', async () => {
       const user = userEvent.setup();
-      render({ createNewOpen: true, createPathOption: true });
+      render({ isCreateNewOpen: true, createPathOption: true });
 
-      const textInput = screen.getByRole('textbox');
-      await user.type(textInput, 'new-model');
-      await user.click(okButton());
-      expect(handleCreateSchema).toHaveBeenCalledWith({
+      await user.type(queryInputField(), 'new-model');
+      await user.click(queryConfirmButton());
+
+      expect(mockCreateDataModel).toHaveBeenCalledWith({
         name: 'new-model',
         relativePath: '',
       });
     });
 
-    it('should not call handleCreateSchema callback and show error message when trying to create a new model with the same name as an existing one when ok button is clicked', async () => {
-      const user = userEvent.setup();
-      const newModelName = dataModel1NameMock;
-      const errMessage = textMock('schema_editor.error_model_name_exists', { newModelName });
-      render({ createNewOpen: true, dataModels: [jsonMetadata1Mock] });
-
-      const textInput = screen.getByRole('textbox');
-
-      expect(screen.queryByText(errMessage)).not.toBeInTheDocument();
-      await user.type(textInput, newModelName);
-
-      expect(okButton()).toBeDisabled();
-      expect(handleCreateSchema).not.toHaveBeenCalled();
-      expect(screen.getByText(errMessage)).toBeInTheDocument();
-    });
-
-    it('should not call handleCreateSchema callback when trying to create a new model with no name when ok button is clicked', async () => {
+    it('should not call createDataModel when name field is empty and ok button is clicked', async () => {
       const userWithNoPointerEventCheck = userEvent.setup({
         pointerEventsCheck: PointerEventsCheckLevel.Never,
       });
-      render({ createNewOpen: true, dataModels: [jsonMetadata1Mock] });
+      render({ isCreateNewOpen: true, dataModels: [jsonMetadata1Mock] });
 
-      await userWithNoPointerEventCheck.click(okButton());
+      await userWithNoPointerEventCheck.click(queryConfirmButton());
 
-      expect(handleCreateSchema).not.toHaveBeenCalled();
+      expect(mockCreateDataModel).not.toHaveBeenCalled();
     });
 
-    it('should not allow a name already in use in applicationmetadata json file', async () => {
-      const user = userEvent.setup();
-
-      const dataTypeName = 'testmodel';
-      const queryClient = createQueryClientMock();
-      queryClient.setQueryData([QueryKey.AppMetadata, org, app], {
-        dataTypes: [{ id: dataTypeName }],
+    it('should not call createDataModel when name field is empty and enter button is pressed', async () => {
+      const userWithNoPointerEventCheck = userEvent.setup({
+        pointerEventsCheck: PointerEventsCheckLevel.Never,
       });
-      render({ createNewOpen: true, dataModels: [jsonMetadata1Mock] }, queryClient);
+      render({ isCreateNewOpen: true, dataModels: [jsonMetadata1Mock] });
 
-      await user.type(screen.getByRole('textbox'), dataTypeName);
-      expect(
-        screen.getByText(textMock('schema_editor.error_data_type_name_exists')),
-      ).toBeInTheDocument();
+      await userWithNoPointerEventCheck.keyboard('{Enter}');
 
-      expect(okButton()).toBeDisabled();
+      expect(mockCreateDataModel).not.toHaveBeenCalled();
     });
   });
 });
 
-const okButton = () => {
-  return screen.getByRole('button', {
-    name: textMock('schema_editor.create_model_confirm_button'),
-  });
-};
+const getNewButton = () => screen.getByRole('button', { name: textMock('general.create_new') });
+
+const queryInputField = () =>
+  screen.queryByRole('textbox', { name: textMock('schema_editor.create_model_description') });
+
+const queryConfirmButton = () =>
+  screen.queryByRole('button', { name: textMock('schema_editor.create_model_confirm_button') });
 
 const render = (
   props: Partial<CreateNewWrapperProps> = {},