Fixed broken ui link

Fixed the broken help text
link for manual variables.

Changelog: fixed

app/assets/javascripts/jobs/components/empty_state.vue

@@ -35,11 +35,6 @@ export default {
       required: false,
       default: false,
     },
-    variablesSettingsUrl: {
-      type: String,
-      required: false,
-      default: null,
-    },
     action: {
       type: Object,
       required: false,
@@ -75,11 +70,7 @@ export default {
 
         <p v-if="content" data-testid="job-empty-state-content">{{ content }}</p>
       </div>
-      <manual-variables-form
-        v-if="shouldRenderManualVariables"
-        :action="action"
-        :variables-settings-url="variablesSettingsUrl"
-      />
+      <manual-variables-form v-if="shouldRenderManualVariables" :action="action" />
       <div class="text-content">
         <div v-if="action && !shouldRenderManualVariables" class="text-center">
           <gl-link

app/assets/javascripts/jobs/components/job_app.vue

@@ -50,11 +50,6 @@ export default {
       required: false,
       default: null,
     },
-    variablesSettingsUrl: {
-      type: String,
-      required: false,
-      default: null,
-    },
     deploymentHelpUrl: {
       type: String,
       required: false,
@@ -315,7 +310,6 @@ export default {
           :action="emptyStateAction"
           :playable="job.playable"
           :scheduled="job.scheduled"
-          :variables-settings-url="variablesSettingsUrl"
         />
         <!-- EO empty state -->
 

app/assets/javascripts/jobs/components/manual_variables_form.vue

 <script>
-/* eslint-disable vue/no-v-html */
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlLink, GlSprintf } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import { mapActions } from 'vuex';
-import { s__, sprintf } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { s__ } from '~/locale';
 
 export default {
   name: 'ManualVariablesForm',
   components: {
     GlButton,
+    GlLink,
+    GlSprintf,
   },
   props: {
     action: {
@@ -24,11 +26,6 @@ export default {
         );
       },
     },
-    variablesSettingsUrl: {
-      type: String,
-      required: true,
-      default: '',
-    },
   },
   inputTypes: {
     key: 'key',
@@ -37,6 +34,9 @@ export default {
   i18n: {
     keyPlaceholder: s__('CiVariables|Input variable key'),
     valuePlaceholder: s__('CiVariables|Input variable value'),
+    formHelpText: s__(
+      'CiVariables|Specify variable values to be used in this run. The values specified in %{linkStart}CI/CD settings%{linkEnd} will be used as default',
+    ),
   },
   data() {
     return {
@@ -47,17 +47,8 @@ export default {
     };
   },
   computed: {
-    helpText() {
-      return sprintf(
-        s__(
-          'CiVariables|Specify variable values to be used in this run. The values specified in %{linkStart}CI/CD settings%{linkEnd} will be used as default',
-        ),
-        {
-          linkStart: `<a href="${this.variablesSettingsUrl}">`,
-          linkEnd: '</a>',
-        },
-        false,
-      );
+    variableSettings() {
+      return helpPagePath('ci/variables/index', { anchor: 'add-a-cicd-variable-to-a-project' });
     },
   },
   watch: {
@@ -188,8 +179,14 @@ export default {
         </div>
       </div>
     </div>
-    <div class="d-flex gl-mt-3 justify-content-center">
-      <p class="text-muted" data-testid="form-help-text" v-html="helpText"></p>
+    <div class="gl-text-center gl-mt-3">
+      <gl-sprintf :message="$options.i18n.formHelpText">
+        <template #link="{ content }">
+          <gl-link :href="variableSettings" target="_blank">
+            {{ content }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
     </div>
     <div class="d-flex justify-content-center">
       <gl-button

app/assets/javascripts/jobs/index.js

@@ -15,7 +15,6 @@ export default () => {
     deploymentHelpUrl,
     codeQualityHelpUrl,
     runnerSettingsUrl,
-    variablesSettingsUrl,
     subscriptionsMoreMinutesUrl,
     endpoint,
     pagePath,
@@ -41,7 +40,6 @@ export default () => {
           deploymentHelpUrl,
           codeQualityHelpUrl,
           runnerSettingsUrl,
-          variablesSettingsUrl,
           subscriptionsMoreMinutesUrl,
           endpoint,
           pagePath,

app/helpers/ci/jobs_helper.rb

@@ -9,7 +9,6 @@ module Ci
         "artifact_help_url" => help_page_path('user/gitlab_com/index.html', anchor: 'gitlab-cicd'),
         "deployment_help_url" => help_page_path('user/project/clusters/index.html', anchor: 'troubleshooting'),
         "runner_settings_url" => project_runners_path(@build.project, anchor: 'js-runners-settings'),
-        "variables_settings_url" => project_variables_path(@build.project, anchor: 'js-cicd-variables-settings'),
         "page_path" => project_job_path(@project, @build),
         "build_status" => @build.status,
         "build_stage" => @build.stage,

spec/frontend/jobs/components/empty_state_spec.js

@@ -9,7 +9,6 @@ describe('Empty State', () => {
     illustrationSizeClass: 'svg-430',
     title: 'This job has not started yet',
     playable: false,
-    variablesSettingsUrl: '',
   };
 
   const createWrapper = (props) => {

spec/frontend/jobs/components/job_app_spec.js

@@ -37,7 +37,6 @@ describe('Job App', () => {
     deploymentHelpUrl: 'help/deployment',
     codeQualityHelpPath: '/help/code_quality',
     runnerSettingsUrl: 'settings/ci-cd/runners',
-    variablesSettingsUrl: 'settings/ci-cd/variables',
     terminalPath: 'jobs/123/terminal',
     projectPath: 'user-name/project-name',
     subscriptionsMoreMinutesUrl: 'https://customers.gitlab.com/buy_pipeline_minutes',

spec/frontend/jobs/components/manual_variables_form_spec.js

+import { GlSprintf, GlLink } from '@gitlab/ui';
 import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
@@ -18,7 +19,6 @@ describe('Manual Variables Form', () => {
       method: 'post',
       button_title: 'Trigger this manual action',
     },
-    variablesSettingsUrl: '/settings',
   };
 
   const createComponent = ({ props = {}, mountFn = shallowMount } = {}) => {
@@ -33,15 +33,19 @@ describe('Manual Variables Form', () => {
         propsData: { ...requiredProps, ...props },
         localVue,
         store,
+        stubs: {
+          GlSprintf,
+        },
       }),
     );
   };
 
   const findInputKey = () => wrapper.findComponent({ ref: 'inputKey' });
   const findInputValue = () => wrapper.findComponent({ ref: 'inputSecretValue' });
+  const findHelpText = () => wrapper.findComponent(GlSprintf);
+  const findHelpLink = () => wrapper.findComponent(GlLink);
 
   const findTriggerBtn = () => wrapper.findByTestId('trigger-manual-job-btn');
-  const findHelpText = () => wrapper.findByTestId('form-help-text');
   const findDeleteVarBtn = () => wrapper.findByTestId('delete-variable-btn');
   const findCiVariableKey = () => wrapper.findByTestId('ci-variable-key');
   const findCiVariableValue = () => wrapper.findByTestId('ci-variable-value');
@@ -62,11 +66,10 @@ describe('Manual Variables Form', () => {
     });
 
     it('renders help text with provided link', () => {
-      expect(findHelpText().text()).toBe(
-        'Specify variable values to be used in this run. The values specified in CI/CD settings will be used as default',
+      expect(findHelpText().exists()).toBe(true);
+      expect(findHelpLink().attributes('href')).toBe(
+        '/help/ci/variables/index#add-a-cicd-variable-to-a-project',
       );
-
-      expect(wrapper.find('a').attributes('href')).toBe(requiredProps.variablesSettingsUrl);
     });
 
     describe('when adding a new variable', () => {