Merge branch 'master' into 'docs-troubleshoot-scim'docs-troubleshoot-scim

# Conflicts:
#   doc/user/group/saml_sso/scim_setup.md

11 files changed, 1134 insertions, 14 deletions

diff --git a/spec/frontend/behaviors/markdown/render_metrics_spec.js b/spec/frontend/behaviors/markdown/render_metrics_spec.js
new file mode 100644
index 00000000000..6db0eabc16b
--- /dev/null
+++ b/spec/frontend/behaviors/markdown/render_metrics_spec.js
@@ -0,0 +1,37 @@
+import Vue from 'vue';
+import renderMetrics from '~/behaviors/markdown/render_metrics';
+import { TEST_HOST } from 'helpers/test_constants';
+
+const originalExtend = Vue.extend;
+
+describe('Render metrics for Gitlab Flavoured Markdown', () => {
+  const container = {
+    Metrics() {},
+  };
+
+  let spyExtend;
+
+  beforeEach(() => {
+    Vue.extend = () => container.Metrics;
+    spyExtend = jest.spyOn(Vue, 'extend');
+  });
+
+  afterEach(() => {
+    Vue.extend = originalExtend;
+  });
+
+  it('does nothing when no elements are found', () => {
+    renderMetrics([]);
+
+    expect(spyExtend).not.toHaveBeenCalled();
+  });
+
+  it('renders a vue component when elements are found', () => {
+    const element = document.createElement('div');
+    element.setAttribute('data-dashboard-url', TEST_HOST);
+
+    renderMetrics([element]);
+
+    expect(spyExtend).toHaveBeenCalled();
+  });
+});
diff --git a/spec/frontend/helpers/indent_helper_spec.js b/spec/frontend/helpers/indent_helper_spec.js
new file mode 100644
index 00000000000..fca12f0d1ef
--- /dev/null
+++ b/spec/frontend/helpers/indent_helper_spec.js
@@ -0,0 +1,371 @@
+import IndentHelper from '~/helpers/indent_helper';
+
+function createMockTextarea() {
+  const el = document.createElement('textarea');
+  el.setCursor = pos => el.setSelectionRange(pos, pos);
+  el.setCursorToEnd = () => el.setCursor(el.value.length);
+  el.selection = () => [el.selectionStart, el.selectionEnd];
+  el.cursor = () => {
+    const [start, end] = el.selection();
+    return start === end ? start : undefined;
+  };
+  return el;
+}
+
+describe('indent_helper', () => {
+  let element;
+  let ih;
+
+  beforeEach(() => {
+    element = createMockTextarea();
+    ih = new IndentHelper(element);
+  });
+
+  describe('indents', () => {
+    describe('a single line', () => {
+      it('when on an empty line; and cursor follows', () => {
+        element.value = '';
+        ih.indent();
+        expect(element.value).toBe('    ');
+        expect(element.cursor()).toBe(4);
+        ih.indent();
+        expect(element.value).toBe('        ');
+        expect(element.cursor()).toBe(8);
+      });
+
+      it('when at the start of a line; and cursor stays at start', () => {
+        element.value = 'foobar';
+        element.setCursor(0);
+        ih.indent();
+        expect(element.value).toBe('    foobar');
+        expect(element.cursor()).toBe(4);
+      });
+
+      it('when the cursor is in the middle; and cursor follows', () => {
+        element.value = 'foobar';
+        element.setCursor(3);
+        ih.indent();
+        expect(element.value).toBe('    foobar');
+        expect(element.cursor()).toBe(7);
+      });
+    });
+
+    describe('several lines', () => {
+      it('when everything is selected; and everything remains selected', () => {
+        element.value = 'foo\nbar\nbaz';
+        element.setSelectionRange(0, 11);
+        ih.indent();
+        expect(element.value).toBe('    foo\n    bar\n    baz');
+        expect(element.selection()).toEqual([0, 23]);
+      });
+
+      it('when all lines are partially selected; and the selection adapts', () => {
+        element.value = 'foo\nbar\nbaz';
+        element.setSelectionRange(2, 9);
+        ih.indent();
+        expect(element.value).toBe('    foo\n    bar\n    baz');
+        expect(element.selection()).toEqual([6, 21]);
+      });
+
+      it('when some lines are entirely selected; and entire lines remain selected', () => {
+        element.value = 'foo\nbar\nbaz';
+        element.setSelectionRange(4, 11);
+        ih.indent();
+        expect(element.value).toBe('foo\n    bar\n    baz');
+        expect(element.selection()).toEqual([4, 19]);
+      });
+
+      it('when some lines are partially selected; and the selection adapts', () => {
+        element.value = 'foo\nbar\nbaz';
+        element.setSelectionRange(5, 9);
+        ih.indent();
+        expect(element.value).toBe('foo\n    bar\n    baz');
+        expect(element.selection()).toEqual([5 + 4, 9 + 2 * 4]);
+      });
+
+      it('having different indentation when some lines are entirely selected; and entire lines remain selected', () => {
+        element.value = '    foo\nbar\n    baz';
+        element.setSelectionRange(8, 19);
+        ih.indent();
+        expect(element.value).toBe('    foo\n    bar\n        baz');
+        expect(element.selection()).toEqual([8, 27]);
+      });
+
+      it('having different indentation when some lines are partially selected; and the selection adapts', () => {
+        element.value = '    foo\nbar\n    baz';
+        element.setSelectionRange(9, 14);
+        ih.indent();
+        expect(element.value).toBe('    foo\n    bar\n        baz');
+        expect(element.selection()).toEqual([13, 22]);
+      });
+    });
+  });
+
+  describe('unindents', () => {
+    describe('a single line', () => {
+      it('but does nothing if there is not indent', () => {
+        element.value = 'foobar';
+        element.setCursor(2);
+        ih.unindent();
+        expect(element.value).toBe('foobar');
+        expect(element.cursor()).toBe(2);
+      });
+
+      it('but does nothing if there is a partial indent', () => {
+        element.value = '  foobar';
+        element.setCursor(1);
+        ih.unindent();
+        expect(element.value).toBe('  foobar');
+        expect(element.cursor()).toBe(1);
+      });
+
+      it('when the cursor is in the line text; cursor follows', () => {
+        element.value = '    foobar';
+        element.setCursor(6);
+        ih.unindent();
+        expect(element.value).toBe('foobar');
+        expect(element.cursor()).toBe(2);
+      });
+
+      it('when the cursor is in the indent; and cursor goes to start', () => {
+        element.value = '    foobar';
+        element.setCursor(2);
+        ih.unindent();
+        expect(element.value).toBe('foobar');
+        expect(element.cursor()).toBe(0);
+      });
+
+      it('when the cursor is at line start; and cursor stays at start', () => {
+        element.value = '    foobar';
+        element.setCursor(0);
+        ih.unindent();
+        expect(element.value).toBe('foobar');
+        expect(element.cursor()).toBe(0);
+      });
+
+      it('when a selection includes part of the indent and text', () => {
+        element.value = '    foobar';
+        element.setSelectionRange(2, 8);
+        ih.unindent();
+        expect(element.value).toBe('foobar');
+        expect(element.selection()).toEqual([0, 4]);
+      });
+
+      it('when a selection includes part of the indent only', () => {
+        element.value = '    foobar';
+        element.setSelectionRange(0, 4);
+        ih.unindent();
+        expect(element.value).toBe('foobar');
+        expect(element.cursor()).toBe(0);
+
+        element.value = '    foobar';
+        element.setSelectionRange(1, 3);
+        ih.unindent();
+        expect(element.value).toBe('foobar');
+        expect(element.cursor()).toBe(0);
+      });
+    });
+
+    describe('several lines', () => {
+      it('when everything is selected', () => {
+        element.value = '    foo\n        bar\n    baz';
+        element.setSelectionRange(0, 27);
+        ih.unindent();
+        expect(element.value).toBe('foo\n    bar\nbaz');
+        expect(element.selection()).toEqual([0, 15]);
+      });
+
+      it('when all lines are partially selected', () => {
+        element.value = '    foo\n        bar\n    baz';
+        element.setSelectionRange(5, 26);
+        ih.unindent();
+        expect(element.value).toBe('foo\n    bar\nbaz');
+        expect(element.selection()).toEqual([1, 14]);
+      });
+
+      it('when all lines are entirely selected', () => {
+        element.value = '    foo\n        bar\n    baz';
+        element.setSelectionRange(8, 27);
+        ih.unindent();
+        expect(element.value).toBe('    foo\n    bar\nbaz');
+        expect(element.selection()).toEqual([8, 19]);
+      });
+
+      it('when some lines are entirely selected', () => {
+        element.value = '    foo\n        bar\n    baz';
+        element.setSelectionRange(8, 27);
+        ih.unindent();
+        expect(element.value).toBe('    foo\n    bar\nbaz');
+        expect(element.selection()).toEqual([8, 19]);
+      });
+
+      it('when some lines are partially selected', () => {
+        element.value = '    foo\n        bar\n    baz';
+        element.setSelectionRange(17, 26);
+        ih.unindent();
+        expect(element.value).toBe('    foo\n    bar\nbaz');
+        expect(element.selection()).toEqual([13, 18]);
+      });
+
+      it('when some lines are partially selected within their indents', () => {
+        element.value = '    foo\n        bar\n    baz';
+        element.setSelectionRange(10, 22);
+        ih.unindent();
+        expect(element.value).toBe('    foo\n    bar\nbaz');
+        expect(element.selection()).toEqual([8, 16]);
+      });
+    });
+  });
+
+  describe('newline', () => {
+    describe('on a single line', () => {
+      it('auto-indents the new line', () => {
+        element.value = 'foo\n bar\n    baz\n        qux';
+
+        element.setCursor(3);
+        ih.newline();
+        expect(element.value).toBe('foo\n\n bar\n    baz\n        qux');
+        expect(element.cursor()).toBe(4);
+
+        element.setCursor(9);
+        ih.newline();
+        expect(element.value).toBe('foo\n\n bar\n \n    baz\n        qux');
+        expect(element.cursor()).toBe(11);
+
+        element.setCursor(19);
+        ih.newline();
+        expect(element.value).toBe('foo\n\n bar\n \n    baz\n    \n        qux');
+        expect(element.cursor()).toBe(24);
+
+        element.setCursor(36);
+        ih.newline();
+        expect(element.value).toBe('foo\n\n bar\n \n    baz\n    \n        qux\n        ');
+        expect(element.cursor()).toBe(45);
+      });
+
+      it('splits a line and auto-indents', () => {
+        element.value = '    foobar';
+        element.setCursor(7);
+        ih.newline();
+        expect(element.value).toBe('    foo\n    bar');
+        expect(element.cursor()).toBe(12);
+      });
+
+      it('replaces selection with an indented newline', () => {
+        element.value = '    foobarbaz';
+        element.setSelectionRange(7, 10);
+        ih.newline();
+        expect(element.value).toBe('    foo\n    baz');
+        expect(element.cursor()).toBe(12);
+      });
+    });
+
+    it('on several lines.replaces selection with indented newline', () => {
+      element.value = '  foo\n    bar\n  baz';
+      element.setSelectionRange(4, 17);
+      ih.newline();
+      expect(element.value).toBe('  fo\n  az');
+      expect(element.cursor()).toBe(7);
+    });
+  });
+
+  describe('backspace', () => {
+    let event;
+
+    // This suite tests only the special indent-removing behaviour of the
+    // backspace() method, since non-special cases are handled natively as a
+    // backspace keypress.
+
+    beforeEach(() => {
+      event = { preventDefault: jest.fn() };
+    });
+
+    describe('on a single line', () => {
+      it('does nothing special if in the line text', () => {
+        element.value = '    foobar';
+        element.setCursor(7);
+        ih.backspace(event);
+        expect(event.preventDefault).not.toHaveBeenCalled();
+      });
+
+      it('does nothing special if after a non-leading indent', () => {
+        element.value = '    foo    bar';
+        element.setCursor(11);
+        ih.backspace(event);
+        expect(event.preventDefault).not.toHaveBeenCalled();
+      });
+
+      it('deletes one leading indent', () => {
+        element.value = '        foo';
+        element.setCursor(8);
+        ih.backspace(event);
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(element.value).toBe('    foo');
+        expect(element.cursor()).toBe(4);
+      });
+
+      it('does nothing if cursor is inside the leading indent', () => {
+        element.value = '        foo';
+        element.setCursor(4);
+        ih.backspace(event);
+        expect(event.preventDefault).not.toHaveBeenCalled();
+      });
+
+      it('does nothing if cursor is at the start of the line', () => {
+        element.value = '    foo';
+        element.setCursor(0);
+        ih.backspace(event);
+        expect(event.preventDefault).not.toHaveBeenCalled();
+      });
+
+      it('deletes one partial indent', () => {
+        element.value = '      foo';
+        element.setCursor(6);
+        ih.backspace(event);
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(element.value).toBe('    foo');
+        expect(element.cursor()).toBe(4);
+      });
+
+      it('deletes indents sequentially', () => {
+        element.value = '          foo';
+        element.setCursor(10);
+        ih.backspace(event);
+        ih.backspace(event);
+        ih.backspace(event);
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(element.value).toBe('foo');
+        expect(element.cursor()).toBe(0);
+      });
+    });
+
+    describe('on several lines', () => {
+      it('deletes indent only on its own line', () => {
+        element.value = '    foo\n        bar\n    baz';
+        element.setCursor(16);
+        ih.backspace(event);
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(element.value).toBe('    foo\n    bar\n    baz');
+        expect(element.cursor()).toBe(12);
+      });
+
+      it('has no special behaviour with any range selection', () => {
+        const text = '  foo\n    bar\n  baz';
+        for (let start = 0; start < text.length; start += 1) {
+          for (let end = start + 1; end < text.length; end += 1) {
+            element.value = text;
+            element.setSelectionRange(start, end);
+            ih.backspace(event);
+            expect(event.preventDefault).not.toHaveBeenCalled();
+
+            // Ensure that the backspace() method doesn't change state
+            // In reality, these two statements won't hold because the browser
+            // will natively process the backspace event.
+            expect(element.value).toBe(text);
+            expect(element.selection()).toEqual([start, end]);
+          }
+        }
+      });
+    });
+  });
+});
diff --git a/spec/frontend/jobs/components/empty_state_spec.js b/spec/frontend/jobs/components/empty_state_spec.js
index a2df79bdda0..dfba5a936ee 100644
--- a/spec/frontend/jobs/components/empty_state_spec.js
+++ b/spec/frontend/jobs/components/empty_state_spec.js
@@ -10,6 +10,8 @@ describe('Empty State', () => {
     illustrationPath: 'illustrations/pending_job_empty.svg',
     illustrationSizeClass: 'svg-430',
     title: 'This job has not started yet',
+    playable: false,
+    variablesSettingsUrl: '',
   };
 
   const content = 'This job is in pending state and is waiting to be picked by a runner';
@@ -90,4 +92,44 @@ describe('Empty State', () => {
       expect(vm.$el.querySelector('.js-job-empty-state-action')).toBeNull();
     });
   });
