diff options
Diffstat (limited to 'app/assets/javascripts/static_site_editor/components')
12 files changed, 0 insertions, 722 deletions
diff --git a/app/assets/javascripts/static_site_editor/components/app.vue b/app/assets/javascripts/static_site_editor/components/app.vue deleted file mode 100644 index 365fc7ce6e9..00000000000 --- a/app/assets/javascripts/static_site_editor/components/app.vue +++ /dev/null @@ -1,13 +0,0 @@ -<script> -export default { - props: { - mergeRequestsIllustrationPath: { - type: String, - required: true, - }, - }, -}; -</script> -<template> - <router-view :merge-requests-illustration-path="mergeRequestsIllustrationPath" /> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/edit_area.vue b/app/assets/javascripts/static_site_editor/components/edit_area.vue deleted file mode 100644 index 2f2efe290ec..00000000000 --- a/app/assets/javascripts/static_site_editor/components/edit_area.vue +++ /dev/null @@ -1,190 +0,0 @@ -<script> -import { EDITOR_TYPES } from '~/static_site_editor/rich_content_editor/constants'; -import RichContentEditor from '~/static_site_editor/rich_content_editor/rich_content_editor.vue'; -import parseSourceFile from '~/static_site_editor/services/parse_source_file'; -import imageRepository from '../image_repository'; -import formatter from '../services/formatter'; -import renderImage from '../services/renderers/render_image'; -import templater from '../services/templater'; -import EditDrawer from './edit_drawer.vue'; -import EditHeader from './edit_header.vue'; -import PublishToolbar from './publish_toolbar.vue'; -import UnsavedChangesConfirmDialog from './unsaved_changes_confirm_dialog.vue'; - -export default { - components: { - RichContentEditor, - PublishToolbar, - EditHeader, - EditDrawer, - UnsavedChangesConfirmDialog, - }, - props: { - title: { - type: String, - required: true, - }, - content: { - type: String, - required: true, - }, - savingChanges: { - type: Boolean, - required: true, - }, - returnUrl: { - type: String, - required: false, - default: '', - }, - branch: { - type: String, - required: true, - }, - baseUrl: { - type: String, - required: true, - }, - mounts: { - type: Array, - required: true, - }, - project: { - type: String, - required: true, - }, - imageRoot: { - type: String, - required: true, - }, - }, - data() { - return { - formattedMarkdown: null, - parsedSource: parseSourceFile(this.preProcess(true, this.content)), - editorMode: EDITOR_TYPES.wysiwyg, - hasMatter: false, - isDrawerOpen: false, - isModified: false, - isSaveable: false, - }; - }, - imageRepository: imageRepository(), - computed: { - editableContent() { - return this.parsedSource.content(this.isWysiwygMode); - }, - editableMatter() { - return this.isDrawerOpen ? this.parsedSource.matter() : {}; - }, - hasSettings() { - return this.hasMatter && this.isWysiwygMode; - }, - isWysiwygMode() { - return this.editorMode === EDITOR_TYPES.wysiwyg; - }, - customRenderers() { - const imageRenderer = renderImage.build( - this.mounts, - this.project, - this.branch, - this.baseUrl, - this.$options.imageRepository, - ); - return { - image: [imageRenderer], - }; - }, - }, - created() { - this.refreshEditHelpers(); - }, - methods: { - preProcess(isWrap, value) { - const formattedContent = formatter(value); - const templatedContent = isWrap - ? templater.wrap(formattedContent) - : templater.unwrap(formattedContent); - return templatedContent; - }, - refreshEditHelpers() { - const { isModified, hasMatter, isMatterValid } = this.parsedSource; - this.isModified = isModified(); - this.hasMatter = hasMatter(); - const hasValidMatter = this.hasMatter ? isMatterValid() : true; - this.isSaveable = this.isModified && hasValidMatter; - }, - onDrawerOpen() { - this.isDrawerOpen = true; - this.refreshEditHelpers(); - }, - onDrawerClose() { - this.isDrawerOpen = false; - this.refreshEditHelpers(); - }, - onInputChange(newVal) { - this.parsedSource.syncContent(newVal, this.isWysiwygMode); - this.refreshEditHelpers(); - }, - onModeChange(mode) { - this.editorMode = mode; - - const preProcessedContent = this.preProcess(this.isWysiwygMode, this.editableContent); - this.$refs.editor.resetInitialValue(preProcessedContent); - }, - onUpdateSettings(settings) { - this.parsedSource.syncMatter(settings); - }, - onUploadImage({ file, imageUrl }) { - this.$options.imageRepository.add(file, imageUrl); - }, - onSubmit() { - const preProcessedContent = this.preProcess(false, this.parsedSource.content()); - this.$emit('submit', { - formattedMarkdown: this.formattedMarkdown, - content: preProcessedContent, - images: this.$options.imageRepository.getAll(), - }); - }, - onEditorLoad({ formattedMarkdown }) { - this.formattedMarkdown = formattedMarkdown; - }, - }, -}; -</script> -<template> - <div class="d-flex flex-grow-1 flex-column h-100"> - <edit-header class="py-2" :title="title" /> - <edit-drawer - v-if="hasMatter" - :is-open="isDrawerOpen" - :settings="editableMatter" - @close="onDrawerClose" - @updateSettings="onUpdateSettings" - /> - <rich-content-editor - ref="editor" - :content="editableContent" - :initial-edit-type="editorMode" - :image-root="imageRoot" - :options="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ { - customRenderers, - } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" - class="mb-9 pb-6 h-100" - @modeChange="onModeChange" - @input="onInputChange" - @uploadImage="onUploadImage" - @load="onEditorLoad" - /> - <unsaved-changes-confirm-dialog :modified="isSaveable" /> - <publish-toolbar - class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full" - :has-settings="hasSettings" - :return-url="returnUrl" - :saveable="isSaveable" - :saving-changes="savingChanges" - @editSettings="onDrawerOpen" - @submit="onSubmit" - /> - </div> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/edit_drawer.vue b/app/assets/javascripts/static_site_editor/components/edit_drawer.vue deleted file mode 100644 index 781e23cd6c8..00000000000 --- a/app/assets/javascripts/static_site_editor/components/edit_drawer.vue +++ /dev/null @@ -1,27 +0,0 @@ -<script> -import { GlDrawer } from '@gitlab/ui'; -import FrontMatterControls from './front_matter_controls.vue'; - -export default { - components: { - GlDrawer, - FrontMatterControls, - }, - props: { - isOpen: { - type: Boolean, - required: true, - }, - settings: { - type: Object, - required: true, - }, - }, -}; -</script> -<template> - <gl-drawer class="gl-pt-8" :open="isOpen" @close="$emit('close')"> - <template #title>{{ __('Page settings') }}</template> - <front-matter-controls :settings="settings" @updateSettings="$emit('updateSettings', $event)" /> - </gl-drawer> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/edit_header.vue b/app/assets/javascripts/static_site_editor/components/edit_header.vue deleted file mode 100644 index 5660bfbe5ae..00000000000 --- a/app/assets/javascripts/static_site_editor/components/edit_header.vue +++ /dev/null @@ -1,23 +0,0 @@ -<script> -import { DEFAULT_HEADING } from '../constants'; - -export default { - props: { - title: { - type: String, - required: false, - default: '', - }, - }, - computed: { - heading() { - return this.title || DEFAULT_HEADING; - }, - }, -}; -</script> -<template> - <div> - <h3 ref="sseHeading">{{ heading }}</h3> - </div> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/edit_meta_controls.vue b/app/assets/javascripts/static_site_editor/components/edit_meta_controls.vue deleted file mode 100644 index c6247632b6e..00000000000 --- a/app/assets/javascripts/static_site_editor/components/edit_meta_controls.vue +++ /dev/null @@ -1,130 +0,0 @@ -<script> -import { - GlDropdown, - GlDropdownDivider, - GlDropdownItem, - GlForm, - GlFormGroup, - GlFormInput, - GlFormTextarea, -} from '@gitlab/ui'; - -import { __ } from '~/locale'; - -export default { - components: { - GlDropdown, - GlDropdownDivider, - GlDropdownItem, - GlForm, - GlFormGroup, - GlFormInput, - GlFormTextarea, - }, - props: { - title: { - type: String, - required: true, - }, - description: { - type: String, - required: true, - }, - templates: { - type: Array, - required: false, - default: null, - }, - currentTemplate: { - type: Object, - required: false, - default: null, - }, - }, - computed: { - dropdownLabel() { - return this.currentTemplate ? this.currentTemplate.name : __('None'); - }, - hasTemplates() { - return this.templates?.length > 0; - }, - }, - mounted() { - this.preSelect(); - }, - methods: { - getId(type, key) { - return `sse-merge-request-meta-${type}-${key}`; - }, - preSelect() { - this.$nextTick(() => { - this.$refs.title.$el.select(); - }); - }, - onChangeTemplate(template) { - this.$emit('changeTemplate', template || null); - }, - onUpdate(field, value) { - const payload = { - title: this.title, - description: this.description, - [field]: value, - }; - this.$emit('updateSettings', payload); - }, - }, -}; -</script> - -<template> - <gl-form> - <gl-form-group - key="title" - :label="__('Brief title about the change')" - :label-for="getId('control', 'title')" - > - <gl-form-input - :id="getId('control', 'title')" - ref="title" - :value="title" - type="text" - @input="onUpdate('title', $event)" - /> - </gl-form-group> - - <gl-form-group - v-if="hasTemplates" - key="template" - :label="__('Description template')" - :label-for="getId('control', 'template')" - > - <gl-dropdown :text="dropdownLabel"> - <gl-dropdown-item key="none" @click="onChangeTemplate(null)"> - {{ __('None') }} - </gl-dropdown-item> - - <gl-dropdown-divider /> - - <gl-dropdown-item - v-for="template in templates" - :key="template.key" - @click="onChangeTemplate(template)" - > - {{ template.name }} - </gl-dropdown-item> - </gl-dropdown> - </gl-form-group> - - <gl-form-group - key="description" - :label="__('Goal of the changes and what reviewers should be aware of')" - :label-for="getId('control', 'description')" - > - <gl-form-textarea - :id="getId('control', 'description')" - :value="description" - @input="onUpdate('description', $event)" - /> - </gl-form-group> - </gl-form> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/edit_meta_modal.vue b/app/assets/javascripts/static_site_editor/components/edit_meta_modal.vue deleted file mode 100644 index e69a6b8cd69..00000000000 --- a/app/assets/javascripts/static_site_editor/components/edit_meta_modal.vue +++ /dev/null @@ -1,126 +0,0 @@ -<script> -import { GlModal } from '@gitlab/ui'; -import Api from '~/api'; -import { __, s__, sprintf } from '~/locale'; -import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; - -import { ISSUABLE_TYPE, MR_META_LOCAL_STORAGE_KEY } from '../constants'; -import EditMetaControls from './edit_meta_controls.vue'; - -export default { - components: { - GlModal, - EditMetaControls, - LocalStorageSync, - }, - props: { - sourcePath: { - type: String, - required: true, - }, - namespace: { - type: String, - required: true, - }, - project: { - type: String, - required: true, - }, - }, - data() { - return { - clearStorage: false, - currentTemplate: null, - mergeRequestTemplates: null, - mergeRequestMeta: { - title: sprintf(s__(`StaticSiteEditor|Update %{sourcePath} file`), { - sourcePath: this.sourcePath, - }), - description: s__('StaticSiteEditor|Copy update'), - }, - }; - }, - computed: { - disabled() { - return this.mergeRequestMeta.title === ''; - }, - primaryProps() { - return { - text: __('Submit changes'), - attributes: [{ variant: 'success' }, { disabled: this.disabled }], - }; - }, - secondaryProps() { - return { - text: __('Keep editing'), - attributes: [{ variant: 'default' }], - }; - }, - }, - mounted() { - this.initTemplates(); - }, - methods: { - hide() { - this.$refs.modal.hide(); - }, - initTemplates() { - const { namespace, project } = this; - Api.issueTemplates(namespace, project, ISSUABLE_TYPE, (err, templates) => { - if (err) return; // Error handled by global AJAX error handler - this.mergeRequestTemplates = templates; - }); - }, - show() { - this.$refs.modal.show(); - }, - onPrimary() { - this.$emit('primary', this.mergeRequestMeta); - this.clearStorage = true; - }, - onSecondary() { - this.hide(); - }, - onChangeTemplate(template) { - this.currentTemplate = template; - - const description = this.currentTemplate ? this.currentTemplate.content : ''; - const mergeRequestMeta = { ...this.mergeRequestMeta, description }; - this.onUpdateSettings(mergeRequestMeta); - }, - onUpdateSettings(mergeRequestMeta) { - this.mergeRequestMeta = { ...mergeRequestMeta }; - }, - }, - storageKey: MR_META_LOCAL_STORAGE_KEY, -}; -</script> - -<template> - <gl-modal - ref="modal" - modal-id="edit-meta-modal" - :title="__('Submit your changes')" - :action-primary="primaryProps" - :action-secondary="secondaryProps" - size="sm" - @primary="onPrimary" - @secondary="onSecondary" - @hide="() => $emit('hide')" - > - <local-storage-sync - v-model="mergeRequestMeta" - :storage-key="$options.storageKey" - :clear="clearStorage" - /> - <edit-meta-controls - ref="editMetaControls" - :title="mergeRequestMeta.title" - :description="mergeRequestMeta.description" - :templates="mergeRequestTemplates" - :current-template="currentTemplate" - @updateSettings="onUpdateSettings" - @changeTemplate="onChangeTemplate" - /> - </gl-modal> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/front_matter_controls.vue b/app/assets/javascripts/static_site_editor/components/front_matter_controls.vue deleted file mode 100644 index dad3907c3ff..00000000000 --- a/app/assets/javascripts/static_site_editor/components/front_matter_controls.vue +++ /dev/null @@ -1,57 +0,0 @@ -<script> -import { GlForm, GlFormInput, GlFormGroup } from '@gitlab/ui'; -import { humanize } from '~/lib/utils/text_utility'; - -export default { - components: { - GlForm, - GlFormInput, - GlFormGroup, - }, - props: { - settings: { - type: Object, - required: true, - }, - }, - data() { - return { - editableSettings: { ...this.settings }, - }; - }, - methods: { - getId(type, key) { - return `sse-front-matter-${type}-${key}`; - }, - getIsSupported(val) { - return ['string', 'number'].includes(typeof val); - }, - getLabel(str) { - return humanize(str); - }, - onUpdate() { - this.$emit('updateSettings', { ...this.editableSettings }); - }, - }, -}; -</script> -<template> - <gl-form> - <template v-for="(value, key) of editableSettings"> - <gl-form-group - v-if="getIsSupported(value)" - :id="getId('form-group', key)" - :key="key" - :label="getLabel(key)" - :label-for="getId('control', key)" - > - <gl-form-input - :id="getId('control', key)" - v-model.lazy="editableSettings[key]" - type="text" - @input="onUpdate" - /> - </gl-form-group> - </template> - </gl-form> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/invalid_content_message.vue b/app/assets/javascripts/static_site_editor/components/invalid_content_message.vue deleted file mode 100644 index fef87057307..00000000000 --- a/app/assets/javascripts/static_site_editor/components/invalid_content_message.vue +++ /dev/null @@ -1,29 +0,0 @@ -<script> -import { GlButton } from '@gitlab/ui'; - -export default { - components: { - GlButton, - }, -}; -</script> - -<template> - <div> - <h3>{{ s__('StaticSiteEditor|Incompatible file content') }}</h3> - <p> - {{ - s__( - 'StaticSiteEditor|The Static Site Editor is currently configured to only edit Markdown content on pages generated from Middleman. Visit the documentation to learn more about configuring your site to use the Static Site Editor.', - ) - }} - </p> - <div> - <gl-button - ref="documentationButton" - href="https://gitlab.com/gitlab-org/project-templates/static-site-editor-middleman" - >{{ s__('StaticSiteEditor|View documentation') }}</gl-button - > - </div> - </div> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue deleted file mode 100644 index 3bb5a0b8fd5..00000000000 --- a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue +++ /dev/null @@ -1,57 +0,0 @@ -<script> -import { GlButton } from '@gitlab/ui'; - -export default { - components: { - GlButton, - }, - props: { - hasSettings: { - type: Boolean, - required: false, - default: false, - }, - returnUrl: { - type: String, - required: false, - default: '', - }, - saveable: { - type: Boolean, - required: false, - default: false, - }, - savingChanges: { - type: Boolean, - required: false, - default: false, - }, - }, -}; -</script> -<template> - <div class="d-flex bg-light border-top justify-content-end align-items-center py-3 px-4"> - <div> - <gl-button v-if="returnUrl" ref="returnUrlLink" :href="returnUrl">{{ - s__('StaticSiteEditor|Return to site') - }}</gl-button> - <gl-button - v-if="hasSettings" - ref="settings" - :disabled="savingChanges" - @click="$emit('editSettings')" - > - {{ __('Page settings') }} - </gl-button> - <gl-button - ref="submit" - variant="success" - :disabled="!saveable" - :loading="savingChanges" - @click="$emit('submit')" - > - {{ __('Submit changes...') }} - </gl-button> - </div> - </div> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/skeleton_loader.vue b/app/assets/javascripts/static_site_editor/components/skeleton_loader.vue deleted file mode 100644 index 1b6179883aa..00000000000 --- a/app/assets/javascripts/static_site_editor/components/skeleton_loader.vue +++ /dev/null @@ -1,19 +0,0 @@ -<script> -import { GlSkeletonLoader } from '@gitlab/ui'; - -export default { - components: { - GlSkeletonLoader, - }, -}; -</script> -<template> - <gl-skeleton-loader :width="500" :height="102"> - <rect width="500" height="16" rx="4" /> - <rect y="20" width="375" height="16" rx="4" /> - <rect x="380" y="20" width="120" height="16" rx="4" /> - <rect y="40" width="250" height="16" rx="4" /> - <rect x="255" y="40" width="150" height="16" rx="4" /> - <rect x="410" y="40" width="90" height="16" rx="4" /> - </gl-skeleton-loader> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/submit_changes_error.vue b/app/assets/javascripts/static_site_editor/components/submit_changes_error.vue deleted file mode 100644 index c5b6c685124..00000000000 --- a/app/assets/javascripts/static_site_editor/components/submit_changes_error.vue +++ /dev/null @@ -1,24 +0,0 @@ -<script> -import { GlAlert, GlButton } from '@gitlab/ui'; - -export default { - components: { - GlAlert, - GlButton, - }, - props: { - error: { - type: String, - required: true, - }, - }, -}; -</script> -<template> - <gl-alert variant="danger" dismissible @dismiss="$emit('dismiss')"> - {{ s__('StaticSiteEditor|An error occurred while submitting your changes.') }} {{ error }} - <template #actions> - <gl-button variant="danger" @click="$emit('retry')">{{ __('Retry') }}</gl-button> - </template> - </gl-alert> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/unsaved_changes_confirm_dialog.vue b/app/assets/javascripts/static_site_editor/components/unsaved_changes_confirm_dialog.vue deleted file mode 100644 index 255f029bd27..00000000000 --- a/app/assets/javascripts/static_site_editor/components/unsaved_changes_confirm_dialog.vue +++ /dev/null @@ -1,27 +0,0 @@ -<script> -export default { - props: { - modified: { - type: Boolean, - required: false, - default: false, - }, - }, - created() { - window.addEventListener('beforeunload', this.requestConfirmation); - }, - destroyed() { - window.removeEventListener('beforeunload', this.requestConfirmation); - }, - methods: { - requestConfirmation(e) { - if (this.modified) { - e.preventDefault(); - // eslint-disable-next-line no-param-reassign - e.returnValue = ''; - } - }, - }, - render: () => null, -}; -</script> |