Improve web IDE commit input

Improves the web IDE commit message imput by highlighting any characters
on the first line after 50 & every other line after 72

Closes #44832

5 files changed, 192 insertions, 60 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
index 2cbd982af19..7820f7842d8 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
@@ -21,7 +21,7 @@
       commitToCurrentBranchText() {
         return sprintf(
           __('Commit to %{branchName} branch'),
-          { branchName: `<strong>${this.currentBranchId}</strong>` },
+          { branchName: `<strong class="monospace">${this.currentBranchId}</strong>` },
           false,
         );
       },
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
new file mode 100644
index 00000000000..603a8cec1d1
--- /dev/null
+++ b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
@@ -0,0 +1,118 @@
+<script>
+import { __ } from '../../../locale';
+import popover from '../../../vue_shared/directives/popover';
+
+export const MAX_TITLE_LENGTH = 50;
+export const MAX_BODY_LENGTH = 72;
+
+export default {
+  directives: {
+    popover,
+  },
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      scrollTop: 0,
+      isFocused: false,
+    };
+  },
+  computed: {
+    allLines() {
+      return this.text.replace(/\n$/g, '\n\n').split('\n');
+    },
+  },
+  methods: {
+    handleScroll() {
+      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);
+    },
+  },
+  popoverOptions: {
+    html: true,
+    trigger: 'hover',
+    placement: 'top',
+    content: __(`
+      The character highligher helps you keep the subject line to 50 characters
+      and wrap the body at 72 so they are readable in git.
+    `),
+  },
+};
+</script>
+
+<template>
+  <fieldset class="common-note-form ide-commit-message-field">
+    <div
+      class="md-area"
+      :class="{
+        'is-focused': isFocused
+      }"
+    >
+      <div
+        v-once
+        class="md-header"
+      >
+        <ul class="nav-links">
+          <li>
+            {{ __('Commit Message') }}
+            <span
+              v-popover="$options.popoverOptions"
+              class="help-block prepend-left-10"
+            >
+              <i
+                aria-hidden="true"
+                class="fa fa-question-circle"
+              ></i>
+            </span>
+          </li>
+        </ul>
+      </div>
+      <div class="ide-commit-message-textarea-container">
+        <div class="ide-commit-message-highlights-container">
+          <div
+            class="note-textarea highlights monospace"
+            :style="{
+              transform: `translate3d(0, ${-scrollTop}px, 0)`
+            }"
+          >
+            <div
+              v-for="(line, index) in allLines"
+              :key="index"
+            >
+              <span
+                v-text="line.substr(0, getLineLength(index)) || ' '"
+              >
+              </span><mark
+                v-if="line.length > getLineLength(index)"
+                v-text="line.substr(getLineLength(index))"
+              >
+              </mark>
+            </div>
+          </div>
+        </div>
+        <textarea
+          class="note-textarea ide-commit-message-textarea"
+          :placeholder="__('Write a commit message...')"
+          :value="text"
+          @scroll="handleScroll"
+          @input="onInput"
+          @focus="isFocused = true"
+          @blur="isFocused = false"
+          ref="textarea"
+        >
+        </textarea>
+      </div>
+    </div>
+  </fieldset>
+</template>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
index 4310d762c78..747805052a5 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
@@ -85,7 +85,7 @@
     >
       <input
         type="text"
-        class="form-control"
+        class="form-control monospace"
         :placeholder="newBranchName"
         @input="updateBranchName($event.target.value)"
       />
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index d885ed5e301..14673754503 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -5,6 +5,7 @@ import icon from '~/vue_shared/components/icon.vue';
 import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import commitFilesList from './commit_sidebar/list.vue';
+import CommitMessageField from './commit_sidebar/message_field.vue';
 import * as consts from '../stores/modules/commit/constants';
 import Actions from './commit_sidebar/actions.vue';
 
@@ -15,6 +16,7 @@ export default {
     commitFilesList,
     Actions,
     LoadingButton,
+    CommitMessageField,
   },
   directives: {
     tooltip,
@@ -38,15 +40,9 @@ export default {
       'changedFiles',
     ]),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
-    ...mapGetters('commit', [
-      'commitButtonDisabled',
-      'discardDraftButtonDisabled',
-      'branchName',
-    ]),
+    ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled', 'branchName']),
     statusSvg() {
-      return this.lastCommitMsg
-        ? this.committedStateSvgPath
-        : this.noChangesStateSvgPath;
+      return this.lastCommitMsg ? this.committedStateSvgPath : this.noChangesStateSvgPath;
     },
   },
   methods: {
@@ -64,9 +60,7 @@ export default {
       });
     },
     forceCreateNewBranch() {
-      return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() =>
-        this.commitChanges(),
-      );
+      return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() => this.commitChanges());
     },
   },
 };
