From 27c42cbf3dd2cb808f09a06cd011033cd2f4d4b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vincent=20Moitti=C3=A9?= <moittie.vincent@gmail.com>
Date: Tue, 8 Oct 2024 15:46:21 +0200
Subject: [PATCH] wip

---
 global.config.json                            |   4 +-
 package-lock.json                             | 116 ++++-
 package.json                                  |   4 +
 .../card/ComponentDefinitionCard.vue          |   2 +-
 .../drawer/ModelizerDrawLeftDrawer.vue        |   2 +-
 .../grid/ComponentDefinitionGrid.vue          |  15 +-
 src/components/list/LibraryList.vue           |  86 ++--
 .../tab-panel/ComponentsTabPanel.vue          | 213 ++++++++
 .../tab-panel/VariablesTabPanel.vue           | 139 ++++++
 src/components/tab/ComponentsTab.vue          |  71 +++
 src/layouts/ModelizerTestLayout.vue           |  35 ++
 src/pages/ModelizerTestPage.vue               | 466 ++++++++++++++++++
 src/plugins/index.js                          |  10 +-
 src/router/routes.js                          |   6 +
 14 files changed, 1124 insertions(+), 45 deletions(-)
 create mode 100644 src/components/tab-panel/ComponentsTabPanel.vue
 create mode 100644 src/components/tab-panel/VariablesTabPanel.vue
 create mode 100644 src/components/tab/ComponentsTab.vue
 create mode 100644 src/layouts/ModelizerTestLayout.vue
 create mode 100644 src/pages/ModelizerTestPage.vue

diff --git a/global.config.json b/global.config.json
index 0967ef424..0de6ba5cd 100644
--- a/global.config.json
+++ b/global.config.json
@@ -1 +1,3 @@
-{}
+{
+  "backendUrl": "https://localhost:8443"
+}
diff --git a/package-lock.json b/package-lock.json
index 7ebee49df..6c5db8c6c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,13 +8,17 @@
       "name": "@ditrit/leto-modelizer",
       "version": "1.3.0",
       "dependencies": {
+        "@ditrit/githubator-plugin": "^0.5.2",
+        "@ditrit/kubernator-plugin": "^0.3.2",
         "@ditrit/leto-modelizer-plugin-core": "=0.28.0",
+        "@ditrit/terrator-plugin": "^0.12.2",
         "@quasar/extras": "=1.16.9",
         "axios": "=1.6.2",
         "browserfs": "=1.4.3",
         "core-js": "=3.34.0",
         "crypto-js": "^4.2.0",
         "isomorphic-git": "=1.25.1",
+        "jdenticon": "^3.3.0",
         "monaco-editor": "=0.45.0",
         "monaco-editor-webpack-plugin": "=7.1.0",
         "pako": "^2.1.0",
@@ -2503,6 +2507,51 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/@ditrit/githubator-plugin": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@ditrit/githubator-plugin/-/githubator-plugin-0.5.2.tgz",
+      "integrity": "sha512-/v0PozLYsyqRmxKMsXhwGn//XCORlFHM8G3uSCHEKGiEEcu/HwvOevohzNDaYp2IHokbNjV/WauOC7kCFCAhLA==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "lidy-js": "github:ditrit/lidy-js#1.0.1",
+        "nunjucks": "=3.2.4"
+      },
+      "peerDependencies": {
+        "@ditrit/leto-modelizer-plugin-core": "=0.28.0"
+      }
+    },
+    "node_modules/@ditrit/kubernator-plugin": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@ditrit/kubernator-plugin/-/kubernator-plugin-0.3.2.tgz",
+      "integrity": "sha512-shTcNEYvoG38+ij/wETK/w2Zh0V11NOzabpqL5N2wvlhBHw9yqRqe5WGhy1bsflwIlHlGkoilvKkn5ivQ/lwuA==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "js-yaml": "^4.1.0",
+        "leto-modelizer-plugin-core": "github:ditrit/leto-modelizer-plugin-core#0.28.0",
+        "lidy-js": "github:ditrit/lidy-js#main"
+      },
+      "peerDependencies": {
+        "@ditrit/leto-modelizer-plugin-core": "=0.28.0"
+      }
+    },
+    "node_modules/@ditrit/kubernator-plugin/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
+    "node_modules/@ditrit/kubernator-plugin/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/@ditrit/leto-modelizer-plugin-cli": {
       "version": "2.0.1",
       "dev": true,
@@ -2544,6 +2593,19 @@
         "web-worker": "=1.3.0"
       }
     },
