Generate help page path client-side

Leverage the helpPagePath frontend helper to generate the docs link
client-side.

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

 import Vue from 'vue';
 import { createRouter } from './router';
 import OnDemandScans from './components/on_demand_scans.vue';
+import { HELP_PAGE_PATH } from './constants';
 
 export default () => {
   const el = document.querySelector('#js-on-demand-scans');
@@ -8,14 +9,14 @@ export default () => {
     return null;
   }
 
-  const { newDastScanPath, helpPagePath, emptyStateSvgPath } = el.dataset;
+  const { newDastScanPath, emptyStateSvgPath } = el.dataset;
 
   return new Vue({
     el,
     router: createRouter(),
     provide: {
       newDastScanPath,
-      helpPagePath,
+      helpPagePath: HELP_PAGE_PATH,
       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/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_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/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