open graphql ide button

Author: ivanov17andrey

dist/assets/css/widgets.css

@@ -1,6 +1,6 @@
 {
   "name": "widgets",
-  "version": "1.3.9",
+  "version": "1.3.10",
   "description": "",
   "main": "dist/widgets.js",
   "directories": {
@@ -25,7 +25,6 @@
     "css-loader": "^3.2.0",
     "file-loader": "^4.2.0",
     "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.14.1",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
@@ -47,6 +46,7 @@
     "numeral": "^2.0.6",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
+    "sass": "^1.42.1",
     "vue": "^2.6.10",
     "vue-google-charts": "^0.3.2",
     "vue-i18n": "^8.15.0"

dist/widgets.js

@@ -7,7 +7,11 @@
             <nodata v-else-if="is_no_data" :options="options"></nodata>
             <component :is="componentName" :data="data" :variables="variables" :options="options" :theme="theme" :context="context" :componentName="componentName" v-else></component>
         </div>
-        <links :obj="componentName" :func="func" :exclude="exclude" :title="title"></links>
+<!--        <links :obj="componentName" :func="func" :exclude="exclude" :title="title"></links>-->
+        <div style="margin-top: 5px;float: right; cursor: pointer;">
+          <a v-on:click="handleOpenIde" class="badge badge-secondary open-btn">Open GraphQL IDE</a>
+        </div>
+
     </div>
 </template>
 <script>
@@ -24,7 +28,7 @@
                 context: context,
                 theme: context.themes[context.theme],
                 variables: context.query.variables,
-                data: this.$parent._data
+                data: this.$parent._data,
             }
         },
         computed: {
@@ -34,6 +38,29 @@
             is_no_data: function(){
                 return Array.isArray(this.data.result) && this.data.result.length < 1;
             }
+        },
+        methods: {
+          handleOpenIde: function() {
+            fetch(this.data.ideUrl, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                Accept: 'application/json',
+              },
+              body: JSON.stringify({
+                query: this.context.query.query,
+                variables: JSON.stringify(this.context.query.variables),
+              }),
+            })
+                .then((res) => {
+                  if (res.status === 200 || res.status === 302) {
+                    window.open(res.url, '_blank').focus()
+                    // res.redirect(302, res.url)
+                  } else {
+                    console.log(res.message)
+                  }
+                })
+          }
         }
     }
 </script>

package-lock.json

@@ -145,9 +145,9 @@ let props = {
     }
 };
 
-export function init(url, apikey, options = {}){
-    options['url'] = url;
-    options['apikey'] = apikey;
+export function init(graphqlUrl, ideUrl, options = {}){
+    options['graphqlUrl'] = graphqlUrl;
+    options['ideUrl'] = ideUrl;
     props = _.merge(props, options);
     // apollo = new ApolloClient({uri: options['url']});
     return props
@@ -172,10 +172,7 @@ export function query(query, schema = undefined){
         // apollo = new ApolloClient({uri: props['url'], cache});
     } else {
         apollo = new ApolloClient({
-          uri: props['url'],
-          headers: {
-            'X-API-KEY': props['apikey']
-          },
+          uri: props['graphqlUrl'],
         });
     }
 
@@ -284,7 +281,8 @@ export function component(name, funcName, selector, query, path, options={},init
                         locale: it.vmi18n.locale,
                         path: it.path,
                         result: result_data,
-                        errors: _.get(query.errors, '', query.errors)
+                        errors: _.get(query.errors, '', query.errors),
+                        ideUrl: props['ideUrl']
                     },
                     render: h => h(Components['base'])
                 });

package.json

@@ -3,6 +3,7 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const path = require('path')
 
 module.exports = function(paths){
     return {
@@ -13,6 +14,7 @@ module.exports = function(paths){
         },
         output: {
             filename: '[name].js',
+            // path: path.resolve(__dirname, '../explorer/app/javascript/packs'),
             // globalObject: 'this',
             libraryTarget: 'window',
             library: '[name]'