[skip ci] Convert panel related class names to card

app/views/projects/services/prometheus/_show.html.haml

@@ -7,12 +7,12 @@
       = link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus')
   .col-lg-9
-    .panel.panel-default.js-panel-monitored-metrics{ data: { active_metrics: active_common_project_prometheus_metrics_path(@project, :json), metrics_help_path: help_page_path('user/project/integrations/prometheus_library/metrics') } }
-      .panel-heading
-        %h3.panel-title
+    .card.js-panel-monitored-metrics{ data: { active_metrics: active_common_project_prometheus_metrics_path(@project, :json), metrics_help_path: help_page_path('user/project/integrations/prometheus_library/metrics') } }
+      .card-header
+        %h3.card-title
           = s_('PrometheusService|Common metrics')
           %span.badge.badge-pill.js-monitored-count 0
-      .panel-body
+      .card-body
         .loading-metrics.js-loading-metrics
           %p.prepend-top-10.prepend-left-10
             = icon('spinner spin', class: 'metrics-load-spinner')
@@ -22,13 +22,13 @@
             = s_('PrometheusService|Waiting for your first deployment to an environment to find common metrics')
         %ul.list-unstyled.metrics-list.hidden.js-metrics-list
-    .panel.panel-default.hidden.js-panel-missing-env-vars
-      .panel-heading
-        %h3.panel-title
+    .card.hidden.js-panel-missing-env-vars
+      .card-header
+        %h3.card-title
           = icon('caret-right lg fw', class: 'panel-toggle js-panel-toggle', 'aria-label' => 'Toggle panel')
           = s_('PrometheusService|Missing environment variable')
           %span.badge.badge-pill.js-env-var-count 0
-      .panel-body.hidden
+      .card-body.hidden
         .flash-container
           .flash-notice
             .flash-text

app/views/projects/settings/ci_cd/_badge.html.haml

@@ -2,15 +2,15 @@
   .col-lg-12
     %h4
       = badge.title.capitalize
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         %b
           = badge.title.capitalize
           ·
         = badge.to_html
         .float-right
           = render 'shared/ref_switcher', destination: 'badges', align_right: true
-      .panel-body
+      .card-body
         .row
           .col-md-2.text-center
             Markdown

app/views/projects/triggers/_index.html.haml

 .row.prepend-top-default.append-bottom-default.triggers-container
   .col-lg-12
     = render "projects/triggers/content"
-    .panel.panel-default
-      .panel-heading
-        %h4.panel-title
+    .card
+      .card-header
+        %h4.card-title
           Manage your project's triggers
-      .panel-body
+      .card-body
         = render "projects/triggers/form", btn_text: "Add trigger"
         %hr
         - if @triggers.any?
@@ -26,7 +26,7 @@
           %p.settings-message.text-center.append-bottom-default
             No triggers have been created yet. Add one using the form above.
-      .panel-footer
+      .card-footer
         %p
           In the following examples, you can see the exact API call you need to

app/views/shared/_issues.html.haml

 - if @issues.to_a.any?
-  .panel.panel-default.panel-small.panel-without-border
+  .card.card-small.card-without-border
     %ul.content-list.issues-list.issuable-list
       = render partial: 'projects/issues/issue', collection: @issues
   = paginate @issues, theme: "gitlab"

app/views/shared/_merge_requests.html.haml

 - if @merge_requests.to_a.any?
-  .panel.panel-default.panel-small.panel-without-border
+  .card.card-small.card-without-border
     %ul.content-list.mr-list.issuable-list
       = render partial: 'projects/merge_requests/merge_request', collection: @merge_requests

app/views/shared/members/_requests.html.haml

@@ -4,8 +4,8 @@
 - return if requesters.empty?
-.panel.panel-default.prepend-top-default{ class: ('panel-mobile' if force_mobile_view ) }
-  .panel-heading
+.card.prepend-top-default{ class: ('card-mobile' if force_mobile_view ) }
+  .card-header
     Users requesting access to
     %strong= membership_source.name
     %span.badge.badge-pill= requesters.size

app/views/shared/milestones/_issuables.html.haml

 - show_counter = local_assigns.fetch(:show_counter, false)
 - primary = local_assigns.fetch(:primary, false)
