From 4de55c39dd08e6e95dc07d4986fe89a03c5e8c63 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 24 Jul 2021 14:10:28 +0530
Subject: [PATCH] refactor: graphql page to new ui

---
 components/http/CodegenModal.vue |   4 +-
 components/http/Tests.vue        |  36 +-
 components/realtime/Mqtt.vue     |   1 -
 components/realtime/Socketio.vue |   1 -
 components/smart/AceEditor.vue   |   2 +-
 lang/en-US.json                  |   6 +-
 pages/documentation.vue          |   2 +-
 pages/graphql.vue                | 700 +++++++++++++++++--------------
 pages/index.vue                  |   2 +-
 9 files changed, 422 insertions(+), 332 deletions(-)

diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 4db41ff2e..07dc14939 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -71,8 +71,8 @@
           :value="requestCode"
           :lang="codegens.find((x) => x.id === codegenType).language"
           :options="{
-            maxLines: '10',
-            minLines: '10',
+            maxLines: '16',
+            minLines: '8',
             fontSize: '14px',
             autoScrollEditorIntoView: true,
             readOnly: true,
diff --git a/components/http/Tests.vue b/components/http/Tests.vue
index e8bf69f6e..14cef3ea4 100644
--- a/components/http/Tests.vue
+++ b/components/http/Tests.vue
@@ -39,16 +39,7 @@
     <div v-if="testResults">
       <div class="flex flex-1 pl-4 items-center justify-between">
         <div>
-          <label class="font-semibold text-xs"> Test Report: </label>
-          <span class="font-semibold text-xs text-red-500">
-            {{ failedTests }} failing,
-          </span>
-          <span class="font-semibold text-xs text-green-500">
-            {{ passedTests }} successful,
-          </span>
-          <span class="font-semibold text-xs text-secondaryDark">
-            out of {{ totalTests }} tests.
-          </span>
+          <label class="font-semibold text-xs"> Test Report </label>
         </div>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -57,7 +48,30 @@
           @click.native="clearContent()"
         />
       </div>
-      <HttpTestResult v-if="testResults" :results="testResults" />
+      <div class="flex my-4 items-center">
+        <div class="ml-4">
+          <span class="font-semibold text-xs text-red-500">
+            {{ failedTests }} failing,
+          </span>
+          <span class="font-semibold text-xs text-green-500">
+            {{ passedTests }} successful,
+          </span>
+          <span class="font-semibold text-xs">
+            out of {{ totalTests }} tests.
+          </span>
+        </div>
+        <div class="bg-primaryDark flex space-x-2 flex-1 h-1 mx-4 relative">
+          <div
+            class="rounded h-full bg-green-500"
+            :style="`width: ${(passedTests / totalTests) * 100 + '%'}`"
+          ></div>
+          <div
+            class="rounded h-full bg-red-500"
+            :style="`width: ${(failedTests / totalTests) * 100 + '%'}`"
+          ></div>
+        </div>
+      </div>
+      <HttpTestResult :results="testResults" />
     </div>
   </AppSection>
 </template>
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 47f61f6d3..34739c1c6 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -73,7 +73,6 @@
         <div>
           <ButtonSecondary
             id="publish"
-            class="button"
             name="get"
             :disabled="!canpublish"
             icon="send"
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 91eaba15a..9c0aa26b7 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -115,7 +115,6 @@
           <div v-if="index + 1 === communication.inputs.length">
             <ButtonSecondary
               id="send"
-              class="button"
               name="send"
               :disabled="!connectionState"
               icon="send"
diff --git a/components/smart/AceEditor.vue b/components/smart/AceEditor.vue
index 18c2f6ad7..7414eed3f 100644
--- a/components/smart/AceEditor.vue
+++ b/components/smart/AceEditor.vue
@@ -2,7 +2,7 @@
   <div class="show-if-initialized" :class="{ initialized }">
     <pre ref="editor" :class="styles"></pre>
     <div
-      v-if="lang == 'json'"
+      v-if="provideJSONOutline"
       class="
         bg-primaryLight
         border-t border-divider
diff --git a/lang/en-US.json b/lang/en-US.json
index a1ddadea2..9e6418512 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -193,7 +193,8 @@
   "upload_file": "Upload file",
   "copy_response": "Copy response",
   "copy_code": "Copy code",
