Implement Run query button in DataExplorer.vue

Description

Make use of the new renderer.vue component from #577524 (closed) to query and render the GLQL results after clicking Run query.

Design

Should match the general flow from the video here: #556566 (closed)

Sample diff

diff --git a/ee/app/assets/javascripts/vue_shared/components/data_explorer/data_explorer.vue b/ee/app/assets/javascripts/vue_shared/components/data_explorer/data_explorer.vue
index 800d5b487e12..789742b32548 100644
--- a/ee/app/assets/javascripts/vue_shared/components/data_explorer/data_explorer.vue
+++ b/ee/app/assets/javascripts/vue_shared/components/data_explorer/data_explorer.vue
@@ -5,6 +5,7 @@ import EMPTY_CHART_SVG from '@gitlab/svgs/dist/illustrations/empty-state/empty-c
 import { GlFormTextarea, GlButton, GlCard, GlEmptyState, GlLink } from '@gitlab/ui';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 import { helpPagePath } from '~/helpers/help_page_helper';
+import Renderer from '~/glql/components/common/renderer.vue';
 
 export default {
   name: 'DataExplorer',
@@ -15,17 +16,23 @@ export default {
     GlEmptyState,
     GlLink,
     ModalCopyButton,
+    Renderer,
   },
   glqlDocsLink: helpPagePath('user/glql/_index'),
   EMPTY_CHART_SVG,
   data() {
-    return { query: '' };
+    return { query: '', submittedQuery: '' };
   },
   computed: {
     hasQueryText() {
       return this.query.trim() !== '';
     },
   },
+  methods: {
+    onRunQuery() {
+      this.submittedQuery = this.query;
+    },
+  },
 };
 </script>
 
@@ -53,13 +60,15 @@ export default {
     </div>
 
     <div>
-      <gl-button variant="confirm" icon="play" :disabled="!hasQueryText">{{
+      <gl-button variant="confirm" icon="play" :disabled="!hasQueryText" @click="onRunQuery">{{
         s__('DataExplorer|Run query')
       }}</gl-button>
     </div>
 
     <gl-card>
+      <renderer v-if="submittedQuery" :query="submittedQuery" />
       <gl-empty-state
+        v-else
         :title="s__('DataExplorer|Preview not available')"
         :description="s__('DataExplorer|Start by typing a GLQL query.')"
         :svg-path="$options.EMPTY_CHART_SVG"