Add room onboarding widget

client/cypress/integration/e2e/rooms/rooms-page.spec.js

@@ -1,16 +0,0 @@
-describe('The Rooms Page', () => {
-  // todo: mock all the graphql queries and mutations
-  it('goes to the rooms page', () => {
-    cy.apolloLogin('ross.geller', 'test');
-    cy.visit('/rooms');
-
-    cy.get('[data-cy=add-room]').should('exist');
-  });
-
-  it('add room should not exist for student', () => {
-    cy.apolloLogin('rachel.green', 'test');
-    cy.visit('/rooms');
-
-    cy.get('[data-cy=add-room]').should('not.exist');
-  });
-});

client/cypress/integration/frontend/read-only/rooms.spec.js

@@ -1,56 +1,54 @@
-import mocks from '../../../fixtures/mocks';
+describe('Room Team Management - Read only', () => {
+  const SELECTED_CLASS_ID = 'selectedClassId';
 
-const SELECTED_CLASS_ID = 'selectedClassId';
-
-const getOperations = ({readOnly, classReadOnly}) => ({
-  MeQuery: {
-    me: {
-      readOnly,
-      isTeacher: true,
-      selectedClass: {
-        id: SELECTED_CLASS_ID,
-        readOnly: classReadOnly,
+  const getOperations = ({readOnly, classReadOnly}) => ({
+    MeQuery: {
+      me: {
+        readOnly,
+        isTeacher: true,
+        selectedClass: {
+          id: SELECTED_CLASS_ID,
+          readOnly: classReadOnly,
+        },
       },
     },
-  },
-  RoomsQuery: {
-    rooms: {
-      edges: [
-        {
-          node: {
-            id: '',
-            slug: '',
-            title: 'some room',
-            entryCount: 3,
-            appearance: 'red',
-            description: 'some description',
-            schoolClass: {
-              id: SELECTED_CLASS_ID,
-              name: 'bla'
+    RoomsQuery: {
+      rooms: {
+        edges: [
+          {
+            node: {
+              id: '',
+              slug: '',
+              title: 'some room',
+              entryCount: 3,
+              appearance: 'red',
+              description: 'some description',
+              schoolClass: {
+                id: SELECTED_CLASS_ID,
+                name: 'bla',
+              },
             },
           },
-        },
-      ],
+        ],
+      },
     },
-  },
-});
-
-const checkRoomsReadOnly = ({editable, readOnly, classReadOnly = false}) => {
-  const operations = getOperations({readOnly, classReadOnly});
-
-  cy.mockGraphqlOps({
-    operations,
   });
 
-  const exist = editable ? 'exist' : 'not.exist';
-  cy.visit('rooms');
-  cy.log('visit');
-  cy.get('.room-widget').should('exist');
-  cy.getByDataCy('add-room').should(exist);
-  cy.getByDataCy('widget-footer').should(exist);
-};
+  const checkRoomsReadOnly = ({editable, readOnly, classReadOnly = false}) => {
+    const operations = getOperations({readOnly, classReadOnly});
+
+    cy.mockGraphqlOps({
+      operations,
+    });
+
+    const exist = editable ? 'exist' : 'not.exist';
+    cy.visit('rooms');
+    cy.log('visit');
+    cy.get('.room-widget').should('exist');
+    cy.getByDataCy('add-room').should(exist);
+    cy.getByDataCy('widget-footer').should(exist);
+  };
 
-describe('Room Team Management - Read only', () => {
   beforeEach(() => {
     cy.setup();
   });

client/cypress/integration/frontend/rooms/rooms-page.spec.js

@@ -0,0 +1,48 @@
+import {getMinimalMe} from '../../../support/helpers';
+
+describe('The Rooms Page', () => {
+  const getOperations = (isTeacher) => ({
+    MeQuery: getMinimalMe({isTeacher}),
+    RoomsQuery: {},
+  });
+
+  beforeEach(() => {
+    cy.setup();
+  });
+
+  it.only('shows the onboarding page', () => {
+    const operations = getOperations(true);
+    cy.mockGraphqlOps({
+      operations,
+    });
+
+    cy.visit('/rooms');
+    cy.getByDataCy('page-title').should('contain', 'Räume');
+    cy.getByDataCy('rooms-onboarding-text').should('contain', 'Hier können Sie Räume erstellen');
+    cy.getByDataCy('page-footer').should('not.exist');
+    cy.getByDataCy('create-room-button').should('contain', 'Raum erstellen').click();
+    cy.url().should('include', 'new-room');
+  });
+
+  it('goes to the rooms page', () => {
+    const operations = getOperations(true);
+    cy.mockGraphqlOps({
+      operations,
+    });
+
+    cy.visit('/rooms');
+
+    cy.get('[data-cy=add-room]').should('exist');
+  });
+
+  it('add room should not exist for student', () => {
+    const operations = getOperations(false);
+    cy.mockGraphqlOps({
+      operations,
+    });
+
+    cy.visit('/rooms');
+
+    cy.get('[data-cy=add-room]').should('not.exist');
+  });
+});

client/src/components/rooms/RoomsOnboarding.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="rooms-onboarding">
+    <h1
+      class="rooms-onboarding__heading"
+      data-cy="page-title">Räume</h1>
+    <p data-cy="rooms-onboarding-text">
+      Hier können Sie Räume erstellen, damit SchülerInnen zusammenarbeiten und Beiträge teilen können.
+    </p>
+    <div class="rooms-onboarding__button">
+      <router-link
+        :to="newRoomRoute"
+        class="button button--primary"
+        data-cy="create-room-button">Raum erstellen</router-link>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import {NEW_ROOM_PAGE} from '@/router/room.names';
+
+  export default {
+    data() {
+      return {
+        newRoomRoute: NEW_ROOM_PAGE
+      };
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .rooms-onboarding {
+    display: flex;
+    width: 100vw;
+    max-width: 800px;
+    flex-direction: column;
+    justify-items: center;
+    justify-content: center;
+    justify-self: center;
+    margin: 0 auto;
+  }
+</style>

client/src/layouts/DefaultFooter.vue

@@ -1,5 +1,7 @@
 <template>
-  <footer class="default-footer">
+  <footer
+    class="default-footer"
+    data-cy="page-footer">
     <div class="default-footer__section">
       <div class="default-footer__info">
         <div class="default-footer__who-are-we who-are-we">

client/src/layouts/DefaultLayout.vue

@@ -41,7 +41,9 @@
         let cls = this.$store.state.specialContainerClass;
         return [cls ? `layout--${cls}` : '', {'skillbox--show-filter': this.showFilter}];
       },
-      enableFooter: enableFooter
+      enableFooter() {
+        return enableFooter() && (!this.$route.meta || !this.$route.meta.hideFooter);
+      }
     }
   };
 </script>

client/src/pages/rooms.vue

@@ -1,13 +1,20 @@
 <template>
   <div class="rooms-page">
-    <room-widget
-      v-bind="room"
-      :key="room.name"
-      v-for="room in filteredRooms"/>
-    <add-room
-      class="rooms-page__add-room"
-      data-cy="add-room"
-      v-if="canAddRoom"/>
+    <template v-if="filteredRooms.length > 0">
+      <room-widget
+        v-bind="room"
+        :key="room.name"
+        v-for="room in filteredRooms"/>
+      <add-room
+        class="rooms-page__add-room"
+        data-cy="add-room"
+        v-if="canAddRoom"/>
+
+    </template>
+    <template v-else>
+      <rooms-onboarding/>
+    </template>
+
   </div>
 </template>
 
@@ -17,9 +24,11 @@
 
   import RoomWidget from '@/components/rooms/RoomWidget.vue';
   import AddRoom from '@/components/rooms/AddRoom.vue';
+  import RoomsOnboarding from '@/components/rooms/RoomsOnboarding';
 
   export default {
     components: {
+      RoomsOnboarding,
       RoomWidget,
       AddRoom
     },

client/src/router/room.names.js

@@ -0,0 +1 @@
+export const NEW_ROOM_PAGE = 'new-room';

client/src/router/room.routes.js

@@ -3,10 +3,11 @@ import newRoom from '@/pages/newRoom';
 import editRoom from '@/pages/editRoom';
 import room from '@/pages/room';
 import moduleRoom from '@/pages/module/moduleRoom';
+import {NEW_ROOM_PAGE} from '@/router/room.names';
 
 export default [
-  {path: '/rooms', name: 'rooms', component: rooms, meta: {filter: true}},
-  {path: '/new-room/', name: 'new-room', component: newRoom},
+  {path: '/rooms', name: 'rooms', component: rooms, meta: {filter: true, hideFooter: true}},
+  {path: '/new-room/', name: NEW_ROOM_PAGE, component: newRoom},
   {path: '/edit-room/:id', name: 'edit-room', component: editRoom, props: true},
   {path: '/room/:slug', name: 'room', component: room, props: true},
   {