+
+  describe('without playbale action', () => {
+    it('does not render manual variables form', () => {
+      vm = mountComponent(Component, {
+        ...props,
+        content,
+      });
+
+      expect(vm.$el.querySelector('.js-manual-vars-form')).toBeNull();
+    });
+  });
+
+  describe('with playbale action and not scheduled job', () => {
+    it('renders manual variables form', () => {
+      vm = mountComponent(Component, {
+        ...props,
+        content,
+        playable: true,
+        scheduled: false,
+        action: {
+          path: 'runner',
+          button_title: 'Check runner',
+          method: 'post',
+        },
+      });
+
+      expect(vm.$el.querySelector('.js-manual-vars-form')).not.toBeNull();
+    });
+  });
+
+  describe('with playbale action and  scheduled job', () => {
+    it('does not render manual variables form', () => {
+      vm = mountComponent(Component, {
+        ...props,
+        content,
+      });
+
+      expect(vm.$el.querySelector('.js-manual-vars-form')).toBeNull();
+    });
+  });
 });
diff --git a/spec/frontend/lib/utils/color_utils_spec.js b/spec/frontend/lib/utils/color_utils_spec.js
new file mode 100644
index 00000000000..433e9d5a85e
--- /dev/null
+++ b/spec/frontend/lib/utils/color_utils_spec.js
@@ -0,0 +1,35 @@
+import { textColorForBackground, hexToRgb } from '~/lib/utils/color_utils';
+
+describe('Color utils', () => {
+  describe('Converting hex code to rgb', () => {
+    it('convert hex code to rgb', () => {
+      expect(hexToRgb('#000000')).toEqual([0, 0, 0]);
+      expect(hexToRgb('#ffffff')).toEqual([255, 255, 255]);
+    });
+
+    it('convert short hex code to rgb', () => {
+      expect(hexToRgb('#000')).toEqual([0, 0, 0]);
+      expect(hexToRgb('#fff')).toEqual([255, 255, 255]);
+    });
+
+    it('handle conversion regardless of the characters case', () => {
+      expect(hexToRgb('#f0F')).toEqual([255, 0, 255]);
+    });
+  });
+
+  describe('Getting text color for given background', () => {
+    // following tests are being ported from `text_color_for_bg` section in labels_helper_spec.rb
+    it('uses light text on dark backgrounds', () => {
+      expect(textColorForBackground('#222E2E')).toEqual('#FFFFFF');
+    });
+
+    it('uses dark text on light backgrounds', () => {
+      expect(textColorForBackground('#EEEEEE')).toEqual('#333333');
+    });
+
+    it('supports RGB triplets', () => {
+      expect(textColorForBackground('#FFF')).toEqual('#333333');
+      expect(textColorForBackground('#000')).toEqual('#FFFFFF');
+    });
+  });
+});
diff --git a/spec/frontend/lib/utils/common_utils_spec.js b/spec/frontend/lib/utils/common_utils_spec.js
new file mode 100644
index 00000000000..e3d3b82d2f3
--- /dev/null
+++ b/spec/frontend/lib/utils/common_utils_spec.js
@@ -0,0 +1,180 @@
+import * as cu from '~/lib/utils/common_utils';
+
+const CMD_ENTITY = '&#8984;';
+
+// Redefine `navigator.platform` because it's unsettable by default in JSDOM.
+let platform;
+Object.defineProperty(navigator, 'platform', {
+  configurable: true,
+  get: () => platform,
+  set: val => {
+    platform = val;
+  },
+});
+
+describe('common_utils', () => {
+  describe('platform leader key helpers', () => {
+    const CTRL_EVENT = { ctrlKey: true };
+    const META_EVENT = { metaKey: true };
+    const BOTH_EVENT = { ctrlKey: true, metaKey: true };
+
+    it('should return "ctrl" if navigator.platform is unset', () => {
+      expect(cu.getPlatformLeaderKey()).toBe('ctrl');
+      expect(cu.getPlatformLeaderKeyHTML()).toBe('Ctrl');
+      expect(cu.isPlatformLeaderKey(CTRL_EVENT)).toBe(true);
+      expect(cu.isPlatformLeaderKey(META_EVENT)).toBe(false);
+      expect(cu.isPlatformLeaderKey(BOTH_EVENT)).toBe(true);
+    });
+
+    it('should return "meta" on MacOS', () => {
+      navigator.platform = 'MacIntel';
+      expect(cu.getPlatformLeaderKey()).toBe('meta');
+      expect(cu.getPlatformLeaderKeyHTML()).toBe(CMD_ENTITY);
+      expect(cu.isPlatformLeaderKey(CTRL_EVENT)).toBe(false);
+      expect(cu.isPlatformLeaderKey(META_EVENT)).toBe(true);
+      expect(cu.isPlatformLeaderKey(BOTH_EVENT)).toBe(true);
+    });
+
+    it('should return "ctrl" on Linux', () => {
+      navigator.platform = 'Linux is great';
+      expect(cu.getPlatformLeaderKey()).toBe('ctrl');
+      expect(cu.getPlatformLeaderKeyHTML()).toBe('Ctrl');
+      expect(cu.isPlatformLeaderKey(CTRL_EVENT)).toBe(true);
+      expect(cu.isPlatformLeaderKey(META_EVENT)).toBe(false);
+      expect(cu.isPlatformLeaderKey(BOTH_EVENT)).toBe(true);
+    });
+
+    it('should return "ctrl" on Windows', () => {
+      navigator.platform = 'Win32';
+      expect(cu.getPlatformLeaderKey()).toBe('ctrl');
+      expect(cu.getPlatformLeaderKeyHTML()).toBe('Ctrl');
+      expect(cu.isPlatformLeaderKey(CTRL_EVENT)).toBe(true);
+      expect(cu.isPlatformLeaderKey(META_EVENT)).toBe(false);
+      expect(cu.isPlatformLeaderKey(BOTH_EVENT)).toBe(true);
+    });
+  });
+
+  describe('keystroke', () => {
+    const CODE_BACKSPACE = 8;
+    const CODE_TAB = 9;
+    const CODE_ENTER = 13;
+    const CODE_SPACE = 32;
+    const CODE_4 = 52;
+    const CODE_F = 70;
+    const CODE_Z = 90;
+
+    // Helper function that quickly creates KeyboardEvents
+    const k = (code, modifiers = '') => ({
+      keyCode: code,
+      which: code,
+      altKey: modifiers.includes('a'),
+      ctrlKey: modifiers.includes('c'),
+      metaKey: modifiers.includes('m'),
+      shiftKey: modifiers.includes('s'),
+    });
+
+    const EV_F = k(CODE_F);
+    const EV_ALT_F = k(CODE_F, 'a');
+    const EV_CONTROL_F = k(CODE_F, 'c');
+    const EV_META_F = k(CODE_F, 'm');
+    const EV_SHIFT_F = k(CODE_F, 's');
+    const EV_CONTROL_SHIFT_F = k(CODE_F, 'cs');
+    const EV_ALL_F = k(CODE_F, 'scma');
+    const EV_ENTER = k(CODE_ENTER);
+    const EV_TAB = k(CODE_TAB);
+    const EV_SPACE = k(CODE_SPACE);
+    const EV_BACKSPACE = k(CODE_BACKSPACE);
+    const EV_4 = k(CODE_4);
+    const EV_$ = k(CODE_4, 's');
+
+    const { keystroke } = cu;
+
+    it('short-circuits with bad arguments', () => {
+      expect(keystroke()).toBe(false);
+      expect(keystroke({})).toBe(false);
+    });
+
+    it('handles keystrokes using key codes', () => {
+      // Test a letter key with modifiers
+      expect(keystroke(EV_F, CODE_F)).toBe(true);
+      expect(keystroke(EV_F, CODE_F, '')).toBe(true);
+      expect(keystroke(EV_ALT_F, CODE_F, 'a')).toBe(true);
+      expect(keystroke(EV_CONTROL_F, CODE_F, 'c')).toBe(true);
+      expect(keystroke(EV_META_F, CODE_F, 'm')).toBe(true);
+      expect(keystroke(EV_SHIFT_F, CODE_F, 's')).toBe(true);
+      expect(keystroke(EV_CONTROL_SHIFT_F, CODE_F, 'cs')).toBe(true);
+      expect(keystroke(EV_ALL_F, CODE_F, 'acms')).toBe(true);
+
+      // Test non-letter keys
+      expect(keystroke(EV_TAB, CODE_TAB)).toBe(true);
+      expect(keystroke(EV_ENTER, CODE_ENTER)).toBe(true);
+      expect(keystroke(EV_SPACE, CODE_SPACE)).toBe(true);
+      expect(keystroke(EV_BACKSPACE, CODE_BACKSPACE)).toBe(true);
+
+      // Test a number/symbol key
+      expect(keystroke(EV_4, CODE_4)).toBe(true);
+      expect(keystroke(EV_$, CODE_4, 's')).toBe(true);
+
+      // Test wrong input
+      expect(keystroke(EV_F, CODE_Z)).toBe(false);
+      expect(keystroke(EV_SHIFT_F, CODE_F)).toBe(false);
+      expect(keystroke(EV_SHIFT_F, CODE_F, 'c')).toBe(false);
+    });
+
+    it('is case-insensitive', () => {
+      expect(keystroke(EV_ALL_F, CODE_F, 'ACMS')).toBe(true);
+    });
+
+    it('handles bogus inputs', () => {
+      expect(keystroke(EV_F, 'not a keystroke')).toBe(false);
+      expect(keystroke(EV_F, null)).toBe(false);
+    });
+
+    it('handles exact modifier keys, in any order', () => {
+      // Test permutations of modifiers
+      expect(keystroke(EV_ALL_F, CODE_F, 'acms')).toBe(true);
+      expect(keystroke(EV_ALL_F, CODE_F, 'smca')).toBe(true);
+      expect(keystroke(EV_ALL_F, CODE_F, 'csma')).toBe(true);
+      expect(keystroke(EV_CONTROL_SHIFT_F, CODE_F, 'cs')).toBe(true);
+      expect(keystroke(EV_CONTROL_SHIFT_F, CODE_F, 'sc')).toBe(true);
+
+      // Test wrong modifiers
+      expect(keystroke(EV_ALL_F, CODE_F, 'smca')).toBe(true);
+      expect(keystroke(EV_ALL_F, CODE_F)).toBe(false);
+      expect(keystroke(EV_ALL_F, CODE_F, '')).toBe(false);
+      expect(keystroke(EV_ALL_F, CODE_F, 'c')).toBe(false);
+      expect(keystroke(EV_ALL_F, CODE_F, 'ca')).toBe(false);
+      expect(keystroke(EV_ALL_F, CODE_F, 'ms')).toBe(false);
+      expect(keystroke(EV_CONTROL_SHIFT_F, CODE_F, 'cs')).toBe(true);
+      expect(keystroke(EV_CONTROL_SHIFT_F, CODE_F, 'c')).toBe(false);
+      expect(keystroke(EV_CONTROL_SHIFT_F, CODE_F, 's')).toBe(false);
+      expect(keystroke(EV_CONTROL_SHIFT_F, CODE_F, 'csa')).toBe(false);
+      expect(keystroke(EV_CONTROL_SHIFT_F, CODE_F, 'm')).toBe(false);
+      expect(keystroke(EV_SHIFT_F, CODE_F, 's')).toBe(true);
+      expect(keystroke(EV_SHIFT_F, CODE_F, 'c')).toBe(false);
+      expect(keystroke(EV_SHIFT_F, CODE_F, 'csm')).toBe(false);
+    });
+
+    it('handles the platform-dependent leader key', () => {
+      navigator.platform = 'Win32';
+      let EV_UNDO = k(CODE_Z, 'c');
+      let EV_REDO = k(CODE_Z, 'cs');
+      expect(keystroke(EV_UNDO, CODE_Z, 'l')).toBe(true);
+      expect(keystroke(EV_UNDO, CODE_Z, 'c')).toBe(true);
+      expect(keystroke(EV_UNDO, CODE_Z, 'm')).toBe(false);
+      expect(keystroke(EV_REDO, CODE_Z, 'sl')).toBe(true);
+      expect(keystroke(EV_REDO, CODE_Z, 'sc')).toBe(true);
+      expect(keystroke(EV_REDO, CODE_Z, 'sm')).toBe(false);
+
+      navigator.platform = 'MacIntel';
+      EV_UNDO = k(CODE_Z, 'm');
+      EV_REDO = k(CODE_Z, 'ms');
+      expect(keystroke(EV_UNDO, CODE_Z, 'l')).toBe(true);
+      expect(keystroke(EV_UNDO, CODE_Z, 'c')).toBe(false);
+      expect(keystroke(EV_UNDO, CODE_Z, 'm')).toBe(true);
+      expect(keystroke(EV_REDO, CODE_Z, 'sl')).toBe(true);
+      expect(keystroke(EV_REDO, CODE_Z, 'sc')).toBe(false);
+      expect(keystroke(EV_REDO, CODE_Z, 'sm')).toBe(true);
+    });
+  });
+});
diff --git a/spec/frontend/lib/utils/text_utility_spec.js b/spec/frontend/lib/utils/text_utility_spec.js
index dc886d0db3b..b6f1aef9ce4 100644
--- a/spec/frontend/lib/utils/text_utility_spec.js
+++ b/spec/frontend/lib/utils/text_utility_spec.js
@@ -29,20 +29,6 @@ describe('text_utility', () => {
     });
   });
 
