diff options
Diffstat (limited to 'app/assets/javascripts/pages/projects')
17 files changed, 321 insertions, 255 deletions
diff --git a/app/assets/javascripts/pages/projects/clusters/index.js b/app/assets/javascripts/pages/projects/clusters/index.js new file mode 100644 index 00000000000..4d04c37caa7 --- /dev/null +++ b/app/assets/javascripts/pages/projects/clusters/index.js @@ -0,0 +1,5 @@ +import initCreateCluster from '~/create_cluster/init_create_cluster'; + +document.addEventListener('DOMContentLoaded', () => { + initCreateCluster(document, gon); +}); diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js index c9dbe576c4b..9fb07917f9b 100644 --- a/app/assets/javascripts/pages/projects/edit/index.js +++ b/app/assets/javascripts/pages/projects/edit/index.js @@ -4,12 +4,12 @@ import setupTransferEdit from '~/transfer_edit'; import initConfirmDangerModal from '~/confirm_danger_modal'; import mountBadgeSettings from '~/pages/shared/mount_badge_settings'; import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory'; -import initAvatarPicker from '~/avatar_picker'; +import initFilePickers from '~/file_pickers'; import initProjectLoadingSpinner from '../shared/save_project_loader'; import initProjectPermissionsSettings from '../shared/permissions'; document.addEventListener('DOMContentLoaded', () => { - initAvatarPicker(); + initFilePickers(); initConfirmDangerModal(); initSettingsPanels(); mountBadgeSettings(PROJECT_BADGE); diff --git a/app/assets/javascripts/pages/projects/environments/metrics/index.js b/app/assets/javascripts/pages/projects/environments/metrics/index.js index 31ec4e29ad2..d3028aec313 100644 --- a/app/assets/javascripts/pages/projects/environments/metrics/index.js +++ b/app/assets/javascripts/pages/projects/environments/metrics/index.js @@ -1,3 +1,3 @@ -import monitoringBundle from '~/monitoring/monitoring_bundle_with_alerts'; +import monitoringApp from '~/monitoring/monitoring_app'; -document.addEventListener('DOMContentLoaded', monitoringBundle); +document.addEventListener('DOMContentLoaded', monitoringApp); diff --git a/app/assets/javascripts/pages/projects/graphs/charts/index.js b/app/assets/javascripts/pages/projects/graphs/charts/index.js index 803f4e37705..03504fba1ae 100644 --- a/app/assets/javascripts/pages/projects/graphs/charts/index.js +++ b/app/assets/javascripts/pages/projects/graphs/charts/index.js @@ -1,10 +1,12 @@ import Vue from 'vue'; import { __ } from '~/locale'; import { GlColumnChart } from '@gitlab/ui/dist/charts'; +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'); @@ -59,6 +61,18 @@ document.addEventListener('DOMContentLoaded', () => { // 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, diff --git a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue new file mode 100644 index 00000000000..af8fb032c22 --- /dev/null +++ b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue @@ -0,0 +1,177 @@ +<script> +import { GlAlert, GlDropdown, GlDropdownItem, GlIcon, GlSprintf } from '@gitlab/ui'; +import { GlAreaChart } from '@gitlab/ui/dist/charts'; +import dateFormat from 'dateformat'; +import axios from '~/lib/utils/axios_utils'; +import { get } from 'lodash'; + +import { __ } from '~/locale'; + +export default { + components: { + GlAlert, + GlAreaChart, + GlDropdown, + GlDropdownItem, + GlIcon, + GlSprintf, + }, + props: { + graphEndpoint: { + type: String, + required: true, + }, + }, + data() { + return { + dailyCoverageData: [], + hasFetchError: false, + isLoading: true, + selectedCoverageIndex: 0, + tooltipTitle: '', + coveragePercentage: '', + chartOptions: { + yAxis: { + name: __('Bi-weekly code coverage'), + type: 'value', + min: 0, + max: 100, + }, + xAxis: { + name: '', + type: 'category', + }, + }, + }; + }, + computed: { + hasData() { + return this.dailyCoverageData.length > 0; + }, + isReady() { + return !this.isLoading && !this.hasFetchError; + }, + canShowData() { + return this.isReady && this.hasData; + }, + noDataAvailable() { + return this.isReady && !this.hasData; + }, + selectedDailyCoverage() { + return this.hasData && this.dailyCoverageData[this.selectedCoverageIndex]; + }, + selectedDailyCoverageName() { + return this.selectedDailyCoverage?.group_name; + }, + formattedData() { + if (this.selectedDailyCoverage?.data) { + return this.selectedDailyCoverage.data.map(value => [ + dateFormat(value.date, 'mmm dd'), + value.coverage, + ]); + } + + // If the fetching failed, we return an empty array which + // allow the graph to render while empty + return []; + }, + chartData() { + return [ + { + // The default string 'data' will get shown in the legend if we fail to fetch the data + name: this.canShowData ? this.selectedDailyCoverageName : __('data'), + data: this.formattedData, + type: 'line', + smooth: true, + }, + ]; + }, + }, + created() { + axios + .get(this.graphEndpoint) + .then(({ data }) => { + this.dailyCoverageData = data; + }) + .catch(() => { + this.hasFetchError = true; + }) + .finally(() => { + this.isLoading = false; + }); + }, + methods: { + setSelectedCoverage(index) { + this.selectedCoverageIndex = index; + }, + formatTooltipText(params) { + this.tooltipTitle = params.value; + this.coveragePercentage = get(params, 'seriesData[0].data[1]', ''); + }, + }, + height: 200, +}; +</script> + +<template> + <div> + <div class="gl-mt-3 gl-mb-3"> + <gl-alert + v-if="hasFetchError" + variant="danger" + :title="s__('Code Coverage|Couldn\'t fetch the code coverage data')" + :dismissible="false" + /> + <gl-alert + v-if="noDataAvailable" + variant="info" + :title="s__('Code Coverage| Empty code coverage data')" + :dismissible="false" + > + <span> + {{ __('It seems that there is currently no available data for code coverage') }} + </span> + </gl-alert> + <gl-dropdown v-if="canShowData" :text="selectedDailyCoverageName"> + <gl-dropdown-item + v-for="({ group_name }, index) in dailyCoverageData" + :key="index" + :value="group_name" + @click="setSelectedCoverage(index)" + > + <div class="gl-display-flex"> + <gl-icon + v-if="index === selectedCoverageIndex" + name="mobile-issue-close" + class="gl-absolute" + /> + <span class="gl-display-flex align-items-center ml-4"> + {{ group_name }} + </span> + </div> + </gl-dropdown-item> + </gl-dropdown> + </div> + <gl-area-chart + v-if="!isLoading" + :height="$options.height" + :data="chartData" + :option="chartOptions" + :format-tooltip-text="formatTooltipText" + > + <template v-if="canShowData" #tooltipTitle> + {{ tooltipTitle }} + </template> + <template v-if="canShowData" #tooltipContent> + <gl-sprintf :message="__('Code Coverage: %{coveragePercentage}%{percentSymbol}')"> + <template #coveragePercentage> + {{ coveragePercentage }} + </template> + <template #percentSymbol> + % + </template> + </gl-sprintf> + </template> + </gl-area-chart> + </div> +</template> diff --git a/app/assets/javascripts/pages/projects/index.js b/app/assets/javascripts/pages/projects/index.js index 190d0806c28..8e0af018b61 100644 --- a/app/assets/javascripts/pages/projects/index.js +++ b/app/assets/javascripts/pages/projects/index.js @@ -1,10 +1,7 @@ import Project from './project'; import ShortcutsNavigation from '../../behaviors/shortcuts/shortcuts_navigation'; -import initCreateCluster from '~/create_cluster/init_create_cluster'; document.addEventListener('DOMContentLoaded', () => { - initCreateCluster(document, gon); - new Project(); // eslint-disable-line no-new new ShortcutsNavigation(); // eslint-disable-line no-new }); diff --git a/app/assets/javascripts/pages/projects/issues/index/index.js b/app/assets/javascripts/pages/projects/issues/index/index.js index e8e0cda2139..a66b665d152 100644 --- a/app/assets/javascripts/pages/projects/issues/index/index.js +++ b/app/assets/javascripts/pages/projects/issues/index/index.js @@ -9,6 +9,7 @@ import { FILTERED_SEARCH } from '~/pages/constants'; import { ISSUABLE_INDEX } from '~/pages/projects/constants'; import initIssuablesList from '~/issuables_list'; import initManualOrdering from '~/manual_ordering'; +import { showLearnGitLabIssuesPopover } from '~/onboarding_issues'; document.addEventListener('DOMContentLoaded', () => { IssuableFilteredSearchTokenKeys.addExtraTokensForIssues(); @@ -24,4 +25,5 @@ document.addEventListener('DOMContentLoaded', () => { initManualOrdering(); initIssuablesList(); + showLearnGitLabIssuesPopover(); }); diff --git a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue index 3b26047455d..08078fa6b62 100644 --- a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue +++ b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue @@ -90,7 +90,7 @@ export default { footer-primary-button-variant="warning" @submit="onSubmit" > - <div slot="title" class="modal-title-with-label" v-html="title">{{ title }}</div> + <div slot="title" class="modal-title-with-label" v-html="title"></div> {{ text }} </gl-modal> diff --git a/app/assets/javascripts/pages/projects/merge_requests/show/index.js b/app/assets/javascripts/pages/projects/merge_requests/show/index.js index ddc648702f1..4708970efef 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/show/index.js +++ b/app/assets/javascripts/pages/projects/merge_requests/show/index.js @@ -1,4 +1,5 @@ import initMrNotes from '~/mr_notes'; +import { initReviewBar } from '~/batch_comments'; import initSidebarBundle from '~/sidebar/sidebar_bundle'; import initShow from '../init_merge_request_show'; @@ -8,4 +9,5 @@ document.addEventListener('DOMContentLoaded', () => { initSidebarBundle(); } initMrNotes(); + initReviewBar(); }); diff --git a/app/assets/javascripts/pages/projects/new/index.js b/app/assets/javascripts/pages/projects/new/index.js index 097403ba9e2..e17059dd55a 100644 --- a/app/assets/javascripts/pages/projects/new/index.js +++ b/app/assets/javascripts/pages/projects/new/index.js @@ -1,7 +1,46 @@ import initProjectVisibilitySelector from '../../../project_visibility'; import initProjectNew from '../../../projects/project_new'; +import { __ } from '~/locale'; +import createFlash from '~/flash'; +import Tracking from '~/tracking'; document.addEventListener('DOMContentLoaded', () => { initProjectVisibilitySelector(); initProjectNew.bindEvents(); + + const { category, property } = gon.tracking_data ?? { category: 'projects:new' }; + const hasNewCreateProjectUi = 'newCreateProjectUi' in gon?.features; + + if (!hasNewCreateProjectUi) { + // Setting additional tracking for HAML template + + Array.from( + document.querySelectorAll('.project-edit-container [data-experiment-track-label]'), + ).forEach(node => + node.addEventListener('click', event => { + const { experimentTrackLabel: label } = event.currentTarget.dataset; + Tracking.event(category, 'click_tab', { property, label }); + }), + ); + } else { + import( + /* webpackChunkName: 'experiment_new_project_creation' */ '../../../projects/experiment_new_project_creation' + ) + .then(m => { + const el = document.querySelector('.js-experiment-new-project-creation'); + + if (!el) { + return; + } + + const config = { + hasErrors: 'hasErrors' in el.dataset, + isCiCdAvailable: 'isCiCdAvailable' in el.dataset, + }; + m.default(el, config); + }) + .catch(() => { + createFlash(__('An error occurred while loading project creation UI')); + }); + } }); diff --git a/app/assets/javascripts/pages/projects/pipelines/index/index.js b/app/assets/javascripts/pages/projects/pipelines/index/index.js index bbad3238ec4..2c37d7da4a7 100644 --- a/app/assets/javascripts/pages/projects/pipelines/index/index.js +++ b/app/assets/javascripts/pages/projects/pipelines/index/index.js @@ -51,6 +51,7 @@ document.addEventListener( ciLintPath: this.dataset.ciLintPath, resetCachePath: this.dataset.resetCachePath, projectId: this.dataset.projectId, + params: JSON.parse(this.dataset.params), }, }); }, diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue index ab32fe18972..7181332a1d6 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue +++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue @@ -46,7 +46,11 @@ export default { allowedVisibilityOptions: { type: Array, required: false, - default: () => [0, 10, 20], + default: () => [ + visibilityOptions.PRIVATE, + visibilityOptions.INTERNAL, + visibilityOptions.PUBLIC, + ], }, lfsAvailable: { type: Boolean, @@ -118,16 +122,14 @@ export default { const defaults = { visibilityOptions, visibilityLevel: visibilityOptions.PUBLIC, - // TODO: Change all of these to use the visibilityOptions constants - // https://gitlab.com/gitlab-org/gitlab/-/issues/214667 - issuesAccessLevel: 20, - repositoryAccessLevel: 20, - forkingAccessLevel: 20, - mergeRequestsAccessLevel: 20, - buildsAccessLevel: 20, - wikiAccessLevel: 20, - snippetsAccessLevel: 20, - pagesAccessLevel: 20, + issuesAccessLevel: featureAccessLevel.EVERYONE, + repositoryAccessLevel: featureAccessLevel.EVERYONE, + forkingAccessLevel: featureAccessLevel.EVERYONE, + mergeRequestsAccessLevel: featureAccessLevel.EVERYONE, + buildsAccessLevel: featureAccessLevel.EVERYONE, + wikiAccessLevel: featureAccessLevel.EVERYONE, + snippetsAccessLevel: featureAccessLevel.EVERYONE, + pagesAccessLevel: featureAccessLevel.EVERYONE, metricsDashboardAccessLevel: featureAccessLevel.PROJECT_MEMBERS, containerRegistryEnabled: true, lfsEnabled: true, @@ -180,7 +182,7 @@ export default { }, repositoryEnabled() { - return this.repositoryAccessLevel > 0; + return this.repositoryAccessLevel > featureAccessLevel.NOT_ENABLED; }, visibilityLevelDescription() { @@ -206,40 +208,70 @@ export default { visibilityLevel(value, oldValue) { if (value === visibilityOptions.PRIVATE) { // when private, features are restricted to "only team members" - this.issuesAccessLevel = Math.min(10, this.issuesAccessLevel); - this.repositoryAccessLevel = Math.min(10, this.repositoryAccessLevel); - this.mergeRequestsAccessLevel = Math.min(10, this.mergeRequestsAccessLevel); - this.buildsAccessLevel = Math.min(10, this.buildsAccessLevel); - this.wikiAccessLevel = Math.min(10, this.wikiAccessLevel); - this.snippetsAccessLevel = Math.min(10, this.snippetsAccessLevel); - this.metricsDashboardAccessLevel = Math.min(10, this.metricsDashboardAccessLevel); - if (this.pagesAccessLevel === 20) { + this.issuesAccessLevel = Math.min( + featureAccessLevel.PROJECT_MEMBERS, + this.issuesAccessLevel, + ); + this.repositoryAccessLevel = Math.min( + featureAccessLevel.PROJECT_MEMBERS, + this.repositoryAccessLevel, + ); + this.mergeRequestsAccessLevel = Math.min( + featureAccessLevel.PROJECT_MEMBERS, + this.mergeRequestsAccessLevel, + ); + this.buildsAccessLevel = Math.min( + featureAccessLevel.PROJECT_MEMBERS, + this.buildsAccessLevel, + ); + this.wikiAccessLevel = Math.min(featureAccessLevel.PROJECT_MEMBERS, this.wikiAccessLevel); + this.snippetsAccessLevel = Math.min( + featureAccessLevel.PROJECT_MEMBERS, + this.snippetsAccessLevel, + ); + this.metricsDashboardAccessLevel = Math.min( + featureAccessLevel.PROJECT_MEMBERS, + this.metricsDashboardAccessLevel, + ); + if (this.pagesAccessLevel === featureAccessLevel.EVERYONE) { // When from Internal->Private narrow access for only members - this.pagesAccessLevel = 10; + this.pagesAccessLevel = featureAccessLevel.PROJECT_MEMBERS; } this.highlightChanges(); } else if (oldValue === visibilityOptions.PRIVATE) { // if changing away from private, make enabled features more permissive - if (this.issuesAccessLevel > 0) this.issuesAccessLevel = 20; - if (this.repositoryAccessLevel > 0) this.repositoryAccessLevel = 20; - if (this.mergeRequestsAccessLevel > 0) this.mergeRequestsAccessLevel = 20; - if (this.buildsAccessLevel > 0) this.buildsAccessLevel = 20; - if (this.wikiAccessLevel > 0) this.wikiAccessLevel = 20; - if (this.snippetsAccessLevel > 0) this.snippetsAccessLevel = 20; - if (this.pagesAccessLevel === 10) this.pagesAccessLevel = 20; - if (this.metricsDashboardAccessLevel === 10) this.metricsDashboardAccessLevel = 20; + if (this.issuesAccessLevel > featureAccessLevel.NOT_ENABLED) + this.issuesAccessLevel = featureAccessLevel.EVERYONE; + if (this.repositoryAccessLevel > featureAccessLevel.NOT_ENABLED) + this.repositoryAccessLevel = featureAccessLevel.EVERYONE; + if (this.mergeRequestsAccessLevel > featureAccessLevel.NOT_ENABLED) + this.mergeRequestsAccessLevel = featureAccessLevel.EVERYONE; + if (this.buildsAccessLevel > featureAccessLevel.NOT_ENABLED) + this.buildsAccessLevel = featureAccessLevel.EVERYONE; + if (this.wikiAccessLevel > featureAccessLevel.NOT_ENABLED) + this.wikiAccessLevel = featureAccessLevel.EVERYONE; + if (this.snippetsAccessLevel > featureAccessLevel.NOT_ENABLED) + this.snippetsAccessLevel = featureAccessLevel.EVERYONE; + if (this.pagesAccessLevel === featureAccessLevel.PROJECT_MEMBERS) + this.pagesAccessLevel = featureAccessLevel.EVERYONE; + if (this.metricsDashboardAccessLevel === featureAccessLevel.PROJECT_MEMBERS) + this.metricsDashboardAccessLevel = featureAccessLevel.EVERYONE; this.highlightChanges(); } }, issuesAccessLevel(value, oldValue) { - if (value === 0) toggleHiddenClassBySelector('.issues-feature', true); - else if (oldValue === 0) toggleHiddenClassBySelector('.issues-feature', false); + if (value === featureAccessLevel.NOT_ENABLED) + toggleHiddenClassBySelector('.issues-feature', true); + else if (oldValue === featureAccessLevel.NOT_ENABLED) + toggleHiddenClassBySelector('.issues-feature', false); }, mergeRequestsAccessLevel(value, oldValue) { - if (value === 0) toggleHiddenClassBySelector('.merge-requests-feature', true); - else if (oldValue === 0) toggleHiddenClassBySelector('.merge-requests-feature', false); + if (value === featureAccessLevel.NOT_ENABLED) + toggleHiddenClassBySelector('.merge-requests-feature', true); + else if (oldValue === featureAccessLevel.NOT_ENABLED) + toggleHiddenClassBySelector('.merge-requests-feature', false); }, }, diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js index 6ae10c98058..3c44053e2b2 100644 --- a/app/assets/javascripts/pages/projects/show/index.js +++ b/app/assets/javascripts/pages/projects/show/index.js @@ -1,4 +1,6 @@ import $ from 'jquery'; +import 'jquery.waitforimages'; + import initBlob from '~/blob_edit/blob_bundle'; import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; import NotificationsForm from '~/notifications_form'; @@ -12,9 +14,12 @@ import initReadMore from '~/read_more'; import leaveByUrl from '~/namespaces/leave_by_url'; import Star from '../../../star'; import notificationsDropdown from '../../../notifications_dropdown'; +import initNamespaceStorageLimitAlert from '~/namespace_storage_limit_alert'; +import { showLearnGitLabProjectPopover } from '~/onboarding_issues'; document.addEventListener('DOMContentLoaded', () => { initReadMore(); + initNamespaceStorageLimitAlert(); new Star(); // eslint-disable-line no-new notificationsDropdown(); new ShortcutsNavigation(); // eslint-disable-line no-new @@ -55,4 +60,6 @@ document.addEventListener('DOMContentLoaded', () => { throw e; }); } + + showLearnGitLabProjectPopover(); }); diff --git a/app/assets/javascripts/pages/projects/tree/show/index.js b/app/assets/javascripts/pages/projects/tree/show/index.js index 16d71379e31..0d1d32317fe 100644 --- a/app/assets/javascripts/pages/projects/tree/show/index.js +++ b/app/assets/javascripts/pages/projects/tree/show/index.js @@ -1,4 +1,6 @@ import $ from 'jquery'; +import 'jquery.waitforimages'; + import Vue from 'vue'; import initBlob from '~/blob_edit/blob_bundle'; import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue'; diff --git a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue deleted file mode 100644 index 580cca49b5e..00000000000 --- a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue +++ /dev/null @@ -1,74 +0,0 @@ -<script> -import { escape } from 'lodash'; -import { GlModal, GlModalDirective } from '@gitlab/ui'; -import { s__, sprintf } from '~/locale'; - -export default { - components: { - GlModal, - }, - directives: { - 'gl-modal': GlModalDirective, - }, - props: { - deleteWikiUrl: { - type: String, - required: true, - default: '', - }, - pageTitle: { - type: String, - required: true, - default: '', - }, - csrfToken: { - type: String, - required: true, - default: '', - }, - }, - computed: { - modalId() { - return 'delete-wiki-modal'; - }, - message() { - return s__('WikiPageConfirmDelete|Are you sure you want to delete this page?'); - }, - title() { - return sprintf( - s__('WikiPageConfirmDelete|Delete page %{pageTitle}?'), - { - pageTitle: escape(this.pageTitle), - }, - false, - ); - }, - }, - methods: { - onSubmit() { - window.onbeforeunload = null; - this.$refs.form.submit(); - }, - }, -}; -</script> - -<template> - <div class="d-inline-block"> - <button v-gl-modal="modalId" type="button" class="btn btn-danger">{{ __('Delete') }}</button> - <gl-modal - :title="title" - :ok-title="s__('WikiPageConfirmDelete|Delete page')" - :modal-id="modalId" - title-tag="h4" - ok-variant="danger" - @ok="onSubmit" - > - {{ message }} - <form ref="form" :action="deleteWikiUrl" method="post" class="js-requires-input"> - <input ref="method" type="hidden" name="_method" value="delete" /> - <input :value="csrfToken" type="hidden" name="authenticity_token" /> - </form> - </gl-modal> - </div> -</template> diff --git a/app/assets/javascripts/pages/projects/wikis/index.js b/app/assets/javascripts/pages/projects/wikis/index.js index f5fd84d69ac..9c75531ca40 100644 --- a/app/assets/javascripts/pages/projects/wikis/index.js +++ b/app/assets/javascripts/pages/projects/wikis/index.js @@ -1,41 +1,3 @@ -import $ from 'jquery'; -import Vue from 'vue'; -import Translate from '~/vue_shared/translate'; -import csrf from '~/lib/utils/csrf'; -import ShortcutsWiki from '~/behaviors/shortcuts/shortcuts_wiki'; -import Wikis from './wikis'; -import ZenMode from '../../../zen_mode'; -import GLForm from '../../../gl_form'; -import deleteWikiModal from './components/delete_wiki_modal.vue'; +import initWikis from '~/pages/shared/wikis'; -document.addEventListener('DOMContentLoaded', () => { - new Wikis(); // eslint-disable-line no-new - new ShortcutsWiki(); // eslint-disable-line no-new - new ZenMode(); // eslint-disable-line no-new - new GLForm($('.wiki-form')); // eslint-disable-line no-new - - const deleteWikiModalWrapperEl = document.getElementById('delete-wiki-modal-wrapper'); - - if (deleteWikiModalWrapperEl) { - Vue.use(Translate); - - const { deleteWikiUrl, pageTitle } = deleteWikiModalWrapperEl.dataset; - - // eslint-disable-next-line no-new - new Vue({ - el: deleteWikiModalWrapperEl, - data: { - deleteWikiUrl: '', - }, - render(createElement) { - return createElement(deleteWikiModal, { - props: { - pageTitle, - deleteWikiUrl, - csrfToken: csrf.token, - }, - }); - }, - }); - } -}); +document.addEventListener('DOMContentLoaded', initWikis); diff --git a/app/assets/javascripts/pages/projects/wikis/wikis.js b/app/assets/javascripts/pages/projects/wikis/wikis.js deleted file mode 100644 index ed67219383b..00000000000 --- a/app/assets/javascripts/pages/projects/wikis/wikis.js +++ /dev/null @@ -1,100 +0,0 @@ -import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; -import { s__, sprintf } from '~/locale'; - -const MARKDOWN_LINK_TEXT = { - markdown: '[Link Title](page-slug)', - rdoc: '{Link title}[link:page-slug]', - asciidoc: 'link:page-slug[Link title]', - org: '[[page-slug]]', -}; - -export default class Wikis { - constructor() { - this.sidebarEl = document.querySelector('.js-wiki-sidebar'); - this.sidebarExpanded = false; - - const sidebarToggles = document.querySelectorAll('.js-sidebar-wiki-toggle'); - for (let i = 0; i < sidebarToggles.length; i += 1) { - sidebarToggles[i].addEventListener('click', e => this.handleToggleSidebar(e)); - } - - this.isNewWikiPage = Boolean(document.querySelector('.js-new-wiki-page')); - this.editTitleInput = document.querySelector('form.wiki-form #wiki_title'); - this.commitMessageInput = document.querySelector('form.wiki-form #wiki_message'); - this.commitMessageI18n = this.isNewWikiPage - ? s__('WikiPageCreate|Create %{pageTitle}') - : s__('WikiPageEdit|Update %{pageTitle}'); - - if (this.editTitleInput) { - // Initialize the commit message on load - if (this.editTitleInput.value) this.setWikiCommitMessage(this.editTitleInput.value); - - // Set the commit message as the page title is changed - this.editTitleInput.addEventListener('keyup', e => this.handleWikiTitleChange(e)); - } - - window.addEventListener('resize', () => this.renderSidebar()); - this.renderSidebar(); - - const changeFormatSelect = document.querySelector('#wiki_format'); - const linkExample = document.querySelector('.js-markup-link-example'); - - if (changeFormatSelect) { - changeFormatSelect.addEventListener('change', e => { - linkExample.innerHTML = MARKDOWN_LINK_TEXT[e.target.value]; - }); - } - - const wikiTextarea = document.querySelector('form.wiki-form #wiki_content'); - const wikiForm = document.querySelector('form.wiki-form'); - - if (wikiTextarea) { - wikiTextarea.addEventListener('input', () => { - window.onbeforeunload = () => ''; - }); - - wikiForm.addEventListener('submit', () => { - window.onbeforeunload = null; - }); - } - } - - handleWikiTitleChange(e) { - this.setWikiCommitMessage(e.target.value); - } - - setWikiCommitMessage(rawTitle) { - let title = rawTitle; - - // Replace hyphens with spaces - if (title) title = title.replace(/-+/g, ' '); - - const newCommitMessage = sprintf(this.commitMessageI18n, { pageTitle: title }, false); - this.commitMessageInput.value = newCommitMessage; - } - - handleToggleSidebar(e) { - e.preventDefault(); - this.sidebarExpanded = !this.sidebarExpanded; - this.renderSidebar(); - } - - static sidebarCanCollapse() { - const bootstrapBreakpoint = bp.getBreakpointSize(); - return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm'; - } - - renderSidebar() { - if (!this.sidebarEl) return; - const { classList } = this.sidebarEl; - if (this.sidebarExpanded || !Wikis.sidebarCanCollapse()) { - if (!classList.contains('right-sidebar-expanded')) { - classList.remove('right-sidebar-collapsed'); - classList.add('right-sidebar-expanded'); - } - } else if (classList.contains('right-sidebar-expanded')) { - classList.add('right-sidebar-collapsed'); - classList.remove('right-sidebar-expanded'); - } - } -} |