-- panel_class = primary ? 'panel-primary' : 'panel-default'
-.panel{ class: panel_class }
-  .panel-heading
+- panel_class = primary ? 'bg-primary' : ''
+.card{ class: panel_class }
+  .card-header
     .title
       = title
     - if show_counter

app/views/shared/plugins/_index.html.haml

@@ -10,8 +10,8 @@
   .col-lg-8.append-bottom-default
     - if plugins.any?
-      .panel.panel-default
-        .panel-heading
+      .card
+        .card-header
           Plugins (#{plugins.count})
         %ul.content-list
           - plugins.each do |file|

app/views/sherlock/queries/_backtrace.html.haml

 .prepend-top-default
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       %strong
         = t('sherlock.application_backtrace')
     %ul.well-list
@@ -15,8 +15,8 @@
             = t('sherlock.line')
             = location.line
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       %strong
         = t('sherlock.full_backtrace')
     %ul.well-list

app/views/sherlock/queries/_general.html.haml

 .prepend-top-default
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       %strong
         = t('sherlock.general')
     %ul.well-list
@@ -23,8 +23,8 @@
           = t('sherlock.line')
           = frame.line
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       .float-right
         %button.js-clipboard-trigger.btn.btn-xs{ title: t('sherlock.copy_to_clipboard'), type: :button }
           %i.fa.fa-clipboard
@@ -38,8 +38,8 @@
           :preserve
             #{highlight("#{@query.id}.sql", @query.formatted_query)}
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       .float-right
         %button.js-clipboard-trigger.btn.btn-xs{ title: t('sherlock.copy_to_clipboard'), type: :button }
           %i.fa.fa-clipboard

app/views/sherlock/transactions/_general.html.haml

 .prepend-top-default
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       %strong
         = t('sherlock.general')
     %ul.well-list

features/steps/group/members.rb

@@ -63,6 +63,6 @@ class Spinach::Features::GroupMembers < Spinach::FeatureSteps
   end
   def group_members_list
-    find(".panel .content-list")
+    find(".card .content-list")
   end
 end

spec/features/admin/admin_requests_profiles_spec.rb

@@ -33,12 +33,12 @@ describe 'Admin::RequestsProfilesController' do
       visit admin_requests_profiles_path
-      within('.panel', text: '/gitlab-org/gitlab-ce') do
+      within('.card', text: '/gitlab-org/gitlab-ce') do
         expect(page).to have_selector("a[href='#{admin_requests_profile_path(profile1)}']", text: time1.to_s(:long))
         expect(page).to have_selector("a[href='#{admin_requests_profile_path(profile2)}']", text: time2.to_s(:long))
       end
-      within('.panel', text: '/gitlab-com/infrastructure') do
+      within('.card', text: '/gitlab-com/infrastructure') do
         expect(page).to have_selector("a[href='#{admin_requests_profile_path(profile3)}']", text: time3.to_s(:long))
       end
     end

spec/features/admin/admin_users_spec.rb

@@ -283,14 +283,14 @@ describe "Admin::Users" do
     end
     it "lists group projects" do
-      within(:css, '.append-bottom-default + .panel') do
+      within(:css, '.append-bottom-default + .card') do
         expect(page).to have_content 'Group projects'
         expect(page).to have_link group.name, admin_group_path(group)
       end
     end
     it 'allows navigation to the group details' do
-      within(:css, '.append-bottom-default + .panel') do
+      within(:css, '.append-bottom-default + .card') do
         click_link group.name
       end
       within(:css, 'h3.page-title') do
@@ -300,7 +300,7 @@ describe "Admin::Users" do
     end
     it 'shows the group access level' do
-      within(:css, '.append-bottom-default + .panel') do
+      within(:css, '.append-bottom-default + .card') do
         expect(page).to have_content 'Developer'
       end
     end

spec/features/groups/members/search_members_spec.rb

@@ -22,7 +22,7 @@ describe 'Search group member' do
       find('.member-search-btn').click
     end
-    group_members_list = find(".panel .content-list")
+    group_members_list = find(".card .content-list")
     expect(group_members_list).to have_content(member.name)
     expect(group_members_list).not_to have_content(user.name)
   end

spec/features/groups/settings/group_badges_spec.rb

@@ -21,7 +21,7 @@ feature 'Group Badges' do
     page.within '.badge-settings' do
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
       expect(rows[0]).to have_content badge_1.link_url
       expect(rows[1]).to have_content badge_2.link_url
@@ -48,7 +48,7 @@ feature 'Group Badges' do
         click_button 'Add badge'
         wait_for_requests
-        within '.panel-body' do
+        within '.card-body' do
           expect(find('a')[:href]).to eq badge_link_url
           expect(find('a img')[:src]).to eq badge_image_url
         end
@@ -60,7 +60,7 @@ feature 'Group Badges' do
     it 'form is shown when clicking edit button in list' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
@@ -74,7 +74,7 @@ feature 'Group Badges' do
     it 'updates a badge when submitting the edit form' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
         within 'form' do
@@ -85,7 +85,7 @@ feature 'Group Badges' do
           wait_for_requests
         end
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         expect(rows[1]).to have_content badge_link_url
       end
@@ -99,7 +99,7 @@ feature 'Group Badges' do
     it 'shows a modal when deleting a badge' do
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
       click_delete_button(rows[1])
@@ -109,14 +109,14 @@ feature 'Group Badges' do
     it 'deletes a badge when confirming the modal' do
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
       click_delete_button(rows[1])
       find('.modal .btn-danger').click
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 1
       expect(rows[0]).to have_content badge_1.link_url
     end

spec/features/projects/settings/project_badges_spec.rb

@@ -22,7 +22,7 @@ feature 'Project Badges' do
     page.within '.badge-settings' do
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
       expect(rows[0]).to have_content group_badge.link_url
       expect(rows[1]).to have_content project_badge.link_url
@@ -49,7 +49,7 @@ feature 'Project Badges' do
         click_button 'Add badge'
         wait_for_requests
-        within '.panel-body' do
+        within '.card-body' do
           expect(find('a')[:href]).to eq badge_link_url
           expect(find('a img')[:src]).to eq badge_image_url
         end
@@ -61,7 +61,7 @@ feature 'Project Badges' do
     it 'form is shown when clicking edit button in list' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
@@ -75,7 +75,7 @@ feature 'Project Badges' do
     it 'updates a badge when submitting the edit form' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
         within 'form' do
@@ -86,7 +86,7 @@ feature 'Project Badges' do
           wait_for_requests
         end
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         expect(rows[1]).to have_content badge_link_url
       end
@@ -100,7 +100,7 @@ feature 'Project Badges' do
     it 'shows a modal when deleting a badge' do
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
       click_delete_button(rows[1])
@@ -110,14 +110,14 @@ feature 'Project Badges' do
     it 'deletes a badge when confirming the modal' do
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
       click_delete_button(rows[1])
       find('.modal .btn-danger').click
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 1
       expect(rows[0]).to have_content group_badge.link_url
     end

spec/javascripts/badges/components/badge_list_spec.js

@@ -33,7 +33,7 @@ describe('BadgeList component', () => {
   });
   it('renders a header with the badge count', () => {
-    const header = vm.$el.querySelector('.panel-heading');
+    const header = vm.$el.querySelector('.card-header');
     expect(header).toHaveText(new RegExp(`Your badges\\s+${numberOfDummyBadges}`));
   });

spec/javascripts/badges/components/badge_settings_spec.js

@@ -60,7 +60,7 @@ describe('BadgeSettings component', () => {
   });
   it('displays badge list', () => {
-    const badgeListElement = vm.$el.querySelector('.panel');
+    const badgeListElement = vm.$el.querySelector('.card');
     expect(badgeListElement).not.toBe(null);
     expect(badgeListElement).toBeVisible();
     expect(badgeListElement).toContainText('Your badges');
@@ -87,7 +87,7 @@ describe('BadgeSettings component', () => {
     });
     it('displays no badge list', () => {
-      const badgeListElement = vm.$el.querySelector('.panel');
+      const badgeListElement = vm.$el.querySelector('.card');
       expect(badgeListElement).toBeHidden();
     });
   });

spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js

@@ -257,9 +257,9 @@ describe('BalsamiqViewer', () => {
       name = 'name';
       resource = 'resource';
       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>