[skip ci] Convert panel related class names to card

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

@@ -23,8 +23,8 @@ export default {
 </script>
 <template>
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ s__('Badges|Your badges') }}
       <span
         v-show="!isLoading"
@@ -33,19 +33,19 @@ export default {
     </div>
     <loading-icon
       v-show="isLoading"
-      class="panel-body"
+      class="card-body"
       size="2"
     />
     <div
       v-if="hasNoBadges"
-      class="panel-body"
+      class="card-body"
     >
       <span v-if="isGroupBadge">{{ s__('Badges|This group has no badges') }}</span>
       <span v-else>{{ s__('Badges|This project has no badges') }}</span>
     </div>
     <div
       v-else
-      class="panel-body"
+      class="card-body"
     >
       <badge-list-row
         v-for="badge in badges"

app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js

@@ -2,9 +2,9 @@ import sqljs from 'sql.js';
 import { template as _template } from 'underscore';
 const PREVIEW_TEMPLATE = _template(`
-  <div class="panel panel-default">
-    <div class="panel-heading"><%- name %></div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header"><%- name %></div>
+    <div class="card-body">
       <img class="img-thumbnail" src="data:image/png;base64,<%- image %>"/>
     </div>
   </div>

app/assets/javascripts/monitoring/components/graph_group.vue

@@ -17,12 +17,12 @@ export default {
 <template>
   <div
     v-if="showPanels"
-    class="panel panel-default prometheus-panel"
+    class="card prometheus-panel"
   >
-    <div class="panel-heading">
+    <div class="card-header">
       <h4>{{ name }}</h4>
     </div>
-    <div class="panel-body prometheus-graph-group">
+    <div class="card-body prometheus-graph-group">
       <slot></slot>
     </div>
   </div>

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

@@ -100,7 +100,7 @@ export default {
         : 'div';
     },
     wrapperClass() {
-      return this.isDiffDiscussion ? '' : 'panel panel-default';
+      return this.isDiffDiscussion ? '' : 'card';
     },
   },
   mounted() {

app/assets/javascripts/prometheus_metrics/prometheus_metrics.js

@@ -31,7 +31,7 @@ export default class PrometheusMetrics {
   /* eslint-disable class-methods-use-this */
   handlePanelToggle(e) {
     const $toggleBtn = $(e.currentTarget);
-    const $currentPanelBody = $toggleBtn.closest('.panel').find('.panel-body');
+    const $currentPanelBody = $toggleBtn.closest('.card').find('.card-body');
     $currentPanelBody.toggleClass('hidden');
     if ($toggleBtn.hasClass('fa-caret-down')) {
       $toggleBtn.removeClass('fa-caret-down').addClass('fa-caret-right');

app/views/admin/background_jobs/show.html.haml

@@ -7,9 +7,9 @@
   %hr
-  .panel.panel-default
-    .panel-heading Sidekiq running processes
-    .panel-body
+  .card
+    .card-header Sidekiq running processes
+    .card-body
       - if @sidekiq_processes.empty?
         %h4.cred
           %i.fa.fa-exclamation-triangle
@@ -41,5 +41,5 @@
-  .panel.panel-default
+  .card
     %iframe{ src: sidekiq_path, width: '100%', height: 970, style: "border: 0" }

app/views/admin/groups/show.html.haml

@@ -10,8 +10,8 @@
 %hr
 .row
   .col-md-6
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         Group info:
       %ul.well-list
         %li
@@ -58,9 +58,9 @@
             = group_lfs_status(@group)
             = link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs')
-    .panel.panel-default
-      .panel-heading
-        %h3.panel-title
+    .card
+      .card-header
+        %h3.card-title
           Projects
           %span.badge.badge-pill
             #{@group.projects.count}
@@ -73,12 +73,12 @@
                 = storage_counter(project.statistics.storage_size)
             %span.float-right.light
               %span.monospace= project.full_path + '.git'
-      .panel-footer
+      .card-footer
         = paginate @projects, param_name: 'projects_page', theme: 'gitlab'
     - if @group.shared_projects.any?
-      .panel.panel-default
-        .panel-heading
+      .card
+        .card-header
           Projects shared with #{@group.name}
           %span.badge.badge-pill
             #{@group.shared_projects.count}
@@ -94,10 +94,10 @@
   .col-md-6
     - if can?(current_user, :admin_group_member, @group)
-      .panel.panel-default
-        .panel-heading
+      .card
+        .card-header
           Add user(s) to the group:
-        .panel-body.form-holder
+        .card-body.form-holder
           %p.light
             Read more about project permissions
             %strong= link_to "here", help_page_path("user/permissions"), class: "vlink"
@@ -111,8 +111,8 @@
             = button_tag 'Add users to group', class: "btn btn-create"
       = render 'shared/members/requests', membership_source: @group, requesters: @requesters, force_mobile_view: true
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         %strong= @group.name
         group members
         %span.badge.badge-pill= @group.members.size
@@ -120,5 +120,5 @@
           = link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@group, :members]), class: "btn btn-xs"
       %ul.well-list.group-users-list.content-list.members-list
         = render partial: 'shared/members/member', collection: @members, as: :member, locals: { show_controls: false }
-      .panel-footer
+      .card-footer
         = paginate @members, param_name: 'members_page', theme: 'gitlab'

app/views/admin/health_check/show.html.haml

@@ -25,8 +25,8 @@
         %code= metrics_url(token: Gitlab::CurrentSettings.health_check_access_token)
   %hr
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       Current Status:
       - if no_errors
         = icon('circle', class: 'cgreen')
@@ -34,7 +34,7 @@
       - else
         = icon('warning', class: 'cred')
         #{ s_('HealthCheck|Unhealthy') }
-    .panel-body
+    .card-body
       - if no_errors
         #{ s_('HealthCheck|No Health Problems Detected') }
       - else

app/views/admin/hooks/index.html.haml

@@ -15,8 +15,8 @@
     %hr
     - if @hooks.any?
-      .panel.panel-default
-        .panel-heading
+      .card
+        .card-header
           System hooks (#{@hooks.count})
         %ul.content-list
           - @hooks.each do |hook|

app/views/admin/projects/show.html.haml

@@ -10,8 +10,8 @@
 - if @project.last_repository_check_failed?
   .row
     .col-md-12
-      .panel
-        .panel-heading.alert.alert-danger
+      .card
+        .card-header.alert.alert-danger
           Last repository check
           = "(#{time_ago_in_words(@project.last_repository_check_at)} ago)"
           failed. See
@@ -19,8 +19,8 @@
           for error messages.
 .row
   .col-md-6
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         Project info:
       %ul.well-list
         %li
@@ -110,10 +110,10 @@
               = visibility_level_icon(@project.visibility_level)
               = visibility_level_label(@project.visibility_level)
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         Transfer project
-      .panel-body
+      .card-body
         = form_for @project, url: transfer_admin_project_path(@project), method: :put, html: { class: 'form-horizontal' } do |f|
           .form-group
             = f.label :new_namespace_id, "Namespace", class: 'control-label'
@@ -130,10 +130,10 @@
             .col-sm-offset-2.col-sm-10
               = f.submit 'Transfer', class: 'btn btn-primary'
-    .panel.panel-default.repository-check
-      .panel-heading
+    .card.repository-check
+      .card-header
         Repository check
-      .panel-body
+      .card-body
         = form_for @project, url: repository_check_admin_project_path(@project), method: :post do |f|
           .form-group
             - if @project.last_repository_check_at.nil?
@@ -158,8 +158,8 @@
   .col-md-6
     - if @group
-      .panel.panel-default
-        .panel-heading
+      .card
+        .card-header
           %strong= @group.name
           group members
           %span.badge.badge-pill= @group_members.size
@@ -168,13 +168,13 @@
               = icon('pencil-square-o', text: 'Manage access')
         %ul.well-list.content-list.members-list
           = render partial: 'shared/members/member', collection: @group_members, as: :member, locals: { show_controls: false }
-        .panel-footer
+        .card-footer
           = paginate @group_members, param_name: 'group_members_page', theme: 'gitlab'
     = render 'shared/members/requests', membership_source: @project, requesters: @requesters, force_mobile_view: true
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         %strong= @project.name
         project members
         %span.badge.badge-pill= @project.users.size
@@ -182,5 +182,5 @@
           = link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@project, :members]), class: "btn btn-xs"
       %ul.well-list.project_members.content-list.members-list
         = render partial: 'shared/members/member', collection: @project_members, as: :member, locals: { show_controls: false }
-      .panel-footer
+      .card-footer
         = paginate @project_members, param_name: 'project_members_page', theme: 'gitlab'

app/views/admin/requests_profiles/index.html.haml

@@ -13,8 +13,8 @@
   - if @profiles.present?
     .prepend-top-default
       - @profiles.each do |path, profiles|
-        .panel.panel-default.panel-small
-          .panel-heading
+        .card.card-small
+          .card-header
             %code= path
           %ul.content-list
             - profiles.each do |profile|

app/views/admin/users/_profile.html.haml

-.panel.panel-default
-  .panel-heading
+.card
+  .card-header
     Profile
   %ul.well-list
     %li

app/views/admin/users/_projects.html.haml

 - if local_assigns.has_key?(:contributed_projects) && contributed_projects.present?
-  .panel.panel-default.contributed-projects
-    .panel-heading Projects contributed to
+  .card.contributed-projects
+    .card-header Projects contributed to
     = render 'shared/projects/list',
       projects: contributed_projects.sort_by(&:star_count).reverse,
       projects_limit: 5, stars: true, avatar: false
 - if local_assigns.has_key?(:projects) && projects.present?
-  .panel.panel-default
-    .panel-heading Personal projects
+  .card
+    .card-header Personal projects
     = render 'shared/projects/list',
       projects: projects.sort_by(&:star_count).reverse,
       projects_limit: 10, stars: true, avatar: false

app/views/admin/users/projects.html.haml

@@ -2,8 +2,8 @@
 = render 'admin/users/head'
 - if @user.groups.any?
-  .panel.panel-default
-    .panel-heading Group projects
+  .card
+    .card-header Group projects
     %ul.well-list
       - @user.group_members.includes(:source).each do |group_member|
         - group = group_member.group
@@ -26,8 +26,8 @@
   .col-md-6
-    .panel.panel-default
-      .panel-heading Joined projects (#{@joined_projects.count})
+    .card
+      .card-header Joined projects (#{@joined_projects.count})
       %ul.well-list
         - @joined_projects.sort_by(&:full_name).each do |project|
           - member = project.team.find_member(@user.id)

app/views/admin/users/show.html.haml

@@ -5,8 +5,8 @@
 .row
   .col-md-6
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         = @user.name
       %ul.well-list
         %li
@@ -18,8 +18,8 @@
               = @user.username
     = render 'admin/users/profile', user: @user
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         Account:
       %ul.well-list
         %li
@@ -128,20 +128,20 @@
   .col-md-6
     - unless @user == current_user
       - unless @user.confirmed?
-        .panel.panel-info
-          .panel-heading
+        .card.bg-info
+          .card-header
             Confirm user
-          .panel-body
+          .card-body
             - if @user.unconfirmed_email.present?
               - email = " (#{@user.unconfirmed_email})"
             %p This user has an unconfirmed email address#{email}. You may force a confirmation.
             %br
             = link_to 'Confirm user', confirm_admin_user_path(@user), method: :put, class: "btn btn-info", data: { confirm: 'Are you sure?' }
       - if @user.blocked?
-        .panel.panel-info
-          .panel-heading
+        .card.bg-info
+          .card-header
             This user is blocked
-          .panel-body
+          .card-body
             %p A blocked user cannot:
             %ul
               %li Log in
@@ -149,10 +149,10 @@
             %br
             = link_to 'Unblock user', unblock_admin_user_path(@user), method: :put, class: "btn btn-info", data: { confirm: 'Are you sure?' }
       - else
-        .panel.panel-warning
-          .panel-heading
+        .card.bg-warning
+          .card-header
             Block this user
-          .panel-body
+          .card-body
             %p Blocking user has the following effects:
             %ul
               %li User will not be able to login
@@ -162,18 +162,18 @@
             %br
             = link_to 'Block user', block_admin_user_path(@user), data: { confirm: 'USER WILL BE BLOCKED! Are you sure?' }, method: :put, class: "btn btn-warning"
       - if @user.access_locked?
-        .panel.panel-info
-          .panel-heading
+        .card.bg-info
+          .card-header
             This account has been locked
-          .panel-body
+          .card-body
             %p This user has been temporarily locked due to excessive number of failed logins. You may manually unlock the account.
             %br
             = link_to 'Unlock user', unlock_admin_user_path(@user), method: :put, class: "btn btn-info", data: { confirm: 'Are you sure?' }
-      .panel.panel-danger
-        .panel-heading
+      .card.bg-danger
+        .card-header
           = s_('AdminUsers|Delete user')
-        .panel-body
+        .card-body
           - if @user.can_be_removed? && can?(current_user, :destroy_user, @user)
             %p Deleting a user has the following effects:
             = render 'users/deletion_guidance', user: @user
@@ -196,10 +196,10 @@
               %p
                 You don't have access to delete this user.
-      .panel.panel-danger
-        .panel-heading
+      .card.bg-danger
+        .card-header
           = s_('AdminUsers|Delete user and contributions')
-        .panel-body
+        .card-body
           - if can?(current_user, :destroy_user, @user)
             %p
               This option deletes the user and any contributions that

app/views/dashboard/todos/index.html.haml

@@ -73,7 +73,7 @@
   - if @todos.any?
     .js-todos-list-container
       .js-todos-options{ data: { per_page: @todos.limit_value, current_page: @todos.current_page, total_pages: @todos.total_pages } }
-        .panel.panel-default.panel-without-border.panel-without-margin
+        .card.card-without-border.card-without-margin
           %ul.content-list.todos-list
             = render @todos
       = paginate @todos, theme: "gitlab"

app/views/discussions/_discussion.html.haml

@@ -51,5 +51,5 @@
           - if discussion.diff_discussion? && discussion.diff_file
             = render "discussions/diff_with_notes", discussion: discussion
           - else
-            .panel.panel-default
+            .card
               = render partial: "discussions/notes", locals: { discussion: discussion, disable_collapse_class: true }

app/views/groups/edit.html.haml

 - breadcrumb_title "General Settings"
-.panel.panel-default.prepend-top-default
-  .panel-heading
+.card.prepend-top-default
+  .card-header
     Group settings
-  .panel-body
+  .card-body
     = form_for @group, html: { multipart: true, class: "form-horizontal gl-show-field-errors" }, authenticity_token: true do |f|
       = form_errors(@group)
       = render 'shared/group_form', f: f
@@ -45,9 +45,9 @@
       .form-actions
         = f.submit 'Save group', class: "btn btn-save"
-.panel.panel-danger
-  .panel-heading Remove group
-  .panel-body
+.card.bg-danger
+  .card-header Remove group
+  .card-body
     = form_tag(@group, method: :delete) do
       %p
         Removing group will cause all child projects and resources to be removed.
@@ -58,9 +58,9 @@
         = button_to 'Remove group', '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_group_message(@group) }
 - if supports_nested_groups?
-  .panel.panel-warning
-    .panel-heading Transfer group
-    .panel-body
+  .card.bg-warning
+    .card-header Transfer group
+    .card-body
       = form_for @group, url: transfer_group_path(@group), method: :put do |f|
         .form-group
           = dropdown_tag('Select parent group', options: { toggle_class: 'js-groups-dropdown', title: 'Parent Group', filter: true, dropdown_class: 'dropdown-open-top dropdown-group-transfer', placeholder: "Search groups", data: { data: parent_group_options(@group) } })

app/views/groups/group_members/index.html.haml

@@ -22,8 +22,8 @@
         %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
           = icon("search")
         = render 'shared/members/sort_dropdown'
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       Members with access to
       %strong= @group.name
       %span.badge.badge-pill= @members.total_count

app/views/groups/projects.html.haml

 - breadcrumb_title "Projects"
-.panel.panel-default.prepend-top-default
-  .panel-heading
+.card.prepend-top-default
+  .card-header
     %strong= @group.name
     projects:
     - if can? current_user, :admin_group, @group