diff options
Diffstat (limited to 'app/assets/javascripts/blob')
17 files changed, 141 insertions, 70 deletions
diff --git a/app/assets/javascripts/blob/components/blob_edit_content.vue b/app/assets/javascripts/blob/components/blob_edit_content.vue index 26ba7b98a39..6293f3bed1c 100644 --- a/app/assets/javascripts/blob/components/blob_edit_content.vue +++ b/app/assets/javascripts/blob/components/blob_edit_content.vue @@ -46,7 +46,7 @@ export default { blobGlobalId: this.fileGlobalId, }); - this.editor.onChangeContent(debounce(this.onFileChange.bind(this), 250)); + this.editor.onDidChangeModelContent(debounce(this.onFileChange.bind(this), 250)); window.requestAnimationFrame(() => { if (!performance.getEntriesByName(SNIPPET_MARK_BLOBS_CONTENT).length) { diff --git a/app/assets/javascripts/blob/components/blob_embeddable.vue b/app/assets/javascripts/blob/components/blob_embeddable.vue deleted file mode 100644 index 00b915ec8bd..00000000000 --- a/app/assets/javascripts/blob/components/blob_embeddable.vue +++ /dev/null @@ -1,41 +0,0 @@ -<script> -import { GlFormInputGroup, GlDeprecatedButton, GlIcon } from '@gitlab/ui'; -import { __ } from '~/locale'; - -export default { - components: { - GlFormInputGroup, - GlDeprecatedButton, - GlIcon, - }, - props: { - url: { - type: String, - required: true, - }, - }, - data() { - return { - optionValues: [ - // eslint-disable-next-line no-useless-escape - { name: __('Embed'), value: `<script src='${this.url}.js'><\/script>` }, - { name: __('Share'), value: this.url }, - ], - }; - }, -}; -</script> -<template> - <gl-form-input-group - id="embeddable-text" - :predefined-options="optionValues" - readonly - select-on-click - > - <template #append> - <gl-deprecated-button new-style data-clipboard-target="#embeddable-text"> - <gl-icon name="copy-to-clipboard" :title="__('Copy')" /> - </gl-deprecated-button> - </template> - </gl-form-input-group> -</template> diff --git a/app/assets/javascripts/blob/file_template_mediator.js b/app/assets/javascripts/blob/file_template_mediator.js index 4409d7a33cc..5058ca7122d 100644 --- a/app/assets/javascripts/blob/file_template_mediator.js +++ b/app/assets/javascripts/blob/file_template_mediator.js @@ -1,16 +1,18 @@ import $ from 'jquery'; + import Api from '~/api'; +import toast from '~/vue_shared/plugins/global_toast'; +import { __ } from '~/locale'; +import initPopover from '~/blob/suggest_gitlab_ci_yml'; import { deprecatedCreateFlash as Flash } from '../flash'; + import FileTemplateTypeSelector from './template_selectors/type_selector'; import BlobCiYamlSelector from './template_selectors/ci_yaml_selector'; import DockerfileSelector from './template_selectors/dockerfile_selector'; import GitignoreSelector from './template_selectors/gitignore_selector'; import LicenseSelector from './template_selectors/license_selector'; import MetricsDashboardSelector from './template_selectors/metrics_dashboard_selector'; -import toast from '~/vue_shared/plugins/global_toast'; -import { __ } from '~/locale'; -import initPopover from '~/blob/suggest_gitlab_ci_yml'; export default class FileTemplateMediator { constructor({ editor, currentAction, projectId }) { diff --git a/app/assets/javascripts/blob/file_template_selector.js b/app/assets/javascripts/blob/file_template_selector.js index 476901aae75..bd39aa2e16f 100644 --- a/app/assets/javascripts/blob/file_template_selector.js +++ b/app/assets/javascripts/blob/file_template_selector.js @@ -45,11 +45,15 @@ export default class FileTemplateSelector { } renderLoading() { - this.$loadingIcon.addClass('fa-spinner fa-spin').removeClass('fa-chevron-down'); + this.$loadingIcon + .addClass('gl-spinner gl-spinner-orange gl-spinner-sm') + .removeClass('fa-chevron-down'); } renderLoaded() { - this.$loadingIcon.addClass('fa-chevron-down').removeClass('fa-spinner fa-spin'); + this.$loadingIcon + .addClass('fa-chevron-down') + .removeClass('gl-spinner gl-spinner-orange gl-spinner-sm'); } reportSelection(options) { diff --git a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue index 90eafb75758..411241b72d5 100644 --- a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue +++ b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue @@ -1,5 +1,5 @@ <script> -import { GlModal, GlSprintf, GlLink } from '@gitlab/ui'; +import { GlModal, GlSprintf, GlLink, GlButton } from '@gitlab/ui'; import Cookies from 'js-cookie'; import { sprintf, s__, __ } from '~/locale'; import { glEmojiTag } from '~/emoji'; @@ -18,6 +18,8 @@ export default { helpMessage: s__( `MR widget|Take a look at our %{beginnerLinkStart}Beginner's Guide to Continuous Integration%{beginnerLinkEnd} and our %{exampleLinkStart}examples of GitLab CI/CD%{exampleLinkEnd} to learn more.`, ), + pipelinesButton: s__('MR widget|See your pipeline in action'), + mergeRequestButton: s__('MR widget|Back to the Merge request'), modalTitle: sprintf( __("That's it, well done!%{celebrate}"), { @@ -25,11 +27,13 @@ export default { }, false, ), - goToTrackValue: 10, + goToTrackValuePipelines: 10, + goToTrackValueMergeRequest: 20, trackEvent: 'click_button', components: { GlModal, GlSprintf, + GlButton, GlLink, }, mixins: [trackingMixin], @@ -38,6 +42,11 @@ export default { type: String, required: true, }, + projectMergeRequestsPath: { + type: String, + required: false, + default: '', + }, commitCookie: { type: String, required: true, @@ -59,6 +68,15 @@ export default { property: this.humanAccess, }; }, + goToMergeRequestPath() { + return this.commitCookiePath || this.projectMergeRequestsPath; + }, + commitCookiePath() { + const cookieVal = Cookies.get(this.commitCookie); + + if (cookieVal !== 'true') return cookieVal; + return ''; + }, }, mounted() { this.track(); @@ -100,17 +118,28 @@ export default { </template> </gl-sprintf> <template #modal-footer> - <a - ref="goto" + <gl-button + v-if="projectMergeRequestsPath" + ref="goToMergeRequest" + :href="goToMergeRequestPath" + :data-track-property="humanAccess" + :data-track-value="$options.goToTrackValueMergeRequest" + :data-track-event="$options.trackEvent" + :data-track-label="trackLabel" + > + {{ $options.mergeRequestButton }} + </gl-button> + <gl-button + ref="goToPipelines" :href="goToPipelinesPath" - class="btn btn-success" + variant="success" :data-track-property="humanAccess" - :data-track-value="$options.goToTrackValue" + :data-track-value="$options.goToTrackValuePipelines" :data-track-event="$options.trackEvent" :data-track-label="trackLabel" > - {{ __('See your pipeline in action') }} - </a> + {{ $options.pipelinesButton }} + </gl-button> </template> </gl-modal> </template> diff --git a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue index aff6a56cb0b..06f436adb8e 100644 --- a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue +++ b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue @@ -49,6 +49,10 @@ export default { type: String, required: true, }, + mergeRequestPath: { + type: String, + required: true, + }, }, data() { return { @@ -109,7 +113,7 @@ export default { :css-classes="['suggest-gitlab-ci-yml', 'ml-4']" > <template #title> - <span v-html="suggestTitle"></span> + <span>{{ suggestTitle }}</span> <span class="ml-auto"> <gl-button :aria-label="__('Close')" diff --git a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js index 3b67b3dd259..55edb852ee6 100644 --- a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js +++ b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js @@ -10,6 +10,7 @@ export default el => target: el.dataset.target, trackLabel: el.dataset.trackLabel, dismissKey: el.dataset.dismissKey, + mergeRequestPath: el.dataset.mergeRequestPath, humanAccess: el.dataset.humanAccess, }, }); diff --git a/app/assets/javascripts/blob/suggest_web_ide_ci/components/web_ide_alert.vue b/app/assets/javascripts/blob/suggest_web_ide_ci/components/web_ide_alert.vue new file mode 100644 index 00000000000..1308ca53e74 --- /dev/null +++ b/app/assets/javascripts/blob/suggest_web_ide_ci/components/web_ide_alert.vue @@ -0,0 +1,50 @@ +<script> +import { GlAlert, GlButton } from '@gitlab/ui'; +import axios from '~/lib/utils/axios_utils'; + +export default { + components: { + GlAlert, + GlButton, + }, + props: { + dismissEndpoint: { + type: String, + required: true, + }, + featureId: { + type: String, + required: true, + }, + editPath: { + type: String, + required: true, + }, + }, + data() { + return { + showAlert: true, + }; + }, + methods: { + dismissAlert() { + this.showAlert = false; + + return axios.post(this.dismissEndpoint, { + feature_name: this.featureId, + }); + }, + }, +}; +</script> + +<template> + <gl-alert v-if="showAlert" class="gl-mt-5" @dismiss="dismissAlert"> + {{ __('The Web IDE offers advanced syntax highlighting capabilities and more.') }} + <div class="gl-mt-5"> + <gl-button :href="editPath" category="primary" variant="info">{{ + __('Open Web IDE') + }}</gl-button> + </div> + </gl-alert> +</template> diff --git a/app/assets/javascripts/blob/suggest_web_ide_ci/index.js b/app/assets/javascripts/blob/suggest_web_ide_ci/index.js new file mode 100644 index 00000000000..eadf3cd6216 --- /dev/null +++ b/app/assets/javascripts/blob/suggest_web_ide_ci/index.js @@ -0,0 +1,20 @@ +import Vue from 'vue'; +import WebIdeAlert from './components/web_ide_alert.vue'; + +export default el => { + const { dismissEndpoint, featureId, editPath } = el.dataset; + + // eslint-disable-next-line no-new + new Vue({ + el, + render(createElement) { + return createElement(WebIdeAlert, { + props: { + dismissEndpoint, + featureId, + editPath, + }, + }); + }, + }); +}; diff --git a/app/assets/javascripts/blob/template_selector.js b/app/assets/javascripts/blob/template_selector.js index 2427e25a17d..257458138dc 100644 --- a/app/assets/javascripts/blob/template_selector.js +++ b/app/assets/javascripts/blob/template_selector.js @@ -1,7 +1,7 @@ /* eslint-disable class-methods-use-this */ import $ from 'jquery'; -import '~/gl_dropdown'; +import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; export default class TemplateSelector { constructor({ dropdown, data, pattern, wrapper, editor, $input } = {}) { @@ -19,7 +19,7 @@ export default class TemplateSelector { } initDropdown(dropdown, data) { - return $(dropdown).glDropdown({ + return initDeprecatedJQueryDropdown($(dropdown), { data, filterable: true, selectable: true, diff --git a/app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js b/app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js index d819452df68..3a4e86fe572 100644 --- a/app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js +++ b/app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js @@ -1,4 +1,5 @@ import FileTemplateSelector from '../file_template_selector'; +import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; export default class BlobCiYamlSelector extends FileTemplateSelector { constructor({ mediator }) { @@ -15,7 +16,7 @@ export default class BlobCiYamlSelector extends FileTemplateSelector { initDropdown() { // maybe move to super class as well - this.$dropdown.glDropdown({ + initDeprecatedJQueryDropdown(this.$dropdown, { data: this.$dropdown.data('data'), filterable: true, selectable: true, diff --git a/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js b/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js index 7d5e98889d3..3cb4bb83930 100644 --- a/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js +++ b/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js @@ -1,5 +1,6 @@ import FileTemplateSelector from '../file_template_selector'; import { __ } from '~/locale'; +import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; export default class DockerfileSelector extends FileTemplateSelector { constructor({ mediator }) { @@ -16,7 +17,7 @@ export default class DockerfileSelector extends FileTemplateSelector { initDropdown() { // maybe move to super class as well - this.$dropdown.glDropdown({ + initDeprecatedJQueryDropdown(this.$dropdown, { data: this.$dropdown.data('data'), filterable: true, selectable: true, diff --git a/app/assets/javascripts/blob/template_selectors/gitignore_selector.js b/app/assets/javascripts/blob/template_selectors/gitignore_selector.js index 39a8937641d..1721230dcb7 100644 --- a/app/assets/javascripts/blob/template_selectors/gitignore_selector.js +++ b/app/assets/javascripts/blob/template_selectors/gitignore_selector.js @@ -1,4 +1,5 @@ import FileTemplateSelector from '../file_template_selector'; +import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; export default class BlobGitignoreSelector extends FileTemplateSelector { constructor({ mediator }) { @@ -14,7 +15,7 @@ export default class BlobGitignoreSelector extends FileTemplateSelector { } initDropdown() { - this.$dropdown.glDropdown({ + initDeprecatedJQueryDropdown(this.$dropdown, { data: this.$dropdown.data('data'), filterable: true, selectable: true, diff --git a/app/assets/javascripts/blob/template_selectors/license_selector.js b/app/assets/javascripts/blob/template_selectors/license_selector.js index f4041835a7d..dafde82b1e0 100644 --- a/app/assets/javascripts/blob/template_selectors/license_selector.js +++ b/app/assets/javascripts/blob/template_selectors/license_selector.js @@ -1,4 +1,5 @@ import FileTemplateSelector from '../file_template_selector'; +import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; export default class BlobLicenseSelector extends FileTemplateSelector { constructor({ mediator }) { @@ -14,7 +15,7 @@ export default class BlobLicenseSelector extends FileTemplateSelector { } initDropdown() { - this.$dropdown.glDropdown({ + initDeprecatedJQueryDropdown(this.$dropdown, { data: this.$dropdown.data('data'), filterable: true, selectable: true, diff --git a/app/assets/javascripts/blob/template_selectors/metrics_dashboard_selector.js b/app/assets/javascripts/blob/template_selectors/metrics_dashboard_selector.js index b4accaadfa3..9e698bfea5d 100644 --- a/app/assets/javascripts/blob/template_selectors/metrics_dashboard_selector.js +++ b/app/assets/javascripts/blob/template_selectors/metrics_dashboard_selector.js @@ -1,4 +1,5 @@ import FileTemplateSelector from '../file_template_selector'; +import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; export default class MetricsDashboardSelector extends FileTemplateSelector { constructor({ mediator }) { @@ -14,7 +15,7 @@ export default class MetricsDashboardSelector extends FileTemplateSelector { } initDropdown() { - this.$dropdown.glDropdown({ + initDeprecatedJQueryDropdown(this.$dropdown, { data: this.$dropdown.data('data'), filterable: true, selectable: true, diff --git a/app/assets/javascripts/blob/template_selectors/type_selector.js b/app/assets/javascripts/blob/template_selectors/type_selector.js index cb4e1aaa9ac..01625911815 100644 --- a/app/assets/javascripts/blob/template_selectors/type_selector.js +++ b/app/assets/javascripts/blob/template_selectors/type_selector.js @@ -1,4 +1,5 @@ import FileTemplateSelector from '../file_template_selector'; +import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; export default class FileTemplateTypeSelector extends FileTemplateSelector { constructor({ mediator, dropdownData }) { @@ -12,7 +13,7 @@ export default class FileTemplateTypeSelector extends FileTemplateSelector { } initDropdown() { - this.$dropdown.glDropdown({ + initDeprecatedJQueryDropdown(this.$dropdown, { data: this.config.dropdownData, filterable: false, selectable: true, diff --git a/app/assets/javascripts/blob/utils.js b/app/assets/javascripts/blob/utils.js index a0211c8bb8e..8043c0bbc07 100644 --- a/app/assets/javascripts/blob/utils.js +++ b/app/assets/javascripts/blob/utils.js @@ -1,20 +1,16 @@ import Editor from '~/editor/editor_lite'; export function initEditorLite({ el, ...args }) { - if (!el) { - throw new Error(`"el" parameter is required to initialize Editor`); - } const editor = new Editor({ scrollbar: { alwaysConsumeMouseWheel: false, }, }); - editor.createInstance({ + + return editor.createInstance({ el, ...args, }); - - return editor; } export default () => ({}); |