HTML labels for radio/checkbox options

.github/workflows/image-tests.yml

@@ -50,16 +50,16 @@ jobs:
           source .env
 
           # Launch the database container
-          docker-compose up -d db
+          docker compose up -d db
 
           # Hacky method of waiting for postgres to be up and running
           sleep 10
 
           # Allow Django to create databases for the testing
-          docker-compose exec -T db psql -v ON_ERROR_STOP=1 --username postgres -c 'ALTER USER '"$DB_USERNAME"' CREATEDB;'
+          docker compose exec -T db psql -v ON_ERROR_STOP=1 --username postgres -c 'ALTER USER '"$DB_USERNAME"' CREATEDB;'
 
           # Run the backend tests
-          docker-compose run --rm --entrypoint npm backend run test:pytest
+          docker compose run --rm --entrypoint npm backend run test:pytest
 
           # Run the frontend tests
-          docker-compose run --rm --entrypoint npm backend run test:frontend
+          docker compose run --rm --entrypoint npm backend run test:frontend

cypress/support/commands.js

@@ -72,10 +72,18 @@ Cypress.Commands.add("logout", () => {
 
 //Migrate integration db
 Cypress.Commands.add("migrate_integration_db", (fixtureName) => {
-    if (Cypress.env('TESTENV') == 'container') {
-        cy.exec(`docker-compose exec -T backend ./migrate-integration.sh -n=${fixtureName}`)
-    } else if (Cypress.env('TESTENV') == 'ci') {
-        cy.exec(`DJANGO_SETTINGS_MODULE=teamware.settings.deployment docker-compose exec -T backend ./migrate-integration.sh -n=${fixtureName}`)
+
+    const testenv = Cypress.env('TESTENV');
+    if (testenv === 'container' || testenv === 'ci') {
+        // find the right docker compose command
+        cy.exec("docker compose").then(({code}) => {
+            const compose = (code === 0 ? 'docker compose' : 'docker-compose')
+            if (testenv === 'container') {
+                cy.exec(`${compose} exec -T backend ./migrate-integration.sh -n=${fixtureName}`)
+            } else if (testenv === 'ci') {
+                cy.exec(`DJANGO_SETTINGS_MODULE=teamware.settings.deployment ${compose} exec -T backend ./migrate-integration.sh -n=${fixtureName}`)
+            }
+        });
     }
     else{
         cy.exec(`npm run migrate:integration -- -n=${fixtureName}`, {log:true})

deploy.sh

@@ -29,4 +29,18 @@ case $DEPLOY_ENV in
     ;;
 esac
 
-docker-compose up -d
+# Find a working docker compose
+declare -a COMPOSE
+if docker compose >/dev/null 2>&1 ; then
+  # We have compose v2
+  COMPOSE[0]="docker"
+  COMPOSE[1]="compose"
+elif which docker-compose > /dev/null 2>&1 ; then
+  # We have compose v1
+  COMPOSE[0]="docker-compose"
+else
+  echo "Could not find 'docker compose' or 'docker-compose'"
+  exit 1
+fi
+
+exec "${COMPOSE[@]}" up -d

docs/docs/.vuepress/enhanceApp.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import {BootstrapVue, BootstrapVueIcons, IconsPlugin} from 'bootstrap-vue'
 
-import 'bootstrap/dist/css/bootstrap.css'
+import '@/assets/sass/app.scss'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 Vue.use(BootstrapVue)

docs/docs/manageradminguide/config_examples.js

@@ -145,6 +145,20 @@ export default {
             "valError": "Error message when field fails is validation" //Optional
         }
     ],
+    configHtmlLabels: [
+        {
+            "name": "sentiment",
+            "type": "radio",
+            "title": "Sentiment",
+            "orientation": "vertical",
+            "options": [
+                {"value": "positive", "htmlLabel": "<span style='color: green'>Positive</span>"},
+                {"value": "neutral", "htmlLabel": "<span style='font-style: italic'>Neutral</span>"},
+                {"value": "negative", "htmlLabel": "<span style='color: red'>Negative</span>"},
+                {"value": "unknown", "htmlLabel": "<span class='tw-space-above-3'>Cannot be determined</span>"}
+            ]
+        },
+    ],
     configSelector: [
         {
             "name": "mylabel",

docs/docs/manageradminguide/project_config.md

@@ -348,6 +348,43 @@ If your documents are plain text and include line breaks that need to be preserv
 
 </AnnotationRendererPreview>
 
+### Richer labels for radios & checkboxes
+
+The `label` of radio and checkbox inputs is normally plain text, however both input types support an `htmlLabel` property as an alternative to `label`, which allows for HTML tags within the option label.  The `htmlLabel` is rendered within a `<span></span>` inside the `<label>` element for the option, so it should be limited to presentational tags such as `<em>`, `<b>`, `<tt>`, or custom CSS directives via `<span style='...'>` or `<div style='...'>`.  To allow for breaking up a long list of radio buttons or checkboxes (with `"orientation": "vertical"`) into logical sections, a set of special CSS _classes_ are available named `tw-space-above-N` and `tw-space-below-N` for numbers 1 to 5.  Applying one of these classes to an element in the `htmlLabel` (e.g. `<span class='tw-space-below-4'>Label</span>`) will add a corresponding amount of space above or below that option in the annotation UI.
+
+<AnnotationRendererPreview :config="configs.configHtmlLabels">
+
+```json
+[
+  {
+    "name": "sentiment",
+    "type": "radio",
+    "title": "Sentiment",
+    "orientation": "vertical",
+    "options": [
+      {
+        "value": "positive",
+        "htmlLabel": "<span style='color: green'>Positive</span>"
+      },
+      {
+        "value": "neutral",
+        "htmlLabel": "<span style='font-style: italic'>Neutral</span>"
+      },
+      {
+        "value": "negative",
+        "htmlLabel": "<span style='color: red'>Negative</span>"
+      },
+      {
+        "value": "unknown",
+        "htmlLabel": "<span class='tw-space-above-3'>Cannot be determined</span>"
+      }
+    ]
+  }
+]
+```
+
+</AnnotationRendererPreview>
+
 ### Selector input
 
 <AnnotationRendererPreview :config="configs.configSelector">