Add latest changes from gitlab-org/gitlab@master

3 files changed, 184 insertions, 9 deletions

diff --git a/spec/frontend/drawio/content_editor_facade_spec.js b/spec/frontend/drawio/content_editor_facade_spec.js
new file mode 100644
index 00000000000..673968bac9f
--- /dev/null
+++ b/spec/frontend/drawio/content_editor_facade_spec.js
@@ -0,0 +1,138 @@
+import AxiosMockAdapter from 'axios-mock-adapter';
+import { create } from '~/drawio/content_editor_facade';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
+import DrawioDiagram from '~/content_editor/extensions/drawio_diagram';
+import axios from '~/lib/utils/axios_utils';
+import { PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML } from '../content_editor/test_constants';
+import { createTestEditor } from '../content_editor/test_utils';
+
+describe('drawio/contentEditorFacade', () => {
+  let tiptapEditor;
+  let axiosMock;
+  let contentEditorFacade;
+  let assetResolver;
+  const imageURL = '/group1/project1/-/wikis/test-file.drawio.svg';
+  const diagramSvg = '<svg></svg>';
+  const contentType = 'image/svg+xml';
+  const filename = 'test-file.drawio.svg';
+  const uploadsPath = '/uploads';
+  const canonicalSrc = '/new-diagram.drawio.svg';
+  const src = `/uploads${canonicalSrc}`;
+
+  beforeEach(() => {
+    assetResolver = {
+      resolveUrl: jest.fn(),
+    };
+    tiptapEditor = createTestEditor({ extensions: [DrawioDiagram] });
+    contentEditorFacade = create({
+      tiptapEditor,
+      drawioNodeName: DrawioDiagram.name,
+      uploadsPath,
+      assetResolver,
+    });
+  });
+  beforeEach(() => {
+    axiosMock = new AxiosMockAdapter(axios);
+  });
+
+  afterEach(() => {
+    axiosMock.restore();
+    tiptapEditor.destroy();
+  });
+
+  describe('getDiagram', () => {
+    describe('when there is a selected diagram', () => {
+      beforeEach(() => {
+        tiptapEditor
+          .chain()
+          .setContent(PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML)
+          .setNodeSelection(1)
+          .run();
+        axiosMock
+          .onGet(imageURL)
+          .reply(HTTP_STATUS_OK, diagramSvg, { 'content-type': contentType });
+      });
+
+      it('returns diagram information', async () => {
+        const diagram = await contentEditorFacade.getDiagram();
+
+        expect(diagram).toEqual({
+          diagramURL: imageURL,
+          filename,
+          diagramSvg,
+          contentType,
+        });
+      });
+    });
+
+    describe('when there is not a selected diagram', () => {
+      beforeEach(() => {
+        tiptapEditor.chain().setContent('<p>text</p>').setNodeSelection(1).run();
+      });
+
+      it('returns null', async () => {
+        const diagram = await contentEditorFacade.getDiagram();
+
+        expect(diagram).toBe(null);
+      });
+    });
+  });
+
+  describe('updateDiagram', () => {
+    beforeEach(() => {
+      tiptapEditor
+        .chain()
+        .setContent(PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML)
+        .setNodeSelection(1)
+        .run();
+
+      assetResolver.resolveUrl.mockReturnValueOnce(src);
+      contentEditorFacade.updateDiagram({ uploadResults: { file_path: canonicalSrc } });
+    });
+
+    it('updates selected diagram diagram node src and canonicalSrc', () => {
+      tiptapEditor.commands.setNodeSelection(1);
+      expect(tiptapEditor.state.selection.node.attrs).toMatchObject({
+        src,
+        canonicalSrc,
+      });
+    });
+  });
+
+  describe('insertDiagram', () => {
+    beforeEach(() => {
+      tiptapEditor.chain().setContent('<p></p>').run();
+
+      assetResolver.resolveUrl.mockReturnValueOnce(src);
+      contentEditorFacade.insertDiagram({ uploadResults: { file_path: canonicalSrc } });
+    });
+
+    it('inserts a new draw.io diagram in the document', () => {
+      tiptapEditor.commands.setNodeSelection(1);
+      expect(tiptapEditor.state.selection.node.attrs).toMatchObject({
+        src,
+        canonicalSrc,
+      });
+    });
+  });
+
+  describe('uploadDiagram', () => {
+    it('sends a post request to the uploadsPath containing the diagram svg', async () => {
+      const link = { markdown: '![](diagram.drawio.svg)' };
+      const blob = new Blob([diagramSvg], { type: 'image/svg+xml' });
+      const formData = new FormData();
+
+      formData.append('file', blob, filename);
+
+      axiosMock.onPost(uploadsPath, formData).reply(HTTP_STATUS_OK, {
+        data: {
+          link,
+        },
+      });
+
+      const response = await contentEditorFacade.uploadDiagram({ diagramSvg, filename });
+
+      expect(response).not.toBe(link);
+    });
+  });
+});
diff --git a/spec/frontend/drawio/drawio_editor_spec.js b/spec/frontend/drawio/drawio_editor_spec.js
index bcf0179e2e2..5ef26c04204 100644
--- a/spec/frontend/drawio/drawio_editor_spec.js
+++ b/spec/frontend/drawio/drawio_editor_spec.js
@@ -4,6 +4,7 @@ import {
   DRAWIO_FRAME_ID,
   DIAGRAM_BACKGROUND_COLOR,
   DRAWIO_IFRAME_TIMEOUT,
+  DIAGRAM_MAX_SIZE,
 } from '~/drawio/constants';
 import { createAlert, VARIANT_SUCCESS } from '~/alert';
 
