Merge pull request #611 from getodk/projects-empty-message

Update message shown when there are no projects

Author: matthew-white

src/components/project/list.vue

@@ -28,9 +28,17 @@ except according to the terms contained in the LICENSE file.
             :max-forms="maxForms"/>
         </div>
         <loading :state="$store.getters.initiallyLoading(['projects'])"/>
-        <p v-if="projects != null && projects.length === 0"
+        <p v-if="projects != null && activeProjects.length === 0"
           class="empty-table-message">
-          {{ $t('emptyTable') }}
+          <template v-if="currentUser.can('project.create')">
+            {{ $t('emptyTable.canCreate') }}<sentence-separator/>
+            <i18n-t keypath="moreInfo.clickHere.full">
+              <template #clickHere>
+                <doc-link to="central-projects/">{{ $t('moreInfo.clickHere.clickHere') }}</doc-link>
+              </template>
+            </i18n-t>
+          </template>
+          <template v-else>{{ $t('emptyTable.cannotCreate') }}</template>
         </p>
       </template>
     </page-section>
@@ -56,11 +64,13 @@ except according to the terms contained in the LICENSE file.
 <script>
 import { sum } from 'ramda';
 
+import DocLink from '../doc-link.vue';
 import Loading from '../loading.vue';
 import PageSection from '../page/section.vue';
 import ProjectNew from './new.vue';
 import ProjectHomeBlock from './home-block.vue';
 import ProjectSort from './sort.vue';
+import SentenceSeparator from '../sentence-separator.vue';
 
 import modal from '../../mixins/modal';
 import routes from '../../mixins/routes';
@@ -70,11 +80,13 @@ import sortFunctions from '../../util/sort';
 export default {
   name: 'ProjectList',
   components: {
+    DocLink,
     Loading,
     PageSection,
     ProjectNew,
     ProjectHomeBlock,
-    ProjectSort
+    ProjectSort,
+    SentenceSeparator
   },
   mixins: [modal(), routes()],
   inject: ['alert'],
@@ -166,7 +178,10 @@ export default {
       // This is the text of a button that is used to create a new Project.
       "create": "New"
     },
-    "emptyTable": "There are no Projects for you to see.",
+    "emptyTable": {
+      "canCreate": "To get started, create a Project. Projects help you organize your data by grouping related Forms and Users.",
+      "cannotCreate": "There are no Projects to show. If you expect to see Projects here, talk to the person who gave you this account. They may need to assign a Project Role for Projects you’re supposed to see."
+    },
     "alert": {
       "create": "Your new Project has been successfully created."
     }

test/components/project/list.spec.js

@@ -31,14 +31,30 @@ const createProjectsWithForms = (projects, forms) => {
 };
 
 describe('ProjectList', () => {
-  beforeEach(mockLogin);
+  describe('no projects', () => {
+    it('shows the correct message if the user can project.create', () => {
+      mockLogin();
+      const message = mountComponent().get('.empty-table-message');
+      message.should.be.visible();
+      message.text().should.startWith('To get started, create a Project.');
+    });
+
+    it('shows the correct message if the user cannot project.create', () => {
+      mockLogin({ role: 'none' });
+      const message = mountComponent().get('.empty-table-message');
+      message.should.be.visible();
+      message.text().should.startWith('There are no Projects to show.');
+    });
 
-  it('shows a message if there are no projects', () => {
-    // TODO: show something fancier when there are no projects and update test
-    mountComponent().get('.empty-table-message').should.be.visible();
+    it('shows the message if there are only archived projects', () => {
+      mockLogin();
+      testData.extendedProjects.createPast(1, { archived: true });
+      mountComponent().get('.empty-table-message').should.be.visible();
+    });
   });
 
   it('renders a row for each project', () => {
+    mockLogin();
     createProjectsWithForms(
       [{ name: 'Alpha Project' }, { name: 'Bravo Project' }],
       [[{}, {}], [{}, {}, {}, {}, {}]]
@@ -49,17 +65,20 @@ describe('ProjectList', () => {
   });
 
   it('shows archived projects at the bottom of the page', () => {
+    mockLogin();
     testData.extendedProjects.createPast(2);
     testData.extendedProjects.createPast(3, { archived: true });
     mountComponent().findAll('#project-list-archived .project-title').length.should.equal(3);
   });
 
   it('does not show archived header if no archived projects exist', () => {
+    mockLogin();
     mountComponent().find('#project-list-archived').exists().should.be.false();
   });
 
   describe('sorting', () => {
     beforeEach(() => {
+      mockLogin();
       createProjectsWithForms(
         [
           { name: 'A', lastSubmission: ago({ days: 15 }).toISO() },
@@ -125,6 +144,8 @@ describe('ProjectList', () => {
   });
 
   describe('sorting with ties', () => {
+    beforeEach(mockLogin);
+
     it('sorts projects alphabetically when last submission is null', async () => {
       createProjectsWithForms(
         [
@@ -158,6 +179,8 @@ describe('ProjectList', () => {
   });
 
   describe('dynamic numbers of forms', () => {
+    beforeEach(mockLogin);
+
     it('renders correctly when there is one project with many forms', () => {
       createProjectsWithForms(
         [{ name: 'Project 1' }, { name: 'Project 2' }],

transifex/strings_en.json

@@ -2881,7 +2881,12 @@
         }
       },
       "emptyTable": {
-        "string": "There are no Projects for you to see."
+        "canCreate": {
+          "string": "To get started, create a Project. Projects help you organize your data by grouping related Forms and Users."
+        },
+        "cannotCreate": {
+          "string": "There are no Projects to show. If you expect to see Projects here, talk to the person who gave you this account. They may need to assign a Project Role for Projects you’re supposed to see."
+        }
       },
       "alert": {
         "create": {