Fixes alignment of changed icon in Web IDE

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/57649

4 files changed, 36 insertions, 4 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue b/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue
index 5119dbf32eb..11d5d9639b6 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue
@@ -44,7 +44,7 @@ export default {
   <div class="d-flex ide-commit-editor-header align-items-center">
     <file-icon :file-name="activeFile.name" :size="16" class="mr-2" />
     <strong class="mr-2"> {{ activeFile.path }} </strong>
-    <changed-file-icon :file="activeFile" class="ml-0" />
+    <changed-file-icon :file="activeFile" :is-centered="false" />
     <div class="ml-auto">
       <button
         v-if="!isStaged"
diff --git a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
index bb7710f708e..e9ab6f5ba7a 100644
--- a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
@@ -37,6 +37,11 @@ export default {
       required: false,
       default: 12,
     },
+    isCentered: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     changedIcon() {
@@ -78,7 +83,12 @@ export default {
 </script>
 
 <template>
-  <span v-gl-tooltip.right :title="tooltipTitle" class="file-changed-icon ml-auto">
+  <span
+    v-gl-tooltip.right
+    :title="tooltipTitle"
+    :class="{ 'ml-auto': isCentered }"
+    class="file-changed-icon"
+  >
     <icon v-if="showIcon" :name="changedIcon" :size="size" :css-classes="changedIconClass" />
   </span>
 </template>
diff --git a/changelogs/unreleased/web-ide-commit-header-icon-alignment-fix.yml b/changelogs/unreleased/web-ide-commit-header-icon-alignment-fix.yml
new file mode 100644
index 00000000000..7a6bda1580d
--- /dev/null
+++ b/changelogs/unreleased/web-ide-commit-header-icon-alignment-fix.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed alignment of changed icon in Web IDE
+merge_request:
+author:
+type: fixed
diff --git a/spec/javascripts/vue_shared/components/changed_file_icon_spec.js b/spec/javascripts/vue_shared/components/changed_file_icon_spec.js
index 5b1038840c7..634ba8403d5 100644
--- a/spec/javascripts/vue_shared/components/changed_file_icon_spec.js
+++ b/spec/javascripts/vue_shared/components/changed_file_icon_spec.js
@@ -5,27 +5,40 @@ import createComponent from 'spec/helpers/vue_mount_component_helper';
 describe('Changed file icon', () => {
   let vm;
 
-  beforeEach(() => {
+  function factory(props = {}) {
     const component = Vue.extend(changedFileIcon);
 
     vm = createComponent(component, {
+      ...props,
       file: {
         tempFile: false,
         changed: true,
       },
     });
-  });
+  }
 
   afterEach(() => {
     vm.$destroy();
   });
 
+  it('centers icon', () => {
+    factory({
+      isCentered: true,
+    });
+
+    expect(vm.$el.classList).toContain('ml-auto');
+  });
+
   describe('changedIcon', () => {
     it('equals file-modified when not a temp file and has changes', () => {
+      factory();
+
       expect(vm.changedIcon).toBe('file-modified');
     });
 
     it('equals file-addition when a temp file', () => {
+      factory();
+
       vm.file.tempFile = true;
 
       expect(vm.changedIcon).toBe('file-addition');
@@ -34,10 +47,14 @@ describe('Changed file icon', () => {
 
   describe('changedIconClass', () => {
     it('includes file-modified when not a temp file', () => {
+      factory();
+
       expect(vm.changedIconClass).toContain('file-modified');
     });
 
     it('includes file-addition when a temp file', () => {
+      factory();
+
       vm.file.tempFile = true;
 
       expect(vm.changedIconClass).toContain('file-addition');