Add latest changes from gitlab-org/gitlab@master

14 files changed, 147 insertions, 56 deletions

diff --git a/spec/frontend/__mocks__/@toast-ui/vue-editor/index.js b/spec/frontend/__mocks__/@toast-ui/vue-editor/index.js
index 91bcef5cb62..726ed0fa030 100644
--- a/spec/frontend/__mocks__/@toast-ui/vue-editor/index.js
+++ b/spec/frontend/__mocks__/@toast-ui/vue-editor/index.js
@@ -13,6 +13,9 @@ export const Editor = {
     height: {
       type: String,
     },
+    previewStyle: {
+      type: String,
+    },
   },
   render(h) {
     return h('div');
diff --git a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
index 5770778d8ee..d41fda1040b 100644
--- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
+++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
@@ -71,7 +71,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
       <date-time-picker-stub
         class="flex-grow-1 show-last-dropdown"
         customenabled="true"
-        data-qa-selector="show_last_dropdown"
+        data-qa-selector="range_picker_dropdown"
         options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
         value="[object Object]"
       />
diff --git a/spec/frontend/monitoring/components/variables_section_spec.js b/spec/frontend/monitoring/components/variables_section_spec.js
index 51c0e192c58..6bd8b18881b 100644
--- a/spec/frontend/monitoring/components/variables_section_spec.js
+++ b/spec/frontend/monitoring/components/variables_section_spec.js
@@ -43,10 +43,7 @@ describe('Metrics dashboard/variables section component', () => {
 
   it('shows the variables section', () => {
     createShallowWrapper();
-    wrapper.vm.$store.commit(
-      `monitoringDashboard/${types.SET_PROM_QUERY_VARIABLES}`,
-      sampleVariables,
-    );
+    wrapper.vm.$store.commit(`monitoringDashboard/${types.SET_VARIABLES}`, sampleVariables);
 
     return wrapper.vm.$nextTick(() => {
       const allInputs = findAllFormInputs();
@@ -57,7 +54,7 @@ describe('Metrics dashboard/variables section component', () => {
 
   describe('when changing the variable inputs', () => {
     const fetchDashboardData = jest.fn();
-    const setVariableData = jest.fn();
+    const setVariableValues = jest.fn();
 
     beforeEach(() => {
       store = new Vuex.Store({
@@ -70,7 +67,7 @@ describe('Metrics dashboard/variables section component', () => {
             },
             actions: {
               fetchDashboardData,
-              setVariableData,
+              setVariableValues,
             },
           },
         },
@@ -86,7 +83,7 @@ describe('Metrics dashboard/variables section component', () => {
       firstInput.vm.$emit('input');
       firstInput.trigger('blur');
 
-      expect(setVariableData).toHaveBeenCalled();
+      expect(setVariableValues).toHaveBeenCalled();
       expect(mergeUrlParams).toHaveBeenCalledWith(sampleVariables, window.location.href);
       expect(updateHistory).toHaveBeenCalled();
       expect(fetchDashboardData).toHaveBeenCalled();
@@ -99,7 +96,7 @@ describe('Metrics dashboard/variables section component', () => {
       firstInput.vm.$emit('input');
       firstInput.trigger('keyup.enter');
 
-      expect(setVariableData).toHaveBeenCalled();
+      expect(setVariableValues).toHaveBeenCalled();
       expect(mergeUrlParams).toHaveBeenCalledWith(sampleVariables, window.location.href);
       expect(updateHistory).toHaveBeenCalled();
       expect(fetchDashboardData).toHaveBeenCalled();
@@ -111,7 +108,7 @@ describe('Metrics dashboard/variables section component', () => {
       firstInput.vm.$emit('input');
       firstInput.trigger('keyup.enter');
 
-      expect(setVariableData).not.toHaveBeenCalled();
+      expect(setVariableValues).not.toHaveBeenCalled();
       expect(mergeUrlParams).not.toHaveBeenCalled();
       expect(updateHistory).not.toHaveBeenCalled();
       expect(fetchDashboardData).not.toHaveBeenCalled();
diff --git a/spec/frontend/monitoring/store/actions_spec.js b/spec/frontend/monitoring/store/actions_spec.js
index 44626bfcc57..32ff03a53d7 100644
--- a/spec/frontend/monitoring/store/actions_spec.js
+++ b/spec/frontend/monitoring/store/actions_spec.js
@@ -26,7 +26,7 @@ import {
   clearExpandedPanel,
   setGettingStartedEmptyState,
   duplicateSystemDashboard,
-  setVariables,
+  setVariableValues,
 } from '~/monitoring/stores/actions';
 import {
   gqClient,
@@ -442,19 +442,19 @@ describe('Monitoring store actions', () => {
     });
   });
 
-  describe('setVariables', () => {
+  describe('setVariableValues', () => {
     let mockedState;
     beforeEach(() => {
       mockedState = storeState();
     });
-    it('should commit SET_PROM_QUERY_VARIABLES mutation', done => {
+    it('should commit UPDATE_VARIABLE_VALUES mutation', done => {
       testAction(
-        setVariables,
+        setVariableValues,
         { pod: 'POD' },
         mockedState,
         [
           {
-            type: types.SET_PROM_QUERY_VARIABLES,
+            type: types.UPDATE_VARIABLE_VALUES,
             payload: { pod: 'POD' },
           },
         ],
diff --git a/spec/frontend/monitoring/store/getters_spec.js b/spec/frontend/monitoring/store/getters_spec.js
index e3ee9ffb2bc..3577bebb336 100644
--- a/spec/frontend/monitoring/store/getters_spec.js
+++ b/spec/frontend/monitoring/store/getters_spec.js
@@ -338,14 +338,14 @@ describe('Monitoring store Getters', () => {
     });
 
     it('transforms the promVariables object to an array in the [variable, variable_value] format', () => {
-      mutations[types.SET_PROM_QUERY_VARIABLES](state, sampleVariables);
+      mutations[types.SET_VARIABLES](state, sampleVariables);
       const variablesArray = getters.getCustomVariablesArray(state);
 
       expect(variablesArray).toEqual(['label1', 'pod', 'label2', 'env']);
     });
 
     it('transforms the promVariables object to an empty array when no keys are present', () => {
-      mutations[types.SET_PROM_QUERY_VARIABLES](state, {});
+      mutations[types.SET_VARIABLES](state, {});
       const variablesArray = getters.getCustomVariablesArray(state);
 
       expect(variablesArray).toEqual([]);
diff --git a/spec/frontend/monitoring/store/mutations_spec.js b/spec/frontend/monitoring/store/mutations_spec.js
index 29628c99256..6c9b0726c93 100644
--- a/spec/frontend/monitoring/store/mutations_spec.js
+++ b/spec/frontend/monitoring/store/mutations_spec.js
@@ -408,27 +408,35 @@ describe('Monitoring mutations', () => {
     });
   });
 
-  describe('SET_PROM_QUERY_VARIABLES', () => {
+  describe('SET_VARIABLES', () => {
     it('stores an empty variables array when no custom variables are given', () => {
-      mutations[types.SET_PROM_QUERY_VARIABLES](stateCopy, {});
+      mutations[types.SET_VARIABLES](stateCopy, {});
 
       expect(stateCopy.promVariables).toEqual({});
     });
 
     it('stores variables in the key key_value format in the array', () => {
-      mutations[types.SET_PROM_QUERY_VARIABLES](stateCopy, { pod: 'POD', stage: 'main ops' });
+      mutations[types.SET_VARIABLES](stateCopy, { pod: 'POD', stage: 'main ops' });
 
       expect(stateCopy.promVariables).toEqual({ pod: 'POD', stage: 'main ops' });
     });
   });
 
-  describe('UPDATE_VARIABLE_DATA', () => {
-    beforeEach(() => {
-      mutations[types.SET_PROM_QUERY_VARIABLES](stateCopy, { pod: 'POD' });
+  describe('UPDATE_VARIABLE_VALUES', () => {
+    afterEach(() => {
+      mutations[types.SET_VARIABLES](stateCopy, {});
+    });
+
+    it('ignores updates that are not already in promVariables', () => {
+      mutations[types.SET_VARIABLES](stateCopy, { environment: 'prod' });
+      mutations[types.UPDATE_VARIABLE_VALUES](stateCopy, { pod: 'new pod' });
+
+      expect(stateCopy.promVariables).toEqual({ environment: 'prod' });
     });
 
-    it('sets a new value for an existing key', () => {
-      mutations[types.UPDATE_VARIABLE_DATA](stateCopy, { pod: 'new pod' });
+    it('only updates existing variables', () => {
+      mutations[types.SET_VARIABLES](stateCopy, { pod: 'POD' });
+      mutations[types.UPDATE_VARIABLE_VALUES](stateCopy, { pod: 'new pod' });
 
       expect(stateCopy.promVariables).toEqual({ pod: 'new pod' });
     });
diff --git a/spec/frontend/monitoring/store/utils_spec.js b/spec/frontend/monitoring/store/utils_spec.js
index fe5754e1216..af040743ebb 100644
--- a/spec/frontend/monitoring/store/utils_spec.js
+++ b/spec/frontend/monitoring/store/utils_spec.js
@@ -5,6 +5,7 @@ import {
   parseAnnotationsResponse,
   removeLeadingSlash,
   mapToDashboardViewModel,
+  removePrefixFromLabels,
 } from '~/monitoring/stores/utils';
 import { annotationsData } from '../mock_data';
 import { NOT_IN_DB_PREFIX } from '~/monitoring/constants';
@@ -419,3 +420,24 @@ describe('removeLeadingSlash', () => {
     });
   });
 });
+
+describe('removePrefixFromLabels', () => {
+  it.each`
+    input               | expected
+    ${undefined}        | ${''}
+    ${null}             | ${''}
+    ${''}               | ${''}
+    ${'    '}           | ${'    '}
+    ${'pod-1'}          | ${'pod-1'}
+    ${'pod-var-1'}      | ${'pod-var-1'}
+    ${'pod-1-var'}      | ${'pod-1-var'}
+    ${'podvar--1'}      | ${'podvar--1'}
+    ${'povar-d-1'}      | ${'povar-d-1'}
+    ${'var-pod-1'}      | ${'pod-1'}
+    ${'var-var-pod-1'}  | ${'var-pod-1'}
+    ${'varvar-pod-1'}   | ${'varvar-pod-1'}
+    ${'var-pod-1-var-'} | ${'pod-1-var-'}
+  `('removePrefixFromLabels returns $expected with input $input', ({ input, expected }) => {
+    expect(removePrefixFromLabels(input)).toEqual(expected);
+  });
+});
diff --git a/spec/frontend/monitoring/store_utils.js b/spec/frontend/monitoring/store_utils.js
index e5b36bf5ad4..b3f87fb7abf 100644
--- a/spec/frontend/monitoring/store_utils.js
+++ b/spec/frontend/monitoring/store_utils.js
@@ -24,7 +24,7 @@ export const setupStoreWithDashboard = $store => {
 };
 
 export const setupStoreWithVariable = $store => {
-  $store.commit(`monitoringDashboard/${types.SET_PROM_QUERY_VARIABLES}`, {
+  $store.commit(`monitoringDashboard/${types.SET_VARIABLES}`, {
     label1: 'pod',
   });
 };
diff --git a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
index 491fc20c40e..1dca65dd862 100644
--- a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
+++ b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
@@ -26,9 +26,7 @@ exports[`Repository last commit component renders commit widget 1`] = `
         class="commit-row-message item-title"
         href="https://test.com/commit/123"
       >
-        
-          Commit title
-        
+        Commit title
       </gl-link-stub>
        
       <!---->
@@ -128,9 +126,7 @@ exports[`Repository last commit component renders the signature HTML as returned
         class="commit-row-message item-title"
         href="https://test.com/commit/123"
       >
-        
-          Commit title
-        
+        Commit title
       </gl-link-stub>
        
       <!---->
diff --git a/spec/frontend/repository/components/last_commit_spec.js b/spec/frontend/repository/components/last_commit_spec.js
index d2576ec26b7..a5bfeb08fe4 100644
--- a/spec/frontend/repository/components/last_commit_spec.js
+++ b/spec/frontend/repository/components/last_commit_spec.js
@@ -9,6 +9,7 @@ function createCommitData(data = {}) {
   const defaultData = {
     sha: '123456789',
     title: 'Commit title',
+    titleHtml: 'Commit title',
     message: 'Commit message',
     webUrl: 'https://test.com/commit/123',
     authoredDate: '2019-01-01',
diff --git a/spec/frontend/repository/utils/commit_spec.js b/spec/frontend/repository/utils/commit_spec.js
index e7cc28178bf..aaaa39f739f 100644
--- a/spec/frontend/repository/utils/commit_spec.js
+++ b/spec/frontend/repository/utils/commit_spec.js
@@ -8,6 +8,7 @@ const mockData = [
       committed_date: '2019-01-01',
     },
     commit_path: `https://test.com`,
+    commit_title_html: 'testing message',
     file_name: 'index.js',
     type: 'blob',
   },
@@ -24,6 +25,7 @@ describe('normalizeData', () => {
         fileName: 'index.js',
         filePath: '/index.js',
         type: 'blob',
+        titleHtml: 'testing message',
         __typename: 'LogTreeCommit',
       },
     ]);
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js
index 774fe25387a..549d89171c6 100644
--- a/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js
+++ b/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js
@@ -1,30 +1,15 @@
 import { shallowMount } from '@vue/test-utils';
 import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
+import {
+  EDITOR_OPTIONS,
+  EDITOR_TYPES,
+  EDITOR_HEIGHT,
+  EDITOR_PREVIEW_STYLE,
+} from '~/vue_shared/components/rich_content_editor/constants';
 
 describe('Rich Content Editor', () => {
   let wrapper;
 
-  const editorOptions = {
-    toolbarItems: [
-      'heading',
-      'bold',
-      'italic',
-      'strike',
-      'divider',
-      'quote',
-      'link',
-      'codeblock',
-      'divider',
-      'ul',
-      'ol',
-      'task',
-      'divider',
-      'hr',
-      'table',
-      'divider',
-      'code',
-    ],
-  };
   const value = '## Some Markdown';
   const findEditor = () => wrapper.find({ ref: 'editor' });
 
@@ -44,15 +29,19 @@ describe('Rich Content Editor', () => {
     });
 
     it('provides the correct editor options', () => {
-      expect(findEditor().props().options).toEqual(editorOptions);
+      expect(findEditor().props().options).toEqual(EDITOR_OPTIONS);
+    });
+
+    it('has the correct preview style', () => {
+      expect(findEditor().props().previewStyle).toBe(EDITOR_PREVIEW_STYLE);
     });
 
     it('has the correct initial edit type', () => {
-      expect(findEditor().props().initialEditType).toBe('wysiwyg');
+      expect(findEditor().props().initialEditType).toBe(EDITOR_TYPES.wysiwyg);
     });
 
     it('has the correct height', () => {
-      expect(findEditor().props().height).toBe('100%');
+      expect(findEditor().props().height).toBe(EDITOR_HEIGHT);
     });
   });
 
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js
new file mode 100644
index 00000000000..8545c43dc1e
--- /dev/null
+++ b/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js
@@ -0,0 +1,44 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
+import ToolbarItem from '~/vue_shared/components/rich_content_editor/toolbar_item.vue';
+
+describe('Toolbar Item', () => {
+  let wrapper;
+
+  const findIcon = () => wrapper.find(GlIcon);
+  const findButton = () => wrapper.find('button');
+
+  const buildWrapper = propsData => {
+    wrapper = shallowMount(ToolbarItem, { propsData });
+  };
+
+  describe.each`
+    icon
+    ${'heading'}
+    ${'bold'}
+    ${'italic'}
+    ${'strikethrough'}
+    ${'quote'}
+    ${'link'}
+    ${'doc-code'}
+    ${'list-bulleted'}
+    ${'list-numbered'}
+    ${'list-task'}
+    ${'list-indent'}
+    ${'list-outdent'}
+    ${'dash'}
+    ${'table'}
+    ${'code'}
+  `('toolbar item component', ({ icon }) => {
+    beforeEach(() => buildWrapper({ icon }));
+
+    it('renders a toolbar button', () => {
+      expect(findButton().exists()).toBe(true);
+    });
+
+    it(`renders the ${icon} icon`, () => {
+      expect(findIcon().exists()).toBe(true);
+      expect(findIcon().props().name).toBe(icon);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/toolbar_service_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/toolbar_service_spec.js
new file mode 100644
index 00000000000..7605cc6a22c
--- /dev/null
+++ b/spec/frontend/vue_shared/components/rich_content_editor/toolbar_service_spec.js
@@ -0,0 +1,29 @@
+import { generateToolbarItem } from '~/vue_shared/components/rich_content_editor/toolbar_service';
+
+describe('Toolbar Service', () => {
+  const config = {
+    icon: 'bold',
+    command: 'some-command',
+    tooltip: 'Some Tooltip',
+    event: 'some-event',
+  };
+  const generatedItem = generateToolbarItem(config);
+
+  it('generates the correct command', () => {
+    expect(generatedItem.options.command).toBe(config.command);
+  });
+
+  it('generates the correct tooltip', () => {
+    expect(generatedItem.options.tooltip).toBe(config.tooltip);
+  });
+
+  it('generates the correct event', () => {
+    expect(generatedItem.options.event).toBe(config.event);
+  });
+
+  it('generates a divider when isDivider is set to true', () => {
+    const isDivider = true;
+
+    expect(generateToolbarItem({ isDivider })).toBe('divider');
+  });
+});