Add the ability to disable the cookie banner (WPCC) by default for se…

…lf-hosted instances (#587)

.github/workflows/alpha.yml

@@ -2,7 +2,7 @@ name: 'Alpha Build'
 
 on:
   push:
-    branches: [v523/release]
+    branches: [541/wpcc]
 
 jobs:
   frontend:

Makefile

@@ -54,4 +54,5 @@ run-local:
 	docker run \
 	  --env BACKEND_HOST=localhost \
     --env BACKEND_PORT=8081 \
+		--env FRONTEND_SELF_HOSTED=true \
 		-it --rm -p 3100:80 retrospected/frontend:local

README.md

@@ -97,6 +97,11 @@ This will run a demo version, which you can turn into a fully licenced version b
 
 ## Versions History
 
+### Version 5.4.1
+
+- Add the ability to remove the Cookie Banner (GDPR) on Self-Hosted instances (which is now the case by default)
+- Upgrade dependencies (frontend)
+
 ### Version 5.4.0
 
 - Add the concept of a moderator, so the person creating the retro is not necessarily the person moderating it.

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrospected/backend",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "license": "GNU GPLv3",
   "private": true,
   "type": "module",
@@ -55,7 +55,7 @@
     "connect-redis": "6.1.3",
     "cookie-parser": "^1.4.6",
     "copyfiles": "2.4.1",
-    "crypto-js": "4.1.1",
+    "crypto-js": "4.2.0",
     "date-fns": "2.30.0",
     "dotenv": "16.3.1",
     "eslint": "8.45.0",

backend/src/index.ts

@@ -130,7 +130,7 @@ function getActualIp(req: express.Request): string {
   if (headerValue) {
     return headerValue.split(',')[0];
   }
-  return req.ip;
+  return req.ip || '';
 }
 
 // Rate Limiter

docs/docs/self-hosting/optionals.md

@@ -114,6 +114,7 @@ services:
       - '80:80' # Change the first 80 to whatever port you want to access Retrospected from
     environment:
       # -- Optional --
+      FRONTEND_SELF_HOSTED: 'true' # This should be the same on the backend side. True by default.
       FRONTEND_GOOGLE_ANALYTICS_ID: '' # Optional, Google Analytics ID (UA-1234456-7)
       FRONTEND_GOOGLE_AD_WORDS_ID: '' # Optional, Google Adwords ID (AW-1234456)
       FRONTEND_GOOGLE_AD_WORDS_CONVERSION_ID: '' # Optional, Google Adwords Event ID (AW-1234456/1234456)

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrospected/docs",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",

frontend/Dockerfile

@@ -22,7 +22,6 @@ COPY --chown=node:node ./src ./src
 COPY --chown=node:node ./public ./public
 COPY --chown=node:node ./tsconfig.json ./tsconfig.json
 COPY --chown=node:node ./vite.config.ts ./vite.config.ts
-COPY --chown=node:node ./vitest.config.ts ./vitest.config.ts
 COPY --chown=node:node ./index.html ./index.html
 COPY --chown=node:node ./.env ./.env
 
@@ -37,6 +36,7 @@ RUN apt -y install jq
 COPY --from=Node /home/node/app/dist /usr/share/nginx/html
 COPY ./docker/nginx.conf.template /etc/nginx/conf.d/default.conf.template
 COPY ./docker/frontend-entrypoint.sh /
+COPY ./docker/wpcc.html /
 
 RUN ["chmod", "+x", "/frontend-entrypoint.sh"]
 ENTRYPOINT ["/frontend-entrypoint.sh"]

frontend/docker/frontend-entrypoint.sh

@@ -9,7 +9,16 @@ envsubst '${BACKEND_HOST} ${BACKEND_PORT}' < /etc/nginx/conf.d/default.conf.temp
 # Configure the frontend with environment variables
 CONFIG_FILE='/usr/share/nginx/html/config.tmp'
 HTML_FILE='/usr/share/nginx/html/index.html'
+WPCC_FILE='./wpcc.html'
 PREFIX='FRONTEND_'
+FRONTEND_SELF_HOSTED="${FRONTEND_SELF_HOSTED:-true}"
+
+echo "Self hosted: ${FRONTEND_SELF_HOSTED}"
+
+if [ "${FRONTEND_SELF_HOSTED}" = "false" ]; then
+		echo "Inserting WPCC"
+		sed -i -e "/WPCC/r ${WPCC_FILE}" ${HTML_FILE}
+fi
 
 # Creates a file with the environment variables that start with FRONTEND_
 echo "    window.__env__ = {" > "${CONFIG_FILE}"

frontend/docker/wpcc.html

@@ -0,0 +1,28 @@
+<link rel="stylesheet" type="text/css" href="//wpcc.io/lib/1.0.2/cookieconsent.min.css" />
+  <script src="//wpcc.io/lib/1.0.2/cookieconsent.min.js"></script>
+  <script>
+    window.addEventListener("load", function () {
+      if (window && window.wpcc && window.wpcc.init) {
+        window.wpcc.init({
+          "border": "thin",
+          "corners": "small",
+          "colors": {
+            "popup": {
+              "background": "#1c1f4b",
+              "text": "#ffffff",
+              "border": "#afb3e4"
+            },
+            "button": {
+              "background": "#afb3e4",
+              "text": "#000000"
+            }
+          },
+          "position": "bottom",
+          "transparency": "15",
+          "content": {
+            "href": "https://www.retrospected.com/legal/cookies"
+          }
+        });
+      }
+    });
+  </script>

frontend/index.html

@@ -36,34 +36,8 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap" rel="stylesheet">
 
-  <link rel="stylesheet" type="text/css" href="//wpcc.io/lib/1.0.2/cookieconsent.min.css" />
-  <script src="//wpcc.io/lib/1.0.2/cookieconsent.min.js"></script>
-  <script>
-    window.addEventListener("load", function () {
-      if (window && window.wpcc && window.wpcc.init) {
-        window.wpcc.init({
-          "border": "thin",
-          "corners": "small",
-          "colors": {
-            "popup": {
-              "background": "#1c1f4b",
-              "text": "#ffffff",
-              "border": "#afb3e4"
-            },
-            "button": {
-              "background": "#afb3e4",
-              "text": "#000000"
-            }
-          },
-          "position": "bottom",
-          "transparency": "15",
-          "content": {
-            "href": "https://www.retrospected.com/legal/cookies"
-          }
-        });
-      }
-    });
-  </script>
+  <!-- WPCC -->
+
   <script>
     // RUN-TIME CONFIGURATION
   </script>

frontend/package.json

@@ -1,58 +1,58 @@
 {
   "name": "@retrospected/frontend",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "license": "GNU GPLv3",
   "private": true,
   "dependencies": {
-    "@emotion/react": "11.11.1",
+    "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "0.2.2",
-    "@hello-pangea/dnd": "16.3.0",
-    "@mui/base": "5.0.0-beta.8",
-    "@mui/icons-material": "5.14.1",
-    "@mui/material": "5.14.1",
-    "@mui/styles": "5.14.1",
-    "@mui/system": "5.14.1",
-    "@mui/x-data-grid": "6.10.1",
-    "@rollup/plugin-inject": "5.0.3",
-    "@sentry/browser": "7.60.0",
-    "@stripe/react-stripe-js": "2.1.1",
-    "@stripe/stripe-js": "1.54.1",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "14.0.0",
+    "@hello-pangea/dnd": "16.5.0",
+    "@mui/base": "5.0.0-beta.29",
+    "@mui/icons-material": "5.15.2",
+    "@mui/material": "5.15.2",
+    "@mui/styles": "5.15.2",
+    "@mui/system": "5.15.2",
+    "@mui/x-data-grid": "6.18.6",
+    "@rollup/plugin-inject": "5.0.5",
+    "@sentry/browser": "7.91.0",
+    "@stripe/react-stripe-js": "2.4.0",
+    "@stripe/stripe-js": "2.2.2",
+    "@testing-library/jest-dom": "6.1.6",
+    "@testing-library/react": "14.1.2",
     "@testing-library/react-hooks": "8.0.1",
-    "@total-typescript/ts-reset": "^0.4.2",
-    "@types/crypto-js": "4.1.1",
-    "@types/emoji-mart": "3.0.9",
-    "@types/lodash": "4.14.195",
-    "@types/md5": "2.3.2",
-    "@types/node": "20.4.3",
-    "@types/react": "18.2.15",
-    "@types/react-color": "3.0.6",
-    "@types/react-copy-to-clipboard": "5.0.4",
-    "@types/react-dom": "18.2.7",
-    "@types/react-helmet": "6.1.6",
+    "@total-typescript/ts-reset": "^0.5.1",
+    "@types/crypto-js": "4.2.1",
+    "@types/emoji-mart": "3.0.14",
+    "@types/lodash": "4.14.202",
+    "@types/md5": "2.3.5",
+    "@types/node": "20.10.6",
+    "@types/react": "18.2.46",
+    "@types/react-color": "3.0.10",
+    "@types/react-copy-to-clipboard": "5.0.7",
+    "@types/react-dom": "18.2.18",
+    "@types/react-helmet": "6.1.11",
     "@types/react-router-dom": "5.3.3",
-    "@types/shortid": "0.0.29",
-    "@types/uuid": "9.0.2",
-    "@vitejs/plugin-react": "4.0.3",
+    "@types/shortid": "0.0.32",
+    "@types/uuid": "9.0.7",
+    "@vitejs/plugin-react": "4.2.1",
     "bowser": "2.11.0",
     "buffer": "6.0.3",
-    "core-js": "3.31.1",
-    "crypto-js": "4.1.1",
+    "core-js": "3.35.0",
+    "crypto-js": "4.2.0",
     "date-fns": "2.30.0",
     "emoji-mart": "3.0.1",
     "emotion": "^11.0.0",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
-    "flag-icons": "6.7.0",
-    "i18next": "23.2.11",
-    "i18next-browser-languagedetector": "7.1.0",
-    "i18next-resources-to-backend": "1.1.4",
+    "flag-icons": "7.1.0",
+    "i18next": "23.7.13",
+    "i18next-browser-languagedetector": "7.2.0",
+    "i18next-resources-to-backend": "1.2.0",
     "isemail": "3.2.0",
-    "jsdom": "22.1.0",
+    "jsdom": "23.0.1",
     "lexorank": "1.0.5",
     "lodash": "4.17.21",
     "material-ui-confirm": "3.0.9",
@@ -71,25 +71,25 @@
     "react-i18next": "13.0.2",
     "react-markdown": "8.0.7",
     "react-password-strength-bar": "0.4.1",
-    "react-router-dom": "6.14.2",
+    "react-router-dom": "6.21.1",
     "react-scroll-to-bottom": "4.2.0",
     "react-social-login-buttons": "3.9.1",
     "recoil": "0.7.7",
     "rehype-raw": "6.1.1",
     "shortid": "2.2.16",
-    "socket.io-client": "4.7.1",
+    "socket.io-client": "4.7.2",
     "source-map-explorer": "2.5.3",
-    "typescript": "5.1.6",
+    "typescript": "5.3.3",
     "util": "0.12.5",
-    "uuid": "9.0.0",
-    "vite": "4.4.6",
-    "vite-plugin-checker": "^0.6.1",
-    "vite-plugin-ejs": "1.6.4",
+    "uuid": "9.0.1",
+    "vite": "5.0.10",
+    "vite-plugin-checker": "^0.6.2",
+    "vite-plugin-ejs": "1.7.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-svgr": "3.2.0",
-    "vite-tsconfig-paths": "4.2.0",
-    "vitest": "0.33.0",
-    "whatwg-fetch": "3.6.17"
+    "vite-plugin-svgr": "4.2.0",
+    "vite-tsconfig-paths": "4.2.3",
+    "vitest": "1.1.1",
+    "whatwg-fetch": "3.6.20"
   },
   "scripts": {
     "start": "vite",

frontend/src/components/__tests__/EditableLabel.test.tsx

@@ -1,6 +1,7 @@
 import { vi } from 'vitest';
 import { render, fireEvent } from '@testing-library/react';
 import EditableLabel from '../EditableLabel';
+import { describe, expect, it } from 'vitest';
 
 describe('EditableLabel', () => {
   it('Should display the value by default', () => {

frontend/src/crypto/__tests__/crypto.test.ts

@@ -1,4 +1,5 @@
 import { encrypt, decrypt } from '../crypto';
+import { describe, expect, it } from 'vitest';
 
 describe('Cryptography', () => {
   it('Can encrypt and decrypt successfuly with the correct key', () => {

frontend/src/tests/setup.ts

@@ -1,9 +1 @@
-import matchers from '@testing-library/jest-dom/matchers';
-import { cleanup } from '@testing-library/react';
-import { expect, afterEach } from 'vitest';
-
-expect.extend(matchers);
-
-afterEach(() => {
-  cleanup();
-});
+import '@testing-library/jest-dom/vitest';

frontend/src/views/game/__tests__/is-search-match.test.ts

@@ -1,4 +1,5 @@
 import { searchLogic } from '../is-search-match';
+import { describe, expect, it } from 'vitest';
 
 describe('Search Match logic', () => {
   it('Should be a match if there is no search (as everything matches)', () => {

frontend/src/views/game/__tests__/partcipants-notifiers.test.ts

@@ -4,6 +4,7 @@ import {
   getRemovedParticipants,
   joinNames,
 } from '../participants-notifiers';
+import { describe, expect, it } from 'vitest';
 
 function p(id: string, online = true): Participant {
   return {

frontend/src/views/game/__tests__/useSession.test.tsx

@@ -3,6 +3,7 @@ import { AllTheProviders, initialSession } from '../../../testing/index';
 import { renderHook, act } from '@testing-library/react-hooks';
 import { Post, Session } from 'common';
 import { cloneDeep } from 'lodash';
+import { describe, expect, it } from 'vitest';
 
 function post(id: string): Post {
   return {

frontend/src/views/game/board/__tests__/moving-logic.test.ts

@@ -2,6 +2,7 @@ import { getMovingEntities, calculateRank } from '../moving-logic';
 import { ColumnContent } from '../../types';
 import { Post, User, PostGroup } from 'common';
 import { getMiddle, getNext, getPrevious } from '../../lexorank';
+import { describe, expect, it } from 'vitest';
 
 function p(
   id: string,

frontend/src/views/game/board/__tests__/permissions-logic.test.ts

@@ -13,6 +13,7 @@ import {
   BackendCapabilities,
 } from 'common';
 import { v4 } from 'uuid';
+import { describe, expect, it } from 'vitest';
 
 const userBase: User = {
   photo: null,

frontend/src/views/game/board/post/__tests__/Post.test.tsx

@@ -9,7 +9,7 @@ import { ThemeProvider } from '@mui/material';
 import theme from '../../../../../Theme';
 import { SnackbarProvider } from 'notistack';
 import { act } from '@testing-library/react';
-import { vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 const u = (name: string): User => ({
   name,

frontend/tsconfig.json

@@ -16,7 +16,10 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "paths": {
+      "types": ["vitest/globals"]
+    }
   },
   "include": ["src", "./package.json"]
 }