Add latest changes from gitlab-org/gitlab@master

app/assets/javascripts/boards/components/issue_time_estimate.vue

@@ -34,7 +34,7 @@ export default {
 <template>
   <span>
     <span ref="issueTimeEstimate" class="board-card-info card-number">
-      <icon name="hourglass" css-classes="board-card-info-icon align-top" /><time
+      <icon name="hourglass" class="board-card-info-icon align-top" /><time
         class="board-card-info-text"
         >{{ timeEstimate }}</time
       >

app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue

@@ -34,7 +34,7 @@ export default {
         class="more-actions-toggle btn btn-transparent p-0"
         data-toggle="dropdown"
       >
-        <icon css-classes="icon" name="ellipsis_v" />
+        <icon class="icon" name="ellipsis_v" />
       </gl-button>
       <ul class="more-actions-dropdown dropdown-menu dropdown-open-left">
         <slot name="dropdown-options"></slot>

app/assets/javascripts/error_tracking/components/error_tracking_list.vue

@@ -100,7 +100,7 @@ export default {
 
           <template slot="lastSeen" slot-scope="errors">
             <div class="d-flex align-items-center">
-              <icon name="calendar" css-classes="text-secondary mr-1" />
+              <icon name="calendar" class="text-secondary mr-1" />
               <time-ago :time="errors.item.lastSeen" class="text-secondary" />
             </div>
           </template>

app/assets/javascripts/groups/components/item_actions.vue

@@ -56,7 +56,7 @@ export default {
       class="leave-group btn btn-xs no-expand"
       @click.prevent="onLeaveGroup"
     >
-      <icon name="leave" css-classes="position-top-0" />
+      <icon name="leave" class="position-top-0" />
     </a>
     <a
       v-if="group.canEdit"
@@ -68,7 +68,7 @@ export default {
       data-placement="bottom"
       class="edit-group btn btn-xs no-expand"
     >
-      <icon name="settings" css-classes="position-top-0" />
+      <icon name="settings" class="position-top-0" />
     </a>
   </div>
 </template>

app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue

@@ -86,7 +86,7 @@ export default {
       data-placement="left"
       class="append-bottom-10"
     >
-      <icon :name="additionIconName" :size="18" :css-classes="addedFilesIconClass" />
+      <icon :name="additionIconName" :size="18" :class="addedFilesIconClass" />
     </div>
     {{ addedFilesLength }}
     <div
@@ -96,7 +96,7 @@ export default {
       data-placement="left"
       class="prepend-top-10 append-bottom-10"
     >
-      <icon :name="modifiedIconName" :size="18" :css-classes="modifiedFilesClass" />
+      <icon :name="modifiedIconName" :size="18" :class="modifiedFilesClass" />
     </div>
     {{ modifiedFilesLength }}
   </div>

app/assets/javascripts/ide/components/commit_sidebar/list_item.vue

@@ -114,7 +114,7 @@ export default {
       </span>
       <div class="ml-auto d-flex align-items-center">
         <div class="d-flex align-items-center ide-commit-list-changed-icon">
-          <icon :name="iconName" :size="16" :css-classes="iconClass" />
+          <icon :name="iconName" :size="16" :class="iconClass" />
         </div>
       </div>
     </div>

app/assets/javascripts/ide/components/external_link.vue

@@ -28,7 +28,7 @@ export default {
       rel="noopener noreferrer"
     >
       <span class="vertical-align-middle">{{ __('Open in file view') }}</span>
-      <icon :size="16" name="external-link" css-classes="vertical-align-middle space-right" />
+      <icon :size="16" name="external-link" class="vertical-align-middle space-right" />
     </a>
   </div>
 </template>

app/assets/javascripts/ide/components/file_row_extra.vue

@@ -79,7 +79,7 @@ export default {
         data-container="body"
         data-placement="right"
         name="file-modified"
-        css-classes="prepend-left-5 ide-file-modified"
+        class="prepend-left-5 ide-file-modified"
       />
     </span>
     <changed-file-icon

app/assets/javascripts/ide/components/jobs/stage.vue

@@ -77,7 +77,7 @@ export default {
       <div v-if="!stage.isLoading || stage.jobs.length" class="append-right-8 prepend-left-4">
         <span class="badge badge-pill"> {{ jobsCount }} </span>
       </div>
-      <icon :name="collapseIcon" css-classes="ide-stage-collapse-icon" />
+      <icon :name="collapseIcon" class="ide-stage-collapse-icon" />
     </div>
     <div v-show="!stage.isCollapsed" class="card-body">
       <gl-loading-icon v-if="showLoadingIcon" />

app/assets/javascripts/ide/components/mr_file_icon.vue

@@ -18,6 +18,6 @@ export default {
     :title="__('Part of merge request changes')"
     :size="12"
     name="git-merge"
-    css-classes="append-right-8"
+    class="append-right-8"
   />
 </template>

app/assets/javascripts/ide/components/new_dropdown/button.vue

@@ -52,7 +52,7 @@ export default {
     class="btn-blank"
     @click.stop.prevent="clicked"
   >
-    <icon :name="icon" :css-classes="iconClasses" />
+    <icon :name="icon" :class="iconClasses" />
     <template v-if="showLabel">
       {{ label }}
     </template>

app/assets/javascripts/ide/components/repo_file_status_icon.vue

@@ -29,6 +29,6 @@ export default {
 
 <template>
   <span v-if="file.file_lock" v-tooltip :title="lockTooltip" data-container="body">
-    <icon name="lock" css-classes="file-status-icon" />
+    <icon name="lock" class="file-status-icon" />
   </span>
 </template>

app/assets/javascripts/notes/components/note_actions.vue

@@ -149,9 +149,9 @@ export default {
         title="Add reaction"
         data-position="right"
       >
-        <icon css-classes="link-highlight award-control-icon-neutral" name="slight-smile" />
-        <icon css-classes="link-highlight award-control-icon-positive" name="smiley" />
-        <icon css-classes="link-highlight award-control-icon-super-positive" name="smiley" />
+        <icon class="link-highlight award-control-icon-neutral" name="slight-smile" />
+        <icon class="link-highlight award-control-icon-positive" name="smiley" />
+        <icon class="link-highlight award-control-icon-super-positive" name="smiley" />
       </a>
     </div>
     <reply-button
@@ -168,7 +168,7 @@ export default {
         class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button"
         @click="onEdit"
       >
-        <icon name="pencil" css-classes="link-highlight" />
+        <icon name="pencil" class="link-highlight" />
       </button>
     </div>
     <div v-if="showDeleteAction" class="note-actions-item">
@@ -191,7 +191,7 @@ export default {
         data-toggle="dropdown"
         @click="closeTooltip"
       >
-        <icon css-classes="icon" name="ellipsis_v" />
+        <icon class="icon" name="ellipsis_v" />
       </button>
       <ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
         <li v-if="canReportAsAbuse">

app/assets/javascripts/notes/components/note_actions/reply_button.vue

@@ -26,7 +26,7 @@ export default {
       :title="__('Reply to comment')"
       @click="$emit('startReplying')"
     >
-      <icon name="comment" css-classes="link-highlight" />
+      <icon name="comment" class="link-highlight" />
     </gl-button>
   </div>
 </template>

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

@@ -194,9 +194,9 @@ export default {
                 v-show="noEmoji"
                 class="js-no-emoji-placeholder no-emoji-placeholder position-relative"
               >
-                <icon name="slight-smile" css-classes="award-control-icon-neutral" />
-                <icon name="smiley" css-classes="award-control-icon-positive" />
-                <icon name="smile" css-classes="award-control-icon-super-positive" />
+                <icon name="slight-smile" class="award-control-icon-neutral" />
+                <icon name="smiley" class="award-control-icon-positive" />
+                <icon name="smile" class="award-control-icon-super-positive" />
               </span>
             </button>
           </span>

app/assets/javascripts/sidebar/components/todo_toggle/todo.vue

@@ -82,11 +82,7 @@ export default {
     data-boundary="viewport"
     @click="handleButtonClick"
   >
-    <icon
-      v-show="collapsed"
-      :css-classes="collapsedButtonIconClasses"
-      :name="collapsedButtonIcon"
-    />
+    <icon v-show="collapsed" :class="collapsedButtonIconClasses" :name="collapsedButtonIcon" />
     <span v-show="!collapsed" class="issuable-todo-inner"> {{ buttonLabel }} </span>
     <gl-loading-icon v-show="isActionActive" :inline="true" />
   </button>

app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue

@@ -19,6 +19,6 @@ export default {
 </script>
 <template>
   <a :href="link" target="_blank" rel="noopener noreferrer nofollow" :class="cssClass">
-    {{ __('View app') }} <icon css-classes="fgray" name="external-link" />
+    {{ __('View app') }} <icon class="fgray" name="external-link" />
   </a>
 </template>

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

@@ -83,7 +83,7 @@ export default {
     :class="{ 'ml-auto': isCentered }"
     class="file-changed-icon d-inline-block"
   >
-    <icon v-if="showIcon" :name="changedIcon" :size="size" :css-classes="changedIconClass" />
+    <icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" />
   </span>
 </template>
 

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

@@ -66,5 +66,5 @@ export default {
 };
 </script>
 <template>
-  <span :class="cssClass"> <icon :name="icon" :size="size" :css-classes="cssClasses" /> </span>
+  <span :class="cssClass"> <icon :name="icon" :size="size" :class="cssClasses" /> </span>
 </template>

app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue

@@ -40,7 +40,7 @@ export default {
         </template>
       </p>
       <gl-link :href="path" class="btn btn-default" rel="nofollow" download target="_blank">
-        <icon :size="16" name="download" css-classes="float-left append-right-8" />
+        <icon :size="16" name="download" class="float-left append-right-8" />
         {{ __('Download') }}
       </gl-link>
     </div>

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

@@ -75,7 +75,7 @@ export default {
     <svg v-if="!loading && !folder" :class="[iconSizeClass, cssClasses]">
       <use v-bind="{ 'xlink:href': spriteHref }" />
     </svg>
-    <icon v-if="!loading && folder" :name="folderIconName" :size="size" css-classes="folder-icon" />
+    <icon v-if="!loading && folder" :name="folderIconName" :size="size" class="folder-icon" />
     <gl-loading-icon v-if="loading" :inline="true" />
   </span>
 </template>

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

@@ -27,7 +27,7 @@ if (process.env.NODE_ENV !== 'production') {
  *  <icon
  *    name="retry"
  *    :size="32"
- *    css-classes="top"
+ *    class="top"
  *  />
  */
 export default {
@@ -42,45 +42,7 @@ export default {
       type: Number,
       required: false,
       default: 16,
-      validator(value) {
-        return validSizes.includes(value);
-      },
-    },
-
-    cssClasses: {
-      type: String,
-      required: false,
-      default: '',
-    },
-
-    width: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-
-    height: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-
-    y: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-
-    x: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-
-    tabIndex: {
-      type: String,
-      required: false,
-      default: null,
+      validator: value => validSizes.includes(value),
     },
   },
 
@@ -99,15 +61,7 @@ export default {
 </script>
 
 <template>
-  <svg
-    :class="[iconSizeClass, iconTestClass, cssClasses]"
-    :width="width"
-    :height="height"
-    :x="x"
-    :y="y"
-    :tabindex="tabIndex"
-    aria-hidden="true"
-  >
+  <svg :class="[iconSizeClass, iconTestClass]" aria-hidden="true">
     <use v-bind="{ 'xlink:href': spriteHref }" />
   </svg>
 </template>

app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue

@@ -63,7 +63,7 @@ export default {
           <icon
             v-if="hasState"
             ref="iconElementXL"
-            :css-classes="iconClass"
+            :class="iconClass"
             :name="iconName"
             :size="16"
             :title="stateTitle"
@@ -100,7 +100,7 @@ export default {
             <span ref="iconElement">
               <icon
                 v-if="hasState"
-                :css-classes="iconClass"
+                :class="iconClass"
                 :name="iconName"
                 :title="stateTitle"
                 :aria-label="state"

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

@@ -74,7 +74,7 @@ export default {
       @click="toggleFeature"
     >
       <gl-loading-icon class="loading-icon" />
-      <span class="toggle-icon"> <icon :name="toggleIcon" css-classes="toggle-icon-svg" /> </span>
+      <span class="toggle-icon"> <icon :name="toggleIcon" class="toggle-icon-svg" /> </span>
     </button>
   </label>
 </template>

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

@@ -71,15 +71,11 @@ export default {
         </div>
         <div class="text-secondary">
           <div v-if="user.bio" class="js-bio d-flex mb-1">
-            <icon name="profile" css-classes="category-icon flex-shrink-0" />
+            <icon name="profile" class="category-icon flex-shrink-0" />
             <span class="ml-1">{{ user.bio }}</span>
           </div>
           <div v-if="user.organization" class="js-organization d-flex mb-1">
-            <icon
-              v-show="!jobInfoIsLoading"
-              name="work"
-              css-classes="category-icon flex-shrink-0"
-            />
+            <icon v-show="!jobInfoIsLoading" name="work" class="category-icon flex-shrink-0" />
             <span class="ml-1">{{ user.organization }}</span>
           </div>
           <gl-skeleton-loading
@@ -92,7 +88,7 @@ export default {
           <icon
             v-show="!locationIsLoading && user.location"
             name="location"
-            css-classes="category-icon flex-shrink-0"
+            class="category-icon flex-shrink-0"
           />
           <span class="ml-1">{{ user.location }}</span>
           <gl-skeleton-loading

config/initializers/0_inflections.rb

@@ -20,6 +20,7 @@ ActiveSupport::Inflector.inflections do |inflect|
     file_registry
     job_artifact_registry
     container_repository_registry
+    design_registry
     vulnerability_feedback
     vulnerabilities_feedback
     group_view

config/initializers/7_prometheus_metrics.rb

@@ -54,5 +54,7 @@ if !Rails.env.test? && Gitlab::Metrics.prometheus_metrics_enabled?
     elsif defined?(::Puma)
       Gitlab::Metrics::Samplers::PumaSampler.instance(Settings.monitoring.puma_sampler_interval).start
     end
+
+    Gitlab::Metrics::RequestsRackMiddleware.initialize_http_request_duration_seconds
   end
 end

doc/development/fe_guide/icons.md

@@ -59,8 +59,8 @@ export default {
 <template>
   <icon
     name="issues"
-    :size="72"
-    css-classes="icon-danger"
+    :size="24"
+    class="icon-danger"
   />
 </template>
 ```

lib/gitlab/metrics/requests_rack_middleware.rb

@@ -3,6 +3,18 @@
 module Gitlab
   module Metrics
     class RequestsRackMiddleware
+      HTTP_METHODS = {
+        "delete" => %w(200 202 204 303 400 401 403 404 410 422 500 503),
+        "get" => %w(200 204 301 302 303 304 307 400 401 403 404 410 412 422 429 500 503),
+        "head" => %w(200 204 301 302 303 304 400 401 403 404 410 429 500 503),
+        "options" => %w(200 404),
+        "patch" => %w(200 202 204 400 403 404 409 416 422 500),
+        "post" => %w(200 201 202 204 301 302 303 304 400 401 403 404 406 409 410 412 413 415 422 429 500 503),
+        "propfind" => %w(404),
+        "put" => %w(200 202 204 400 401 403 404 405 406 409 410 415 422 500),
+        "report" =>  %w(404)
+      }.freeze
+
       def initialize(app)
         @app = app
       end
@@ -20,6 +32,14 @@ module Gitlab
                                                            {}, [0.05, 0.1, 0.25, 0.5, 0.7, 1, 2.5, 5, 10, 25])
       end
 
+      def self.initialize_http_request_duration_seconds
+        HTTP_METHODS.each do |method, statuses|
+          statuses.each do |status|
+            http_request_duration_seconds.get({ method: method, status: status })
+          end
+        end
+      end
+
       def call(env)
         method = env['REQUEST_METHOD'].downcase
         started = Time.now.to_f

qa/qa/specs/features/api/1_manage/rate_limits_spec.rb

@@ -3,11 +3,8 @@
 module QA
   context 'Manage with IP rate limits', :requires_admin do
     describe 'Users API' do
-      before(:context) do
-        @api_client = Runtime::API::Client.new(:gitlab, ip_limits: true)
-      end
-
-      let(:request) { Runtime::API::Request.new(@api_client, '/users') }
+      let(:api_client) { Runtime::API::Client.new(:gitlab, ip_limits: true) }
+      let(:request) { Runtime::API::Request.new(api_client, '/users') }
 
       it 'GET /users' do
         5.times do

qa/qa/specs/features/api/3_create/repository/project_archive_compare_spec.rb

@@ -8,7 +8,7 @@ module QA
     describe 'Compare archives of different user projects with the same name and check they\'re different' do
       include Support::Api
 
-      before(:all) do
+      before do
         @project_name = "project-archive-download-#{SecureRandom.hex(8)}"
         @archive_types = %w(tar.gz tar.bz2 tar zip)
         @users = {

spec/frontend/notes/components/__snapshots__/discussion_jump_to_next_button_spec.js.snap

@@ -11,7 +11,6 @@ exports[`JumpToNextDiscussionButton matches the snapshot 1`] = `
     title=""
   >
     <icon-stub
-      cssclasses=""
       name="comment-next"
       size="16"
     />

spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap

@@ -14,7 +14,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
   >
     <icon-stub
       aria-hidden="true"
-      cssclasses=""
       name="eye"
       size="16"
     />
@@ -40,7 +39,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
       <icon-stub
         aria-hidden="true"
         class="sidebar-item-icon inline"
-        cssclasses=""
         name="eye"
         size="16"
       />
@@ -68,7 +66,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
   >
     <icon-stub
       aria-hidden="true"
-      cssclasses=""
       name="eye"
       size="16"
     />
@@ -104,7 +101,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
       <icon-stub
         aria-hidden="true"
         class="sidebar-item-icon inline"
-        cssclasses=""
         name="eye"
         size="16"
       />
@@ -132,7 +128,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
   >
     <icon-stub
       aria-hidden="true"
-      cssclasses=""
       name="eye-slash"
       size="16"
     />
@@ -158,7 +153,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
       <icon-stub
         aria-hidden="true"
         class="sidebar-item-icon inline is-active"
-        cssclasses=""
         name="eye-slash"
         size="16"
       />
@@ -186,7 +180,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
   >
     <icon-stub
       aria-hidden="true"
-      cssclasses=""
       name="eye-slash"
       size="16"
     />
@@ -222,7 +215,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
       <icon-stub
         aria-hidden="true"
         class="sidebar-item-icon inline is-active"
-        cssclasses=""
         name="eye-slash"
         size="16"
       />

spec/frontend/sidebar/__snapshots__/todo_spec.js.snap

@@ -14,7 +14,7 @@ exports[`SidebarTodo template renders component container element with proper da
   type="button"
 >
   <icon-stub
-    cssclasses="todo-undone"
+    class="todo-undone"
     name="todo-done"
     size="16"
     style="display: none;"

spec/frontend/sidebar/todo_spec.js

@@ -44,7 +44,12 @@ describe('SidebarTodo', () => {
     ({ isTodo, iconClass, label, icon }) => {
       createComponent({ isTodo });
 
-      expect(wrapper.find(Icon).props('cssClasses')).toStrictEqual(iconClass);
+      expect(
+        wrapper
+          .find(Icon)
+          .classes()
+          .join(' '),
+      ).toStrictEqual(iconClass);
       expect(wrapper.find(Icon).props('name')).toStrictEqual(icon);
       expect(wrapper.find('button').text()).toBe(label);
     },

spec/frontend/vue_shared/components/changed_file_icon_spec.js

@@ -28,10 +28,7 @@ describe('Changed file icon', () => {
 
   const findIcon = () => wrapper.find(Icon);
   const findIconName = () => findIcon().props('name');
-  const findIconClasses = () =>
-    findIcon()
-      .props('cssClasses')
-      .split(' ');
+  const findIconClasses = () => findIcon().classes();
   const findTooltipText = () => wrapper.attributes('data-original-title');
 
   it('with isCentered true, adds center class', () => {

spec/frontend/vue_shared/components/file_icon_spec.js

@@ -49,7 +49,7 @@ describe('File Icon component', () => {
     });
 
     expect(findIcon().exists()).toBe(false);
-    expect(wrapper.find(Icon).props('cssClasses')).toContain('folder-icon');
+    expect(wrapper.find(Icon).classes()).toContain('folder-icon');
   });
 
   it('should render a loading icon', () => {

spec/javascripts/vue_shared/components/icon_spec.js

@@ -12,8 +12,6 @@ describe('Sprite Icon Component', function() {
       icon = mountComponent(IconComponent, {
         name: 'commit',
         size: 32,
-        cssClasses: 'extraclasses',
-        tabIndex: '0',
       });
     });
 
@@ -47,10 +45,8 @@ describe('Sprite Icon Component', function() {
     it('should properly render img css', function() {
       const { classList } = icon.$el;
       const containsSizeClass = classList.contains('s32');
-      const containsCustomClass = classList.contains('extraclasses');
 
       expect(containsSizeClass).toBe(true);
-      expect(containsCustomClass).toBe(true);
     });
 
     it('`name` validator should return false for non existing icons', () => {
@@ -60,9 +56,5 @@ describe('Sprite Icon Component', function() {
     it('`name` validator should return false for existing icons', () => {
       expect(Icon.props.name.validator('commit')).toBe(true);
     });
-
-    it('should contain `tabindex` attribute on svg element when `tabIndex` prop is defined', () => {
-      expect(icon.$el.getAttribute('tabindex')).toBe('0');
-    });
   });
 });

spec/lib/gitlab/metrics/requests_rack_middleware_spec.rb

@@ -63,5 +63,19 @@ describe Gitlab::Metrics::RequestsRackMiddleware do
         expect { subject.call(env) }.to raise_error(StandardError)
       end
     end
+
+    describe '.initialize_http_request_duration_seconds' do
+      it "sets labels" do
+        expected_labels = []
+        described_class::HTTP_METHODS.each do |method, statuses|
+          statuses.each do |status|
+            expected_labels << { method: method, status: status }
+          end
+        end
+
+        described_class.initialize_http_request_duration_seconds
+        expect(described_class.http_request_duration_seconds.values.keys).to include(*expected_labels)
+      end
+    end
   end
 end