Add latest changes from gitlab-org/gitlab@master

4 files changed, 369 insertions, 5 deletions

diff --git a/app/assets/javascripts/profile/preferences/components/diffs_colors.vue b/app/assets/javascripts/profile/preferences/components/diffs_colors.vue
new file mode 100644
index 00000000000..1992819ab82
--- /dev/null
+++ b/app/assets/javascripts/profile/preferences/components/diffs_colors.vue
@@ -0,0 +1,107 @@
+<script>
+import { validateHexColor, hexToRgb } from '~/lib/utils/color_utils';
+import { s__ } from '~/locale';
+import { getCssVariable } from '~/lib/utils/css_utils';
+import ColorPicker from '~/vue_shared/components/color_picker/color_picker.vue';
+import DiffsColorsPreview from './diffs_colors_preview.vue';
+
+export default {
+  components: {
+    ColorPicker,
+    DiffsColorsPreview,
+  },
+  inject: ['deletion', 'addition'],
+  data() {
+    return {
+      deletionColor: this.deletion || '',
+      additionColor: this.addition || '',
+      defaultDeletionColor: getCssVariable('--default-diff-color-deletion'),
+      defaultAdditionColor: getCssVariable('--default-diff-color-addition'),
+    };
+  },
+  computed: {
+    suggestedColors() {
+      const colors = {
+        '#d99530': s__('SuggestedColors|Orange'),
+        '#1f75cb': s__('SuggestedColors|Blue'),
+      };
+      if (this.isValidColor(this.deletion)) {
+        colors[this.deletion] = s__('SuggestedColors|Current removal color');
+      }
+      if (this.isValidColor(this.addition)) {
+        colors[this.addition] = s__('SuggestedColors|Current addition color');
+      }
+      if (this.isValidColor(this.defaultDeletionColor)) {
+        colors[this.defaultDeletionColor] = s__('SuggestedColors|Default removal color');
+      }
+      if (this.isValidColor(this.defaultAdditionColor)) {
+        colors[this.defaultAdditionColor] = s__('SuggestedColors|Default addition color');
+      }
+      return colors;
+    },
+    previewClasses() {
+      return {
+        'diff-custom-addition-color': this.isValidColor(this.additionColor),
+        'diff-custom-deletion-color': this.isValidColor(this.deletionColor),
+      };
+    },
+    previewStyle() {
+      let style = {};
+      if (this.isValidColor(this.deletionColor)) {
+        const colorRgb = hexToRgb(this.deletionColor).join();
+        style = {
+          ...style,
+          '--diff-deletion-color': `rgba(${colorRgb},0.2)`,
+        };
+      }
+      if (this.isValidColor(this.additionColor)) {
+        const colorRgb = hexToRgb(this.additionColor).join();
+        style = {
+          ...style,
+          '--diff-addition-color': `rgba(${colorRgb},0.2)`,
+        };
+      }
+      return style;
+    },
+  },
+  methods: {
+    isValidColor(color) {
+      return validateHexColor(color);
+    },
+  },
+  i18n: {
+    colorDeletionInputLabel: s__('Preferences|Color for removed lines'),
+    colorAdditionInputLabel: s__('Preferences|Color for added lines'),
+    previewLabel: s__('Preferences|Preview'),
+  },
+};
+</script>
+<template>
+  <div :style="previewStyle" :class="previewClasses">
+    <diffs-colors-preview />
+    <color-picker
+      v-model="deletionColor"
+      :label="$options.i18n.colorDeletionInputLabel"
+      :state="isValidColor(deletionColor)"
+      :suggested-colors="suggestedColors"
+    />
+    <input
+      id="user_diffs_deletion_color"
+      v-model="deletionColor"
+      name="user[diffs_deletion_color]"
+      type="hidden"
+    />
+    <color-picker
+      v-model="additionColor"
+      :label="$options.i18n.colorAdditionInputLabel"
+      :state="isValidColor(additionColor)"
+      :suggested-colors="suggestedColors"
+    />
+    <input
+      id="user_diffs_addition_color"
+      v-model="additionColor"
+      name="user[diffs_addition_color]"
+      type="hidden"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/profile/preferences/components/diffs_colors_preview.vue b/app/assets/javascripts/profile/preferences/components/diffs_colors_preview.vue
new file mode 100644
index 00000000000..74dd2d5628a
--- /dev/null
+++ b/app/assets/javascripts/profile/preferences/components/diffs_colors_preview.vue
@@ -0,0 +1,231 @@
+<script>
+import { s__ } from '~/locale';
+
+export default {
+  computed: {
+    themeClass() {
+      return window.gon?.user_color_scheme;
+    },
+  },
+  i18n: {
+    previewLabel: s__('Preferences|Preview'),
+  },
+};
+</script>
+<template>
+  <div class="form-group">
+    <label>{{ $options.i18n.previewLabel }}</label>
+    <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
+    <table :class="themeClass" class="code">
+      <tbody>
+        <tr class="line_holder parallel">
+          <td class="old_line diff-line-num old">
+            <a data-linenumber="1"></a>
+          </td>
+          <td class="line_content parallel left-side old">
+            <span
+              ><span class="c1"># <span class="idiff deletion">Removed</span> content</span></span
+            >
+          </td>
+          <td class="new_line diff-line-num new">
+            <a data-linenumber="1"></a>
+          </td>
+          <td class="line_content parallel right-side new">
+            <span
+              ><span class="c1"># <span class="idiff addition">Added</span> content</span></span
+            >
+          </td>
+        </tr>
+        <tr class="line_holder parallel">
+          <td class="old_line diff-line-num old">
+            <a data-linenumber="2"></a>
+          </td>
+          <td class="line_content parallel left-side old">
+            <span><span class="n">v</span> <span class="o">=</span> <span class="mi">1</span></span>
+          </td>
+          <td class="new_line diff-line-num new">
+            <a data-linenumber="2"></a>
+          </td>
+          <td class="line_content parallel right-side new">
+            <span><span class="n">v</span> <span class="o">=</span> <span class="mi">1</span></span>
+          </td>
+        </tr>
+        <tr class="line_holder parallel">
+          <td class="old_line diff-line-num old">
+            <a data-linenumber="3"></a>
+          </td>
+          <td class="line_content parallel left-side old">
+            <span
+              ><span class="n">s</span> <span class="o">=</span>
+              <span class="s">"string"</span></span
+            >
+          </td>
+          <td class="new_line diff-line-num new">
+            <a data-linenumber="3"></a>
+          </td>
+          <td class="line_content parallel right-side new">
+            <span
+              ><span class="n">s</span> <span class="o">=</span>
+              <span class="s">"string"</span></span
+            >
+          </td>
+        </tr>
+        <tr class="line_holder parallel">
+          <td class="old_line diff-line-num old">
+            <a data-linenumber="4"></a>
+          </td>
+          <td class="line_content parallel left-side old"><span></span></td>
+          <td class="new_line diff-line-num new">
+            <a data-linenumber="4"></a>
+          </td>
+          <td class="line_content parallel right-side new"><span></span></td>
+        </tr>
+        <tr class="line_holder parallel">
+          <td class="old_line diff-line-num old">
+            <a data-linenumber="5"></a>
+          </td>
+          <td class="line_content parallel left-side old">
+            <span
+              ><span class="k">for</span> <span class="n">i</span> <span class="ow">in</span>
+              <span class="nb">range</span><span class="p">(</span><span class="o">-</span
+              ><span class="mi">10</span><span class="p">,</span> <span class="mi">10</span
+              ><span class="p">):</span></span
+            >
+          </td>
+          <td class="new_line diff-line-num new">
+            <a data-linenumber="5"></a>
+          </td>
+          <td class="line_content parallel right-side new">
+            <span
+              ><span class="k">for</span> <span class="n">i</span> <span class="ow">in</span>
+              <span class="nb">range</span><span class="p">(</span><span class="o">-</span
+              ><span class="mi">10</span><span class="p">,</span> <span class="mi">10</span
+              ><span class="p">):</span></span
+            >
+          </td>
+        </tr>
+        <tr class="line_holder parallel">
+          <td class="old_line diff-line-num old">
+            <a data-linenumber="6"></a>
+          </td>
+          <td class="line_content parallel left-side old">
+            <span>
+              <span>{{ '    ' }}</span>
+              <span class="k">print</span><span class="p">(</span><span class="n">i</span>
+              <span class="o">+</span> <span class="mi">1</span><span class="p">)</span></span
+            >
+          </td>
+          <td class="new_line diff-line-num new">
+            <a data-linenumber="6"></a>
+          </td>
+          <td class="line_content parallel right-side new">
+            <span>
+              <span>{{ '    ' }}</span>
+              <span class="k">print</span><span class="p">(</span><span class="n">i</span>
+              <span class="o">+</span> <span class="mi">1</span><span class="p">)</span></span
+            >
+          </td>
+        </tr>
+        <tr class="line_holder parallel">
+          <td class="old_line diff-line-num old">
+            <a data-linenumber="7"></a>
+          </td>
+          <td class="line_content parallel left-side old"><span></span></td>
+          <td class="new_line diff-line-num new">
+            <a data-linenumber="7"></a>
+          </td>
+          <td class="line_content parallel right-side new"><span></span></td>
+        </tr>
+        <tr class="line_holder parallel">
+          <td class="old_line diff-line-num old">
+            <a data-linenumber="8"></a>
+          </td>
+          <td class="line_content parallel left-side old">
+            <span
+              ><span class="k">class</span> <span class="nc">LinkedList</span
+              ><span class="p">(</span><span class="nb">object</span><span class="p">):</span></span
+            >
+          </td>
+          <td class="new_line diff-line-num new">
+            <a data-linenumber="8"></a>
+          </td>
+          <td class="line_content parallel right-side new">
+            <span
+              ><span class="k">class</span> <span class="nc">LinkedList</span
+              ><span class="p">(</span><span class="nb">object</span><span class="p">):</span></span
+            >
+          </td>
+        </tr>
+        <tr class="line_holder parallel">
+          <td class="old_line diff-line-num old">
+            <a data-linenumber="9"></a>
+          </td>
+          <td class="line_content parallel left-side old">
+            <span>
+              <span>{{ '    ' }}</span>
+              <span class="k">def</span> <span class="nf">__init__</span><span class="p">(</span
+              ><span class="bp">self</span><span class="p">,</span> <span class="n">x</span
+              ><span class="p">):</span></span
+            >
+          </td>
+          <td class="new_line diff-line-num new">
+            <a data-linenumber="9"></a>
+          </td>
+          <td class="line_content parallel right-side new">
+            <span>
+              <span>{{ '    ' }}</span>
+              <span class="k">def</span> <span class="nf">__init__</span><span class="p">(</span
+              ><span class="bp">self</span><span class="p">,</span> <span class="n">x</span
+              ><span class="p">):</span></span
+            >
+          </td>
+        </tr>
+        <tr class="line_holder parallel">
+          <td class="old_line diff-line-num old">
+            <a data-linenumber="10"></a>
+          </td>
+          <td class="line_content parallel left-side old">
+            <span>
+              <span>{{ '        ' }}</span>
+              <span class="bp">self</span><span class="p">.</span><span class="n">val</span>
+              <span class="o">=</span> <span class="n">x</span></span
+            >
+          </td>
+          <td class="new_line diff-line-num new">
+            <a data-linenumber="10"></a>
+          </td>
+          <td class="line_content parallel right-side new">
+            <span>
+              <span>{{ '        ' }}</span>
+              <span class="bp">self</span><span class="p">.</span><span class="n">val</span>
+              <span class="o">=</span> <span class="n">x</span></span
+            >
+          </td>
+        </tr>
+        <tr class="line_holder parallel">
+          <td class="old_line diff-line-num old">
+            <a data-linenumber="11"></a>
+          </td>
+          <td class="line_content parallel left-side old">
+            <span>
+              <span>{{ '        ' }}</span>
+              <span class="bp">self</span><span class="p">.</span><span class="nb">next</span>
+              <span class="o">=</span> <span class="bp">None</span></span
+            >
+          </td>
+          <td class="new_line diff-line-num new">
+            <a data-linenumber="11"></a>
+          </td>
+          <td class="line_content parallel right-side new">
+            <span>
+              <span>{{ '        ' }}</span>
+              <span class="bp">self</span><span class="p">.</span><span class="nb">next</span>
+              <span class="o">=</span> <span class="bp">None</span></span
+            >
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
+  </div>
+</template>
diff --git a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
index 757a66ef148..7542f81a361 100644
--- a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
+++ b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
@@ -45,7 +45,7 @@ export default {
     return {
       isSubmitEnabled: true,
       darkModeOnCreate: null,
-      darkModeOnSubmit: null,
+      schemeOnCreate: null,
     };
   },
   computed: {
@@ -61,6 +61,7 @@ export default {
     this.formEl.addEventListener('ajax:success', this.handleSuccess);
     this.formEl.addEventListener('ajax:error', this.handleError);
     this.darkModeOnCreate = this.darkModeSelected();
+    this.schemeOnCreate = this.getSelectedScheme();
   },
   beforeDestroy() {
     this.formEl.removeEventListener('ajax:beforeSend', this.handleLoading);
@@ -76,15 +77,19 @@ export default {
       const themeId = new FormData(this.formEl).get('user[theme_id]');
       return this.applicationThemes[themeId] ?? null;
     },
+    getSelectedScheme() {
+      return new FormData(this.formEl).get('user[color_scheme_id]');
+    },
     handleLoading() {
       this.isSubmitEnabled = false;
-      this.darkModeOnSubmit = this.darkModeSelected();
     },
     handleSuccess(customEvent) {
       // Reload the page if the theme has changed from light to dark mode or vice versa
-      // to correctly load all required styles.
-      const modeChanged = this.darkModeOnCreate ? !this.darkModeOnSubmit : this.darkModeOnSubmit;
-      if (modeChanged) {
+      // or if color scheme has changed to correctly load all required styles.
+      if (
+        this.darkModeOnCreate !== this.darkModeSelected() ||
+        this.schemeOnCreate !== this.getSelectedScheme()
+      ) {
         window.location.reload();
         return;
       }
diff --git a/app/assets/javascripts/profile/preferences/profile_preferences_diffs_colors.js b/app/assets/javascripts/profile/preferences/profile_preferences_diffs_colors.js
new file mode 100644
index 00000000000..1b200187610
--- /dev/null
+++ b/app/assets/javascripts/profile/preferences/profile_preferences_diffs_colors.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import DiffsColors from './components/diffs_colors.vue';
+
+export default () => {
+  const el = document.querySelector('#js-profile-preferences-diffs-colors-app');
+
+  if (!el) return false;
+
+  const { deletion, addition } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: {
+      deletion,
+      addition,
+    },
+    render(createElement) {
+      return createElement(DiffsColors);
+    },
+  });
+};