diff options
Diffstat (limited to 'app/assets/javascripts/pages/admin')
10 files changed, 136 insertions, 67 deletions
diff --git a/app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/index.js b/app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/index.js index bbaaeb55c65..a2fca238613 100644 --- a/app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/index.js +++ b/app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/index.js @@ -1,3 +1,3 @@ -import setup from 'ee_else_ce/admin/application_settings/setup_metrics_and_profiling'; +import setup from '~/admin/application_settings/setup_metrics_and_profiling'; document.addEventListener('DOMContentLoaded', setup); 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 e7b468f039f..f8fc53799a8 100644 --- a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js +++ b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js @@ -3,9 +3,9 @@ import { __ } from '../../../locale'; import { deprecatedCreateFlash as flash } from '../../../flash'; export default class PayloadPreviewer { - constructor(trigger, container) { + constructor(trigger) { this.trigger = trigger; - this.container = container; + this.container = document.querySelector(trigger.dataset.payloadSelector); this.isVisible = false; this.isInserted = false; } diff --git a/app/assets/javascripts/pages/admin/clusters/new/index.js b/app/assets/javascripts/pages/admin/clusters/new/index.js new file mode 100644 index 00000000000..876bab0b339 --- /dev/null +++ b/app/assets/javascripts/pages/admin/clusters/new/index.js @@ -0,0 +1,5 @@ +import initNewCluster from '~/clusters/new_cluster'; + +document.addEventListener('DOMContentLoaded', () => { + initNewCluster(); +}); diff --git a/app/assets/javascripts/pages/admin/cohorts/index.js b/app/assets/javascripts/pages/admin/cohorts/index.js new file mode 100644 index 00000000000..1cc54df15a1 --- /dev/null +++ b/app/assets/javascripts/pages/admin/cohorts/index.js @@ -0,0 +1,22 @@ +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/dev_ops_report/index.js b/app/assets/javascripts/pages/admin/dev_ops_report/index.js new file mode 100644 index 00000000000..643497003ba --- /dev/null +++ b/app/assets/javascripts/pages/admin/dev_ops_report/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue'; +import UserCallout from '~/user_callout'; +import UsagePingDisabled from '~/admin/dev_ops_report/components/usage_ping_disabled.vue'; + +document.addEventListener('DOMContentLoaded', () => { + // eslint-disable-next-line no-new + new UserCallout(); + + const emptyStateContainer = document.getElementById('js-devops-empty-state'); + + if (!emptyStateContainer) return false; + + const { emptyStateSvgPath, enableUsagePingLink, docsLink, isAdmin } = emptyStateContainer.dataset; + + return new Vue({ + el: emptyStateContainer, + provide: { + isAdmin: Boolean(isAdmin), + svgPath: emptyStateSvgPath, + primaryButtonPath: enableUsagePingLink, + docsLink, + }, + render(h) { + return h(UsagePingDisabled); + }, + }); +}); diff --git a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue index 8bb093da771..b92fc8d125d 100644 --- a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue +++ b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue @@ -1,11 +1,14 @@ <script> +import { GlSafeHtmlDirective as SafeHtml, GlModal } from '@gitlab/ui'; import { escape } from 'lodash'; -import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; -import { s__, sprintf } from '~/locale'; +import { __, s__, sprintf } from '~/locale'; export default { components: { - DeprecatedModal, + GlModal, + }, + directives: { + SafeHtml, }, props: { deleteProjectUrl: { @@ -62,51 +65,57 @@ export default { false, ); }, - primaryButtonLabel() { - return s__('AdminProjects|Delete project'); - }, canSubmit() { return this.enteredProjectName === this.projectName; }, + primaryProps() { + return { + text: s__('Delete project'), + attributes: [{ variant: 'danger' }, { category: 'primary' }, { disabled: !this.canSubmit }], + }; + }, }, methods: { onCancel() { this.enteredProjectName = ''; }, onSubmit() { + if (!this.canSubmit) { + return; + } this.$refs.form.submit(); this.enteredProjectName = ''; }, }, + cancelProps: { + text: __('Cancel'), + }, }; </script> <template> - <deprecated-modal - id="delete-project-modal" + <gl-modal + modal-id="delete-project-modal" :title="title" - :text="text" - :primary-button-label="primaryButtonLabel" - :submit-disabled="!canSubmit" - kind="danger" - @submit="onSubmit" + :action-primary="primaryProps" + :action-cancel="$options.cancelProps" + :ok-disabled="!canSubmit" + @primary="onSubmit" @cancel="onCancel" > - <template #body="props"> - <p v-html="props.text"></p> - <p v-html="confirmationTextLabel"></p> - <form ref="form" :action="deleteProjectUrl" method="post"> - <input ref="method" type="hidden" name="_method" value="delete" /> - <input :value="csrfToken" type="hidden" name="authenticity_token" /> - <input - v-model="enteredProjectName" - name="projectName" - class="form-control" - type="text" - aria-labelledby="input-label" - autocomplete="off" - /> - </form> - </template> - </deprecated-modal> + <p v-safe-html="text"></p> + <p v-safe-html="confirmationTextLabel"></p> + <form ref="form" :action="deleteProjectUrl" method="post"> + <input ref="method" type="hidden" name="_method" value="delete" /> + <input :value="csrfToken" type="hidden" name="authenticity_token" /> + <input + v-model="enteredProjectName" + name="projectName" + class="form-control" + type="text" + aria-labelledby="input-label" + autocomplete="off" + /> + </form> + </gl-modal> </template> diff --git a/app/assets/javascripts/pages/admin/projects/index/index.js b/app/assets/javascripts/pages/admin/projects/index/index.js index 6fa8760545d..ebb1a74e970 100644 --- a/app/assets/javascripts/pages/admin/projects/index/index.js +++ b/app/assets/javascripts/pages/admin/projects/index/index.js @@ -1,4 +1,3 @@ -import $ from 'jquery'; import Vue from 'vue'; import Translate from '~/vue_shared/translate'; @@ -17,6 +16,18 @@ document.addEventListener('DOMContentLoaded', () => { deleteProjectUrl: '', projectName: '', }, + mounted() { + const deleteProjectButtons = document.querySelectorAll('.delete-project-button'); + deleteProjectButtons.forEach(button => { + button.addEventListener('click', () => { + const buttonProps = button.dataset; + deleteModal.deleteProjectUrl = buttonProps.deleteProjectUrl; + deleteModal.projectName = buttonProps.projectName; + + this.$root.$emit('bv::show::modal', 'delete-project-modal'); + }); + }); + }, render(createElement) { return createElement(deleteProjectModal, { props: { @@ -27,12 +38,4 @@ document.addEventListener('DOMContentLoaded', () => { }); }, }); - - $(document).on('shown.bs.modal', event => { - if (event.relatedTarget.classList.contains('delete-project-button')) { - const buttonProps = event.relatedTarget.dataset; - deleteModal.deleteProjectUrl = buttonProps.deleteProjectUrl; - deleteModal.projectName = buttonProps.projectName; - } - }); }); diff --git a/app/assets/javascripts/pages/admin/services/index/index.js b/app/assets/javascripts/pages/admin/services/index/index.js new file mode 100644 index 00000000000..b2dfbb5a9fc --- /dev/null +++ b/app/assets/javascripts/pages/admin/services/index/index.js @@ -0,0 +1,6 @@ +import PersistentUserCallout from '~/persistent_user_callout'; + +document.addEventListener('DOMContentLoaded', () => { + const callout = document.querySelector('.js-service-templates-deprecated'); + PersistentUserCallout.factory(callout); +}); 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 e09b8e1bdd5..9c303cc6445 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 @@ -1,6 +1,5 @@ <script> -import { escape } from 'lodash'; -import { GlModal, GlButton, GlFormInput } from '@gitlab/ui'; +import { GlModal, GlButton, GlFormInput, GlSprintf } from '@gitlab/ui'; import { s__, sprintf } from '~/locale'; export default { @@ -8,6 +7,7 @@ export default { GlModal, GlButton, GlFormInput, + GlSprintf, }, props: { title: { @@ -52,27 +52,6 @@ export default { modalTitle() { return sprintf(this.title, { username: this.username }); }, - text() { - return sprintf( - this.content, - { - username: `<strong>${escape(this.username)}</strong>`, - strong_start: '<strong>', - strong_end: '</strong>', - }, - false, - ); - }, - confirmationTextLabel() { - return sprintf( - s__('AdminUsers|To confirm, type %{username}'), - { - username: `<code>${escape(this.username)}</code>`, - }, - false, - ); - }, - secondaryButtonLabel() { return s__('AdminUsers|Block user'); }, @@ -107,8 +86,25 @@ export default { <template> <gl-modal ref="modal" modal-id="delete-user-modal" :title="modalTitle" kind="danger"> <template> - <p v-html="text"></p> - <p v-html="confirmationTextLabel"></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> + <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" /> 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 index 4c335cfb018..4ca6ce6f1c3 100644 --- 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 @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/no-v-html */ import { GlModal } from '@gitlab/ui'; import { sprintf } from '~/locale'; |