feat: 🎸 start testing button clicking

apps/studio/src/components/ConnectionInterface.vue

@@ -27,6 +27,8 @@
               <ImportButton :config="config">
                 Import from URL
               </ImportButton>
+              <!-- DEV ONLY: remove once share-query flow is verified -->
+              <ShareQueryTestButton />
             </div>
             <error-alert :error="errors" title="Please fix the following errors" />
             <form @action="submit" v-if="config">
@@ -249,6 +251,7 @@ import SurrealDbForm from './connection/SurrealDBForm.vue'
 import RedisForm from './connection/RedisForm.vue'
 import Split from 'split.js'
 import ImportButton from './connection/ImportButton.vue'
+import ShareQueryTestButton from './connection/ShareQueryTestButton.vue'
 import LoadingSSOModal from '@/components/common/modals/LoadingSSOModal.vue'
 import _ from 'lodash'
 import ErrorAlert from './common/ErrorAlert.vue'
@@ -269,7 +272,7 @@ const log = rawLog.scope('ConnectionInterface')
 // import ImportUrlForm from './connection/ImportUrlForm';
 
 export default Vue.extend({
-  components: { ConnectionSidebar, MysqlForm, PostgresForm, RedshiftForm, CassandraForm, Sidebar, SqliteForm, SqlServerForm, SaveConnectionForm, ImportButton, ErrorAlert, OracleForm, BigQueryForm, FirebirdForm, UpsellContent, LibSqlForm: LibSQLForm, LoadingSsoModal: LoadingSSOModal, ClickHouseForm, TrinoForm, MongoDbForm, DuckDbForm, SqlAnywhereForm, RedisForm,
+  components: { ConnectionSidebar, MysqlForm, PostgresForm, RedshiftForm, CassandraForm, Sidebar, SqliteForm, SqlServerForm, SaveConnectionForm, ImportButton, ShareQueryTestButton, ErrorAlert, OracleForm, BigQueryForm, FirebirdForm, UpsellContent, LibSqlForm: LibSQLForm, LoadingSsoModal: LoadingSSOModal, ClickHouseForm, TrinoForm, MongoDbForm, DuckDbForm, SqlAnywhereForm, RedisForm,
     ContentPlaceholderHeading, SurrealDbForm
   },
 

apps/studio/src/components/connection/ShareQueryTestButton.vue

@@ -0,0 +1,85 @@
+<!-- DEV ONLY: remove once share-query flow is verified -->
+<template>
+  <div class="share-query-test-button">
+    <a
+      class="btn btn-link btn-small"
+      href="#"
+      @click.prevent="open"
+    >Test Share Query</a>
+
+    <portal to="modals">
+      <modal
+        class="vue-dialog beekeeper-modal"
+        name="share-query-test-modal"
+        height="auto"
+        :scrollable="true"
+        @opened="$refs.urlInput.focus()"
+      >
+        <form
+          v-kbd-trap="true"
+          @submit.prevent="submit"
+        >
+          <div class="dialog-content">
+            <div class="dialog-c-title">
+              Test Share Query
+            </div>
+            <div class="form-group">
+              <label>db param</label>
+              <input class="form-control" type="text" v-model="db" placeholder="parsed from URL">
+            </div>
+            <div class="form-group">
+              <label>query param</label>
+              <input class="form-control" type="text" v-model="query" placeholder="parsed from URL">
+            </div>
+            <div v-if="result" class="alert alert-info" style="word-break: break-all; white-space: pre-wrap;">
+              {{ JSON.stringify(result, null, 2) }}
+            </div>
+            <div v-if="error" class="alert alert-danger">
+              {{ error }}
+            </div>
+          </div>
+          <div class="vue-dialog-buttons">
+            <button class="btn btn-flat" type="button" @click.prevent="close">
+              Cancel
+            </button>
+            <button class="btn btn-primary" type="submit" :disabled="!db && !query">
+              Send
+            </button>
+          </div>
+        </form>
+      </modal>
+    </portal>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      db: '',
+      query: '',
+      result: null,
+      error: null,
+    }
+  },
+  methods: {
+    open() {
+      this.result = null
+      this.error = null
+      this.$modal.show('share-query-test-modal')
+    },
+    close() {
+      this.$modal.hide('share-query-test-modal')
+    },
+    async submit() {
+      this.result = null
+      this.error = null
+      try {
+        this.result = await this.$store.dispatch('openSharedQuery', { db: this.db, query: this.query })
+      } catch (e) {
+        this.error = e?.message || String(e)
+      }
+    }
+  }
+}
+</script>