Add latest changes from gitlab-org/gitlab@12-10-stable-ee

5 files changed, 515 insertions, 70 deletions

diff --git a/spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap
new file mode 100644
index 00000000000..df4b30f1cb8
--- /dev/null
+++ b/spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap
@@ -0,0 +1,287 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
+<div
+  class="awards js-awards-block"
+>
+  <button
+    class="btn award-control"
+    data-boundary="viewport"
+    data-original-title="Ada, Leonardo, and Marie"
+    data-testid="award-button"
+    title=""
+    type="button"
+  >
+    <span
+      data-testid="award-html"
+    >
+      
+    
+      <gl-emoji
+        data-fallback-src="/assets/emoji/thumbsup-59ec2457ab33e8897261d01a495f6cf5c668d0004807dc541c3b1be5294b1e61.png"
+        data-name="thumbsup"
+        data-unicode-version="6.0"
+        title="thumbs up sign"
+      >
+        
+      👍
+    
+      </gl-emoji>
+      
+  
+    </span>
+     
+    <span
+      class="award-control-text js-counter"
+    >
+      3
+    </span>
+  </button>
+  <button
+    class="btn award-control active"
+    data-boundary="viewport"
+    data-original-title="You, Ada, and Marie"
+    data-testid="award-button"
+    title=""
+    type="button"
+  >
+    <span
+      data-testid="award-html"
+    >
+      
+    
+      <gl-emoji
+        data-fallback-src="/assets/emoji/thumbsdown-5954334e2dae5357312b3d629f10a496c728029e02216f8c8b887f9b51561c61.png"
+        data-name="thumbsdown"
+        data-unicode-version="6.0"
+        title="thumbs down sign"
+      >
+        
+      👎
+    
+      </gl-emoji>
+      
+  
+    </span>
+     
+    <span
+      class="award-control-text js-counter"
+    >
+      3
+    </span>
+  </button>
+  <button
+    class="btn award-control"
+    data-boundary="viewport"
+    data-original-title="Ada and Jane"
+    data-testid="award-button"
+    title=""
+    type="button"
+  >
+    <span
+      data-testid="award-html"
+    >
+      
+    
+      <gl-emoji
+        data-fallback-src="/assets/emoji/smile-14905c372d5bf7719bd727c9efae31a03291acec79801652a23710c6848c5d14.png"
+        data-name="smile"
+        data-unicode-version="6.0"
+        title="smiling face with open mouth and smiling eyes"
+      >
+        
+      😄
+    
+      </gl-emoji>
+      
+  
+    </span>
+     
+    <span
+      class="award-control-text js-counter"
+    >
+      2
+    </span>
+  </button>
+  <button
+    class="btn award-control active"
+    data-boundary="viewport"
+    data-original-title="You, Ada, Jane, and Leonardo"
+    data-testid="award-button"
+    title=""
+    type="button"
+  >
+    <span
+      data-testid="award-html"
+    >
+      
+    
+      <gl-emoji
+        data-fallback-src="/assets/emoji/ok_hand-d63002dce3cc3655b67b8765b7c28d370edba0e3758b2329b60e0e61c4d8e78d.png"
+        data-name="ok_hand"
+        data-unicode-version="6.0"
+        title="ok hand sign"
+      >
+        
+      👌
+    
+      </gl-emoji>
+      
+  
+    </span>
+     
+    <span
+      class="award-control-text js-counter"
+    >
+      4
+    </span>
+  </button>
+  <button
+    class="btn award-control active"
+    data-boundary="viewport"
+    data-original-title="You"
+    data-testid="award-button"
+    title=""
+    type="button"
+  >
+    <span
+      data-testid="award-html"
+    >
+      
+    
+      <gl-emoji
+        data-fallback-src="/assets/emoji/cactus-2c5c4c35f26c7046fdc002b337e0d939729b33a26980e675950f9934c91e40fd.png"
+        data-name="cactus"
+        data-unicode-version="6.0"
+        title="cactus"
+      >
+        
+      🌵
+    
+      </gl-emoji>
+      
+  
+    </span>
+     
+    <span
+      class="award-control-text js-counter"
+    >
+      1
+    </span>
+  </button>
+  <button
+    class="btn award-control"
+    data-boundary="viewport"
+    data-original-title="Marie"
+    data-testid="award-button"
+    title=""
+    type="button"
+  >
+    <span
+      data-testid="award-html"
+    >
+      
+    
+      <gl-emoji
+        data-fallback-src="/assets/emoji/a-bddbb39e8a1d35d42b7c08e7d47f63988cb4d8614b79f74e70b9c67c221896cc.png"
+        data-name="a"
+        data-unicode-version="6.0"
+        title="negative squared latin capital letter a"
+      >
+        
+      🅰
+    
+      </gl-emoji>
+      
+  
+    </span>
+     
+    <span
+      class="award-control-text js-counter"
+    >
+      1
+    </span>
+  </button>
+  <button
+    class="btn award-control active"
+    data-boundary="viewport"
+    data-original-title="You"
+    data-testid="award-button"
+    title=""
+    type="button"
+  >
+    <span
+      data-testid="award-html"
+    >
+      
+    
+      <gl-emoji
+        data-fallback-src="/assets/emoji/b-722f9db9442e7c0fc0d0ac0f5291fbf47c6a0ac4d8abd42e97957da705fb82bf.png"
+        data-name="b"
+        data-unicode-version="6.0"
+        title="negative squared latin capital letter b"
+      >
+        
+      🅱
+    
+      </gl-emoji>
+      
+  
+    </span>
+     
+    <span
+      class="award-control-text js-counter"
+    >
+      1
+    </span>
+  </button>
+   
+  <div
+    class="award-menu-holder"
+  >
+    <button
+      aria-label="Add reaction"
+      class="award-control btn js-add-award js-test-add-button-class"
+      data-boundary="viewport"
+      data-original-title="Add reaction"
+      title=""
+      type="button"
+    >
+      <span
+        class="award-control-icon award-control-icon-neutral"
+      >
+        <gl-icon-stub
+          aria-hidden="true"
+          name="slight-smile"
+          size="16"
+        />
+      </span>
+       
+      <span
+        class="award-control-icon award-control-icon-positive"
+      >
+        <gl-icon-stub
+          aria-hidden="true"
+          name="smiley"
+          size="16"
+        />
+      </span>
+       
+      <span
+        class="award-control-icon award-control-icon-super-positive"
+      >
+        <gl-icon-stub
+          aria-hidden="true"
+          name="smiley"
+          size="16"
+        />
+      </span>
+       
+      <i
+        aria-hidden="true"
+        class="fa fa-spinner fa-spin award-control-icon award-control-icon-loading"
+      />
+    </button>
+  </div>
+</div>
+`;
diff --git a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
index d837c793784..4cd03a690e9 100644
--- a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
+++ b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
@@ -42,7 +42,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
           <b-input-group-append-stub
             tag="div"
           >
-            <gl-new-button-stub
+            <gl-button-stub
               category="tertiary"
               data-clipboard-text="ssh://foo.bar"
               icon=""
@@ -55,7 +55,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
                 size="16"
                 title="Copy URL"
               />
-            </gl-new-button-stub>
+            </gl-button-stub>
           </b-input-group-append-stub>
         </b-input-group-stub>
       </div>
@@ -92,7 +92,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
           <b-input-group-append-stub
             tag="div"
           >
-            <gl-new-button-stub
+            <gl-button-stub
               category="tertiary"
               data-clipboard-text="http://foo.bar"
               icon=""
@@ -105,7 +105,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
                 size="16"
                 title="Copy URL"
               />
-            </gl-new-button-stub>
+            </gl-button-stub>
           </b-input-group-append-stub>
         </b-input-group-stub>
       </div>
diff --git a/spec/frontend/vue_shared/components/awards_list_spec.js b/spec/frontend/vue_shared/components/awards_list_spec.js
new file mode 100644
index 00000000000..bb3e60ab9e2
--- /dev/null
+++ b/spec/frontend/vue_shared/components/awards_list_spec.js
@@ -0,0 +1,213 @@
+import { shallowMount } from '@vue/test-utils';
+import AwardsList from '~/vue_shared/components/awards_list.vue';
+
+const createUser = (id, name) => ({ id, name });
+const createAward = (name, user) => ({ name, user });
+
+const USERS = {
+  root: createUser(1, 'Root'),
+  ada: createUser(2, 'Ada'),
+  marie: createUser(3, 'Marie'),
+  jane: createUser(4, 'Jane'),
+  leonardo: createUser(5, 'Leonardo'),
+};
+
+const EMOJI_SMILE = 'smile';
+const EMOJI_OK = 'ok_hand';
+const EMOJI_THUMBSUP = 'thumbsup';
+const EMOJI_THUMBSDOWN = 'thumbsdown';
+const EMOJI_A = 'a';
+const EMOJI_B = 'b';
+const EMOJI_CACTUS = 'cactus';
+const EMOJI_100 = '100';
+
+const TEST_AWARDS = [
+  createAward(EMOJI_SMILE, USERS.ada),
+  createAward(EMOJI_OK, USERS.ada),
+  createAward(EMOJI_THUMBSUP, USERS.ada),
+  createAward(EMOJI_THUMBSDOWN, USERS.ada),
+  createAward(EMOJI_SMILE, USERS.jane),
+  createAward(EMOJI_OK, USERS.jane),
+  createAward(EMOJI_OK, USERS.leonardo),
+  createAward(EMOJI_THUMBSUP, USERS.leonardo),
+  createAward(EMOJI_THUMBSUP, USERS.marie),
+  createAward(EMOJI_THUMBSDOWN, USERS.marie),
+  createAward(EMOJI_THUMBSDOWN, USERS.root),
+  createAward(EMOJI_OK, USERS.root),
+  // Test that emoji list preserves order of occurrence, not alphabetical order
+  createAward(EMOJI_CACTUS, USERS.root),
+  createAward(EMOJI_A, USERS.marie),
+  createAward(EMOJI_B, USERS.root),
+];
+const TEST_ADD_BUTTON_CLASS = 'js-test-add-button-class';
+
+describe('vue_shared/components/awards_list', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const createComponent = (props = {}) => {
+    if (wrapper) {
+      throw new Error('There should only be one wrapper created per test');
+    }
+
+    wrapper = shallowMount(AwardsList, { propsData: props });
+  };
+  const matchingEmojiTag = name => expect.stringMatching(`gl-emoji data-name="${name}"`);
+  const findAwardButtons = () => wrapper.findAll('[data-testid="award-button"');
+  const findAwardsData = () =>
+    findAwardButtons().wrappers.map(x => {
+      return {
+        classes: x.classes(),
+        title: x.attributes('data-original-title'),
+        html: x.find('[data-testid="award-html"]').element.innerHTML,
+        count: Number(x.find('.js-counter').text()),
+      };
+    });
+  const findAddAwardButton = () => wrapper.find('.js-add-award');
+
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent({
+        awards: TEST_AWARDS,
+        canAwardEmoji: true,
+        currentUserId: USERS.root.id,
+        addButtonClass: TEST_ADD_BUTTON_CLASS,
+      });
+    });
+
+    it('matches snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('shows awards in correct order', () => {
+      expect(findAwardsData()).toEqual([
+        {
+          classes: ['btn', 'award-control'],
+          count: 3,
+          html: matchingEmojiTag(EMOJI_THUMBSUP),
+          title: 'Ada, Leonardo, and Marie',
+        },
+        {
+          classes: ['btn', 'award-control', 'active'],
+          count: 3,
+          html: matchingEmojiTag(EMOJI_THUMBSDOWN),
+          title: 'You, Ada, and Marie',
+        },
+        {
+          classes: ['btn', 'award-control'],
+          count: 2,
+          html: matchingEmojiTag(EMOJI_SMILE),
+          title: 'Ada and Jane',
+        },
+        {
+          classes: ['btn', 'award-control', 'active'],
+          count: 4,
+          html: matchingEmojiTag(EMOJI_OK),
+          title: 'You, Ada, Jane, and Leonardo',
+        },
+        {
+          classes: ['btn', 'award-control', 'active'],
+          count: 1,
+          html: matchingEmojiTag(EMOJI_CACTUS),
+          title: 'You',
+        },
+        {
+          classes: ['btn', 'award-control'],
+          count: 1,
+          html: matchingEmojiTag(EMOJI_A),
+          title: 'Marie',
+        },
+        {
+          classes: ['btn', 'award-control', 'active'],
+          count: 1,
+          html: matchingEmojiTag(EMOJI_B),
+          title: 'You',
+        },
+      ]);
+    });
+
+    it('with award clicked, it emits award', () => {
+      expect(wrapper.emitted().award).toBeUndefined();
+
+      findAwardButtons()
+        .at(2)
+        .trigger('click');
+
+      expect(wrapper.emitted().award).toEqual([[EMOJI_SMILE]]);
+    });
+
+    it('shows add award button', () => {
+      const btn = findAddAwardButton();
+
+      expect(btn.exists()).toBe(true);
+      expect(btn.classes(TEST_ADD_BUTTON_CLASS)).toBe(true);
+    });
+  });
+
+  describe('with numeric award', () => {
+    beforeEach(() => {
+      createComponent({
+        awards: [createAward(EMOJI_100, USERS.ada)],
+        canAwardEmoji: true,
+        currentUserId: USERS.root.id,
+      });
+    });
+
+    it('when clicked, it emits award as number', () => {
+      expect(wrapper.emitted().award).toBeUndefined();
+
+      findAwardButtons()
+        .at(0)
+        .trigger('click');
+
+      expect(wrapper.emitted().award).toEqual([[Number(EMOJI_100)]]);
+    });
+  });
+
+  describe('with no awards', () => {
+    beforeEach(() => {
+      createComponent({
+        awards: [],
+        canAwardEmoji: true,
+      });
+    });
+
+    it('has no award buttons', () => {
+      expect(findAwardButtons().length).toBe(0);
+    });
+  });
+
+  describe('when cannot award emoji', () => {
+    beforeEach(() => {
+      createComponent({
+        awards: [createAward(EMOJI_CACTUS, USERS.root.id)],
+        canAwardEmoji: false,
+        currentUserId: USERS.marie.id,
+      });
+    });
+
+    it('does not have add button', () => {
+      expect(findAddAwardButton().exists()).toBe(false);
+    });
+  });
+
+  describe('with no user', () => {
+    beforeEach(() => {
+      createComponent({
+        awards: TEST_AWARDS,
+        canAwardEmoji: false,
+      });
+    });
+
+    it('disables award buttons', () => {
+      const buttons = findAwardButtons();
+
+      expect(buttons.length).toBe(7);
+      expect(buttons.wrappers.every(x => x.classes('disabled'))).toBe(true);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/form/__snapshots__/title_spec.js.snap b/spec/frontend/vue_shared/components/form/__snapshots__/title_spec.js.snap
index 980e9b517db..e5035614196 100644
--- a/spec/frontend/vue_shared/components/form/__snapshots__/title_spec.js.snap
+++ b/spec/frontend/vue_shared/components/form/__snapshots__/title_spec.js.snap
@@ -5,8 +5,6 @@ exports[`Title edit field matches the snapshot 1`] = `
   label="Title"
   label-for="title-field-edit"
 >