-  "copy_schema": "Copy Schema",
+  "copy_schema": "Copy schema",
+  "copy_variables": "Copy variables",
   "use_request": "Use request",
   "documentation": "Documentation",
   "docs": "Docs",
@@ -350,5 +351,6 @@
   "telemetry": "Telemetry",
   "shortcuts_indicator": "Shortcuts indicator",
   "zen_mode": "Zen mode",
-  "notifications": "Notifications"
+  "notifications": "Notifications",
+  "connect_graphql_endpoint": "Connect to a GraphQL endpoint"
 }
diff --git a/pages/documentation.vue b/pages/documentation.vue
index dc87700d4..6e9b7ab92 100644
--- a/pages/documentation.vue
+++ b/pages/documentation.vue
@@ -109,7 +109,7 @@
         min-size="20"
         class="overflow-auto hide-scrollbar"
       >
-        <aside class="lg:max-w-md">
+        <aside>
           <Collections
             :selected="selected"
             :doc="true"
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 9d231ebf9..05188c0a0 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -4,327 +4,341 @@
       <Pane class="overflow-auto hide-scrollbar">
         <Splitpanes horizontal :dbl-click-splitter="false">
           <Pane class="overflow-auto hide-scrollbar">
-            <AppSection label="endpoint">
-              <div class="bg-primary flex p-4 top-0 z-10 sticky">
-                <div class="flex-1 inline-flex">
-                  <input
-                    id="url"
-                    v-model="url"
-                    type="url"
-                    spellcheck="false"
-                    class="
-                      bg-primaryLight
-                      border border-divider
-                      rounded-l
-                      font-semibold font-mono
-                      text-secondaryDark
-                      w-full
-                      py-1
-                      px-4
-                      transition
-                      truncate
-                      focus:outline-none focus:border-accent
-                    "
-                    :placeholder="$t('url')"
-                    @keyup.enter="onPollSchemaClick()"
-                  />
-                  <ButtonPrimary
-                    id="get"
-                    name="get"
-                    :icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
-                    :label="!isPollingSchema ? $t('connect') : $t('disconnect')"
-                    class="rounded-l-none"
-                    @click.native="onPollSchemaClick"
-                  />
-                </div>
+            <div class="bg-primary flex p-4 top-0 z-20 sticky">
+              <div class="flex-1 inline-flex">
+                <input
+                  id="url"
+                  v-model="url"
+                  type="url"
+                  spellcheck="false"
+                  class="
+                    bg-primaryLight
+                    border border-divider
+                    rounded-l
+                    font-semibold font-mono
+                    text-secondaryDark
+                    w-full
+                    py-1
+                    px-4
+                    transition
+                    truncate
+                    focus:outline-none focus:border-accent
+                  "
+                  :placeholder="$t('url')"
+                  @keyup.enter="onPollSchemaClick()"
+                />
+                <ButtonPrimary
+                  id="get"
+                  name="get"
+                  :icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
+                  :label="!isPollingSchema ? $t('connect') : $t('disconnect')"
+                  class="rounded-l-none"
+                  @click.native="onPollSchemaClick"
+                />
               </div>
