web: Get rid of remaining eslint warning

.. by defining the `Interaction` interface (translated from
`scap/spiderpig/model.py`) and using it as the type of the
`interaction` prop of the `SpInteraction` component.  Thanks to Eric
Gardner for assistance!

Since this added the first TypeScript file to the project, I had to
tweak `.eslintrc.json` to add TypeScript support and update the
package list in `package.json` accordingly.

Add `npm run test` to the Gitlab CI pipeline

Change-Id: Ic9101286a917f13e7c1d66721bd9b41c1ebfabfe

Author: Ahmon Dancy

.gitlab-ci.yml

@@ -19,6 +19,12 @@ verify-deps:
   variables:
     BUILD_VARIANT: verify-deps-$DISTRO
 
+test-web:
+  stage: test
+  extends: .kokkuri:build-image
+  variables:
+    BUILD_VARIANT: test-web
+
 test:
   stage: test
   extends: .kokkuri:build-image

.pipeline/blubber.yaml

@@ -116,6 +116,15 @@ variants:
         source: /srv/app/docs/_build/html/
         destination: docs/
 
+  test-web:
+    base: docker-registry.wikimedia.org/nodejs20-slim
+    builders:
+      - node:
+          requirements:
+            - web
+      - custom:
+          command: [npm, run, test]
+
   build-spiderpig-ui:
     base: docker-registry.wikimedia.org/nodejs20-slim
     builders:

web/.eslintrc.json

@@ -20,8 +20,14 @@
 			"parser": "vue-eslint-parser",
 			"extends": [
 				"wikimedia/vue3-common",
-				"wikimedia/client-common"
+				"wikimedia/client-common",
+				"plugin:@typescript-eslint/recommended"
 			],
+			"parserOptions": {
+				"parser": "@typescript-eslint/parser",
+				"extraFileExtensions": [ ".vue" ]
+			},
+			"plugins": [ "@typescript-eslint" ],
 			"rules": {
 				"vue/component-name-in-template-casing": [ "error", "kebab-case" ],
 				"vue/custom-event-name-casing": [ "error", "kebab-case" ],

web/package-lock.json

@@ -20,11 +20,14 @@
 		"vue-router": "^4.4.5"
 	},
 	"devDependencies": {
+		"@typescript-eslint/eslint-plugin": "^8.13.0",
+		"@typescript-eslint/parser": "^8.13.0",
 		"@vitejs/plugin-vue": "^5.0.5",
 		"eslint": "^8.57.1",
 		"eslint-config-wikimedia": "^0.28.2",
 		"eslint-plugin-vue": "^9.30.0",
 		"less": "^4.2.0",
+		"typescript": "^5.6.3",
 		"vite": "^5.3.1"
 	}
 }

web/package.json

@@ -10,48 +10,49 @@
 			:value="code"
 			action="progressive"
 			:weight="code === interaction.default ? 'primary' : 'normal'"
-			@click="choiceSelected"
+			@click="choiceSelected( code )"
 		>
 			{{ choice }}
 		</cdx-button>
 	</div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
 import useApi from '../api';
+import Interaction from '../types/Interaction';
 import { CdxButton } from '@wikimedia/codex';
 
-export default {
+export default defineComponent( {
 	name: 'SpInteraction',
 
 	components: {
 		CdxButton
 	},
 
-	props: [
-		'interaction'
-	],
-
-	data() {
-		return {
-			api: null
-		};
+	props: {
+		interaction: {
+			type: Object as PropType<Interaction>,
+			required: true
+		}
 	},
 
-	methods: {
-		choiceSelected( e ) {
-			this.api.respondInteraction(
-				this.interaction.job_id,
-				this.interaction.id,
-				e.currentTarget.value
+	setup( props ) {
+		const api = useApi();
+
+		function choiceSelected( code: string ) {
+			api.respondInteraction(
+				props.interaction.job_id,
+				props.interaction.id,
+				code
 			);
 		}
-	},
 
-	mounted() {
-		this.api = useApi();
+		return {
+			choiceSelected
+		};
 	}
-};
+} );
 </script>
 
 <style scoped>

web/src/components/Interaction.vue

@@ -0,0 +1,11 @@
+// Keep in sync with scap/spiderpig/model.py
+export default interface Interaction {
+    id: number,
+    job_id: number
+    type: string
+    prompt: string
+    choices?: string
+    default?: string
+    responded_by?: string
+    response?: string
+}