added tooltips to various icons in the sidebars

fixed SVG colors

app/assets/javascripts/ide/components/changed_file_icon.vue

 <script>
-  import icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import icon from '~/vue_shared/components/icon.vue';
+import { pluralize } from '~/lib/utils/text_utility';
 
-  export default {
-    components: {
-      icon,
+export default {
+  components: {
+    icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
     },
-    props: {
-      file: {
-        type: Object,
-        required: true,
-      },
+    showTooltip: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    computed: {
-      changedIcon() {
-        return this.file.tempFile ? 'file-addition' : 'file-modified';
-      },
-      changedIconClass() {
-        return `multi-${this.changedIcon}`;
-      },
+  },
+  computed: {
+    changedIcon() {
+      return this.file.tempFile ? 'file-addition' : 'file-modified';
     },
-  };
+    changedIconClass() {
+      return `multi-${this.changedIcon}`;
+    },
+    tooltipTitle() {
+      if (!this.showTooltip) return undefined;
+
+      const type = this.file.tempFile ? 'addition' : 'modification';
+
+      if (this.file.changed && !this.file.staged) {
+        return `unstaged ${type}`;
+      } else if (!this.file.changed && this.file.staged) {
+        return `staged ${type}`;
+      } else if (this.file.changed && this.file.staged) {
+        return `unstaged and staged ${pluralize(type)}`;
+      }
+    },
+  },
+};
 </script>
 
 <template>
-  <icon
-    :name="changedIcon"
-    :size="12"
-    :css-classes="`ide-file-changed-icon ${changedIconClass}`"
-  />
+  <span
+    v-tooltip
+    :title="tooltipTitle"
+    data-container="body"
+    data-placement="right"
+    class="ide-file-changed-icon"
+  >
+    <icon
+      :name="changedIcon"
+      :size="12"
+      :css-classes="changedIconClass"
+    />
+  </span>
 </template>

app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue

 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
   components: {
     Icon,
   },
+  directives: {
+    tooltip,
+  },
   props: {
     noChangesStateSvgPath: {
       type: String,
@@ -18,7 +22,7 @@ export default {
   },
   computed: {
     ...mapState(['lastCommitMsg', 'rightPanelCollapsed']),
-    ...mapGetters(['collapseButtonIcon']),
+    ...mapGetters(['collapseButtonIcon', 'collapseButtonTooltip']),
     statusSvg() {
       return this.lastCommitMsg
         ? this.committedStateSvgPath
@@ -42,6 +46,10 @@ export default {
       }"
     >
       <button
+        v-tooltip
+        :title="collapseButtonTooltip"
+        data-container="body"
+        data-placement="left"
         type="button"
         class="btn btn-transparent multi-file-commit-panel-collapse-btn"
         :aria-label="__('Toggle sidebar')"

app/assets/javascripts/ide/components/commit_sidebar/list.vue

 <script>
-  import { mapActions, mapState, mapGetters } from 'vuex';
-  import icon from '~/vue_shared/components/icon.vue';
-  import listItem from './list_item.vue';
-  import listCollapsed from './list_collapsed.vue';
+import { mapActions, mapState, mapGetters } from 'vuex';
+import icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import listItem from './list_item.vue';
+import listCollapsed from './list_collapsed.vue';
 
-  export default {
-    components: {
-      icon,
-      listItem,
-      listCollapsed,
+export default {
+  components: {
+    icon,
+    listItem,
+    listCollapsed,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
     },
-    props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      fileList: {
-        type: Array,
-        required: true,
-      },
-      showToggle: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      icon: {
-        type: String,
-        required: true,
-      },
-      action: {
-        type: String,
-        required: true,
-      },
-      actionBtnText: {
-        type: String,
-        required: true,
-      },
-      itemActionComponent: {
-        type: String,
-        required: true,
-      },
+    fileList: {
+      type: Array,
+      required: true,
     },
-    computed: {
-      ...mapState([
-        'rightPanelCollapsed',
-      ]),
-      ...mapGetters([
-        'collapseButtonIcon',
-      ]),
+    showToggle: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    methods: {
-      ...mapActions([
-        'toggleRightPanelCollapsed',
-        'stageAllChanges',
-        'unstageAllChanges',
-      ]),
-      actionBtnClicked() {
-        this[this.action]();
-      },
+    icon: {
+      type: String,
+      required: true,
     },
-  };
+    action: {
+      type: String,
+      required: true,
+    },
+    actionBtnText: {
+      type: String,
+      required: true,
+    },
+    itemActionComponent: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['rightPanelCollapsed']),
+    ...mapGetters(['collapseButtonIcon', 'collapseButtonTooltip']),
+  },
+  methods: {
+    ...mapActions([
+      'toggleRightPanelCollapsed',
+      'stageAllChanges',
+      'unstageAllChanges',
+    ]),
+    actionBtnClicked() {
+      this[this.action]();
+    },
+  },
+};
 </script>
 
 <template>
@@ -87,7 +87,7 @@
           :name="icon"
           :size="18"
         />
-        {{ title }}
+        {{ title }} changes
         <button
           type="button"
           class="btn btn-blank btn-link ide-staged-action-btn"
@@ -98,6 +98,10 @@
       </div>
       <button
         v-if="showToggle"
+        v-tooltip
+        :title="collapseButtonTooltip"
+        data-container="body"
+        data-placement="left"
         type="button"
         class="btn btn-transparent multi-file-commit-panel-collapse-btn"
         :aria-label="__('Toggle sidebar')"
@@ -113,6 +117,7 @@
       v-if="rightPanelCollapsed"
       :files="fileList"
       :icon="icon"
+      :title="title"
     />
     <template v-else>
       <ul

app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue

 <script>
 import icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import { sprintf, n__ } from '~/locale';
 
 export default {
   components: {
     icon,
   },
+  directives: {
+    tooltip,
+  },
   props: {
     files: {
       type: Array,
@@ -14,6 +19,10 @@ export default {
       type: String,
       required: true,
     },
+    title: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     addedFilesLength() {
@@ -28,6 +37,29 @@ export default {
     modifiedFilesClass() {
       return this.modifiedFilesLength ? 'multi-file-modified' : '';
     },
+    additionsTooltip() {
+      return sprintf(
+        n__(
+          '1 %{type} addition',
+          '%d %{type} additions',
+          this.modifiedFilesLength,
+        ),
+        { type: this.title.toLowerCase() },
+      );
+    },
+    modifiedTooltip() {
+      return sprintf(
+        n__(
+          '1 %{type} modification',
+          '%d %{type} modifications',
+          this.modifiedFilesLength,
+        ),
+        { type: this.title.toLowerCase() },
+      );
+    },
+    titleTooltip() {
+      return `${this.title} changes`;
+    },
   },
 };
 </script>
@@ -36,23 +68,46 @@ export default {
   <div
     class="multi-file-commit-list-collapsed text-center"
   >
-    <icon
-      v-once
-      :name="icon"
-      :size="18"
-      css-classes="append-bottom-15"
-    />
-    <icon
-      name="file-addition"
-      :size="18"
-      :css-classes="addedFilesIconClass + 'append-bottom-10'"
-    />
+    <div
+      v-tooltip
+      :title="titleTooltip"
+      data-container="body"
+      data-placement="left"
+      class="append-bottom-15"
+    >
+      <icon
+        v-once
+        :name="icon"
+        :size="18"
+      />
+    </div>
+    <div
+      v-tooltip
+      :title="additionsTooltip"
+      data-container="body"
+      data-placement="left"
+      class="append-bottom-10"
+    >
+      <icon
+        name="file-addition"
+        :size="18"
+        :css-classes="addedFilesIconClass"
+      />
+    </div>
     {{ addedFilesLength }}
-    <icon
-      name="file-modified"
-      :size="18"
-      :css-classes="modifiedFilesClass + ' prepend-top-10 append-bottom-10'"
-    />
+    <div
+      v-tooltip
+      :title="modifiedTooltip"
+      data-container="body"
+      data-placement="left"
+      class="prepend-top-10 append-bottom-10"
+    >
+      <icon
+        name="file-modified"
+        :size="18"
+        :css-classes="modifiedFilesClass"
+      />
+    </div>
     {{ modifiedFilesLength }}
   </div>
 </template>

app/assets/javascripts/ide/components/commit_sidebar/list_item.vue

@@ -38,6 +38,9 @@ export default {
 
       router.push(`/project${file.url}`);
     },
+    stageFile() {
+      alert('a');
+    },
   },
 };
 </script>
@@ -47,7 +50,9 @@ export default {
     <button
       type="button"
       class="multi-file-commit-list-path"
-      @click="openFileInEditor(file)">
+      @dblclick="stageFile"
+      @click="openFileInEditor(file)"
+    >
       <span class="multi-file-commit-list-file-path">
         <icon
           :name="iconName"

app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue

 <script>
 import { mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
   components: {
     Icon,
   },
+  directives: {
+    tooltip,
+  },
   props: {
     path: {
       type: String,
@@ -24,9 +28,12 @@ export default {
     class="multi-file-discard-btn"
   >
     <button
+      v-tooltip
       type="button"
       class="btn btn-blank append-right-5"
-      :aria-label="__('Stage change')"
+      :aria-label="__('Stage changes')"
+      :title="__('Stage changes')"
+      data-container="body"
       @click.stop="stageChange(path)"
     >
       <icon
@@ -35,9 +42,12 @@ export default {
       />
     </button>
     <button
+      v-tooltip
       type="button"
       class="btn btn-blank"
-      :aria-label="__('Discard change')"
+      :aria-label="__('Discard changes')"
+      :title="__('Discard changes')"
+      data-container="body"
       @click.stop="discardFileChanges(path)"
     >
       <icon

app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue

 <script>
 import { mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
   components: {
     Icon,
   },
+  directives: {
+    tooltip,
+  },
   props: {
     path: {
       type: String,
@@ -24,9 +28,12 @@ export default {
     class="multi-file-discard-btn"
   >
     <button
+      v-tooltip
       type="button"
       class="btn btn-blank"
-      :aria-label="__('Unstage change')"
+      :aria-label="__('Unstage changes')"
+      :title="__('Unstage changes')"
+      data-container="body"
       @click="unstageChange(path)"
     >
       <icon

app/assets/javascripts/ide/components/repo_file.vue

@@ -103,8 +103,9 @@ export default {
           />
         </span>
         <changed-file-icon
+          v-if="file.changed || file.tempFile || file.staged"
           :file="file"
-          v-if="file.changed || file.tempFile"
+          :show-tooltip="true"
           class="prepend-top-5 pull-right"
         />
         <new-dropdown

app/assets/javascripts/ide/stores/getters.js

@@ -29,3 +29,7 @@ export const collapseButtonIcon = state =>
 
 export const hasChanges = state =>
   !!state.changedFiles.length || !!state.stagedFiles.length;
+
+// eslint-disable-next-line no-confusing-arrow
+export const collapseButtonTooltip = state =>
+  state.rightPanelCollapsed ? 'Expand sidebar' : 'Collapse sidebar';

app/assets/javascripts/ide/stores/mutations/file.js

@@ -80,6 +80,12 @@ export default {
 
     Object.assign(state, {
       changedFiles: state.changedFiles.filter(f => f.path !== path),
+      entries: Object.assign(state.entries, {
+        [path]: Object.assign(state.entries[path], {
+          staged: true,
+          changed: false,
+        }),
+      }),
     });
 
     if (stagedFile) {
@@ -111,6 +117,11 @@ export default {
 
     Object.assign(state, {
       stagedFiles: state.stagedFiles.filter(f => f.path !== path),
+      entries: Object.assign(state.entries, {
+        [path]: Object.assign(state.entries[path], {
+          staged: false,
+        }),
+      }),
     });
   },
   [types.TOGGLE_FILE_CHANGED](state, { file, changed }) {

app/assets/javascripts/ide/stores/utils.js

@@ -13,6 +13,7 @@ export const dataStructure = () => ({
   opened: false,
   active: false,
   changed: false,
+  staged: false,
   lastCommitPath: '',
   lastCommit: {
     id: '',

app/assets/stylesheets/pages/repo.scss

@@ -64,6 +64,10 @@
 
     .ide-file-changed-icon {
       margin-left: auto;
+
+      > svg {
+        display: block;
+      }
     }
 
     .ide-new-btn {
@@ -488,6 +492,7 @@
 
   svg {
     margin-right: $gl-btn-padding;
+    color: $theme-gray-700;
   }
 }
 
@@ -544,7 +549,8 @@
   flex-direction: column;
   padding: $gl-padding 0;
 
-  > svg {
+  svg {
+    display: block;
     margin-left: auto;
     margin-right: auto;
     color: $theme-gray-700;