-  describe('pluralize', () => {
-    it('should pluralize given string', () => {
-      expect(textUtils.pluralize('test', 2)).toBe('tests');
-    });
-
-    it('should pluralize when count is 0', () => {
-      expect(textUtils.pluralize('test', 0)).toBe('tests');
-    });
-
-    it('should not pluralize when count is 1', () => {
-      expect(textUtils.pluralize('test', 1)).toBe('test');
-    });
-  });
-
   describe('dasherize', () => {
     it('should replace underscores with dashes', () => {
       expect(textUtils.dasherize('foo_bar_foo')).toEqual('foo-bar-foo');
diff --git a/spec/frontend/lib/utils/undo_stack_spec.js b/spec/frontend/lib/utils/undo_stack_spec.js
new file mode 100644
index 00000000000..31ad0e77d6f
--- /dev/null
+++ b/spec/frontend/lib/utils/undo_stack_spec.js
@@ -0,0 +1,237 @@
+import UndoStack from '~/lib/utils/undo_stack';
+
+import { isEqual } from 'underscore';
+
+describe('UndoStack', () => {
+  let stack;
+
+  beforeEach(() => {
+    stack = new UndoStack();
+  });
+
+  afterEach(() => {
+    // Make sure there's not pending saves
+    const history = Array.from(stack.history);
+    jest.runAllTimers();
+    expect(stack.history).toEqual(history);
+  });
+
+  it('is blank on construction', () => {
+    expect(stack.isEmpty()).toBe(true);
+    expect(stack.history).toEqual([]);
+    expect(stack.cursor).toBe(-1);
+    expect(stack.canUndo()).toBe(false);
+    expect(stack.canRedo()).toBe(false);
+  });
+
+  it('handles simple undo/redo behaviour', () => {
+    stack.save(10);
+    stack.save(11);
+    stack.save(12);
+
+    expect(stack.history).toEqual([10, 11, 12]);
+    expect(stack.cursor).toBe(2);
+    expect(stack.current()).toBe(12);
+    expect(stack.isEmpty()).toBe(false);
+    expect(stack.canUndo()).toBe(true);
+    expect(stack.canRedo()).toBe(false);
+
+    stack.undo();
+    expect(stack.history).toEqual([10, 11, 12]);
+    expect(stack.current()).toBe(11);
+    expect(stack.canUndo()).toBe(true);
+    expect(stack.canRedo()).toBe(true);
+
+    stack.undo();
+    expect(stack.current()).toBe(10);
+    expect(stack.canUndo()).toBe(false);
+    expect(stack.canRedo()).toBe(true);
+
+    stack.redo();
+    expect(stack.current()).toBe(11);
+
+    stack.redo();
+    expect(stack.current()).toBe(12);
+    expect(stack.isEmpty()).toBe(false);
+    expect(stack.canUndo()).toBe(true);
+    expect(stack.canRedo()).toBe(false);
+
+    // Saving should clear the redo stack
+    stack.undo();
+    stack.save(13);
+    expect(stack.history).toEqual([10, 11, 13]);
+    expect(stack.current()).toBe(13);
+  });
+
+  it('clear() should clear the undo history', () => {
+    stack.save(0);
+    stack.save(1);
+    stack.save(2);
+    stack.clear();
+    expect(stack.history).toEqual([]);
+    expect(stack.current()).toBeUndefined();
+  });
+
+  it('undo and redo are no-ops if unavailable', () => {
+    stack.save(10);
+    expect(stack.canRedo()).toBe(false);
+    expect(stack.canUndo()).toBe(false);
+
+    stack.save(11);
+    expect(stack.canRedo()).toBe(false);
+    expect(stack.canUndo()).toBe(true);
+
+    expect(stack.redo()).toBeUndefined();
+    expect(stack.history).toEqual([10, 11]);
+    expect(stack.current()).toBe(11);
+    expect(stack.canRedo()).toBe(false);
+    expect(stack.canUndo()).toBe(true);
+
+    expect(stack.undo()).toBe(10);
+    expect(stack.undo()).toBeUndefined();
+    expect(stack.history).toEqual([10, 11]);
+    expect(stack.current()).toBe(10);
+    expect(stack.canRedo()).toBe(true);
+    expect(stack.canUndo()).toBe(false);
+  });
+
+  it('should not save a duplicate state', () => {
+    stack.save(10);
+    stack.save(11);
+    stack.save(11);
+    stack.save(10);
+    stack.save(10);
+
+    expect(stack.history).toEqual([10, 11, 10]);
+  });
+
+  it('uses the === operator to detect duplicates', () => {
+    stack.save(10);
+    stack.save(10);
+    expect(stack.history).toEqual([10]);
+
+    // eslint-disable-next-line eqeqeq
+    expect(2 == '2' && '2' == 2).toBe(true);
+    stack.clear();
+    stack.save(2);
+    stack.save(2);
+    stack.save('2');
+    stack.save('2');
+    stack.save(2);
+    expect(stack.history).toEqual([2, '2', 2]);
+
+    const obj = {};
+    stack.clear();
+    stack.save(obj);
+    stack.save(obj);
+    stack.save({});
+    stack.save({});
+    expect(stack.history).toEqual([{}, {}, {}]);
+  });
+
+  it('should allow custom comparators', () => {
+    stack.comparator = isEqual;
+    const obj = {};
+    stack.clear();
+    stack.save(obj);
+    stack.save(obj);
+    stack.save({});
+    stack.save({});
+    expect(stack.history).toEqual([{}]);
+  });
+
+  it('should enforce a max number of undo states', () => {
+    // Try 2000 saves. Only the last 1000 should be preserved.
+    const sequence = Array(2000)
+      .fill(0)
+      .map((el, i) => i);
+    sequence.forEach(stack.save.bind(stack));
+    expect(stack.history.length).toBe(1000);
+    expect(stack.history).toEqual(sequence.slice(1000));
+    expect(stack.current()).toBe(1999);
+    expect(stack.canUndo()).toBe(true);
+    expect(stack.canRedo()).toBe(false);
+
+    // Saving drops the oldest elements from the stack
+    stack.save('end');
+    expect(stack.history.length).toBe(1000);
+    expect(stack.current()).toBe('end');
+    expect(stack.history).toEqual([...sequence.slice(1001), 'end']);
+
+    // If states were undone but the history is full, can still add.
+    stack.undo();
+    stack.undo();
+    expect(stack.current()).toBe(1998);
+    stack.save(3000);
+    expect(stack.history.length).toBe(999);
+    // should be [1001, 1002, ..., 1998, 3000]
+    expect(stack.history).toEqual([...sequence.slice(1001, 1999), 3000]);
+
+    // Try a different max length
+    stack = new UndoStack(2);
+    stack.save(0);
+    expect(stack.history).toEqual([0]);
+    stack.save(1);
+    expect(stack.history).toEqual([0, 1]);
+    stack.save(2);
+    expect(stack.history).toEqual([1, 2]);
+  });
+
+  describe('scheduled saves', () => {
+    it('should work', () => {
+      // Schedules 1000 ms ahead by default
+      stack.save(0);
+      stack.scheduleSave(1);
+      expect(stack.history).toEqual([0]);
+      jest.advanceTimersByTime(999);
+      expect(stack.history).toEqual([0]);
+      jest.advanceTimersByTime(1);
+      expect(stack.history).toEqual([0, 1]);
+    });
+
+    it('should have an adjustable delay', () => {
+      stack.scheduleSave(2, 100);
+      jest.advanceTimersByTime(100);
+      expect(stack.history).toEqual([2]);
+    });
+
+    it('should cancel previous scheduled saves', () => {
+      stack.scheduleSave(3);
+      jest.advanceTimersByTime(100);
+      stack.scheduleSave(4);
+      jest.runAllTimers();
+      expect(stack.history).toEqual([4]);
+    });
+
+    it('should be canceled by explicit saves', () => {
+      stack.scheduleSave(5);
+      stack.save(6);
+      jest.runAllTimers();
+      expect(stack.history).toEqual([6]);
+    });
+
+    it('should be canceled by undos and redos', () => {
+      stack.save(1);
+      stack.save(2);
+      stack.scheduleSave(3);
+      stack.undo();
+      jest.runAllTimers();
+      expect(stack.history).toEqual([1, 2]);
+      expect(stack.current()).toBe(1);
+
+      stack.scheduleSave(4);
+      stack.redo();
+      jest.runAllTimers();
+      expect(stack.history).toEqual([1, 2]);
+      expect(stack.current()).toBe(2);
+    });
+
+    it('should be persisted immediately with saveNow()', () => {
+      stack.scheduleSave(7);
+      stack.scheduleSave(8);
+      stack.saveNow();
+      jest.runAllTimers();
+      expect(stack.history).toEqual([8]);
+    });
+  });
+});
diff --git a/spec/frontend/monitoring/embed/embed_spec.js b/spec/frontend/monitoring/embed/embed_spec.js
new file mode 100644
index 00000000000..3b18a0f77c7
--- /dev/null
+++ b/spec/frontend/monitoring/embed/embed_spec.js
@@ -0,0 +1,78 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import Embed from '~/monitoring/components/embed.vue';
+import MonitorAreaChart from '~/monitoring/components/charts/area.vue';
+import { TEST_HOST } from 'helpers/test_constants';
+import { groups, initialState, metricsData, metricsWithData } from './mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('Embed', () => {
+  let wrapper;
+  let store;
+  let actions;
+
+  function mountComponent() {
+    wrapper = shallowMount(Embed, {
+      localVue,
+      store,
+      propsData: {
+        dashboardUrl: TEST_HOST,
+      },
+    });
+  }
+
+  beforeEach(() => {
+    actions = {
+      setFeatureFlags: () => {},
+      setShowErrorBanner: () => {},
+      setEndpoints: () => {},
+      fetchMetricsData: () => {},
+    };
+
+    store = new Vuex.Store({
+      modules: {
+        monitoringDashboard: {
+          namespaced: true,
+          actions,
+          state: initialState,
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  describe('no metrics are available yet', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
+
+    it('shows an empty state when no metrics are present', () => {
+      expect(wrapper.find('.metrics-embed').exists()).toBe(true);
+      expect(wrapper.find(MonitorAreaChart).exists()).toBe(false);
+    });
+  });
+
+  describe('metrics are available', () => {
+    beforeEach(() => {
+      store.state.monitoringDashboard.groups = groups;
+      store.state.monitoringDashboard.groups[0].metrics = metricsData;
+      store.state.monitoringDashboard.metricsWithData = metricsWithData;
+
+      mountComponent();
+    });
+
+    it('shows a chart when metrics are present', () => {
+      wrapper.setProps({});
+      expect(wrapper.find('.metrics-embed').exists()).toBe(true);
+      expect(wrapper.find(MonitorAreaChart).exists()).toBe(true);
+      expect(wrapper.findAll(MonitorAreaChart).length).toBe(2);
+    });
+  });
+});
diff --git a/spec/frontend/monitoring/embed/mock_data.js b/spec/frontend/monitoring/embed/mock_data.js
new file mode 100644
index 00000000000..df4acb82e95
--- /dev/null
+++ b/spec/frontend/monitoring/embed/mock_data.js
@@ -0,0 +1,87 @@
+export const metricsWithData = [15, 16];
+
+export const groups = [
+  {
+    panels: [
+      {
+        title: 'Memory Usage (Total)',
+        type: 'area-chart',
+        y_label: 'Total Memory Used',
+        weight: 4,
+        metrics: [
+          {
+            id: 'system_metrics_kubernetes_container_memory_total',
+            metric_id: 15,
+          },
+        ],
+      },
+      {
+        title: 'Core Usage (Total)',
+        type: 'area-chart',
+        y_label: 'Total Cores',
+        weight: 3,
+        metrics: [
+          {
+            id: 'system_metrics_kubernetes_container_cores_total',
+            metric_id: 16,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const metrics = [
+  {
+    id: 'system_metrics_kubernetes_container_memory_total',
+    metric_id: 15,
+  },
+  {
+    id: 'system_metrics_kubernetes_container_cores_total',
+    metric_id: 16,
+  },
+];
+
+const queries = [
+  {
+    result: [
+      {
+        values: [
+          ['Mon', 1220],
+          ['Tue', 932],
+          ['Wed', 901],
+          ['Thu', 934],
+          ['Fri', 1290],
+          ['Sat', 1330],
+          ['Sun', 1320],
+        ],
+      },
+    ],
+  },
+];
+
+export const metricsData = [
+  {
+    queries,
+    metrics: [
+      {
+        metric_id: 15,
+      },
+    ],
+  },
+  {
+    queries,
+    metrics: [
+      {
+        metric_id: 16,
+      },
+    ],
+  },
+];
+
+export const initialState = {
+  monitoringDashboard: {},
+  groups: [],
+  metricsWithData: [],
+  useDashboardEndpoint: true,
+};
diff --git a/spec/frontend/projects/gke_cluster_namespace/gke_cluster_namespace_spec.js b/spec/frontend/projects/gke_cluster_namespace/gke_cluster_namespace_spec.js
new file mode 100644
index 00000000000..7b8df03d3c3
--- /dev/null
+++ b/spec/frontend/projects/gke_cluster_namespace/gke_cluster_namespace_spec.js
@@ -0,0 +1,61 @@
+import initGkeNamespace from '~/projects/gke_cluster_namespace';
+
+describe('GKE cluster namespace', () => {
+  const changeEvent = new Event('change');
+  const isHidden = el => el.classList.contains('hidden');
+  const hasDisabledInput = el => el.querySelector('input').disabled;
+
+  let glManagedCheckbox;
+  let selfManaged;
+  let glManaged;
+
+  beforeEach(() => {
+    setFixtures(`
+      <input class="js-gl-managed" type="checkbox" value="1" checked />
+      <div class="js-namespace">
+        <input type="text" />
+      </div>      
+      <div class="js-namespace-prefixed">
+        <input type="text" />
+      </div>
+    `);
+
+    glManagedCheckbox = document.querySelector('.js-gl-managed');
+    selfManaged = document.querySelector('.js-namespace');
+    glManaged = document.querySelector('.js-namespace-prefixed');
+
+    initGkeNamespace();
+  });
+
+  describe('GKE cluster namespace toggles', () => {
+    it('initially displays the GitLab-managed label and input', () => {
+      expect(isHidden(glManaged)).toEqual(false);
+      expect(hasDisabledInput(glManaged)).toEqual(false);
+
+      expect(isHidden(selfManaged)).toEqual(true);
+      expect(hasDisabledInput(selfManaged)).toEqual(true);
+    });
+
+    it('displays the self-managed label and input when the Gitlab-managed checkbox is unchecked', () => {
+      glManagedCheckbox.checked = false;
+      glManagedCheckbox.dispatchEvent(changeEvent);
+
+      expect(isHidden(glManaged)).toEqual(true);
+      expect(hasDisabledInput(glManaged)).toEqual(true);
+
+      expect(isHidden(selfManaged)).toEqual(false);
+      expect(hasDisabledInput(selfManaged)).toEqual(false);
+    });
+
+    it('displays the GitLab-managed label and input when the Gitlab-managed checkbox is checked', () => {
+      glManagedCheckbox.checked = true;
+      glManagedCheckbox.dispatchEvent(changeEvent);
+
+      expect(isHidden(glManaged)).toEqual(false);
+      expect(hasDisabledInput(glManaged)).toEqual(false);
+
+      expect(isHidden(selfManaged)).toEqual(true);
+      expect(hasDisabledInput(selfManaged)).toEqual(true);
+    });
+  });
+});
diff --git a/spec/frontend/test_setup.js b/spec/frontend/test_setup.js
index 634c78ec029..e4d62b044ca 100644
--- a/spec/frontend/test_setup.js
+++ b/spec/frontend/test_setup.js
@@ -69,3 +69,9 @@ Object.entries(jqueryMatchers).forEach(([matcherName, matcherFactory]) => {
 
 // Tech debt issue TBD
 testUtilsConfig.logModifiedComponents = false;
+
+// Basic stub for MutationObserver
+global.MutationObserver = () => ({
+  disconnect: () => {},
+  observe: () => {},
+});