From 311b0269b4eb9839fa63f80c8d7a58f32b8138a0 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Thu, 18 Nov 2021 13:16:36 +0000
Subject: Add latest changes from gitlab-org/gitlab@14-5-stable-ee

---
 .../javascripts/ide/components/jobs/detail.vue     |   5 +-
 .../ide/components/new_dropdown/modal.vue          |   4 +-
 .../javascripts/ide/components/pipelines/list.vue  |   2 +-
 .../ide/components/shared/commit_message_field.vue | 137 +++++++++++++++++++++
 app/assets/javascripts/ide/constants.js            |   2 +-
 5 files changed, 144 insertions(+), 6 deletions(-)
 create mode 100644 app/assets/javascripts/ide/components/shared/commit_message_field.vue

(limited to 'app/assets/javascripts/ide')

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
-- 
cgit v1.2.3