fix typing errors and add CSV import tests

Author: Logende

meta_configurator/e2e/csvImport.spec.ts

@@ -0,0 +1,50 @@
+import {test, expect} from '@playwright/test';
+import {openApp} from './utils';
+import {tpGetData} from './utilsTestPanel';
+import {
+    expandImportOptions,
+    openCsvImportDialog,
+    setColumnPath,
+    setCsvTablePath,
+    submitCsvImport,
+    uploadCsvFile,
+} from './utilsCsvImport';
+import {SessionMode} from '../src/store/sessionMode';
+
+test('Import CSV as standalone table with default paths', async ({page}) => {
+    await openApp(page, 'settings_testpanel.json');
+
+    await openCsvImportDialog(page);
+    await uploadCsvFile(page, 'data_people.csv');
+
+    // submit without changing any options — default table path comes from the filename
+    await submitCsvImport(page);
+
+    // filename "data_people.csv" → stringToIdentifier strips underscores → key is "datapeople"
+    const data = await tpGetData(page, SessionMode.DataEditor);
+    expect(data).toHaveProperty('datapeople');
+    expect(data.datapeople).toHaveLength(2);
+    expect(data.datapeople[0]).toMatchObject({name: 'Alice', city: 'Berlin', role: 'Engineer'});
+    expect(data.datapeople[1]).toMatchObject({name: 'Bob', city: 'Munich', role: 'Designer'});
+});
+
+test('Import CSV with custom table path and renamed column', async ({page}) => {
+    await openApp(page, 'settings_testpanel.json');
+
+    await openCsvImportDialog(page);
+    await uploadCsvFile(page, 'data_people.csv');
+
+    await expandImportOptions(page);
+    await setCsvTablePath(page, 'people');
+    await setColumnPath(page, 'city', 'location');
+
+    await submitCsvImport(page);
+
+    const data = await tpGetData(page, SessionMode.DataEditor);
+    expect(data).toEqual({
+        people: [
+            {name: 'Alice', location: 'Berlin', role: 'Engineer'},
+            {name: 'Bob', location: 'Munich', role: 'Designer'},
+        ],
+    });
+});

meta_configurator/e2e/test-fixtures/data_people.csv

@@ -0,0 +1,3 @@
+name,city,role
+Alice,Berlin,Engineer
+Bob,Munich,Designer

meta_configurator/e2e/utilsCsvImport.ts

@@ -0,0 +1,41 @@
+import {Page} from 'playwright';
+import {expect} from '@playwright/test';
+import path from 'node:path';
+
+const fixturesDir = path.resolve(process.cwd(), 'e2e/test-fixtures');
+
+export async function openCsvImportDialog(page: Page) {
+    await page.locator('#import-data').click();
+    await page.getByRole('menuitem', {name: 'Import CSV Data'}).click();
+    await expect(page.getByRole('dialog', {name: 'Import CSV'})).toBeVisible();
+}
+
+export async function uploadCsvFile(page: Page, filename: string) {
+    const fileChooserPromise = page.waitForEvent('filechooser');
+    await page.getByTestId('csv-select-file').click();
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(path.join(fixturesDir, filename));
+    // wait for the Import button to appear, confirming the CSV was parsed
+    await expect(page.getByTestId('csv-submit-import')).toBeVisible();
+}
+
+export async function expandImportOptions(page: Page) {
+    await page.getByTestId('csv-import-options-toggle').click();
+}
+
+export async function setCsvTablePath(page: Page, tablePath: string) {
+    const input = page.getByTestId('csv-table-path-input');
+    await input.clear();
+    await input.fill(tablePath);
+}
+
+export async function setColumnPath(page: Page, columnName: string, newPath: string) {
+    const input = page.getByTestId(`csv-column-path-${columnName}`);
+    await input.clear();
+    await input.fill(newPath);
+}
+
+export async function submitCsvImport(page: Page) {
+    await page.getByTestId('csv-submit-import').click();
+    await expect(page.getByRole('dialog', {name: 'Import CSV'})).not.toBeVisible();
+}

meta_configurator/src/components/CombinedEditorComponent.vue

@@ -3,7 +3,7 @@ Main component of the application.
 Combines the code editor and the gui editor.
 -->
 <script lang="ts" setup>
