diff options
Diffstat (limited to 'app/assets/javascripts/jobs/components')
6 files changed, 52 insertions, 45 deletions
diff --git a/app/assets/javascripts/jobs/components/empty_state.vue b/app/assets/javascripts/jobs/components/empty_state.vue index 35b16d73cc7..e31c13f40b0 100644 --- a/app/assets/javascripts/jobs/components/empty_state.vue +++ b/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 diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue index be95001a396..fa9ee56c049 100644 --- a/app/assets/javascripts/jobs/components/job_app.vue +++ b/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 --> diff --git a/app/assets/javascripts/jobs/components/log/collapsible_section.vue b/app/assets/javascripts/jobs/components/log/collapsible_section.vue index 55cdfb691f4..c0d5fac0e8d 100644 --- a/app/assets/javascripts/jobs/components/log/collapsible_section.vue +++ b/app/assets/javascripts/jobs/components/log/collapsible_section.vue @@ -1,4 +1,6 @@ <script> +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { INFINITELY_NESTED_COLLAPSIBLE_SECTIONS_FF } from '../../constants'; import LogLine from './line.vue'; import LogLineHeader from './line_header.vue'; @@ -7,7 +9,9 @@ export default { components: { LogLine, LogLineHeader, + CollapsibleLogSection: () => import('./collapsible_section.vue'), }, + mixins: [glFeatureFlagsMixin()], props: { section: { type: Object, @@ -22,6 +26,9 @@ export default { badgeDuration() { return this.section.line && this.section.line.section_duration; }, + infinitelyCollapsibleSectionsFlag() { + return this.glFeatures?.[INFINITELY_NESTED_COLLAPSIBLE_SECTIONS_FF]; + }, }, methods: { handleOnClickCollapsibleLine(section) { @@ -40,12 +47,26 @@ export default { @toggleLine="handleOnClickCollapsibleLine(section)" /> <template v-if="!section.isClosed"> - <log-line - v-for="line in section.lines" - :key="line.offset" - :line="line" - :path="traceEndpoint" - /> + <template v-if="infinitelyCollapsibleSectionsFlag"> + <template v-for="line in section.lines"> + <collapsible-log-section + v-if="line.isHeader" + :key="line.line.offset" + :section="line" + :trace-endpoint="traceEndpoint" + @onClickCollapsibleLine="handleOnClickCollapsibleLine" + /> + <log-line v-else :key="line.offset" :line="line" :path="traceEndpoint" /> + </template> + </template> + <template v-else> + <log-line + v-for="line in section.lines" + :key="line.offset" + :line="line" + :path="traceEndpoint" + /> + </template> </template> </div> </template> diff --git a/app/assets/javascripts/jobs/components/log/line_number.vue b/app/assets/javascripts/jobs/components/log/line_number.vue index 7ca9154d2fe..c8ceac2c7ff 100644 --- a/app/assets/javascripts/jobs/components/log/line_number.vue +++ b/app/assets/javascripts/jobs/components/log/line_number.vue @@ -1,4 +1,6 @@ <script> +import { INFINITELY_NESTED_COLLAPSIBLE_SECTIONS_FF } from '../../constants'; + export default { functional: true, props: { @@ -14,7 +16,9 @@ export default { render(h, { props }) { const { lineNumber, path } = props; - const parsedLineNumber = lineNumber + 1; + const parsedLineNumber = gon.features?.[INFINITELY_NESTED_COLLAPSIBLE_SECTIONS_FF] + ? lineNumber + : lineNumber + 1; const lineId = `L${parsedLineNumber}`; const lineHref = `${path}#${lineId}`; diff --git a/app/assets/javascripts/jobs/components/manual_variables_form.vue b/app/assets/javascripts/jobs/components/manual_variables_form.vue index d45012d2023..269551ff9aa 100644 --- a/app/assets/javascripts/jobs/components/manual_variables_form.vue +++ b/app/assets/javascripts/jobs/components/manual_variables_form.vue @@ -1,14 +1,16 @@ <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 diff --git a/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue b/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue index 98badb96ed7..a6eff743ce9 100644 --- a/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue +++ b/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue @@ -46,7 +46,7 @@ export default { return timeIntervalInWords(this.job.queued); }, runnerHelpUrl() { - return helpPagePath('ci/runners/README.html', { + return helpPagePath('ci/runners/index.html', { anchor: 'set-maximum-job-timeout-for-a-runner', }); }, |