From 71cefa6511861dffe6d5c7d734961b95b9a18b58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vincent=20Moitti=C3=A9?= <moittie.vincent@gmail.com>
Date: Mon, 16 Sep 2024 10:06:03 +0200
Subject: [PATCH 1/4] Select component and open ComponentDetails from
 ConsoleFooter

---
 changelog.md                                  |  2 +
 src/components/table/ErrorsTable.vue          | 39 ++++++++++++++++++-
 src/layouts/ModelizerDrawLayout.vue           |  2 +-
 src/pages/ModelizerDrawPage.vue               |  5 +++
 .../unit/components/table/ErrorsTable.spec.js | 21 ++++++++++
 tests/unit/pages/ModelizerDrawPage.spec.js    | 15 +++++++
 6 files changed, 81 insertions(+), 3 deletions(-)

diff --git a/changelog.md b/changelog.md
index 1d4a970a4..9ed4a9605 100644
--- a/changelog.md
+++ b/changelog.md
@@ -89,6 +89,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   * Display buttons for each OIDC provider and perform user authentication if the global configuration file is declared.
 * Draw page:
   * Add variables panel in left drawer.
+  * Add panel to display all errors.
+  * Select component in error and open its details from the error's console.
   * Rename component id.
 * Text editor page:
   * Add panel to display all errors.
diff --git a/src/components/table/ErrorsTable.vue b/src/components/table/ErrorsTable.vue
index f02d16611..e7f7e1990 100644
--- a/src/components/table/ErrorsTable.vue
+++ b/src/components/table/ErrorsTable.vue
@@ -6,12 +6,24 @@
     :columns="columns"
     row-key="message"
     data-cy="errors-table"
-  />
+  >
+    <template #body-cell-component="data">
+      <q-td :props="data">
+        <span
+          class="body-link"
+          @click="selectComponent(data.row.componentId)"
+        >
+          {{ data.value }}
+        </span>
+      </q-td>
+    </template>
+  </q-table>
 </template>
 
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import PluginEvent from 'src/composables/events/PluginEvent';
 
 const { t } = useI18n();
 
@@ -72,7 +84,7 @@ const columns = computed(() => {
       name: 'component',
       align: 'center',
       label: t('footer.consoleFooter.errorsTable.component'),
-      field: (row) => row.componentId,
+      field: (row) => row.componentName,
       style: 'width: 2rem',
     },
     {
@@ -85,4 +97,27 @@ const columns = computed(() => {
     messageColumn,
   ];
 });
+
+/**
+ * Send event to select component and open its detail panel.
+ * @param {string} id - Component id.
+ */
+function selectComponent(id) {
+  PluginEvent.RequestEvent.next({
+    type: 'select',
+    ids: [id],
+  });
+  PluginEvent.RequestEvent.next({
+    type: 'edit',
+    id,
+  });
+}
 </script>
+
+<style lang="scss">
+.body-link {
+  color: $info;
+  text-decoration: underline;
+  cursor: pointer;
+}
+</style>
diff --git a/src/layouts/ModelizerDrawLayout.vue b/src/layouts/ModelizerDrawLayout.vue
index 80869d7b7..ab93d50af 100644
--- a/src/layouts/ModelizerDrawLayout.vue
+++ b/src/layouts/ModelizerDrawLayout.vue
@@ -118,7 +118,7 @@ async function initView() {
     ).then((logs) => {
       LogEvent.FileLogEvent.next(logs.map((log) => ({
         ...log,
-        componentId: log.componentId ? data.plugin.data.getComponentById(log.componentId).externalId : '',
+        componentName: log.componentId ? data.plugin.data.getComponentById(log.componentId).externalId : '',
       })));
       data.plugin.draw();
     }),
diff --git a/src/pages/ModelizerDrawPage.vue b/src/pages/ModelizerDrawPage.vue
index e8bcb3498..fd04e570c 100644
--- a/src/pages/ModelizerDrawPage.vue
+++ b/src/pages/ModelizerDrawPage.vue
@@ -193,6 +193,11 @@ async function onRequestEvent(event) {
       key: 'ComponentDetailPanel',
       id: event.id,
     });
