From 9c1d647e1147a2738ae6aad95eff21560a4aa0f3 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 27 Oct 2022 14:47:05 +0200
Subject: [PATCH] Fix some issues with SurveyJS

---
 client/package-lock.json            | 131 +++++++++++++---------------
 client/package.json                 |   3 +-
 client/src/pages/survey.vue         |  47 ++++++----
 client/src/styles/_survey.scss      |  12 +--
 server/assignments/wagtail_hooks.py |   3 +-
 server/surveys/admin.py             |  13 ++-
 server/surveys/wagtail_hooks.py     |   5 +-
 7 files changed, 110 insertions(+), 104 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index b59204c3..5851f199 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -71,8 +71,7 @@
         "sass-loader": "^12.6.0",
         "semver": "^5.3.0",
         "shelljs": "^0.8.5",
-        "survey-core": "1.9.41",
-        "survey-knockout-ui": "1.9.41",
+        "survey-knockout": "^1.9.41",
         "ts-loader": "^8.3.0",
         "typescript": "^4.5.4",
         "uploadcare-widget": "^3.6.0",
@@ -116,9 +115,9 @@
       }
     },
     "node_modules/@apollo/client": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.7.0.tgz",
-      "integrity": "sha512-hp4OvrH1ZIQACRYcIrh/C0WFnY7IM7G6nlTpC8DSTEWxfZQ2kvpvDY0I/hYmCs0oAVrg26g3ANEdOzGWTcYbPg==",
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.7.1.tgz",
+      "integrity": "sha512-xu5M/l7p9gT9Fx7nF3AQivp0XukjB7TM7tOd5wifIpI8RskYveL4I+rpTijzWrnqCPZabkbzJKH7WEAKdctt9w==",
       "dependencies": {
         "@graphql-typed-document-node/core": "^3.1.1",
         "@wry/context": "^0.7.0",
@@ -3958,9 +3957,9 @@
       }
     },
     "node_modules/@sinclair/typebox": {
-      "version": "0.24.50",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.50.tgz",
-      "integrity": "sha512-k8ETQOOQDg5FtK7y9KJWpsGLik+QlPmIi8zzl/dGUgshV2QitprkFlCR/AemjWOTyKn9UwSSGRTzLVotvgCjYQ=="
+      "version": "0.24.51",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
+      "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA=="
     },
     "node_modules/@sinonjs/commons": {
       "version": "1.8.3",
@@ -4317,9 +4316,9 @@
       "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ=="
     },
     "node_modules/@types/node": {
-      "version": "18.11.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.5.tgz",
-      "integrity": "sha512-3JRwhbjI+cHLAkUorhf8RnqUbFXajvzX4q6fMn5JwkgtuwfYtRQYI3u4V92vI6NJuTsbBQWWh3RZjFsuevyMGQ=="
+      "version": "18.11.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.7.tgz",
+      "integrity": "sha512-LhFTglglr63mNXUSRYD8A+ZAIu5sFqNJ4Y2fPuY7UlrySJH87rRRlhtVmMHplmfk5WkoJGmDjE9oiTfyX94CpQ=="
     },
     "node_modules/@types/normalize-package-data": {
       "version": "2.4.1",
@@ -4352,9 +4351,9 @@
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
     "node_modules/@types/semver": {
-      "version": "7.3.12",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.12.tgz",
-      "integrity": "sha512-WwA1MW0++RfXmCr12xeYOOC5baSC9mSb0ZqCquFzKhcoF4TvHu5MKOuXsncgZcpVFhB1pXd5hZmM0ryAoCp12A=="
+      "version": "7.3.13",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
+      "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw=="
     },
     "node_modules/@types/serve-index": {
       "version": "1.9.1",
@@ -6187,9 +6186,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001425",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001425.tgz",
-      "integrity": "sha512-/pzFv0OmNG6W0ym80P3NtapU0QEiDS3VuYAZMGoLLqiC7f6FJFe1MjpQDREGApeenD9wloeytmVDj+JLXPC6qw==",
+      "version": "1.0.30001426",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001426.tgz",
+      "integrity": "sha512-n7cosrHLl8AWt0wwZw/PJZgUg3lV0gk9LMI7ikGJwhyhgsd2Nb65vKvmSexCqq/J7rbH3mFG6yZZiPR5dLPW5A==",
       "funding": [
         {
           "type": "opencollective",
@@ -7235,9 +7234,9 @@
       }
     },
     "node_modules/cypress": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.10.0.tgz",
-      "integrity": "sha512-bU8r44x1NIYAUNNXt3CwJpLOVth7HUv2hUhYCxZmgZ1IugowDvuHNpevnoZRQx1KKOEisLvIJW+Xen5Pjn41pg==",
+      "version": "10.11.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.11.0.tgz",
+      "integrity": "sha512-lsaE7dprw5DoXM00skni6W5ElVVLGAdRUUdZjX2dYsGjbY/QnpzWZ95Zom1mkGg0hAaO/QVTZoFVS7Jgr/GUPA==",
       "hasInstallScript": true,
       "dependencies": {
         "@cypress/request": "^2.88.10",
@@ -7291,9 +7290,9 @@
       }
     },
     "node_modules/cypress/node_modules/@types/node": {
-      "version": "14.18.32",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.32.tgz",
-      "integrity": "sha512-Y6S38pFr04yb13qqHf8uk1nHE3lXgQ30WZbv1mLliV9pt0NjvqdWttLcrOYLnXbOafknVYRHZGoMSpR9UwfYow=="
+      "version": "14.18.33",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.33.tgz",
+      "integrity": "sha512-qelS/Ra6sacc4loe/3MSjXNL1dNQ/GjxNHVzuChwMfmk7HuycRLVQN2qNY3XahK+fZc5E2szqQSKUyAF0E+2bg=="
     },
     "node_modules/cypress/node_modules/ansi-styles": {
       "version": "4.3.0",
@@ -18428,18 +18427,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/survey-core": {
-      "version": "1.9.41",
-      "resolved": "https://registry.npmjs.org/survey-core/-/survey-core-1.9.41.tgz",
-      "integrity": "sha512-JhJa27EPXqEPTZY1PR+4JwCKBgevGlHca2f6+R5QRCzeH5Xq7l+Fbg8HZCaPb967k1hSfCUUC8g07uUmO3oXLQ=="
-    },
-    "node_modules/survey-knockout-ui": {
-      "version": "1.9.41",
-      "resolved": "https://registry.npmjs.org/survey-knockout-ui/-/survey-knockout-ui-1.9.41.tgz",
-      "integrity": "sha512-Dj5Yk/2iNZ2YzGxzX7gNOsRAW8qEnce4xr6YyeXKBHwV1VGjFC6jdTFeuE4EBmuFhZnIskjS0jRPH1tlBOm13Q==",
+    "node_modules/survey-knockout": {
+      "version": "1.9.55",
+      "resolved": "https://registry.npmjs.org/survey-knockout/-/survey-knockout-1.9.55.tgz",
+      "integrity": "sha512-5r+PglnG5omD8WEo7F9/QWKcNEjdwukw6a4T/I+e/0o0A0WzUkpdZdxQVgttESLlgJcX+FeTk0eO8813/U/NVA==",
       "dependencies": {
-        "knockout": "^3.5.0",
-        "survey-core": "*"
+        "knockout": "^3.5.1"
       }
     },
     "node_modules/svgo": {
@@ -19911,9 +19904,9 @@
       }
     },
     "node_modules/webpack-bundle-analyzer": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.6.1.tgz",
-      "integrity": "sha512-oKz9Oz9j3rUciLNfpGFjOb49/jEpXNmWdVH8Ls//zNcnLlQdTGXQQMsBbb/gR7Zl8WNLxVCq+0Hqbx3zv6twBw==",
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.7.0.tgz",
+      "integrity": "sha512-j9b8ynpJS4K+zfO5GGwsAcQX4ZHpWV+yRiHDiL+bE0XHJ8NiPYLTNVQdlFYWxtpg9lfAQNlwJg16J9AJtFSXRg==",
       "dependencies": {
         "acorn": "^8.0.4",
         "acorn-walk": "^8.0.0",
@@ -20673,9 +20666,9 @@
       }
     },
     "@apollo/client": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.7.0.tgz",
