diff options
Diffstat (limited to 'app/assets/javascripts/pages')
35 files changed, 202 insertions, 420 deletions
diff --git a/app/assets/javascripts/pages/admin/application_settings/index.js b/app/assets/javascripts/pages/admin/application_settings/index.js index 143d15f92cd..cce30e6b12a 100644 --- a/app/assets/javascripts/pages/admin/application_settings/index.js +++ b/app/assets/javascripts/pages/admin/application_settings/index.js @@ -1,7 +1,6 @@ import initSettingsPanels from '~/settings_panels'; import projectSelect from '~/project_select'; import selfMonitor from '~/self_monitor'; -import maintenanceModeSettings from '~/maintenance_mode_settings'; import initVariableList from '~/ci_variable_list'; document.addEventListener('DOMContentLoaded', () => { @@ -9,7 +8,6 @@ document.addEventListener('DOMContentLoaded', () => { initVariableList('js-instance-variables'); } selfMonitor(); - maintenanceModeSettings(); // Initialize expandable settings panels initSettingsPanels(); projectSelect(); diff --git a/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue b/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue index a08d32028c3..24c9fa4cb3f 100644 --- a/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue +++ b/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue @@ -1,14 +1,13 @@ <script> +import DeleteUserModal from './delete_user_modal.vue'; + export default { + components: { DeleteUserModal }, props: { modalConfiguration: { required: true, type: Object, }, - actionModals: { - required: true, - type: Object, - }, csrfToken: { required: true, type: String, @@ -21,10 +20,7 @@ export default { }, computed: { activeModal() { - if (!this.currentModalData) return null; - const { glModalAction: action } = this.currentModalData; - - return this.actionModals[action]; + return Boolean(this.currentModalData); }, modalProps() { @@ -56,9 +52,7 @@ export default { show(modalData) { const { glModalAction: requestedAction } = modalData; - if (!this.actionModals[requestedAction]) { - throw new Error(`Requested non-existing modal action ${requestedAction}`); - } + if (!this.modalConfiguration[requestedAction]) { throw new Error(`Modal action ${requestedAction} has no configuration in HTML`); } @@ -73,5 +67,5 @@ export default { }; </script> <template> - <div :is="activeModal" v-if="activeModal" ref="modal" v-bind="modalProps" /> + <delete-user-modal v-if="activeModal" ref="modal" v-bind="modalProps" /> </template> diff --git a/app/assets/javascripts/pages/admin/users/components/user_operation_confirmation_modal.vue b/app/assets/javascripts/pages/admin/users/components/user_operation_confirmation_modal.vue deleted file mode 100644 index 4ca6ce6f1c3..00000000000 --- a/app/assets/javascripts/pages/admin/users/components/user_operation_confirmation_modal.vue +++ /dev/null @@ -1,71 +0,0 @@ -<script> -/* eslint-disable vue/no-v-html */ -import { GlModal } from '@gitlab/ui'; -import { sprintf } from '~/locale'; - -export default { - components: { - GlModal, - }, - props: { - title: { - type: String, - required: true, - }, - content: { - type: String, - required: true, - }, - action: { - type: String, - required: true, - }, - url: { - type: String, - required: true, - }, - username: { - type: String, - required: true, - }, - csrfToken: { - type: String, - required: true, - }, - method: { - type: String, - required: false, - default: 'put', - }, - }, - computed: { - modalTitle() { - return sprintf(this.title, { username: this.username }); - }, - }, - methods: { - show() { - this.$refs.modal.show(); - }, - submit() { - this.$refs.form.submit(); - }, - }, -}; -</script> -<template> - <gl-modal - ref="modal" - modal-id="user-operation-modal" - :title="modalTitle" - ok-variant="warning" - :ok-title="action" - @ok="submit" - > - <form ref="form" :action="url" method="post"> - <span v-html="content"></span> - <input ref="method" type="hidden" name="_method" :value="method" /> - <input :value="csrfToken" type="hidden" name="authenticity_token" /> - </form> - </gl-modal> -</template> diff --git a/app/assets/javascripts/pages/admin/users/index.js b/app/assets/javascripts/pages/admin/users/index.js index 5f3cdc0bfc6..07462b4592f 100644 --- a/app/assets/javascripts/pages/admin/users/index.js +++ b/app/assets/javascripts/pages/admin/users/index.js @@ -2,18 +2,12 @@ import Vue from 'vue'; import Translate from '~/vue_shared/translate'; import ModalManager from './components/user_modal_manager.vue'; -import DeleteUserModal from './components/delete_user_modal.vue'; -import UserOperationConfirmationModal from './components/user_operation_confirmation_modal.vue'; import csrf from '~/lib/utils/csrf'; import initConfirmModal from '~/confirm_modal'; +import initAdminUsersApp from '~/admin/users'; -const MODAL_TEXTS_CONTAINER_SELECTOR = '#modal-texts'; -const MODAL_MANAGER_SELECTOR = '#user-modal'; -const ACTION_MODALS = { - deactivate: UserOperationConfirmationModal, - delete: DeleteUserModal, - 'delete-with-contributions': DeleteUserModal, -}; +const MODAL_TEXTS_CONTAINER_SELECTOR = '#js-modal-texts'; +const MODAL_MANAGER_SELECTOR = '#js-delete-user-modal'; function loadModalsConfigurationFromHtml(modalsElement) { const modalsConfiguration = {}; @@ -56,7 +50,6 @@ document.addEventListener('DOMContentLoaded', () => { ref: 'manager', props: { modalConfiguration, - actionModals: ACTION_MODALS, csrfToken: csrf.token, }, }); @@ -64,4 +57,5 @@ document.addEventListener('DOMContentLoaded', () => { }); initConfirmModal(); + initAdminUsersApp(); }); diff --git a/app/assets/javascripts/pages/groups/group_members/index.js b/app/assets/javascripts/pages/groups/group_members/index.js index 009a3eee526..d3900b84fa7 100644 --- a/app/assets/javascripts/pages/groups/group_members/index.js +++ b/app/assets/javascripts/pages/groups/group_members/index.js @@ -6,6 +6,7 @@ import groupsSelect from '~/groups_select'; import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue'; import { initGroupMembersApp } from '~/groups/members'; import { memberRequestFormatter, groupLinkRequestFormatter } from '~/groups/members/utils'; +import { s__ } from '~/locale'; function mountRemoveMemberModal() { const el = document.querySelector('.js-remove-member-modal'); @@ -22,30 +23,43 @@ function mountRemoveMemberModal() { } const SHARED_FIELDS = ['account', 'expires', 'maxRole', 'expiration', 'actions']; -initGroupMembersApp( - document.querySelector('.js-group-members-list'), - SHARED_FIELDS.concat(['source', 'granted']), - { tr: { 'data-qa-selector': 'member_row' } }, - memberRequestFormatter, -); -initGroupMembersApp( - document.querySelector('.js-group-linked-list'), - SHARED_FIELDS.concat('granted'), - { table: { 'data-qa-selector': 'groups_list' }, tr: { 'data-qa-selector': 'group_row' } }, - groupLinkRequestFormatter, -); -initGroupMembersApp( - document.querySelector('.js-group-invited-members-list'), - SHARED_FIELDS.concat('invited'), - {}, - memberRequestFormatter, -); -initGroupMembersApp( - document.querySelector('.js-group-access-requests-list'), - SHARED_FIELDS.concat('requested'), - {}, - memberRequestFormatter, -); + +initGroupMembersApp(document.querySelector('.js-group-members-list'), { + tableFields: SHARED_FIELDS.concat(['source', 'granted']), + tableAttrs: { tr: { 'data-qa-selector': 'member_row' } }, + tableSortableFields: ['account', 'granted', 'maxRole', 'lastSignIn'], + requestFormatter: memberRequestFormatter, + filteredSearchBar: { + show: true, + tokens: ['two_factor', 'with_inherited_permissions'], + searchParam: 'search', + placeholder: s__('Members|Filter members'), + recentSearchesStorageKey: 'group_members', + }, +}); +initGroupMembersApp(document.querySelector('.js-group-linked-list'), { + tableFields: SHARED_FIELDS.concat('granted'), + tableAttrs: { + table: { 'data-qa-selector': 'groups_list' }, + tr: { 'data-qa-selector': 'group_row' }, + }, + requestFormatter: groupLinkRequestFormatter, +}); +initGroupMembersApp(document.querySelector('.js-group-invited-members-list'), { + tableFields: SHARED_FIELDS.concat('invited'), + requestFormatter: memberRequestFormatter, + filteredSearchBar: { + show: true, + tokens: [], + searchParam: 'search_invited', + placeholder: s__('Members|Search invited'), + recentSearchesStorageKey: 'group_invited_members', + }, +}); +initGroupMembersApp(document.querySelector('.js-group-access-requests-list'), { + tableFields: SHARED_FIELDS.concat('requested'), + requestFormatter: memberRequestFormatter, +}); groupsSelect(); memberExpirationDate(); diff --git a/app/assets/javascripts/pages/import/bitbucket/status/index.js b/app/assets/javascripts/pages/import/bitbucket/status/index.js index 2a5432ce09d..f450a2aac00 100644 --- a/app/assets/javascripts/pages/import/bitbucket/status/index.js +++ b/app/assets/javascripts/pages/import/bitbucket/status/index.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -import { initStoreFromElement, initPropsFromElement } from '~/import_projects'; -import BitbucketStatusTable from '~/import_projects/components/bitbucket_status_table.vue'; +import { initStoreFromElement, initPropsFromElement } from '~/import_entities/import_projects'; +import BitbucketStatusTable from '~/import_entities/import_projects/components/bitbucket_status_table.vue'; document.addEventListener('DOMContentLoaded', () => { const mountElement = document.getElementById('import-projects-mount-element'); diff --git a/app/assets/javascripts/pages/import/bitbucket_server/status/components/bitbucket_server_status_table.vue b/app/assets/javascripts/pages/import/bitbucket_server/status/components/bitbucket_server_status_table.vue index 35ae9d8419f..f0c4ecbe3eb 100644 --- a/app/assets/javascripts/pages/import/bitbucket_server/status/components/bitbucket_server_status_table.vue +++ b/app/assets/javascripts/pages/import/bitbucket_server/status/components/bitbucket_server_status_table.vue @@ -1,6 +1,6 @@ <script> import { GlButton } from '@gitlab/ui'; -import BitbucketStatusTable from '~/import_projects/components/bitbucket_status_table.vue'; +import BitbucketStatusTable from '~/import_entities/import_projects/components/bitbucket_status_table.vue'; export default { components: { diff --git a/app/assets/javascripts/pages/import/bitbucket_server/status/index.js b/app/assets/javascripts/pages/import/bitbucket_server/status/index.js index a44fc4e6b29..a6d748ce857 100644 --- a/app/assets/javascripts/pages/import/bitbucket_server/status/index.js +++ b/app/assets/javascripts/pages/import/bitbucket_server/status/index.js @@ -1,5 +1,5 @@ import Vue from 'vue'; -import { initStoreFromElement, initPropsFromElement } from '~/import_projects'; +import { initStoreFromElement, initPropsFromElement } from '~/import_entities/import_projects'; import BitbucketServerStatusTable from './components/bitbucket_server_status_table.vue'; document.addEventListener('DOMContentLoaded', () => { diff --git a/app/assets/javascripts/pages/import/bulk_imports/index.js b/app/assets/javascripts/pages/import/bulk_imports/index.js new file mode 100644 index 00000000000..37ac1a98466 --- /dev/null +++ b/app/assets/javascripts/pages/import/bulk_imports/index.js @@ -0,0 +1,4 @@ +import { mountImportGroupsApp } from '~/import_entities/import_groups'; + +const mountElement = document.getElementById('import-groups-mount-element'); +mountImportGroupsApp(mountElement); diff --git a/app/assets/javascripts/pages/import/fogbugz/status/index.js b/app/assets/javascripts/pages/import/fogbugz/status/index.js index dcd84f0faf9..98ddb8b3aa4 100644 --- a/app/assets/javascripts/pages/import/fogbugz/status/index.js +++ b/app/assets/javascripts/pages/import/fogbugz/status/index.js @@ -1,4 +1,4 @@ -import mountImportProjectsTable from '~/import_projects'; +import mountImportProjectsTable from '~/import_entities/import_projects'; document.addEventListener('DOMContentLoaded', () => { const mountElement = document.getElementById('import-projects-mount-element'); diff --git a/app/assets/javascripts/pages/import/gitea/status/index.js b/app/assets/javascripts/pages/import/gitea/status/index.js index dcd84f0faf9..98ddb8b3aa4 100644 --- a/app/assets/javascripts/pages/import/gitea/status/index.js +++ b/app/assets/javascripts/pages/import/gitea/status/index.js @@ -1,4 +1,4 @@ -import mountImportProjectsTable from '~/import_projects'; +import mountImportProjectsTable from '~/import_entities/import_projects'; document.addEventListener('DOMContentLoaded', () => { const mountElement = document.getElementById('import-projects-mount-element'); diff --git a/app/assets/javascripts/pages/import/github/status/index.js b/app/assets/javascripts/pages/import/github/status/index.js index dcd84f0faf9..98ddb8b3aa4 100644 --- a/app/assets/javascripts/pages/import/github/status/index.js +++ b/app/assets/javascripts/pages/import/github/status/index.js @@ -1,4 +1,4 @@ -import mountImportProjectsTable from '~/import_projects'; +import mountImportProjectsTable from '~/import_entities/import_projects'; document.addEventListener('DOMContentLoaded', () => { const mountElement = document.getElementById('import-projects-mount-element'); diff --git a/app/assets/javascripts/pages/import/gitlab/status/index.js b/app/assets/javascripts/pages/import/gitlab/status/index.js index dcd84f0faf9..98ddb8b3aa4 100644 --- a/app/assets/javascripts/pages/import/gitlab/status/index.js +++ b/app/assets/javascripts/pages/import/gitlab/status/index.js @@ -1,4 +1,4 @@ -import mountImportProjectsTable from '~/import_projects'; +import mountImportProjectsTable from '~/import_entities/import_projects'; document.addEventListener('DOMContentLoaded', () => { const mountElement = document.getElementById('import-projects-mount-element'); diff --git a/app/assets/javascripts/pages/import/manifest/status/index.js b/app/assets/javascripts/pages/import/manifest/status/index.js index dcd84f0faf9..98ddb8b3aa4 100644 --- a/app/assets/javascripts/pages/import/manifest/status/index.js +++ b/app/assets/javascripts/pages/import/manifest/status/index.js @@ -1,4 +1,4 @@ -import mountImportProjectsTable from '~/import_projects'; +import mountImportProjectsTable from '~/import_entities/import_projects'; document.addEventListener('DOMContentLoaded', () => { const mountElement = document.getElementById('import-projects-mount-element'); diff --git a/app/assets/javascripts/pages/profiles/accounts/show/index.js b/app/assets/javascripts/pages/profiles/accounts/show/index.js index 96c3d725780..6c1e953aa83 100644 --- a/app/assets/javascripts/pages/profiles/accounts/show/index.js +++ b/app/assets/javascripts/pages/profiles/accounts/show/index.js @@ -1,3 +1,6 @@ import initProfileAccount from '~/profile/account'; +import { initClose2faSuccessMessage } from '~/authentication/two_factor_auth'; document.addEventListener('DOMContentLoaded', initProfileAccount); + +initClose2faSuccessMessage(); diff --git a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js index 1aeba6669ee..24dbc312dd2 100644 --- a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js +++ b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js @@ -1,9 +1,10 @@ import { parseBoolean } from '~/lib/utils/common_utils'; import { mount2faRegistration } from '~/authentication/mount_2fa'; +import { initRecoveryCodes } from '~/authentication/two_factor_auth'; document.addEventListener('DOMContentLoaded', () => { const twoFactorNode = document.querySelector('.js-two-factor-auth'); - const skippable = parseBoolean(twoFactorNode.dataset.twoFactorSkippable); + const skippable = twoFactorNode ? parseBoolean(twoFactorNode.dataset.twoFactorSkippable) : false; if (skippable) { const button = `<a class="btn btn-sm btn-warning float-right" data-qa-selector="configure_it_later_button" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`; @@ -13,3 +14,5 @@ document.addEventListener('DOMContentLoaded', () => { mount2faRegistration(); }); + +initRecoveryCodes(); diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js index 1879e263ce7..a96b88732b4 100644 --- a/app/assets/javascripts/pages/projects/blob/show/index.js +++ b/app/assets/javascripts/pages/projects/blob/show/index.js @@ -6,30 +6,6 @@ import GpgBadges from '~/gpg_badges'; import initWebIdeLink from '~/pages/projects/shared/web_ide_link'; import '~/sourcegraph/load'; import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue'; -import { parseBoolean } from '~/lib/utils/common_utils'; - -const createGitlabCiYmlVisualization = (containerId = '#js-blob-toggle-graph-preview') => { - const el = document.querySelector(containerId); - const { isCiConfigFile, blobData } = el?.dataset; - - if (el && parseBoolean(isCiConfigFile)) { - // 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 @@ -73,25 +49,19 @@ document.addEventListener('DOMContentLoaded', () => { ); } - if (gon.features?.suggestPipeline) { - const successPipelineEl = document.querySelector('.js-success-pipeline-modal'); - - if (successPipelineEl) { - // eslint-disable-next-line no-new - new Vue({ - el: successPipelineEl, - render(createElement) { - return createElement(PipelineTourSuccessModal, { - props: { - ...successPipelineEl.dataset, - }, - }); - }, - }); - } - } + const successPipelineEl = document.querySelector('.js-success-pipeline-modal'); - if (gon?.features?.gitlabCiYmlPreview) { - createGitlabCiYmlVisualization(); + if (successPipelineEl) { + // eslint-disable-next-line no-new + new Vue({ + el: successPipelineEl, + render(createElement) { + return createElement(PipelineTourSuccessModal, { + props: { + ...successPipelineEl.dataset, + }, + }); + }, + }); } }); diff --git a/app/assets/javascripts/pages/projects/commit/pipelines/index.js b/app/assets/javascripts/pages/projects/commit/pipelines/index.js index 26dea17ca8a..eaf340f2725 100644 --- a/app/assets/javascripts/pages/projects/commit/pipelines/index.js +++ b/app/assets/javascripts/pages/projects/commit/pipelines/index.js @@ -1,8 +1,5 @@ import { initCommitBoxInfo } from '~/projects/commit_box/info'; import initPipelines from '~/commit/pipelines/pipelines_bundle'; -document.addEventListener('DOMContentLoaded', () => { - initCommitBoxInfo(); - - initPipelines(); -}); +initCommitBoxInfo(); +initPipelines(); diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js index e0bd49bf6ef..0750f472341 100644 --- a/app/assets/javascripts/pages/projects/commit/show/index.js +++ b/app/assets/javascripts/pages/projects/commit/show/index.js @@ -15,35 +15,33 @@ import { __ } from '~/locale'; import loadAwardsHandler from '~/awards_handler'; import { initCommitBoxInfo } from '~/projects/commit_box/info'; -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(); +const hasPerfBar = document.querySelector('.with-performance-bar'); +const performanceHeight = hasPerfBar ? 35 : 0; +initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight + performanceHeight); +new ZenMode(); +new ShortcutsNavigation(); - initCommitBoxInfo(); +initCommitBoxInfo(); - initNotes(); +initNotes(); - const filesContainer = $('.js-diffs-batch'); +const filesContainer = $('.js-diffs-batch'); - if (filesContainer.length) { - const batchPath = filesContainer.data('diffFilesPath'); +if (filesContainer.length) { + const batchPath = filesContainer.data('diffFilesPath'); - axios - .get(batchPath) - .then(({ data }) => { - filesContainer.html($(data.html)); - syntaxHighlight(filesContainer); - handleLocationHash(); - new Diff(); - }) - .catch(() => { - flash({ message: __('An error occurred while retrieving diff files') }); - }); - } else { - new Diff(); - } - loadAwardsHandler(); -}); + axios + .get(batchPath) + .then(({ data }) => { + filesContainer.html($(data.html)); + syntaxHighlight(filesContainer); + handleLocationHash(); + new Diff(); + }) + .catch(() => { + flash({ message: __('An error occurred while retrieving diff files') }); + }); +} else { + new Diff(); +} +loadAwardsHandler(); diff --git a/app/assets/javascripts/pages/projects/commits/show/index.js b/app/assets/javascripts/pages/projects/commits/show/index.js index b456baac612..6239e4c99d2 100644 --- a/app/assets/javascripts/pages/projects/commits/show/index.js +++ b/app/assets/javascripts/pages/projects/commits/show/index.js @@ -1,12 +1,9 @@ import CommitsList from '~/commits'; import GpgBadges from '~/gpg_badges'; import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; - import mountCommits from '~/projects/commits'; -document.addEventListener('DOMContentLoaded', () => { - new CommitsList(document.querySelector('.js-project-commits-show').dataset.commitsLimit); // eslint-disable-line no-new - new ShortcutsNavigation(); // eslint-disable-line no-new - GpgBadges.fetch(); - mountCommits(document.getElementById('js-author-dropdown')); -}); +new CommitsList(document.querySelector('.js-project-commits-show').dataset.commitsLimit); // eslint-disable-line no-new +new ShortcutsNavigation(); // eslint-disable-line no-new +GpgBadges.fetch(); +mountCommits(document.getElementById('js-author-dropdown')); diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue index 11ece478d36..6c0d20c55e9 100644 --- a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue +++ b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue @@ -85,6 +85,7 @@ export default { v-model="filter" :placeholder="$options.i18n.searchPlaceholder" class="gl-align-self-center gl-ml-auto fork-filtered-search" + data-qa-selector="fork_groups_list_search_field" /> </template> </gl-tabs> diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js index 4b15e435f60..614f8262e5b 100644 --- a/app/assets/javascripts/pages/projects/issues/show.js +++ b/app/assets/javascripts/pages/projects/issues/show.js @@ -17,7 +17,8 @@ import initInviteMemberModal from '~/invite_member/init_invite_member_modal'; import { IssuableType } from '~/issuable_show/constants'; export default function() { - const { issueType, ...issuableData } = parseIssuableData(); + const initialDataEl = document.getElementById('js-issuable-app'); + const { issueType, ...issuableData } = parseIssuableData(initialDataEl); switch (issueType) { case IssuableType.Incident: diff --git a/app/assets/javascripts/pages/projects/jobs/index/index.js b/app/assets/javascripts/pages/projects/jobs/index/index.js index 1b57c67f16b..ae04d070e62 100644 --- a/app/assets/javascripts/pages/projects/jobs/index/index.js +++ b/app/assets/javascripts/pages/projects/jobs/index/index.js @@ -1,5 +1,6 @@ import Vue from 'vue'; import GlCountdown from '~/vue_shared/components/gl_countdown.vue'; +import Tracking from '~/tracking'; document.addEventListener('DOMContentLoaded', () => { const remainingTimeElements = document.querySelectorAll('.js-remaining-time'); @@ -13,4 +14,13 @@ document.addEventListener('DOMContentLoaded', () => { }, }), ); + + const trackButtonClick = () => { + if (gon.tracking_data) { + const { category, action, ...data } = gon.tracking_data; + Tracking.event(category, action, data); + } + }; + const buttons = document.querySelectorAll('.js-empty-state-button'); + buttons.forEach(button => button.addEventListener('click', trackButtonClick)); }); 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 868e001b182..0714fc21b17 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 @@ -2,7 +2,6 @@ import ZenMode from '~/zen_mode'; import initIssuableSidebar from '~/init_issuable_sidebar'; import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable'; import { handleLocationHash } from '~/lib/utils/common_utils'; -import howToMerge from '~/how_to_merge'; import initPipelines from '~/commit/pipelines/pipelines_bundle'; import initSourcegraph from '~/sourcegraph'; import loadAwardsHandler from '~/awards_handler'; @@ -15,7 +14,6 @@ export default function() { initPipelines(); new ShortcutsIssuable(true); // eslint-disable-line no-new handleLocationHash(); - howToMerge(); initSourcegraph(); loadAwardsHandler(); initInviteMemberModal(); diff --git a/app/assets/javascripts/pages/projects/new/index.js b/app/assets/javascripts/pages/projects/new/index.js index 477a1ab887b..19aeb1d1ecf 100644 --- a/app/assets/javascripts/pages/projects/new/index.js +++ b/app/assets/javascripts/pages/projects/new/index.js @@ -2,46 +2,28 @@ import initProjectVisibilitySelector from '../../../project_visibility'; import initProjectNew from '../../../projects/project_new'; import { __ } from '~/locale'; import { deprecatedCreateFlash as createFlash } from '~/flash'; -import Tracking from '~/tracking'; -import { isExperimentEnabled } from '~/lib/utils/experimentation'; document.addEventListener('DOMContentLoaded', () => { initProjectVisibilitySelector(); initProjectNew.bindEvents(); - const { category, property } = gon.tracking_data ?? { category: 'projects:new' }; - const hasNewCreateProjectUi = isExperimentEnabled('newCreateProjectUi'); + import( + /* webpackChunkName: 'experiment_new_project_creation' */ '../../../projects/experiment_new_project_creation' + ) + .then(m => { + const el = document.querySelector('.js-experiment-new-project-creation'); - if (!hasNewCreateProjectUi) { - // Setting additional tracking for HAML template + if (!el) { + return; + } - 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')); - }); - } + 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 bed9a751d4c..63b1f2bf975 100644 --- a/app/assets/javascripts/pages/projects/pipelines/index/index.js +++ b/app/assets/javascripts/pages/projects/pipelines/index/index.js @@ -1,60 +1,3 @@ -import Vue from 'vue'; -import { GlToast } from '@gitlab/ui'; -import { doesHashExistInUrl } from '~/lib/utils/url_utility'; -import { - parseBoolean, - historyReplaceState, - buildUrlWithCurrentLocation, -} from '~/lib/utils/common_utils'; -import { __ } from '~/locale'; -import PipelinesStore from '../../../../pipelines/stores/pipelines_store'; -import pipelinesComponent from '../../../../pipelines/components/pipelines_list/pipelines.vue'; -import Translate from '../../../../vue_shared/translate'; +import { initPipelinesIndex } from '~/pipelines/pipelines_index'; -Vue.use(Translate); -Vue.use(GlToast); - -document.addEventListener( - 'DOMContentLoaded', - () => - new Vue({ - el: '#pipelines-list-vue', - components: { - pipelinesComponent, - }, - data() { - return { - store: new PipelinesStore(), - }; - }, - created() { - this.dataset = document.querySelector(this.$options.el).dataset; - - if (doesHashExistInUrl('delete_success')) { - this.$toast.show(__('The pipeline has been deleted')); - historyReplaceState(buildUrlWithCurrentLocation()); - } - }, - render(createElement) { - return createElement('pipelines-component', { - props: { - store: this.store, - endpoint: this.dataset.endpoint, - pipelineScheduleUrl: this.dataset.pipelineScheduleUrl, - helpPagePath: this.dataset.helpPagePath, - emptyStateSvgPath: this.dataset.emptyStateSvgPath, - errorStateSvgPath: this.dataset.errorStateSvgPath, - noPipelinesSvgPath: this.dataset.noPipelinesSvgPath, - autoDevopsPath: this.dataset.helpAutoDevopsPath, - newPipelinePath: this.dataset.newPipelinePath, - canCreatePipeline: parseBoolean(this.dataset.canCreatePipeline), - hasGitlabCi: parseBoolean(this.dataset.hasGitlabCi), - ciLintPath: this.dataset.ciLintPath, - resetCachePath: this.dataset.resetCachePath, - projectId: this.dataset.projectId, - params: JSON.parse(this.dataset.params), - }, - }); - }, - }), -); +initPipelinesIndex(); diff --git a/app/assets/javascripts/pages/projects/project.js b/app/assets/javascripts/pages/projects/project.js index 5317093c4cf..8c7aa04a0b6 100644 --- a/app/assets/javascripts/pages/projects/project.js +++ b/app/assets/javascripts/pages/projects/project.js @@ -9,47 +9,11 @@ import axios from '~/lib/utils/axios_utils'; import { deprecatedCreateFlash as flash } from '~/flash'; import projectSelect from '../../project_select'; import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; +import initClonePanel from '~/clone_panel'; export default class Project { constructor() { - const $cloneOptions = $('ul.clone-options-dropdown'); - 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); - }); - - if (mobileCloneField) { - mobileCloneField.dataset.clipboardText = url; - } else { - $projectCloneField.val(url); - } - $('.js-git-empty .js-clone').text(url); - }); - } + initClonePanel(); // Ref switcher if (document.querySelector('.js-project-refs-dropdown')) { diff --git a/app/assets/javascripts/pages/projects/settings/access_tokens/index.js b/app/assets/javascripts/pages/projects/settings/access_tokens/index.js index ae2209b0292..22dddb72f98 100644 --- a/app/assets/javascripts/pages/projects/settings/access_tokens/index.js +++ b/app/assets/javascripts/pages/projects/settings/access_tokens/index.js @@ -1,3 +1,3 @@ import initExpiresAtField from '~/access_tokens'; -document.addEventListener('DOMContentLoaded', initExpiresAtField); +initExpiresAtField(); diff --git a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js index d18cde4ac87..83bec0092cb 100644 --- a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js +++ b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js @@ -4,6 +4,7 @@ import registrySettingsApp from '~/registry/settings/registry_settings_bundle'; import initVariableList from '~/ci_variable_list'; import initDeployFreeze from '~/deploy_freeze'; import initSettingsPipelinesTriggers from '~/ci_settings_pipeline_triggers'; +import initSharedRunnersToggle from '~/projects/settings/mount_shared_runners_toggle'; document.addEventListener('DOMContentLoaded', () => { // Initialize expandable settings panels @@ -32,4 +33,8 @@ document.addEventListener('DOMContentLoaded', () => { initDeployFreeze(); initSettingsPipelinesTriggers(); + + if (gon?.features?.vueifySharedRunnersToggle) { + initSharedRunnersToggle(); + } }); diff --git a/app/assets/javascripts/pages/projects/settings/repository/create_deploy_token/index.js b/app/assets/javascripts/pages/projects/settings/repository/create_deploy_token/index.js index ffc84dc106b..1dc238b56b4 100644 --- a/app/assets/javascripts/pages/projects/settings/repository/create_deploy_token/index.js +++ b/app/assets/javascripts/pages/projects/settings/repository/create_deploy_token/index.js @@ -1,3 +1,3 @@ import initForm from '../form'; -document.addEventListener('DOMContentLoaded', initForm); +initForm(); diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue index 0f145dbc170..242c58c4981 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue +++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue @@ -94,11 +94,7 @@ export default { {{ optionName }} </option> </select> - <gl-icon - name="chevron-down" - aria-hidden="true" - class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" - /> + <gl-icon name="chevron-down" class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" /> </div> </div> </template> 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 e50add3b0a4..be197a50775 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 @@ -14,6 +14,7 @@ import { featureAccessLevel, } from '../constants'; import { toggleHiddenClassBySelector } from '../external'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; const PAGE_FEATURE_ACCESS_LEVEL = s__('ProjectSettings|Everyone'); @@ -27,7 +28,7 @@ export default { GlLink, GlFormCheckbox, }, - mixins: [settingsMixin], + mixins: [settingsMixin, glFeatureFlagsMixin()], props: { currentSettings: { @@ -137,6 +138,7 @@ export default { snippetsAccessLevel: featureAccessLevel.EVERYONE, pagesAccessLevel: featureAccessLevel.EVERYONE, metricsDashboardAccessLevel: featureAccessLevel.PROJECT_MEMBERS, + analyticsAccessLevel: featureAccessLevel.EVERYONE, requirementsAccessLevel: featureAccessLevel.EVERYONE, containerRegistryEnabled: true, lfsEnabled: true, @@ -240,6 +242,10 @@ export default { featureAccessLevel.PROJECT_MEMBERS, this.metricsDashboardAccessLevel, ); + this.analyticsAccessLevel = Math.min( + featureAccessLevel.PROJECT_MEMBERS, + this.analyticsAccessLevel, + ); this.requirementsAccessLevel = Math.min( featureAccessLevel.PROJECT_MEMBERS, this.requirementsAccessLevel, @@ -265,6 +271,8 @@ export default { this.snippetsAccessLevel = featureAccessLevel.EVERYONE; if (this.pagesAccessLevel === featureAccessLevel.PROJECT_MEMBERS) this.pagesAccessLevel = featureAccessLevel.EVERYONE; + if (this.analyticsAccessLevel > featureAccessLevel.NOT_ENABLED) + this.analyticsAccessLevel = featureAccessLevel.EVERYONE; if (this.metricsDashboardAccessLevel === featureAccessLevel.PROJECT_MEMBERS) this.metricsDashboardAccessLevel = featureAccessLevel.EVERYONE; if (this.requirementsAccessLevel === featureAccessLevel.PROJECT_MEMBERS) @@ -341,7 +349,6 @@ export default { </select> <gl-icon name="chevron-down" - aria-hidden="true" data-hidden="true" class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" /> @@ -495,6 +502,17 @@ export default { </project-setting-row> </div> <project-setting-row + ref="analytics-settings" + :label="s__('ProjectSettings|Analytics')" + :help-text="s__('ProjectSettings|View project analytics')" + > + <project-feature-setting + v-model="analyticsAccessLevel" + :options="featureAccessLevelOptions" + name="project[project_feature_attributes][analytics_access_level]" + /> + </project-setting-row> + <project-setting-row v-if="requirementsAvailable" ref="requirements-settings" :label="s__('ProjectSettings|Requirements')" @@ -573,7 +591,6 @@ export default { </select> <gl-icon name="chevron-down" - aria-hidden="true" data-hidden="true" class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" /> @@ -611,5 +628,24 @@ export default { }}</template> </gl-form-checkbox> </project-setting-row> + <project-setting-row + v-if="glFeatures.allowEditingCommitMessages" + ref="allow-editing-commit-messages" + class="gl-mb-4" + > + <input + :value="allowEditingCommitMessages" + type="hidden" + name="project[project_setting_attributes][allow_editing_commit_messages]" + /> + <gl-form-checkbox v-model="allowEditingCommitMessages"> + {{ s__('ProjectSettings|Allow editing commit messages') }} + <template #help>{{ + s__( + 'ProjectSettings|When enabled, commit authors will be able to edit commit messages on unprotected branches.', + ) + }}</template> + </gl-form-checkbox> + </project-setting-row> </div> </template> diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js index 413b2d01621..cc676b98e49 100644 --- a/app/assets/javascripts/pages/projects/show/index.js +++ b/app/assets/javascripts/pages/projects/show/index.js @@ -1,5 +1,5 @@ import initTree from 'ee_else_ce/repository'; -import initBlob from '~/blob_edit/blob_bundle'; +import { initUploadForm } from '~/blob_edit/blob_bundle'; import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; import NotificationsForm from '~/notifications_form'; import UserCallout from '~/user_callout'; @@ -26,7 +26,7 @@ new UserCallout({ // Project show page loads different overview content based on user preferences const treeSlider = document.getElementById('js-tree-list'); if (treeSlider) { - initBlob(); + initUploadForm(); initTree(); } diff --git a/app/assets/javascripts/pages/search/show/index.js b/app/assets/javascripts/pages/search/show/index.js index 88f2f30aad9..b6171e08e01 100644 --- a/app/assets/javascripts/pages/search/show/index.js +++ b/app/assets/javascripts/pages/search/show/index.js @@ -2,6 +2,6 @@ import Search from './search'; import { initSearchApp } from '~/search'; document.addEventListener('DOMContentLoaded', () => { - initSearchApp(); - return new Search(); // Deprecated Dropdown (Projects) + initSearchApp(); // Vue Bootstrap + return new Search(); // Legacy Search Methods }); diff --git a/app/assets/javascripts/pages/search/show/search.js b/app/assets/javascripts/pages/search/show/search.js index 03675f1ce66..b411b637f36 100644 --- a/app/assets/javascripts/pages/search/show/search.js +++ b/app/assets/javascripts/pages/search/show/search.js @@ -1,57 +1,18 @@ import $ from 'jquery'; import setHighlightClass from 'ee_else_ce/search/highlight_blob_search_result'; -import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; -import { deprecatedCreateFlash as Flash } from '~/flash'; -import Api from '~/api'; -import { __ } from '~/locale'; import Project from '~/pages/projects/project'; -import { visitUrl, queryToObject } from '~/lib/utils/url_utility'; +import { visitUrl } from '~/lib/utils/url_utility'; import refreshCounts from './refresh_counts'; export default class Search { constructor() { - setHighlightClass(); // Code Highlighting - const $projectDropdown = $('.js-search-project-dropdown'); - this.searchInput = '.js-search-input'; this.searchClear = '.js-search-clear'; - const query = queryToObject(window.location.search); - this.groupId = query?.group_id; - this.eventListeners(); - refreshCounts(); - - initDeprecatedJQueryDropdown($projectDropdown, { - selectable: true, - filterable: true, - filterRemote: true, - fieldName: 'project_id', - search: { - fields: ['name'], - }, - data: (term, callback) => { - this.getProjectsData(term) - .then(data => { - data.unshift({ - name_with_namespace: __('Any'), - }); - data.splice(1, 0, { type: 'divider' }); - - return data; - }) - .then(data => callback(data)) - .catch(() => new Flash(__('Error fetching projects'))); - }, - id(obj) { - return obj.id; - }, - text(obj) { - return obj.name_with_namespace; - }, - clicked: () => Search.submitSearch(), - }); - - Project.initRefSwitcher(); + setHighlightClass(); // Code Highlighting + this.eventListeners(); // Search Form Actions + refreshCounts(); // Other Scope Tab Counts + Project.initRefSwitcher(); // Code Search Branch Picker } eventListeners() { @@ -97,20 +58,4 @@ export default class Search { visitUrl($target.href); ev.stopPropagation(); } - - getProjectsData(term) { - return new Promise(resolve => { - if (this.groupId) { - Api.groupProjects(this.groupId, term, {}, resolve); - } else { - Api.projects( - term, - { - order_by: 'id', - }, - resolve, - ); - } - }); - } } |