GraphiQL Playground must not be available on GET /api on production b…

…y default #582

build.gradle

@@ -37,9 +37,9 @@ dependencies {
 
     include "com.enonic.xp:lib-portal:${xpVersion}"
     include "com.enonic.xp:lib-event:${xpVersion}"
+    include "com.enonic.xp:lib-app:${xpVersion}"
     include "com.enonic.lib:lib-mustache:2.1.1"
     include "com.enonic.lib:lib-static:1.0.3"
-    include "com.enonic.lib:lib-router:3.1.0"
 
     testImplementation 'org.mockito:mockito-core:5.7.0'
     testImplementation 'org.mockito:mockito-junit-jupiter:5.7.0'

gradle.properties

@@ -4,6 +4,6 @@
 group=com.enonic.app
 projectName=guillotine
 appName=com.enonic.app.guillotine
-xpVersion=7.12.1
+xpVersion=7.14.0-SNAPSHOT
 version=7.0.0-SNAPSHOT
 

src/main/resources/api/api.js

@@ -2,6 +2,9 @@
 
 const eventLib = require('/lib/xp/event');
 const corsLib = require('/lib/cors');
+const mustacheLib = require('/lib/mustache');
+const staticLib = require('/lib/enonic/static');
+const appLib = require('/lib/xp/app');
 
 const graphQLApi = __.newBean('com.enonic.app.guillotine.graphql.GraphQLApi');
 const syncExecutor = __.newBean('com.enonic.app.guillotine.Synchronizer');
@@ -46,10 +49,49 @@ exports.options = function (req) {
     }
 };
 
+const getStatic = staticLib.buildGetter(
+    {
+        root: 'assets',
+        getCleanPath: request => {
+            return request.rawPath.split('/_static/')[1];
+        },
+        cacheControl: 'no-cache',
+        etag: true,
+    }
+);
+
+function shouldBeRendered(reg) {
+    const isSDK = appLib.get({
+        key: 'com.enonic.xp.app.welcome',
+    }) !== null;
+    const queryPlaygroundUIMode = app.config['queryplayground.ui.mode'];
+    const uiCanBeRendered = isSDK ? (queryPlaygroundUIMode === 'on' || queryPlaygroundUIMode === 'auto') : queryPlaygroundUIMode === 'on';
+    return !reg.webSocket && uiCanBeRendered;
+}
+
 exports.get = function (req) {
-    return {
-        status: 404
-    };
+    if (!shouldBeRendered(req)) {
+        return {
+            status: 404,
+        }
+    } else {
+        if (req.rawPath.indexOf('/_static/') !== -1) { // TODO lib router
+            return getStatic(req);
+        }
+
+        const view = resolve('api.html');
+
+        const params = {
+            wsUrl: req.url.replace('http', 'ws'),
+            handlerUrl: req.url,
+        };
+
+        return {
+            status: 200,
+            contentType: 'text/html',
+            body: mustacheLib.render(view, params)
+        };
+    }
 }
 
 exports.post = function (req) {

src/main/resources/assets/js/query-playground.tsx

@@ -1,10 +1,8 @@
 import {GraphiQL} from 'graphiql';
 import {createGraphiQLFetcher} from '@graphiql/toolkit';
 import * as React from 'react';
-import {useState} from 'react';
 import * as ReactDOM from 'react-dom';
 import {createClient} from 'graphql-ws';
-import {Button, ButtonGroup} from '@graphiql/react';
 
 const DEFAULT_QUERY = `# Welcome to Query Playground
 #
@@ -21,8 +19,6 @@ query {
 }
 `;
 
-let currentBranch = 'master';
-
 function getRootContainer() {
     return document.getElementById('graphiql-container-wrapper');
 }
@@ -33,10 +29,10 @@ function getDataConfig() {
 
 function createFetcher() {
     return createGraphiQLFetcher({
-        url: `${getDataConfig().configHandlerUrl}/${currentBranch}`,
+        url: `${getDataConfig().configHandlerUrl}`,
         wsClient: createClient(
             {
-                url: `${getRootContainer().dataset.configWsUrl}/${currentBranch}`,
+                url: `${getRootContainer().dataset.configWsUrl}`,
             }),
     });
 }
@@ -53,45 +49,11 @@ function rerenderGraphiQLUI() {
     renderGraphiQLUI();
 }
 
-function BranchChooser() {
-    const [branch, setBranch] = useState(currentBranch);
-
-    const handleOnClick = (event, selectedBranch) => {
-        currentBranch = selectedBranch;
-        setBranch(selectedBranch);
-
-        rerenderGraphiQLUI();
-    };
-
-    return (
-        <ButtonGroup>
-            <Button
-                type="button"
-                className={branch === 'draft' ? 'active' : ''}
-                onClick={(event) => handleOnClick(event, 'draft')}
-            >
-                Draft
-            </Button>
-            <Button
-                type="button"
-                className={branch === 'master' ? 'active' : ''}
-                onClick={(event) => handleOnClick(event, 'master')}
-            >
-                Master
-            </Button>
-        </ButtonGroup>
-    );
-}
-
 function QueryPlayground() {
     return (
         <GraphiQL fetcher={createFetcher()}
                   defaultQuery={DEFAULT_QUERY}
-        >
-            <GraphiQL.Logo>
-                <BranchChooser/>
-            </GraphiQL.Logo>
-        </GraphiQL>
+        />
     );
 }