diff options
Diffstat (limited to 'app/assets/javascripts/pages/projects')
22 files changed, 326 insertions, 220 deletions
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js index cb7198e9789..46e59cd6572 100644 --- a/app/assets/javascripts/pages/projects/blob/show/index.js +++ b/app/assets/javascripts/pages/projects/blob/show/index.js @@ -6,6 +6,33 @@ import GpgBadges from '~/gpg_badges'; import '~/sourcegraph/load'; import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue'; +const createGitlabCiYmlVisualization = (containerId = '#js-blob-toggle-graph-preview') => { + const el = document.querySelector(containerId); + const { filename, blobData } = el?.dataset; + + const nameRegexp = /\.gitlab-ci.yml/; + + if (!el || !nameRegexp.test(filename)) { + return; + } + + // eslint-disable-next-line no-new + new Vue({ + el, + components: { + GitlabCiYamlVisualization: () => + import('~/pipelines/components/pipeline_graph/gitlab_ci_yaml_visualization.vue'), + }, + render(createElement) { + return createElement('gitlabCiYamlVisualization', { + props: { + blobData, + }, + }); + }, + }); +}; + document.addEventListener('DOMContentLoaded', () => { new BlobViewer(); // eslint-disable-line no-new initBlob(); @@ -63,4 +90,8 @@ document.addEventListener('DOMContentLoaded', () => { }); } } + + if (gon?.features?.gitlabCiYmlPreview) { + createGitlabCiYmlVisualization(); + } }); diff --git a/app/assets/javascripts/pages/projects/branches/index/index.js b/app/assets/javascripts/pages/projects/branches/index/index.js index 37e8c75f299..623d0a10606 100644 --- a/app/assets/javascripts/pages/projects/branches/index/index.js +++ b/app/assets/javascripts/pages/projects/branches/index/index.js @@ -1,4 +1,4 @@ -import AjaxLoadingSpinner from '~/ajax_loading_spinner'; +import AjaxLoadingSpinner from '~/branches/ajax_loading_spinner'; import DeleteModal from '~/branches/branches_delete_modal'; import initDiverganceGraph from '~/branches/divergence_graph'; diff --git a/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js b/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js index 9ab73be80a0..d270bee25c7 100644 --- a/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js +++ b/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js @@ -1,19 +1,48 @@ +import createFlash from '~/flash'; +import { BLOB_EDITOR_ERROR } from '~/blob_edit/constants'; + export default class CILintEditor { constructor() { - this.editor = window.ace.edit('ci-editor'); - this.textarea = document.querySelector('#content'); + const monacoEnabled = window?.gon?.features?.monacoCi; this.clearYml = document.querySelector('.clear-yml'); - - this.editor.getSession().setMode('ace/mode/yaml'); - this.editor.on('input', () => { - const content = this.editor.getSession().getValue(); - this.textarea.value = content; - }); - this.clearYml.addEventListener('click', this.clear.bind(this)); + + return monacoEnabled ? this.initEditorLite() : this.initAce(); } clear() { this.editor.setValue(''); } + + initEditorLite() { + import(/* webpackChunkName: 'monaco_editor_lite' */ '~/editor/editor_lite') + .then(({ default: EditorLite }) => { + const editorEl = document.getElementById('editor'); + const fileContentEl = document.getElementById('content'); + const form = document.querySelector('.js-ci-lint-form'); + + const rootEditor = new EditorLite(); + + this.editor = rootEditor.createInstance({ + el: editorEl, + blobPath: '.gitlab-ci.yml', + blobContent: editorEl.innerText, + }); + + form.addEventListener('submit', () => { + fileContentEl.value = this.editor.getValue(); + }); + }) + .catch(() => createFlash({ message: BLOB_EDITOR_ERROR })); + } + + initAce() { + this.editor = window.ace.edit('ci-editor'); + this.textarea = document.getElementById('content'); + + this.editor.getSession().setMode('ace/mode/yaml'); + this.editor.on('input', () => { + this.textarea.value = this.editor.getSession().getValue(); + }); + } } diff --git a/app/assets/javascripts/pages/projects/ci/lints/new/index.js b/app/assets/javascripts/pages/projects/ci/lints/new/index.js index 8e8a843da0b..02bfee9810f 100644 --- a/app/assets/javascripts/pages/projects/ci/lints/new/index.js +++ b/app/assets/javascripts/pages/projects/ci/lints/new/index.js @@ -1,3 +1,11 @@ import CILintEditor from '../ci_lint_editor'; +import initCILint from '~/ci_lint/index'; -document.addEventListener('DOMContentLoaded', () => new CILintEditor()); +document.addEventListener('DOMContentLoaded', () => { + if (gon?.features?.ciLintVue) { + initCILint(); + } else { + // eslint-disable-next-line no-new + new CILintEditor(); + } +}); diff --git a/app/assets/javascripts/pages/projects/clusters/new/index.js b/app/assets/javascripts/pages/projects/clusters/new/index.js new file mode 100644 index 00000000000..876bab0b339 --- /dev/null +++ b/app/assets/javascripts/pages/projects/clusters/new/index.js @@ -0,0 +1,5 @@ +import initNewCluster from '~/clusters/new_cluster'; + +document.addEventListener('DOMContentLoaded', () => { + initNewCluster(); +}); diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js index a245af72d93..d5fb2a8be3c 100644 --- a/app/assets/javascripts/pages/projects/commit/show/index.js +++ b/app/assets/javascripts/pages/projects/commit/show/index.js @@ -14,24 +14,23 @@ import axios from '~/lib/utils/axios_utils'; import syntaxHighlight from '~/syntax_highlight'; import flash from '~/flash'; import { __ } from '~/locale'; +import loadAwardsHandler from '~/awards_handler'; document.addEventListener('DOMContentLoaded', () => { const hasPerfBar = document.querySelector('.with-performance-bar'); const performanceHeight = hasPerfBar ? 35 : 0; + initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight + performanceHeight); + new ZenMode(); + new ShortcutsNavigation(); + new MiniPipelineGraph({ + container: '.js-commit-pipeline-graph', + }).bindEvents(); + initNotes(); + // eslint-disable-next-line no-jquery/no-load + $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath); + fetchCommitMergeRequests(); + const filesContainer = $('.js-diffs-batch'); - const initAfterPageLoad = () => { - new Diff(); - new ZenMode(); - new ShortcutsNavigation(); - new MiniPipelineGraph({ - container: '.js-commit-pipeline-graph', - }).bindEvents(); - initNotes(); - initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight + performanceHeight); - // eslint-disable-next-line no-jquery/no-load - $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath); - fetchCommitMergeRequests(); - }; if (filesContainer.length) { const batchPath = filesContainer.data('diffFilesPath'); @@ -42,12 +41,13 @@ document.addEventListener('DOMContentLoaded', () => { filesContainer.html($(data.html)); syntaxHighlight(filesContainer); handleLocationHash(); - initAfterPageLoad(); + new Diff(); }) .catch(() => { flash(__('An error occurred while retrieving diff files')); }); } else { - initAfterPageLoad(); + new Diff(); } + loadAwardsHandler(); }); diff --git a/app/assets/javascripts/pages/projects/constants.js b/app/assets/javascripts/pages/projects/constants.js index 9efbf7cd36e..8dc765e5d10 100644 --- a/app/assets/javascripts/pages/projects/constants.js +++ b/app/assets/javascripts/pages/projects/constants.js @@ -1,5 +1,3 @@ -/* eslint-disable import/prefer-default-export */ - export const ISSUABLE_INDEX = { MERGE_REQUEST: 'merge_request_', ISSUE: 'issue_', diff --git a/app/assets/javascripts/pages/projects/environments/show/index.js b/app/assets/javascripts/pages/projects/environments/show/index.js index 10e3e28f024..5d3a153cbd1 100644 --- a/app/assets/javascripts/pages/projects/environments/show/index.js +++ b/app/assets/javascripts/pages/projects/environments/show/index.js @@ -1,3 +1,3 @@ import initShowEnvironment from '~/environments/mount_show'; -document.addEventListener('DOMContentLoaded', () => initShowEnvironment()); +document.addEventListener('DOMContentLoaded', initShowEnvironment); diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list_item.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list_item.vue index b4816fa2cb3..57838050d55 100644 --- a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list_item.vue +++ b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list_item.vue @@ -7,6 +7,7 @@ import { GlTooltipDirective, GlTooltip, GlBadge, + GlSafeHtmlDirective as SafeHtml, } from '@gitlab/ui'; import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '~/groups/constants'; import { __ } from '~/locale'; @@ -23,6 +24,7 @@ export default { }, directives: { GlTooltip: GlTooltipDirective, + SafeHtml, }, props: { group: { @@ -119,7 +121,7 @@ export default { </span> </div> <div v-if="group.description" class="description"> - <span v-html="group.markdown_description"> </span> + <span v-safe-html="group.markdown_description"> </span> </div> </div> <div class="gl-display-flex gl-flex-shrink-0"> diff --git a/app/assets/javascripts/pages/projects/graphs/charts/index.js b/app/assets/javascripts/pages/projects/graphs/charts/index.js index 09b440d1413..384216f29eb 100644 --- a/app/assets/javascripts/pages/projects/graphs/charts/index.js +++ b/app/assets/javascripts/pages/projects/graphs/charts/index.js @@ -1,154 +1,155 @@ import Vue from 'vue'; import { GlColumnChart } from '@gitlab/ui/dist/charts'; +import { waitForCSSLoaded } from '../../../../helpers/startup_css_helper'; import { __ } from '~/locale'; import CodeCoverage from '../components/code_coverage.vue'; import SeriesDataMixin from './series_data_mixin'; document.addEventListener('DOMContentLoaded', () => { - const languagesContainer = document.getElementById('js-languages-chart'); - const codeCoverageContainer = document.getElementById('js-code-coverage-chart'); - const monthContainer = document.getElementById('js-month-chart'); - const weekdayContainer = document.getElementById('js-weekday-chart'); - const hourContainer = document.getElementById('js-hour-chart'); + waitForCSSLoaded(() => { + const languagesContainer = document.getElementById('js-languages-chart'); + const codeCoverageContainer = document.getElementById('js-code-coverage-chart'); + const monthContainer = document.getElementById('js-month-chart'); + const weekdayContainer = document.getElementById('js-weekday-chart'); + const hourContainer = document.getElementById('js-hour-chart'); + const LANGUAGE_CHART_HEIGHT = 300; + const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => { + if (firstDayOfWeek === 0) { + return weekDays; + } - const LANGUAGE_CHART_HEIGHT = 300; + return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => { + const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length]; - const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => { - if (firstDayOfWeek === 0) { - return weekDays; - } + return { + ...acc, + [reorderedDayName]: weekDays[reorderedDayName], + }; + }, {}); + }; - return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => { - const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length]; - - return { - ...acc, - [reorderedDayName]: weekDays[reorderedDayName], - }; - }, {}); - }; - - // eslint-disable-next-line no-new - new Vue({ - el: languagesContainer, - components: { - GlColumnChart, - }, - data() { - return { - chartData: JSON.parse(languagesContainer.dataset.chartData), - }; - }, - computed: { - seriesData() { - return { full: this.chartData.map(d => [d.label, d.value]) }; + // eslint-disable-next-line no-new + new Vue({ + el: languagesContainer, + components: { + GlColumnChart, }, - }, - render(h) { - return h(GlColumnChart, { - props: { - data: this.seriesData, - xAxisTitle: __('Used programming language'), - yAxisTitle: __('Percentage'), - xAxisType: 'category', - }, - attrs: { - height: LANGUAGE_CHART_HEIGHT, + data() { + return { + chartData: JSON.parse(languagesContainer.dataset.chartData), + }; + }, + computed: { + seriesData() { + return { full: this.chartData.map(d => [d.label, d.value]) }; }, - }); - }, - }); + }, + render(h) { + return h(GlColumnChart, { + props: { + data: this.seriesData, + xAxisTitle: __('Used programming language'), + yAxisTitle: __('Percentage'), + xAxisType: 'category', + }, + attrs: { + height: LANGUAGE_CHART_HEIGHT, + }, + }); + }, + }); - // eslint-disable-next-line no-new - new Vue({ - el: codeCoverageContainer, - render(h) { - return h(CodeCoverage, { - props: { - graphEndpoint: codeCoverageContainer.dataset?.graphEndpoint, - }, - }); - }, - }); + // eslint-disable-next-line no-new + new Vue({ + el: codeCoverageContainer, + render(h) { + return h(CodeCoverage, { + props: { + graphEndpoint: codeCoverageContainer.dataset?.graphEndpoint, + }, + }); + }, + }); - // eslint-disable-next-line no-new - new Vue({ - el: monthContainer, - components: { - GlColumnChart, - }, - mixins: [SeriesDataMixin], - data() { - return { - chartData: JSON.parse(monthContainer.dataset.chartData), - }; - }, - render(h) { - return h(GlColumnChart, { - props: { - data: this.seriesData, - xAxisTitle: __('Day of month'), - yAxisTitle: __('No. of commits'), - xAxisType: 'category', - }, - }); - }, - }); + // eslint-disable-next-line no-new + new Vue({ + el: monthContainer, + components: { + GlColumnChart, + }, + mixins: [SeriesDataMixin], + data() { + return { + chartData: JSON.parse(monthContainer.dataset.chartData), + }; + }, + render(h) { + return h(GlColumnChart, { + props: { + data: this.seriesData, + xAxisTitle: __('Day of month'), + yAxisTitle: __('No. of commits'), + xAxisType: 'category', + }, + }); + }, + }); - // eslint-disable-next-line no-new - new Vue({ - el: weekdayContainer, - components: { - GlColumnChart, - }, - data() { - return { - chartData: JSON.parse(weekdayContainer.dataset.chartData), - }; - }, - computed: { - seriesData() { - const weekDays = reorderWeekDays(this.chartData, gon.first_day_of_week); - const data = Object.keys(weekDays).reduce((acc, key) => { - acc.push([key, weekDays[key]]); - return acc; - }, []); - return { full: data }; + // eslint-disable-next-line no-new + new Vue({ + el: weekdayContainer, + components: { + GlColumnChart, }, - }, - render(h) { - return h(GlColumnChart, { - props: { - data: this.seriesData, - xAxisTitle: __('Weekday'), - yAxisTitle: __('No. of commits'), - xAxisType: 'category', + data() { + return { + chartData: JSON.parse(weekdayContainer.dataset.chartData), + }; + }, + computed: { + seriesData() { + const weekDays = reorderWeekDays(this.chartData, gon.first_day_of_week); + const data = Object.keys(weekDays).reduce((acc, key) => { + acc.push([key, weekDays[key]]); + return acc; + }, []); + return { full: data }; }, - }); - }, - }); + }, + render(h) { + return h(GlColumnChart, { + props: { + data: this.seriesData, + xAxisTitle: __('Weekday'), + yAxisTitle: __('No. of commits'), + xAxisType: 'category', + }, + }); + }, + }); - // eslint-disable-next-line no-new - new Vue({ - el: hourContainer, - components: { - GlColumnChart, - }, - mixins: [SeriesDataMixin], - data() { - return { - chartData: JSON.parse(hourContainer.dataset.chartData), - }; - }, - render(h) { - return h(GlColumnChart, { - props: { - data: this.seriesData, - xAxisTitle: __('Hour (UTC)'), - yAxisTitle: __('No. of commits'), - xAxisType: 'category', - }, - }); - }, + // eslint-disable-next-line no-new + new Vue({ + el: hourContainer, + components: { + GlColumnChart, + }, + mixins: [SeriesDataMixin], + data() { + return { + chartData: JSON.parse(hourContainer.dataset.chartData), + }; + }, + render(h) { + return h(GlColumnChart, { + props: { + data: this.seriesData, + xAxisTitle: __('Hour (UTC)'), + yAxisTitle: __('No. of commits'), + xAxisType: 'category', + }, + }); + }, + }); }); }); diff --git a/app/assets/javascripts/pages/projects/integrations/jira/issues/index/index.js b/app/assets/javascripts/pages/projects/integrations/jira/issues/index/index.js index 260ba69b4bc..534614349bf 100644 --- a/app/assets/javascripts/pages/projects/integrations/jira/issues/index/index.js +++ b/app/assets/javascripts/pages/projects/integrations/jira/issues/index/index.js @@ -1,4 +1,4 @@ -import initIssuablesList from '~/issuables_list'; +import initIssuablesList from '~/issues_list'; document.addEventListener('DOMContentLoaded', () => { initIssuablesList(); diff --git a/app/assets/javascripts/pages/projects/issues/index/index.js b/app/assets/javascripts/pages/projects/issues/index/index.js index 1711d122080..e1add4a2af3 100644 --- a/app/assets/javascripts/pages/projects/issues/index/index.js +++ b/app/assets/javascripts/pages/projects/issues/index/index.js @@ -7,7 +7,7 @@ import UsersSelect from '~/users_select'; import initFilteredSearch from '~/pages/search/init_filtered_search'; import { FILTERED_SEARCH } from '~/pages/constants'; import { ISSUABLE_INDEX } from '~/pages/projects/constants'; -import initIssuablesList from '~/issuables_list'; +import initIssuablesList from '~/issues_list'; import initManualOrdering from '~/manual_ordering'; import { showLearnGitLabIssuesPopover } from '~/onboarding_issues'; diff --git a/app/assets/javascripts/pages/projects/issues/service_desk/index.js b/app/assets/javascripts/pages/projects/issues/service_desk/index.js index 9304d9b6832..e0c1332796f 100644 --- a/app/assets/javascripts/pages/projects/issues/service_desk/index.js +++ b/app/assets/javascripts/pages/projects/issues/service_desk/index.js @@ -1,5 +1,5 @@ import FilteredSearchServiceDesk from './filtered_search'; -import initIssuablesList from '~/issuables_list'; +import initIssuablesList from '~/issues_list'; document.addEventListener('DOMContentLoaded', () => { const supportBotData = JSON.parse( diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js index 5ac6c17e09d..98ae4e26257 100644 --- a/app/assets/javascripts/pages/projects/issues/show.js +++ b/app/assets/javascripts/pages/projects/issues/show.js @@ -1,27 +1,31 @@ +import loadAwardsHandler from '~/awards_handler'; import initIssuableSidebar from '~/init_issuable_sidebar'; import Issue from '~/issue'; import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable'; import ZenMode from '~/zen_mode'; import '~/notes/index'; import { store } from '~/notes/stores'; -import initIssueableApp from '~/issue_show'; +import initIssueApp from '~/issue_show/issue'; +import initIncidentApp from '~/issue_show/incident'; import initIssuableHeaderWarning from '~/vue_shared/components/issuable/init_issuable_header_warning'; import initSentryErrorStackTraceApp from '~/sentry_error_stack_trace'; import initRelatedMergeRequestsApp from '~/related_merge_requests'; import initVueIssuableSidebarApp from '~/issuable_sidebar/sidebar_bundle'; +import { parseIssuableData } from '~/issue_show/utils/parse_data'; export default function() { - initIssueableApp(); + const { issueType, ...issuableData } = parseIssuableData(); + + if (issueType === 'incident') { + initIncidentApp(issuableData); + } else { + initIssueApp(issuableData); + } + initIssuableHeaderWarning(store); initSentryErrorStackTraceApp(); initRelatedMergeRequestsApp(); - // This will be removed when we remove the `design_management_moved` feature flag - // See https://gitlab.com/gitlab-org/gitlab/-/issues/223197 - import(/* webpackChunkName: 'design_management' */ '~/design_management_legacy') - .then(module => module.default()) - .catch(() => {}); - import(/* webpackChunkName: 'design_management' */ '~/design_management') .then(module => module.default()) .catch(() => {}); @@ -34,4 +38,6 @@ export default function() { } else { initIssuableSidebar(); } + + loadAwardsHandler(); } diff --git a/app/assets/javascripts/pages/projects/issues/show/index.js b/app/assets/javascripts/pages/projects/issues/show/index.js index ce74a6de11f..aef4feef42c 100644 --- a/app/assets/javascripts/pages/projects/issues/show/index.js +++ b/app/assets/javascripts/pages/projects/issues/show/index.js @@ -1,4 +1,5 @@ import initSidebarBundle from '~/sidebar/sidebar_bundle'; +import initRelatedIssues from '~/related_issues'; import initShow from '../show'; document.addEventListener('DOMContentLoaded', () => { @@ -6,4 +7,5 @@ document.addEventListener('DOMContentLoaded', () => { if (gon.features && !gon.features.vueIssuableSidebar) { initSidebarBundle(); } + initRelatedIssues(); }); diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js index b72fe6681df..e9f0e008435 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js +++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js @@ -1,8 +1,9 @@ import $ from 'jquery'; +import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; export default () => { const $targetProjectDropdown = $('.js-target-project'); - $targetProjectDropdown.glDropdown({ + initDeprecatedJQueryDropdown($targetProjectDropdown, { selectable: true, fieldName: $targetProjectDropdown.data('fieldName'), filterable: true, @@ -16,7 +17,7 @@ export default () => { $('.mr_target_commit').empty(); const $targetBranchDropdown = $('.js-target-branch'); $targetBranchDropdown.data('refsUrl', $el.data('refsUrl')); - $targetBranchDropdown.data('glDropdown').clearMenu(); + $targetBranchDropdown.data('deprecatedJQueryDropdown').clearMenu(); }, }); }; diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js index 25abb80cfae..11af50169f5 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js +++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js @@ -6,6 +6,7 @@ import howToMerge from '~/how_to_merge'; import initPipelines from '~/commit/pipelines/pipelines_bundle'; import initVueIssuableSidebarApp from '~/issuable_sidebar/sidebar_bundle'; import initSourcegraph from '~/sourcegraph'; +import loadAwardsHandler from '~/awards_handler'; export default function() { new ZenMode(); // eslint-disable-line no-new @@ -19,4 +20,5 @@ export default function() { handleLocationHash(); howToMerge(); initSourcegraph(); + loadAwardsHandler(); } diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue index da96e6f36b4..7a3923dfefd 100644 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue +++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue @@ -1,6 +1,8 @@ <script> +/* eslint-disable vue/no-v-html */ import Vue from 'vue'; import Cookies from 'js-cookie'; +import { GlIcon } from '@gitlab/ui'; import Translate from '../../../../../vue_shared/translate'; // Full path is needed for Jest to be able to correctly mock this file import illustrationSvg from '~/pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg'; @@ -12,6 +14,9 @@ const cookieKey = 'pipeline_schedules_callout_dismissed'; export default { name: 'PipelineSchedulesCallout', + components: { + GlIcon, + }, data() { return { docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl, @@ -33,7 +38,7 @@ export default { <div v-if="!calloutDismissed" class="pipeline-schedules-user-callout user-callout"> <div class="bordered-box landing content-block"> <button id="dismiss-callout-btn" class="btn btn-default close" @click="dismissCallout"> - <i aria-hidden="true" class="fa fa-times"> </i> + <gl-icon name="close" aria-hidden="true" /> </button> <div class="svg-container" v-html="illustrationSvg"></div> <div class="user-callout-copy"> diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js index 0057700c1b3..4b203891640 100644 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js +++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; export default class TargetBranchDropdown { constructor() { @@ -10,7 +11,7 @@ export default class TargetBranchDropdown { } initDropdown() { - this.$dropdown.glDropdown({ + initDeprecatedJQueryDropdown(this.$dropdown, { data: this.formatBranchesList(), filterable: true, selectable: true, diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js index a20a0526f12..2a58e015ff1 100644 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js +++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js @@ -1,3 +1,5 @@ +import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; + const defaultTimezone = { name: 'UTC', offset: 0 }; const defaults = { $inputEl: null, @@ -42,7 +44,7 @@ export default class TimezoneDropdown { } initDropdown() { - this.$dropdown.glDropdown({ + initDeprecatedJQueryDropdown(this.$dropdown, { data: this.timezoneData, filterable: true, selectable: true, diff --git a/app/assets/javascripts/pages/projects/project.js b/app/assets/javascripts/pages/projects/project.js index bb285635425..2f27814a692 100644 --- a/app/assets/javascripts/pages/projects/project.js +++ b/app/assets/javascripts/pages/projects/project.js @@ -8,52 +8,59 @@ import { serializeForm } from '~/lib/utils/forms'; import axios from '~/lib/utils/axios_utils'; import { deprecatedCreateFlash as flash } from '~/flash'; import projectSelect from '../../project_select'; +import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; export default class Project { constructor() { const $cloneOptions = $('ul.clone-options-dropdown'); - const $projectCloneField = $('#project_clone'); - const $cloneBtnLabel = $('.js-git-clone-holder .js-clone-dropdown-label'); - const mobileCloneField = document.querySelector( - '.js-mobile-git-clone .js-clone-dropdown-label', - ); - - const selectedCloneOption = $cloneBtnLabel.text().trim(); - if (selectedCloneOption.length > 0) { - $(`a:contains('${selectedCloneOption}')`, $cloneOptions).addClass('is-active'); - } + if ($cloneOptions.length) { + const $projectCloneField = $('#project_clone'); + const $cloneBtnLabel = $('.js-git-clone-holder .js-clone-dropdown-label'); + const mobileCloneField = document.querySelector( + '.js-mobile-git-clone .js-clone-dropdown-label', + ); + + const selectedCloneOption = $cloneBtnLabel.text().trim(); + if (selectedCloneOption.length > 0) { + $(`a:contains('${selectedCloneOption}')`, $cloneOptions).addClass('is-active'); + } - $('a', $cloneOptions).on('click', e => { - e.preventDefault(); - const $this = $(e.currentTarget); - const url = $this.attr('href'); - const cloneType = $this.data('cloneType'); - - $('.is-active', $cloneOptions).removeClass('is-active'); - $(`a[data-clone-type="${cloneType}"]`).each(function() { - const $el = $(this); - const activeText = $el.find('.dropdown-menu-inner-title').text(); - const $container = $el.closest('.project-clone-holder'); - const $label = $container.find('.js-clone-dropdown-label'); - - $el.toggleClass('is-active'); - $label.text(activeText); + $('a', $cloneOptions).on('click', e => { + e.preventDefault(); + const $this = $(e.currentTarget); + const url = $this.attr('href'); + const cloneType = $this.data('cloneType'); + + $('.is-active', $cloneOptions).removeClass('is-active'); + $(`a[data-clone-type="${cloneType}"]`).each(function() { + const $el = $(this); + const activeText = $el.find('.dropdown-menu-inner-title').text(); + const $container = $el.closest('.project-clone-holder'); + const $label = $container.find('.js-clone-dropdown-label'); + + $el.toggleClass('is-active'); + $label.text(activeText); + }); + + if (mobileCloneField) { + mobileCloneField.dataset.clipboardText = url; + } else { + $projectCloneField.val(url); + } + $('.js-git-empty .js-clone').text(url); }); + } - if (mobileCloneField) { - mobileCloneField.dataset.clipboardText = url; - } else { - $projectCloneField.val(url); - } - $('.js-git-empty .js-clone').text(url); - }); // Ref switcher - Project.initRefSwitcher(); - $('.project-refs-select').on('change', function() { - return $(this) - .parents('form') - .submit(); - }); + if (document.querySelector('.js-project-refs-dropdown')) { + Project.initRefSwitcher(); + $('.project-refs-select').on('change', function() { + return $(this) + .parents('form') + .submit(); + }); + } + $('.hide-no-ssh-message').on('click', function(e) { Cookies.set('hide_no_ssh_message', 'false'); $(this) @@ -77,6 +84,7 @@ export default class Project { .remove(); return e.preventDefault(); }); + Project.projectSelectDropdown(); } @@ -104,7 +112,7 @@ export default class Project { const action = $form.attr('action'); const linkTarget = mergeUrlParams(serializeForm($form[0]), action); - return $dropdown.glDropdown({ + return initDeprecatedJQueryDropdown($dropdown, { data(term, callback) { axios .get($dropdown.data('refsUrl'), { diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue index 92d23772565..b7546a6bed7 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue +++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue @@ -1,5 +1,10 @@ <script> +import { GlIcon } from '@gitlab/ui'; + export default { + components: { + GlIcon, + }, props: { label: { type: String, @@ -25,7 +30,7 @@ export default { <label v-if="label" class="label-bold"> {{ label }} <a v-if="helpPath" :href="helpPath" target="_blank"> - <i aria-hidden="true" data-hidden="true" class="fa fa-question-circle"> </i> + <gl-icon name="question-o" /> </a> </label> <span v-if="helpText" class="form-text text-muted"> {{ helpText }} </span> <slot></slot> |