+  } else if (event.type === 'select') {
+    const parent = data.plugin.data.getComponentById(event.ids[0]);
+    data.plugin.data.scene.selection = event.ids;
+    data.plugin.data.scene.selectionRef = parent.id;
+    data.plugin.draw();
   }
 
   if (needRender) {
diff --git a/tests/unit/components/table/ErrorsTable.spec.js b/tests/unit/components/table/ErrorsTable.spec.js
index b090419b2..8ba0d5227 100644
--- a/tests/unit/components/table/ErrorsTable.spec.js
+++ b/tests/unit/components/table/ErrorsTable.spec.js
@@ -2,6 +2,7 @@ import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-j
 import { shallowMount } from '@vue/test-utils';
 import i18nConfiguration from 'src/i18n';
 import ErrorsTable from 'src/components/table/ErrorsTable.vue';
+import PluginEvent from 'src/composables/events/PluginEvent';
 
 installQuasarPlugin();
 
@@ -11,6 +12,12 @@ jest.mock('vue-i18n', () => ({
   }),
 }));
 
+jest.mock('src/composables/events/PluginEvent', () => ({
+  RequestEvent: {
+    next: jest.fn(),
+  },
+}));
+
 describe('Test component: ErrorsTable', () => {
   let wrapper;
   const { createI18n } = jest.requireActual('vue-i18n');
@@ -63,4 +70,18 @@ describe('Test component: ErrorsTable', () => {
       expect(wrapper.vm.columns[3].name).toEqual('message');
     });
   });
+
+  describe('Test function: selectComponent', () => {
+    it('should emit events', () => {
+      PluginEvent.RequestEvent.next.mockClear();
+
+      wrapper.vm.selectComponent('id_1');
+
+      expect(PluginEvent.RequestEvent.next).toHaveBeenCalledTimes(2);
+      expect(PluginEvent.RequestEvent.next.mock.calls).toEqual([
+        [{ type: 'select', ids: ['id_1'] }],
+        [{ type: 'edit', id: 'id_1' }],
+      ]);
+    });
+  });
 });
