Merge branch '341359-dast-view-scans-create-scan-link' into 'master'

Add on-demands scans index page header

See merge request gitlab-org/gitlab!72180

ee/app/assets/javascripts/on_demand_scans/components/empty_state.vue

 <script>
 import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { HELP_PAGE_PATH } from '../constants';
 
 export default {
+  HELP_PAGE_PATH,
   components: {
     GlEmptyState,
     GlSprintf,
     GlLink,
   },
-  inject: ['newDastScanPath', 'helpPagePath', 'emptyStateSvgPath'],
+  inject: ['newDastScanPath', 'emptyStateSvgPath'],
   props: {
     title: {
       type: String,
@@ -19,7 +21,7 @@ export default {
       type: String,
       required: false,
       default: s__(
-        'OnDemandScans|On-demand scans run outside of DevOps cycle and find vulnerabilities in your projects. %{learnMoreLinkStart}Lean more%{learnMoreLinkEnd}.',
+        'OnDemandScans|On-demand scans run outside of DevOps cycle and find vulnerabilities in your projects. %{learnMoreLinkStart}Learn more%{learnMoreLinkEnd}.',
       ),
     },
     noPrimaryButton: {
@@ -54,7 +56,7 @@ export default {
     <template #description>
       <gl-sprintf :message="text">
         <template #learnMoreLink="{ content }">
-          <gl-link :href="helpPagePath">{{ content }}</gl-link>
+          <gl-link :href="$options.HELP_PAGE_PATH">{{ content }}</gl-link>
         </template>
       </gl-sprintf>
     </template>

ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans.vue

 <script>
-import { GlTabs } from '@gitlab/ui';
+import { GlButton, GlLink, GlSprintf, GlTabs } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import ConfigurationPageLayout from 'ee/security_configuration/components/configuration_page_layout.vue';
+import { HELP_PAGE_PATH } from '../constants';
 import AllTab from './tabs/all.vue';
 import RunningTab from './tabs/running.vue';
 import FinishedTab from './tabs/finished.vue';
@@ -23,14 +26,20 @@ const TABS = {
 
 export default {
   TABS,
+  HELP_PAGE_PATH,
   components: {
+    GlButton,
+    GlLink,
+    GlSprintf,
     GlTabs,
+    ConfigurationPageLayout,
     AllTab,
     RunningTab,
     FinishedTab,
     ScheduledTab,
     EmptyState,
   },
+  inject: ['newDastScanPath'],
   data() {
     return {
       activeTabIndex: 0,
@@ -57,12 +66,43 @@ export default {
       this.activeTabIndex = tabIndex;
     }
   },
+  i18n: {
+    title: s__('OnDemandScans|On-demand scans'),
+    newScanButtonLabel: s__('OnDemandScans|New DAST scan'),
+    description: s__(
+      'OnDemandScans|On-demand scans run outside of DevOps cycle and find vulnerabilities in your projects. %{learnMoreLinkStart}Learn more%{learnMoreLinkEnd}.',
+    ),
+  },
 };
 </script>
 
 <template>
-  <gl-tabs v-if="hasData" v-model="activeTab">
-    <component :is="tab.component" v-for="(tab, key) in $options.TABS" :key="key" :item-count="0" />
-  </gl-tabs>
+  <configuration-page-layout v-if="hasData">
+    <template #heading>
+      {{ $options.i18n.title }}
+    </template>
+    <template #actions>
+      <gl-button variant="confirm" :href="newDastScanPath" data-testid="new-scan-link">
+        {{ $options.i18n.newScanButtonLabel }}
+      </gl-button>
+    </template>
+    <template #description>
+      <gl-sprintf :message="$options.i18n.description">
+        <template #learnMoreLink="{ content }">
+          <gl-link :href="$options.HELP_PAGE_PATH" data-testid="help-page-link">{{
+            content
+          }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </template>
+    <gl-tabs v-model="activeTab">
+      <component
+        :is="tab.component"
+        v-for="(tab, key) in $options.TABS"
+        :key="key"
+        :item-count="0"
+      />
+    </gl-tabs>
+  </configuration-page-layout>
   <empty-state v-else />
 </template>

ee/app/assets/javascripts/on_demand_scans/constants.js

+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export const HELP_PAGE_PATH = helpPagePath('user/application_security/dast/index', {
+  anchor: 'on-demand-scans',
+});

ee/app/assets/javascripts/on_demand_scans/on_demand_scans_bundle.js

@@ -8,14 +8,13 @@ export default () => {
     return null;
   }
 
-  const { newDastScanPath, helpPagePath, emptyStateSvgPath } = el.dataset;
+  const { newDastScanPath, emptyStateSvgPath } = el.dataset;
 
   return new Vue({
     el,
     router: createRouter(),
     provide: {
       newDastScanPath,
-      helpPagePath,
       emptyStateSvgPath,
     },
     render(h) {

ee/app/assets/javascripts/on_demand_scans_form/components/on_demand_scans_form.vue

@@ -37,6 +37,7 @@ import {
   SCANNER_PROFILES_QUERY,
   SITE_PROFILES_QUERY,
 } from '../settings';
+import { HELP_PAGE_PATH } from '../../on_demand_scans/constants';
 import ProfileConflictAlert from './profile_selector/profile_conflict_alert.vue';
 import ScannerProfileSelector from './profile_selector/scanner_profile_selector.vue';
 import SiteProfileSelector from './profile_selector/site_profile_selector.vue';
@@ -68,6 +69,7 @@ export default {
   enabledRefTypes: [REF_TYPE_BRANCHES],
   saveAndRunScanBtnId: 'scan-submit-button',
   saveScanBtnId: 'scan-save-button',
+  helpPagePath: HELP_PAGE_PATH,
   components: {
     RefSelector,
     ProfileConflictAlert,
@@ -104,7 +106,7 @@ export default {
       SITE_PROFILES_QUERY,
     ),
   },
-  inject: ['projectPath', 'helpPagePath', 'profilesLibraryPath'],
+  inject: ['projectPath', 'profilesLibraryPath'],
   props: {
     defaultBranch: {
       type: String,
@@ -346,7 +348,7 @@ export default {
           "
         >
           <template #learnMoreLink="{ content }">
-            <gl-link :href="helpPagePath">
+            <gl-link :href="$options.helpPagePath" data-testid="help-page-link">
               {{ content }}
             </gl-link>
           </template>

ee/app/assets/javascripts/on_demand_scans_form/index.js

@@ -16,7 +16,6 @@ export default () => {
     siteProfilesLibraryPath,
     newSiteProfilePath,
     newScannerProfilePath,
-    helpPagePath,
   } = el.dataset;
   const dastScan = el.dataset.dastScan ? JSON.parse(el.dataset.dastScan) : null;
   const timezones = JSON.parse(el.dataset.timezones);
@@ -26,7 +25,6 @@ export default () => {
     apolloProvider,
     provide: {
       projectPath,
-      helpPagePath,
       profilesLibraryPath,
       scannerProfilesLibraryPath,
       siteProfilesLibraryPath,

ee/app/assets/javascripts/security_configuration/components/configuration_page_layout.vue

 <template>
   <article>
     <slot name="alert"></slot>
-    <header class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
-      <h4>
-        <slot name="heading"></slot>
-      </h4>
-      <p>
-        <slot name="description"></slot>
-      </p>
+    <header
+      class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-display-flex gl-justify-content-space-between"
+    >
+      <div>
+        <h4 class="gl-mt-0">
+          <slot name="heading"></slot>
+        </h4>
+        <p>
+          <slot name="description"></slot>
+        </p>
+      </div>
+      <div>
+        <slot name="actions"></slot>
+      </div>
     </header>
     <slot></slot>
   </article>

ee/app/helpers/projects/on_demand_scans_helper.rb

@@ -2,14 +2,14 @@
 
 module Projects::OnDemandScansHelper
   def on_demand_scans_data(project)
-    base_data.merge({
+    {
       'new-dast-scan-path' => new_project_on_demand_scan_path(project),
       'empty-state-svg-path' => image_path('illustrations/empty-state/ondemand-scan-empty.svg')
-    })
+    }
   end
 
   def on_demand_scans_form_data(project)
-    base_data.merge({
+    {
       'default-branch' => project.default_branch,
       'project-path' => project.path_with_namespace,
       'profiles-library-path' => project_security_configuration_dast_scans_path(project),
@@ -18,14 +18,6 @@ module Projects::OnDemandScansHelper
       'new-scanner-profile-path' => new_project_security_configuration_dast_scans_dast_scanner_profile_path(project),
       'new-site-profile-path' => new_project_security_configuration_dast_scans_dast_site_profile_path(project),
       'timezones' => timezone_data(format: :full).to_json
-    })
-  end
-
-  private
-
-  def base_data
-    {
-      'help-page-path' => help_page_path('user/application_security/dast/index', anchor: 'on-demand-scans')
     }
   end
 end

ee/spec/frontend/on_demand_scans/components/__snapshots__/empty_state_spec.js.snap

@@ -35,9 +35,9 @@ exports[`EmptyState renders properly 1`] = `
         On-demand scans run outside of DevOps cycle and find vulnerabilities in your projects. 
         <a
           class="gl-link"
-          href="/help/page/path"
+          href="/help/user/application_security/dast/index#on-demand-scans"
         >
-          Lean more
+          Learn more
         </a>
         .
       </p>

ee/spec/frontend/on_demand_scans/components/empty_state_spec.js

@@ -15,7 +15,6 @@ describe('EmptyState', () => {
     wrapper = mount(EmptyState, {
       provide: {
         newDastScanPath: '/on_demand_scans/new',
-        helpPagePath: '/help/page/path',
         emptyStateSvgPath: '/empty/state/svg/path',
       },
       propsData,

ee/spec/frontend/on_demand_scans/components/on_demand_scans_spec.js

-import { shallowMount } from '@vue/test-utils';
-import { GlTabs } from '@gitlab/ui';
+import { GlTabs, GlSprintf } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import OnDemandScans from 'ee/on_demand_scans/components/on_demand_scans.vue';
+import ConfigurationPageLayout from 'ee/security_configuration/components/configuration_page_layout.vue';
 import { createRouter } from 'ee/on_demand_scans/router';
 import AllTab from 'ee/on_demand_scans/components/tabs/all.vue';
 import RunningTab from 'ee/on_demand_scans/components/tabs/running.vue';
@@ -12,7 +13,12 @@ describe('OnDemandScans', () => {
   let wrapper;
   let router;
 
+  // Props
+  const newDastScanPath = '/on_demand_scans/new';
+
   // Finders
+  const findNewScanLink = () => wrapper.findByTestId('new-scan-link');
+  const findHelpPageLink = () => wrapper.findByTestId('help-page-link');
   const findTabs = () => wrapper.findComponent(GlTabs);
   const findAllTab = () => wrapper.findComponent(AllTab);
   const findRunningTab = () => wrapper.findComponent(RunningTab);
@@ -21,8 +27,15 @@ describe('OnDemandScans', () => {
   const findEmptyState = () => wrapper.findComponent(EmptyState);
 
   const createComponent = () => {
-    wrapper = shallowMount(OnDemandScans, {
+    wrapper = shallowMountExtended(OnDemandScans, {
       router,
+      provide: {
+        newDastScanPath,
+      },
+      stubs: {
+        ConfigurationPageLayout,
+        GlSprintf,
+      },
     });
   };
 
@@ -46,6 +59,22 @@ describe('OnDemandScans', () => {
       wrapper.setData({ hasData: true });
     });
 
+    it('renders a link to the docs', () => {
+      const link = findHelpPageLink();
+
+      expect(link.exists()).toBe(true);
+      expect(link.attributes('href')).toBe(
+        '/help/user/application_security/dast/index#on-demand-scans',
+      );
+    });
+
+    it('renders a link to create a new scan', () => {
+      const link = findNewScanLink();
+
+      expect(link.exists()).toBe(true);
+      expect(link.attributes('href')).toBe(newDastScanPath);
+    });
+
     it('renders the tabs if there is data', async () => {
       expect(findAllTab().exists()).toBe(true);
       expect(findRunningTab().exists()).toBe(true);

ee/spec/frontend/on_demand_scans_form/components/on_demand_scans_form_spec.js

@@ -21,7 +21,6 @@ import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import * as responses from '../mocks/apollo_mocks';
 import { scannerProfiles, siteProfiles } from '../mocks/mock_data';
 
-const helpPagePath = '/application_security/dast/index#on-demand-scans';
 const dastSiteValidationDocsPath = '/application_security/dast/index#dast-site-validation';
 const projectPath = 'group/project';
 const defaultBranch = 'main';
@@ -68,6 +67,7 @@ describe('OnDemandScansForm', () => {
 
   const findForm = () => wrapper.find(GlForm);
   const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
+  const findHelpPageLink = () => findByTestId('help-page-link');
   const findNameInput = () => findByTestId('dast-scan-name-input');
   const findBranchInput = () => findByTestId('dast-scan-branch-input');
   const findDescriptionInput = () => findByTestId('dast-scan-description-input');
@@ -156,7 +156,6 @@ describe('OnDemandScansForm', () => {
           mocks: defaultMocks,
           provide: {
             projectPath,
-            helpPagePath,
             profilesLibraryPath,
             scannerProfilesLibraryPath,
             siteProfilesLibraryPath,
@@ -210,6 +209,16 @@ describe('OnDemandScansForm', () => {
       expect(wrapper.findComponent(ScanSchedule).exists()).toBe(true);
     });
 
+    it('renders a link to the docs', () => {
+      createComponent();
+      const link = findHelpPageLink();
+
+      expect(link.exists()).toBe(true);
+      expect(link.attributes('href')).toBe(
+        '/help/user/application_security/dast/index#on-demand-scans',
+      );
+    });
+
     it('populates the branch input with the default branch', () => {
       createComponent();
 

ee/spec/frontend/security_configuration/components/__snapshots__/configuration_page_layout_spec.js.snap

@@ -4,15 +4,23 @@ exports[`Security Configuration Page Layout component matches the snapshot 1`] =
 <article>
   Page alert 
   <header
-    class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid"
+    class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-display-flex gl-justify-content-space-between"
   >
-    <h4>
-      Page title
-    </h4>
+    <div>
+      <h4
+        class="gl-mt-0"
+      >
+        Page title
+      </h4>
+       
+      <p>
+        Scanner description
+      </p>
+    </div>
      
-    <p>
-      Scanner description
-    </p>
+    <div>
+      Action
+    </div>
   </header>
    
   <div>

ee/spec/frontend/security_configuration/components/configuration_page_layout_spec.js

@@ -9,6 +9,7 @@ describe('Security Configuration Page Layout component', () => {
       slots: {
         alert: 'Page alert',
         heading: 'Page title',
+        actions: 'Action',
         description: 'Scanner description',
         default: '<div>form</div>',
       },

ee/spec/helpers/projects/on_demand_scans_helper_spec.rb

@@ -9,7 +9,6 @@ RSpec.describe Projects::OnDemandScansHelper do
     it 'returns proper data' do
       expect(helper.on_demand_scans_data(project)).to match(
         'new-dast-scan-path' => "/#{project.full_path}/-/on_demand_scans/new",
-        'help-page-path' => "/help/user/application_security/dast/index#on-demand-scans",
         'empty-state-svg-path' => match_asset_path('/assets/illustrations/empty-state/ondemand-scan-empty.svg')
       )
     end
@@ -26,7 +25,6 @@ RSpec.describe Projects::OnDemandScansHelper do
 
     it 'returns proper data' do
       expect(helper.on_demand_scans_form_data(project)).to match(
-        'help-page-path' => "/help/user/application_security/dast/index#on-demand-scans",
         'default-branch' => "default-branch",
         'project-path' => "foo/bar",
         'profiles-library-path' => "/#{project.full_path}/-/security/configuration/dast_scans",

ee/spec/views/projects/on_demand_scans/index.html.haml_spec.rb

@@ -11,8 +11,4 @@ RSpec.describe "projects/on_demand_scans/index", type: :view do
   it 'renders Vue app root' do
     expect(rendered).to have_selector('#js-on-demand-scans')
   end
-
-  it 'passes on-demand scans docs page URL' do
-    expect(rendered).to include '/help/user/application_security/dast/index#on-demand-scans'
-  end
 end

locale/gitlab.pot

@@ -23802,7 +23802,7 @@ msgstr ""
 msgid "OnDemandScans|On-demand scans"
 msgstr ""
 
-msgid "OnDemandScans|On-demand scans run outside of DevOps cycle and find vulnerabilities in your projects. %{learnMoreLinkStart}Lean more%{learnMoreLinkEnd}."
+msgid "OnDemandScans|On-demand scans run outside of DevOps cycle and find vulnerabilities in your projects. %{learnMoreLinkStart}Learn more%{learnMoreLinkEnd}."
 msgstr ""
 
 msgid "OnDemandScans|On-demand scans run outside the DevOps cycle and find vulnerabilities in your projects. %{learnMoreLinkStart}Learn more%{learnMoreLinkEnd}"