diff options
Diffstat (limited to 'app/assets/javascripts/pages/admin')
21 files changed, 85 insertions, 92 deletions
diff --git a/app/assets/javascripts/pages/admin/abuse_reports/abuse_reports.js b/app/assets/javascripts/pages/admin/abuse_reports/abuse_reports.js index da7f81759ea..e78b3f9ec95 100644 --- a/app/assets/javascripts/pages/admin/abuse_reports/abuse_reports.js +++ b/app/assets/javascripts/pages/admin/abuse_reports/abuse_reports.js @@ -1,6 +1,6 @@ import $ from 'jquery'; -import { truncate } from '../../../lib/utils/text_utility'; import { parseBoolean } from '~/lib/utils/common_utils'; +import { truncate } from '../../../lib/utils/text_utility'; const MAX_MESSAGE_LENGTH = 500; const MESSAGE_CELL_SELECTOR = '.abuse-reports .message'; diff --git a/app/assets/javascripts/pages/admin/abuse_reports/index.js b/app/assets/javascripts/pages/admin/abuse_reports/index.js index d97e24d9e0b..5649c47d7e8 100644 --- a/app/assets/javascripts/pages/admin/abuse_reports/index.js +++ b/app/assets/javascripts/pages/admin/abuse_reports/index.js @@ -1,6 +1,6 @@ /* eslint-disable no-new */ -import AbuseReports from './abuse_reports'; import UsersSelect from '~/users_select'; +import AbuseReports from './abuse_reports'; document.addEventListener('DOMContentLoaded', () => { new AbuseReports(); diff --git a/app/assets/javascripts/pages/admin/application_settings/general/index.js b/app/assets/javascripts/pages/admin/application_settings/general/index.js index af1595398a8..f7bd32880ff 100644 --- a/app/assets/javascripts/pages/admin/application_settings/general/index.js +++ b/app/assets/javascripts/pages/admin/application_settings/general/index.js @@ -1,6 +1,10 @@ +// This is a true violation of @gitlab/no-runtime-template-compiler, as it +// relies on app/views/admin/application_settings/_gitpod.html.haml for its +// template. +/* eslint-disable @gitlab/no-runtime-template-compiler */ import Vue from 'vue'; -import initUserInternalRegexPlaceholder from '../account_and_limits'; import IntegrationHelpText from '~/vue_shared/components/integrations_help_text.vue'; +import initUserInternalRegexPlaceholder from '../account_and_limits'; document.addEventListener('DOMContentLoaded', () => { initUserInternalRegexPlaceholder(); diff --git a/app/assets/javascripts/pages/admin/application_settings/index.js b/app/assets/javascripts/pages/admin/application_settings/index.js index cce30e6b12a..e7e74588bec 100644 --- a/app/assets/javascripts/pages/admin/application_settings/index.js +++ b/app/assets/javascripts/pages/admin/application_settings/index.js @@ -1,7 +1,8 @@ -import initSettingsPanels from '~/settings_panels'; +import initVariableList from '~/ci_variable_list'; import projectSelect from '~/project_select'; +import initSearchSettings from '~/search_settings'; import selfMonitor from '~/self_monitor'; -import initVariableList from '~/ci_variable_list'; +import initSettingsPanels from '~/settings_panels'; document.addEventListener('DOMContentLoaded', () => { if (gon.features?.ciInstanceVariablesUi) { @@ -11,4 +12,5 @@ document.addEventListener('DOMContentLoaded', () => { // Initialize expandable settings panels initSettingsPanels(); projectSelect(); + initSearchSettings(); }); diff --git a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js index b995cb1d3dd..bc1d4dd6122 100644 --- a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js +++ b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js @@ -1,6 +1,6 @@ +import { deprecatedCreateFlash as flash } from '../../../flash'; import axios from '../../../lib/utils/axios_utils'; import { __ } from '../../../locale'; -import { deprecatedCreateFlash as flash } from '../../../flash'; export default class PayloadPreviewer { constructor(trigger) { diff --git a/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js b/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js index 9e4c4d9f615..5a16716fe2d 100644 --- a/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js +++ b/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js @@ -1,9 +1,9 @@ import $ from 'jquery'; import { debounce } from 'lodash'; -import axios from '~/lib/utils/axios_utils'; import { deprecatedCreateFlash as flash } from '~/flash'; -import { __ } from '~/locale'; +import axios from '~/lib/utils/axios_utils'; import { textColorForBackground } from '~/lib/utils/color_utils'; +import { __ } from '~/locale'; export default () => { const $broadcastMessageColor = $('.js-broadcast-message-color'); diff --git a/app/assets/javascripts/pages/admin/clusters/index/index.js b/app/assets/javascripts/pages/admin/clusters/index/index.js index 744be65bfbe..a99e0dfa4f0 100644 --- a/app/assets/javascripts/pages/admin/clusters/index/index.js +++ b/app/assets/javascripts/pages/admin/clusters/index/index.js @@ -1,5 +1,5 @@ -import PersistentUserCallout from '~/persistent_user_callout'; import initClustersListApp from '~/clusters_list'; +import PersistentUserCallout from '~/persistent_user_callout'; document.addEventListener('DOMContentLoaded', () => { const callout = document.querySelector('.gcp-signup-offer'); diff --git a/app/assets/javascripts/pages/admin/clusters/show/index.js b/app/assets/javascripts/pages/admin/clusters/show/index.js index f87da6c7074..9d94973af0d 100644 --- a/app/assets/javascripts/pages/admin/clusters/show/index.js +++ b/app/assets/javascripts/pages/admin/clusters/show/index.js @@ -1,6 +1,6 @@ import ClustersBundle from '~/clusters/clusters_bundle'; -import initClusterHealth from '~/pages/projects/clusters/show/cluster_health'; import initIntegrationForm from '~/clusters/forms/show'; +import initClusterHealth from '~/pages/projects/clusters/show/cluster_health'; document.addEventListener('DOMContentLoaded', () => { new ClustersBundle(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/admin/cohorts/index.js b/app/assets/javascripts/pages/admin/cohorts/index.js deleted file mode 100644 index 1cc54df15a1..00000000000 --- a/app/assets/javascripts/pages/admin/cohorts/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import Vue from 'vue'; -import UsagePingDisabled from '~/admin/cohorts/components/usage_ping_disabled.vue'; - -document.addEventListener('DOMContentLoaded', () => { - const emptyStateContainer = document.getElementById('js-cohorts-empty-state'); - - if (!emptyStateContainer) return false; - - const { emptyStateSvgPath, enableUsagePingLink, docsLink } = emptyStateContainer.dataset; - - return new Vue({ - el: emptyStateContainer, - provide: { - svgPath: emptyStateSvgPath, - primaryButtonPath: enableUsagePingLink, - docsLink, - }, - render(h) { - return h(UsagePingDisabled); - }, - }); -}); diff --git a/app/assets/javascripts/pages/admin/groups/new/index.js b/app/assets/javascripts/pages/admin/groups/new/index.js index b94c999ed12..94f7cfd55be 100644 --- a/app/assets/javascripts/pages/admin/groups/new/index.js +++ b/app/assets/javascripts/pages/admin/groups/new/index.js @@ -1,6 +1,6 @@ +import initFilePickers from '~/file_pickers'; import BindInOut from '../../../../behaviors/bind_in_out'; import Group from '../../../../group'; -import initFilePickers from '~/file_pickers'; document.addEventListener('DOMContentLoaded', () => { BindInOut.initAll(); diff --git a/app/assets/javascripts/pages/admin/index.js b/app/assets/javascripts/pages/admin/index.js index 3f4e658fc8d..792a6eda14e 100644 --- a/app/assets/javascripts/pages/admin/index.js +++ b/app/assets/javascripts/pages/admin/index.js @@ -1,6 +1,6 @@ -import initAdmin from './admin'; import initAdminStatisticsPanel from '../../admin/statistics_panel/index'; import initVueAlerts from '../../vue_alerts'; +import initAdmin from './admin'; document.addEventListener('DOMContentLoaded', initVueAlerts); diff --git a/app/assets/javascripts/pages/admin/integrations/edit/index.js b/app/assets/javascripts/pages/admin/integrations/edit/index.js index 2d77f2686f7..ba4b271f09e 100644 --- a/app/assets/javascripts/pages/admin/integrations/edit/index.js +++ b/app/assets/javascripts/pages/admin/integrations/edit/index.js @@ -1,6 +1,5 @@ import IntegrationSettingsForm from '~/integrations/integration_settings_form'; import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics'; -import initAlertsSettings from '~/alerts_service_settings'; document.addEventListener('DOMContentLoaded', () => { const prometheusSettingsWrapper = document.querySelector('.js-prometheus-metrics-monitoring'); @@ -11,6 +10,4 @@ document.addEventListener('DOMContentLoaded', () => { const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring'); prometheusMetrics.loadActiveMetrics(); } - - initAlertsSettings(document.querySelector('.js-alerts-service-settings')); }); 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 d65593963ce..798eeee48bf 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 @@ -1,7 +1,7 @@ <script> import { GlModal } from '@gitlab/ui'; -import axios from '~/lib/utils/axios_utils'; import { deprecatedCreateFlash as createFlash } from '~/flash'; +import axios from '~/lib/utils/axios_utils'; import { redirectTo } from '~/lib/utils/url_utility'; import { __, s__ } from '~/locale'; diff --git a/app/assets/javascripts/pages/admin/jobs/index/index.js b/app/assets/javascripts/pages/admin/jobs/index/index.js index 4df210debb5..46ddb95299d 100644 --- a/app/assets/javascripts/pages/admin/jobs/index/index.js +++ b/app/assets/javascripts/pages/admin/jobs/index/index.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +import { BV_SHOW_MODAL } from '~/lib/utils/constants'; import Translate from '~/vue_shared/translate'; import stopJobsModal from './components/stop_jobs_modal.vue'; @@ -18,7 +19,7 @@ document.addEventListener('DOMContentLoaded', () => { mounted() { stopJobsButton.classList.remove('disabled'); stopJobsButton.addEventListener('click', () => { - this.$root.$emit('bv::show::modal', modalId, `#${buttonId}`); + this.$root.$emit(BV_SHOW_MODAL, modalId, `#${buttonId}`); }); }, render(createElement) { diff --git a/app/assets/javascripts/pages/admin/projects/index.js b/app/assets/javascripts/pages/admin/projects/index.js index fa2b0546c02..2286a085143 100644 --- a/app/assets/javascripts/pages/admin/projects/index.js +++ b/app/assets/javascripts/pages/admin/projects/index.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -import ProjectsList from '~/projects_list'; import NamespaceSelect from '~/namespace_select'; +import ProjectsList from '~/projects_list'; import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue'; function mountRemoveMemberModal() { diff --git a/app/assets/javascripts/pages/admin/projects/index/index.js b/app/assets/javascripts/pages/admin/projects/index/index.js index bf512ef395d..1971323abac 100644 --- a/app/assets/javascripts/pages/admin/projects/index/index.js +++ b/app/assets/javascripts/pages/admin/projects/index/index.js @@ -1,7 +1,8 @@ import Vue from 'vue'; -import Translate from '~/vue_shared/translate'; +import { BV_SHOW_MODAL } from '~/lib/utils/constants'; import csrf from '~/lib/utils/csrf'; +import Translate from '~/vue_shared/translate'; import deleteProjectModal from './components/delete_project_modal.vue'; @@ -24,7 +25,7 @@ document.addEventListener('DOMContentLoaded', () => { deleteModal.deleteProjectUrl = buttonProps.deleteProjectUrl; deleteModal.projectName = buttonProps.projectName; - this.$root.$emit('bv::show::modal', 'delete-project-modal'); + this.$root.$emit(BV_SHOW_MODAL, 'delete-project-modal'); }); }); }, diff --git a/app/assets/javascripts/pages/admin/runners/index.js b/app/assets/javascripts/pages/admin/runners/index.js index e60c6133c7c..f07ac1d8674 100644 --- a/app/assets/javascripts/pages/admin/runners/index.js +++ b/app/assets/javascripts/pages/admin/runners/index.js @@ -1,6 +1,7 @@ -import initFilteredSearch from '~/pages/search/init_filtered_search'; 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'; document.addEventListener('DOMContentLoaded', () => { initFilteredSearch({ @@ -8,4 +9,6 @@ document.addEventListener('DOMContentLoaded', () => { filteredSearchTokenKeys: AdminRunnersFilteredSearchTokenKeys, useDefaultState: true, }); + + initInstallRunner(); }); diff --git a/app/assets/javascripts/pages/admin/services/edit/index.js b/app/assets/javascripts/pages/admin/services/edit/index.js index e5e80d2f566..3d692ef4dcc 100644 --- a/app/assets/javascripts/pages/admin/services/edit/index.js +++ b/app/assets/javascripts/pages/admin/services/edit/index.js @@ -1,9 +1,6 @@ import IntegrationSettingsForm from '~/integrations/integration_settings_form'; -import initAlertsSettings from '~/alerts_service_settings'; document.addEventListener('DOMContentLoaded', () => { const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form'); integrationSettingsForm.init(); - - initAlertsSettings(document.querySelector('.js-alerts-service-settings')); }); diff --git a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue index 9c303cc6445..d2b83f980d7 100644 --- a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue +++ b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue @@ -85,38 +85,36 @@ export default { <template> <gl-modal ref="modal" modal-id="delete-user-modal" :title="modalTitle" kind="danger"> - <template> - <p> - <gl-sprintf :message="content"> - <template #username> - <strong>{{ username }}</strong> - </template> - <template #strong="props"> - <strong>{{ props.content }}</strong> - </template> - </gl-sprintf> - </p> + <p> + <gl-sprintf :message="content"> + <template #username> + <strong>{{ username }}</strong> + </template> + <template #strong="props"> + <strong>{{ props.content }}</strong> + </template> + </gl-sprintf> + </p> - <p> - <gl-sprintf :message="s__('AdminUsers|To confirm, type %{username}')"> - <template #username> - <code>{{ username }}</code> - </template> - </gl-sprintf> - </p> + <p> + <gl-sprintf :message="s__('AdminUsers|To confirm, type %{username}')"> + <template #username> + <code>{{ username }}</code> + </template> + </gl-sprintf> + </p> - <form ref="form" :action="deleteUserUrl" method="post" @submit.prevent> - <input ref="method" type="hidden" name="_method" value="delete" /> - <input :value="csrfToken" type="hidden" name="authenticity_token" /> - <gl-form-input - v-model="enteredUsername" - autofocus - type="text" - name="username" - autocomplete="off" - /> - </form> - </template> + <form ref="form" :action="deleteUserUrl" method="post" @submit.prevent> + <input ref="method" type="hidden" name="_method" value="delete" /> + <input :value="csrfToken" type="hidden" name="authenticity_token" /> + <gl-form-input + v-model="enteredUsername" + autofocus + type="text" + name="username" + autocomplete="off" + /> + </form> <template #modal-footer> <gl-button @click="onCancel">{{ s__('Cancel') }}</gl-button> <gl-button 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 24c9fa4cb3f..1dfea3f1e7b 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 @@ -12,6 +12,10 @@ export default { required: true, type: String, }, + selector: { + required: true, + type: String, + }, }, data() { return { @@ -34,22 +38,24 @@ export default { }, mounted() { - document.addEventListener('click', this.handleClick); - }, + /* + * Here we're looking for every button that needs to launch a modal + * on click, and then attaching a click event handler to show the modal + * if it's correctly configured. + * + * TODO: Replace this with integrated modal components https://gitlab.com/gitlab-org/gitlab/-/issues/320922 + */ + document.querySelectorAll(this.selector).forEach((button) => { + button.addEventListener('click', (e) => { + if (!button.dataset.glModalAction) return; - beforeDestroy() { - document.removeEventListener('click', this.handleClick); + e.preventDefault(); + this.show(button.dataset); + }); + }); }, methods: { - handleClick(e) { - const { glModalAction: action } = e.target.dataset; - if (!action) return; - - this.show(e.target.dataset); - e.preventDefault(); - }, - show(modalData) { const { glModalAction: requestedAction } = modalData; diff --git a/app/assets/javascripts/pages/admin/users/index.js b/app/assets/javascripts/pages/admin/users/index.js index 75a8284f5f8..b1079c3b068 100644 --- a/app/assets/javascripts/pages/admin/users/index.js +++ b/app/assets/javascripts/pages/admin/users/index.js @@ -1,11 +1,13 @@ import Vue from 'vue'; +import { initAdminUsersApp, initCohortsEmptyState } from '~/admin/users'; +import initTabs from '~/admin/users/tabs'; +import initConfirmModal from '~/confirm_modal'; +import csrf from '~/lib/utils/csrf'; import Translate from '~/vue_shared/translate'; import ModalManager from './components/user_modal_manager.vue'; -import csrf from '~/lib/utils/csrf'; -import initConfirmModal from '~/confirm_modal'; -import initAdminUsersApp from '~/admin/users'; +const CONFIRM_DELETE_BUTTON_SELECTOR = '.js-delete-user-modal-button'; const MODAL_TEXTS_CONTAINER_SELECTOR = '#js-modal-texts'; const MODAL_MANAGER_SELECTOR = '#js-delete-user-modal'; @@ -32,6 +34,8 @@ function loadModalsConfigurationFromHtml(modalsElement) { document.addEventListener('DOMContentLoaded', () => { Vue.use(Translate); + initAdminUsersApp(); + const modalConfiguration = loadModalsConfigurationFromHtml( document.querySelector(MODAL_TEXTS_CONTAINER_SELECTOR), ); @@ -49,6 +53,7 @@ document.addEventListener('DOMContentLoaded', () => { return h(ModalManager, { ref: 'manager', props: { + selector: CONFIRM_DELETE_BUTTON_SELECTOR, modalConfiguration, csrfToken: csrf.token, }, @@ -57,5 +62,6 @@ document.addEventListener('DOMContentLoaded', () => { }); initConfirmModal(); - initAdminUsersApp(); + initCohortsEmptyState(); + initTabs(); }); |