-      "integrity": "sha512-hp4OvrH1ZIQACRYcIrh/C0WFnY7IM7G6nlTpC8DSTEWxfZQ2kvpvDY0I/hYmCs0oAVrg26g3ANEdOzGWTcYbPg==",
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.7.1.tgz",
+      "integrity": "sha512-xu5M/l7p9gT9Fx7nF3AQivp0XukjB7TM7tOd5wifIpI8RskYveL4I+rpTijzWrnqCPZabkbzJKH7WEAKdctt9w==",
       "requires": {
         "@graphql-typed-document-node/core": "^3.1.1",
         "@wry/context": "^0.7.0",
@@ -23488,9 +23481,9 @@
       "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
     },
     "@sinclair/typebox": {
-      "version": "0.24.50",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.50.tgz",
-      "integrity": "sha512-k8ETQOOQDg5FtK7y9KJWpsGLik+QlPmIi8zzl/dGUgshV2QitprkFlCR/AemjWOTyKn9UwSSGRTzLVotvgCjYQ=="
+      "version": "0.24.51",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
+      "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA=="
     },
     "@sinonjs/commons": {
       "version": "1.8.3",
@@ -23785,9 +23778,9 @@
       "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ=="
     },
     "@types/node": {
-      "version": "18.11.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.5.tgz",
-      "integrity": "sha512-3JRwhbjI+cHLAkUorhf8RnqUbFXajvzX4q6fMn5JwkgtuwfYtRQYI3u4V92vI6NJuTsbBQWWh3RZjFsuevyMGQ=="
+      "version": "18.11.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.7.tgz",
+      "integrity": "sha512-LhFTglglr63mNXUSRYD8A+ZAIu5sFqNJ4Y2fPuY7UlrySJH87rRRlhtVmMHplmfk5WkoJGmDjE9oiTfyX94CpQ=="
     },
     "@types/normalize-package-data": {
       "version": "2.4.1",
@@ -23820,9 +23813,9 @@
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
     "@types/semver": {
-      "version": "7.3.12",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.12.tgz",
-      "integrity": "sha512-WwA1MW0++RfXmCr12xeYOOC5baSC9mSb0ZqCquFzKhcoF4TvHu5MKOuXsncgZcpVFhB1pXd5hZmM0ryAoCp12A=="
+      "version": "7.3.13",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
+      "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw=="
     },
     "@types/serve-index": {
       "version": "1.9.1",
@@ -25182,9 +25175,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001425",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001425.tgz",
-      "integrity": "sha512-/pzFv0OmNG6W0ym80P3NtapU0QEiDS3VuYAZMGoLLqiC7f6FJFe1MjpQDREGApeenD9wloeytmVDj+JLXPC6qw=="
+      "version": "1.0.30001426",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001426.tgz",
+      "integrity": "sha512-n7cosrHLl8AWt0wwZw/PJZgUg3lV0gk9LMI7ikGJwhyhgsd2Nb65vKvmSexCqq/J7rbH3mFG6yZZiPR5dLPW5A=="
     },
     "caseless": {
       "version": "0.12.0",
@@ -25942,9 +25935,9 @@
       }
     },
     "cypress": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.10.0.tgz",