@@ -14,8 +15,10 @@ jest.useFakeTimers();
 describe('drawio/drawio_editor', () => {
   let editorFacade;
   let drawioIFrameReceivedMessages;
+  const diagramURL = `${window.location.origin}/uploads/diagram.drawio.svg`;
   const testSvg = '<svg></svg>';
   const testEncodedSvg = `data:image/svg+xml;base64,${btoa(testSvg)}`;
+  const filename = 'diagram.drawio.svg';
 
   const findDrawioIframe = () => document.getElementById(DRAWIO_FRAME_ID);
   const waitForDrawioIFrameMessage = ({ messageNumber = 1 } = {}) =>
@@ -71,6 +74,10 @@ describe('drawio/drawio_editor', () => {
     it('creates the drawio editor iframe and attaches it to the body', () => {
       expect(findDrawioIframe().getAttribute('src')).toBe(DRAWIO_EDITOR_URL);
     });
+
+    it('sets drawio-editor classname to the iframe', () => {
+      expect(findDrawioIframe().classList).toContain('drawio-editor');
+    });
   });
 
   describe(`when parent window does not receive configure event after ${DRAWIO_IFRAME_TIMEOUT} ms`, () => {
@@ -88,7 +95,7 @@ describe('drawio/drawio_editor', () => {
       jest.runAllTimers();
 
       expect(createAlert).toHaveBeenCalledWith({
-        message: 'The draw.io editor could not be loaded.',
+        message: 'The diagrams.net editor could not be loaded.',
       });
     });
   });
@@ -149,10 +156,10 @@ describe('drawio/drawio_editor', () => {
 
     describe('when there is a diagram selected', () => {
       const diagramSvg = '<svg></svg>';
-      const filename = 'diagram.drawio.svg';
 
       beforeEach(() => {
         editorFacade.getDiagram.mockResolvedValueOnce({
+          diagramURL,
           diagramSvg,
           filename,
           contentType: 'image/svg+xml',
@@ -177,14 +184,43 @@ describe('drawio/drawio_editor', () => {
           },
         });
       });
+
+      it('sets the drawio iframe as visible and resets cursor', async () => {
+        await waitForDrawioIFrameMessage();
+
+        expect(findDrawioIframe().style.visibility).toBe('visible');
+        expect(findDrawioIframe().style.cursor).toBe('');
+      });
+
+      it('scrolls window to the top', async () => {
+        await waitForDrawioIFrameMessage();
+
+        expect(window.scrollX).toBe(0);
+      });
     });
 
-    describe('when there is an image selected that is not a diagram', () => {
+    describe.each`
+      description | errorMessage | diagram
+      ${'when there is an image selected that is not an svg file'} | ${'The selected image is not a valid SVG diagram'} | ${{
+  diagramURL,
+  contentType: 'image/png',
+  filename: 'image.png',
+}}
+      ${'when the selected image is not an asset upload'} | ${'The selected image is not an asset uploaded in the application'} | ${{
+  diagramSvg: '<svg></svg>',
+  filename,
+  contentType: 'image/svg+xml',
+  diagramURL: 'https://example.com/image.drawio.svg',
+}}
+      ${'when the selected image is too large'} | ${'The selected image is too large.'} | ${{
+  diagramSvg: 'x'.repeat(DIAGRAM_MAX_SIZE + 1),
+  filename,
+  contentType: 'image/svg+xml',
+  diagramURL,
+}}
+    `('$description', ({ errorMessage, diagram }) => {
       beforeEach(() => {
-        editorFacade.getDiagram.mockResolvedValueOnce({
-          contentType: 'image/png',
-          filename: 'image.png',
-        });
+        editorFacade.getDiagram.mockResolvedValueOnce(diagram);
 
         launchDrawioEditor({ editorFacade });
 
@@ -193,7 +229,7 @@ describe('drawio/drawio_editor', () => {
 
       it('displays an error alert indicating that the image is not a diagram', async () => {
         expect(createAlert).toHaveBeenCalledWith({
-          message: 'The selected image is not a diagram',
+          message: errorMessage,
           error: expect.any(Error),
         });
       });
@@ -214,7 +250,7 @@ describe('drawio/drawio_editor', () => {
 
       it('displays an error alert indicating the failure', async () => {
         expect(createAlert).toHaveBeenCalledWith({
-          message: 'Cannot load the diagram into the draw.io editor',
+          message: 'Cannot load the diagram into the diagrams.net editor',
           error: expect.any(Error),
         });
       });
diff --git a/spec/frontend/drawio/markdown_field_editor_facade_spec.js b/spec/frontend/drawio/markdown_field_editor_facade_spec.js
index 992dcf0017c..e3eafc63839 100644
--- a/spec/frontend/drawio/markdown_field_editor_facade_spec.js
+++ b/spec/frontend/drawio/markdown_field_editor_facade_spec.js
@@ -57,6 +57,7 @@ describe('drawio/textareaMarkdownEditor', () => {
         );
 
         expect(diagram).toEqual({
+          diagramURL: imageURL,
           diagramMarkdown,
           filename,
           diagramSvg,