diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-18 13:16:36 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-18 13:16:36 +0000 |
commit | 311b0269b4eb9839fa63f80c8d7a58f32b8138a0 (patch) | |
tree | 07e7870bca8aed6d61fdcc810731c50d2c40af47 /app/assets/javascripts/ide | |
parent | 27909cef6c4170ed9205afa7426b8d3de47cbb0c (diff) | |
download | gitlab-ce-311b0269b4eb9839fa63f80c8d7a58f32b8138a0.tar.gz |
Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42
Diffstat (limited to 'app/assets/javascripts/ide')
5 files changed, 144 insertions, 6 deletions
diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue index 96cb4f3d495..55ae5501cdb 100644 --- a/app/assets/javascripts/ide/components/jobs/detail.vue +++ b/app/assets/javascripts/ide/components/jobs/detail.vue @@ -1,5 +1,5 @@ <script> -import { GlTooltipDirective, GlButton, GlIcon } from '@gitlab/ui'; +import { GlTooltipDirective, GlButton, GlIcon, GlSafeHtmlDirective } from '@gitlab/ui'; import { throttle } from 'lodash'; import { mapActions, mapState } from 'vuex'; import { __ } from '../../../locale'; @@ -14,6 +14,7 @@ const scrollPositions = { export default { directives: { GlTooltip: GlTooltipDirective, + SafeHtml: GlSafeHtmlDirective, }, components: { GlButton, @@ -100,8 +101,8 @@ export default { <pre ref="buildJobLog" class="build-log mb-0 h-100 mr-3" @scroll="scrollBuildLog"> <code v-show="!detailJob.isLoading" + v-safe-html="jobOutput" class="bash" - v-html="jobOutput /* eslint-disable-line vue/no-v-html */" > </code> <div diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue index e8541d3a4c3..1c5a00568eb 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue @@ -2,7 +2,7 @@ import { GlModal, GlButton } from '@gitlab/ui'; import { mapActions, mapState, mapGetters } from 'vuex'; import createFlash from '~/flash'; -import { __, sprintf, s__ } from '~/locale'; +import { __, sprintf } from '~/locale'; import { modalTypes } from '../../constants'; import { trimPathComponents, getPathParent } from '../../utils'; @@ -58,7 +58,7 @@ export default { if (this.modalType === modalTypes.rename) { if (this.entries[this.entryName] && !this.entries[this.entryName].deleted) { createFlash({ - message: sprintf(s__('The name "%{name}" is already taken in this directory.'), { + message: sprintf(__('The name "%{name}" is already taken in this directory.'), { name: this.entryName, }), fadeTransition: false, diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue index 907ac496982..e1caf1ba44a 100644 --- a/app/assets/javascripts/ide/components/pipelines/list.vue +++ b/app/assets/javascripts/ide/components/pipelines/list.vue @@ -87,7 +87,7 @@ export default { v-if="!latestPipeline" :empty-state-svg-path="pipelinesEmptyStateSvgPath" :can-set-ci="true" - class="mb-auto mt-auto" + class="gl-p-5" /> <gl-alert v-else-if="latestPipeline.yamlError" diff --git a/app/assets/javascripts/ide/components/shared/commit_message_field.vue b/app/assets/javascripts/ide/components/shared/commit_message_field.vue new file mode 100644 index 00000000000..7fca7429ad7 --- /dev/null +++ b/app/assets/javascripts/ide/components/shared/commit_message_field.vue @@ -0,0 +1,137 @@ +<script> +import { GlIcon, GlPopover } from '@gitlab/ui'; +import { __, sprintf } from '~/locale'; +import { MAX_TITLE_LENGTH, MAX_BODY_LENGTH } from '../../constants'; + +export default { + components: { + GlIcon, + GlPopover, + }, + props: { + text: { + type: String, + required: true, + }, + placeholder: { + type: String, + required: true, + }, + }, + data() { + return { + scrollTop: 0, + isFocused: false, + }; + }, + computed: { + allLines() { + return this.text.split('\n').map((line, i) => ({ + text: line.substr(0, this.getLineLength(i)) || ' ', + highlightedText: line.substr(this.getLineLength(i)), + })); + }, + }, + methods: { + handleScroll() { + if (this.$refs.textarea) { + this.$nextTick(() => { + this.scrollTop = this.$refs.textarea.scrollTop; + }); + } + }, + getLineLength(i) { + return i === 0 ? MAX_TITLE_LENGTH : MAX_BODY_LENGTH; + }, + onInput(e) { + this.$emit('input', e.target.value); + }, + onCtrlEnter() { + if (!this.isFocused) return; + this.$emit('submit'); + }, + updateIsFocused(isFocused) { + this.isFocused = isFocused; + }, + }, + popoverOptions: { + triggers: 'hover', + placement: 'top', + content: sprintf( + __(` + The character highlighter helps you keep the subject line to %{titleLength} characters + and wrap the body at %{bodyLength} so they are readable in git. + `), + { titleLength: MAX_TITLE_LENGTH, bodyLength: MAX_BODY_LENGTH }, + ), + }, +}; +</script> + +<template> + <fieldset + class="gl-rounded-base gl-inset-border-1-gray-400 gl-py-4 gl-px-5" + :class="{ + 'gl-outline-none! gl-focus-ring-border-1-gray-900!': isFocused, + }" + > + <div + v-once + class="gl-display-flex gl-align-items-center gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-pb-3 gl-mb-3" + > + <div>{{ __('Commit Message') }}</div> + <div id="commit-message-popover-container"> + <span id="commit-message-question" class="gl-gray-700 gl-ml-3"> + <gl-icon name="question" /> + </span> + <gl-popover + target="commit-message-question" + container="commit-message-popover-container" + v-bind="$options.popoverOptions" + /> + </div> + </div> + <div class="gl-relative gl-w-full gl-h-13 gl-overflow-hidden"> + <div class="gl-absolute gl-z-index-1 gl-font-monospace gl-text-transparent"> + <div + data-testid="highlights" + :style="{ + transform: `translate3d(0, ${-scrollTop}px, 0)`, + }" + > + <div v-for="(line, index) in allLines" :key="index"> + <span + data-testid="highlights-text" + class="gl-white-space-pre-wrap gl-word-break-word" + v-text="line.text" + > + </span + ><mark + v-show="line.highlightedText" + data-testid="highlights-mark" + class="gl-px-1 gl-py-0 gl-bg-orange-100 gl-text-transparent gl-white-space-pre-wrap gl-word-break-word" + v-text="line.highlightedText" + > + </mark> + </div> + </div> + </div> + <textarea + ref="textarea" + :placeholder="placeholder" + :value="text" + class="gl-absolute gl-w-full gl-h-full gl-z-index-2 gl-font-monospace p-0 gl-outline-0 gl-bg-transparent gl-border-0" + data-qa-selector="ide_commit_message_field" + dir="auto" + name="commit-message" + @scroll="handleScroll" + @input="onInput" + @focus="updateIsFocused(true)" + @blur="updateIsFocused(false)" + @keydown.ctrl.enter="onCtrlEnter" + @keydown.meta.enter="onCtrlEnter" + > + </textarea> + </div> + </fieldset> +</template> diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js index 4845b667b40..706d98fdb90 100644 --- a/app/assets/javascripts/ide/constants.js +++ b/app/assets/javascripts/ide/constants.js @@ -5,7 +5,7 @@ export const MAX_TITLE_LENGTH = 50; export const MAX_BODY_LENGTH = 72; export const SIDEBAR_INIT_WIDTH = 340; -export const SIDEBAR_MIN_WIDTH = 340; +export const SIDEBAR_MIN_WIDTH = 260; export const SIDEBAR_NAV_WIDTH = 60; // File view modes |