Add latest changes from gitlab-org/gitlab@master

app/assets/javascripts/badges/components/badge.vue

@@ -14,6 +14,11 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
+    name: {
+      type: String,
+      required: false,
+      default: '',
+    },
     imageUrl: {
       type: String,
       required: true,

app/assets/javascripts/badges/components/badge_form.vue

@@ -4,7 +4,7 @@ import { mapActions, mapState } from 'vuex';
 import createFlash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlFormInput, GlFormGroup } from '@gitlab/ui';
 import createEmptyBadge from '../empty_badge';
 import Badge from './badge.vue';
 
@@ -16,6 +16,8 @@ export default {
     Badge,
     LoadingButton,
     GlLoadingIcon,
+    GlFormInput,
+    GlFormGroup,
   },
   props: {
     isEditing: {
@@ -64,6 +66,18 @@ export default {
     renderedLinkUrl() {
       return this.renderedBadge ? this.renderedBadge.renderedLinkUrl : '';
     },
+    name: {
+      get() {
+        return this.badge ? this.badge.name : '';
+      },
+      set(name) {
+        const badge = this.badge || createEmptyBadge();
+        this.updateBadgeInForm({
+          ...badge,
+          name,
+        });
+      },
+    },
     imageUrl: {
       get() {
         return this.badge ? this.badge.imageUrl : '';
@@ -154,6 +168,10 @@ export default {
     novalidate
     @submit.prevent.stop="onSubmit"
   >
+    <gl-form-group :label="s__('Badges|Name')" label-for="badge-name">
+      <gl-form-input id="badge-name" v-model="name" />
+    </gl-form-group>
+
     <div class="form-group">
       <label for="badge-link-url" class="label-bold">{{ s__('Badges|Link') }}</label>
       <p v-html="helpText"></p>

app/assets/javascripts/badges/components/badge_list_row.vue

@@ -43,13 +43,14 @@ export default {
     <badge
       :image-url="badge.renderedImageUrl"
       :link-url="badge.renderedLinkUrl"
-      class="table-section section-40"
+      class="table-section section-30"
     />
-    <span class="table-section section-30 str-truncated">{{ badge.linkUrl }}</span>
-    <div class="table-section section-15">
+    <div class="table-section section-30">
+      <label class="label-bold str-truncated mb-0">{{ badge.name }}</label>
       <span class="badge badge-pill">{{ badgeKindText }}</span>
     </div>
-    <div class="table-section section-15 table-button-footer">
+    <span class="table-section section-30 str-truncated">{{ badge.linkUrl }}</span>
+    <div class="table-section section-10 table-button-footer">
       <div v-if="canEditBadge" class="table-action-buttons">
         <button
           :disabled="badge.isDeleting"

app/assets/javascripts/badges/empty_badge.js

 export default () => ({
+  name: '',
   imageUrl: '',
   isDeleting: false,
   linkUrl: '',

app/assets/javascripts/badges/store/actions.js

 import axios from '~/lib/utils/axios_utils';
 import types from './mutation_types';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 export const transformBackendBadge = badge => ({
-  id: badge.id,
-  imageUrl: badge.image_url,
-  kind: badge.kind,
-  linkUrl: badge.link_url,
-  renderedImageUrl: badge.rendered_image_url,
-  renderedLinkUrl: badge.rendered_link_url,
+  ...convertObjectPropsToCamelCase(badge, true),
   isDeleting: false,
 });
 
@@ -27,6 +23,7 @@ export default {
     dispatch('requestNewBadge');
     return axios
       .post(endpoint, {
+        name: newBadge.name,
         image_url: newBadge.imageUrl,
         link_url: newBadge.linkUrl,
       })
@@ -141,6 +138,7 @@ export default {
     dispatch('requestUpdatedBadge');
     return axios
       .put(endpoint, {
+        name: badge.name,
         image_url: badge.imageUrl,
         link_url: badge.linkUrl,
       })

app/assets/javascripts/lib/utils/text_utility.js

@@ -72,7 +72,7 @@ export const truncate = (string, maxLength) => `${string.substr(0, maxLength - 3
  * @param {String} sha
  * @returns {String}
  */
-export const truncateSha = sha => sha.substr(0, 8);
+export const truncateSha = sha => sha.substring(0, 8);
 
 const ELLIPSIS_CHAR = '…';
 export const truncatePathMiddleToLength = (text, maxWidth) => {

app/assets/javascripts/monitoring/monitoring_tracking_helper.js

+import Tracking from '~/tracking';
+
+const trackDashboardLoad = ({ label, value }) =>
+  Tracking.event(document.body.dataset.page, 'dashboard_fetch', {
+    label,
+    property: 'count',
+    value,
+  });
+
+export default trackDashboardLoad;

app/assets/javascripts/monitoring/stores/actions.js

 import * as types from './mutation_types';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
+import trackDashboardLoad from '../monitoring_tracking_helper';
 import statusCodes from '../../lib/utils/http_status';
 import { backOff } from '../../lib/utils/common_utils';
 import { s__, __ } from '../../locale';
@@ -45,7 +46,7 @@ export const requestMetricsDashboard = ({ commit }) => {
 export const receiveMetricsDashboardSuccess = ({ commit, dispatch }, { response, params }) => {
   commit(types.SET_ALL_DASHBOARDS, response.all_dashboards);
   commit(types.RECEIVE_METRICS_DATA_SUCCESS, response.dashboard.panel_groups);
-  dispatch('fetchPrometheusMetrics', params);
+  return dispatch('fetchPrometheusMetrics', params);
 };
 export const receiveMetricsDashboardFailure = ({ commit }, error) => {
   commit(types.RECEIVE_METRICS_DATA_FAILURE, error);
@@ -83,10 +84,12 @@ export const fetchDashboard = ({ state, dispatch }, params) => {
 
   return backOffRequest(() => axios.get(state.dashboardEndpoint, { params }))
     .then(resp => resp.data)
-    .then(response => {
-      dispatch('receiveMetricsDashboardSuccess', {
-        response,
-        params,
+    .then(response => dispatch('receiveMetricsDashboardSuccess', { response, params }))
+    .then(() => {
+      const dashboardType = state.currentDashboard === '' ? 'default' : 'custom';
+      return trackDashboardLoad({
+        label: `${dashboardType}_metrics_dashboard`,
+        value: state.metricsWithData.length,
       });
     })
     .catch(error => {

app/assets/javascripts/releases/list/components/evidence_block.vue

+<script>
+import { __, sprintf } from '~/locale';
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
+import { truncateSha } from '~/lib/utils/text_utility';
+import Icon from '~/vue_shared/components/icon.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import ExpandButton from '~/vue_shared/components/expand_button.vue';
+
+export default {
+  name: 'EvidenceBlock',
+  components: {
+    ClipboardButton,
+    ExpandButton,
+    GlLink,
+    Icon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    release: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    evidenceTitle() {
+      return sprintf(__('%{tag}-evidence.json'), { tag: this.release.tag_name });
+    },
+    evidenceUrl() {
+      return this.release.assets && this.release.assets.evidence_file_path;
+    },
+    shortSha() {
+      return truncateSha(this.sha);
+    },
+    sha() {
+      return this.release.evidence_sha;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="card-text prepend-top-default">
+      <b>
+        {{ __('Evidence collection') }}
+      </b>
+    </div>
+    <div class="d-flex align-items-baseline">
+      <gl-link
+        v-gl-tooltip
+        class="monospace"
+        :title="__('Download evidence JSON')"
+        :download="evidenceTitle"
+        :href="evidenceUrl"
+      >
+        <icon name="review-list" class="align-top append-right-4" /><span>{{ evidenceTitle }}</span>
+      </gl-link>
+
+      <expand-button>
+        <template slot="short">
+          <span class="js-short monospace">{{ shortSha }}</span>
+        </template>
+        <template slot="expanded">
+          <span class="js-expanded monospace gl-pl-1">{{ sha }}</span>
+        </template>
+      </expand-button>
+      <clipboard-button
+        :title="__('Copy commit SHA')"
+        :text="sha"
+        css-class="btn-default btn-transparent btn-clipboard"
+      />
+    </div>
+  </div>
+</template>

app/assets/javascripts/releases/list/components/release_block.vue

@@ -11,10 +11,12 @@ import { getLocationHash } from '~/lib/utils/url_utility';
 import { scrollToElement } from '~/lib/utils/common_utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import ReleaseBlockFooter from './release_block_footer.vue';
+import EvidenceBlock from './evidence_block.vue';
 
 export default {
   name: 'ReleaseBlock',
   components: {
+    EvidenceBlock,
     GlLink,
     GlBadge,
     GlButton,
@@ -70,6 +72,9 @@ export default {
     hasAuthor() {
       return !_.isEmpty(this.author);
     },
+    hasEvidence() {
+      return Boolean(this.release.evidence_sha);
+    },
     shouldRenderMilestones() {
       return !_.isEmpty(this.release.milestones);
     },
@@ -81,6 +86,9 @@ export default {
         this.glFeatures.releaseEditPage && this.release._links && this.release._links.edit_url,
       );
     },
+    shouldShowEvidence() {
+      return this.glFeatures.releaseEvidenceCollection;
+    },
     shouldShowFooter() {
       return this.glFeatures.releaseIssueSummary;
     },
@@ -217,6 +225,8 @@ export default {
         </div>
       </div>
 
+      <evidence-block v-if="hasEvidence && shouldShowEvidence" :release="release" />
+
       <div class="card-text prepend-top-default">
         <div v-html="release.description_html"></div>
       </div>

app/assets/javascripts/vue_shared/components/expand_button.vue

 <script>
+import { GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 
@@ -15,6 +16,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   name: 'ExpandButton',
   components: {
+    GlButton,
     Icon,
   },
   data() {
@@ -39,15 +41,25 @@ export default {
 </script>
 <template>
   <span>
-    <button
+    <gl-button
       v-show="isCollapsed"
       :aria-label="ariaLabel"
       type="button"
-      class="text-expander btn-blank"
+      class="js-text-expander-prepend text-expander btn-blank"
       @click="onClick"
     >
       <icon :size="12" name="ellipsis_h" />
-    </button>
+    </gl-button>
+    <span v-if="isCollapsed"> <slot name="short"></slot> </span>
     <span v-if="!isCollapsed"> <slot name="expanded"></slot> </span>
+    <gl-button
+      v-show="!isCollapsed"
+      :aria-label="ariaLabel"
+      type="button"
+      class="js-text-expander-append text-expander btn-blank"
+      @click="onClick"
+    >
+      <icon :size="12" name="ellipsis_h" />
+    </gl-button>
   </span>
 </template>

app/assets/stylesheets/pages/projects.scss

@@ -274,12 +274,6 @@
     height: 24px;
   }
 
-  .git-clone-holder {
-    .btn {
-      height: auto;
-    }
-  }
-
   .dropdown-toggle,
   .clone-dropdown-btn {
     .fa {

app/controllers/projects/releases_controller.rb

@@ -8,6 +8,7 @@ class Projects::ReleasesController < Projects::ApplicationController
   before_action do
     push_frontend_feature_flag(:release_edit_page, project, default_enabled: true)
     push_frontend_feature_flag(:release_issue_summary, project)
+    push_frontend_feature_flag(:release_evidence_collection, project)
   end
   before_action :authorize_update_release!, only: %i[edit update]
 

app/models/badge.rb

@@ -22,6 +22,8 @@ class Badge < ApplicationRecord
 
   scope :order_created_at_asc, -> { reorder(created_at: :asc) }
 
+  scope :with_name, ->(name) { where(name: name) }
+
   validates :link_url, :image_url, addressable_url: true
   validates :type, presence: true
 

changelogs/unreleased/26019-add-evidence-json.yml

+---
+title: Add evidence collection for Releases
+merge_request: 18874
+author:
+type: changed

changelogs/unreleased/34157-snowplow-custom-events-for-monitor-apm.yml

+---
+title: Add snowplow events for monitoring dashboard
+merge_request: 19455
+author:
+type: added

changelogs/unreleased/7150-the-weight-assignment-box-shows-up-when-the-sidebar-is-collapsed-eve.yml

+---
+title: Fix issue trying to edit weight with collapsed sidebar as guest
+merge_request: 20431
+author:
+type: fixed

changelogs/unreleased/add-badge-name-field.yml

+---
+title: Add badge name field
+merge_request: 16998
+author: Lee Tickett
+type: added

db/migrate/20190606202100_add_name_to_badges.rb

+# frozen_string_literal: true
+
+class AddNameToBadges < ActiveRecord::Migration[5.0]
+  include Gitlab::Database::MigrationHelpers
+
+  DOWNTIME = false
+
+  def change
+    add_column :badges, :name, :string, null: true, limit: 255
+  end
+end

db/schema.rb

@@ -498,6 +498,7 @@ ActiveRecord::Schema.define(version: 2019_11_19_023952) do
     t.integer "project_id"
     t.integer "group_id"
     t.string "type", null: false
+    t.string "name", limit: 255
     t.datetime_with_timezone "created_at", null: false
     t.datetime_with_timezone "updated_at", null: false
     t.index ["group_id"], name: "index_badges_on_group_id"

doc/README.md

@@ -42,6 +42,7 @@ Have a look at some of our most popular documentation resources:
 | [Kubernetes integration](user/project/clusters/index.md)        | Use GitLab with Kubernetes.                                      |
 | [SSH authentication](ssh/README.md)                             | Secure your network communications.                              |
 | [Using Docker images](ci/docker/using_docker_images.md)         | Build and test your applications with Docker.                    |
+| [GraphQL](api/graphql/index.md)                                 | Explore GitLab's GraphQL API.                                    |
 
 ## The entire DevOps Lifecycle
 

doc/api/graphql/getting_started.md

+# Getting started with GitLab GraphQL API
+
+This guide demonstrates basic usage of GitLab's GraphQL API.
+
+See the [GraphQL API StyleGuide](../../development/api_graphql_styleguide.md) for implementation details
+aimed at developers who wish to work on developing the API itself.
+
+## Running examples
+
+The examples documented here can be run using:
+
+- The command line.
+- GraphiQL.
+
+### Command line
+
+You can run GraphQL queries in a `curl` request on the command line on your local machine.
+A GraphQL request can be made as a `POST` request to `/api/graphql` with the query as the payload.
+You can authorize your request by generating a [personal access token](../../user/profile/personal_access_tokens.md)
+to use as a bearer token.
+
+Example:
+
+```sh
+GRAPHQL_TOKEN = <your-token>
+curl 'http://gitlab.com/api/graphql' --header "Authorization: Bearer $GRAPHQL_TOKEN" --header "Content-Type: application/json" --request POST --data "{\"query\": \"query {currentUser {name}}\"}
+```
+
+### GraphiQL
+
+GraphiQL (pronounced “graphical”) allows you to run queries directly against the server endpoint
+with syntax highlighting and autocomplete. It also allows you to explore the schema and types.
+
+The examples below:
+
+- Can be run directly against GitLab 11.0 or later, though some of the types and fields
+may not be supported in older versions.
+- Will work against GitLab.com without any further setup. Make sure you are signed in and
+navigate to the [GraphiQL Explorer](https://www.gitlab.com/-/graphql-explorer).
+
+If you want to run the queries locally, or on a self-managed instance,
+you will need to either:
+
+- Create the `gitlab-org` group with a project called `graphql-sandbox` under it. Create
+several issues within the project.
+- Edit the queries to replace `gitlab-org/graphql-sandbox` with your own group and project.
+
+Please refer to [running GraphiQL](index.md#graphiql) for more information.
+
+NOTE: **Note:**
+If you are running GitLab 11.0 to 12.0, enable the `graphql`
+[feature flag](../features.md#set-or-create-a-feature).
+
+## Queries and mutations
+
+The GitLab GraphQL API can be used to perform:
+
+- Queries for data retrieval.
+- [Mutations](#mutations) for creating, updating, and deleting data.
+
+NOTE: **Note:**
+In the GitLab GraphQL API, `id` generally refers to a global ID,
+which is an object identifier in the format of `gid://gitlab/Issue/123`.
+
+[GitLab's GraphQL Schema](reference/index.md) outlines which objects and fields are
+available for clients to query and their corresponding data types.
+
+Example: Get only the names of all the projects the currently logged in user can access (up to a limit, more on that later)
+in the group `gitlab-org`.
+
+```graphql
+query {
+  group(fullPath: "gitlab-org") {
+    id
+    name
+    projects {
+      nodes {
+        name
+      }
+    }
+  }
+}
+```
+
+Example: Get a specific project and the title of Issue #2.
+
+```graphql
+query {
+     project(fullPath: "gitlab-org/graphql-sandbox") {
+       name
+       issue(iid: "2") {
+         title
+       }
+     }
+   }
+```
+
+### The root node
+
+Any field defined in [`QueryType`](app/graphql/types/query_type.rb) will be exposed as a root node.
+When retrieving child nodes use:
+
+- the `edges { node { } }` syntax.
+- the short form `nodes { }` syntax.
+
+Underneath it all is a graph we are traversing, hence the name GraphQL.
+
+Example: Get a project (only its name) and the titles of all its issues.
+
+```graphql
+query {
+  project(fullPath: "gitlab-org/graphql-sandbox") {
+    name
+    issues {
+      nodes {
+        title
+        description
+      }
+    }
+  }
+}
+```
+
+More on schema definitions:
+[graphql-ruby docs](https://graphql-ruby.org/schema/definition)
+
+More about queries:
+[GraphQL docs](https://graphql.org/learn/queries/) and
+[graphql-ruby docs](https://graphql-ruby.org/queries/executing_queries)
+
+### Authorization
+
+Authorization uses the same engine as the Rails app. So if you've signed in to GitLab
+and use GraphiQL, all queries will be performed as you, the signed in user.
+
+See the [authorization section](../../development/api_graphql_styleguide.html#authorization) of the StyleGuide
+for implementation details.
+
+### Resolvers
+
+A resolver is how we define how the records requested by the client are retrieved, collected,
+and assembled into the response.
+
+The [GraphQL API StyleGuide](../../development/api_graphql_styleguide.md#resolvers) has more details
+about the implementation of resolvers.
+
+More about resolvers:
+[GraphQL Docs](https://graphql.org/learn/execution/) and
+[graphql-ruby docs](https://graphql-ruby.org/fields/resolvers.html)
+
+### Mutations
+
+Mutations make changes to data. We can update, delete, or create new records. Mutations
+generally use InputTypes and variables, neither of which appear here.
+
+Mutations have:
+
+- Inputs. For example, arguments, such as which emoji you'd like to award,
+and to which object.
+- Return statements. That is, what you'd like to get back when it's successful.
+- Errors. Always ask for what went wrong, just in case.
+
+#### Creation mutations
+
+Example: Let's have some tea - add a `:tea:` reaction emoji to an issue.
+
+```graphql
+mutation {
+  addAwardEmoji(input: { awardableId: "gid://gitlab/Issue/27039960",
+      name: "tea"
+    }) {
+    awardEmoji {
+      name
+      description
+      unicode
+      emoji
+      unicodeVersion
+      user {
+        name
+      }
+    }
+    errors
+  }
+}
+```
+
+Example: Add a comment to the issue (we're using the ID of the `GitLab.com` issue - but
+if you're using a local instance, you'll need to get the ID of an issue you can write to).
+
+```graphql
+mutation {
+  createNote(input: { noteableId: "gid://gitlab/Issue/27039960",
+      body: "*sips tea*"
+    }) {
+    note {
+      id
+      body
+      discussion {
+        id
+      }  
+    }
+    errors
+  }
+}
+```
+
+#### Update mutations
+
+When you see the result `id` of the note you created - take a note of it. Now let's edit it to sip faster!
+
+```graphql
+mutation {
+  updateNote(input: { id: "gid://gitlab/Note/<note id>",
+      body: "*SIPS TEA*"
+    }) {
+    note {
+      id
+      body
+    }
+    errors
+  }
+}
+```
+
+#### Deletion mutations
+
+Let's delete the comment, since our tea is all gone.
+
+```graphql
+mutation {
+  destroyNote(input: { id: "gid://gitlab/Note/<note id>" }) {
+    note {
+      id
+      body
+    }
+    errors
+  }
+}
+```
+
+You should get something like the following output:
+
+```json
+{
+  "data": {
+    "destroyNote": {
+      "errors": [],
+      "note": null
+    }
+  }
+}
+```
+
+We've asked for the note details, but it doesn't exist anymore, so we get `null`.
+
+The [GraphQL API StyleGuide](../../development/api_graphql_styleguide.md#mutations) has more details
+about implementation of mutations.
+
+More about mutations:
+[GraphQL Docs](https://graphql.org/learn/queries/#mutations) and
+[graphql-ruby docs](https://graphql-ruby.org/mutations/mutation_classes.html)
+
+### Introspective queries
+
+Clients can query the GraphQL endpoint for information about its own schema.
+by making an [introspective query](https://graphql.org/learn/introspection/).
+
+It is through an introspection query that the [GraphiQL Query Explorer](https://gitlab.com/-/graphql-explorer)
+gets all of its knowledge about our GraphQL schema to do autocompletion and provide
+its interactive `Docs` tab.
+
+Example: Get all the type names in the schema.
+
+```graphql
+{
+  __schema {
+    types {
+      name
+    }
+  }
+}
+```
+
+Example: Get all the fields associated with Issue.
+`kind` tells us the enum value for the type, like `OBJECT`, `SCALAR` or `INTERFACE`.
+
+```graphql
+query IssueTypes {
+  __type(name: "Issue") {
+    kind
+    name
+    fields {
+      name
+      description
+      type {
+        name
+      }
+    }
+  }
+}
+```
+
+More about introspection:
+[GraphQL docs](https://graphql.org/learn/introspection/) and
+[graphql-ruby docs](https://graphql-ruby.org/schema/introspection.html)
+
+## Sorting
+
+Some of GitLab's GraphQL endpoints allow you to specify how you'd like a collection of
+objects to be sorted. You can only sort by what the schema allows you to.
+
+Example: Issues can be sorted by creation date:
+
+```graphql
+query {
+     project(fullPath: "gitlab-org/graphql-sandbox") {
+       name
+        issues(sort: created_asc) {
+        nodes {
+          title
+          createdAt
+        }
+      }
+    }
+  }
+```
+
+## Pagination
+
+Pagination is a way of only asking for a subset of the records (say, the first 10).
+If we want more of them, we can make another request for the next 10 from the server
+(in the form of something like "please give me the next 10 records").
+
+By default, GitLab's GraphQL API will return only the first 100 records of any collection.
+This can be changed by using `first` or `last` arguments. Both arguments take a value,
+so `first: 10` will return the first 10 records, and `last: 10` the last 10 records.
+
+Example: Retrieve only the first 2 issues (slicing). The `cursor` field gives us a position from which
+we can retrieve further records relative to that one.
+
+```graphql
+query {
+  project(fullPath: "gitlab-org/graphql-sandbox") {
+    name
+    issues(first: 2) {
+      edges {
+        node {
+          title
+        }
+      }
+    pageInfo {
+      endCursor
+      hasNextPage
+      }
+    }
+  }
+}
+```
+
+Example: Retrieve the next 3. (The cursor value
+`eyJpZCI6IjI3MDM4OTMzIiwiY3JlYXRlZF9hdCI6IjIwMTktMTEtMTQgMDU6NTY6NDQgVVRDIn0`
+could be different, but it's the `cursor` value returned for the second issue returned above.)
+
+```graphql
+query {
+  project(fullPath: "gitlab-org/graphql-sandbox") {
+    name
+    issues(first: 3, after: "eyJpZCI6IjI3MDM4OTMzIiwiY3JlYXRlZF9hdCI6IjIwMTktMTEtMTQgMDU6NTY6NDQgVVRDIn0") {
+      edges {
+        node {
+          title
+        }
+        cursor
+      }
+      pageInfo {
+        endCursor
+        hasNextPage
+      }
+    }
+  }
+}
+```
+
+More on pagination and cursors:
+[GraphQL docs](https://graphql.org/learn/pagination/) and
+[graphql-ruby docs](https://graphql-ruby.org/relay/connections.html#cursors)

doc/api/graphql/index.md

@@ -4,6 +4,27 @@
 > - [Always enabled](https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/30444)
   in GitLab 12.1.
 
+## Getting Started
+
+For those new to the GitLab GraphQL API, see
+[Getting started with GitLab GraphQL API](getting_started.md).
+
+### Quick Reference
+
+- GitLab's GraphQL API endpoint is located at `/api/graphql`.
+- Get an [introduction to GraphQL from graphql.org](https://graphql.org/).
+- GitLab supports a wide range of resources, listed in the [GraphQL API Reference](reference/index.md).
+
+#### GraphiQL
+
+Explore the GraphQL API using the interactive [GraphiQL explorer](https://gitlab.com/-/graphql-explorer),
+or on your self-managed GitLab instance on
+`https://<your-gitlab-site.com>/-/graphql-explorer`.
+
+See the [GitLab GraphQL overview](getting_started.md#graphiql) for more information about the GraphiQL Explorer.
+
+## What is GraphQL?
+
 [GraphQL](https://graphql.org/) is a query language for APIs that
 allows clients to request exactly the data they need, making it
 possible to get all required data in a limited number of requests.
@@ -33,11 +54,16 @@ possible.
 
 ## Available queries
 
-A first iteration of a GraphQL API includes the following queries
+The GraphQL API includes the following queries at the root level:
 
-1. `project` : Within a project it is also possible to fetch a `mergeRequest` by IID.
+1. `project` : Project information, with many of its associations such as issues and merge requests also available.
 1. `group` : Basic group information and epics **(ULTIMATE)** are currently supported.
 1. `namespace` : Within a namespace it is also possible to fetch `projects`.
+1. `currentUser`: Information about the currently logged in user.
+1. `metaData`: Metadata about GitLab and the GraphQL API.
+
+Root-level queries are defined in
+[`app/graphql/types/query_type.rb`](https://gitlab.com/gitlab-org/gitlab/blob/master/app/graphql/types/query_type.rb).
 
 ### Multiplex queries
 
@@ -58,10 +84,5 @@ Machine-readable versions are also available:
 - [JSON format](reference/gitlab_schema.json)
 - [IDL format](reference/gitlab_schema.graphql)
 
-## GraphiQL
-
-The API can be explored by using the GraphiQL IDE, it is available on your
-instance on `gitlab.example.com/-/graphql-explorer`.
-
 [ce-19008]: https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/19008
 [features-api]: ../features.md

doc/api/group_badges.md

@@ -26,9 +26,10 @@ GET /groups/:id/badges
 | Attribute | Type | Required | Description |
 | --------- | ---- | -------- | ----------- |
 | `id`      | integer/string | yes | The ID or [URL-encoded path of the group](README.md#namespaced-path-encoding) owned by the authenticated user |
+| `name`    | string         | no  | Name of the badges to return (case-sensitive). |
 
 ```bash
-curl --header "PRIVATE-TOKEN: <your_access_token>" https://gitlab.example.com/api/v4/groups/:id/badges
+curl --header "PRIVATE-TOKEN: <your_access_token>" https://gitlab.example.com/api/v4/groups/:id/badges?name=Coverage
 ```
 
 Example response:
@@ -36,21 +37,14 @@ Example response:
 ```json
 [
   {
+    "name": "Coverage",
     "id": 1,
     "link_url": "http://example.com/ci_status.svg?project=%{project_path}&ref=%{default_branch}",
     "image_url": "https://shields.io/my/badge",
     "rendered_link_url": "http://example.com/ci_status.svg?project=example-org/example-project&ref=master",
     "rendered_image_url": "https://shields.io/my/badge",
     "kind": "group"
-  },
-  {
-    "id": 2,
-    "link_url": "http://example.com/ci_status.svg?project=%{project_path}&ref=%{default_branch}",
-    "image_url": "https://shields.io/my/badge",
-    "rendered_link_url": "http://example.com/ci_status.svg?project=example-org/example-project&ref=master",
-    "rendered_image_url": "https://shields.io/my/badge",
-    "kind": "group"
-  },
+  }
 ]
 ```
 

doc/api/project_badges.md

@@ -23,6 +23,7 @@ GET /projects/:id/badges
 | Attribute | Type | Required | Description |
 | --------- | ---- | -------- | ----------- |
 | `id`      | integer/string | yes | The ID or [URL-encoded path of the project](README.md#namespaced-path-encoding) owned by the authenticated user |
+| `name`    | string         | no  | Name of the badges to return (case-sensitive). |
 
 ```bash
 curl --header "PRIVATE-TOKEN: <your_access_token>" https://gitlab.example.com/api/v4/projects/:id/badges
@@ -33,6 +34,7 @@ Example response:
 ```json
 [
   {
+    "name": "Coverage",
     "id": 1,
     "link_url": "http://example.com/ci_status.svg?project=%{project_path}&ref=%{default_branch}",
     "image_url": "https://shields.io/my/badge",
@@ -41,6 +43,7 @@ Example response:
     "kind": "project"
   },
   {
+    "name": "Pipeline",
     "id": 2,
     "link_url": "http://example.com/ci_status.svg?project=%{project_path}&ref=%{default_branch}",
     "image_url": "https://shields.io/my/badge",

lib/api/badges.rb

@@ -33,7 +33,11 @@ module API
         get ":id/badges" do
           source = find_source(source_type, params[:id])
 
-          present_badges(source, paginate(source.badges))
+          badges = source.badges
+          name = params[:name]
+          badges = badges.with_name(name) if name
+
+          present_badges(source, paginate(badges))
         end
 
         desc "Preview a badge from a #{source_type}." do
@@ -80,6 +84,7 @@ module API
         params do
           requires :link_url, type: String, desc: 'URL of the badge link'
           requires :image_url, type: String, desc: 'URL of the badge image'
+          optional :name, type: String, desc: 'Name for the badge'
         end
         post ":id/badges" do
           source = find_source_if_admin(source_type)
@@ -100,6 +105,7 @@ module API
         params do
           optional :link_url, type: String, desc: 'URL of the badge link'
           optional :image_url, type: String, desc: 'URL of the badge image'
+          optional :name, type: String, desc: 'Name for the badge'
         end
         put ":id/badges/:badge_id" do
           source = find_source_if_admin(source_type)

lib/api/entities.rb

@@ -1736,6 +1736,7 @@ module API
     end
 
     class BasicBadgeDetails < Grape::Entity
+      expose :name
       expose :link_url
       expose :image_url
       expose :rendered_link_url do |badge, options|

locale/gitlab.pot

@@ -374,6 +374,9 @@ msgstr[1] ""
 msgid "%{tabname} changed"
 msgstr ""
 
+msgid "%{tag}-evidence.json"
+msgstr ""
+
 msgid "%{template_project_id} is unknown or invalid"
 msgstr ""
 
@@ -1780,6 +1783,15 @@ msgstr ""
 msgid "Analytics"
 msgstr ""
 
+msgid "Analyze a review version of your web application."
+msgstr ""
+
+msgid "Analyze your dependencies for known vulnerabilities"
+msgstr ""
+
+msgid "Analyze your source code for known vulnerabilities"
+msgstr ""
+
 msgid "Ancestors"
 msgstr ""
 
@@ -2383,6 +2395,9 @@ msgstr ""
 msgid "Badges|Link"
 msgstr ""
 
+msgid "Badges|Name"
+msgstr ""
+
 msgid "Badges|No badge image"
 msgstr ""
 
@@ -3112,6 +3127,9 @@ msgstr ""
 msgid "Check your .gitlab-ci.yml"
 msgstr ""
 
+msgid "Check your Docker images for known vulnerabilities"
+msgstr ""
+
 msgid "Checking %{text} availability…"
 msgstr ""
 
@@ -4551,6 +4569,9 @@ msgstr ""
 msgid "Container Registry"
 msgstr ""
 
+msgid "Container Scanning"
+msgstr ""
+
 msgid "Container registry images"
 msgstr ""
 
@@ -5527,6 +5548,9 @@ msgstr ""
 msgid "Dependency Proxy"
 msgstr ""
 
+msgid "Dependency Scanning"
+msgstr ""
+
 msgid "Dependency proxy"
 msgstr ""
 
@@ -6028,6 +6052,9 @@ msgstr ""
 msgid "Download codes"
 msgstr ""
 
+msgid "Download evidence JSON"
+msgstr ""
+
 msgid "Download export"
 msgstr ""
 
@@ -6067,6 +6094,9 @@ msgstr ""
 msgid "During this process, you’ll be asked for URLs from GitLab’s side. Use the URLs shown below."
 msgstr ""
 
+msgid "Dynamic Application Security Testing (DAST)"
+msgstr ""
+
 msgid "Each Runner can be in one of the following states:"
 msgstr ""
 
@@ -6949,6 +6979,9 @@ msgstr ""
 msgid "Everything you need to create a GitLab Pages site using plain HTML."
 msgstr ""
 
+msgid "Evidence collection"
+msgstr ""
+
 msgid "Example: @sub\\.company\\.com$"
 msgstr ""
 
@@ -15038,6 +15071,9 @@ msgstr ""
 msgid "Search users or groups"
 msgstr ""
 
+msgid "Search your project dependencies for their licenses and apply policies"
+msgstr ""
+
 msgid "Search your projects"
 msgstr ""
 
@@ -15156,6 +15192,9 @@ msgstr ""
 msgid "Security & Compliance"
 msgstr ""
 
+msgid "Security Configuration"
+msgstr ""
+
 msgid "Security Dashboard"
 msgstr ""
 
@@ -15291,7 +15330,7 @@ msgstr ""
 msgid "SecurityDashboard|More information"
 msgstr ""
 
-msgid "SecurityDashboard|Pipeline %{pipelineLink} triggered"
+msgid "SecurityDashboard|Pipeline %{pipelineLink} triggered %{timeago} by %{user}"
 msgstr ""
 
 msgid "SecurityDashboard|Project"
@@ -16499,6 +16538,9 @@ msgstr ""
 msgid "State your message to activate"
 msgstr ""
 
+msgid "Static Application Security Testing (SAST)"
+msgstr ""
+
 msgid "Statistics"
 msgstr ""
 

spec/frontend/monitoring/store/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
+import Tracking from '~/tracking';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
 import axios from '~/lib/utils/axios_utils';
@@ -226,12 +227,14 @@ describe('Monitoring store actions', () => {
     let state;
     const response = metricsDashboardResponse;
     beforeEach(() => {
+      jest.spyOn(Tracking, 'event');
       dispatch = jest.fn();
       state = storeState();
       state.dashboardEndpoint = '/dashboard';
     });
     it('dispatches receive and success actions', done => {
       const params = {};
+      document.body.dataset.page = 'projects:environments:metrics';
       mock.onGet(state.dashboardEndpoint).reply(200, response);
       fetchDashboard(
         {
@@ -246,6 +249,17 @@ describe('Monitoring store actions', () => {
             response,
             params,
           });
+        })
+        .then(() => {
+          expect(Tracking.event).toHaveBeenCalledWith(
+            document.body.dataset.page,
+            'dashboard_fetch',
+            {
+              label: 'custom_metrics_dashboard',
+              property: 'count',
+              value: 0,
+            },
+          );
           done();
         })
         .catch(done.fail);

spec/frontend/releases/list/components/evidence_block_spec.js

+import { mount, createLocalVue } from '@vue/test-utils';
+import { GlLink } from '@gitlab/ui';
+import { truncateSha } from '~/lib/utils/text_utility';
+import Icon from '~/vue_shared/components/icon.vue';
+import { release } from '../../mock_data';
+import EvidenceBlock from '~/releases/list/components/evidence_block.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+
+describe('Evidence Block', () => {
+  let wrapper;
+
+  const factory = (options = {}) => {
+    const localVue = createLocalVue();
+
+    wrapper = mount(localVue.extend(EvidenceBlock), {
+      localVue,
+      ...options,
+    });
+  };
+
+  beforeEach(() => {
+    factory({
+      propsData: {
+        release,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the evidence icon', () => {
+    expect(wrapper.find(Icon).props('name')).toBe('review-list');
+  });
+
+  it('renders the title for the dowload link', () => {
+    expect(wrapper.find(GlLink).text()).toBe(`${release.tag_name}-evidence.json`);
+  });
+
+  it('renders the correct hover text for the download', () => {
+    expect(wrapper.find(GlLink).attributes('data-original-title')).toBe('Download evidence JSON');
+  });
+
+  it('renders the correct file link for download', () => {
+    expect(wrapper.find(GlLink).attributes().download).toBe(`${release.tag_name}-evidence.json`);
+  });
+
+  describe('sha text', () => {
+    it('renders the short sha initially', () => {
+      expect(wrapper.find('.js-short').text()).toBe(truncateSha(release.evidence_sha));
+    });
+
+    it('renders the long sha after expansion', () => {
+      wrapper.find('.js-text-expander-prepend').trigger('click');
+      expect(wrapper.find('.js-expanded').text()).toBe(release.evidence_sha);
+    });
+  });
+
+  describe('copy to clipboard button', () => {
+    it('renders button', () => {
+      expect(wrapper.find(ClipboardButton).exists()).toBe(true);
+    });
+
+    it('renders the correct hover text', () => {
+      expect(wrapper.find(ClipboardButton).attributes('data-original-title')).toBe(
+        'Copy commit SHA',
+      );
+    });
+
+    it('copies the sha', () => {
+      expect(wrapper.find(ClipboardButton).attributes('data-clipboard-text')).toBe(
+        release.evidence_sha,
+      );
+    });
+  });
+});

spec/frontend/releases/list/components/release_block_spec.js

 import { mount } from '@vue/test-utils';
+import EvidenceBlock from '~/releases/list/components/evidence_block.vue';
 import ReleaseBlock from '~/releases/list/components/release_block.vue';
 import ReleaseBlockFooter from '~/releases/list/components/release_block_footer.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
@@ -220,6 +221,26 @@ describe('Release block', () => {
     });
   });
 
+  describe('evidence block', () => {
+    it('renders the evidence block when the evidence is available and the feature flag is true', () =>
+      factory(releaseClone, { releaseEvidenceCollection: true }).then(() =>
+        expect(wrapper.find(EvidenceBlock).exists()).toBe(true),
+      ));
+
+    it('does not render the evidence block when the evidence is available but the feature flag is false', () =>
+      factory(releaseClone, { releaseEvidenceCollection: true }).then(() =>
+        expect(wrapper.find(EvidenceBlock).exists()).toBe(true),
+      ));
+
+    it('does not render the evidence block when there is no evidence', () => {
+      releaseClone.evidence_sha = null;
+
+      return factory(releaseClone).then(() => {
+        expect(wrapper.find(EvidenceBlock).exists()).toBe(false);
+      });
+    });
+  });
+
   describe('anchor scrolling', () => {
     beforeEach(() => {
       scrollToElement.mockClear();

spec/frontend/releases/mock_data.js

@@ -35,6 +35,7 @@ export const release = {
   description_html: '<p data-sourcepos="1:1-1:21" dir="auto">A super nice release!</p>',
   created_at: '2019-08-26T17:54:04.952Z',
   released_at: '2019-08-26T17:54:04.807Z',
+  evidence_sha: 'fb3a125fd69a0e5048ebfb0ba43eb32ce4911520dd8d',
   author: {
     id: 1,
     name: 'Administrator',
@@ -62,6 +63,8 @@ export const release = {
   milestones,
   assets: {
     count: 5,
+    evidence_file_path:
+      'https://20592.qa-tunnel.gitlab.info/root/test-deployments/-/releases/v1.1.2/evidence.json',
     sources: [
       {
         format: 'zip',

spec/frontend/vue_shared/components/__snapshots__/expand_button_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Expand button on click when short text is provided renders button after text 1`] = `"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <!----> <span><p>Expanded!</p></span> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary\\" style=\\"\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button></span>"`;
+
+exports[`Expand button when short text is provided renders button before text 1`] = `"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <span><p>Short</p></span> <!----> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button></span>"`;

spec/frontend/vue_shared/components/changed_file_icon_spec.js

@@ -19,6 +19,7 @@ describe('Changed file icon', () => {
         ...props,
       },
       sync: false,
+      attachToDocument: true,
     });
   };
 

spec/frontend/vue_shared/components/commit_spec.js

@@ -13,6 +13,7 @@ describe('Commit component', () => {
     wrapper = shallowMount(CommitComponent, {
       propsData,
       sync: false,
+      attachToDocument: true,
     });
   };
 

spec/frontend/vue_shared/components/expand_button_spec.js

+import Vue from 'vue';
+import { mount, createLocalVue } from '@vue/test-utils';
+import ExpandButton from '~/vue_shared/components/expand_button.vue';
+
+const text = {
+  expanded: 'Expanded!',
+  short: 'Short',
+};
+
+describe('Expand button', () => {
+  let wrapper;
+
+  const expanderPrependEl = () => wrapper.find('.js-text-expander-prepend');
+  const expanderAppendEl = () => wrapper.find('.js-text-expander-append');
+
+  const factory = (options = {}) => {
+    const localVue = createLocalVue();
+
+    wrapper = mount(localVue.extend(ExpandButton), {
+      localVue,
+      ...options,
+    });
+  };
+
+  beforeEach(() => {
+    factory({
+      slots: {
+        expanded: `<p>${text.expanded}</p>`,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the prepended collapse button', () => {
+    expect(expanderPrependEl().isVisible()).toBe(true);
+    expect(expanderAppendEl().isVisible()).toBe(false);
+  });
+
+  it('renders no text when short text is not provided', () => {
+    expect(wrapper.find(ExpandButton).text()).toBe('');
+  });
+
+  it('does not render expanded text', () => {
+    expect(
+      wrapper
+        .find(ExpandButton)
+        .text()
+        .trim(),
+    ).not.toBe(text.short);
+  });
+
+  describe('when short text is provided', () => {
+    beforeEach(() => {
+      factory({
+        slots: {
+          expanded: `<p>${text.expanded}</p>`,
+          short: `<p>${text.short}</p>`,
+        },
+      });
+    });
+
+    it('renders short text', () => {
+      expect(
+        wrapper
+          .find(ExpandButton)
+          .text()
+          .trim(),
+      ).toBe(text.short);
+    });
+
+    it('renders button before text', () => {
+      expect(expanderPrependEl().isVisible()).toBe(true);
+      expect(expanderAppendEl().isVisible()).toBe(false);
+      expect(wrapper.find(ExpandButton).html()).toMatchSnapshot();
+    });
+  });
+
+  describe('on click', () => {
+    beforeEach(done => {
+      expanderPrependEl().trigger('click');
+      Vue.nextTick(done);
+    });
+
+    afterEach(() => {
+      expanderAppendEl().trigger('click');
+    });
+
+    it('renders only the append collapse button', () => {
+      expect(expanderAppendEl().isVisible()).toBe(true);
+      expect(expanderPrependEl().isVisible()).toBe(false);
+    });
+
+    it('renders the expanded text', () => {
+      expect(wrapper.find(ExpandButton).text()).toContain(text.expanded);
+    });
+
+    describe('when short text is provided', () => {
+      beforeEach(done => {
+        factory({
+          slots: {
+            expanded: `<p>${text.expanded}</p>`,
+            short: `<p>${text.short}</p>`,
+          },
+        });
+
+        expanderPrependEl().trigger('click');
+        Vue.nextTick(done);
+      });
+
+      it('only renders expanded text', () => {
+        expect(
+          wrapper
+            .find(ExpandButton)
+            .text()
+            .trim(),
+        ).toBe(text.expanded);
+      });
+
+      it('renders button after text', () => {
+        expect(expanderPrependEl().isVisible()).toBe(false);
+        expect(expanderAppendEl().isVisible()).toBe(true);
+        expect(wrapper.find(ExpandButton).html()).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('append button', () => {
+    beforeEach(done => {
+      expanderPrependEl().trigger('click');
+      Vue.nextTick(done);
+    });
+
+    it('clicking hides itself and shows prepend', () => {
+      expect(expanderAppendEl().isVisible()).toBe(true);
+      expanderAppendEl().trigger('click');
+      expect(expanderPrependEl().isVisible()).toBe(true);
+    });
+
+    it('clicking hides expanded text', () => {
+      expect(
+        wrapper
+          .find(ExpandButton)
+          .text()
+          .trim(),
+      ).toBe(text.expanded);
+      expanderAppendEl().trigger('click');
+      expect(
+        wrapper
+          .find(ExpandButton)
+          .text()
+          .trim(),
+      ).not.toBe(text.expanded);
+    });
+
+    describe('when short text is provided', () => {
+      beforeEach(done => {
+        factory({
+          slots: {
+            expanded: `<p>${text.expanded}</p>`,
+            short: `<p>${text.short}</p>`,
+          },
+        });
+
+        expanderPrependEl().trigger('click');
+        Vue.nextTick(done);
+      });
+
+      it('clicking reveals short text', () => {
+        expect(
+          wrapper
+            .find(ExpandButton)
+            .text()
+            .trim(),
+        ).toBe(text.expanded);
+        expanderAppendEl().trigger('click');
+        expect(
+          wrapper
+            .find(ExpandButton)
+            .text()
+            .trim(),
+        ).toBe(text.short);
+      });
+    });
+  });
+});

spec/frontend/vue_shared/components/issue/issue_assignees_spec.js

@@ -18,6 +18,7 @@ describe('IssueAssigneesComponent', () => {
         ...props,
       },
       sync: false,
+      attachToDocument: true,
     });
     vm = wrapper.vm; // eslint-disable-line
   };

spec/frontend/vue_shared/components/issue/issue_milestone_spec.js

 import Vue from 'vue';
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 import IssueMilestone from '~/vue_shared/components/issue/issue_milestone.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 
 import { mockMilestone } from '../../../../javascripts/boards/mock_data';
 
 const createComponent = (milestone = mockMilestone) => {
   const Component = Vue.extend(IssueMilestone);
 
-  return mount(Component, {
+  return shallowMount(Component, {
     propsData: {
       milestone,
     },
     sync: false,
+    attachToDocument: true,
   });
 };
 
@@ -156,7 +158,7 @@ describe('IssueMilestoneComponent', () => {
     });
 
     it('renders milestone icon', () => {
-      expect(vm.$el.querySelector('svg use').getAttribute('xlink:href')).toContain('clock');
+      expect(wrapper.find(Icon).props('name')).toBe('clock');
     });
 
     it('renders milestone title', () => {

spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js

@@ -35,6 +35,7 @@ describe('RelatedIssuableItem', () => {
       localVue,
       slots,
       sync: false,
+      attachToDocument: true,
       propsData: props,
     });
   });

spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js

@@ -21,6 +21,7 @@ describe('Suggestion Diff component', () => {
       },
       localVue,
       sync: false,
+      attachToDocument: true,
     });
   };
 

spec/frontend/vue_shared/components/modal_copy_button_spec.js

@@ -16,6 +16,8 @@ describe('modal copy button', () => {
         text: 'copy me',
         title: 'Copy this value',
       },
+      attachToDocument: true,
+      sync: false,
     });
   });
 

spec/frontend/vue_shared/components/paginated_list_spec.js

@@ -26,6 +26,8 @@ describe('Pagination links component', () => {
         list: [{ id: 'foo' }, { id: 'bar' }],
         props,
       },
+      attachToDocument: true,
+      sync: false,
     });
 
     [glPaginatedList] = wrapper.vm.$children;

spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js

 import Vue from 'vue';
 
 import LabelsSelect from '~/labels_select';
-import baseComponent from '~/vue_shared/components/sidebar/labels_select/base.vue';
+import BaseComponent from '~/vue_shared/components/sidebar/labels_select/base.vue';
 
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import {
   mockConfig,
   mockLabels,
 } from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
 
-const createComponent = (config = mockConfig) => {
-  const Component = Vue.extend(baseComponent);
-
-  return mount(Component, {
+const createComponent = (config = mockConfig) =>
+  shallowMount(BaseComponent, {
     propsData: config,
     sync: false,
+    attachToDocument: true,
   });
-};
 
 describe('BaseComponent', () => {
   let wrapper;

spec/javascripts/badges/components/badge_form_spec.js

@@ -51,13 +51,14 @@ describe('BadgeForm component', () => {
   });
 
   const sharedSubmitTests = submitAction => {
+    const nameSelector = '#badge-name';
     const imageUrlSelector = '#badge-image-url';
     const findImageUrlElement = () => vm.$el.querySelector(imageUrlSelector);
     const linkUrlSelector = '#badge-link-url';
     const findLinkUrlElement = () => vm.$el.querySelector(linkUrlSelector);
-    const setValue = (inputElementSelector, url) => {
+    const setValue = (inputElementSelector, value) => {
       const inputElement = vm.$el.querySelector(inputElementSelector);
-      inputElement.value = url;
+      inputElement.value = value;
       inputElement.dispatchEvent(new Event('input'));
     };
     const submitForm = () => {
@@ -82,6 +83,7 @@ describe('BadgeForm component', () => {
         isSaving: false,
       });
 
+      setValue(nameSelector, 'TestBadge');
       setValue(linkUrlSelector, `${TEST_HOST}/link/url`);
       setValue(imageUrlSelector, `${window.location.origin}${DUMMY_IMAGE_URL}`);
     });

spec/javascripts/badges/components/badge_list_row_spec.js

@@ -39,6 +39,10 @@ describe('BadgeListRow component', () => {
     expect(badgeElement.getAttribute('src')).toBe(badge.renderedImageUrl);
   });
 
+  it('renders the badge name', () => {
+    expect(vm.$el).toContainText(badge.name);
+  });
+
   it('renders the badge link', () => {
     expect(vm.$el).toContainText(badge.linkUrl);
   });

spec/javascripts/badges/dummy_badge.js

@@ -6,6 +6,7 @@ export const createDummyBadge = () => {
   const id = _.uniqueId();
   return {
     id,
+    name: 'TestBadge',
     imageUrl: `${TEST_HOST}/badges/${id}/image/url`,
     isDeleting: false,
     linkUrl: `${TEST_HOST}/badges/${id}/link/url`,
@@ -16,6 +17,7 @@ export const createDummyBadge = () => {
 };
 
 export const createDummyBadgeResponse = () => ({
+  name: 'TestBadge',
   image_url: `${TEST_HOST}/badge/image/url`,
   link_url: `${TEST_HOST}/badge/link/url`,
   kind: PROJECT_BADGE,

spec/javascripts/badges/store/actions_spec.js

@@ -90,6 +90,7 @@ describe('Badges store actions', () => {
       endpointMock.replyOnce(req => {
         expect(req.data).toBe(
           JSON.stringify({
+            name: 'TestBadge',
             image_url: badgeInAddForm.imageUrl,
             link_url: badgeInAddForm.linkUrl,
           }),
@@ -114,6 +115,7 @@ describe('Badges store actions', () => {
       endpointMock.replyOnce(req => {
         expect(req.data).toBe(
           JSON.stringify({
+            name: 'TestBadge',
             image_url: badgeInAddForm.imageUrl,
             link_url: badgeInAddForm.linkUrl,
           }),
@@ -526,6 +528,7 @@ describe('Badges store actions', () => {
       endpointMock.replyOnce(req => {
         expect(req.data).toBe(
           JSON.stringify({
+            name: 'TestBadge',
             image_url: badgeInEditForm.imageUrl,
             link_url: badgeInEditForm.linkUrl,
           }),
@@ -550,6 +553,7 @@ describe('Badges store actions', () => {
       endpointMock.replyOnce(req => {
         expect(req.data).toBe(
           JSON.stringify({
+            name: 'TestBadge',
             image_url: badgeInEditForm.imageUrl,
             link_url: badgeInEditForm.linkUrl,
           }),

spec/javascripts/vue_shared/components/expand_button_spec.js

-import Vue from 'vue';
-import expandButton from '~/vue_shared/components/expand_button.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-describe('expand button', () => {
-  const Component = Vue.extend(expandButton);
-  let vm;
-
-  beforeEach(() => {
-    vm = mountComponent(Component, {
-      slots: {
-        expanded: '<p>Expanded!</p>',
-      },
-    });
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  it('renders a collapsed button', () => {
-    expect(vm.$children[0].iconTestClass).toEqual('ic-ellipsis_h');
-  });
-
-  it('hides expander on click', done => {
-    vm.$el.querySelector('button').click();
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('button').getAttribute('style')).toEqual('display: none;');
-      done();
-    });
-  });
-});

spec/lib/gitlab/import_export/safe_model_attributes.yml

@@ -651,6 +651,7 @@ PrometheusAlert:
 - prometheus_metric_id
 Badge:
 - id
+- name
 - link_url
 - image_url
 - project_id

spec/requests/api/badges_spec.rb

@@ -81,6 +81,7 @@ describe API::Badges do
               get api("/#{source_type.pluralize}/#{source.id}/badges/#{badge.id}", user)
 
               expect(response).to have_gitlab_http_status(200)
+              expect(json_response['name']).to eq(badge.name)
               expect(json_response['id']).to eq(badge.id)
               expect(json_response['link_url']).to eq(badge.link_url)
               expect(json_response['rendered_link_url']).to eq(badge.rendered_link_url)
@@ -98,6 +99,7 @@ describe API::Badges do
     include_context 'source helpers'
 
     let(:source) { get_source(source_type) }
+    let(:example_name) { 'BadgeName' }
     let(:example_url) { 'http://www.example.com' }
     let(:example_url2) { 'http://www.example1.com' }
 
@@ -105,7 +107,7 @@ describe API::Badges do
       it_behaves_like 'a 404 response when source is private' do
         let(:route) do
           post api("/#{source_type.pluralize}/#{source.id}/badges", stranger),
-               params: { link_url: example_url, image_url: example_url2 }
+               params: { name: example_name, link_url: example_url, image_url: example_url2 }
         end
       end
 
@@ -128,11 +130,12 @@ describe API::Badges do
         it 'creates a new badge' do
           expect do
             post api("/#{source_type.pluralize}/#{source.id}/badges", maintainer),
-                params: { link_url: example_url, image_url: example_url2 }
+                params: { name: example_name, link_url: example_url, image_url: example_url2 }
 
             expect(response).to have_gitlab_http_status(201)
           end.to change { source.badges.count }.by(1)
 
+          expect(json_response['name']).to eq(example_name)
           expect(json_response['link_url']).to eq(example_url)
           expect(json_response['image_url']).to eq(example_url2)
           expect(json_response['kind']).to eq source_type
@@ -169,6 +172,7 @@ describe API::Badges do
 
     context "with :sources == #{source_type.pluralize}" do
       let(:badge) { source.badges.first }
+      let(:example_name) { 'BadgeName' }
       let(:example_url) { 'http://www.example.com' }
       let(:example_url2) { 'http://www.example1.com' }
 
@@ -197,9 +201,10 @@ describe API::Badges do
       context 'when authenticated as a maintainer/owner' do
         it 'updates the member', :quarantine do
           put api("/#{source_type.pluralize}/#{source.id}/badges/#{badge.id}", maintainer),
-              params: { link_url: example_url, image_url: example_url2 }
+              params: { name: example_name, link_url: example_url, image_url: example_url2 }
 
           expect(response).to have_gitlab_http_status(200)
+          expect(json_response['name']).to eq(example_name)
           expect(json_response['link_url']).to eq(example_url)
           expect(json_response['image_url']).to eq(example_url2)
           expect(json_response['kind']).to eq source_type
@@ -297,7 +302,7 @@ describe API::Badges do
 
           expect(response).to have_gitlab_http_status(200)
 
-          expect(json_response.keys).to contain_exactly('link_url', 'rendered_link_url', 'image_url', 'rendered_image_url')
+          expect(json_response.keys).to contain_exactly('name', 'link_url', 'rendered_link_url', 'image_url', 'rendered_image_url')
           expect(json_response['link_url']).to eq(example_url)
           expect(json_response['image_url']).to eq(example_url2)
           expect(json_response['rendered_link_url']).to eq(example_url)
@@ -351,9 +356,9 @@ describe API::Badges do
       project.add_developer(developer)
       project.add_maintainer(maintainer)
       project.request_access(access_requester)
-      project.project_badges << build(:project_badge, project: project)
-      project.project_badges << build(:project_badge, project: project)
-      project_group.badges << build(:group_badge, group: group)
+      project.project_badges << build(:project_badge, project: project, name: 'ExampleBadge1')
+      project.project_badges << build(:project_badge, project: project, name: 'ExampleBadge2')
+      project_group.badges << build(:group_badge, group: group, name: 'ExampleBadge3')
     end
   end
 
@@ -362,8 +367,8 @@ describe API::Badges do
       group.add_developer(developer)
       group.add_owner(maintainer)
       group.request_access(access_requester)
-      group.badges << build(:group_badge, group: group)
-      group.badges << build(:group_badge, group: group)
+      group.badges << build(:group_badge, group: group, name: 'ExampleBadge4')
+      group.badges << build(:group_badge, group: group, name: 'ExampleBadge5')
     end
   end
 end