Bug/12035 not possible to delete a data model in studio

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

@@ -6,7 +6,7 @@ import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
 import { act, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import { textMock } from '../../../../testing/mocks/i18nMock';
 import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
-import { datamodelNameMock } from 'app-shared/mocks/datamodelMetadataMocks';
+import { datamodelNameMock, jsonMetadataMock } from 'app-shared/mocks/datamodelMetadataMocks';
 import userEvent from '@testing-library/user-event';
 import { dataMock } from '@altinn/schema-editor/mockData';
 import { AUTOSAVE_DEBOUNCE_INTERVAL_MILLISECONDS } from 'app-shared/constants';
@@ -17,7 +17,7 @@ import { createApiErrorMock } from 'app-shared/mocks/apiErrorMock';
 const user = userEvent.setup();
 
 // Test data:
-const modelPath = datamodelNameMock;
+const modelPath = jsonMetadataMock.repositoryRelativeUrl;
 const defaultProps: SelectedSchemaEditorProps = {
   modelPath,
 };
@@ -36,6 +36,10 @@ jest.mock('@altinn/schema-editor/SchemaEditorApp', () => ({
 }));
 jest.useFakeTimers({ advanceTimers: true });
 
+jest.mock('../../../utils/metadataUtils', () => ({
+  mergeJsonAndXsdData: jest.fn().mockImplementation(() => [jsonMetadataMock]),
+}));
+
 describe('SelectedSchemaEditor', () => {
   it('Displays loading spinner while loading', () => {
     render();
@@ -72,6 +76,7 @@ describe('SelectedSchemaEditor', () => {
     const getDatamodel = jest.fn().mockImplementation(() => Promise.resolve(dataMock));
 
     render({ getDatamodel, saveDatamodel });
+
     await waitForElementToBeRemoved(() => screen.queryByTitle(textMock('general.loading')));
 
     const button = screen.getByTestId(saveButtonTestId);
@@ -83,30 +88,29 @@ describe('SelectedSchemaEditor', () => {
     expect(saveDatamodel).toHaveBeenCalledWith(org, app, modelPath, dataMock);
   });
 
-  it('Autosaves when changing between models that are not present in the cache', async () => {
+  test('Autosaves when changing between models that are not present in the cache', async () => {
     const saveDatamodel = jest.fn();
+    const queryClient = createQueryClientMock();
+    queryClient.setQueryData([QueryKey.JsonSchema, org, app, modelPath], dataMock);
     const getDatamodel = jest.fn().mockImplementation(() => Promise.resolve(dataMock));
     const {
       renderResult: { rerender },
     } = render({ getDatamodel, saveDatamodel });
     await waitForElementToBeRemoved(() => screen.queryByTitle(textMock('general.loading')));
     expect(saveDatamodel).not.toHaveBeenCalled();
 
-    const updatedProps = {
-      ...defaultProps,
-      modelPath: 'newModel',
-    };
+    const updatedProps = { ...defaultProps, modelPath: 'newModel' };
     rerender(<SelectedSchemaEditor {...updatedProps} />);
     jest.advanceTimersByTime(AUTOSAVE_DEBOUNCE_INTERVAL_MILLISECONDS);
     await waitFor(() => expect(saveDatamodel).toHaveBeenCalledTimes(1));
-    expect(saveDatamodel).toHaveBeenCalledWith(org, app, datamodelNameMock, dataMock);
+    expect(saveDatamodel).toHaveBeenCalledWith(org, app, modelPath, dataMock);
   });
 
   it('Autosaves when changing between models that are already present in the cache', async () => {
     const saveDatamodel = jest.fn();
     const queryClient = createQueryClientMock();
     const newModelPath = 'newModel';
-    queryClient.setQueryData([QueryKey.JsonSchema, org, app, datamodelNameMock], dataMock);
+    queryClient.setQueryData([QueryKey.JsonSchema, org, app, modelPath], dataMock);
     queryClient.setQueryData([QueryKey.JsonSchema, org, app, newModelPath], dataMock);
     const {
       renderResult: { rerender },
@@ -120,7 +124,23 @@ describe('SelectedSchemaEditor', () => {
     rerender(<SelectedSchemaEditor {...updatedProps} />);
     jest.advanceTimersByTime(AUTOSAVE_DEBOUNCE_INTERVAL_MILLISECONDS);
     await waitFor(() => expect(saveDatamodel).toHaveBeenCalledTimes(1));
-    expect(saveDatamodel).toHaveBeenCalledWith(org, app, datamodelNameMock, dataMock);
+    expect(saveDatamodel).toHaveBeenCalledWith(org, app, modelPath, dataMock);
+  });
+
+  test('Does not save the datamodel when unmounting if the datamodel has been deleted', async () => {
+    const saveDatamodel = jest.fn();
+    const queryClient = createQueryClientMock();
+    const datamodelMetadataList = jest.fn().mockImplementation(() => [
+      {
+        ...jsonMetadataMock,
+        repositoryRelativeUrl: modelPath,
+      },
+    ]);
+    queryClient.setQueryData([QueryKey.JsonSchema, org, app, datamodelNameMock], dataMock);
+    queryClient.setQueryData([QueryKey.DatamodelsJson, org, app], datamodelMetadataList);
+    render({ saveDatamodel });
+    queryClient.setQueryData([QueryKey.DatamodelsJson, org, app], []);
+    expect(saveDatamodel).not.toHaveBeenCalled();
   });
 });
 

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

@@ -8,8 +8,14 @@ import { useTranslation } from 'react-i18next';
 import { AUTOSAVE_DEBOUNCE_INTERVAL_MILLISECONDS } from 'app-shared/constants';
 import type { JsonSchema } from 'app-shared/types/JsonSchema';
 import { useOnUnmount } from 'app-shared/hooks/useOnUnmount';
+import type { DatamodelMetadataJson, DatamodelMetadataXsd } from 'app-shared/types/DatamodelMetadata';
+import { useQueryClient } from '@tanstack/react-query';
+import { QueryKey } from 'app-shared/types/QueryKey';
+import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
+import { mergeJsonAndXsdData } from 'app-development/utils/metadataUtils';
 import { extractFilename, removeSchemaExtension } from 'app-shared/utils/filenameUtils';
 
+
 export interface SelectedSchemaEditorProps {
   modelPath: string;
 }
@@ -46,7 +52,9 @@ interface SchemaEditorWithDebounceProps {
 }
 
 const SchemaEditorWithDebounce = ({ jsonSchema, modelPath }: SchemaEditorWithDebounceProps) => {
+  const { org, app } = useStudioUrlParams();
   const { mutate } = useSchemaMutation();
+  const queryClient = useQueryClient();
   const [model, setModel] = useState<JsonSchema>(jsonSchema);
   const saveTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
   const updatedModel = useRef<JsonSchema>(jsonSchema);
@@ -70,7 +78,21 @@ const SchemaEditorWithDebounce = ({ jsonSchema, modelPath }: SchemaEditorWithDeb
 
   useOnUnmount(() => {
     clearTimeout(saveTimeoutRef.current);
-    saveFunction();
+    const jsonModels: DatamodelMetadataJson[] = queryClient.getQueryData([
+      QueryKey.DatamodelsJson,
+      org,
+      app,
+    ]);
+    const xsdModels: DatamodelMetadataXsd[] = queryClient.getQueryData([
+      QueryKey.DatamodelsXsd,
+      org,
+      app,
+    ]);
+    const metadataList = mergeJsonAndXsdData(jsonModels, xsdModels);
+    const datamodelExists = metadataList.some(
+      (datamodel) => datamodel.repositoryRelativeUrl === modelPath,
+    );
+    if (datamodelExists) saveFunction();
   });
 
   return (

frontend/app-development/hooks/mutations/useDeleteDatamodelMutation.test.ts

@@ -0,0 +1,89 @@
+import { renderHookWithMockStore } from '../../test/mocks';
+import { removeDatamodelFromList, useDeleteDatamodelMutation } from './useDeleteDatamodelMutation';
+import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
+import type { QueryClient } from '@tanstack/react-query';
+import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
+import { jsonSchemaMock } from '../../test/jsonSchemaMock';
+import { waitFor } from '@testing-library/react';
+import { QueryKey } from 'app-shared/types/QueryKey';
+import { DatamodelMetadata } from 'app-shared/types/DatamodelMetadata';
+
+const DatamodelMetadata = jest.fn();
+const modelPath = 'modelPath';
+const org = 'org';
+const app = 'app';
+const initialData: DatamodelMetadata[] = [
+  {
+    description: null,
+    directory: 'directory',
+    fileName: 'fileName',
+    filePath: 'filePath',
+    fileStatus: 'fileStatus',
+    fileType: '.json',
+    lastChanged: 'lastChanged',
+    repositoryRelativeUrl: 'repositoryRelativeUrl',
+    select: true,
+  },
+];
+
+describe('useDeleteDatamodelMutation', () => {
+  beforeEach(jest.clearAllMocks);
+
+  it('Returns correct state with the correct parameters', async () => {
+    const queryClient = createQueryClientMock();
+    const deleteDatamodel = jest.fn();
+    const {
+      renderHookResult: { result },
+    } = render({ deleteDatamodel });
+    result.current.mutate({ modelPath, model: jsonSchemaMock });
+    await waitFor(() => result.current.isPending);
+    expect(
+      queryClient.setQueryData(
+        [QueryKey.DatamodelsJson, org, app],
+        (oldData: DatamodelMetadata[] = initialData) => removeDatamodelFromList(oldData, modelPath),
+      ),
+    ).toEqual(initialData);
+    expect(
+      queryClient.setQueryData(
+        [QueryKey.DatamodelsXsd, org, app],
+        (oldData: DatamodelMetadata[] = initialData) => removeDatamodelFromList(oldData, modelPath),
+      ),
+    ).toEqual(initialData);
+    await waitFor(() => result.current.isSuccess);
+    expect(removeDatamodelFromList).toHaveBeenCalled;
+  });
+
+  it('Calls onSuccess correctly', async () => {
+    const queryClient = createQueryClientMock();
+    const deleteDatamodel = jest.fn();
+    const {
+      renderHookResult: { result },
+    } = render({ deleteDatamodel });
+    result.current.mutate({ modelPath, model: jsonSchemaMock });
+    await waitFor(() => result.current.isSuccess);
+    queryClient.setQueryData([QueryKey.DatamodelsJson, org, app], initialData);
+    queryClient.setQueryData([QueryKey.DatamodelsXsd, org, app], initialData);
+    result.current.mutate({ modelPath, model: jsonSchemaMock });
+    await waitFor(() => result.current.isSuccess);
+    expect(
+      queryClient.setQueryData(
+        [QueryKey.DatamodelsJson, org, app],
+        (oldData: DatamodelMetadata[] = initialData) => removeDatamodelFromList(oldData, modelPath),
+      ),
+    ).toEqual(initialData);
+    expect(
+      queryClient.setQueryData(
+        [QueryKey.DatamodelsXsd, org, app],
+        (oldData: DatamodelMetadata[] = initialData) => removeDatamodelFromList(oldData, modelPath),
+      ),
+    ).toEqual(initialData);
+    expect(
+      queryClient.removeQueries({ queryKey: [QueryKey.JsonSchema, org, app, modelPath] }),
+    ).toEqual(undefined);
+  });
+});
+
+const render = (
+  queries: Partial<ServicesContextProps> = {},
+  queryClient: QueryClient = createQueryClientMock(),
+) => renderHookWithMockStore({}, queries, queryClient)(() => useDeleteDatamodelMutation());

frontend/app-development/hooks/mutations/useDeleteDatamodelMutation.ts

@@ -3,26 +3,44 @@ import { useServicesContext } from 'app-shared/contexts/ServicesContext';
 import { QueryKey } from 'app-shared/types/QueryKey';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
 import { isXsdFile } from 'app-shared/utils/filenameUtils';
+import type { DatamodelMetadata } from 'app-shared/types/DatamodelMetadata';
 
 export const useDeleteDatamodelMutation = () => {
   const { deleteDatamodel } = useServicesContext();
   const { org, app } = useStudioUrlParams();
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async (modelPath: string) => {
-      await deleteDatamodel(org, app, modelPath);
+      queryClient.setQueryData(
+        [QueryKey.DatamodelsJson, org, app],
+        (oldData: DatamodelMetadata[]) => removeDatamodelFromList(oldData, modelPath),
+      );
+      queryClient.setQueryData([QueryKey.DatamodelsXsd, org, app], (oldData: DatamodelMetadata[]) =>
+        removeDatamodelFromList(oldData, modelPath),
+      );
       const respectiveFileNameInXsdOrJson = isXsdFile(modelPath)
         ? modelPath.replace('.xsd', '.schema.json')
         : modelPath.replace('.schema.json', '.xsd');
-      queryClient.setQueryData([QueryKey.JsonSchema, org, app, modelPath], undefined);
+      queryClient.removeQueries({
+        queryKey: [QueryKey.JsonSchema, org, app, respectiveFileNameInXsdOrJson],
+      });
+      await deleteDatamodel(org, app, modelPath);
+    },
+    onSuccess: (data, variables) => {
       queryClient.setQueryData(
-        [QueryKey.JsonSchema, org, app, respectiveFileNameInXsdOrJson],
-        undefined,
+        [QueryKey.DatamodelsJson, org, app],
+        (oldData: DatamodelMetadata[]) => removeDatamodelFromList(oldData, variables),
       );
-      await Promise.all([
-        queryClient.invalidateQueries({ queryKey: [QueryKey.DatamodelsJson, org, app] }),
-        queryClient.invalidateQueries({ queryKey: [QueryKey.DatamodelsXsd, org, app] }),
-      ]);
+      queryClient.setQueryData([QueryKey.DatamodelsXsd, org, app], (oldData: DatamodelMetadata[]) =>
+        removeDatamodelFromList(oldData, variables),
+      );
+      queryClient.removeQueries({ queryKey: [QueryKey.JsonSchema, org, app, variables] });
     },
   });
 };
+
+export const removeDatamodelFromList = (
+  datamodels: DatamodelMetadata[],
+  relativeUrl: string,
+): DatamodelMetadata[] =>
+  datamodels.filter((datamodel) => datamodel.repositoryRelativeUrl !== relativeUrl);