Merge pull request #631 from dmitryyankowski/gql/editor-updates

Minor GraphQL page improvements

lang/en-US.js

@@ -181,6 +181,8 @@ export default {
   loading: "Loading...",
   fetching: "Fetching...",
   waiting_send_req: "(waiting to send request)",
+  waiting_receive_response: "(waiting to receive response)",
+  waiting_receive_schema: "(waiting to receive schema)",
   cancel: "Cancel",
   save: "Save",
   dismiss: "Dismiss",

pages/graphql.vue

@@ -102,8 +102,8 @@
 
         <pw-section class="green" :label="$t('schema')" ref="schema">
           <div class="flex-wrap">
-            <label>{{ $t("response") }}</label>
-            <div>
+            <label>{{ $t("schema") }}</label>
+            <div v-if="schema">
               <button
                 class="icon"
                 @click="ToggleExpandResponse"
@@ -135,11 +135,12 @@
             </div>
           </div>
           <Editor
+            v-if="schema"
             :value="schema"
             :lang="'graphqlschema'"
             :options="{
               maxLines: responseBodyMaxLines,
-              minLines: '16',
+              minLines: 16,
               fontSize: '16px',
               autoScrollEditorIntoView: true,
               readOnly: true,
@@ -147,6 +148,16 @@
               useWorker: false,
             }"
           />
+          <input
+            v-else
+            class="missing-data-response"
+            :value="$t('waiting_receive_schema')"
+            ref="status"
+            id="status"
+            name="status"
+            readonly
+            type="text"
+          />
         </pw-section>
 
         <pw-section class="cyan" :label="$t('query')" ref="query">
@@ -175,7 +186,7 @@
             :onRunGQLQuery="runQuery"
             :options="{
               maxLines: responseBodyMaxLines,
-              minLines: '16',
+              minLines: 10,
               fontSize: '16px',
               autoScrollEditorIntoView: true,
               showPrintMargin: false,
@@ -189,8 +200,8 @@
             v-model="variableString"
             :lang="'json'"
             :options="{
-              maxLines: responseBodyMaxLines,
-              minLines: '16',
+              maxLines: 10,
+              minLines: 5,
               fontSize: '16px',
               autoScrollEditorIntoView: true,
               showPrintMargin: false,
@@ -214,12 +225,13 @@
             </div>
           </div>
           <Editor
+            v-if="response"
             :value="response"
             :lang="'json'"
             :lint="false"
             :options="{
               maxLines: responseBodyMaxLines,
-              minLines: '16',
+              minLines: 10,
               fontSize: '16px',
               autoScrollEditorIntoView: true,
               readOnly: true,
@@ -227,6 +239,16 @@
               useWorker: false,
             }"
           />
+          <input
+            v-else
+            class="missing-data-response"
+            :value="$t('waiting_receive_response')"
+            ref="status"
+            id="status"
+            name="status"
+            readonly
+            type="text"
+          />
         </pw-section>
       </div>
       <aside class="sticky-inner inner-right">

store/state.js

@@ -22,8 +22,13 @@ export default () => ({
     url: "https://rickandmortyapi.com/graphql",
     headers: [],
     schema: "",
-    variablesJSONString: "{}",
-    query: "",
+    variablesJSONString: '{ "id": "1" }',
+    query: `query charcter($id: ID) {
+  character(id: $id) {
+    id
+    name
+  }
+}`,
     response: "",
   },
   theme: {