Hide module teacher actions when in read-only mode

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

@@ -0,0 +1,52 @@
+import mocks from '../../fixtures/mocks';
+import minimalModule from '../../fixtures/module.minimal';
+
+const getOperations = ({readOnly}) => ({
+  MeQuery: {
+    me: {
+      onboardingVisited: true,
+      readOnly,
+      isTeacher: true
+    },
+  },
+  ModuleDetailsQuery: {
+    module: {
+      ...minimalModule
+    }
+  },
+});
+
+describe('Module Navigation - read only', () => {
+  beforeEach(() => {
+    cy.fakeLogin('nico.teacher', 'test');
+    cy.server();
+    cy.task('getSchema').then(schema => {
+      cy.mockGraphql({
+        schema,
+        mocks,
+      });
+    });
+    cy.viewport('macbook-15');
+  });
+
+  it('is not shown', () => {
+    cy.mockGraphqlOps({
+      operations: getOperations({readOnly: true}),
+    });
+
+    cy.visit('module/module-slug');
+
+    cy.getByDataCy('module-navigation').should('exist');
+    cy.getByDataCy('module-teacher-menu').should('not.exist');
+  });
+  it('is shown', () => {
+    cy.mockGraphqlOps({
+      operations: getOperations({readOnly: false}),
+    });
+
+    cy.visit('module/module-slug');
+
+    cy.getByDataCy('module-navigation').should('exist');
+    cy.getByDataCy('module-teacher-menu').should('exist');
+  });
+});

client/src/components/modules/ModuleNavigation.vue

@@ -1,5 +1,6 @@
 <template>
   <nav
+    data-cy="module-navigation"
     class="module-navigation sub-navigation">
     <back-link
       :title="module.topic.title"
@@ -42,7 +43,8 @@
 
     <div
       class="module-navigation__toggle-menu"
-      v-if="canManageContent"
+      data-cy="module-teacher-menu"
+      v-if="canManageContent && !me.readOnly"
     >
       <snapshot-menu class="module-navigation__actions"/>
       <router-link