Break out the Secure report into a page object component

Additionally change page objects to use this new component.

ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table.vue

@@ -43,7 +43,7 @@ export default {
 </script>
 
 <template>
-  <div class="ci-table js-security-dashboard-table">
+  <div class="ci-table js-security-dashboard-table" data-qa-selector="security_report_content">
     <div
       class="gl-responsive-table-row table-row-header vulnerabilities-row-header px-2"
       role="row"

qa/qa/ee.rb

@@ -15,6 +15,7 @@ module QA
       module Component
         autoload :DesignManagement, 'qa/ee/page/component/design_management'
         autoload :LicenseManagement, 'qa/ee/page/component/license_management'
+        autoload :SecureReport, 'qa/ee/page/component/secure_report'
 
         module IssueBoard
           autoload :Show, 'qa/ee/page/component/issue_board/show'

qa/qa/ee/page/component/secure_report.rb

+# frozen_string_literal: true
+
+module QA
+  module EE
+    module Page
+      module Component
+        module SecureReport
+          def self.prepended(page)
+            page.module_eval do
+              view 'ee/app/assets/javascripts/security_dashboard/components/filter.vue' do
+                element :filter_dropdown, ':data-qa-selector="qaSelector"' # rubocop:disable QA/ElementWithPattern
+                element :filter_dropdown_content
+              end
+
+              view 'ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table_row.vue' do
+                element :vulnerability_info_content
+              end
+            end
+          end
+
+          def filter_report_type(report)
+            click_element(:filter_report_type_dropdown)
+            within_element(:filter_dropdown_content) do
+              click_on report
+            end
+
+            # Click the dropdown to close the modal and ensure it isn't open if this function is called again
+            click_element(:filter_report_type_dropdown)
+          end
+
+          def has_vulnerability?(name)
+            has_element?(:vulnerability_info_content, text: name)
+          end
+        end
+      end
+    end
+  end
+end

qa/qa/ee/page/group/secure/show.rb

@@ -5,13 +5,10 @@ module QA
     module Page
       module Group::Secure
         class Show < QA::Page::Base
-          view 'ee/app/assets/javascripts/security_dashboard/components/filter.vue' do
-            element :filter_dropdown, ':data-qa-selector="qaSelector"' # rubocop:disable QA/ElementWithPattern
-            element :filter_dropdown_content
-          end
+          include Page::Component::SecureReport
 
-          view 'ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table_row.vue' do
-            element :vulnerability_info_content
+          view 'ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table.vue' do
+            element :security_report_content, required: true
           end
 
           def filter_project(project)
@@ -20,19 +17,6 @@ module QA
               click_on project
             end
           end
-
-          def filter_report_type(report)
-            click_element(:filter_report_type_dropdown)
-            within_element(:filter_dropdown_content) do
-              click_on report
-            end
-            # Click the dropdown to close the modal and ensure it isn't open if this function is called again
-            click_element(:filter_report_type_dropdown)
-          end
-
-          def has_vulnerability?(name)
-            has_element?(:vulnerability_info_content, text: name)
-          end
         end
       end
     end

qa/qa/ee/page/project/pipeline/show.rb

@@ -5,6 +5,7 @@ module QA::EE
     module Pipeline
       module Show
         include Page::Component::LicenseManagement
+        include Page::Component::SecureReport
 
         def self.prepended(page)
           page.module_eval do
@@ -13,19 +14,6 @@ module QA::EE
               element :licenses_tab
               element :licenses_counter
             end
-
-            view 'ee/app/assets/javascripts/security_dashboard/components/filter.vue' do
-              element :filter_dropdown, ':data-qa-selector="qaSelector"' # rubocop:disable QA/ElementWithPattern
-              element :filter_dropdown_content
-            end
-
-            view 'ee/app/views/projects/pipelines/_tabs_holder.html.haml' do
-              element :security_tab
-            end
-
-            view 'ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table_row.vue' do
-              element :vulnerability_info_content
-            end
           end
         end
 
@@ -33,15 +21,6 @@ module QA::EE
           click_element(:security_tab)
         end
 
-        def filter_report_type(report)
-          click_element(:filter_report_type_dropdown)
-          within_element(:filter_dropdown_content) do
-            click_on report
-          end
-          # Click the dropdown to close the modal and ensure it isn't open if this function is called again
-          click_element(:filter_report_type_dropdown)
-        end
-
         def click_on_licenses
           click_element(:licenses_tab)
         end
@@ -49,10 +28,6 @@ module QA::EE
         def has_license_count_of?(count)
           find_element(:licenses_counter).has_content?(count)
         end
-
-        def has_vulnerability?(name)
-          has_element?(:vulnerability_info_content, text: name)
-        end
       end
     end
   end

qa/qa/ee/page/project/secure/show.rb

@@ -5,26 +5,10 @@ module QA
     module Page
       module Project::Secure
         class Show < QA::Page::Base
-          view 'ee/app/assets/javascripts/security_dashboard/components/filter.vue' do
-            element :filter_dropdown, ':data-qa-selector="qaSelector"' # rubocop:disable QA/ElementWithPattern
-            element :filter_dropdown_content
-          end
-
-          view 'ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table_row.vue' do
-            element :vulnerability_info_content
-          end
-
-          def filter_report_type(report)
-            click_element(:filter_report_type_dropdown)
-            within_element(:filter_dropdown_content) do
-              click_on report
-            end
-            # Click the dropdown to close the modal and ensure it isn't open if this function is called again
-            click_element(:filter_report_type_dropdown)
-          end
+          include Page::Component::SecureReport
 
-          def has_vulnerability?(name)
-            has_element?(:vulnerability_info_content, text: name)
+          view 'ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table.vue' do
+            element :security_report_content, required: true
           end
         end
       end

qa/qa/ee/page/project/settings/merge_request.rb

@@ -6,6 +6,8 @@ module QA
       module Project
         module Settings
           module MergeRequest
+            include Page::Component::SecureReport
+
             def self.prepended(page)
               page.module_eval do
                 view 'ee/app/views/projects/_merge_pipelines_settings.html.haml' do