+    "node_modules/@ditrit/terrator-plugin": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@ditrit/terrator-plugin/-/terrator-plugin-0.12.2.tgz",
+      "integrity": "sha512-BdrS17j046Y3P+IM3hv7OcRKfOukWVVFJm6Ct5a9tyR1pocbf07yi1uwDdxdMsduvnqgv9/qmHjpde9dXGTP1g==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "antlr4": "=4.13.2",
+        "nunjucks": "=3.2.4"
+      },
+      "peerDependencies": {
+        "@ditrit/leto-modelizer-plugin-core": "=0.28.0"
+      }
+    },
     "node_modules/@es-joy/jsdoccomment": {
       "version": "0.41.0",
       "dev": true,
@@ -6776,6 +6838,15 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/antlr4": {
+      "version": "4.13.2",
+      "resolved": "https://registry.npmjs.org/antlr4/-/antlr4-4.13.2.tgz",
+      "integrity": "sha512-QiVbZhyy4xAZ17UPEuG3YTOt8ZaoeOR1CvEAqrEsDBsOqINslaB147i9xqljZqoyf5S+EUlGStaj+t22LT9MOg==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "dev": true,
@@ -8458,6 +8529,15 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvas-renderer": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/canvas-renderer/-/canvas-renderer-2.2.1.tgz",
+      "integrity": "sha512-RrBgVL5qCEDIXpJ6NrzyRNoTnXxYarqm/cS/W6ERhUJts5UQtt/XPEosGN3rqUkZ4fjBArlnCbsISJ+KCFnIAg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/capital-case": {
       "version": "1.0.4",
       "dev": true,
@@ -15112,6 +15192,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/jdenticon": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/jdenticon/-/jdenticon-3.3.0.tgz",
+      "integrity": "sha512-DhuBRNRIybGPeAjMjdHbkIfiwZCCmf8ggu7C49jhp6aJ7DYsZfudnvnTY5/1vgUhrGA7JaDAx1WevnpjCPvaGg==",
+      "license": "MIT",
+      "dependencies": {
+        "canvas-renderer": "~2.2.0"
+      },
+      "bin": {
+        "jdenticon": "bin/jdenticon.js"
+      },
+      "engines": {
+        "node": ">=6.4.0"
+      }
+    },
     "node_modules/jest": {
       "version": "29.7.0",
       "dev": true,
@@ -17939,6 +18034,18 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/leto-modelizer-plugin-core": {
+      "name": "@ditrit/leto-modelizer-plugin-core",
+      "version": "0.28.0",
+      "resolved": "git+ssh://git@github.com/ditrit/leto-modelizer-plugin-core.git#154dbe56d9000706c5cc95b5c71dbaca8696d90f",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "d3": "=7.9.0",
+        "d3-hierarchy": "=3.1.2",
+        "nunjucks": "=3.2.4",
+        "web-worker": "=1.3.0"
+      }
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "dev": true,
@@ -17959,6 +18066,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lidy-js": {
+      "version": "1.0.1",
+      "resolved": "git+ssh://git@github.com/ditrit/lidy-js.git#240f1c079feb56d8388ad31092632bce72c0a268",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "yaml": "^2.0.0-5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "dev": true,
@@ -26532,7 +26647,6 @@
     },
     "node_modules/yaml": {
       "version": "2.5.1",
-      "dev": true,
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
diff --git a/package.json b/package.json
index 1fd9ef2c0..c823d15ab 100644
--- a/package.json
+++ b/package.json
@@ -21,13 +21,17 @@
     "plugin:uninstall": "node node_modules/@ditrit/leto-modelizer-plugin-cli/src/index.js uninstall"
   },
   "dependencies": {
+    "@ditrit/githubator-plugin": "^0.5.2",
+    "@ditrit/kubernator-plugin": "^0.3.2",
     "@ditrit/leto-modelizer-plugin-core": "=0.28.0",
+    "@ditrit/terrator-plugin": "^0.12.2",
     "@quasar/extras": "=1.16.9",
     "axios": "=1.6.2",
     "browserfs": "=1.4.3",
     "core-js": "=3.34.0",
     "crypto-js": "^4.2.0",
     "isomorphic-git": "=1.25.1",
+    "jdenticon": "^3.3.0",
     "monaco-editor": "=0.45.0",
     "monaco-editor-webpack-plugin": "=7.1.0",
     "pako": "^2.1.0",
diff --git a/src/components/card/ComponentDefinitionCard.vue b/src/components/card/ComponentDefinitionCard.vue
index fd85fbfb9..3c0cabee2 100644
--- a/src/components/card/ComponentDefinitionCard.vue
+++ b/src/components/card/ComponentDefinitionCard.vue
@@ -170,7 +170,7 @@ onMounted(() => {
 
 <style scoped>
   .component-definition-type {
-    word-break: normal;
+    word-break: break-all;
     text-align: center;
   }
 </style>
diff --git a/src/components/drawer/ModelizerDrawLeftDrawer.vue b/src/components/drawer/ModelizerDrawLeftDrawer.vue
index a9df00eea..2f359c765 100644
--- a/src/components/drawer/ModelizerDrawLeftDrawer.vue
+++ b/src/components/drawer/ModelizerDrawLeftDrawer.vue
@@ -12,7 +12,7 @@
     <q-splitter
       v-model="splitterModel"
       :limits="[10, 15]"
-      class="bordered-splitter"
+      class="border-top: 1px solid rgba(0, 0, 0, 0.12)"
     >
       <template #before>
         <q-tabs
diff --git a/src/components/grid/ComponentDefinitionGrid.vue b/src/components/grid/ComponentDefinitionGrid.vue
index 77701b622..5e6354d72 100644
--- a/src/components/grid/ComponentDefinitionGrid.vue
+++ b/src/components/grid/ComponentDefinitionGrid.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="full-width row q-col-gutter-sm"
+    class="flex-1 row q-col-gutter-sm"
     data-cy="component-definition-grid"
   >
     <div
@@ -19,6 +19,7 @@
 
 <script setup>
 import ComponentDefinitionCard from 'src/components/card/ComponentDefinitionCard.vue';
+import { computed } from 'vue';
 
 defineProps({
   definitions: {
@@ -30,4 +31,16 @@ defineProps({
     required: true,
   },
 });
+const columns = computed(() => [
+  {
+    name: 'name',
+    label: t('page.modelizer.drawer.variables.name'),
+    field: 'name',
+  },
+  {
+    name: 'value',
+    label: t('page.modelizer.drawer.variables.value'),
+    field: 'value',
+  },
+]);
 </script>
diff --git a/src/components/list/LibraryList.vue b/src/components/list/LibraryList.vue
index 044aee8d6..4f8c4f863 100644
--- a/src/components/list/LibraryList.vue
+++ b/src/components/list/LibraryList.vue
@@ -1,54 +1,64 @@
 <template>
-  <q-input
-    v-model="definitionFilter"
-    clearable
-    class="q-px-md"
-    debounce="1000"
-    :label="inputLabel"
-    data-cy="definitions-filter-input"
-    @update:model-value="initTemplates"
-  >
-    <template #prepend>
-      <q-icon name="fa-solid fa-magnifying-glass" />
-    </template>
-  </q-input>
   <q-list
     text-white
-    :class="[
-      'column no-wrap col-shrink',
-      'scroll'
-    ]"
-    style="max-height: calc(100vh - 260px);"
+    style="width: 100%"
   >
-    <template
-      v-for="(drawerItem) in drawerItems"
-      :key="drawerItem.id"
-    >
-      <library-item
-        v-if="drawerItem.size > 0
-          && (selectedItemId === drawerItem.id || selectedItemId === null)"
-        :item="drawerItem"
-        :is-selected="isSelected"
-        @click="onItemClick(drawerItem.id)"
-      />
-    </template>
+    <q-item class="column background-white q-pa-none"
+            style="width: 100%">
+      <q-input
+        v-model="definitionFilter"
+        clearable
+        class="q-px-md"
+        debounce="1000"
+        :label="inputLabel"
+        data-cy="definitions-filter-input"
+        @update:model-value="initTemplates"
+      >
+        <template #prepend>
+          <q-icon name="fa-solid fa-magnifying-glass" />
+        </template>
+      </q-input>
+      <template
+        v-for="(drawerItem) in drawerItems"
+        :key="drawerItem.id"
+      >
+        <library-item
+          v-if="drawerItem.size > 0
+            && (selectedItemId === drawerItem.id || selectedItemId === null)"
+          :item="drawerItem"
+          :is-selected="isSelected"
+          @click="onItemClick(drawerItem.id)"
+        />
+      </template>
+    </q-item>
     <template v-if="selectedItemId">
       <div
         v-if="!hasRole"
-        class="q-px-md q-py-sm text-italic text-grey full-height"
+        class="q-px-md q-py-sm text-italic text-grey"
         data-cy="library-unauthorized-message"
       >
         {{ $t('errors.permissionsDenied') }}
       </div>
       <q-item
         v-else-if="!isEmptyList"
-        class="q-pa-none q-mb-sm item-grid column"
+        class="q-pa-none q-mb-sm column"
       >
-        <component-definition-grid
-          :definitions="selectedItemDefinitions"
-          :plugin-name="plugin.data.name"
-          class="q-mt-xs q-pr-sm"
-        />
+        <div
+          class="row q-col-gutter-sm"
+          data-cy="component-definition-grid"
+        >
+          <div
+            v-for="(definition, index) in selectedItemDefinitions"
+            :key="`definition-card_${index}`"
+            class="col-4"
+          >
+            <component-definition-card
+              :definition="definition"
+              :plugin-name="plugin.data.name"
+              class="full-height"
+            />
+          </div>
+        </div>
         <q-btn
           v-if="haveMoreTemplates"
           outline
@@ -78,12 +88,12 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue';
-import ComponentDefinitionGrid from 'src/components/grid/ComponentDefinitionGrid.vue';
 import LibraryItem from 'src/components/item/LibraryItem.vue';
 import { useI18n } from 'vue-i18n';
 import { isMatching } from 'src/composables/Project';
 import { useAcl } from 'vue-simple-acl';
 import { getTemplatesByType } from 'src/services/TemplateService';
+import ComponentDefinitionCard from 'components/card/ComponentDefinitionCard.vue';
 
 const acl = useAcl();
 const { t } = useI18n();
diff --git a/src/components/tab-panel/ComponentsTabPanel.vue b/src/components/tab-panel/ComponentsTabPanel.vue
new file mode 100644
index 000000000..3690b07a1
--- /dev/null
+++ b/src/components/tab-panel/ComponentsTabPanel.vue
@@ -0,0 +1,213 @@
+<template>
+  <q-tab-panel
+    name="components"
+    class="q-pa-none column no-wrap"
+  >
+    <q-input
+      v-model="searchText"
+      clearable
+      class="q-px-md"
+      debounce="1000"
+      :label="inputLabel"
+      data-cy="definitions-filter-input"
+      @update:model-value="initTemplates"
+    >
+      <template #prepend>
+        <q-icon name="fa-solid fa-magnifying-glass" />
+      </template>
+    </q-input>
+
+    <div
+      class="q-pa-sm"
+      v-for="(drawerItem) in drawerItems"
+      :key="drawerItem.id"
+    >
+      <library-item
+        v-if="drawerItem.size > 0
+          && (selectedItemId === drawerItem.id || selectedItemId === null)"
+        :item="drawerItem"
+        :is-selected="isSelected"
+        @click="onItemClick(drawerItem.id)"
+      />
+    </div>
+
+    <template v-if="selectedItemId">
+      <div
+        v-if="!hasRole"
+        class="q-px-md q-py-sm text-italic text-grey"
+        data-cy="library-unauthorized-message"
+      >
+        {{ $t('errors.permissionsDenied') }}
+      </div>
+      <div
+        v-if="isEmptyList"
+        class="q-px-md q-py-sm text-italic text-grey full-height"
+        data-cy="library-empty-message"
+      >
+        {{ $t('page.modelizer.drawer.components.empty') }}
+      </div>
+      <div
+        v-else
+        class="row q-col-gutter-sm"
+        data-cy="component-definition-grid"
+      >
+        <div
+          v-for="(definition, index) in selectedItemDefinitions"
+          :key="`definition-card_${index}`"
+          class="col-4"
+        >
+          <component-definition-card
+            :definition="definition"
+            :plugin-name="plugin.data.name"
+            class="full-height"
+          />
+        </div>
+      </div>
+      <q-btn
+        v-if="haveMoreTemplates"
+        outline
+        no-caps
+        icon="fa-solid fa-ellipsis"
+        color="primary"
+        class="q-ma-sm"
+        label="load more"
+        :loading="loading"
+        @click="loadMoreTemplates"
+      >
+        <template #loading>
+          <q-spinner-dots />
+        </template>
+      </q-btn>
+    </template>
+  </q-tab-panel>
+</template>
+
+<script setup>
+import { useAcl } from 'vue-simple-acl';
+import { useI18n } from 'vue-i18n';
+import { computed, onMounted, ref } from 'vue';
+import { isMatching } from 'src/composables/Project';
+import { getTemplatesByType } from 'src/services/TemplateService';
+import LibraryItem from 'components/item/LibraryItem.vue';
+import ComponentDefinitionCard from 'components/card/ComponentDefinitionCard.vue';
+
+const acl = useAcl();
+const { t } = useI18n();
+const props = defineProps({
+  plugin: {
+    type: Object,
+    required: true,
+  },
+});
+const templates = ref([]);
+const totalTemplates = ref(0);
+const searchText = ref('');
+const selectedItemId = ref(null);
+const isSelected = ref(false);
+const loading = ref(false);
+const haveMoreTemplates = ref(true);
+const currentPage = ref(0);
+// TODO : remove this const
+// when @quasar/quasar-app-extension-testing-unit-jest@3.0.0 is officially released
+const inputLabel = computed(() => t('page.modelizer.drawer.components.filterLabel'));
+const pluginDefinitions = computed(() => props.plugin.data.definitions.components
+  .filter((def) => isMatching(searchText.value, def.displayName || def.type)));
+const isEmptyList = computed(() => pluginDefinitions.value.length === 0
+    && templates.value.length === 0);
+const drawerItems = computed(() => [
+  {
+    id: props.plugin.data.name,
+    title: t(`${props.plugin.data.name}.displayName`),
+    definitions: pluginDefinitions.value,
+    size: pluginDefinitions.value.length,
+    hasRole: acl.role('create-component'),
+  },
+  {
+    id: t('page.modelizer.drawer.templates.title'),
+    title: t('page.modelizer.drawer.templates.title'),
+    definitions: templates.value,
+    size: totalTemplates.value,
+    hasRole: acl.role('create-component-from-template'),
+  },
+]);
+const selectedItemDefinitions = computed(() => drawerItems.value
+  .find(({ id }) => selectedItemId.value === id)?.definitions);
+const hasRole = computed(() => drawerItems.value
+  .find(({ id }) => selectedItemId.value === id)?.hasRole || false);
+
+/**
+ * Toggle isSelected value and set selectedItemId on library item click.
+ * @param {string} id - Id of clicked library item.
+ */
+function onItemClick(id) {
+  isSelected.value = !isSelected.value;
+
+  if (isSelected.value) {
+    selectedItemId.value = id;
+  } else {
+    selectedItemId.value = null;
+  }
+}
+
+/**
+ * Load templates.
+ * @param {number} page - Current page for pagination.
+ * @returns {Promise<void>} Promise with nothing on success otherwise an error.
+ */
+async function loadTemplates(page) {
+  loading.value = true;
+  currentPage.value = page;
+  const name = searchText.value ? searchText.value.trim() : '';
+
+  return getTemplatesByType({
+    HAS_BACKEND: process.env.HAS_BACKEND,
+    TEMPLATE_LIBRARY_BASE_URL: process.env.TEMPLATE_LIBRARY_BASE_URL,
+  }, 'COMPONENT', {
+    plugin: props.plugin.data.name,
+    count: 15,
+    page: currentPage.value,
+    name,
+  }).then((data) => {
+    haveMoreTemplates.value = data.pageable.pageNumber + 1 < data.totalPages;
+    currentPage.value = data.pageable.pageNumber;
+    totalTemplates.value = data.totalElements;
+
+    return data.content.map((template) => ({
+      ...template,
+      isTemplate: true,
+    }));
+  }).finally(() => {
+    loading.value = false;
+  });
+}
+
+/**
+ * Initialize templates by loading page 0.
+ * @returns {Promise<void>} Promise with nothing on success otherwise an error.
+ */
+async function initTemplates() {
+  return loadTemplates(0).then((data) => {
+    templates.value = data;
+  });
+}
+
+/**
+ * Load templates for next page after the current.
+ * @returns {Promise<void>} Promise with nothing on success otherwise an error.
+ */
+async function loadMoreTemplates() {
+  return loadTemplates(currentPage.value + 1).then((data) => {
+    data.forEach((template) => {
+      templates.value.push(template);
+    });
+  });
+}
+
+onMounted(() => {
+  initTemplates();
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/components/tab-panel/VariablesTabPanel.vue b/src/components/tab-panel/VariablesTabPanel.vue
new file mode 100644
index 000000000..1804693f2
--- /dev/null
+++ b/src/components/tab-panel/VariablesTabPanel.vue
@@ -0,0 +1,139 @@
+<template>
+  <q-tab-panel
+    name="variables"
+    class="q-pa-none column no-wrap"
+  >
+    <q-list data-cy="variable-list">
+      <q-expansion-item
+        v-for="file in Object.keys(variables)"
+        :key="file"
+        :label="file"
+        switch-toggle-side
+        dense
+        dense-toggle
+        expand-icon="fa-solid fa-chevron-up"
+        expanded-icon="fa-solid fa-chevron-down"
+        default-opened
+        expand-icon-class="text-primary"
+        class="text-primary text-subtitle1 q-mt-md"
+        :data-cy="`variable-item_${file}`"
+      >
+        <q-expansion-item
+          v-for="category in Object.keys(variables[file])"
+          :key="`${file}_${category}`"
+          :label="category"
+          :header-inset-level="0.5"
+          :content-inset-level="1"
+          switch-toggle-side
+          dense
+          dense-toggle
+          default-opened
+          expand-icon="fa-solid fa-chevron-up"
+          expanded-icon="fa-solid fa-chevron-down"
+          expand-icon-class="text-primary"
+          class="text-subtitle2"
+          :data-cy="`variable-item_${file}_${category}`"
+        >
+          <q-table
+            flat
+            bordered
+            hide-bottom
+            dense
+            :rows="variables[file][category]"
+            :columns="columns"
+            row-key="name"
+            separator="horizontal"
+            class="q-mr-sm"
+            table-header-class="text-left"
+          >
+            <template #body-cell-name="{ row: { name } }">
+              <q-td
+                class="text-left"
+                :data-cy="`name_${name}`"
+              >
+                <div>
+                  {{ name }}
+                </div>
+              </q-td>
+            </template>
+            <template #body-cell-value="{ row: { value } }">
+              <q-td
+                class="text-left"
+                :data-cy="`value_${value}`"
+              >
+                {{ value }}
+              </q-td>
+            </template>
+          </q-table>
+        </q-expansion-item>
+      </q-expansion-item>
+      <div
+        v-if="Object.keys(variables).length === 0"
+        class="text-subtitle2 text-grey q-ml-md q-mt-md"
+        data-cy="variable-list-empty"
+      >
+        {{ $t('page.modelizer.drawer.variables.empty') }}
+      </div>
+    </q-list>
+  </q-tab-panel>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { getPluginByName } from 'src/composables/PluginManager';
+
+const route = useRoute();
+const { t } = useI18n();
+const columns = computed(() => [
+  {
+    name: 'name',
+    label: t('page.modelizer.drawer.variables.name'),
+    field: 'name',
+  },
+  {
+    name: 'value',
+    label: t('page.modelizer.drawer.variables.value'),
+    field: 'value',
+  },
+]);
+const variables = ref({});
+
+/**
+ * Retrieve variables from plugin and transform them into the desired formatted object.
+ * @returns {object} - The formatted variables object.
+ */
+function getFormattedVariables() {
+  const plugin = getPluginByName(route.query.plugin);
+  const formattedVariables = {};
+
+  if (!plugin) {
+    return formattedVariables;
+  }
+
+  plugin.data.variables.forEach((variable) => {
+    const { path, category } = variable;
+
+    if (!formattedVariables[path]) {
+      formattedVariables[path] = {};
+    }
+
+    if (!formattedVariables[path][category]) {
+      formattedVariables[path][category] = [];
+    }
+
+    formattedVariables[path][category].push(variable);
+  });
+
+  return formattedVariables;
+}
+
+onMounted(() => {
+  variables.value = getFormattedVariables();
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/components/tab/ComponentsTab.vue b/src/components/tab/ComponentsTab.vue
new file mode 100644
index 000000000..bcaf71309
--- /dev/null
+++ b/src/components/tab/ComponentsTab.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="row flex-1">
+    <q-tabs
+      v-model="currentTab"
+      vertical
+      dense
+      active-color="accent"
+      indicator-color="accent"
+      class="text-grey"
+      style=" border-right: 1px solid rgba(0, 0, 0, .3)"
+    >
+      <q-tab
+        name="components"
+        :label="$t('page.modelizer.drawer.tabs.components')"
+        content-class="left-drawer-tab q-my-md"
+        no-caps
+        data-cy="draw-page-components-tab"
+      />
+      <q-tab
+        name="variables"
+        :label="$t('page.modelizer.drawer.tabs.variables')"
+        content-class="left-drawer-tab q-my-md"
+        no-caps
+        data-cy="draw-page-variables-tab"
+      />
+    </q-tabs>
+    <q-tab-panels
+      v-model="currentTab"
+      animated
+      vertical
+      class="flex-1"
+      transition-prev="jump-up"
+      transition-next="jump-up"
+      :style="`height: calc(100vh - ${offset}px);`"
+    >
+      <components-tab-panel
+        v-if="plugin"
+        name="components"
+        :plugin="plugin"
+      />
+      <variables-tab-panel name="variables" />
+    </q-tab-panels>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+import { getPluginByName } from 'src/composables/PluginManager';
+import { useRoute } from 'vue-router';
+import ComponentsTabPanel from 'components/tab-panel/ComponentsTabPanel.vue';
+import VariablesTabPanel from 'components/tab-panel/VariablesTabPanel.vue';
+
+defineProps({
+  offset: {
+    type: Number,
+    required: true,
+  },
+});
+
+const route = useRoute();
+const currentTab = ref('components');
+const plugin = ref(null);
+
+onMounted(() => {
+  plugin.value = getPluginByName(route.query.plugin);
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/layouts/ModelizerTestLayout.vue b/src/layouts/ModelizerTestLayout.vue
new file mode 100644
index 000000000..947f20666
--- /dev/null
+++ b/src/layouts/ModelizerTestLayout.vue
@@ -0,0 +1,35 @@
+<template>
+  <q-layout view="hHh lpR fFf">
+    <navigation-bar :project-name="projectName" />
+
+    <q-page-container>
+      <modelizer-test-page />
+    </q-page-container>
+
+    <console-footer editor-type="diagram" />
+
+    <git-authentication-dialog :project-name="projectName" />
+    <git-add-remote-dialog :project-name="projectName" />
+    <component-menu-dialog dialog-key="ComponentMenu" />
+    <delete-a-i-conversation-dialog />
+  </q-layout>
+</template>
+
+<script setup>
+import NavigationBar from 'components/NavigationBar.vue';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import ConsoleFooter from 'components/drawer/ConsoleFooter.vue';
+import ModelizerTestPage from 'pages/ModelizerTestPage.vue';
+import DeleteAIConversationDialog from 'components/dialog/DeleteAIConversationDialog.vue';
+import GitAuthenticationDialog from 'components/dialog/GitAuthenticationDialog.vue';
+import GitAddRemoteDialog from 'components/dialog/GitAddRemoteDialog.vue';
+import ComponentMenuDialog from 'components/dialog/ComponentMenuDialog.vue';
+
+const route = useRoute();
+const projectName = computed(() => route.params.projectName);
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/pages/ModelizerTestPage.vue b/src/pages/ModelizerTestPage.vue
new file mode 100644
index 000000000..bc45a9170
--- /dev/null
+++ b/src/pages/ModelizerTestPage.vue
@@ -0,0 +1,466 @@
+<template>
+  <q-page
+    class="row"
+    :style-fn="getOffset"
+  >
+    <div
+      class="column"
+      style="min-width:400px; width: 400px; max-width: 400px;
+        border-right: 1px solid rgba(0, 0, 0, .3)"
+    >
+      <project-details-list
+        :level="2"
+        style="min-height: 200px; max-height: 200px;"
+      />
+      <q-separator />
+      <components-tab :offset="offset + 200" />
+    </div>
+    <q-splitter
+      v-model="splitter"
+      :limits="[25, 100]"
+      separator-class="separator-class"
+      :class="isVisible ? 'flex-1' : 'splitter-invisible flex-1'"
+      :style="`height: calc(100vh - ${offset}px)`"
+    >
+      <template #before>
+        <div
+          id="view-port"
+          data-cy="draw-container"
+          class="column"
+          @dragover.prevent
+          @drop.prevent="dropHandler"
+        />
+
+        <div class="row sticky-actions">
+          <q-btn
+            class="q-mr-md"
+            icon="fa-solid fa-sitemap"
+            :label="$t('page.diagrams.actions.rearrange')"
+            stack
+            no-caps
+            color="white"
+            text-color="primary"
+            data-cy="rearrange-button"
+            @click="arrangeComponentsPosition()"
+          />
+          <q-btn
+            class="q-mr-md"
+            icon="fa-solid fa-image"
+            :label="$t('page.diagrams.actions.export')"
+            stack
+            no-caps
+            color="white"
+            text-color="primary"
+            data-cy="export-button"
+            @click="exportSvg()"
+          />
+          <q-btn
+            v-if="HAS_BACKEND"
+            icon="fa-solid fa-brain"
+            :label="$t('page.diagrams.actions.askAI')"
+            stack
+            no-caps
+            color="white"
+            text-color="primary"
+            data-cy="askAI-button"
+            @click="askAI()"
+          />
+        </div>
+      </template>
+      <template #after>
+        <div
+          v-if="isVisible"
+          style="display: flex; height: 100%; max-height: 100%; overflow-y: auto;"
+        >
+          <a-i-chat-drawer
+            v-if="splitterKey === 'AIChatDrawer'"
+            :project-name="projectName"
+            :diagram-path="diagramPath"
+            :plugin-name="pluginName"
+          />
+          <component-detail-panel
+            v-if="plugin && splitterKey === 'ComponentDetailPanel'"
+            :id="componentId"
+            :plugin="plugin"
+            style="flex-grow: 1; overflow-y: auto;"
+          />
+        </div>
+      </template>
+    </q-splitter>
+  </q-page>
+</template>
+
+<script setup>
+import ProjectDetailsList from 'components/list/ProjectDetailsList.vue';
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  ref,
+} from 'vue';
+import ComponentsTab from 'components/tab/ComponentsTab.vue';
+import AIChatDrawer from 'components/drawer/AIChatDrawer.vue';
+import ComponentDetailPanel from 'components/drawer/ComponentDetailPanel.vue';
+import { useRoute, useRouter } from 'vue-router';
+import {
+  addNewTemplateComponent,
+  getPluginByName,
+  initComponents,
+  renderConfiguration,
+  renderModel,
+} from 'src/composables/PluginManager';
+import LogEvent from 'src/composables/events/LogEvent';
+import DrawerEvent from 'src/composables/events/DrawerEvent';
+import PluginEvent from 'src/composables/events/PluginEvent';
+import { useI18n } from 'vue-i18n';
+import DialogEvent from 'src/composables/events/DialogEvent';
+import { ComponentLink } from '@ditrit/leto-modelizer-plugin-core';
+import FileEvent from 'src/composables/events/FileEvent';
+import { Notify } from 'quasar';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const query = computed(() => route.query);
+const projectName = computed(() => route.params.projectName);
+const diagramPath = computed(() => query.value.path);
+const pluginName = computed(() => query.value.plugin);
+const HAS_BACKEND = computed(() => process.env.HAS_BACKEND);
+const splitter = ref(100);
+const splitterKey = ref('');
+const isVisible = ref(false);
+const componentId = ref('');
+const offset = ref(0);
+const plugin = ref(null);
+
+let pluginDefaultSubscription;
+let pluginRequestSubscription;
+let drawerEventSubscription;
+let aiDrawerNextState = 'open';
+
+function getOffset(value) {
+  offset.value = value;
+
+  return {
+    'min-height': `calc(100vh - ${value}px)`,
+    'max-height': `calc(100vh - ${value}px)`,
+  };
+}
+
+/**
+ * Update plugin, draw components and update component templates array.
+ * @returns {Promise<void>} Promise with nothing on success otherwise an error.
+ */
+async function initView() {
+  plugin.value = getPluginByName(query.value.plugin);
+
+  if (!plugin.value) {
+    return;
+  }
+
+  await Promise.allSettled([
+    initComponents(
+      route.params.projectName,
+      plugin.value,
+      query.value.path,
+    ).then((logs) => {
+      LogEvent.FileLogEvent.next(logs.map((log) => ({
+        ...log,
+        componentName: log.componentId ? plugin.value.data.getComponentById(log.componentId).externalId : '',
+      })));
+      plugin.value.initDrawer('view-port', false);
+      plugin.value.arrangeComponentsPosition(null, true);
+      plugin.value.draw();
+    }),
+  ]);
+}
+
+/**
+ * On 'Drawer' event type, call renderConfiguration if action is 'move',
+ * otherwise call renderModel.
+ * @param {object} eventManager - Object containing event and plugin.
+ * @param {object} eventManager.event - The triggered event.
+ * @returns {Promise<void>} Promise with nothing on success otherwise an error.
+ */
+async function onDefaultEvent({ event }) {
+  const renderModelActions = ['update', 'delete', 'add'];
+  const renderConfigurationActions = ['move', 'resize'];
+
+  if (event.type === 'Drawer') {
+    if (renderConfigurationActions.includes(event.action)) {
+      await renderConfiguration(
+        projectName.value,
+        query.value.path,
+        plugin.value,
+      );
+    } else if (renderModelActions.includes(event.action)) {
+      await renderModel(
+        projectName.value,
+        query.value.path,
+        plugin.value,
+      );
+    } else if (event.action === 'openMenu') {
+      DialogEvent.next({
+        type: 'open',
+        key: 'ComponentMenu',
+        event,
+        pluginName: query.value.plugin,
+      });
+    }
+  }
+}
+
+/**
+ * On request event from ComponentMenuDialog.
+ * @param {object} event - The triggered event.
+ * @returns {Promise<void>} Promise with nothing on success otherwise an error.
+ */
+async function onRequestEvent(event) {
+  let needRender = false;
+  if (event.type === 'fitToContent') {
+    plugin.value.resize(event.id);
+    plugin.value.draw();
+  } else if (event.type === 'arrangeContent') {
+    plugin.value.arrangeComponentsPosition(event.id, false);
+    plugin.value.draw();
+  } else if (event.type === 'delete') {
+    needRender = true;
+    plugin.value.data.removeComponentById(event.id);
+    plugin.value.draw();
+    DrawerEvent.next({
+      type: 'close',
+      key: 'ComponentDetailPanel',
+    });
+  } else if (event.type === 'linkToDefinition') {
+    needRender = true;
+    const componentPath = query.value.path
+      ? `${projectName.value}/${query.value.path}`
+      : projectName.value;
+    const id = plugin.value.addComponent(
+      null,
+      event.data.componentDefinition,
+      componentPath,
+    );
+    const component = plugin.value.data.getComponentById(event.id);
+
+    component.setLinkAttribute(new ComponentLink({
+      source: event.id,
+      target: id,
+      definition: event.data.linkDefinition,
+    }));
+
+    plugin.value.arrangeComponentsPosition(null, true);
+    plugin.value.draw();
+  } else if (event.type === 'linkToComponent') {
+    needRender = true;
+    const component = plugin.value.data.getComponentById(event.id);
+
+    component.setLinkAttribute(new ComponentLink({
+      source: event.id,
+      target: event.data.target,
+      definition: event.data.linkDefinition,
+    }));
+
+    plugin.value.draw();
+  } else if (event.type === 'addComponentToContainer') {
+    needRender = true;
+    const componentPath = query.value.path
+      ? `${projectName.value}/${query.value.path}`
+      : projectName.value;
+    plugin.value.addComponent(
+      event.id,
+      event.data.definition,
+      componentPath,
+    );
+
+    plugin.value.arrangeComponentsPosition(event.id, true);
+    plugin.value.draw();
+  } else if (event.type === 'edit') {
+    DrawerEvent.next({
+      type: 'open',
+      key: 'ComponentDetailPanel',
+      id: event.id,
+    });
+  } else if (event.type === 'select') {
+    const parent = plugin.value.data.getComponentById(event.ids[0]);
+    plugin.value.data.scene.selection = event.ids;
+    plugin.value.data.scene.selectionRef = parent.id;
+    plugin.value.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) {
+    await onDefaultEvent({
+      event: {
+        type: 'Drawer',
+        action: 'update',
+      },
+    });
+  }
+}
+
+/**
+ * Export diagram as svg.
+ */
+function exportSvg() {
+  const content = plugin.value.exportSvg('view-port');
+  const blob = new Blob([content], { type: 'image/svg+xml' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+
+  a.href = url;
+  a.download = 'diagram.svg';
+
+  document.body.appendChild(a);
+
+  a.click();
+
+  document.body.removeChild(a);
+
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Open Drawer and manage reserved height for footer.
+ * @param {object} event - The triggered event.
+ * @param {string} event.key - The key of event.
+ * @param {string} event.type - The type of event, can be 'open' or 'close'.
+ * @param {string} event.id - Id of component.
+ */
+function onDrawerEvent({ key, type, id }) {
+  if (key === 'ConsoleFooter') {
+    return;
+  }
+
+  if (key === 'AIChatDrawer') {
+    aiDrawerNextState = type === 'close' ? 'open' : 'close';
+  }
+  componentId.value = id || null;
+  splitterKey.value = key;
+  isVisible.value = type === 'open';
+  splitter.value = type === 'open' ? 60 : 100;
+}
+
+/**
+ * Instantiate from a dragged component definition or template.
+ * @param {DragEvent} event - The drag event.
+ * @returns {Promise<void>} Promise with nothing on success otherwise an error.
+ */
+async function dropHandler(event) {
+  const dropData = JSON.parse(event.dataTransfer.getData('text/plain'));
+
+  const componentPath = query.value.path
+    ? `${projectName.value}/${query.value.path}`
+    : projectName.value;
+
+  if (!dropData.definition.isTemplate) {
+    plugin.value.addComponent(
+      null,
+      dropData.definition,
+      componentPath,
+      event,
+    );
+    plugin.value.draw();
+  } else {
+    await addNewTemplateComponent(
+      projectName.value,
+      plugin.value,
+      componentPath,
+      dropData.definition,
+    )
+      .then(() => {
+        plugin.value.arrangeComponentsPosition(null, true);
+        plugin.value.draw();
+      })
+      .catch(() => {
+        Notify.create({
+          type: 'negative',
+          message: t('errors.templates.getData'),
+          html: true,
+        });
+      });
+  }
+  await renderModel(
+    projectName.value,
+    query.value.path,
+    plugin.value,
+  );
+}
+
+/**
+ * Rearrange components and then redraw the whole view.
+ */
+async function arrangeComponentsPosition() {
+  plugin.value.arrangeComponentsPosition(null, false);
+  plugin.value.draw();
+
+  await renderConfiguration(
+    projectName.value,
+    query.value.path,
+    plugin.value,
+  );
+}
+
+/**
+ * Open AI drawer.
+ */
+function askAI() {
+  console.log('passe');
+  DrawerEvent.next({
+    type: 'close',
+    key: 'ComponentDetailPanel',
+  });
+  DrawerEvent.next({
+    type: aiDrawerNextState,
+    key: 'AIChatDrawer',
+  });
+}
+
+onMounted(() => {
+  pluginDefaultSubscription = PluginEvent.DefaultEvent.subscribe(onDefaultEvent);
+  pluginRequestSubscription = PluginEvent.RequestEvent.subscribe(onRequestEvent);
+  drawerEventSubscription = DrawerEvent.subscribe(onDrawerEvent);
+  initView();
+});
+
+onUnmounted(() => {
+  pluginDefaultSubscription.unsubscribe();
+  pluginRequestSubscription.unsubscribe();
+  drawerEventSubscription.unsubscribe();
+});
+</script>
+
+<style lang="scss" scoped>
+.sticky-actions {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+}
+</style>
+
+<style lang="scss">
+.left-drawer-tab .q-tab__label {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  transform: rotate(180deg);
+}
+div#view-port, div#view-port svg.scene {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  flex: 1;
+  height: 100%;
+  width: 100%;
+}
+</style>
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 368bd1d65..4c346c9c3 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -1,3 +1,9 @@
-// Currently empty but should be filled by CLI (cf. README)
+import githubatorPlugin from '@ditrit/githubator-plugin';
+import kubernatorPlugin from '@ditrit/kubernator-plugin';
+import terratorPlugin from '@ditrit/terrator-plugin';
 
-export default {};
+export default {
+  githubatorPlugin,
+  kubernatorPlugin,
+  terratorPlugin,
+};
diff --git a/src/router/routes.js b/src/router/routes.js
index 11c77af73..14dee05b0 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -5,6 +5,7 @@ import AboutLayout from 'src/layouts/AboutLayout.vue';
 import HomeLayout from 'src/layouts/HomeLayout.vue';
 import { getProjectById } from 'src/composables/Project';
 import SplashLayout from 'layouts/SplashLayout.vue';
+import ModelizerTestLayout from 'layouts/ModelizerTestLayout.vue';
 
 const routes = [
   {
@@ -29,6 +30,11 @@ const routes = [
         name: 'Draw',
         component: ModelizerDrawLayout,
       },
+      {
+        path: 'modelizer/test',
+        name: 'Draw',
+        component: ModelizerTestLayout,
+      },
       {
         path: 'modelizer/text',
         name: 'Text',