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

Update message shown when there are no projects

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": {