diff options
Diffstat (limited to 'app/assets/javascripts/pages')
63 files changed, 415 insertions, 497 deletions
diff --git a/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue b/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue index 9850113d4be..c2510a16d2f 100644 --- a/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue +++ b/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue @@ -11,7 +11,7 @@ import { } from '@gitlab/ui'; import { toSafeInteger } from 'lodash'; import csrf from '~/lib/utils/csrf'; -import { __, s__, sprintf } from '~/locale'; +import { __, n__, s__, sprintf } from '~/locale'; import SignupCheckbox from './signup_checkbox.vue'; const DENYLIST_TYPE_RAW = 'raw'; @@ -51,6 +51,7 @@ export default { 'supportedSyntaxLinkUrl', 'emailRestrictions', 'afterSignUpText', + 'pendingUserCount', ], data() { return { @@ -105,8 +106,9 @@ export default { canUsersBeAccidentallyApproved() { const hasUserCapBeenToggledOff = this.requireAdminApprovalAfterUserSignup && !this.form.requireAdminApproval; + const currentlyPendingUsers = this.pendingUserCount > 0; - return this.hasUserCapBeenIncreased || hasUserCapBeenToggledOff; + return (this.hasUserCapBeenIncreased || hasUserCapBeenToggledOff) && currentlyPendingUsers; }, signupEnabledHelpText() { const text = sprintf( @@ -132,13 +134,39 @@ export default { return text; }, + approveUsersModal() { + const { pendingUserCount } = this; + + return { + id: 'signup-settings-modal', + text: n__( + 'ApplicationSettings|By making this change, you will automatically approve %d user with the pending approval status.', + 'ApplicationSettings|By making this change, you will automatically approve %d users with the pending approval status.', + pendingUserCount, + ), + actionPrimary: { + text: n__( + 'ApplicationSettings|Approve %d user', + 'ApplicationSettings|Approve %d users', + pendingUserCount, + ), + attributes: { + variant: 'confirm', + }, + }, + actionCancel: { + text: __('Cancel'), + }, + title: s__('ApplicationSettings|Approve users in the pending approval status?'), + }; + }, }, watch: { showModal(value) { if (value === true) { - this.$refs[this.$options.modal.id].show(); + this.$refs[this.approveUsersModal.id].show(); } else { - this.$refs[this.$options.modal.id].hide(); + this.$refs[this.approveUsersModal.id].hide(); } }, }, @@ -196,22 +224,6 @@ export default { afterSignUpTextGroupLabel: s__('ApplicationSettings|After sign up text'), afterSignUpTextGroupDescription: s__('ApplicationSettings|Markdown enabled'), }, - modal: { - id: 'signup-settings-modal', - actionPrimary: { - text: s__('ApplicationSettings|Approve users'), - attributes: { - variant: 'confirm', - }, - }, - actionCancel: { - text: __('Cancel'), - }, - title: s__('ApplicationSettings|Approve all users in the pending approval status?'), - text: s__( - 'ApplicationSettings|By making this change, you will automatically approve all users in pending approval status.', - ), - }, }; </script> @@ -403,15 +415,15 @@ export default { </gl-button> <gl-modal - :ref="$options.modal.id" - :modal-id="$options.modal.id" - :action-cancel="$options.modal.actionCancel" - :action-primary="$options.modal.actionPrimary" - :title="$options.modal.title" + :ref="approveUsersModal.id" + :modal-id="approveUsersModal.id" + :action-cancel="approveUsersModal.actionCancel" + :action-primary="approveUsersModal.actionPrimary" + :title="approveUsersModal.title" @primary="submitForm" @hide="modalHideHandler" > - {{ $options.modal.text }} + {{ approveUsersModal.text }} </gl-modal> </form> </template> diff --git a/app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/usage_statistics.js b/app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/usage_statistics.js index bf27b1a81ff..4c312a008cb 100644 --- a/app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/usage_statistics.js +++ b/app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/usage_statistics.js @@ -8,34 +8,34 @@ export const HELPER_TEXT_SERVICE_PING_ENABLED = __( 'You can enable Registration Features because Service Ping is enabled. To continue using Registration Features in the future, you will also need to register with GitLab via a new cloud licensing service.', ); -function setHelperText(usagePingCheckbox) { +function setHelperText(servicePingCheckbox) { const helperTextId = document.getElementById('service_ping_features_helper_text'); - const usagePingFeaturesLabel = document.getElementById('service_ping_features_label'); + const servicePingFeaturesLabel = document.getElementById('service_ping_features_label'); - const usagePingFeaturesCheckbox = document.getElementById( + const servicePingFeaturesCheckbox = document.getElementById( 'application_setting_usage_ping_features_enabled', ); - helperTextId.textContent = usagePingCheckbox.checked + helperTextId.textContent = servicePingCheckbox.checked ? HELPER_TEXT_SERVICE_PING_ENABLED : HELPER_TEXT_SERVICE_PING_DISABLED; - usagePingFeaturesLabel.classList.toggle('gl-cursor-not-allowed', !usagePingCheckbox.checked); + servicePingFeaturesLabel.classList.toggle('gl-cursor-not-allowed', !servicePingCheckbox.checked); - usagePingFeaturesCheckbox.disabled = !usagePingCheckbox.checked; + servicePingFeaturesCheckbox.disabled = !servicePingCheckbox.checked; - if (!usagePingCheckbox.checked) { - usagePingFeaturesCheckbox.disabled = true; - usagePingFeaturesCheckbox.checked = false; + if (!servicePingCheckbox.checked) { + servicePingFeaturesCheckbox.disabled = true; + servicePingFeaturesCheckbox.checked = false; } } export default function initSetHelperText() { - const usagePingCheckbox = document.getElementById('application_setting_usage_ping_enabled'); + const servicePingCheckbox = document.getElementById('application_setting_usage_ping_enabled'); - setHelperText(usagePingCheckbox); - usagePingCheckbox.addEventListener('change', () => { - setHelperText(usagePingCheckbox); + setHelperText(servicePingCheckbox); + servicePingCheckbox.addEventListener('change', () => { + setHelperText(servicePingCheckbox); }); } diff --git a/app/assets/javascripts/pages/admin/groups/edit/index.js b/app/assets/javascripts/pages/admin/groups/edit/index.js index a4e5df559ff..01e03ed437d 100644 --- a/app/assets/javascripts/pages/admin/groups/edit/index.js +++ b/app/assets/javascripts/pages/admin/groups/edit/index.js @@ -1,3 +1,3 @@ import initFilePickers from '~/file_pickers'; -document.addEventListener('DOMContentLoaded', initFilePickers); +initFilePickers(); diff --git a/app/assets/javascripts/pages/admin/groups/show/index.js b/app/assets/javascripts/pages/admin/groups/show/index.js index 69d219d29f7..86b80a0ba5b 100644 --- a/app/assets/javascripts/pages/admin/groups/show/index.js +++ b/app/assets/javascripts/pages/admin/groups/show/index.js @@ -1,23 +1,3 @@ -import Vue from 'vue'; import UsersSelect from '~/users_select'; -import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue'; -function mountRemoveMemberModal() { - const el = document.querySelector('.js-remove-member-modal'); - if (!el) { - return false; - } - - return new Vue({ - el, - render(createComponent) { - return createComponent(RemoveMemberModal); - }, - }); -} - -document.addEventListener('DOMContentLoaded', () => { - mountRemoveMemberModal(); - - new UsersSelect(); // eslint-disable-line no-new -}); +new UsersSelect(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/admin/integrations/overrides/index.js b/app/assets/javascripts/pages/admin/integrations/overrides/index.js new file mode 100644 index 00000000000..b1504709144 --- /dev/null +++ b/app/assets/javascripts/pages/admin/integrations/overrides/index.js @@ -0,0 +1,3 @@ +import initIntegrationOverrides from '~/integrations/overrides'; + +initIntegrationOverrides(); diff --git a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue index ffccc1419a6..63b98f4143b 100644 --- a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue +++ b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue @@ -18,7 +18,7 @@ export default { computed: { text() { return s__( - 'AdminArea|You’re about to stop all jobs.This will halt all current jobs that are running.', + 'AdminArea|You’re about to stop all jobs. This will halt all current jobs that are running.', ); }, }, diff --git a/app/assets/javascripts/pages/admin/projects/index.js b/app/assets/javascripts/pages/admin/projects/index.js index 042ff7808f1..b07ca815f13 100644 --- a/app/assets/javascripts/pages/admin/projects/index.js +++ b/app/assets/javascripts/pages/admin/projects/index.js @@ -1,23 +1,5 @@ -import Vue from 'vue'; import NamespaceSelect from '~/namespace_select'; import ProjectsList from '~/projects_list'; -import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue'; - -function mountRemoveMemberModal() { - const el = document.querySelector('.js-remove-member-modal'); - if (!el) { - return false; - } - - return new Vue({ - el, - render(createComponent) { - return createComponent(RemoveMemberModal); - }, - }); -} - -mountRemoveMemberModal(); new ProjectsList(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/admin/runners/index/index.js b/app/assets/javascripts/pages/admin/runners/index/index.js index d5563470394..f83111b6385 100644 --- a/app/assets/javascripts/pages/admin/runners/index/index.js +++ b/app/assets/javascripts/pages/admin/runners/index/index.js @@ -1,17 +1,3 @@ -import AdminRunnersFilteredSearchTokenKeys from '~/filtered_search/admin_runners_filtered_search_token_keys'; -import { FILTERED_SEARCH } from '~/pages/constants'; -import initFilteredSearch from '~/pages/search/init_filtered_search'; -import { initInstallRunner } from '~/pages/shared/mount_runner_instructions'; -import { initRunnerList } from '~/runner/runner_list'; +import { initAdminRunners } from '~/runner/admin_runners'; -initFilteredSearch({ - page: FILTERED_SEARCH.ADMIN_RUNNERS, - filteredSearchTokenKeys: AdminRunnersFilteredSearchTokenKeys, - useDefaultState: true, -}); - -initInstallRunner(); - -if (gon.features?.runnerListViewVueUi) { - initRunnerList(); -} +initAdminRunners(); diff --git a/app/assets/javascripts/pages/admin/serverless/domains/index.js b/app/assets/javascripts/pages/admin/serverless/domains/index.js index 5be466886a5..4fab7a1d9cb 100644 --- a/app/assets/javascripts/pages/admin/serverless/domains/index.js +++ b/app/assets/javascripts/pages/admin/serverless/domains/index.js @@ -1,19 +1,17 @@ import initSettingsPanels from '~/settings_panels'; -document.addEventListener('DOMContentLoaded', () => { - // Initialize expandable settings panels - initSettingsPanels(); +// Initialize expandable settings panels +initSettingsPanels(); - const domainCard = document.querySelector('.js-domain-cert-show'); - const domainForm = document.querySelector('.js-domain-cert-inputs'); - const domainReplaceButton = document.querySelector('.js-domain-cert-replace-btn'); - const domainSubmitButton = document.querySelector('.js-serverless-domain-submit'); +const domainCard = document.querySelector('.js-domain-cert-show'); +const domainForm = document.querySelector('.js-domain-cert-inputs'); +const domainReplaceButton = document.querySelector('.js-domain-cert-replace-btn'); +const domainSubmitButton = document.querySelector('.js-serverless-domain-submit'); - if (domainReplaceButton && domainCard && domainForm) { - domainReplaceButton.addEventListener('click', () => { - domainCard.classList.add('hidden'); - domainForm.classList.remove('hidden'); - domainSubmitButton.removeAttribute('disabled'); - }); - } -}); +if (domainReplaceButton && domainCard && domainForm) { + domainReplaceButton.addEventListener('click', () => { + domainCard.classList.add('hidden'); + domainForm.classList.remove('hidden'); + domainSubmitButton.removeAttribute('disabled'); + }); +} diff --git a/app/assets/javascripts/pages/dashboard/merge_requests/index.js b/app/assets/javascripts/pages/dashboard/merge_requests/index.js index b099165e3f5..6c134e4fad6 100644 --- a/app/assets/javascripts/pages/dashboard/merge_requests/index.js +++ b/app/assets/javascripts/pages/dashboard/merge_requests/index.js @@ -4,14 +4,12 @@ import { FILTERED_SEARCH } from '~/pages/constants'; import initFilteredSearch from '~/pages/search/init_filtered_search'; import projectSelect from '~/project_select'; -document.addEventListener('DOMContentLoaded', () => { - addExtraTokensForMergeRequests(IssuableFilteredSearchTokenKeys, true); +addExtraTokensForMergeRequests(IssuableFilteredSearchTokenKeys, true); - initFilteredSearch({ - page: FILTERED_SEARCH.MERGE_REQUESTS, - filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys, - useDefaultState: true, - }); - - projectSelect(); +initFilteredSearch({ + page: FILTERED_SEARCH.MERGE_REQUESTS, + filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys, + useDefaultState: true, }); + +projectSelect(); diff --git a/app/assets/javascripts/pages/dashboard/milestones/index/index.js b/app/assets/javascripts/pages/dashboard/milestones/index/index.js index 38ddebe30d9..b526fce6f7b 100644 --- a/app/assets/javascripts/pages/dashboard/milestones/index/index.js +++ b/app/assets/javascripts/pages/dashboard/milestones/index/index.js @@ -1,3 +1,3 @@ import projectSelect from '~/project_select'; -document.addEventListener('DOMContentLoaded', projectSelect); +projectSelect(); diff --git a/app/assets/javascripts/pages/explore/groups/index.js b/app/assets/javascripts/pages/explore/groups/index.js index 3c7edbdd7c7..808fcce46df 100644 --- a/app/assets/javascripts/pages/explore/groups/index.js +++ b/app/assets/javascripts/pages/explore/groups/index.js @@ -2,7 +2,7 @@ import GroupsList from '~/groups_list'; import Landing from '~/landing'; import initGroupsList from '../../../groups'; -document.addEventListener('DOMContentLoaded', () => { +function exploreGroups() { new GroupsList(); // eslint-disable-line no-new initGroupsList(); const landingElement = document.querySelector('.js-explore-groups-landing'); @@ -13,4 +13,6 @@ document.addEventListener('DOMContentLoaded', () => { 'explore_groups_landing_dismissed', ); exploreGroupsLanding.toggle(); -}); +} + +exploreGroups(); diff --git a/app/assets/javascripts/pages/groups/group_members/index.js b/app/assets/javascripts/pages/groups/group_members/index.js index 13656ee9b16..0137ff87979 100644 --- a/app/assets/javascripts/pages/groups/group_members/index.js +++ b/app/assets/javascripts/pages/groups/group_members/index.js @@ -1,4 +1,3 @@ -import Vue from 'vue'; import { groupMemberRequestFormatter } from '~/groups/members/utils'; import groupsSelect from '~/groups_select'; import initInviteGroupTrigger from '~/invite_members/init_invite_group_trigger'; @@ -11,21 +10,6 @@ import { initMembersApp } from '~/members'; import { MEMBER_TYPES } from '~/members/constants'; import { groupLinkRequestFormatter } from '~/members/utils'; import UsersSelect from '~/users_select'; -import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue'; - -function mountRemoveMemberModal() { - const el = document.querySelector('.js-remove-member-modal'); - if (!el) { - return false; - } - - return new Vue({ - el, - render(createComponent) { - return createComponent(RemoveMemberModal); - }, - }); -} const SHARED_FIELDS = ['account', 'expires', 'maxRole', 'expiration', 'actions']; @@ -71,7 +55,6 @@ initMembersApp(document.querySelector('.js-group-members-list-app'), { groupsSelect(); memberExpirationDate(); memberExpirationDate('.js-access-expiration-date-groups'); -mountRemoveMemberModal(); initInviteMembersModal(); initInviteMembersTrigger(); initInviteGroupTrigger(); diff --git a/app/assets/javascripts/pages/groups/runners/index.js b/app/assets/javascripts/pages/groups/runners/index.js new file mode 100644 index 00000000000..ca1a6bdab75 --- /dev/null +++ b/app/assets/javascripts/pages/groups/runners/index.js @@ -0,0 +1,3 @@ +import { initGroupRunners } from '~/runner/group_runners'; + +initGroupRunners(); diff --git a/app/assets/javascripts/pages/groups/settings/badges/index.js b/app/assets/javascripts/pages/groups/settings/badges/index.js index 3f48e4f281e..9dcea737d51 100644 --- a/app/assets/javascripts/pages/groups/settings/badges/index.js +++ b/app/assets/javascripts/pages/groups/settings/badges/index.js @@ -5,6 +5,4 @@ import Translate from '~/vue_shared/translate'; Vue.use(Translate); -document.addEventListener('DOMContentLoaded', () => { - mountBadgeSettings(GROUP_BADGE); -}); +mountBadgeSettings(GROUP_BADGE); diff --git a/app/assets/javascripts/pages/help/index/index.js b/app/assets/javascripts/pages/help/index/index.js index fd8c590eb4e..736add8dca3 100644 --- a/app/assets/javascripts/pages/help/index/index.js +++ b/app/assets/javascripts/pages/help/index/index.js @@ -2,7 +2,5 @@ import $ from 'jquery'; import docs from '~/docs/docs_bundle'; import VersionCheckImage from '~/version_check_image'; -document.addEventListener('DOMContentLoaded', () => { - docs(); - VersionCheckImage.bindErrorEvent($('img.js-version-status-badge')); -}); +docs(); +VersionCheckImage.bindErrorEvent($('img.js-version-status-badge')); diff --git a/app/assets/javascripts/pages/help/ui/index.js b/app/assets/javascripts/pages/help/ui/index.js index 709ca2f3828..9ccc9123506 100644 --- a/app/assets/javascripts/pages/help/ui/index.js +++ b/app/assets/javascripts/pages/help/ui/index.js @@ -1,3 +1,3 @@ import initUIKit from '~/ui_development_kit'; -document.addEventListener('DOMContentLoaded', initUIKit); +initUIKit(); diff --git a/app/assets/javascripts/pages/import/bitbucket/status/index.js b/app/assets/javascripts/pages/import/bitbucket/status/index.js index f450a2aac00..6e9c26bf930 100644 --- a/app/assets/javascripts/pages/import/bitbucket/status/index.js +++ b/app/assets/javascripts/pages/import/bitbucket/status/index.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import { initStoreFromElement, initPropsFromElement } from '~/import_entities/import_projects'; import BitbucketStatusTable from '~/import_entities/import_projects/components/bitbucket_status_table.vue'; -document.addEventListener('DOMContentLoaded', () => { +function importBitBucket() { const mountElement = document.getElementById('import-projects-mount-element'); if (!mountElement) return undefined; @@ -16,4 +16,6 @@ document.addEventListener('DOMContentLoaded', () => { return createElement(BitbucketStatusTable, { attrs }); }, }); -}); +} + +importBitBucket(); 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 a6d748ce857..90eb423c7a7 100644 --- a/app/assets/javascripts/pages/import/bitbucket_server/status/index.js +++ b/app/assets/javascripts/pages/import/bitbucket_server/status/index.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import { initStoreFromElement, initPropsFromElement } from '~/import_entities/import_projects'; import BitbucketServerStatusTable from './components/bitbucket_server_status_table.vue'; -document.addEventListener('DOMContentLoaded', () => { +function BitbucketServerStatus() { const mountElement = document.getElementById('import-projects-mount-element'); if (!mountElement) return undefined; @@ -19,4 +19,6 @@ document.addEventListener('DOMContentLoaded', () => { }); }, }); -}); +} + +BitbucketServerStatus(); diff --git a/app/assets/javascripts/pages/import/fogbugz/new_user_map/index.js b/app/assets/javascripts/pages/import/fogbugz/new_user_map/index.js index 68d4c1f049f..86b80a0ba5b 100644 --- a/app/assets/javascripts/pages/import/fogbugz/new_user_map/index.js +++ b/app/assets/javascripts/pages/import/fogbugz/new_user_map/index.js @@ -1,3 +1,3 @@ import UsersSelect from '~/users_select'; -document.addEventListener('DOMContentLoaded', () => new UsersSelect()); +new UsersSelect(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/import/fogbugz/status/index.js b/app/assets/javascripts/pages/import/fogbugz/status/index.js index 98ddb8b3aa4..4c427b72372 100644 --- a/app/assets/javascripts/pages/import/fogbugz/status/index.js +++ b/app/assets/javascripts/pages/import/fogbugz/status/index.js @@ -1,7 +1,5 @@ import mountImportProjectsTable from '~/import_entities/import_projects'; -document.addEventListener('DOMContentLoaded', () => { - const mountElement = document.getElementById('import-projects-mount-element'); +const mountElement = document.getElementById('import-projects-mount-element'); - mountImportProjectsTable(mountElement); -}); +mountImportProjectsTable(mountElement); diff --git a/app/assets/javascripts/pages/import/gitea/status/index.js b/app/assets/javascripts/pages/import/gitea/status/index.js index 98ddb8b3aa4..4c427b72372 100644 --- a/app/assets/javascripts/pages/import/gitea/status/index.js +++ b/app/assets/javascripts/pages/import/gitea/status/index.js @@ -1,7 +1,5 @@ import mountImportProjectsTable from '~/import_entities/import_projects'; -document.addEventListener('DOMContentLoaded', () => { - const mountElement = document.getElementById('import-projects-mount-element'); +const mountElement = document.getElementById('import-projects-mount-element'); - mountImportProjectsTable(mountElement); -}); +mountImportProjectsTable(mountElement); diff --git a/app/assets/javascripts/pages/import/github/status/index.js b/app/assets/javascripts/pages/import/github/status/index.js index 98ddb8b3aa4..4c427b72372 100644 --- a/app/assets/javascripts/pages/import/github/status/index.js +++ b/app/assets/javascripts/pages/import/github/status/index.js @@ -1,7 +1,5 @@ import mountImportProjectsTable from '~/import_entities/import_projects'; -document.addEventListener('DOMContentLoaded', () => { - const mountElement = document.getElementById('import-projects-mount-element'); +const mountElement = document.getElementById('import-projects-mount-element'); - mountImportProjectsTable(mountElement); -}); +mountImportProjectsTable(mountElement); diff --git a/app/assets/javascripts/pages/import/gitlab/status/index.js b/app/assets/javascripts/pages/import/gitlab/status/index.js index 98ddb8b3aa4..4c427b72372 100644 --- a/app/assets/javascripts/pages/import/gitlab/status/index.js +++ b/app/assets/javascripts/pages/import/gitlab/status/index.js @@ -1,7 +1,5 @@ import mountImportProjectsTable from '~/import_entities/import_projects'; -document.addEventListener('DOMContentLoaded', () => { - const mountElement = document.getElementById('import-projects-mount-element'); +const mountElement = document.getElementById('import-projects-mount-element'); - mountImportProjectsTable(mountElement); -}); +mountImportProjectsTable(mountElement); diff --git a/app/assets/javascripts/pages/import/gitlab_projects/new/index.js b/app/assets/javascripts/pages/import/gitlab_projects/new/index.js index bb86f72b95b..870c14f99ae 100644 --- a/app/assets/javascripts/pages/import/gitlab_projects/new/index.js +++ b/app/assets/javascripts/pages/import/gitlab_projects/new/index.js @@ -1,3 +1,3 @@ import initGitLabImportProject from '~/projects/project_import_gitlab_project'; -document.addEventListener('DOMContentLoaded', initGitLabImportProject); +initGitLabImportProject(); diff --git a/app/assets/javascripts/pages/import/manifest/status/index.js b/app/assets/javascripts/pages/import/manifest/status/index.js index 98ddb8b3aa4..4c427b72372 100644 --- a/app/assets/javascripts/pages/import/manifest/status/index.js +++ b/app/assets/javascripts/pages/import/manifest/status/index.js @@ -1,7 +1,5 @@ import mountImportProjectsTable from '~/import_entities/import_projects'; -document.addEventListener('DOMContentLoaded', () => { - const mountElement = document.getElementById('import-projects-mount-element'); +const mountElement = document.getElementById('import-projects-mount-element'); - mountImportProjectsTable(mountElement); -}); +mountImportProjectsTable(mountElement); diff --git a/app/assets/javascripts/pages/jira_connect/branches/new/index.js b/app/assets/javascripts/pages/jira_connect/branches/new/index.js new file mode 100644 index 00000000000..f8c3ec63f1f --- /dev/null +++ b/app/assets/javascripts/pages/jira_connect/branches/new/index.js @@ -0,0 +1,3 @@ +import initJiraConnectBranches from '~/jira_connect/branches'; + +initJiraConnectBranches(); diff --git a/app/assets/javascripts/pages/ldap/omniauth_callbacks/index.js b/app/assets/javascripts/pages/ldap/omniauth_callbacks/index.js index e93def5323f..8d8534ec556 100644 --- a/app/assets/javascripts/pages/ldap/omniauth_callbacks/index.js +++ b/app/assets/javascripts/pages/ldap/omniauth_callbacks/index.js @@ -1,3 +1,3 @@ import { mount2faAuthentication } from '~/authentication/mount_2fa'; -document.addEventListener('DOMContentLoaded', mount2faAuthentication); +mount2faAuthentication(); diff --git a/app/assets/javascripts/pages/omniauth_callbacks/index.js b/app/assets/javascripts/pages/omniauth_callbacks/index.js index e93def5323f..8d8534ec556 100644 --- a/app/assets/javascripts/pages/omniauth_callbacks/index.js +++ b/app/assets/javascripts/pages/omniauth_callbacks/index.js @@ -1,3 +1,3 @@ import { mount2faAuthentication } from '~/authentication/mount_2fa'; -document.addEventListener('DOMContentLoaded', mount2faAuthentication); +mount2faAuthentication(); diff --git a/app/assets/javascripts/pages/profiles/accounts/show/index.js b/app/assets/javascripts/pages/profiles/accounts/show/index.js index 5350ef61184..3d400ed77f5 100644 --- a/app/assets/javascripts/pages/profiles/accounts/show/index.js +++ b/app/assets/javascripts/pages/profiles/accounts/show/index.js @@ -1,6 +1,6 @@ import { initClose2faSuccessMessage } from '~/authentication/two_factor_auth'; import initProfileAccount from '~/profile/account'; -document.addEventListener('DOMContentLoaded', initProfileAccount); +initProfileAccount(); initClose2faSuccessMessage(); diff --git a/app/assets/javascripts/pages/profiles/keys/index.js b/app/assets/javascripts/pages/profiles/keys/index.js index 4214d5bffb2..1b291d9509d 100644 --- a/app/assets/javascripts/pages/profiles/keys/index.js +++ b/app/assets/javascripts/pages/profiles/keys/index.js @@ -1,9 +1,9 @@ import initConfirmModal from '~/confirm_modal'; import AddSshKeyValidation from '~/profile/add_ssh_key_validation'; -document.addEventListener('DOMContentLoaded', () => { - initConfirmModal(); +initConfirmModal(); +function initSshKeyValidation() { const input = document.querySelector('.js-add-ssh-key-validation-input'); if (!input) return; @@ -18,4 +18,6 @@ document.addEventListener('DOMContentLoaded', () => { confirmSubmit, ); addSshKeyValidation.register(); -}); +} + +initSshKeyValidation(); 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 186072531b8..50835333a54 100644 --- a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js +++ b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js @@ -2,17 +2,15 @@ import { mount2faRegistration } from '~/authentication/mount_2fa'; import { initRecoveryCodes } from '~/authentication/two_factor_auth'; import { parseBoolean } from '~/lib/utils/common_utils'; -document.addEventListener('DOMContentLoaded', () => { - const twoFactorNode = document.querySelector('.js-two-factor-auth'); - const skippable = twoFactorNode ? parseBoolean(twoFactorNode.dataset.twoFactorSkippable) : false; +const twoFactorNode = document.querySelector('.js-two-factor-auth'); +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>`; - const flashAlert = document.querySelector('.flash-alert'); - if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button); - } +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>`; + const flashAlert = document.querySelector('.flash-alert'); + if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button); +} - mount2faRegistration(); -}); +mount2faRegistration(); initRecoveryCodes(); diff --git a/app/assets/javascripts/pages/projects/artifacts/file/index.js b/app/assets/javascripts/pages/projects/artifacts/file/index.js index 057ef157374..07ee4d686cc 100644 --- a/app/assets/javascripts/pages/projects/artifacts/file/index.js +++ b/app/assets/javascripts/pages/projects/artifacts/file/index.js @@ -1,5 +1,5 @@ import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; -import BlobViewer from '~/blob/viewer/index'; +import { BlobViewer } from '~/blob/viewer/index'; new ShortcutsNavigation(); // eslint-disable-line no-new new BlobViewer(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js index 6cc0095f5a5..b365e039191 100644 --- a/app/assets/javascripts/pages/projects/blob/show/index.js +++ b/app/assets/javascripts/pages/projects/blob/show/index.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; import TableOfContents from '~/blob/components/table_contents.vue'; import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue'; -import BlobViewer from '~/blob/viewer/index'; +import { BlobViewer, initAuxiliaryViewer } from '~/blob/viewer/index'; import GpgBadges from '~/gpg_badges'; import createDefaultClient from '~/lib/graphql'; import initBlob from '~/pages/projects/init_blob'; @@ -39,6 +39,8 @@ if (viewBlobEl) { }); }, }); + + initAuxiliaryViewer(); } else { new BlobViewer(); // eslint-disable-line no-new initBlob(); diff --git a/app/assets/javascripts/pages/projects/compare/show/index.js b/app/assets/javascripts/pages/projects/compare/show/index.js index 549e596cb8d..5edaa7f7e51 100644 --- a/app/assets/javascripts/pages/projects/compare/show/index.js +++ b/app/assets/javascripts/pages/projects/compare/show/index.js @@ -5,9 +5,7 @@ import initCompareSelector from '~/projects/compare'; initCompareSelector(); -document.addEventListener('DOMContentLoaded', () => { - new Diff(); // eslint-disable-line no-new - const paddingTop = 16; - initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - paddingTop); - GpgBadges.fetch(); -}); +new Diff(); // eslint-disable-line no-new +const paddingTop = 16; +initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - paddingTop); +GpgBadges.fetch(); diff --git a/app/assets/javascripts/pages/projects/cycle_analytics/show/index.js b/app/assets/javascripts/pages/projects/cycle_analytics/show/index.js index 255d05b39be..bef21ef8fdf 100644 --- a/app/assets/javascripts/pages/projects/cycle_analytics/show/index.js +++ b/app/assets/javascripts/pages/projects/cycle_analytics/show/index.js @@ -1,3 +1,3 @@ import initCycleAnalytics from '~/cycle_analytics'; -document.addEventListener('DOMContentLoaded', initCycleAnalytics); +initCycleAnalytics(); diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js index 9aa7e62e3ee..335d8d481fc 100644 --- a/app/assets/javascripts/pages/projects/edit/index.js +++ b/app/assets/javascripts/pages/projects/edit/index.js @@ -25,10 +25,6 @@ initProjectLoadingSpinner(); initProjectPermissionsSettings(); setupTransferEdit('.js-project-transfer-form', 'select.select2'); -dirtySubmitFactory( - document.querySelectorAll( - '.js-general-settings-form, .js-mr-settings-form, .js-mr-approvals-form', - ), -); +dirtySubmitFactory(document.querySelectorAll('.js-general-settings-form, .js-mr-settings-form')); initSearchSettings(); diff --git a/app/assets/javascripts/pages/projects/environments/edit/index.js b/app/assets/javascripts/pages/projects/environments/edit/index.js new file mode 100644 index 00000000000..574963d825a --- /dev/null +++ b/app/assets/javascripts/pages/projects/environments/edit/index.js @@ -0,0 +1,3 @@ +import mountEdit from '~/environments/edit'; + +mountEdit(document.getElementById('js-edit-environment')); diff --git a/app/assets/javascripts/pages/projects/environments/folder/index.js b/app/assets/javascripts/pages/projects/environments/folder/index.js index 5feaf944038..2f22a3a84ff 100644 --- a/app/assets/javascripts/pages/projects/environments/folder/index.js +++ b/app/assets/javascripts/pages/projects/environments/folder/index.js @@ -1,3 +1,3 @@ import initEnvironmentsFolderBundle from '~/environments/folder/environments_folder_bundle'; -document.addEventListener('DOMContentLoaded', initEnvironmentsFolderBundle); +initEnvironmentsFolderBundle(); diff --git a/app/assets/javascripts/pages/projects/environments/metrics/index.js b/app/assets/javascripts/pages/projects/environments/metrics/index.js index d3028aec313..606439866ea 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 monitoringApp from '~/monitoring/monitoring_app'; -document.addEventListener('DOMContentLoaded', monitoringApp); +monitoringApp(); diff --git a/app/assets/javascripts/pages/projects/environments/new/index.js b/app/assets/javascripts/pages/projects/environments/new/index.js new file mode 100644 index 00000000000..2edb1ca7088 --- /dev/null +++ b/app/assets/javascripts/pages/projects/environments/new/index.js @@ -0,0 +1,3 @@ +import mountNew from '~/environments/new'; + +mountNew(document.getElementById('js-new-environment')); diff --git a/app/assets/javascripts/pages/projects/environments/show/index.js b/app/assets/javascripts/pages/projects/environments/show/index.js index a4960037eaa..53e48ad8d86 100644 --- a/app/assets/javascripts/pages/projects/environments/show/index.js +++ b/app/assets/javascripts/pages/projects/environments/show/index.js @@ -1,3 +1,5 @@ -import initShowEnvironment from '~/environments/mount_show'; +import initConfirmRollBackModal from '~/environments/init_confirm_rollback_modal'; +import { initHeader } from '~/environments/mount_show'; -initShowEnvironment(); +initHeader(); +initConfirmRollBackModal(); diff --git a/app/assets/javascripts/pages/projects/environments/terminal/index.js b/app/assets/javascripts/pages/projects/environments/terminal/index.js index 7129e24cee1..d42c163a41b 100644 --- a/app/assets/javascripts/pages/projects/environments/terminal/index.js +++ b/app/assets/javascripts/pages/projects/environments/terminal/index.js @@ -1,3 +1,3 @@ import initTerminal from '~/terminal/'; -document.addEventListener('DOMContentLoaded', initTerminal); +initTerminal(); diff --git a/app/assets/javascripts/pages/projects/graphs/charts/index.js b/app/assets/javascripts/pages/projects/graphs/charts/index.js index ea38b8e15a4..c217bc5a727 100644 --- a/app/assets/javascripts/pages/projects/graphs/charts/index.js +++ b/app/assets/javascripts/pages/projects/graphs/charts/index.js @@ -7,151 +7,149 @@ import SeriesDataMixin from './series_data_mixin'; const seriesDataToBarData = (raw) => Object.entries(raw).map(([name, data]) => ({ name, data })); -document.addEventListener('DOMContentLoaded', () => { - 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; - } +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; + } - return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => { - const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length]; + return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => { + const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length]; - return { - ...acc, - [reorderedDayName]: weekDays[reorderedDayName], - }; - }, {}); - }; + return { + ...acc, + [reorderedDayName]: weekDays[reorderedDayName], + }; + }, {}); + }; - // eslint-disable-next-line no-new - new Vue({ - el: languagesContainer, - components: { - GlColumnChart, + // eslint-disable-next-line no-new + new Vue({ + el: languagesContainer, + components: { + GlColumnChart, + }, + data() { + return { + chartData: JSON.parse(languagesContainer.dataset.chartData), + }; + }, + computed: { + seriesData() { + return [{ name: 'full', data: this.chartData.map((d) => [d.label, d.value]) }]; }, - data() { - return { - chartData: JSON.parse(languagesContainer.dataset.chartData), - }; - }, - computed: { - seriesData() { - return [{ name: 'full', data: this.chartData.map((d) => [d.label, d.value]) }]; + }, + render(h) { + return h(GlColumnChart, { + props: { + bars: this.seriesData, + xAxisTitle: __('Used programming language'), + yAxisTitle: __('Percentage'), + xAxisType: 'category', }, - }, - render(h) { - return h(GlColumnChart, { - props: { - bars: this.seriesData, - xAxisTitle: __('Used programming language'), - yAxisTitle: __('Percentage'), - xAxisType: 'category', - }, - attrs: { - height: LANGUAGE_CHART_HEIGHT, - }, - }); - }, - }); + 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: { - bars: seriesDataToBarData(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: { + bars: seriesDataToBarData(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), - }; + // 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 [{ name: 'full', data }]; }, - 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 [{ name: 'full', data }]; + }, + render(h) { + return h(GlColumnChart, { + props: { + bars: this.seriesData, + xAxisTitle: __('Weekday'), + yAxisTitle: __('No. of commits'), + xAxisType: 'category', }, - }, - render(h) { - return h(GlColumnChart, { - props: { - bars: 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: { - bars: seriesDataToBarData(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: { + bars: seriesDataToBarData(this.seriesData), + xAxisTitle: __('Hour (UTC)'), + yAxisTitle: __('No. of commits'), + xAxisType: 'category', + }, + }); + }, }); }); diff --git a/app/assets/javascripts/pages/projects/graphs/show/index.js b/app/assets/javascripts/pages/projects/graphs/show/index.js index 09d9c78c446..4f5a5bfe6fe 100644 --- a/app/assets/javascripts/pages/projects/graphs/show/index.js +++ b/app/assets/javascripts/pages/projects/graphs/show/index.js @@ -1,3 +1,3 @@ import initContributorsGraphs from '~/contributors'; -document.addEventListener('DOMContentLoaded', initContributorsGraphs); +initContributorsGraphs(); diff --git a/app/assets/javascripts/pages/projects/import/jira/index.js b/app/assets/javascripts/pages/projects/import/jira/index.js index cb7a7bde55d..5876e5283b5 100644 --- a/app/assets/javascripts/pages/projects/import/jira/index.js +++ b/app/assets/javascripts/pages/projects/import/jira/index.js @@ -1,3 +1,3 @@ import mountJiraImportApp from '~/jira_import'; -document.addEventListener('DOMContentLoaded', mountJiraImportApp); +mountJiraImportApp(); diff --git a/app/assets/javascripts/pages/projects/issues/edit/index.js b/app/assets/javascripts/pages/projects/issues/edit/index.js index aecc6484b26..48afd2142ee 100644 --- a/app/assets/javascripts/pages/projects/issues/edit/index.js +++ b/app/assets/javascripts/pages/projects/issues/edit/index.js @@ -1,3 +1,3 @@ import initForm from 'ee_else_ce/pages/projects/issues/form'; -document.addEventListener('DOMContentLoaded', initForm); +initForm(); diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js index 3cea61262ea..e365f51567d 100644 --- a/app/assets/javascripts/pages/projects/issues/show.js +++ b/app/assets/javascripts/pages/projects/issues/show.js @@ -3,10 +3,10 @@ import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable'; import initIssuableSidebar from '~/init_issuable_sidebar'; import { IssuableType } from '~/issuable_show/constants'; import Issue from '~/issue'; -import '~/notes/index'; import initIncidentApp from '~/issue_show/incident'; import { initIssuableApp, initIssueHeaderActions } from '~/issue_show/issue'; import { parseIssuableData } from '~/issue_show/utils/parse_data'; +import initNotesApp from '~/notes/index'; import { store } from '~/notes/stores'; import initRelatedMergeRequestsApp from '~/related_merge_requests'; import initSentryErrorStackTraceApp from '~/sentry_error_stack_trace'; @@ -14,6 +14,8 @@ import initIssuableHeaderWarning from '~/vue_shared/components/issuable/init_iss import ZenMode from '~/zen_mode'; export default function initShowIssue() { + initNotesApp(); + const initialDataEl = document.getElementById('js-issuable-app'); const { issueType, ...issuableData } = parseIssuableData(initialDataEl); diff --git a/app/assets/javascripts/pages/projects/jobs/terminal/index.js b/app/assets/javascripts/pages/projects/jobs/terminal/index.js index 7129e24cee1..d42c163a41b 100644 --- a/app/assets/javascripts/pages/projects/jobs/terminal/index.js +++ b/app/assets/javascripts/pages/projects/jobs/terminal/index.js @@ -1,3 +1,3 @@ import initTerminal from '~/terminal/'; -document.addEventListener('DOMContentLoaded', initTerminal); +initTerminal(); diff --git a/app/assets/javascripts/pages/projects/network/show/index.js b/app/assets/javascripts/pages/projects/network/show/index.js index 9f05f63b742..2dabcfadfab 100644 --- a/app/assets/javascripts/pages/projects/network/show/index.js +++ b/app/assets/javascripts/pages/projects/network/show/index.js @@ -2,7 +2,7 @@ import $ from 'jquery'; import ShortcutsNetwork from '~/behaviors/shortcuts/shortcuts_network'; import Network from '../network'; -document.addEventListener('DOMContentLoaded', () => { +(() => { if (!$('.network-graph').length) return; const networkGraph = new Network({ @@ -14,4 +14,4 @@ document.addEventListener('DOMContentLoaded', () => { // eslint-disable-next-line no-new new ShortcutsNetwork(networkGraph.branch_graph); -}); +})(); diff --git a/app/assets/javascripts/pages/projects/pages_domains/new/index.js b/app/assets/javascripts/pages/projects/pages_domains/new/index.js index 27e4433ad4d..17fa49a46e0 100644 --- a/app/assets/javascripts/pages/projects/pages_domains/new/index.js +++ b/app/assets/javascripts/pages/projects/pages_domains/new/index.js @@ -1,3 +1,3 @@ import initForm from '~/pages/projects/pages_domains/form'; -document.addEventListener('DOMContentLoaded', initForm); +initForm(); diff --git a/app/assets/javascripts/pages/projects/pages_domains/show/index.js b/app/assets/javascripts/pages/projects/pages_domains/show/index.js index 27e4433ad4d..17fa49a46e0 100644 --- a/app/assets/javascripts/pages/projects/pages_domains/show/index.js +++ b/app/assets/javascripts/pages/projects/pages_domains/show/index.js @@ -1,3 +1,3 @@ import initForm from '~/pages/projects/pages_domains/form'; -document.addEventListener('DOMContentLoaded', initForm); +initForm(); diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js index 40730ec7e60..cd4bc35e74e 100644 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js +++ b/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import PipelineSchedulesCallout from '../shared/components/pipeline_schedules_callout.vue'; -document.addEventListener('DOMContentLoaded', () => { +function initPipelineSchedules() { const el = document.getElementById('pipeline-schedules-callout'); if (!el) { @@ -21,4 +21,6 @@ document.addEventListener('DOMContentLoaded', () => { return createElement(PipelineSchedulesCallout); }, }); -}); +} + +initPipelineSchedules(); diff --git a/app/assets/javascripts/pages/projects/project_members/index.js b/app/assets/javascripts/pages/projects/project_members/index.js index 177dc346c60..fb0be31834d 100644 --- a/app/assets/javascripts/pages/projects/project_members/index.js +++ b/app/assets/javascripts/pages/projects/project_members/index.js @@ -1,4 +1,3 @@ -import Vue from 'vue'; import groupsSelect from '~/groups_select'; import initInviteGroupTrigger from '~/invite_members/init_invite_group_trigger'; import initInviteMembersForm from '~/invite_members/init_invite_members_form'; @@ -11,26 +10,10 @@ import { MEMBER_TYPES } from '~/members/constants'; import { groupLinkRequestFormatter } from '~/members/utils'; import { projectMemberRequestFormatter } from '~/projects/members/utils'; import UsersSelect from '~/users_select'; -import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue'; - -function mountRemoveMemberModal() { - const el = document.querySelector('.js-remove-member-modal'); - if (!el) { - return false; - } - - return new Vue({ - el, - render(createComponent) { - return createComponent(RemoveMemberModal); - }, - }); -} groupsSelect(); memberExpirationDate(); memberExpirationDate('.js-access-expiration-date-groups'); -mountRemoveMemberModal(); initInviteMembersModal(); initInviteMembersTrigger(); initInviteGroupTrigger(); diff --git a/app/assets/javascripts/pages/projects/security/configuration/index.js b/app/assets/javascripts/pages/projects/security/configuration/index.js index 8bba3d7af54..5f801501b2f 100644 --- a/app/assets/javascripts/pages/projects/security/configuration/index.js +++ b/app/assets/javascripts/pages/projects/security/configuration/index.js @@ -1,3 +1,3 @@ -import { initCESecurityConfiguration } from '~/security_configuration'; +import { initSecurityConfiguration } from '~/security_configuration'; -initCESecurityConfiguration(document.querySelector('#js-security-configuration-static')); +initSecurityConfiguration(document.querySelector('#js-security-configuration-static')); diff --git a/app/assets/javascripts/pages/projects/services/edit/index.js b/app/assets/javascripts/pages/projects/services/edit/index.js index 8e603c5c1a2..03ffc323fc0 100644 --- a/app/assets/javascripts/pages/projects/services/edit/index.js +++ b/app/assets/javascripts/pages/projects/services/edit/index.js @@ -2,16 +2,14 @@ import IntegrationSettingsForm from '~/integrations/integration_settings_form'; import PrometheusAlerts from '~/prometheus_alerts'; import CustomMetrics from '~/prometheus_metrics/custom_metrics'; -document.addEventListener('DOMContentLoaded', () => { - const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form'); - integrationSettingsForm.init(); +const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form'); +integrationSettingsForm.init(); - const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring'; - const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector); - if (prometheusSettingsWrapper) { - const customMetrics = new CustomMetrics(prometheusSettingsSelector); - customMetrics.init(); - } +const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring'; +const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector); +if (prometheusSettingsWrapper) { + const customMetrics = new CustomMetrics(prometheusSettingsSelector); + customMetrics.init(); +} - PrometheusAlerts(); -}); +PrometheusAlerts(); 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 6fcaa3ab04b..261f7af7ef1 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 @@ -3,7 +3,6 @@ import { GlIcon, GlSprintf, GlLink, GlFormCheckbox, GlToggle } from '@gitlab/ui' import settingsMixin from 'ee_else_ce/pages/projects/shared/permissions/mixins/settings_pannel_mixin'; import { s__ } from '~/locale'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { visibilityOptions, visibilityLevelDescriptions, @@ -12,6 +11,7 @@ import { featureAccessLevel, featureAccessLevelNone, CVE_ID_REQUEST_BUTTON_I18N, + featureAccessLevelDescriptions, } from '../constants'; import { toggleHiddenClassBySelector } from '../external'; import projectFeatureSetting from './project_feature_setting.vue'; @@ -48,7 +48,7 @@ export default { GlFormCheckbox, GlToggle, }, - mixins: [settingsMixin, glFeatureFlagsMixin()], + mixins: [settingsMixin], props: { requestCveAvailable: { @@ -177,7 +177,7 @@ export default { requirementsAccessLevel: featureAccessLevel.EVERYONE, securityAndComplianceAccessLevel: featureAccessLevel.PROJECT_MEMBERS, operationsAccessLevel: featureAccessLevel.EVERYONE, - containerRegistryEnabled: true, + containerRegistryAccessLevel: featureAccessLevel.EVERYONE, lfsEnabled: true, requestAccessEnabled: true, highlightChangesClass: false, @@ -185,6 +185,8 @@ export default { cveIdRequestEnabled: true, featureAccessLevelEveryone, featureAccessLevelMembers, + featureAccessLevel, + featureAccessLevelDescriptions, }; return { ...defaults, ...this.currentSettings }; @@ -249,7 +251,10 @@ export default { }, showContainerRegistryPublicNote() { - return this.visibilityLevel === visibilityOptions.PUBLIC; + return ( + this.visibilityLevel === visibilityOptions.PUBLIC && + this.containerRegistryAccessLevel === featureAccessLevel.EVERYONE + ); }, repositoryHelpText() { @@ -311,6 +316,10 @@ export default { featureAccessLevel.PROJECT_MEMBERS, this.operationsAccessLevel, ); + this.containerRegistryAccessLevel = Math.min( + featureAccessLevel.PROJECT_MEMBERS, + this.containerRegistryAccessLevel, + ); if (this.pagesAccessLevel === featureAccessLevel.EVERYONE) { // When from Internal->Private narrow access for only members this.pagesAccessLevel = featureAccessLevel.PROJECT_MEMBERS; @@ -340,6 +349,8 @@ export default { this.requirementsAccessLevel = featureAccessLevel.EVERYONE; if (this.operationsAccessLevel === featureAccessLevel.PROJECT_MEMBERS) this.operationsAccessLevel = featureAccessLevel.EVERYONE; + if (this.containerRegistryAccessLevel === featureAccessLevel.PROJECT_MEMBERS) + this.containerRegistryAccessLevel = featureAccessLevel.EVERYONE; this.highlightChanges(); } @@ -513,31 +524,6 @@ export default { /> </project-setting-row> <project-setting-row - v-if="registryAvailable" - ref="container-registry-settings" - :help-path="registryHelpPath" - :label="$options.i18n.containerRegistryLabel" - :help-text=" - s__('ProjectSettings|Every project can have its own space to store its Docker images') - " - > - <div v-if="showContainerRegistryPublicNote" class="text-muted"> - {{ - s__( - 'ProjectSettings|Note: the container registry is always visible when a project is public', - ) - }} - </div> - <gl-toggle - v-model="containerRegistryEnabled" - class="gl-my-2" - :disabled="!repositoryEnabled" - :label="$options.i18n.containerRegistryLabel" - label-position="hidden" - name="project[container_registry_enabled]" - /> - </project-setting-row> - <project-setting-row v-if="lfsAvailable" ref="git-lfs-settings" :help-path="lfsHelpPath" @@ -590,18 +576,47 @@ export default { name="project[packages_enabled]" /> </project-setting-row> + <project-setting-row + ref="pipeline-settings" + :label="$options.i18n.ciCdLabel" + :help-text="s__('ProjectSettings|Build, test, and deploy your changes.')" + > + <project-feature-setting + v-model="buildsAccessLevel" + :label="$options.i18n.ciCdLabel" + :options="repoFeatureAccessLevelOptions" + :disabled-input="!repositoryEnabled" + name="project[project_feature_attributes][builds_access_level]" + /> + </project-setting-row> </div> <project-setting-row - ref="pipeline-settings" - :label="$options.i18n.ciCdLabel" - :help-text="s__('ProjectSettings|Build, test, and deploy your changes.')" + v-if="registryAvailable" + ref="container-registry-settings" + :help-path="registryHelpPath" + :label="$options.i18n.containerRegistryLabel" + :help-text=" + s__('ProjectSettings|Every project can have its own space to store its Docker images') + " > + <div v-if="showContainerRegistryPublicNote" class="text-muted"> + <gl-sprintf + :message=" + s__( + `ProjectSettings|Note: The container registry is always visible when a project is public and the container registry is set to '%{access_level_description}'`, + ) + " + > + <template #access_level_description>{{ + featureAccessLevelDescriptions[featureAccessLevel.EVERYONE] + }}</template> + </gl-sprintf> + </div> <project-feature-setting - v-model="buildsAccessLevel" - :label="$options.i18n.ciCdLabel" - :options="repoFeatureAccessLevelOptions" - :disabled-input="!repositoryEnabled" - name="project[project_feature_attributes][builds_access_level]" + v-model="containerRegistryAccessLevel" + :options="featureAccessLevelOptions" + :label="$options.i18n.containerRegistryLabel" + name="project[project_feature_attributes][container_registry_access_level]" /> </project-setting-row> <project-setting-row @@ -737,22 +752,5 @@ 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|Commit authors can edit commit messages on unprotected branches.') - }}</template> - </gl-form-checkbox> - </project-setting-row> </div> </template> diff --git a/app/assets/javascripts/pages/projects/shared/permissions/constants.js b/app/assets/javascripts/pages/projects/shared/permissions/constants.js index e160fdacca6..fb1acd5311c 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/constants.js +++ b/app/assets/javascripts/pages/projects/shared/permissions/constants.js @@ -22,7 +22,7 @@ export const featureAccessLevel = { EVERYONE: 20, }; -const featureAccessLevelDescriptions = { +export const featureAccessLevelDescriptions = { [featureAccessLevel.NOT_ENABLED]: __('Enable feature to choose access level'), [featureAccessLevel.PROJECT_MEMBERS]: __('Only Project Members'), [featureAccessLevel.EVERYONE]: __('Everyone With Access'), diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js index 26f8018a968..78b3f2f1b30 100644 --- a/app/assets/javascripts/pages/projects/show/index.js +++ b/app/assets/javascripts/pages/projects/show/index.js @@ -1,7 +1,7 @@ import initTree from 'ee_else_ce/repository'; import Activities from '~/activities'; import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; -import BlobViewer from '~/blob/viewer/index'; +import { BlobViewer } from '~/blob/viewer/index'; import { initUploadForm } from '~/blob_edit/blob_bundle'; import initInviteMembersModal from '~/invite_members/init_invite_members_modal'; import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger'; diff --git a/app/assets/javascripts/pages/projects/static_site_editor/show/index.js b/app/assets/javascripts/pages/projects/static_site_editor/show/index.js index 8f808dae56c..d9d265e4e4a 100644 --- a/app/assets/javascripts/pages/projects/static_site_editor/show/index.js +++ b/app/assets/javascripts/pages/projects/static_site_editor/show/index.js @@ -1,5 +1,3 @@ import initStaticSiteEditor from '~/static_site_editor'; -window.addEventListener('DOMContentLoaded', () => { - initStaticSiteEditor(document.querySelector('#static-site-editor')); -}); +initStaticSiteEditor(document.querySelector('#static-site-editor')); diff --git a/app/assets/javascripts/pages/sessions/index.js b/app/assets/javascripts/pages/sessions/index.js index e93def5323f..8d8534ec556 100644 --- a/app/assets/javascripts/pages/sessions/index.js +++ b/app/assets/javascripts/pages/sessions/index.js @@ -1,3 +1,3 @@ import { mount2faAuthentication } from '~/authentication/mount_2fa'; -document.addEventListener('DOMContentLoaded', mount2faAuthentication); +mount2faAuthentication(); diff --git a/app/assets/javascripts/pages/sessions/new/index.js b/app/assets/javascripts/pages/sessions/new/index.js index 465aed88c01..8c2fd624a83 100644 --- a/app/assets/javascripts/pages/sessions/new/index.js +++ b/app/assets/javascripts/pages/sessions/new/index.js @@ -7,18 +7,16 @@ import preserveUrlFragment from './preserve_url_fragment'; import SigninTabsMemoizer from './signin_tabs_memoizer'; import UsernameValidator from './username_validator'; -document.addEventListener('DOMContentLoaded', () => { - new UsernameValidator(); // eslint-disable-line no-new - new LengthValidator(); // eslint-disable-line no-new - new SigninTabsMemoizer(); // eslint-disable-line no-new - new NoEmojiValidator(); // eslint-disable-line no-new +new UsernameValidator(); // eslint-disable-line no-new +new LengthValidator(); // eslint-disable-line no-new +new SigninTabsMemoizer(); // eslint-disable-line no-new +new NoEmojiValidator(); // eslint-disable-line no-new - new OAuthRememberMe({ - container: $('.omniauth-container'), - }).bindEvents(); +new OAuthRememberMe({ + container: $('.omniauth-container'), +}).bindEvents(); - // Save the URL fragment from the current window location. This will be present if the user was - // redirected to sign-in after attempting to access a protected URL that included a fragment. - preserveUrlFragment(window.location.hash); - initVueAlerts(); -}); +// Save the URL fragment from the current window location. This will be present if the user was +// redirected to sign-in after attempting to access a protected URL that included a fragment. +preserveUrlFragment(window.location.hash); +initVueAlerts(); diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue index e883fecb170..a8ec731e105 100644 --- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue +++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue @@ -6,7 +6,6 @@ import { GlButton, GlSprintf, GlAlert, - GlLoadingIcon, GlModal, GlModalDirective, } from '@gitlab/ui'; @@ -114,7 +113,6 @@ export default { GlButton, GlModal, MarkdownField, - GlLoadingIcon, ContentEditor: () => import( /* webpackChunkName: 'content_editor' */ '~/content_editor/components/content_editor.vue' @@ -134,14 +132,14 @@ export default { isContentEditorLoading: true, useContentEditor: false, commitMessage: '', - contentEditor: null, isDirty: false, contentEditorRenderFailed: false, + contentEditorEmpty: false, }; }, computed: { noContent() { - if (this.isContentEditorActive) return this.contentEditor?.empty; + if (this.isContentEditorActive) return this.contentEditorEmpty; return !this.content.trim(); }, csrfToken() { @@ -206,7 +204,7 @@ export default { window.removeEventListener('beforeunload', this.onPageUnload); }, methods: { - getContentHTML(content) { + renderMarkdown(content) { return axios .post(this.pageInfo.markdownPreviewPath, { text: content }) .then(({ data }) => data.body); @@ -233,6 +231,32 @@ export default { this.isDirty = true; }, + async loadInitialContent(contentEditor) { + this.contentEditor = contentEditor; + + try { + await this.contentEditor.setSerializedContent(this.content); + this.trackContentEditorLoaded(); + } catch (e) { + this.contentEditorRenderFailed = true; + } + }, + + async retryInitContentEditor() { + try { + this.contentEditorRenderFailed = false; + await this.contentEditor.setSerializedContent(this.content); + } catch (e) { + this.contentEditorRenderFailed = true; + } + }, + + handleContentEditorChange({ empty }) { + this.contentEditorEmpty = empty; + // TODO: Implement a precise mechanism to detect changes in the Content + this.isDirty = true; + }, + onPageUnload(event) { if (!this.isDirty) return undefined; @@ -253,36 +277,8 @@ export default { this.commitMessage = newCommitMessage; }, - async initContentEditor() { - this.isContentEditorLoading = true; + initContentEditor() { this.useContentEditor = true; - - const { createContentEditor } = await import( - /* webpackChunkName: 'content_editor' */ '~/content_editor/services/create_content_editor' - ); - this.contentEditor = - this.contentEditor || - createContentEditor({ - renderMarkdown: (markdown) => this.getContentHTML(markdown), - uploadsPath: this.pageInfo.uploadsPath, - tiptapOptions: { - onUpdate: () => this.handleContentChange(), - }, - }); - - try { - await this.contentEditor.setSerializedContent(this.content); - this.isContentEditorLoading = false; - - this.trackContentEditorLoaded(); - } catch (e) { - this.contentEditorRenderFailed = true; - } - }, - - retryInitContentEditor() { - this.contentEditorRenderFailed = false; - this.initContentEditor(); }, switchToOldEditor() { @@ -401,6 +397,7 @@ export default { v-if="showContentEditorAlert" class="gl-mb-6" variant="info" + data-qa-selector="try_new_editor_container" :primary-button-text="$options.i18n.contentEditor.useNewEditor.primaryLabel" :secondary-button-text="$options.i18n.contentEditor.useNewEditor.secondaryLabel" :dismiss-label="$options.i18n.contentEditor.useNewEditor.secondaryLabel" @@ -476,12 +473,12 @@ export default { > </gl-sprintf> </gl-alert> - <gl-loading-icon - v-if="isContentEditorLoading" - size="sm" - class="bordered-box gl-w-full gl-py-6" + <content-editor + :render-markdown="renderMarkdown" + :uploads-path="pageInfo.uploadsPath" + @initialized="loadInitialContent" + @change="handleContentEditorChange" /> - <content-editor v-else :content-editor="contentEditor" /> <input id="wiki_content" v-model.trim="content" type="hidden" name="wiki[content]" /> </div> |