-  <gl-form-input-stub
-    id="title-field-edit"
-  />
+  <gl-form-input-stub />
 </gl-form-group-stub>
 `;
diff --git a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
index a2e2d2447d5..2c7fce714f0 100644
--- a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
+++ b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
@@ -10,8 +10,7 @@ const DEFAULT_PROPS = {
     name: 'Administrator',
     location: 'Vienna',
     bio: null,
-    organization: null,
-    jobTitle: null,
+    workInformation: null,
     status: null,
   },
 };
@@ -59,8 +58,7 @@ describe('User Popover Component', () => {
               username: null,
               location: null,
               bio: null,
-              organization: null,
-              jobTitle: null,
+              workInformation: null,
               status: null,
             },
           },
@@ -93,7 +91,7 @@ describe('User Popover Component', () => {
     const findWorkInformation = () => wrapper.find({ ref: 'workInformation' });
     const findBio = () => wrapper.find({ ref: 'bio' });
 
-    it('should show only bio if organization and job title are not available', () => {
+    it('should show only bio if work information is not available', () => {
       const user = { ...DEFAULT_PROPS.user, bio: 'My super interesting bio' };
 
       createWrapper({ user });
@@ -102,27 +100,10 @@ describe('User Popover Component', () => {
       expect(findWorkInformation().exists()).toBe(false);
     });
 
-    it('should show only organization if job title is not available', () => {
-      const user = { ...DEFAULT_PROPS.user, organization: 'GitLab' };
-
-      createWrapper({ user });
-
-      expect(findWorkInformation().text()).toBe('GitLab');
-    });
-
-    it('should show only job title if organization is not available', () => {
-      const user = { ...DEFAULT_PROPS.user, jobTitle: 'Frontend Engineer' };
-
-      createWrapper({ user });
-
-      expect(findWorkInformation().text()).toBe('Frontend Engineer');
-    });
-
-    it('should show organization and job title if they are both available', () => {
+    it('should show work information when it is available', () => {
       const user = {
         ...DEFAULT_PROPS.user,
-        organization: 'GitLab',
-        jobTitle: 'Frontend Engineer',
+        workInformation: 'Frontend Engineer at GitLab',
       };
 
       createWrapper({ user });
@@ -130,17 +111,17 @@ describe('User Popover Component', () => {
       expect(findWorkInformation().text()).toBe('Frontend Engineer at GitLab');
     });
 
-    it('should display bio and job info in separate lines', () => {
+    it('should display bio and work information in separate lines', () => {
       const user = {
         ...DEFAULT_PROPS.user,
         bio: 'My super interesting bio',
-        organization: 'GitLab',
+        workInformation: 'Frontend Engineer at GitLab',
       };
 
       createWrapper({ user });
 
       expect(findBio().text()).toBe('My super interesting bio');
-      expect(findWorkInformation().text()).toBe('GitLab');
+      expect(findWorkInformation().text()).toBe('Frontend Engineer at GitLab');
     });
 
     it('should not encode special characters in bio', () => {
@@ -154,40 +135,6 @@ describe('User Popover Component', () => {
       expect(findBio().text()).toBe('I like <html> & CSS');
     });
 
-    it('should not encode special characters in organization', () => {
-      const user = {
-        ...DEFAULT_PROPS.user,
-        organization: 'Me & my <funky> Company',
-      };
-
-      createWrapper({ user });
-
-      expect(findWorkInformation().text()).toBe('Me & my <funky> Company');
-    });
-
-    it('should not encode special characters in job title', () => {
-      const user = {
-        ...DEFAULT_PROPS.user,
-        jobTitle: 'Manager & Team Lead',
-      };
-
-      createWrapper({ user });
-
-      expect(findWorkInformation().text()).toBe('Manager & Team Lead');
-    });
-
-    it('should not encode special characters when both job title and organization are set', () => {
-      const user = {
-        ...DEFAULT_PROPS.user,
-        jobTitle: 'Manager & Team Lead',
-        organization: 'Me & my <funky> Company',
-      };
-
-      createWrapper({ user });
-
-      expect(findWorkInformation().text()).toBe('Manager & Team Lead at Me & my <funky> Company');
-    });
-
     it('shows icon for bio', () => {
       const user = {
         ...DEFAULT_PROPS.user,
@@ -201,10 +148,10 @@ describe('User Popover Component', () => {
       );
     });
 
-    it('shows icon for organization', () => {
+    it('shows icon for work information', () => {
       const user = {
         ...DEFAULT_PROPS.user,
-        organization: 'GitLab',
+        workInformation: 'GitLab',
       };
 
       createWrapper({ user });