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,5 +1,4 @@
-import mocks from '../../../fixtures/mocks';
+describe('Room Team Management - Read only', () => {
-
   const SELECTED_CLASS_ID = 'selectedClassId';
 
   const getOperations = ({readOnly, classReadOnly}) => ({
@@ -26,7 +25,7 @@ const getOperations = ({readOnly, classReadOnly}) => ({
               description: 'some description',
               schoolClass: {
                 id: SELECTED_CLASS_ID,
-              name: 'bla'
+                name: 'bla',
               },
             },
           },
@@ -50,7 +49,6 @@ const checkRoomsReadOnly = ({editable, readOnly, classReadOnly = false}) => {
     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,5 +1,6 @@
 <template>
   <div class="rooms-page">
+    <template v-if="filteredRooms.length > 0">
       <room-widget
         v-bind="room"
         :key="room.name"
@@ -8,6 +9,12 @@
         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: '/rooms', name: 'rooms', component: rooms, meta: {filter: true, hideFooter: true}},
-  {path: '/new-room/', name: 'new-room', component: newRoom},
+  {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},
   {