Merge branch '4592-go-back-option-ide' into 'master'

Add a Go back option to Web IDE

Closes #4592

See merge request gitlab-org/gitlab-ee!4969

app/assets/stylesheets/pages/repo.scss

@@ -682,11 +682,6 @@
       padding-bottom: 0;
     }
 
-    .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
-      max-height: calc(100vh - #{$header-height + $context-header-height});
-      min-height: calc(100vh - #{$header-height + $context-header-height});
-    }
-
     &.flash-shown {
       .content-wrapper {
         margin-top: 0;
@@ -695,10 +690,11 @@
       .ide-view {
         height: calc(100vh - #{$header-height + $flash-height});
       }
+    }
 
-      .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
-        max-height: calc(100vh - #{$header-height + $flash-height + $context-header-height});
-        min-height: calc(100vh - #{$header-height + $flash-height + $context-header-height});
+    .projects-sidebar {
+      .multi-file-commit-panel-inner-scroll {
+        flex: 1;
       }
     }
   }
@@ -718,11 +714,6 @@
     height: calc(100vh - #{$header-height + $performance-bar-height});
   }
 
-  .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
-    max-height: calc(100vh - #{$header-height + $performance-bar-height + 60});
-    min-height: calc(100vh - #{$header-height + $performance-bar-height + 60});
-  }
-
   &.flash-shown {
     .content-wrapper {
       margin-top: 0;
@@ -731,11 +722,6 @@
     .ide-view {
       height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
     }
-
-    .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
-      max-height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height + $context-header-height});
-      min-height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height + $context-header-height});
-    }
   }
 }
 
@@ -770,3 +756,29 @@
 .ide-commit-new-branch {
   margin-left: 25px;
 }
+
+.ide-external-links {
+  p {
+    margin: 0;
+  }
+}
+
+.ide-sidebar-link {
+  padding: $gl-padding-8 $gl-padding;
+  background: $indigo-700;
+  color: $white-light;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+
+  &:focus,
+  &:hover {
+    color: $white-light;
+    text-decoration: underline;
+    background: $indigo-500;
+  }
+
+  &:active {
+    background: $indigo-800;
+  }
+}

ee/app/assets/javascripts/ide/components/ide_external_links.vue

+<script>
+import icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    icon,
+  },
+  props: {
+    projectUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    goBackUrl() {
+      return document.referrer || this.projectUrl;
+    },
+  },
+};
+</script>
+
+<template>
+  <nav
+    class="ide-external-links"
+    v-once
+  >
+    <p>
+      <a
+        :href="goBackUrl"
+        class="ide-sidebar-link"
+      >
+        <icon
+          :size="16"
+          class="append-right-8"
+          name="go-back"
+        />
+        <span class="ide-external-links-text">
+          {{ s__('Go back') }}
+        </span>
+      </a>
+    </p>
+  </nav>
+</template>

ee/app/assets/javascripts/ide/components/ide_project_tree.vue

 <script>
 import projectAvatarImage from '~/vue_shared/components/project_avatar/image.vue';
 import branchesTree from './ide_project_branches_tree.vue';
+import externalLinks from './ide_external_links.vue';
 
 export default {
   components: {
     branchesTree,
+    externalLinks,
     projectAvatarImage,
   },
   props: {
@@ -37,6 +39,9 @@ export default {
         </div>
       </a>
     </div>
+    <external-links
+      :project-url="project.web_url"
+    />
     <div class="multi-file-commit-panel-inner-scroll">
       <branches-tree
         v-for="branch in project.branches"

ee/changelogs/unreleased/4592-go-back-option-ide.yml

+---
+title: Add a Go back button to WebIDE to allow returning to where it was launched
+  from
+merge_request:
+author:
+type: added

spec/javascripts/ide/components/ide_external_links_spec.js

+import Vue from 'vue';
+import ideExternalLinks from 'ee/ide/components/ide_external_links.vue';
+import createComponent from 'spec/helpers/vue_mount_component_helper';
+
+describe('ide external links component', () => {
+  let vm;
+  let fakeReferrer;
+  let Component;
+
+  const fakeProjectUrl = '/project/';
+
+  beforeEach(() => {
+    Component = Vue.extend(ideExternalLinks);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('goBackUrl', () => {
+    it('renders the Go Back link with the referrer when present', () => {
+      fakeReferrer = '/example/README.md';
+      spyOnProperty(document, 'referrer').and.returnValue(fakeReferrer);
+
+      vm = createComponent(Component, {
+        projectUrl: fakeProjectUrl,
+      }).$mount();
+
+      expect(vm.goBackUrl).toEqual(fakeReferrer);
+    });
+
+    it('renders the Go Back link with the project url when referrer is not present', () => {
+      fakeReferrer = '';
+      spyOnProperty(document, 'referrer').and.returnValue(fakeReferrer);
+
+      vm = createComponent(Component, {
+        projectUrl: fakeProjectUrl,
+      }).$mount();
+
+      expect(vm.goBackUrl).toEqual(fakeProjectUrl);
+    });
+  });
+});