1 files changed, 116 insertions, 27 deletions

diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 8cf1ccb4fce..3f980203911 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -1,36 +1,82 @@
 <script>
-  import { mapState, mapGetters } from 'vuex';
-  import icon from '~/vue_shared/components/icon.vue';
-  import panelResizer from '~/vue_shared/components/panel_resizer.vue';
-  import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-  import projectTree from './ide_project_tree.vue';
-  import ResizablePanel from './resizable_panel.vue';
+import { mapState, mapGetters } from 'vuex';
+import ProjectAvatarImage from '~/vue_shared/components/project_avatar/image.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
+import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import Identicon from '../../vue_shared/components/identicon.vue';
+import IdeTree from './ide_tree.vue';
+import ResizablePanel from './resizable_panel.vue';
+import ActivityBar from './activity_bar.vue';
+import CommitSection from './repo_commit_section.vue';
+import CommitForm from './commit_sidebar/form.vue';
+import IdeReview from './ide_review.vue';
+import SuccessMessage from './commit_sidebar/success_message.vue';
+import { activityBarViews } from '../constants';
 
-  export default {
-    components: {
-      projectTree,
-      icon,
-      panelResizer,
-      skeletonLoadingContainer,
-      ResizablePanel,
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    Icon,
+    PanelResizer,
+    SkeletonLoadingContainer,
+    ResizablePanel,
+    ActivityBar,
+    ProjectAvatarImage,
+    Identicon,
+    CommitSection,
+    IdeTree,
+    CommitForm,
+    IdeReview,
+    SuccessMessage,
+  },
+  data() {
+    return {
+      showTooltip: false,
+    };
+  },
+  computed: {
+    ...mapState([
+      'loading',
+      'currentBranchId',
+      'currentActivityView',
+      'changedFiles',
+      'stagedFiles',
+      'lastCommitMsg',
+    ]),
+    ...mapGetters(['currentProject', 'someUncommitedChanges']),
+    showSuccessMessage() {
+      return (
+        this.currentActivityView === activityBarViews.edit &&
+        (this.lastCommitMsg && !this.someUncommitedChanges)
+      );
     },
-    computed: {
-      ...mapState([
-        'loading',
-      ]),
-      ...mapGetters([
-        'projectsWithTrees',
-      ]),
+    branchTooltipTitle() {
+      return this.showTooltip ? this.currentBranchId : undefined;
     },
-  };
+  },
+  watch: {
+    currentBranchId() {
+      this.$nextTick(() => {
+        this.showTooltip = this.$refs.branchId.scrollWidth > this.$refs.branchId.offsetWidth;
+      });
+    },
+  },
+};
 </script>
 
 <template>
   <resizable-panel
     :collapsible="false"
-    :initial-width="290"
+    :initial-width="340"
     side="left"
   >
+    <activity-bar
+      v-if="!loading"
+    />
     <div class="multi-file-commit-panel-inner">
       <template v-if="loading">
         <div
@@ -41,11 +87,54 @@
           <skeleton-loading-container />
         </div>
       </template>
-      <project-tree
-        v-for="project in projectsWithTrees"
-        :key="project.id"
-        :project="project"
-      />
+      <template v-else>
+        <div class="context-header ide-context-header">
+          <a
+            :href="currentProject.web_url"
+          >
+            <div
+              v-if="currentProject.avatar_url"
+              class="avatar-container s40 project-avatar"
+            >
+              <project-avatar-image
+                class="avatar-container project-avatar"
+                :link-href="currentProject.path"
+                :img-src="currentProject.avatar_url"
+                :img-alt="currentProject.name"
+                :img-size="40"
+              />
+            </div>
+            <identicon
+              v-else
+              size-class="s40"
+              :entity-id="currentProject.id"
+              :entity-name="currentProject.name"
+            />
+            <div class="ide-sidebar-project-title">
+              <div class="sidebar-context-title">
+                {{ currentProject.name }}
+              </div>
+              <div
+                class="sidebar-context-title ide-sidebar-branch-title"
+                ref="branchId"
+                v-tooltip
+                :title="branchTooltipTitle"
+              >
+                <icon
+                  name="branch"
+                  css-classes="append-right-5"
+                />{{ currentBranchId }}
+              </div>
+            </div>
+          </a>
+        </div>
+        <div class="multi-file-commit-panel-inner-scroll">
+          <component
+            :is="currentActivityView"
+          />
+        </div>
+        <commit-form />
+      </template>
     </div>
   </resizable-panel>
 </template>