Web IDE context header redesign

5 files changed, 69 insertions, 169 deletions

diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue
index 62697e0ecc3..2cebacc1c4c 100644
--- a/app/assets/javascripts/ide/components/activity_bar.vue
+++ b/app/assets/javascripts/ide/components/activity_bar.vue
@@ -13,11 +13,8 @@ export default {
     tooltip,
   },
   computed: {
-    ...mapGetters(['currentProject', 'hasChanges']),
+    ...mapGetters(['hasChanges']),
     ...mapState(['currentActivityView']),
-    goBackUrl() {
-      return document.referrer || this.currentProject.web_url;
-    },
   },
   methods: {
     ...mapActions(['updateActivityBarView']),
@@ -36,22 +33,6 @@ export default {
 <template>
   <nav class="ide-activity-bar">
     <ul class="list-unstyled">
-      <li v-once>
-        <a
-          v-tooltip
-          :href="goBackUrl"
-          :title="s__('IDE|Go back')"
-          :aria-label="s__('IDE|Go back')"
-          data-container="body"
-          data-placement="right"
-          class="ide-sidebar-link"
-        >
-          <icon
-            :size="16"
-            name="go-back"
-          />
-        </a>
-      </li>
       <li>
         <button
           v-tooltip
diff --git a/app/assets/javascripts/ide/components/ide_project_header.vue b/app/assets/javascripts/ide/components/ide_project_header.vue
new file mode 100644
index 00000000000..6cf190288e8
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_project_header.vue
@@ -0,0 +1,37 @@
+<script>
+import ProjectAvatarDefault from '~/vue_shared/components/project_avatar/default.vue';
+
+export default {
+  components: {
+    ProjectAvatarDefault,
+  },
+  props: {
+    project: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="context-header ide-context-header">
+    <a
+      :href="project.web_url"
+      :title="s__('IDE|Go to project')"
+    >
+      <project-avatar-default
+        :project="project"
+        :size="48"
+      />
+      <span class="ide-sidebar-project-title">
+        <span class="sidebar-context-title">
+          {{ project.name }}
+        </span>
+        <span class="sidebar-context-title text-secondary">
+          {{ project.path_with_namespace }}
+        </span>
+      </span>
+    </a>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 21906674c4b..4771c58a11d 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -1,12 +1,6 @@
 <script>
-import $ from 'jquery';
 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';
@@ -14,43 +8,28 @@ 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 MergeRequestDropdown from './merge_requests/dropdown.vue';
+import IdeProjectHeader from './ide_project_header.vue';
 import { activityBarViews } from '../constants';
 
 export default {
-  directives: {
-    tooltip,
-  },
   components: {
-    Icon,
-    PanelResizer,
     SkeletonLoadingContainer,
     ResizablePanel,
     ActivityBar,
-    ProjectAvatarImage,
-    Identicon,
     CommitSection,
     IdeTree,
     CommitForm,
     IdeReview,
     SuccessMessage,
-    MergeRequestDropdown,
-  },
-  data() {
-    return {
-      showTooltip: false,
-      showMergeRequestsDropdown: false,
-    };
+    IdeProjectHeader,
   },
   computed: {
     ...mapState([
       'loading',
-      'currentBranchId',
       'currentActivityView',
       'changedFiles',
       'stagedFiles',
       'lastCommitMsg',
-      'currentMergeRequestId',
     ]),
     ...mapGetters(['currentProject', 'someUncommitedChanges']),
     showSuccessMessage() {
@@ -59,46 +38,6 @@ export default {
         (this.lastCommitMsg && !this.someUncommitedChanges)
       );
     },
-    branchTooltipTitle() {
-      return this.showTooltip ? this.currentBranchId : undefined;
-    },
-  },
-  watch: {
-    currentBranchId() {
-      this.$nextTick(() => {
-        if (!this.$refs.branchId) return;
-
-        this.showTooltip = this.$refs.branchId.scrollWidth > this.$refs.branchId.offsetWidth;
-      });
-    },
-    loading() {
-      this.$nextTick(() => {
-        this.addDropdownListeners();
-      });
-    },
-  },
-  mounted() {
-    this.addDropdownListeners();
-  },
-  beforeDestroy() {
-    $(this.$refs.mergeRequestDropdown)
-      .off('show.bs.dropdown')
-      .off('hide.bs.dropdown');
-  },
-  methods: {
-    addDropdownListeners() {
-      if (!this.$refs.mergeRequestDropdown) return;
-
-      $(this.$refs.mergeRequestDropdown)
-        .on('show.bs.dropdown', () => {
-          this.toggleMergeRequestDropdown();
-        }).on('hide.bs.dropdown', () => {
-          this.toggleMergeRequestDropdown();
-        });
-    },
-    toggleMergeRequestDropdown() {
-      this.showMergeRequestsDropdown = !this.showMergeRequestsDropdown;
-    },
   },
 };
 </script>
@@ -108,12 +47,10 @@ export default {
     :collapsible="false"
     :initial-width="340"
     side="left"
+    class="flex-column"
   >
-    <activity-bar
-      v-if="!loading"
-    />
-    <div class="multi-file-commit-panel-inner">
-      <template v-if="loading">
+    <template v-if="loading">
+      <div class="multi-file-commit-panel-inner">
         <div
           v-for="n in 3"
           :key="n"
@@ -121,81 +58,23 @@ export default {
         >
           <skeleton-loading-container />
         </div>
-      </template>
-      <template v-else>
-        <div
-          ref="mergeRequestDropdown"
-          class="context-header ide-context-header dropdown"
-        >
-          <button
-            type="button"
-            data-toggle="dropdown"
-          >
-            <div
-              v-if="currentProject.avatar_url"
-              class="avatar-container s40 project-avatar"
-            >
-              <project-avatar-image
-                :link-href="currentProject.path"
-                :img-src="currentProject.avatar_url"
-                :img-alt="currentProject.name"
-                :img-size="40"
-                class="avatar-container project-avatar"
-              />
-            </div>
-            <identicon
-              v-else
-              :entity-id="currentProject.id"
-              :entity-name="currentProject.name"
-              size-class="s40"
+      </div>
+    </template>
+    <template v-else>
+      <ide-project-header
+        :project="currentProject"
+      />
+      <div class="ide-context-body d-flex flex-fill">
+        <activity-bar />
+        <div class="multi-file-commit-panel-inner">
+          <div class="multi-file-commit-panel-inner-content">
+            <component
+              :is="currentActivityView"
             />
-            <div class="ide-sidebar-project-title">
-              <div class="sidebar-context-title">
-                {{ currentProject.name }}
-              </div>
-              <div class="d-flex">
-                <div
-                  v-tooltip
-                  v-if="currentBranchId"
-                  ref="branchId"
-                  :title="branchTooltipTitle"
-                  class="sidebar-context-title ide-sidebar-branch-title"
-                >
-                  <icon
-                    name="branch"
-                    css-classes="append-right-5"
-                  />{{ currentBranchId }}
-                </div>
-                <div
-                  v-if="currentMergeRequestId"
-                  :class="{
-                    'prepend-left-8': currentBranchId
-                  }"
-                  class="sidebar-context-title ide-sidebar-branch-title"
-                >
-                  <icon
-                    name="git-merge"
-                    css-classes="append-right-5"
-                  />!{{ currentMergeRequestId }}
-                </div>
-              </div>
-            </div>
-            <icon
-              class="ml-auto"
-              name="chevron-down"
-            />
-          </button>
-          <merge-request-dropdown
-            :show="showMergeRequestsDropdown"
-          />
-        </div>
-        <div class="multi-file-commit-panel-inner-scroll">
-          <component
-            :is="currentActivityView"
-          />
+          </div>
+          <commit-form />
         </div>
-        <commit-form />
-      </template>
-    </div>
+      </div>
+    </template>
   </resizable-panel>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue
index e996dd9059e..33f1179a234 100644
--- a/app/assets/javascripts/ide/components/ide_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_tree.vue
@@ -35,7 +35,6 @@ export default {
 
 <template>
   <ide-tree-list
-    header-class="d-flex w-100"
     viewer-type="editor"
   >
     <template
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index 2e7226b727c..e303ff6ea8f 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -59,12 +59,16 @@ export default {
       >
         <slot name="header"></slot>
       </header>
-      <repo-file
-        v-for="file in currentTree.tree"
-        :key="file.key"
-        :file="file"
-        :level="0"
-      />
+      <div
+        class="ide-tree-body"
+      >
+        <repo-file
+          v-for="file in currentTree.tree"
+          :key="file.key"
+          :file="file"
+          :level="0"
+        />
+      </div>
     </template>
   </div>
 </template>