Merge branch 'next' of https://github.com/Geode-solutions/OpenGeodeWeb-Front into feat/tooltip-copy

Author: MaxNumerique

app/components/DeleteDialog.vue

@@ -54,6 +54,7 @@ const emit = defineEmits(["update:show", "confirm"]);
           color="error"
           size="large"
           variant="flat"
+          data-testid="deleteConfirmButton"
           @click="emit('confirm')"
           class="text-none rounded-lg font-weight-bold"
           elevation="4"
@@ -93,6 +94,7 @@ const emit = defineEmits(["update:show", "confirm"]);
           color="error"
           size="large"
           variant="flat"
+          data-testid="deleteConfirmButton"
           @click="emit('confirm')"
           class="text-none rounded-lg font-weight-bold"
           elevation="4"

app/components/FeedBack/Snackers.vue

@@ -23,7 +23,7 @@ function calc_margin(index) {
     transition="slide-x-reverse-transition"
     max-width="200px"
     height="20px"
-    timeout="10000"
+    timeout="-1"
     z-index="4"
   >
     <v-row dense class="flex-nowrap">

app/components/Viewer/ObjectTree/Base/Controls.vue

@@ -32,6 +32,7 @@ watch(
         :class="{ 'is-expanded': showSearch }"
       >
         <ActionButton
+          data-testid="searchObjectsButton"
           :tooltip="showSearch ? 'Hide search' : 'Show search'"
           icon="mdi-magnify"
           tooltipLocation="bottom"
@@ -43,6 +44,7 @@ watch(
         <v-expand-x-transition>
           <div v-if="showSearch" class="flex-grow-1 ms-1 text-no-wrap overflow-hidden">
             <SearchBar
+              data-testid="searchObjectsInput"
               :model-value="search"
               placeholder="Search objects..."
               color="black"
@@ -67,6 +69,7 @@ watch(
             />
           </v-fade-transition>
           <ActionButton
+            data-testid="sortObjectsButton"
             :tooltip="'Sort by ' + (sortType === 'name' ? 'ID' : 'Name')"
             :icon="
               sortType === 'name' ? 'mdi-sort-alphabetical-ascending' : 'mdi-sort-numeric-ascending'
@@ -79,6 +82,7 @@ watch(
           <v-menu :close-on-content-click="false">
             <template #activator="{ props: menuProps }">
               <ActionButton
+                data-testid="filterObjectsButton"
                 tooltip="Filter options"
                 icon="mdi-filter-variant"
                 variant="text"
@@ -94,27 +98,19 @@ watch(
                   :label="category_id"
                   hide-details
                   density="compact"
+                  :data-testid="'filterCheckbox-' + category_id"
                 />
               </v-list-item>
             </v-list>
           </v-menu>
           <ActionButton
-            v-if="!isCollapsed"
-            tooltip="Collapse All"
-            icon="mdi-collapse-all-outline"
+            data-testid="CollapseOrExpandAll"
+            :tooltip="isCollapsed ? 'Expand All' : 'Collapse All'"
+            :icon="isCollapsed ? 'mdi-expand-all-outline' : 'mdi-collapse-all-outline'"
             variant="text"
             color="black"
             tooltipLocation="bottom"
-            @click="emit('collapse-all')"
-          />
-          <ActionButton
-            v-else
-            tooltip="Expand All"
-            icon="mdi-expand-all-outline"
-            variant="text"
-            color="black"
-            tooltipLocation="bottom"
-            @click="emit('expand-all')"
+            @click="isCollapsed ? emit('expand-all') : emit('collapse-all')"
           />
         </div>
       </div>

app/components/Viewer/ObjectTree/Base/ItemLabel.vue

@@ -58,7 +58,11 @@ async function copyToClipboard(text, label) {
 </script>
 
 <template>
-  <div ref="label-container" class="tree-item-label-container w-100">
+  <div
+    ref="label-container"
+    :data-testid="'treeRow-' + actualItem.id"
+    class="tree-item-label-container w-100"
+  >
     <v-tooltip
       :disabled="tooltipDisabled"
       location="right"

app/components/Viewer/Options/ColorPicker.vue

@@ -52,6 +52,7 @@ watch(pressed, (value) => {
     flat
     canvas-height="75"
     hide-inputs
+    hide-eye-dropper
     width="220"
     mode="rgba"
     class="mx-auto"

app/composables/project_manager.js

@@ -8,6 +8,7 @@ import { useAppStore } from "@ogw_front/stores/app";
 import { useBackStore } from "@ogw_front/stores/back";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useFeedbackStore } from "@ogw_front/stores/feedback";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 import { useViewerStore } from "@ogw_front/stores/viewer";
@@ -16,6 +17,7 @@ async function exportProject() {
   console.log("[export triggered]");
   const appStore = useAppStore();
   const backStore = useBackStore();
+  const feedbackStore = useFeedbackStore();
   const snapshot = await appStore.exportStores();
   const schema = back_schemas.opengeodeweb_back.export_project;
   const defaultName = "project.vease";
@@ -26,6 +28,7 @@ async function exportProject() {
     body: { snapshot, filename: defaultName },
   });
   fileDownload(result, defaultName);
+  feedbackStore.add_success("Project exported successfully");
   return { result };
 }
 
@@ -73,23 +76,20 @@ async function importProject(file) {
     await client2.getConnection().getSession().call("opengeodeweb_viewer.import_project", [{}]);
   }
 
-  await treeviewStore.importStores(snapshot.treeview || {});
+  await treeviewStore.importStores(snapshot.treeview);
+  await dataStore.importStores(snapshot.data);
   await hybridViewerStore.initHybridViewer();
-  await hybridViewerStore.importStores(snapshot.hybridViewer || {});
 
   const items = snapshot?.data?.items || [];
-
   await importWorkflowFromSnapshot(items);
-  await hybridViewerStore.importStores(snapshot.hybridViewer || {});
-  {
-    await dataStyleStore.importStores(snapshot.dataStyle || {});
-  }
-  {
-    await dataStyleStore.applyAllStylesFromState();
-  }
+  await hybridViewerStore.importStores(snapshot.hybridViewer);
+  await dataStyleStore.importStores(snapshot.dataStyle);
+  await dataStyleStore.applyAllStylesFromState();
 
   treeviewStore.finalizeImportSelection();
   treeviewStore.isImporting = false;
+  const feedbackStore = useFeedbackStore();
+  feedbackStore.add_success("Project imported successfully");
 }
 
 export { exportProject, importProject };

app/stores/data.js

@@ -191,15 +191,21 @@ export const useDataStore = defineStore("data", () => {
 
   async function exportStores() {
     const items = await data_db.toArray();
-    return { items };
+    const modelComponents = await model_components_db.toArray();
+    const modelComponentsRelations = await model_components_relation_db.toArray();
+    return { items, modelComponents, modelComponentsRelations };
   }
 
-  async function importStores(_snapshot) {
+  async function importStores(snapshot) {
     await clear();
+    await model_components_db.bulkPut(snapshot.modelComponents);
+    await model_components_relation_db.bulkPut(snapshot.modelComponentsRelations);
   }
 
   async function clear() {
     await data_db.clear();
+    await model_components_db.clear();
+    await model_components_relation_db.clear();
   }
 
   return {

app/stores/data_style.js

@@ -13,7 +13,7 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
   const dataStore = useDataStore();
   const data_style_db = database.data_style;
   const model_component_type_datastyle_db = database.model_component_type_datastyle;
-  const component_datastyle_db = database.component_datastyle;
+  const component_datastyle_db = database.model_component_datastyle;
 
   async function addDataStyle(id, geode_object) {
     await data_style_db.put(structuredClone({ id, ...getDefaultStyle(geode_object) }));
@@ -47,9 +47,9 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
 
   function exportStores() {
     return {
-      styles: dataStyleState.styles,
-      componentStyles: dataStyleState.componentStyles,
-      modelComponentTypeStyles: dataStyleState.modelComponentTypeStyles,
+      styles: dataStyleState.styles.value,
+      componentStyles: dataStyleState.componentStyles.value,
+      modelComponentTypeStyles: dataStyleState.modelComponentTypeStyles.value,
     };
   }
 

app/utils/local/microservices.js

@@ -5,22 +5,18 @@ import path from "node:path";
 
 // Third party imports
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json" with { type: "json" };
-import { getPort } from "get-port-please";
-import pTimeout from "p-timeout";
 
 // Local imports
-import { commandExistsSync, waitForReady } from "./scripts.js";
+import { commandExistsSync, getAvailablePort, waitForReady } from "./scripts.js";
 import { microservicesMetadatasPath, projectMicroservices } from "./cleanup.js";
 import { executablePath } from "./path.js";
 
-const DEFAULT_TIMEOUT_SECONDS = 120;
 const MILLISECONDS_PER_SECOND = 1000;
+const DEFAULT_TIMEOUT_SECONDS = 30;
 
-function getAvailablePort() {
-  return getPort({
-    host: "localhost",
-    random: true,
-  });
+function resolveCommand(execPath, execName) {
+  const command = commandExistsSync(execName) ? execName : executablePath(execPath, execName);
+  return command;
 }
 
 async function runScript(
@@ -30,33 +26,31 @@ async function runScript(
   expectedResponse,
   timeoutSeconds = DEFAULT_TIMEOUT_SECONDS,
 ) {
-  let command = "";
-  if (commandExistsSync(execName)) {
-    command = execName;
-  } else {
-    command = path.join(executablePath(execPath, execName));
-  }
+  const command = resolveCommand(execPath, execName);
   console.log("runScript", command, args);
 
-  const child = child_process.spawn(process.platform === "win32" ? command : `"${command}"`, args, {
-    encoding: "utf8",
-    shell: true,
+  const child = child_process.spawn(command, args, {
+    stdio: ["ignore", "pipe", "pipe"],
   });
-  child.stdout.on("data", (data) => console.log(`[${execName}] ${data.toString()}`));
-  child.stderr.on("data", (data) => console.log(`[${execName}] ${data.toString()}`));
 
-  child.on("close", (code) => console.log(`[${execName}] exited with code ${code}`));
-  child.on("kill", () => {
-    console.log(`[${execName}] process killed`);
-  });
   child.name = command.replace(/^.*[\\/]/u, "");
 
+  child.on("spawn", () => {
+    console.log(`[${child.name}] spawned, pid=${child.pid}`);
+  });
+
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), timeoutSeconds * MILLISECONDS_PER_SECOND);
+  if (typeof timer.unref === "function") {
+    timer.unref();
+  }
+
   try {
-    return await pTimeout(waitForReady(child, expectedResponse), {
-      milliseconds: timeoutSeconds * MILLISECONDS_PER_SECOND,
-      message: `Timed out after ${timeoutSeconds} seconds`,
-    });
+    const result = await waitForReady(child, expectedResponse, controller.signal);
+    clearTimeout(timer);
+    return result;
   } catch (error) {
+    clearTimeout(timer);
     child.kill();
     throw error;
   }
@@ -73,11 +67,16 @@ async function runBack(execName, execPath, args = {}) {
   }
   const port = await getAvailablePort();
   const backArgs = [
-    `--port ${port}`,
-    `--data_folder_path ${projectFolderPath}`,
-    `--upload_folder_path ${uploadFolderPath}`,
-    `--allowed_origin http://localhost:*`,
-    `--timeout ${0}`,
+    "--port",
+    String(port),
+    "--data_folder_path",
+    projectFolderPath,
+    "--upload_folder_path",
+    uploadFolderPath,
+    "--allowed_origin",
+    "http://localhost:*",
+    "--timeout",
+    "0",
   ];
   if (process.env.NODE_ENV === "development" || !process.env.NODE_ENV) {
     backArgs.push("--debug");
@@ -94,9 +93,12 @@ async function runViewer(execName, execPath, args = {}) {
   }
   const port = await getAvailablePort();
   const viewerArgs = [
-    `--port ${port}`,
-    `--data_folder_path ${projectFolderPath}`,
-    `--timeout ${0}`,
+    "--port",
+    String(port),
+    "--data_folder_path",
+    projectFolderPath,
+    "--timeout",
+    "0",
   ];
   console.log("runViewer", execPath, execName, viewerArgs);
   await runScript(execPath, execName, viewerArgs, "Starting factory");
@@ -121,4 +123,4 @@ function addMicroserviceMetadatas(projectFolderPath, serviceObj) {
   );
 }
 
-export { addMicroserviceMetadatas, getAvailablePort, runBack, runViewer };
+export { addMicroserviceMetadatas, runBack, runViewer };