feat: upgrade bootstrap (#370)

pact-foundation · Jan 18, 2021 · a457c33 · a457c33
1 parent 840973e
commit a457c33
Show file tree

Hide file tree

Showing 42 changed files with 24,044 additions and 8,372 deletions.
diff --git a/lib/pact_broker/api/renderers/html_pact_renderer.rb b/lib/pact_broker/api/renderers/html_pact_renderer.rb
@@ -80,7 +80,7 @@ def pact_metadata
                       data-provider-name=\"#{provider_name}\"
                       data-consumer-version-number=\"#{consumer_version_number}\"
                       data-pact-url=\"#{pact_url}\"
-                      class='more-options glyphicon glyphicon-option-horizontal'
+                      class='more-options kebab-horizontal'
                       aria-hidden='true'></span>
               </li>
             </ul>

diff --git a/lib/pact_broker/ui/views/index/_getting-started.haml b/lib/pact_broker/ui/views/index/_getting-started.haml
@@ -3,4 +3,4 @@
   %p
     Just getting started? Confused as to why there's nothing "clicky clicky" to see here? The Pact workflow is a "code first" approach. Your pacts will be generated by your consumer tests and then published here, ready to be retrieved by your provider tests for verification.
   %p
-    For step by step instructions on getting started, check out the <a href="https://docs.pact.io/best_practices/pact_nirvana">Effective Pact Setup Guide</a>.
+    For step by step instructions on getting started, check out the <a href="https://docs.pact.io/pact_nirvana">Effective Pact Setup Guide</a>.
diff --git a/lib/pact_broker/ui/views/index/show-with-tags.haml b/lib/pact_broker/ui/views/index/show-with-tags.haml
@@ -11,25 +11,25 @@
         %tr
           %th.consumer
             Consumer
-            %span.glyphicon.glyphicon-sort.relationships-sort
+            %span.sort-icon.relationships-sort
           %th.consumer-version-number
             Consumer<br>Version
-            %span.glyphicon.glyphicon-sort.relationships-sort
+            %span.sort-icon.relationships-sort
           %th.pact{ style: 'width: 40px' }
           %th.provider
             Provider
-            %span.glyphicon.glyphicon-sort.relationships-sort
+            %span.sort-icon.relationships-sort
           %th.provider-version-number
             Provider<br>Version
-            %span.glyphicon.glyphicon-sort.relationships-sort
+            %span.sort-icon.relationships-sort
           %th
             Published
-            %span.glyphicon.glyphicon-sort.relationships-sort
+            %span.sort-icon.relationships-sort
           %th
             Webhook<br>status
           %th
             Last<br>verified
-            %span.glyphicon.glyphicon-sort.relationships-sort
+            %span.sort-icon.relationships-sort
           %th
       %tbody
 
@@ -43,12 +43,12 @@
                 = index_item.consumer_version_number
                 - if index_item.consumer_version_number
                   %button.clippy.invisible{ title: "Copy to clipboard" }
-                    %span.glyphicon.glyphicon-copy
+                    %span.copy-icon
               - if index_item.latest?
-                .tag.label.label-success
+                .tag.badge.badge-success
                   latest
               - index_item.consumer_version_latest_tag_names.each do | tag_name |
-                .tag.label.label-primary
+                .tag.badge.badge-primary
                   = tag_name
             %td.pact
               %span.pact
@@ -63,27 +63,27 @@
                 = index_item.provider_version_number
                 - if index_item.provider_version_number
                   %button.clippy.invisible{ title: "Copy to clipboard" }
-                    %span.glyphicon.glyphicon-copy
+                    %span.copy-icon
               - index_item.provider_version_latest_tag_names.each do | tag_name |
-                .tag.label.label-primary
+                .tag.badge.badge-primary
                   = tag_name
             %td{"data-text": index_item.publication_date_of_latest_pact_order}
               = index_item.publication_date_of_latest_pact.gsub("about ", "")
-            %td{ class: index_item.webhook_status }
+            %td{ class: "table-#{index_item.webhook_status}" }
               - if index_item.show_webhook_status?
                 %a{ href: index_item.webhook_url }
                   = index_item.webhook_label
 
-            %td{ class: index_item.pseudo_branch_verification_status, title: index_item.verification_tooltip, "data-toggle": "tooltip", "data-placement": "left" }
+            %td{ class: "table-#{index_item.pseudo_branch_verification_status}", title: index_item.verification_tooltip, "data-toggle": "tooltip", "data-placement": "left" }
               %div
                 = index_item.last_verified_date.gsub("about ", "")
                 - if index_item.warning?
-                  %span.glyphicon.glyphicon-warning-sign{ 'aria-hidden': true }
+                  %span.warning-icon{ 'aria-hidden': true }
             %td
               - if index_item.show_settings?
-                %span.integration-settings.glyphicon.glyphicon-option-horizontal{ 'aria-hidden': true }
+                %span.integration-settings.kebab-horizontal{ 'aria-hidden': true }
 
-    %div.pagination
+    %p.pagination.text-center
 
     - pagination_locals = { page_number: page_number, page_size: page_size, pagination_record_count: pagination_record_count, current_page_size: current_page_size }
     != render :haml, :'index/_pagination', :layout => false, locals: pagination_locals

diff --git a/lib/pact_broker/ui/views/index/show.haml b/lib/pact_broker/ui/views/index/show.haml
@@ -12,12 +12,12 @@
           %th
           %th.consumer
             Consumer
-            %span.glyphicon.glyphicon-sort.relationships-sort
+            %span.sort-icon.relationships-sort
           %th.pact
 
           %th.provider
             Provider
-            %span.glyphicon.glyphicon-sort.relationships-sort
+            %span.sort-icon.relationships-sort
           %th
           %th
             Latest pact<br>published
@@ -44,17 +44,17 @@
             %td
             %td{"data-text": index_item.publication_date_of_latest_pact_order}
               = index_item.publication_date_of_latest_pact
-            %td{class: index_item.webhook_status}
+            %td{class: "table-#{index_item.webhook_status}"}
               %a{ href: index_item.webhook_url }
                 = index_item.webhook_label
 
-            %td{ class: index_item.pseudo_branch_verification_status, title: index_item.verification_tooltip, "data-toggle": "tooltip", "data-placement": "left" }
+            %td{ class: "table-#{index_item.pseudo_branch_verification_status}", title: index_item.verification_tooltip, "data-toggle": "tooltip", "data-placement": "left" }
               %div
                 = index_item.last_verified_date
                 - if index_item.warning?
-                  %span.glyphicon.glyphicon-warning-sign{ 'aria-hidden': true }
+                  %span.warning-icon{ 'aria-hidden': true }
             %td
-              %span.integration-settings.glyphicon.glyphicon-option-horizontal{ 'aria-hidden': true }
+              %span.integration-settings.kebab-horizontal{ 'aria-hidden': true }
     %div.pagination
 
     - pagination_locals = { page_number: page_number, page_size: page_size, pagination_record_count: pagination_record_count, current_page_size: current_page_size }

diff --git a/lib/pact_broker/ui/views/layouts/main.haml b/lib/pact_broker/ui/views/layouts/main.haml
@@ -5,5 +5,5 @@
     %link{rel: 'shortcut icon', href: "#{base_url}/images/favicon.ico", type:'image/x-icon'}
     %link{rel: 'stylesheet', href: "#{base_url}/css/bootstrap.min.css"}
     %script{type: 'text/javascript', src:"#{base_url}/javascripts/jquery-3.5.1.min.js"}
-    %script{type: 'text/javascript', src:"#{base_url}/js/bootstrap.min.js"}
+    %script{type: 'text/javascript', src:"#{base_url}/js/bootstrap.bundle.min.js"}
   != yield
diff --git a/lib/pact_broker/ui/views/matrix/show.haml b/lib/pact_broker/ui/views/matrix/show.haml
@@ -6,7 +6,7 @@
   %script{type: 'text/javascript', src: "#{base_url}/javascripts/jquery.tablesorter.min.js"}
   %script{type: 'text/javascript', src: "#{base_url}/javascripts/matrix.js"}
   %script{type: 'text/javascript', src: "#{base_url}/javascripts/clipboard.js"}
-  %script{type: 'text/javascript', src: "#{base_url}/js/bootstrap.min.js"}
+  %script{type: 'text/javascript', src: "#{base_url}/js/bootstrap.bundle.min.js"}
 
   .container
     .navbar-right
@@ -25,13 +25,14 @@
     %form{action: "#{base_url}/matrix", onsubmit:'return onSubmit()'}
       - selectors.each_with_index do | selector, index |
         .selector
-          %label{for: "pacticipant#{index}"}
-            Pacticipant name
-          %input{name: 'q[]pacticipant', id: "pacticipant1#{index}", class: 'pacticipant_name', value: selector.pacticipant_name}
+          .field
+            %label{for: "pacticipant#{index}"}
+              Pacticipant name
 
-          .input-group
+            %input{name: 'q[]pacticipant', id: "pacticipant1#{index}", class: 'pacticipant_name', value: selector.pacticipant_name}
+
+          .field
 
-          .input-group
             %select{ name: "ignorethis#{index}", class: 'version-selectorizor' }
               %option{ value: 'specify-all-versions', selected: selector.specify_all_versions }
                 All versions
@@ -59,20 +60,18 @@
           %input{name: 'latest', value: options.latest.to_s, hidden: true}
 
 
-      %div.top-of-group
-        .input-group
-          %input{type: 'radio', name: "latestby", class: '', value: '', id: 'all_rows', checked: options.all_rows_checked}
-          %label{for: 'all_rows'}
-            Show all results
-      %div
-        .input-group
-          %input{type: 'radio', name: "latestby", class: '', value: 'cvpv', id: 'cvpv', checked: options.cvpv_checked}
-          %label{for: 'cvpv'}
-            Show latest result for each consumer version/provider version
-      %div
+      %div.top-of-group.form-check
+        %input{type: 'radio', name: "latestby", class: 'form-check-input', value: '', id: 'all_rows', checked: options.all_rows_checked}
+        %label{for: 'all_rows', class: "form-check-label"}
+          Show all results
+      %div.form-check
+        %input{type: 'radio', name: "latestby", class: 'form-check-input', value: 'cvpv', id: 'cvpv', checked: options.cvpv_checked}
+        %label{for: 'cvpv', class: "form-check-label"}
+          Show latest result for each consumer version/provider version
+      %div.form-check
         .input-group
-          %input{type: 'radio', name: "latestby", class: '', value: 'cvp', id: 'cvp', checked: options.cvp_checked}
-          %label{for: 'cvp'}
+          %input{type: 'radio', name: "latestby", class: 'form-check-input', value: 'cvp', id: 'cvp', checked: options.cvp_checked}
+          %label{for: 'cvp', class: "form-check-label"}
             Show latest result for each consumer version/provider
       %div.top-of-group
         - limit_text = "Note that the 'Show latest...' options are summaries of the 'Show all results' query, and that the limit applies to the underlying query, rather than the number of rows returned in the summary."
@@ -90,22 +89,22 @@
         %tr
           %th.consumer
             = "Consumer"
-            %span.glyphicon.glyphicon-sort.sort
+            %span.sort-icon.sort
           %th.consumer-version
             = "Consumer Version"
-            %span.glyphicon.glyphicon-sort.sort
+            %span.sort-icon.sort
           %th.pact-published
             = "Pact Published"
-            %span.glyphicon.glyphicon-sort.sort
+            %span.sort-icon.sort
           %th.provider
             = "Provider"
-            %span.glyphicon.glyphicon-sort.sort
+            %span.sort-icon.sort
           %th.provider-version
             = "Provider Version"
-            %span.glyphicon.glyphicon-sort.sort
+            %span.sort-icon.sort
           %th.verification-result
             Pact verified
-            %span.glyphicon.glyphicon-sort.sort
+            %span.sort-icon.sort
       %tbody
       - lines.each do | line |
         %tr
@@ -118,16 +117,16 @@
                 = line.display_consumer_version_number
               - if line.display_consumer_version_number
                 %button.clippy.invisible{ title: "Copy to clipboard" }
-                  %span.glyphicon.glyphicon-copy
+                  %span.copy-icon
             - line.latest_consumer_version_tags.each do | tag |
               .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 %a{href: tag.url}
-                  .tag.label.label-primary
+                  .tag.badge.badge-primary
                     = tag.name
             - line.other_consumer_version_tags.each do | tag |
               .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 %a{href: tag.url}
-                  .tag.label.label-default
+                  .tag.badge.badge-secondary
                     = tag.name
           %td.pact-published{'data-sort-value' => line.pact_published_order, "data-toggle": "tooltip", "title": line.pact_version_sha_message, "data-placement": "right", "data-pact-version-sha": line.pact_version_sha}
             %a{href: line.pact_publication_date_url}
@@ -145,16 +144,16 @@
                 = line.display_provider_version_number
               - if line.display_provider_version_number
                 %button.clippy.invisible{ title: "Copy to clipboard" }
-                  %span.glyphicon.glyphicon-copy
+                  %span.copy-icon
             - line.latest_provider_version_tags.each do | tag |
               .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 %a{href: tag.url}
-                  .tag.label.label-primary
+                  .tag.badge.badge-primary
                     = tag.name
             - line.other_provider_version_tags.each do | tag |
               .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 %a{href: tag.url}
-                  .tag.label.label-default
+                  .tag.badge.badge-secondary
                     = tag.name
           %td.verification-result{class: line.verification_status_class, "title": line.pre_verified_message, "data-toggle": "tooltip", "data-placement": "left"}
             %a{href: line.verification_status_url}
@@ -163,4 +162,4 @@
               - else
                 = line.verification_status
             - if line.pre_verified_message
-              %span.glyphicon.glyphicon-time.pre-verified-icon{"aria-hidden": true}
+              %span.pre-verified-icon{"aria-hidden": true}