-      "integrity": "sha512-bU8r44x1NIYAUNNXt3CwJpLOVth7HUv2hUhYCxZmgZ1IugowDvuHNpevnoZRQx1KKOEisLvIJW+Xen5Pjn41pg==",
+      "version": "10.11.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.11.0.tgz",
+      "integrity": "sha512-lsaE7dprw5DoXM00skni6W5ElVVLGAdRUUdZjX2dYsGjbY/QnpzWZ95Zom1mkGg0hAaO/QVTZoFVS7Jgr/GUPA==",
       "requires": {
         "@cypress/request": "^2.88.10",
         "@cypress/xvfb": "^1.2.4",
@@ -25991,9 +25984,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "14.18.32",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.32.tgz",
-          "integrity": "sha512-Y6S38pFr04yb13qqHf8uk1nHE3lXgQ30WZbv1mLliV9pt0NjvqdWttLcrOYLnXbOafknVYRHZGoMSpR9UwfYow=="
+          "version": "14.18.33",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.33.tgz",
+          "integrity": "sha512-qelS/Ra6sacc4loe/3MSjXNL1dNQ/GjxNHVzuChwMfmk7HuycRLVQN2qNY3XahK+fZc5E2szqQSKUyAF0E+2bg=="
         },
         "ansi-styles": {
           "version": "4.3.0",
@@ -34204,18 +34197,12 @@
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
-    "survey-core": {
-      "version": "1.9.41",
-      "resolved": "https://registry.npmjs.org/survey-core/-/survey-core-1.9.41.tgz",
-      "integrity": "sha512-JhJa27EPXqEPTZY1PR+4JwCKBgevGlHca2f6+R5QRCzeH5Xq7l+Fbg8HZCaPb967k1hSfCUUC8g07uUmO3oXLQ=="
-    },
-    "survey-knockout-ui": {
-      "version": "1.9.41",
-      "resolved": "https://registry.npmjs.org/survey-knockout-ui/-/survey-knockout-ui-1.9.41.tgz",
-      "integrity": "sha512-Dj5Yk/2iNZ2YzGxzX7gNOsRAW8qEnce4xr6YyeXKBHwV1VGjFC6jdTFeuE4EBmuFhZnIskjS0jRPH1tlBOm13Q==",
+    "survey-knockout": {
+      "version": "1.9.55",
+      "resolved": "https://registry.npmjs.org/survey-knockout/-/survey-knockout-1.9.55.tgz",
+      "integrity": "sha512-5r+PglnG5omD8WEo7F9/QWKcNEjdwukw6a4T/I+e/0o0A0WzUkpdZdxQVgttESLlgJcX+FeTk0eO8813/U/NVA==",
       "requires": {
-        "knockout": "^3.5.0",
-        "survey-core": "*"
+        "knockout": "^3.5.1"
       }
     },
     "svgo": {
@@ -35332,9 +35319,9 @@
       }
     },
     "webpack-bundle-analyzer": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.6.1.tgz",
-      "integrity": "sha512-oKz9Oz9j3rUciLNfpGFjOb49/jEpXNmWdVH8Ls//zNcnLlQdTGXQQMsBbb/gR7Zl8WNLxVCq+0Hqbx3zv6twBw==",
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.7.0.tgz",
+      "integrity": "sha512-j9b8ynpJS4K+zfO5GGwsAcQX4ZHpWV+yRiHDiL+bE0XHJ8NiPYLTNVQdlFYWxtpg9lfAQNlwJg16J9AJtFSXRg==",
       "requires": {
         "acorn": "^8.0.4",
         "acorn-walk": "^8.0.0",
diff --git a/client/package.json b/client/package.json
index 7847c7df..9a6a9e8c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -88,8 +88,7 @@
     "sass-loader": "^12.6.0",
     "semver": "^5.3.0",
     "shelljs": "^0.8.5",
-    "survey-core": "1.9.41",
-    "survey-knockout-ui": "1.9.41",
+    "survey-knockout": "^1.9.41",
     "ts-loader": "^8.3.0",
     "typescript": "^4.5.4",
     "uploadcare-widget": "^3.6.0",
diff --git a/client/src/pages/survey.vue b/client/src/pages/survey.vue
index 245b14a1..9798abc5 100644
--- a/client/src/pages/survey.vue
+++ b/client/src/pages/survey.vue
@@ -19,11 +19,12 @@
 </template>
 
 <script>
+  import '@/styles/survey.modern.css';
+  import '@/styles/survey.reset.css';
   import {css} from '@/survey.config';
   import gql from 'graphql-tag';
-  import {Model} from 'survey-core';
+  import {Model, StylesManager} from 'survey-knockout';
   // we are switching to the knockout version because the Vue version only works with Vue 2 (as of July 2022)
-  import 'survey-knockout-ui';
 
   import SURVEY_QUERY from '@/graphql/gql/queries/surveyQuery.gql';
   import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
@@ -34,6 +35,7 @@
   import {meQuery} from '@/graphql/queries';
 
   const Solution = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution');
+  StylesManager.applyTheme('modern');
 
   const MODULE_QUERY = gql`
     query ModuleSolutions($slug: String) {
@@ -53,6 +55,7 @@
     data() {
       return {
         survey: this.initSurvey(),
+        surveyData: null,
         title: '',
         module: {},
         completed: false,
@@ -105,6 +108,15 @@
       },
     },
 
+    mounted() {
+      if(this.surveyData) {
+        this.loadSurveyFromServer(this.surveyData);
+      }
+    },
+
+    destroyed() {
+    },
+
     methods: {
       initSurvey(data, answers) {
         let survey = new Model(data);
@@ -112,15 +124,12 @@
         for (let k in answers) {
           flatAnswers[k] = answers[k].answer;
         }
-        this.$log.debug('flatAnswers', flatAnswers);
-        this.$log.debug('data', survey.data);
         if (Object.keys(flatAnswers).length > 0) {
           // answers are not empty
           survey.data = flatAnswers;
         }
 
         const saveSurvey = (sender, {exit}) => {
-          this.$log.debug('saving survey', sender);
           if (this.saveDisabled) {
             return;
           }
@@ -188,7 +197,6 @@
         survey.locale = 'de';
         survey.showProgressBar = 'bottom';
         survey.pageNextText = 'Speichern & Weiter';
-        this.$log.debug(survey.data);
         survey.render('survey');
         return survey;
       },
@@ -200,6 +208,20 @@
         this.survey.data = data; // reapply it
         this.saveDisabled = false;
       },
+      loadSurveyFromServer(survey) {
+        let json = JSON.parse(survey.data);
+        json.showTitle = false;
+        json.showProgressBar = 'bottom';
+        let answer = {};
+        if (survey.answer && survey.answer.data) {
+          answer = JSON.parse(survey.answer.data);
+        }
+
+        if (!this.completed) {
+          this.survey = this.initSurvey(json, answer);
+        }
+        this.title = json.title;
+      }
     },
 
     apollo: {
@@ -213,17 +235,8 @@
         manual: true,
         result({data, loading }) {
           if (!loading) {
-            let json = JSON.parse(data.survey.data);
-            json.showTitle = false;
-            let answer = {};
-            if (data.survey.answer && data.survey.answer.data) {
-              answer = JSON.parse(data.survey.answer.data);
-            }
-
-            if (!this.completed) {
-              this.survey = this.initSurvey(json, answer);
-            }
-            this.title = json.title;
+            this.surveyData = data.survey;
+            this.loadSurveyFromServer(data.survey);
             const module = data.survey.module;
 
             this.$apollo.addSmartQuery('module', {
diff --git a/client/src/styles/_survey.scss b/client/src/styles/_survey.scss
index b6f48067..cff43e2e 100644
--- a/client/src/styles/_survey.scss
+++ b/client/src/styles/_survey.scss
@@ -71,7 +71,12 @@
     margin-left: auto;
 
     > span {
-      display: none;
+      position: absolute;
+      width: 100%;
+      text-align: right;
+      bottom: -2em;
+      @include regular-text;
+
     }
   }
 
@@ -86,11 +91,6 @@
     height: 100%;
 
     > span {
-      position: absolute;
-      width: 100%;
-      text-align: right;
-      bottom: -2em;
-      @include regular-text;
     }
 
   }
diff --git a/server/assignments/wagtail_hooks.py b/server/assignments/wagtail_hooks.py
index 93776d59..869727b1 100644
--- a/server/assignments/wagtail_hooks.py
+++ b/server/assignments/wagtail_hooks.py
@@ -1,10 +1,11 @@
 from wagtail.contrib.modeladmin.options import ModelAdmin, modeladmin_register
+
 from .models import Assignment
 
 
 class AssignmentAdmin(ModelAdmin):
     model = Assignment
-    list_display = ('title', 'module', 'assignment')
+    list_display = ('title', 'module', 'assignment',)
     search_fields = ('title', 'assignment')
     menu_icon = 'form'
 
diff --git a/server/surveys/admin.py b/server/surveys/admin.py
index a5ac38aa..2f5eafee 100644
--- a/server/surveys/admin.py
+++ b/server/surveys/admin.py
@@ -35,15 +35,20 @@ class JSONAdmin(admin.ModelAdmin):
         JSONField: {'widget': PrettyJSONWidget}
     }
 
+
+class SurveyAdminLinkMixin:
+    def link(self, obj):
+        return format_html('<a href="/survey/{id}" target="_blank">Link</a>', id=to_global_id('SurveyNode', obj.pk))
+
+    link.short_description = 'Link'
+
+
 @admin.register(Survey)
-class SurveyAdmin(JSONAdmin):
+class SurveyAdmin(JSONAdmin, SurveyAdminLinkMixin):
     list_display = ('title', 'link',)
     list_filter = ('module',)
     search_fields = ('title', 'data')
 
-    def link(self, obj):
-        return format_html('<a href="/survey/{id}" target="_blank">Link</a>', id=to_global_id('SurveyNode', obj.pk))
-    link.short_description = 'Link'
 
 @admin.register(Answer)
 class AnswerAdmin(JSONAdmin):
diff --git a/server/surveys/wagtail_hooks.py b/server/surveys/wagtail_hooks.py
index 685ab6a2..ecfe15cc 100644
--- a/server/surveys/wagtail_hooks.py
+++ b/server/surveys/wagtail_hooks.py
@@ -1,11 +1,12 @@
 from wagtail.contrib.modeladmin.options import ModelAdmin, modeladmin_register
 from .models import Survey
+from surveys.admin import SurveyAdminLinkMixin
 
 
-class SurveyAdmin(ModelAdmin):
+class SurveyAdmin(ModelAdmin, SurveyAdminLinkMixin):
     model = Survey
     menu_label = 'Surveys'
-    list_display = ('title', 'module')
+    list_display = ('title', 'module', 'link')
     search_fields = ('title', 'module__meta_title')
     menu_icon = 'help'