@@ -105,16 +99,10 @@ export default {
         @submit.prevent.stop="commitChanges"
         v-if="!rightPanelCollapsed"
       >
-        <div class="multi-file-commit-fieldset">
-          <textarea
-            class="form-control multi-file-commit-message"
-            name="commit-message"
-            :value="commitMessage"
-            :placeholder="__('Write a commit message...')"
-            @input="updateCommitMessage($event.target.value)"
-          >
-          </textarea>
-        </div>
+        <commit-message-field
+          :text="commitMessage"
+          @input="updateCommitMessage"
+        />
         <div class="clearfix prepend-top-15">
           <actions />
           <loading-button
diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js
index b3882cb8d21..4eb23b2ee0f 100644
--- a/app/assets/javascripts/ide/stores/actions/project.js
+++ b/app/assets/javascripts/ide/stores/actions/project.js
@@ -5,45 +5,71 @@ import * as types from '../mutation_types';
 export const getProjectData = (
   { commit, state, dispatch },
   { namespace, projectId, force = false } = {},
-) => new Promise((resolve, reject) => {
-  if (!state.projects[`${namespace}/${projectId}`] || force) {
-    commit(types.TOGGLE_LOADING, { entry: state });
-    service.getProjectData(namespace, projectId)
-    .then(res => res.data)
-    .then((data) => {
+) =>
+  new Promise((resolve, reject) => {
+    if (!state.projects[`${namespace}/${projectId}`] || force) {
       commit(types.TOGGLE_LOADING, { entry: state });
-      commit(types.SET_PROJECT, { projectPath: `${namespace}/${projectId}`, project: data });
-      if (!state.currentProjectId) commit(types.SET_CURRENT_PROJECT, `${namespace}/${projectId}`);
-      resolve(data);
-    })
-    .catch(() => {
-      flash('Error loading project data. Please try again.', 'alert', document, null, false, true);
-      reject(new Error(`Project not loaded ${namespace}/${projectId}`));
-    });
-  } else {
-    resolve(state.projects[`${namespace}/${projectId}`]);
-  }
-});
+      service
+        .getProjectData(namespace, projectId)
+        .then(res => res.data)
+        .then(data => {
+          commit(types.TOGGLE_LOADING, { entry: state });
+          commit(types.SET_PROJECT, { projectPath: `${namespace}/${projectId}`, project: data });
+          if (!state.currentProjectId)
+            commit(types.SET_CURRENT_PROJECT, `${namespace}/${projectId}`);
+          resolve(data);
+        })
+        .catch(() => {
+          flash(
+            'Error loading project data. Please try again.',
+            'alert',
+            document,
+            null,
+            false,
+            true,
+          );
+          reject(new Error(`Project not loaded ${namespace}/${projectId}`));
+        });
+    } else {
+      resolve(state.projects[`${namespace}/${projectId}`]);
+    }
+  });
 
 export const getBranchData = (
   { commit, state, dispatch },
   { projectId, branchId, force = false } = {},
-) => new Promise((resolve, reject) => {
-  if ((typeof state.projects[`${projectId}`] === 'undefined' ||
-        !state.projects[`${projectId}`].branches[branchId])
-        || force) {
-    service.getBranchData(`${projectId}`, branchId)
-      .then(({ data }) => {
-        const { id } = data.commit;
-        commit(types.SET_BRANCH, { projectPath: `${projectId}`, branchName: branchId, branch: data });
-        commit(types.SET_BRANCH_WORKING_REFERENCE, { projectId, branchId, reference: id });
-        resolve(data);
-      })
-      .catch(() => {
-        flash('Error loading branch data. Please try again.', 'alert', document, null, false, true);
-        reject(new Error(`Branch not loaded - ${projectId}/${branchId}`));
-      });
-  } else {
-    resolve(state.projects[`${projectId}`].branches[branchId]);
-  }
-});
+) =>
+  new Promise((resolve, reject) => {
+    if (
+      typeof state.projects[`${projectId}`] === 'undefined' ||
+      !state.projects[`${projectId}`].branches[branchId] ||
+      force
+    ) {
+      service
+        .getBranchData(`${projectId}`, branchId)
+        .then(({ data }) => {
+          const { id } = data.commit;
+          commit(types.SET_BRANCH, {
+            projectPath: `${projectId}`,
+            branchName: branchId,
+            branch: data,
+          });
+          commit(types.SET_BRANCH_WORKING_REFERENCE, { projectId, branchId, reference: id });
+          commit(types.SET_CURRENT_BRANCH, branchId);
+          resolve(data);
+        })
+        .catch(() => {
+          flash(
+            'Error loading branch data. Please try again.',
+            'alert',
+            document,
+            null,
+            false,
+            true,
+          );
+          reject(new Error(`Branch not loaded - ${projectId}/${branchId}`));
+        });
+    } else {
+      resolve(state.projects[`${projectId}`].branches[branchId]);
+    }
+  });