-            </AppSection>
-            <AppSection label="headers">
+            </div>
+            <SmartTabs styles="sticky top-68px z-10">
+              <SmartTab :id="'query'" :label="$t('query')" :selected="true">
+                <AppSection label="query">
+                  <div
+                    class="
+                      bg-primary
+                      border-b border-dividerLight
+                      flex flex-1
+                      pl-4
+                      top-108px
+                      z-10
+                      sticky
+                      items-center
+                      justify-between
+                      gqlRunQuery
+                    "
+                  >
+                    <label for="gqlQuery" class="font-semibold text-xs">
+                      {{ $t("query") }}
+                    </label>
+                    <div>
+                      <ButtonSecondary
+                        :label="$t('run_query')"
+                        :shortcut="[getSpecialKey(), 'Enter']"
+                        icon="play_arrow"
+                        @click.native="runQuery()"
+                      />
+                      <ButtonSecondary
+                        v-tippy="{ theme: 'tooltip' }"
+                        :title="$t('copy_query')"
+                        :icon="copyQueryIcon"
+                        @click.native="copyQuery"
+                      />
+                      <ButtonSecondary
+                        v-tippy="{ theme: 'tooltip' }"
+                        :title="`${$t(
+                          'prettify_query'
+                        )} (${getSpecialKey()}-P)`"
+                        :icon="prettifyQueryIcon"
+                        @click.native="prettifyQuery"
+                      />
+                      <ButtonSecondary
+                        ref="saveRequest"
+                        v-tippy="{ theme: 'tooltip' }"
+                        :title="$t('save_to_collections')"
+                        icon="create_new_folder"
+                        @click.native="saveRequest"
+                      />
+                    </div>
+                  </div>
+                  <GraphqlQueryEditor
+                    ref="queryEditor"
+                    v-model="gqlQueryString"
+                    :on-run-g-q-l-query="runQuery"
+                    :options="{
+                      maxLines: Infinity,
+                      minLines: '16',
+                      fontSize: '14px',
+                      autoScrollEditorIntoView: true,
+                      showPrintMargin: false,
+                      useWorker: false,
+                    }"
+                    @update-query="updateQuery"
+                  />
+                </AppSection>
+              </SmartTab>
+
+              <SmartTab :id="'variables'" :label="$t('variables')">
+                <AppSection label="variables">
+                  <div
+                    class="
+                      bg-primary
+                      border-b border-dividerLight
+                      flex flex-1
+                      pl-4
+                      top-108px
+                      z-10
+                      sticky
+                      items-center
+                      justify-between
+                    "
+                  >
+                    <label class="font-semibold text-xs">
+                      {{ $t("variables") }}
+                    </label>
+                    <div>
+                      <ButtonSecondary
+                        v-tippy="{ theme: 'tooltip' }"
+                        :title="$t('copy_variables')"
+                        :icon="copyVariablesIcon"
+                        @click.native="copyVariables"
+                      />
+                      <!-- <ButtonSecondary
+                        v-tippy="{ theme: 'tooltip' }"
+                        :title="`${$t(
+                          'prettify_variables'
+                        )} (${getSpecialKey()}-P)`"
+                        :icon="prettifyVariablesIcon"
+                        @click.native="prettifyVariables"
+                      /> -->
+                    </div>
+                  </div>
+                  <SmartAceEditor
+                    ref="variableEditor"
+                    v-model="variableString"
+                    :lang="'json'"
+                    :options="{
+                      maxLines: Infinity,
+                      minLines: '16',
+                      fontSize: '14px',
+                      autoScrollEditorIntoView: true,
+                      showPrintMargin: false,
+                      useWorker: false,
+                    }"
+                  />
+                </AppSection>
+              </SmartTab>
+
+              <SmartTab :id="'headers'" :label="$t('headers')">
+                <AppSection label="headers">
+                  <div
+                    class="
+                      bg-primary
+                      border-b border-dividerLight
+                      flex flex-1
+                      pl-4
+                      top-108px
+                      z-10
+                      sticky
+                      items-center
+                      justify-between
+                    "
+                  >
+                    <label class="font-semibold text-xs">{{
+                      $t("headers")
+                    }}</label>
+                    <div>
+                      <ButtonSecondary
+                        v-tippy="{ theme: 'tooltip' }"
+                        :title="$t('clear')"
+                        icon="clear_all"
+                        @click.native="headers = []"
+                      />
+                      <ButtonSecondary
+                        v-tippy="{ theme: 'tooltip' }"
+                        :title="$t('add_new')"
+                        icon="add"
+                        @click.native="addRequestHeader"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    v-for="(header, index) in headers"
+                    :key="`header-${index}`"
+                    class="
+                      divide-x divide-dashed divide-divider
+                      border-b border-dashed border-divider
+                      flex
+                    "
+                    :class="{ 'border-t': index == 0 }"
+                  >
+                    <SmartAutoComplete
+                      :placeholder="$t('header_count', { count: index + 1 })"
+                      :source="commonHeaders"
+                      :spellcheck="false"
+                      :value="header.key"
+                      autofocus
+                      @input="
+                        $store.commit('setGQLHeaderKey', {
+                          index,
+                          value: $event,
+                        })
+                      "
+                    />
+                    <input
+                      class="
+                        bg-primaryLight
+                        flex
+                        font-semibold font-mono
+                        flex-1
+                        text-xs
+                        py-2
+                        px-4
+                        focus:outline-none
+                      "
+                      :placeholder="$t('value_count', { count: index + 1 })"
+                      :name="`value ${index}`"
+                      :value="header.value"
+                      autofocus
+                      @change="
+                        $store.commit('setGQLHeaderValue', {
+                          index,
+                          value: $event.target.value,
+                        })
+                      "
+                    />
+                    <div>
+                      <ButtonSecondary
+                        v-tippy="{ theme: 'tooltip' }"
+                        :title="
+                          header.hasOwnProperty('active')
+                            ? header.active
+                              ? $t('turn_off')
+                              : $t('turn_on')
+                            : $t('turn_off')
+                        "
+                        :icon="
+                          header.hasOwnProperty('active')
+                            ? header.active
+                              ? 'check_box'
+                              : 'check_box_outline_blank'
+                            : 'check_box'
+                        "
+                        @click.native="
+                          $store.commit('setActiveGQLHeader', {
+                            index,
+                            value: header.hasOwnProperty('active')
+                              ? !header.active
+                              : false,
+                          })
+                        "
+                      />
+                    </div>
+                    <div>
+                      <ButtonSecondary
+                        v-tippy="{ theme: 'tooltip' }"
+                        :title="$t('delete')"
+                        icon="delete"
+                        @click.native="removeRequestHeader(index)"
+                      />
+                    </div>
+                  </div>
+                </AppSection>
+              </SmartTab>
+            </SmartTabs>
+          </Pane>
+          <Pane class="overflow-auto hide-scrollbar">
+            <AppSection ref="response" label="response">
               <div
+                v-if="response"
                 class="
                   bg-primary
                   border-b border-dividerLight
                   flex flex-1
                   pl-4
-                  top-68px
+                  top-0
                   z-10
                   sticky
                   items-center
                   justify-between
                 "
               >
-                <label class="font-semibold text-xs">{{ $t("headers") }}</label>
+                <label class="font-semibold text-xs" for="responseField">
+                  {{ $t("response") }}
+                </label>
                 <div>
                   <ButtonSecondary
-                    v-tippy="{ theme: 'tooltip' }"
-                    :title="$t('clear')"
-                    icon="clear_all"
-                    @click.native="headers = []"
-                  />
-                  <ButtonSecondary
-                    v-tippy="{ theme: 'tooltip' }"
-                    :title="$t('add_new')"
-                    icon="add"
-                    @click.native="addRequestHeader"
-                  />
-                </div>
-              </div>
-              <div
-                v-for="(header, index) in headers"
-                :key="`header-${index}`"
-                class="
-                  divide-x divide-dashed divide-divider
-                  border-b border-dashed border-divider
-                  flex
-                "
-                :class="{ 'border-t': index == 0 }"
-              >
-                <SmartAutoComplete
-                  :placeholder="$t('header_count', { count: index + 1 })"
-                  :source="commonHeaders"
-                  :spellcheck="false"
-                  :value="header.key"
-                  autofocus
-                  @input="
-                    $store.commit('setGQLHeaderKey', {
-                      index,
-                      value: $event,
-                    })
-                  "
-                />
-                <input
-                  class="
-                    bg-primaryLight
-                    flex
-                    font-semibold font-mono
-                    flex-1
-                    text-xs
-                    py-2
-                    px-4
-                    focus:outline-none
-                  "
-                  :placeholder="$t('value_count', { count: index + 1 })"
-                  :name="`value ${index}`"
-                  :value="header.value"
-                  autofocus
-                  @change="
-                    $store.commit('setGQLHeaderValue', {
-                      index,
-                      value: $event.target.value,
-                    })
-                  "
-                />
-                <div>
-                  <ButtonSecondary
-                    v-tippy="{ theme: 'tooltip' }"
-                    :title="
-                      header.hasOwnProperty('active')
-                        ? header.active
-                          ? $t('turn_off')
-                          : $t('turn_on')
-                        : $t('turn_off')
-                    "
-                    :icon="
-                      header.hasOwnProperty('active')
-                        ? header.active
-                          ? 'check_box'
-                          : 'check_box_outline_blank'
-                        : 'check_box'
-                    "
-                    @click.native="
-                      $store.commit('setActiveGQLHeader', {
-                        index,
-                        value: header.hasOwnProperty('active')
-                          ? !header.active
-                          : false,
-                      })
-                    "
-                  />
-                </div>
-                <div>
-                  <ButtonSecondary
-                    v-tippy="{ theme: 'tooltip' }"
-                    :title="$t('delete')"
-                    icon="delete"
-                    @click.native="removeRequestHeader(index)"
-                  />
-                </div>
-              </div>
-            </AppSection>
-            <AppSection label="query">
-              <div class="flex flex-1 gqlRunQuery">
-                <label for="gqlQuery">{{ $t("query") }}</label>
-                <div>
-                  <ButtonSecondary
-                    v-tippy="{ theme: 'tooltip' }"
-                    :title="`${$t('run_query')} (${getSpecialKey()}-Enter)`"
-                    class="button"
-                    icon="play_arrow"
-                    @click.native="runQuery()"
-                  />
-                  <ButtonSecondary
-                    ref="copyQueryButton"
-                    v-tippy="{ theme: 'tooltip' }"
-                    :title="$t('copy_query')"
-                    :icon="copyQueryIcon"
-                    @click.native="copyQuery"
-                  />
-                  <ButtonSecondary
-                    v-tippy="{ theme: 'tooltip' }"
-                    :title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
-                    :icon="prettifyIcon"
-                    @click.native="doPrettifyQuery"
-                  />
-                  <ButtonSecondary
-                    ref="saveRequest"
-                    v-tippy="{ theme: 'tooltip' }"
-                    :title="$t('save_to_collections')"
-                    icon="create_new_folder"
-                    @click.native="saveRequest"
-                  />
-                </div>
-              </div>
-              <GraphqlQueryEditor
-                ref="queryEditor"
-                v-model="gqlQueryString"
-                styles="rounded-b-lg"
-                :on-run-g-q-l-query="runQuery"
-                :options="{
-                  maxLines: Infinity,
-                  minLines: 10,
-                  fontSize: '14px',
-                  autoScrollEditorIntoView: true,
-                  showPrintMargin: false,
-                  useWorker: false,
-                }"
-                @update-query="updateQuery"
-              />
-            </AppSection>
-            <AppSection label="variables">
-              <div class="flex flex-col">
-                <label>{{ $t("variables") }}</label>
-                <SmartAceEditor
-                  v-model="variableString"
-                  :lang="'json'"
-                  :options="{
-                    maxLines: 10,
-                    minLines: 5,
-                    fontSize: '14px',
-                    autoScrollEditorIntoView: true,
-                    showPrintMargin: false,
-                    useWorker: false,
-                  }"
-                  styles="rounded-b-lg"
-                />
-              </div>
-            </AppSection>
-          </Pane>
-          <Pane class="overflow-auto hide-scrollbar">
-            <AppSection ref="schema" label="schema">
-              <div class="flex flex-1">
-                <label>{{ $t("schema") }}</label>
-                <div v-if="schema">
-                  <ButtonSecondary
-                    ref="ToggleExpandResponse"
-                    v-tippy="{ theme: 'tooltip' }"
-                    :title="
-                      !expandResponse
-                        ? $t('expand_response')
-                        : $t('collapse_response')
-                    "
-                    :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
-                    @click.native="ToggleExpandResponse"
-                  />
-                  <ButtonSecondary
-                    ref="downloadSchema"
+                    ref="downloadResponse"
                     v-tippy="{ theme: 'tooltip' }"
                     :title="$t('download_file')"
-                    :icon="downloadSchemaIcon"
-                    @click.native="downloadSchema"
+                    :icon="downloadResponseIcon"
+                    @click.native="downloadResponse"
                   />
                   <ButtonSecondary
-                    ref="copySchemaCode"
+                    ref="copyResponseButton"
                     v-tippy="{ theme: 'tooltip' }"
-                    :title="$t('copy_schema')"
-                    :icon="copySchemaIcon"
-                    @click.native="copySchema"
+                    :title="$t('copy_response')"
+                    :icon="copyResponseIcon"
+                    @click.native="copyResponse"
                   />
                 </div>
               </div>
               <SmartAceEditor
-                v-if="schema"
-                :value="schema"
-                :lang="'graphqlschema'"
+                v-if="response"
+                :value="response"
+                :lang="'json'"
+                :lint="false"
                 :options="{
                   maxLines: Infinity,
-                  minLines: 16,
+                  minLines: '16',
                   fontSize: '14px',
                   autoScrollEditorIntoView: true,
                   readOnly: true,
                   showPrintMargin: false,
                   useWorker: false,
                 }"
-                styles="rounded-b-lg"
               />
-              <input
+              <div
                 v-else
-                ref="status"
-                class="rounded-b-lg input missing-data-response"
-                :value="$t('waiting_receive_schema')"
-                name="status"
-                readonly
-                type="text"
-              />
-            </AppSection>
-            <AppSection ref="response" label="response">
-              <div class="flex flex-col">
-                <label>{{ $t("response") }}</label>
-                <div class="flex flex-1">
-                  <label for="responseField">{{ $t("response_body") }}</label>
-                  <div>
-                    <ButtonSecondary
-                      v-if="response"
-                      ref="downloadResponse"
-                      v-tippy="{ theme: 'tooltip' }"
-                      :title="$t('download_file')"
-                      :icon="downloadResponseIcon"
-                      @click.native="downloadResponse"
-                    />
-                    <ButtonSecondary
-                      v-if="response"
-                      ref="copyResponseButton"
-                      v-tippy="{ theme: 'tooltip' }"
-                      :title="$t('copy_response')"
-                      :icon="copyResponseIcon"
-                      @click.native="copyResponse"
-                    />
-                  </div>
-                </div>
-                <SmartAceEditor
-                  v-if="response"
-                  :value="response"
-                  :lang="'json'"
-                  :lint="false"
-                  :options="{
-                    maxLines: Infinity,
-                    minLines: 10,
-                    fontSize: '14px',
-                    autoScrollEditorIntoView: true,
-                    readOnly: true,
-                    showPrintMargin: false,
-                    useWorker: false,
-                  }"
-                  styles="rounded-b-lg"
-                />
-                <input
-                  v-else
-                  ref="status"
-                  class="rounded-b-lg input missing-data-response"
-                  :value="$t('waiting_receive_response')"
-                  name="status"
-                  readonly
-                  type="text"
-                />
+                class="
+                  flex flex-col flex-1
+                  text-secondaryLight
+                  py-8
+                  px-4
+                  items-center
+                  justify-center
+                "
+              >
+                <i class="opacity-50 pb-2 material-icons">send</i>
+                <span class="text-xs text-center">
+                  {{ $t("waiting_send_req") }}
+                </span>
               </div>
             </AppSection>
           </Pane>
@@ -337,7 +351,7 @@
         min-size="20"
         class="overflow-auto hide-scrollbar"
       >
-        <aside class="lg:max-w-md">
+        <aside>
           <SmartTabs styles="sticky z-10 top-0">
             <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
               <AppSection label="docs">
@@ -445,9 +459,9 @@
                     justify-center
                   "
                 >
-                  <i class="opacity-50 pb-2 material-icons">description</i>
+                  <i class="opacity-50 pb-2 material-icons">link</i>
                   <span class="text-xs text-center">
-                    {{ $t("send_request_first") }}
+                    {{ $t("connect_graphql_endpoint") }}
                   </span>
                 </div>
               </AppSection>
@@ -464,6 +478,74 @@
             <SmartTab :id="'collections'" :label="$t('collections')">
               <CollectionsGraphql />
             </SmartTab>
+
+            <SmartTab :id="'schema'" :label="`Schema`">
+              <AppSection ref="schema" label="schema">
+                <div
+                  v-if="schema"
+                  class="
+                    bg-primary
+                    border-b border-dividerLight
+                    flex flex-1
+                    pl-4
+                    top-10
+                    z-10
+                    sticky
+                    items-center
+                    justify-between
+                  "
+                >
+                  <label class="font-semibold text-xs">
+                    {{ $t("schema") }}
+                  </label>
+                  <div>
+                    <ButtonSecondary
+                      ref="downloadSchema"
+                      v-tippy="{ theme: 'tooltip' }"
+                      :title="$t('download_file')"
+                      :icon="downloadSchemaIcon"
+                      @click.native="downloadSchema"
+                    />
+                    <ButtonSecondary
+                      ref="copySchemaCode"
+                      v-tippy="{ theme: 'tooltip' }"
+                      :title="$t('copy_schema')"
+                      :icon="copySchemaIcon"
+                      @click.native="copySchema"
+                    />
+                  </div>
+                </div>
+                <SmartAceEditor
+                  v-if="schema"
+                  :value="schema"
+                  :lang="'graphqlschema'"
+                  :options="{
+                    maxLines: Infinity,
+                    minLines: '16',
+                    fontSize: '14px',
+                    autoScrollEditorIntoView: true,
+                    readOnly: true,
+                    showPrintMargin: false,
+                    useWorker: false,
+                  }"
+                />
+                <div
+                  v-else
+                  class="
+                    flex flex-col
+                    text-secondaryLight
+                    p-4
+                    items-center
+                    justify-center
+                  "
+                >
+                  <i class="opacity-50 pb-2 material-icons">link</i>
+                  <span class="text-xs text-center">
+                    {{ $t("connect_graphql_endpoint") }}
+                  </span>
+                </div>
+              </AppSection>
+            </SmartTab>
           </SmartTabs>
         </aside>
       </Pane>
@@ -513,9 +595,9 @@ export default defineComponent({
       copyQueryIcon: "content_copy",
       copySchemaIcon: "content_copy",
       copyResponseIcon: "content_copy",
-      prettifyIcon: "photo_filter",
-      expandResponse: false,
-      responseBodyMaxLines: 16,
+      copyVariablesIcon: "content_copy",
+      prettifyQueryIcon: "photo_filter",
+      // prettifyVariablesIcon: "photo_filter",
       graphqlFieldsFilterText: undefined,
       isPollingSchema: false,
       timeoutSubscription: null,
@@ -728,11 +810,16 @@ export default defineComponent({
       })
     },
     getSpecialKey: getPlatformSpecialKey,
-    doPrettifyQuery() {
+    prettifyQuery() {
       this.$refs.queryEditor.prettifyQuery()
-      this.prettifyIcon = "done"
-      setTimeout(() => (this.prettifyIcon = "photo_filter"), 1000)
+      this.prettifyQueryIcon = "done"
+      setTimeout(() => (this.prettifyQueryIcon = "photo_filter"), 1000)
     },
+    // prettifyVariables() {
+    //   this.$refs.variableEditor.prettifyQuery()
+    //   this.prettifyVariablesIcon = "done"
+    //   setTimeout(() => (this.prettifyVariablesIcon = "photo_filter"), 1000)
+    // },
     async handleJumpToType(type) {
       this.$refs.gqlTabs.selectTab(this.$refs.typesTab)
       await this.$nextTick()
@@ -766,6 +853,11 @@ export default defineComponent({
       this.copyResponseIcon = "done"
       setTimeout(() => (this.copyResponseIcon = "content_copy"), 1000)
     },
+    copyVariables() {
+      this.copyToClipboard(this.variableString)
+      this.copyVariablesIcon = "done"
+      setTimeout(() => (this.copyVariablesIcon = "content_copy"), 1000)
+    },
     copyToClipboard(content) {
       const aux = document.createElement("textarea")
       aux.innerText = content
@@ -1088,11 +1180,6 @@ export default defineComponent({
         console.log("Error", error)
       }
     },
-    ToggleExpandResponse() {
-      this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines =
-        this.responseBodyMaxLines === Infinity ? 16 : Infinity
-    },
     downloadResponse() {
       const dataToWrite = this.response
       const file = new Blob([dataToWrite], { type: "application/json" })
@@ -1166,14 +1253,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style scoped lang="scss">
-.gqlTabs {
-  @apply relative;
-  @apply overflow-auto;
-}
-
-.gqlRunQuery {
-  @apply mb-8;
-}
-</style>
diff --git a/pages/index.vue b/pages/index.vue
index 86b3ff79f..3c30c95da 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -269,7 +269,7 @@
         min-size="20"
         class="overflow-auto hide-scrollbar"
       >
-        <aside class="h-full">
+        <aside>
           <SmartTabs styles="sticky z-10 top-0">
             <SmartTab :id="'history'" :label="$t('history')" :selected="true">
               <History :page="'rest'" ref="historyComponent" />