-import {computed, onMounted, onUnmounted, type Ref, ref, watch} from 'vue';
+import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
 import 'primeicons/primeicons.css';
 import SplitterPanel from 'primevue/splitterpanel';
 import Splitter from 'primevue/splitter';
@@ -15,13 +15,13 @@ import {useConfirm} from 'primevue/useconfirm';
 import {confirmationService} from '@/utility/confirmationService';
 import {toastService} from '@/utility/toastService';
 import {useAppRouter} from '@/router/router';
-import {useDropZone, useWindowSize, watchImmediate} from '@vueuse/core/index';
+import {useDropZone, useWindowSize, watchImmediate} from '@vueuse/core';
 import {readFileContentToDataLink} from '@/utility/readFileContent';
 import {getDataForMode} from '@/data/useDataLink';
 import {useSettings} from '@/settings/useSettings';
 import {modeToRoute, SessionMode} from '@/store/sessionMode';
 import {useSessionStore} from '@/store/sessionStore';
-import type {SettingsInterfacePanels, SettingsInterfaceRoot} from '@/settings/settingsTypes';
+import type {SettingsInterfacePanels} from '@/settings/settingsTypes';
 import {SETTINGS_DATA_DEFAULT} from '@/settings/defaultSettingsData';
 import {updateSettingsWithDefaults} from '@/settings/settingsUpdater';
 import {panelTypeRegistry} from '@/components/panels/panelTypeRegistry';