diff --git a/tests/unit/pages/ModelizerDrawPage.spec.js b/tests/unit/pages/ModelizerDrawPage.spec.js
index ca1783519..5ed34c3c1 100644
--- a/tests/unit/pages/ModelizerDrawPage.spec.js
+++ b/tests/unit/pages/ModelizerDrawPage.spec.js
@@ -34,6 +34,7 @@ jest.mock('src/composables/PluginManager', () => ({
   getPluginByName: jest.fn(() => ({
     data: {
       name: 'pluginName',
+      getComponentById: jest.fn(() => ({ id: 2 })),
       addComponent: jest.fn(),
       removeComponentById: jest.fn(),
       definitions: {
@@ -41,6 +42,10 @@ jest.mock('src/composables/PluginManager', () => ({
           { type: 'testComponent', isTemplate: false, icon: 'icon' },
         ],
       },
+      scene: {
+        selection: [],
+        selectionRef: null,
+      },
     },
     configuration: {
       defaultFileName: 'defaultFileName',
@@ -382,6 +387,16 @@ describe('Test page component: ModelizerDrawPage', () => {
         id: 1,
       });
     });
+
+    it('should select component and draw', () => {
+      DrawerEvent.next.mockClear();
+
+      wrapper.vm.onRequestEvent({
+        type: 'select',
+        ids: [1],
+      });
+      expect(wrapper.vm.data.plugin.draw).toBeCalled();
+    });
   });
 
   describe('Test function: askAI', () => {

From 6409065916e3b8f8bcaae8298eca87895b3d08e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vincent=20Moitti=C3=A9?= <moittie.vincent@gmail.com>
Date: Mon, 16 Sep 2024 10:20:08 +0200
Subject: [PATCH 2/4] Add columns for ConsoleErrors in diagram page

---
 src/components/table/ErrorsTable.vue          | 85 ++++++++++---------
 src/i18n/en-US/index.js                       |  1 +
 .../unit/components/table/ErrorsTable.spec.js |  7 +-
 3 files changed, 50 insertions(+), 43 deletions(-)

diff --git a/src/components/table/ErrorsTable.vue b/src/components/table/ErrorsTable.vue
index e7f7e1990..406000bfc 100644
--- a/src/components/table/ErrorsTable.vue
+++ b/src/components/table/ErrorsTable.vue
@@ -39,63 +39,66 @@ const props = defineProps({
 });
 
 const columns = computed(() => {
-  const severityColumn = {
+  const array = [{
     name: 'severity',
     align: 'left',
     label: t('footer.consoleFooter.errorsTable.severity'),
     field: (row) => t(`parser.severity.${row.severity}`),
     style: 'width: 2rem',
-  };
-  const messageColumn = {
-    name: 'message',
-    align: 'left',
-    label: t('footer.consoleFooter.errorsTable.message'),
-    field: (row) => t(row.message, {
-      initialErrorMessage: row.initialErrorMessage,
-      extraData: row.extraData,
-      attribute: row.attribute,
-    }),
-  };
+  }];
 
-  if (props.editorType === 'text') {
-    return [
-      severityColumn,
-      {
-        name: 'line',
-        align: 'center',
-        label: t('footer.consoleFooter.errorsTable.line'),
-        field: (row) => `${row.startLineNumber}-${row.endLineNumber}`,
-        style: 'width: 2rem',
-      },
-      {
-        name: 'column',
-        align: 'center',
-        label: t('footer.consoleFooter.errorsTable.column'),
-        field: (row) => `${row.startColumn}-${row.endColumn}`,
-        style: 'width: 2rem',
-      },
-      messageColumn,
-    ];
-  }
-
-  return [
-    severityColumn,
-    {
+  if (props.editorType === 'diagram') {
+    array.push({
       name: 'component',
       align: 'center',
       label: t('footer.consoleFooter.errorsTable.component'),
       field: (row) => row.componentName,
       style: 'width: 2rem',
-    },
-    {
+    });
+    array.push({
       name: 'attribute',
       align: 'center',
       label: t('footer.consoleFooter.errorsTable.attribute'),
       field: (row) => row.attribute,
       style: 'width: 2rem',
-    },
-    messageColumn,
-  ];
+    });
+    array.push({
+      name: 'file',
+      align: 'center',
+      label: t('footer.consoleFooter.errorsTable.file'),
+      field: (row) => row.path,
+      style: 'width: 2rem',
+    });
+  }
+
+  array.push({
+    name: 'line',
+    align: 'center',
+    label: t('footer.consoleFooter.errorsTable.line'),
+    field: (row) => `${row.startLineNumber}-${row.endLineNumber}`,
+    style: 'width: 2rem',
+  });
+
+  array.push({
+    name: 'column',
+    align: 'center',
+    label: t('footer.consoleFooter.errorsTable.column'),
+    field: (row) => `${row.startColumn}-${row.endColumn}`,
+    style: 'width: 2rem',
+  });
+
+  array.push({
+    name: 'message',
+    align: 'left',
+    label: t('footer.consoleFooter.errorsTable.message'),
+    field: (row) => t(row.message, {
+      initialErrorMessage: row.initialErrorMessage,
+      extraData: row.extraData,
+      attribute: row.attribute,
+    }),
+  });
+
+  return array;
 });
 
 /**
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index 37a70a535..4cc196073 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -495,6 +495,7 @@ export default {
       errorsTable: {
         message: 'Message',
         line: 'Start/End Line',
+        file: 'File',
         column: 'Start/End Column',
         severity: 'Severity',
         component: 'Component',
diff --git a/tests/unit/components/table/ErrorsTable.spec.js b/tests/unit/components/table/ErrorsTable.spec.js
index 8ba0d5227..eb192a087 100644
--- a/tests/unit/components/table/ErrorsTable.spec.js
+++ b/tests/unit/components/table/ErrorsTable.spec.js
@@ -51,11 +51,14 @@ describe('Test component: ErrorsTable', () => {
         editorType: 'diagram',
       });
 
-      expect(wrapper.vm.columns.length).toEqual(4);
+      expect(wrapper.vm.columns.length).toEqual(7);
       expect(wrapper.vm.columns[0].name).toEqual('severity');
       expect(wrapper.vm.columns[1].name).toEqual('component');
       expect(wrapper.vm.columns[2].name).toEqual('attribute');
-      expect(wrapper.vm.columns[3].name).toEqual('message');
+      expect(wrapper.vm.columns[3].name).toEqual('file');
+      expect(wrapper.vm.columns[4].name).toEqual('line');
+      expect(wrapper.vm.columns[5].name).toEqual('column');
+      expect(wrapper.vm.columns[6].name).toEqual('message');
     });
 
     it('should have valid columns for text page', async () => {

From 93895318a690ebe47807f6cc807220e9aab011f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vincent=20Moitti=C3=A9?= <moittie.vincent@gmail.com>
Date: Mon, 16 Sep 2024 11:41:23 +0200
Subject: [PATCH 3/4] Make File path open selected file in editor from diagram
 page in ConsoleFooter

---
 changelog.md                                  |  1 +
 src/components/table/ErrorsTable.vue          | 21 ++++++++++
 src/pages/ModelizerDrawPage.vue               | 13 +++++-
 .../unit/components/table/ErrorsTable.spec.js | 13 ++++++
 tests/unit/pages/ModelizerDrawPage.spec.js    | 40 +++++++++++++++++++
 5 files changed, 87 insertions(+), 1 deletion(-)

diff --git a/changelog.md b/changelog.md
index 9ed4a9605..20cc6eee0 100644
--- a/changelog.md
+++ b/changelog.md
@@ -91,6 +91,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   * Add variables panel in left drawer.
   * Add panel to display all errors.
   * Select component in error and open its details from the error's console.
+  * Select file in error and open text editor and selected file open.
   * Rename component id.
 * Text editor page:
   * Add panel to display all errors.
diff --git a/src/components/table/ErrorsTable.vue b/src/components/table/ErrorsTable.vue
index 406000bfc..f12b71a1c 100644
--- a/src/components/table/ErrorsTable.vue
+++ b/src/components/table/ErrorsTable.vue
@@ -17,6 +17,16 @@
         </span>
       </q-td>
     </template>
+    <template #body-cell-file="data">
+      <q-td :props="data">
+        <span
+          class="body-link"
+          @click="selectFile(data.row.path)"
+        >
+          {{ data.value }}
+        </span>
+      </q-td>
+    </template>
   </q-table>
 </template>
 
@@ -115,6 +125,17 @@ function selectComponent(id) {
     id,
   });
 }
+
+/**
+ * Send event to select file and open it in text editor.
+ * @param {string} path - File path.
+ */
+function selectFile(path) {
+  PluginEvent.RequestEvent.next({
+    type: 'openFile',
+    path,
+  });
+}
 </script>
 
 <style lang="scss">
diff --git a/src/pages/ModelizerDrawPage.vue b/src/pages/ModelizerDrawPage.vue
index fd04e570c..744ca475a 100644
--- a/src/pages/ModelizerDrawPage.vue
+++ b/src/pages/ModelizerDrawPage.vue
@@ -61,7 +61,7 @@ import {
   reactive,
   ref,
 } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { Notify } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import PluginEvent from 'src/composables/events/PluginEvent';
@@ -69,9 +69,11 @@ import { getTemplatesByType } from 'src/composables/TemplateManager';
 import DialogEvent from 'src/composables/events/DialogEvent';
 import { ComponentLink } from '@ditrit/leto-modelizer-plugin-core';
 import DrawerEvent from 'src/composables/events/DrawerEvent';
+import FileEvent from 'src/composables/events/FileEvent';
 
 const { t } = useI18n();
 const route = useRoute();
+const router = useRouter();
 
 const HAS_BACKEND = computed(() => process.env.HAS_BACKEND);
 const projectName = computed(() => route.params.projectName);
@@ -198,6 +200,15 @@ async function onRequestEvent(event) {
     data.plugin.data.scene.selection = event.ids;
     data.plugin.data.scene.selectionRef = parent.id;
     data.plugin.draw();
+  } else if (event.type === 'openFile') {
+    await router.push({
+      name: 'Text',
+      params: {
+        projectName: projectName.value,
+      },
+      query: query.value,
+    });
+    FileEvent.SelectFileTabEvent.next(event.path);
   }
 
   if (needRender) {
diff --git a/tests/unit/components/table/ErrorsTable.spec.js b/tests/unit/components/table/ErrorsTable.spec.js
index eb192a087..32b41ac1a 100644
--- a/tests/unit/components/table/ErrorsTable.spec.js
+++ b/tests/unit/components/table/ErrorsTable.spec.js
@@ -87,4 +87,17 @@ describe('Test component: ErrorsTable', () => {
       ]);
     });
   });
+
+  describe('Test function: selectFile', () => {
+    it('should emit event', () => {
+      PluginEvent.RequestEvent.next.mockClear();
+
+      wrapper.vm.selectFile('path');
+
+      expect(PluginEvent.RequestEvent.next).toHaveBeenCalledTimes(1);
+      expect(PluginEvent.RequestEvent.next.mock.calls).toEqual([
+        [{ type: 'openFile', path: 'path' }],
+      ]);
+    });
+  });
 });
diff --git a/tests/unit/pages/ModelizerDrawPage.spec.js b/tests/unit/pages/ModelizerDrawPage.spec.js
index 5ed34c3c1..a44d24971 100644
--- a/tests/unit/pages/ModelizerDrawPage.spec.js
+++ b/tests/unit/pages/ModelizerDrawPage.spec.js
@@ -6,6 +6,8 @@ import PluginManager from 'src/composables/PluginManager';
 import TemplateManager from 'src/composables/TemplateManager';
 import PluginEvent from 'src/composables/events/PluginEvent';
 import DrawerEvent from 'src/composables/events/DrawerEvent';
+import FileEvent from 'src/composables/events/FileEvent';
+import { useRouter } from 'vue-router';
 
 installQuasarPlugin({
   plugins: [Notify],
@@ -28,6 +30,9 @@ jest.mock('vue-router', () => ({
       plugin: 'plugin',
     },
   }),
+  useRouter: jest.fn(() => ({
+    push: () => Promise.resolve(),
+  })),
 }));
 
 jest.mock('src/composables/PluginManager', () => ({
@@ -86,6 +91,12 @@ jest.mock('src/composables/events/DrawerEvent', () => ({
   subscribe: jest.fn(),
 }));
 
+jest.mock('src/composables/events/FileEvent', () => ({
+  SelectFileTabEvent: {
+    next: jest.fn(),
+  },
+}));
+
 describe('Test page component: ModelizerDrawPage', () => {
   let wrapper;
   let pluginDefaultSubscribe;
@@ -94,6 +105,7 @@ describe('Test page component: ModelizerDrawPage', () => {
   let pluginRequestUnsubscribe;
   let drawerEventSubscribe;
   let drawerEventUnsubscribe;
+  let push;
 
   beforeEach(() => {
     pluginDefaultSubscribe = jest.fn();
@@ -102,6 +114,11 @@ describe('Test page component: ModelizerDrawPage', () => {
     pluginRequestUnsubscribe = jest.fn();
     drawerEventSubscribe = jest.fn();
     drawerEventUnsubscribe = jest.fn();
+    push = jest.fn(() => Promise.resolve());
+
+    useRouter.mockImplementation(() => ({
+      push,
+    }));
 
     PluginEvent.DefaultEvent.subscribe.mockImplementation(() => {
       pluginDefaultSubscribe();
@@ -397,6 +414,29 @@ describe('Test page component: ModelizerDrawPage', () => {
       });
       expect(wrapper.vm.data.plugin.draw).toBeCalled();
     });
+
+    it('should go to editor page and send event to set active file', async () => {
+      FileEvent.SelectFileTabEvent.next.mockClear();
+      const router = useRouter();
+      router.push.mockClear();
+
+      await wrapper.vm.onRequestEvent({
+        type: 'openFile',
+        path: 'main.tf',
+      });
+
+      expect(router.push).toBeCalledWith({
+        name: 'Text',
+        params: {
+          projectName: 'project-00000000',
+        },
+        query: {
+          path: 'path',
+          plugin: 'plugin',
+        },
+      });
+      expect(FileEvent.SelectFileTabEvent.next).toBeCalledWith('main.tf');
+    });
   });
 
   describe('Test function: askAI', () => {

From 481f6f780be439754faf326fa0d74cdbc99222ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vincent=20Moitti=C3=A9?= <moittie.vincent@gmail.com>
Date: Mon, 16 Sep 2024 11:42:40 +0200
Subject: [PATCH 4/4] Remove useless variable usage

---
 src/layouts/ModelizerTextLayout.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/layouts/ModelizerTextLayout.vue b/src/layouts/ModelizerTextLayout.vue
index dafbe4f2e..e430d5f86 100644
--- a/src/layouts/ModelizerTextLayout.vue
+++ b/src/layouts/ModelizerTextLayout.vue
@@ -9,7 +9,6 @@
         v-model="splitter"
         :limits="[50, 100]"
         separator-class="separator-class"
-        :class="isVisible ? '' : 'splitter-invisible'"
         :style="{ height: `calc(100vh - ${reservedHeight + 70}px)` }"
       >
         <template #before>