make schema selection lists a configurable setting (#867)

* make schema selection lists a configurable setting

* apply formatting changes

---------

Co-authored-by: Logende <[email protected]>

Author: Logende

documentation_user/README.md

@@ -5,6 +5,7 @@
 * [MOF Synthesis Example](examples/mof_synthesis) (Demonstrates CSV Import, Schema Generation, Schema Editing, Data Editing, JSON Export)
 * [Configurator Building](examples/configurator_building) (Shows how to use MetaConfigurator as a Configurator Builder, allowing users to create and share URLs that open MetaConfigurator with preloaded schema, data, and settings)
 * [Code Generation](examples/code_generation) (Shows how to generate code in multiple programming languages from JSON schemas)
+* [Schema Selection List](examples/schema_selection_list) (Provide your users a pre-defined list of schemas to choose from; useful for organizations)
 
 ## Load a Schema
 

documentation_user/examples/schema_selection_list/README.md

@@ -0,0 +1,38 @@
+# Schema Selection List
+
+## Overview
+
+You can provide one or more lists of pre-defined JSON schemas the user can load from.
+This is especially useful for organizations to give their teams quick access to their schemas.
+The lists of schemas to show to the user can be configured in the settings, under the `schemaSelectionLists` key.
+A list of schemas can be defined by a URL to a JSON file or by an inline array of schema definitions:
+
+```json
+  "schemaSelectionLists": [
+    {
+      "label": "Example Schemas",
+      "schemas": [
+        {
+          "label": "Feature Testing Schema",
+          "url": "https://github.com/MetaConfigurator/meta-configurator/blob/main/documentation_user/examples/schema_selection_list/example.schema.json"
+        },
+        {
+          "label": "Strenda Schema",
+          "url": "https://github.com/MetaConfigurator/meta-configurator/blob/main/documentation_user/examples/schema_selection_list/example.schema.json"
+        },
+        {
+          "label": "EnzymeML Schema",
+          "url": "https://github.com/MetaConfigurator/meta-configurator/blob/main/documentation_user/examples/schema_selection_list/enzymeMl.schema.json"
+        },
+        {
+          "label": "Autonomous Vehicle Schema",
+          "url": "https://github.com/MetaConfigurator/meta-configurator/blob/main/documentation_user/examples/schema_selection_list/autonomousVehicle.schema.json"
+        }
+      ]
+    },
+    {
+      "label": "preCICE Schemas",
+      "schemas": "https://github.com/MetaConfigurator/meta-configurator/blob/main/documentation_user/examples/schema_selection_list/preCICESchemas.json"
+    }
+  ]
+```

meta_configurator/src/components/toolbar/Toolbar.vue

@@ -2,7 +2,6 @@
 import {ref} from 'vue';
 import TopToolbar from '@/components/toolbar/TopToolbar.vue';
 import {SessionMode} from '@/store/sessionMode';
-import {schemaCollection} from '@/packaged-schemas/schemaCollection';
 import {fetchSchemasFromJSONSchemaStore} from '@/components/toolbar/fetchSchemasFromJsonSchemaStore';
 import {openUploadSchemaDialog} from '@/components/toolbar/uploadFile';
 import InitialSchemaSelectionDialog from '@/components/toolbar/dialogs/InitialSchemaSelectionDialog.vue';
@@ -18,6 +17,7 @@ import {useSettings} from '@/settings/useSettings';
 import {hasCurrentNewsChanged, setCurrentNewsHash} from '@/components/toolbar/currentNews';
 import DataExportDialog from '@/components/toolbar/dialogs/data-export/DataExportDialog.vue';
 import {useErrorService} from '@/utility/errorServiceInstance';
+import {fetchExternalContent} from '@/utility/fetchExternalContent';
 
 const props = defineProps<{
   currentMode: SessionMode;
@@ -30,11 +30,8 @@ const emit = defineEmits<{
 const showAboutDialog = ref(false);
 const showNewsDialog = ref(false);
 
-function handleUserSchemaDialogSelection(option: 'Example' | 'JsonStore' | 'File' | 'URL') {
+function handleUserSchemaDialogSelectionDefault(option: 'JsonStore' | 'File' | 'URL') {
   switch (option) {
-    case 'Example':
-      showExampleSchemasDialog();
-      break;
     case 'JsonStore':
       showSchemaStoreDialog();
       break;
@@ -47,6 +44,41 @@ function handleUserSchemaDialogSelection(option: 'Example' | 'JsonStore' | 'File
   }
 }
 
+async function handleUserSchemaDialogSelectionCustom(label: string) {
+  const schemas = useSettings().value.schemaSelectionLists.find(
+    list => list.label === label
+  )?.schemas;
+  if (!schemas) {
+    useErrorService().onError(
+      new Error(`Could not find schema selection list with label: ${label}`)
+    );
+    return;
+  }
+  // schemas is either an URL to a JSON document that specifies the schemas, or directly an array of schemas
+  // if it is an URL, first resolve it and then proceed
+  let schemaList: {label: string; url: string}[] = [];
+  if (typeof schemas === 'string') {
+    try {
+      const fetchedContent = await fetchExternalContent(schemas);
+      schemaList = await fetchedContent.json();
+    } catch (error) {
+      useErrorService().onError(
+        new Error(`Could not fetch schema selection list from URL: ${schemas}`)
+      );
+      return;
+    }
+  } else if (Array.isArray(schemas)) {
+    schemaList = schemas;
+  } else {
+    useErrorService().onError(
+      new Error(`Invalid schema selection list format for label: ${label}`)
+    );
+    return;
+  }
+  fetchedSchemasSelectionDialog.value.setSchemas(schemaList);
+  fetchedSchemasSelectionDialog.value.show();
+}
+
 function showCodeGenerationDialog(schemaMode: boolean) {
   if (schemaMode) {
     codeGenerationDialog.value?.activateSchemaMode();
@@ -86,10 +118,6 @@ async function showSchemaStoreDialog(): Promise<void> {
     useErrorService().onError(error);
   }
 }
-function showExampleSchemasDialog() {
-  fetchedSchemasSelectionDialog.value.setSchemas(schemaCollection);
-  fetchedSchemasSelectionDialog.value.show();
-}
 
 function showUrlDialog() {
   urlInputDialog.value?.show();
@@ -144,7 +172,8 @@ defineExpose({
 
   <InitialSchemaSelectionDialog
     ref="initialSchemaSelectionDialog"
-    @user_selected_option="option => handleUserSchemaDialogSelection(option)" />
+    @user_selected_default_option="option => handleUserSchemaDialogSelectionDefault(option)"
+    @user_selected_custom_option="label => handleUserSchemaDialogSelectionCustom(label)" />
 
   <ImportCsvDialog ref="csvImportDialog" />
 
@@ -166,12 +195,10 @@ defineExpose({
 
   <TopToolbar
     :current-mode="props.currentMode"
-    @show-url-dialog="() => showUrlDialog()"
     @show-about-dialog="() => (showAboutDialog = true)"
-    @show-example-schemas-dialog="() => showExampleSchemasDialog()"
     @show-codegen-dialog="schemaMode => showCodeGenerationDialog(schemaMode)"
     @show-data-export-dialog="schemaMode => showDataExportDialog(schemaMode)"
-    @show-schemastore-dialog="() => showSchemaStoreDialog()"
+    @show-schema-selection-dialog="() => showSchemaSelectionDialog()"
     @show-import-csv-dialog="() => showCsvImportDialog()"
     @show-snapshot-dialog="() => showSnapshotDialog()"
     @show-data-mapping-dialog="() => showDataMappingDialog()"

meta_configurator/src/components/toolbar/TopToolbar.vue

@@ -19,9 +19,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'mode-selected', newMode: SessionMode): void;
-  (e: 'show-url-dialog'): void;
-  (e: 'show-example-schemas-dialog'): void;
-  (e: 'show-schemastore-dialog'): void;
+  (e: 'show-schema-selection-dialog'): void;
   (e: 'show-import-csv-dialog'): void;
   (e: 'show-snapshot-dialog'): void;
   (e: 'show-about-dialog'): void;
@@ -33,16 +31,8 @@ const emit = defineEmits<{
 const settings = useSettings();
 const dataFormatOptions = formatRegistry.getFormatNames();
 
-async function showSchemaStoreDialog() {
-  emit('show-schemastore-dialog');
-}
-
-function showExampleSchemasDialog() {
-  emit('show-example-schemas-dialog');
-}
-
-function showUrlDialog() {
-  emit('show-url-dialog');
+async function showSchemaSelectionDialog() {
+  emit('show-schema-selection-dialog');
 }
 
 function showCsvImportDialog() {
@@ -105,10 +95,8 @@ useMagicKeys({
           :current-mode="props.currentMode"
           @show-codegen-dialog="schemaMode => showCodeGenerationDialog(schemaMode)"
           @show-data-export-dialog="schemaMode => showDataExportDialog(schemaMode)"
-          @show-url-dialog="() => showUrlDialog()"
-          @show-example-schemas-dialog="() => showExampleSchemasDialog()"
           @show-import-csv-dialog="() => showCsvImportDialog()"
-          @show-schemastore-dialog="() => showSchemaStoreDialog()"
+          @show-schema-selection-dialog="() => showSchemaSelectionDialog()"
           @show-snapshot-dialog="() => showSnapshotDialog()"
           @show-data-mapping-dialog="() => showDataMappingDialog()" />
 
@@ -174,10 +162,8 @@ useMagicKeys({
           :current-mode="props.currentMode"
           @show-codegen-dialog="schemaMode => showCodeGenerationDialog(schemaMode)"
           @show-data-export-dialog="schemaMode => showDataExportDialog(schemaMode)"
-          @show-url-dialog="() => showUrlDialog()"
-          @show-example-schemas-dialog="() => showExampleSchemasDialog()"
           @show-import-csv-dialog="() => showCsvImportDialog()"
-          @show-schemastore-dialog="() => showSchemaStoreDialog()"
+          @show-schema-selection-dialog="() => showSchemaSelectionDialog()"
           @show-snapshot-dialog="() => showSnapshotDialog()"
           @show-data-mapping-dialog="() => showDataMappingDialog()" />
       </div>

meta_configurator/src/components/toolbar/TopToolbarMenuButtons.vue

@@ -18,9 +18,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'show-url-dialog'): void;
-  (e: 'show-example-schemas-dialog'): void;
-  (e: 'show-schemastore-dialog'): void;
+  (e: 'show-schema-selection-dialog'): void;
   (e: 'show-import-csv-dialog'): void;
   (e: 'show-snapshot-dialog'): void;
   (e: 'show-codegen-dialog', schemaMode: boolean): void;
@@ -30,9 +28,7 @@ const emit = defineEmits<{
 
 const settings = useSettings();
 const topMenuBar = new MenuItems(
-  handleFromWebClick,
-  handleFromOurExampleClick,
-  showUrlDialog,
+  showSchemaSelectionDialog,
   showCsvImportDialog,
   showSnapshotDialog,
   showCodeGenerationDialog,
@@ -41,16 +37,8 @@ const topMenuBar = new MenuItems(
   inferSchemaFromSampleData
 );
 
-async function handleFromWebClick() {
-  emit('show-schemastore-dialog');
-}
-
-function handleFromOurExampleClick() {
-  emit('show-example-schemas-dialog');
-}
-
-function showUrlDialog() {
-  emit('show-url-dialog');
+function showSchemaSelectionDialog() {
+  emit('show-schema-selection-dialog');
 }
 
 function showCsvImportDialog() {

meta_configurator/src/components/toolbar/dialogs/FetchedSchemasSelectionDialog.vue

@@ -6,7 +6,6 @@ import Listbox from 'primevue/listbox';
 import type {SchemaOption} from '@/packaged-schemas/schemaOption';
 import {fetchSchemaFromUrl} from '@/components/toolbar/fetchSchemaFromUrl';
 import {openClearDataEditorDialog} from '@/components/toolbar/clearFile';
-import {loadExampleSchema} from '@/components/toolbar/fetchExampleSchemas';
 import {useErrorService} from '@/utility/errorServiceInstance';
 
 const showDialog = ref(false);
@@ -27,13 +26,9 @@ watch(selectedSchema, async newSelectedSchema => {
       useErrorService().onError(error);
     }
   } else if (newSelectedSchema.key) {
-    try {
-      loadExampleSchema(newSelectedSchema.key);
-      hideDialog();
-      openClearDataEditorDialog();
-    } catch (error) {
-      useErrorService().onError(error);
-    }
+    useErrorService().onError(
+      new Error(`Fetching schema by key is currently not supported: ${newSelectedSchema.key}`)
+    );
   }
 });
 

meta_configurator/src/components/toolbar/dialogs/InitialSchemaSelectionDialog.vue

@@ -3,18 +3,13 @@
 import {defineEmits, ref, watch} from 'vue';
 import Button from 'primevue/button';
 import Dialog from 'primevue/dialog';
+import {SCHEMA_SELECTION_CATEGORIES} from '@/components/toolbar/schemaSelectionCategories';
 
 const showDialog = ref(false);
 
-const categories = ref<Array<{name: string; key: 'Example' | 'JsonStore' | 'File' | 'URL'}>>([
-  {name: 'Example Schema', key: 'Example'},
-  {name: 'From Json Schema Store', key: 'JsonStore'},
-  {name: 'Open Schema File', key: 'File'},
-  {name: 'Load Schema from URL', key: 'URL'},
-]);
-
 defineEmits<{
-  (e: 'user_selected_option', option: 'Example' | 'JsonStore' | 'File' | 'URL'): void;
+  (e: 'user_selected_default_option', option: 'JsonStore' | 'File' | 'URL'): void;
+  (e: 'user_selected_custom_option', label: string): void;
 }>();
 
 const selectedCategory = ref();
@@ -40,7 +35,10 @@ defineExpose({show: openDialog, close: hideDialog});
 <template>
   <Dialog v-model:visible="showDialog" header="Select a Schema">
     <div class="flex flex-col gap-3 bigger-dialog-content">
-      <div v-for="category in categories" :key="category.key" class="flex justify-center">
+      <div
+        v-for="category in SCHEMA_SELECTION_CATEGORIES"
+        :key="category.key"
+        class="flex justify-center">
         <Button
           v-model="selectedCategory"
           :label="category.name"
@@ -50,7 +48,11 @@ defineExpose({show: openDialog, close: hideDialog});
           class="w-full"
           @click="
             () => {
-              $emit('user_selected_option', category.key);
+              if (category.key === 'Custom') {
+                $emit('user_selected_custom_option', category.name);
+              } else {
+                $emit('user_selected_default_option', category.key);
+              }
               hideDialog();
             }
           " />