Linkify project name in DatasetShow (#756)

src/components/dataset/show.vue

@@ -12,7 +12,7 @@ except according to the terms contained in the LICENSE file.
 
 <template>
   <div id="dataset-show">
-    <page-back v-show="dataExists" :to="projectPath('datasets')">
+    <page-back v-show="dataExists" :to="[projectPath(), projectPath('datasets')]">
       <template #title>{{ project.dataExists ? project.nameWithArchived : '' }}</template>
       <template #back>{{ $t('resource.datasets') }}</template>
     </page-back>

src/components/form/head.vue

@@ -11,7 +11,7 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <div id="form-head">
-    <page-back :to="projectPath()" link-title>
+    <page-back :to="[projectPath(), projectPath()]">
       <template #title>{{ project.dataExists ? project.nameWithArchived : '' }}</template>
       <template #back>{{ $t('resource.forms') }}</template>
     </page-back>

src/components/page/back.vue

@@ -14,7 +14,7 @@ except according to the terms contained in the LICENSE file.
     <div class="col-xs-12">
       <div>
         <span id="page-back-title">
-          <router-link v-if="linkTitle" :to="to">
+          <router-link v-if="toArray[0] != null" :to="toArray[0]">
             <slot name="title"></slot>
           </router-link>
           <template v-else>
@@ -24,7 +24,7 @@ except according to the terms contained in the LICENSE file.
         <div class="arrow">
           <img src="../../../public/images/arrow.svg" alt="">
         </div>
-        <router-link id="page-back-back" :to="to">
+        <router-link id="page-back-back" :to="toArray[1]">
           <slot name="back"></slot>
         </router-link>
       </div>
@@ -37,10 +37,14 @@ export default {
   name: 'PageBack',
   props: {
     to: {
-      type: String,
+      type: [String, Array],
       required: true
-    },
-    linkTitle: Boolean
+    }
+  },
+  computed: {
+    toArray() {
+      return Array.isArray(this.to) ? this.to : [null, this.to];
+    }
   }
 };
 </script>

test/components/dataset/show.spec.js

@@ -45,7 +45,7 @@ describe('DatasetShow', () => {
   it('renders a back link', async () => {
     const component = await load('/projects/1/datasets/trees');
     const { to } = component.getComponent(PageBack).props();
-    to.should.equal('/projects/1/datasets');
+    to.should.eql(['/projects/1', '/projects/1/datasets']);
   });
 
   it('show correct project name', async () => {

test/components/form/head.spec.js

@@ -33,11 +33,11 @@ describe('FormHead', () => {
       });
     });
 
-    it("renders the project's name as a link", () => {
+    it("renders the project's name as a link", async () => {
       testData.extendedForms.createPast(1);
-      return load('/projects/1/forms/f').then(component => {
-        component.getComponent(PageBack).props().to.should.equal('/projects/1');
-      });
+      const component = await load('/projects/1/forms/f');
+      const { to } = component.getComponent(PageBack).props();
+      to.should.eql(['/projects/1', '/projects/1']);
     });
 
     it("shows the form's name", async () => {

test/components/page/back.spec.js

@@ -13,51 +13,70 @@ const mountComponent = (options) => mount(PageBack, mergeMountOptions(options, {
 }));
 
 describe('PageBack', () => {
-  describe('linkTitle prop is true', () => {
+  describe('location specified for the title', () => {
     it('renders a link', () => {
       const component = mountComponent({
-        props: { to: '/users', linkTitle: true }
+        props: { to: ['/users', '/account/edit'] }
       });
-      const link = component.getComponent(RouterLinkStub);
-      should.exist(link.element.closest('#page-back-title'));
+      const link = component.get('#page-back-title').getComponent(RouterLinkStub);
       link.props().to.should.equal('/users');
     });
 
     it('uses the title slot', () => {
       const component = mountComponent({
-        props: { to: '/users', linkTitle: true },
+        props: { to: ['/users', '/account/edit'] },
         slots: { title: TestUtilSpan }
       });
-      const text = component.getComponent(RouterLinkStub).get('span').text();
+      const text = component.get('#page-back-title a span').text();
       text.should.equal('Some span text');
     });
   });
 
-  describe('linkTitle prop is false', () => {
-    it('does not render a link', () => {
+  describe('location is not specified for the title', () => {
+    it('does not render a link if the to prop is string', () => {
       const component = mountComponent({
-        props: { to: '/users', linkTitle: false }
+        props: { to: '/account/edit' }
       });
       component.find('#page-back-title a').exists().should.be.false();
     });
 
-    it('uses the title slot', () => {
+    it('does not render a link if first element of to prop is null', () => {
       const component = mountComponent({
-        props: { to: '/users', linkTitle: false },
+        props: { to: [null, '/account/edit'] }
+      });
+      component.find('#page-back-title a').exists().should.be.false();
+    });
+
+    it('still uses the title slot', () => {
+      const component = mountComponent({
+        props: { to: '/account/edit' },
         slots: { title: TestUtilSpan }
       });
       const text = component.get('#page-back-title span').text();
       text.should.equal('Some span text');
     });
   });
 
-  it('renders a link for the back slot', () => {
-    const component = mountComponent({
-      props: { to: '/users' }
+  describe('link for the back slot', () => {
+    it('renders a link if the to prop is string', () => {
+      const component = mountComponent({
+        props: { to: '/account/edit' }
+      });
+      const links = component.findAllComponents(RouterLinkStub);
+      links.length.should.equal(1);
+      links[0].attributes().id.should.equal('page-back-back');
+      links[0].props().to.should.equal('/account/edit');
+    });
+
+    it('renders a link if the to prop is an array', () => {
+      const component = mountComponent({
+        props: { to: ['/users', '/account/edit'] }
+      });
+      const links = component.findAllComponents(RouterLinkStub);
+      links.length.should.equal(2);
+      links[1].attributes().id.should.equal('page-back-back');
+      links[1].props().to.should.equal('/account/edit');
     });
-    const link = component.getComponent(RouterLinkStub);
-    link.attributes().id.should.equal('page-back-back');
-    link.props().to.should.equal('/users');
   });
 
   it('uses the back slot', () => {