Add latest changes from gitlab-org/gitlab@master

5 files changed, 273 insertions, 9 deletions

diff --git a/spec/frontend/content_editor/components/wrappers/table_cell_spec.js b/spec/frontend/content_editor/components/wrappers/table_cell_base_spec.js
index 274c2c2f3de..e48f59f6d9c 100644
--- a/spec/frontend/content_editor/components/wrappers/table_cell_spec.js
+++ b/spec/frontend/content_editor/components/wrappers/table_cell_base_spec.js
@@ -1,22 +1,24 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { NodeViewWrapper } from '@tiptap/vue-2';
 import { selectedRect as getSelectedRect } from 'prosemirror-tables';
+import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import TableCellWrapper from '~/content_editor/components/wrappers/table_cell.vue';
+import TableCellBaseWrapper from '~/content_editor/components/wrappers/table_cell_base.vue';
 import { createTestEditor, mockChainedCommands, emitEditorEvent } from '../../test_utils';
 
 jest.mock('prosemirror-tables');
 
-describe('content/components/wrappers/table_cell', () => {
+describe('content/components/wrappers/table_cell_base', () => {
   let wrapper;
   let editor;
   let getPos;
 
-  const createWrapper = async () => {
-    wrapper = shallowMountExtended(TableCellWrapper, {
+  const createWrapper = async (propsData = { cellType: 'td' }) => {
+    wrapper = shallowMountExtended(TableCellBaseWrapper, {
       propsData: {
         editor,
         getPos,
+        ...propsData,
       },
     });
   };
@@ -64,7 +66,7 @@ describe('content/components/wrappers/table_cell', () => {
     setCurrentPositionInCell();
     createWrapper();
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(findDropdown().props()).toMatchObject({
       category: 'tertiary',
@@ -81,7 +83,7 @@ describe('content/components/wrappers/table_cell', () => {
   it('does not display dropdown when selection cursor is not on the cell', async () => {
     createWrapper();
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(findDropdown().exists()).toBe(false);
   });
@@ -97,7 +99,7 @@ describe('content/components/wrappers/table_cell', () => {
       });
 
       createWrapper();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       mockDropdownHide();
     });
@@ -136,7 +138,7 @@ describe('content/components/wrappers/table_cell', () => {
 
       emitEditorEvent({ tiptapEditor: editor, event: 'selectionUpdate' });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       findDropdownItemWithLabel('Delete row').vm.$emit('click');
 
@@ -154,11 +156,38 @@ describe('content/components/wrappers/table_cell', () => {
 
       emitEditorEvent({ tiptapEditor: editor, event: 'selectionUpdate' });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       findDropdownItemWithLabel('Delete column').vm.$emit('click');
 
       expect(mocks.deleteColumn).toHaveBeenCalled();
     });
+
+    describe('when current row is the table’s header', () => {
+      beforeEach(async () => {
+        // Remove 2 rows condition
+        getSelectedRect.mockReturnValue({
+          map: {
+            height: 3,
+          },
+        });
+
+        createWrapper({ cellType: 'th' });
+
+        await nextTick();
+      });
+
+      it('does not allow adding a row before the header', async () => {
+        expect(findDropdownItemWithLabelExists('Insert row before')).toBe(false);
+      });
+
+      it('does not allow removing the header row', async () => {
+        createWrapper({ cellType: 'th' });
+
+        await nextTick();
+
+        expect(findDropdownItemWithLabelExists('Delete row')).toBe(false);
+      });
+    });
   });
 });
diff --git a/spec/frontend/content_editor/components/wrappers/table_cell_body_spec.js b/spec/frontend/content_editor/components/wrappers/table_cell_body_spec.js
new file mode 100644
index 00000000000..5d26c44ba03
--- /dev/null
+++ b/spec/frontend/content_editor/components/wrappers/table_cell_body_spec.js
@@ -0,0 +1,37 @@
+import { shallowMount } from '@vue/test-utils';
+import TableCellBaseWrapper from '~/content_editor/components/wrappers/table_cell_base.vue';
+import TableCellBodyWrapper from '~/content_editor/components/wrappers/table_cell_body.vue';
+import { createTestEditor } from '../../test_utils';
+
+describe('content/components/wrappers/table_cell_body', () => {
+  let wrapper;
+  let editor;
+  let getPos;
+
+  const createWrapper = async () => {
+    wrapper = shallowMount(TableCellBodyWrapper, {
+      propsData: {
+        editor,
+        getPos,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    getPos = jest.fn();
+    editor = createTestEditor({});
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a TableCellBase component', () => {
+    createWrapper();
+    expect(wrapper.findComponent(TableCellBaseWrapper).props()).toEqual({
+      editor,
+      getPos,
+      cellType: 'td',
+    });
+  });
+});
diff --git a/spec/frontend/content_editor/components/wrappers/table_cell_header_spec.js b/spec/frontend/content_editor/components/wrappers/table_cell_header_spec.js
new file mode 100644
index 00000000000..e561191418d
--- /dev/null
+++ b/spec/frontend/content_editor/components/wrappers/table_cell_header_spec.js
@@ -0,0 +1,37 @@
+import { shallowMount } from '@vue/test-utils';
+import TableCellBaseWrapper from '~/content_editor/components/wrappers/table_cell_base.vue';
+import TableCellHeaderWrapper from '~/content_editor/components/wrappers/table_cell_header.vue';
+import { createTestEditor } from '../../test_utils';
+
+describe('content/components/wrappers/table_cell_header', () => {
+  let wrapper;
+  let editor;
+  let getPos;
+
+  const createWrapper = async () => {
+    wrapper = shallowMount(TableCellHeaderWrapper, {
+      propsData: {
+        editor,
+        getPos,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    getPos = jest.fn();
+    editor = createTestEditor({});
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a TableCellBase component', () => {
+    createWrapper();
+    expect(wrapper.findComponent(TableCellBaseWrapper).props()).toEqual({
+      editor,
+      getPos,
+      cellType: 'th',
+    });
+  });
+});
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index d462995328b..8331adcdfc2 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -375,6 +375,30 @@ describe('Blob content viewer component', () => {
           expect(findBlobHeader().props('isBinary')).toBe(true);
         },
       );
+
+      it('passes the correct header props when viewing a non-text file', async () => {
+        fullFactory({
+          mockData: {
+            blobInfo: {
+              ...simpleMockData,
+              simpleViewer: {
+                ...simpleMockData.simpleViewer,
+                fileType: 'image',
+              },
+            },
+          },
+          stubs: {
+            BlobContent: true,
+            BlobReplace: true,
+          },
+        });
+
+        await nextTick();
+
+        expect(findBlobHeader().props('hideViewerSwitcher')).toBe(true);
+        expect(findBlobHeader().props('isBinary')).toBe(true);
+        expect(findBlobEdit().props('showEditButton')).toBe(false);
+      });
     });
 
     describe('BlobButtonGroup', () => {
diff --git a/spec/frontend/vue_shared/components/storage_counter/usage_graph_spec.js b/spec/frontend/vue_shared/components/storage_counter/usage_graph_spec.js
new file mode 100644
index 00000000000..103eee4b9a8
--- /dev/null
+++ b/spec/frontend/vue_shared/components/storage_counter/usage_graph_spec.js
@@ -0,0 +1,137 @@
+import { shallowMount } from '@vue/test-utils';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
+import UsageGraph from '~/vue_shared/components/storage_counter/usage_graph.vue';
+
+let data;
+let wrapper;
+
+function mountComponent({ rootStorageStatistics, limit }) {
+  wrapper = shallowMount(UsageGraph, {
+    propsData: {
+      rootStorageStatistics,
+      limit,
+    },
+  });
+}
+function findStorageTypeUsagesSerialized() {
+  return wrapper
+    .findAll('[data-testid="storage-type-usage"]')
+    .wrappers.map((wp) => wp.element.style.flex);
+}
+
+describe('Storage Counter usage graph component', () => {
+  beforeEach(() => {
+    data = {
+      rootStorageStatistics: {
+        wikiSize: 5000,
+        repositorySize: 4000,
+        packagesSize: 3000,
+        lfsObjectsSize: 2000,
+        buildArtifactsSize: 500,
+        pipelineArtifactsSize: 500,
+        snippetsSize: 2000,
+        storageSize: 17000,
+        uploadsSize: 1000,
+      },
+      limit: 2000,
+    };
+    mountComponent(data);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the legend in order', () => {
+    const types = wrapper.findAll('[data-testid="storage-type-legend"]');
+
+    const {
+      buildArtifactsSize,
+      pipelineArtifactsSize,
+      lfsObjectsSize,
+      packagesSize,
+      repositorySize,
+      wikiSize,
+      snippetsSize,
+      uploadsSize,
+    } = data.rootStorageStatistics;
+
+    expect(types.at(0).text()).toMatchInterpolatedText(`Wikis ${numberToHumanSize(wikiSize)}`);
+    expect(types.at(1).text()).toMatchInterpolatedText(
+      `Repositories ${numberToHumanSize(repositorySize)}`,
+    );
+    expect(types.at(2).text()).toMatchInterpolatedText(
+      `Packages ${numberToHumanSize(packagesSize)}`,
+    );
+    expect(types.at(3).text()).toMatchInterpolatedText(
+      `LFS Objects ${numberToHumanSize(lfsObjectsSize)}`,
+    );
+    expect(types.at(4).text()).toMatchInterpolatedText(
+      `Snippets ${numberToHumanSize(snippetsSize)}`,
+    );
+    expect(types.at(5).text()).toMatchInterpolatedText(
+      `Artifacts ${numberToHumanSize(buildArtifactsSize + pipelineArtifactsSize)}`,
+    );
+    expect(types.at(6).text()).toMatchInterpolatedText(`Uploads ${numberToHumanSize(uploadsSize)}`);
+  });
+
+  describe('when storage type is not used', () => {
+    beforeEach(() => {
+      data.rootStorageStatistics.wikiSize = 0;
+      mountComponent(data);
+    });
+
+    it('filters the storage type', () => {
+      expect(wrapper.text()).not.toContain('Wikis');
+    });
+  });
+
+  describe('when there is no storage usage', () => {
+    beforeEach(() => {
+      data.rootStorageStatistics.storageSize = 0;
+      mountComponent(data);
+    });
+
+    it('it does not render', () => {
+      expect(wrapper.html()).toEqual('');
+    });
+  });
+
+  describe('when limit is 0', () => {
+    beforeEach(() => {
+      data.limit = 0;
+      mountComponent(data);
+    });
+
+    it('sets correct flex values', () => {
+      expect(findStorageTypeUsagesSerialized()).toStrictEqual([
+        '0.29411764705882354',
+        '0.23529411764705882',
+        '0.17647058823529413',
+        '0.11764705882352941',
+        '0.11764705882352941',
+        '0.058823529411764705',
+        '0.058823529411764705',
+      ]);
+    });
+  });
+
+  describe('when storage exceeds limit', () => {
+    beforeEach(() => {
+      data.limit = data.rootStorageStatistics.storageSize - 1;
+      mountComponent(data);
+    });
+
+    it('it does render correclty', () => {
+      expect(findStorageTypeUsagesSerialized()).toStrictEqual([
+        '0.29411764705882354',
+        '0.23529411764705882',
+        '0.17647058823529413',
+        '0.11764705882352941',
+        '0.11764705882352941',
+        '0.058823529411764705',
+        '0.058823529411764705',
+      ]);
+    });
+  });
+});