@@ -37,16 +37,18 @@ let panelsDefinition: SettingsInterfacePanels = settings.value.panels;
 // any setting is changed, which is not necessary and leads to Ace Editor becoming blank if settings were modified via
 // Ace Editor
 watchImmediate(
-  () => settings,
-  (settings: Ref<SettingsInterfaceRoot>) => {
-    let panels = settings.value.panels;
+  () => settings.value,
+  newSettings => {
+    const panels = newSettings.panels;
     if (JSON.stringify(panels) !== JSON.stringify(panelsDefinition)) {
       panelsDefinition = panels;
     }
     // fix panels if they are not defined
     for (let mode of Object.values(SessionMode)) {
       if (!panels[mode]) {
-        panels[mode] = structuredClone(SETTINGS_DATA_DEFAULT.panels[mode]);
+        panels[mode] = structuredClone(
+          SETTINGS_DATA_DEFAULT.panels[mode]
+        ) as SettingsInterfacePanels[typeof mode];
       }
     }
   }
@@ -164,10 +166,10 @@ onUnmounted(() => {
           class="h-full"
           style="min-width: 0"
           :layout="width < 600 ? 'vertical' : 'horizontal'"
-          :key="panels">
+          :key="props.sessionMode">
           <SplitterPanel
             v-for="(panel, index) in panels"
-            :key="index + panel"
+            :key="`${panel.sessionMode}-${index}`"
             :min-size="10"
             :size="panel.size"
             :resizable="true">

meta_configurator/src/components/panels/ai-prompts/AiPromptsTemplate.vue

@@ -261,7 +261,10 @@ async function submitPromptExportDocument() {
   // if the schema defines export formats, the user prompt is ignored and the selected export format is used
   if (documentExportFormatNames.value.length > 0) {
     const exportFormatName = selectedExportFormat.value;
-    const exportFormatDef = documentExportFormats.value![exportFormatName];
+    const exportFormatDef = documentExportFormats.value?.[exportFormatName];
+    if (!exportFormatDef) {
+      throw new Error(`Unknown export format "${exportFormatName}".`);
+    }
     // if export format is just a string, it is the URL
     if (typeof exportFormatDef === 'string') {
       userPrompt = await fetchExternalContentText(exportFormatDef);

meta_configurator/src/components/panels/code-editor/setupAnnotations.ts

@@ -77,9 +77,12 @@ function validationErrorsToAnnotations(editor: Editor, errors: ErrorObject[]): A
     }
 
     const index = positions[instancePathKey];
-    let position;
+    if (index === undefined) {
+      continue;
+    }
+    let position: {row: number; column: number};
     if (index in cachedPositionsForIndices) {
-      position = cachedPositionsForIndices[index];
+      position = cachedPositionsForIndices[index]!;
     } else {
       position = editor.session.doc.indexToPosition(index, 0);
       cachedPositionsForIndices[index] = position;

meta_configurator/src/components/panels/code-editor/setupLinkToSelectionAndData.ts

@@ -9,7 +9,7 @@ import {
 } from '@/components/panels/code-editor/aceUtility';
 import type {SessionMode} from '@/store/sessionMode';
 import {getDataForMode, getSessionForMode} from '@/data/useDataLink';
-import {watchImmediate} from '@vueuse/core/index';
+import {watchImmediate} from '@vueuse/core';
 import {useSettings} from '@/settings/useSettings';
 import {sizeOf} from '@/utility/sizeOf';
 

meta_configurator/src/components/panels/gui-editor/PropertiesPanel.vue

@@ -507,27 +507,27 @@ const schemaInfoOverlay = ref<InstanceType<typeof SchemaInfoOverlay> | undefined
 const allowShowOverlay = ref(true);
 const overlayShowScheduled = ref(false);
 
-const showInfoOverlayPanelInstantly = (nodeData: ConfigTreeNodeData, event: MouseEvent) => {
+const showInfoOverlayPanelInstantly = (nodeData: ConfigTreeNodeData, event: Event) => {
   const relevantErrors = getValidationResults(nodeData.absolutePath).errors;
   // @ts-ignore
   schemaInfoOverlay.value?.showPanel(
     nodeData.schema,
-    nodeData.name,
+    String(nodeData.name),
     nodeData.parentSchema,
     relevantErrors,
     event
   );
 };
 const showInfoOverlayPanelDebounced = useDebounceFn(
-  (nodeData: ConfigTreeNodeData, event: MouseEvent) => {
+  (nodeData: ConfigTreeNodeData, event: Event) => {
     if (allowShowOverlay.value && overlayShowScheduled.value) {
       showInfoOverlayPanelInstantly(nodeData, event);
     }
   },
   1000
 );
 
-function showInfoOverlayPanel(nodeData: ConfigTreeNodeData, event: MouseEvent) {
+function showInfoOverlayPanel(nodeData: ConfigTreeNodeData, event: Event) {
   overlayShowScheduled.value = true;
   showInfoOverlayPanelDebounced(nodeData, event);
 }
@@ -608,7 +608,9 @@ function zoomIntoPath(path: Path) {
             @update_tree="updateTree"
             @click="() => clickedPropertyData(slotProps.node.data)"
             bodyClass="w-full"
-            @keydown.ctrl.i="event => showInfoOverlayPanelInstantly(slotProps.node.data, event)"
+            @keydown.ctrl.i="
+              (event: KeyboardEvent) => showInfoOverlayPanelInstantly(slotProps.node.data, event)
+            "
             :data-testid="'property-data-' + pathToString(slotProps.node.data.absolutePath)" />
         </span>
 

meta_configurator/src/components/panels/gui-editor/PropertyMetadata.vue

@@ -93,7 +93,7 @@ function zoomIntoPath() {
   }
 }
 
-function updatePropertyName(event) {
+function updatePropertyName(event: KeyboardEvent | FocusEvent) {
   const target = event.target as HTMLElement;
   let text = target.innerText;
 
@@ -103,12 +103,12 @@ function updatePropertyName(event) {
   if (isPropertyNameEditable(props.type)) {
     emit('update_property_name', props.node.data.name as string, text);
   } else {
-    event.target.innerText = props.node.data.name;
+    target.innerText = String(props.node.data.name);
   }
 
   isEditingPropertyName.value = false;
   emit('stop_editing_property_name');
-  event.target.contenteditable = false;
+  target.contentEditable = 'false';
   showPencil.value = true;
 }
 

meta_configurator/src/components/panels/gui-editor/SchemaInfoOverlay.vue

@@ -18,7 +18,7 @@ import type {ErrorObject} from 'ajv';
 import {useSessionStore} from '@/store/sessionStore';
 
 const schemaRef: Ref<JsonSchemaWrapper | undefined> = ref();
-const propertyNameRef: Ref<String> = ref('');
+const propertyNameRef: Ref<string> = ref('');
 const parentSchemaRef: Ref<JsonSchemaWrapper | undefined> = ref();
 const validationErrorsRef: Ref<ErrorObject[]> = ref([]);
 
@@ -46,7 +46,7 @@ const showPanel = (
   propertyName: string,
   parentSchema: JsonSchemaWrapper,
   validationErrors: ErrorObject[],
-  event
+  event: Event
 ) => {
   schemaRef.value = schema;
   propertyNameRef.value = propertyName;