Merge pull request #71 from mongoosejs/codex/add-button-to-create-new-dashboard

Add Create Dashboard button in chat message

Author: vkarpov15

frontend/src/chat/chat-message-script/chat-message-script.html

@@ -29,6 +29,11 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5" />
         </svg>
       </button>
+      <button
+        class="px-2 py-1 mr-1 text-xs bg-ultramarine-500 text-white border-none rounded cursor-pointer hover:bg-ultramarine-600 transition-colors flex items-center"
+        @click="openCreateDashboardModal">
+        Create Dashboard
+      </button>
       <async-button
         class="px-2 py-1 text-xs bg-green-500 text-white border-none rounded cursor-pointer hover:bg-green-600 transition-colors disabled:bg-gray-400"
         @click="executeScript(message, script)">
@@ -53,4 +58,46 @@
       </div>
     </template>
   </modal>
+  <modal v-if="showCreateDashboardModal">
+    <template #body>
+      <div class="modal-exit" @click="showCreateDashboardModal = false">&times;</div>
+      <div>
+        <div class="mt-4 text-gray-900 font-semibold">Create Dashboard</div>
+        <div class="mt-4">
+          <label class="block text-sm font-medium leading-6 text-gray-900">Title</label>
+          <div class="mt-2">
+            <div class="w-full flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-600">
+              <input type="text" v-model="newDashboardTitle" class="outline-none block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" placeholder="My Dashboard">
+            </div>
+          </div>
+        </div>
+        <div class="my-4">
+          <label class="block text-sm font-medium leading-6 text-gray-900">Code</label>
+          <div class="border border-gray-200">
+            <textarea class="p-2 h-[300px] w-full" ref="dashboardCodeEditor"></textarea>
+          </div>
+        </div>
+        <async-button
+          @click="createDashboardFromScript"
+          class="rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
+          Submit
+        </async-button>
+        <div v-if="createErrors.length > 0" class="rounded-md bg-red-50 p-4 mt-1">
+          <div class="flex">
+            <div class="flex-shrink-0">
+              <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+              </svg>
+            </div>
+            <div class="ml-3">
+              <h3 class="text-sm font-medium text-red-800">Error</h3>
+              <div class="mt-2 text-sm text-red-700">
+                {{createError}}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </modal>
 </div>

frontend/src/chat/chat-message-script/chat-message-script.js

@@ -7,7 +7,17 @@ const vanillatoasts = require('vanillatoasts');
 module.exports = app => app.component('chat-message-script', {
   template,
   props: ['message', 'script', 'language'],
-  data: () => ({ activeTab: 'code', showDetailModal: false }),
+  data() {
+    return {
+      activeTab: 'code',
+      showDetailModal: false,
+      showCreateDashboardModal: false,
+      newDashboardTitle: '',
+      dashboardCode: '',
+      createError: null,
+      dashboardEditor: null
+    };
+  },
   computed: {
     styleForMessage() {
       return this.message.role === 'user' ? 'bg-gray-100' : '';
@@ -25,6 +35,42 @@ module.exports = app => app.component('chat-message-script', {
     openDetailModal() {
       this.showDetailModal = true;
     },
+    openCreateDashboardModal() {
+      this.newDashboardTitle = '';
+      this.dashboardCode = this.script;
+      this.createErrors = [];
+      this.showCreateDashboardModal = true;
+      this.$nextTick(() => {
+        if (this.dashboardEditor) {
+          this.dashboardEditor.toTextArea();
+        }
+        this.$refs.dashboardCodeEditor.value = this.dashboardCode;
+        this.dashboardEditor = CodeMirror.fromTextArea(this.$refs.dashboardCodeEditor, {
+          mode: 'javascript',
+          lineNumbers: true
+        });
+        this.dashboardEditor.on('change', () => {
+          this.dashboardCode = this.dashboardEditor.getValue();
+        });
+      });
+    },
+    async createDashboardFromScript() {
+      this.dashboardCode = this.dashboardEditor.getValue();
+      const { dashboard } = await api.Dashboard.createDashboard({
+        code: this.dashboardCode,
+        title: this.newDashboardTitle
+      }).catch(err => {
+        if (err.response?.data?.message) {
+          const message = err.response.data.message.split(': ').slice(1).join(': ');
+          this.createError = message;
+          throw new Error(err.response?.data?.message);
+        }
+        throw err;
+      });
+      this.createError = null;
+      this.showCreateDashboardModal = false;
+      this.$router.push('/dashboard/' + dashboard._id);
+    },
     async copyOutput() {
       await navigator.clipboard.writeText(this.message.executionResult.output);
       vanillatoasts.create({
@@ -36,6 +82,14 @@ module.exports = app => app.component('chat-message-script', {
       });
     }
   },
+  watch: {
+    showCreateDashboardModal(val) {
+      if (!val && this.dashboardEditor) {
+        this.dashboardEditor.toTextArea();
+        this.dashboardEditor = null;
+      }
+    }
+  },
   mounted() {
     Prism.highlightElement(this.$refs.code);
     if (this.message.executionResult?.output) {