fix(components): gs-app: validate attributes

components/src/web-components/app.stories.ts

@@ -57,6 +57,21 @@ export const Default: StoryObj<{ lapis: string }> = {
     },
 };
 
+export const WithNoLapisUrl: StoryObj<{ lapis: string }> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        lapis: 'notAValidUrl',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => {
+            expect(canvas.getByText("Error: Invalid LAPIS URL: 'notAValidUrl'", { exact: false })).toBeVisible();
+        });
+    },
+};
+
 export const DelayFetchingReferenceGenome: StoryObj<{ lapis: string }> = {
     ...Template,
     parameters: {
@@ -83,13 +98,13 @@ export const DelayFetchingReferenceGenome: StoryObj<{ lapis: string }> = {
 export const FailsToFetchReferenceGenome: StoryObj<{ lapis: string }> = {
     ...Template,
     args: {
-        lapis: 'definitely-not-a-valid-url',
+        lapis: 'https://url.to.lapis-definitely-not-a-valid-url',
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
         await waitFor(() => {
-            expect(canvas.getByText('Error', { exact: false })).toBeVisible();
+            expect(canvas.getByText('Error: Cannot fetch reference genome.', { exact: false })).toBeVisible();
         });
     },
 };

components/src/web-components/app.ts

@@ -3,12 +3,15 @@ import { Task } from '@lit/task';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+import z from 'zod';
 
 import { lapisContext } from './lapis-context';
 import { referenceGenomeContext } from './reference-genome-context';
 import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
 import { fetchReferenceGenome } from '../lapisApi/lapisApi';
 
+const lapisUrlSchema = z.string().url();
+
 /**
  * ## Context
  *
@@ -50,18 +53,23 @@ export class App extends LitElement {
      */
     private updateReferenceGenome = new Task(this, {
         task: async () => {
-            this.referenceGenome = await fetchReferenceGenome(this.lapis);
+            const lapisUrl = lapisUrlSchema.parse(this.lapis);
+
+            this.referenceGenome = await fetchReferenceGenome(lapisUrl);
         },
         args: () => [this.lapis],
     });
 
     override render() {
         return this.updateReferenceGenome.render({
             complete: () => html``, // Children will be rendered in the light DOM anyway. We can't use slots without a shadow DOM.
-            error: () =>
-                html` <div class="m-2 w-full alert alert-error">
-                    Error: Cannot fetch reference genome. Is LAPIS available?
-                </div>`,
+            error: (error) => {
+                if (error instanceof z.ZodError) {
+                    return GsAppError(`Invalid LAPIS URL: '${this.lapis}'`);
+                }
+
+                return GsAppError('Cannot fetch reference genome. Is LAPIS available?');
+            },
         });
     }
 
@@ -70,6 +78,10 @@ export class App extends LitElement {
     }
 }
 
+function GsAppError(error: string) {
+    return html` <div class="m-2 w-full alert alert-error">Error: ${error}</div>`;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-app': App;