From a1eac2f3489bfd90278e4e50187f3c7145cffc48 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 30 Jul 2021 21:06:25 +0530
Subject: [PATCH] refactor: cleanup documentation page

---
 components/collections/my/Request.vue    |   2 +-
 components/collections/teams/Request.vue |   2 +-
 lang/en-US.json                          |   4 +-
 pages/documentation.vue                  | 280 ++++++++++++++---------
 4 files changed, 171 insertions(+), 117 deletions(-)

diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index b83ea320b..2721dd361 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -50,7 +50,7 @@
         <span class="truncate"> {{ request.name }} </span>
       </span>
       <ButtonSecondary
-        v-if="!saveRequest"
+        v-if="!saveRequest && !doc"
         v-tippy="{ theme: 'tooltip' }"
         icon="replay"
         :title="$t('restore')"
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index a2814cdfa..77c1a3f0e 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -43,7 +43,7 @@
         <span class="truncate"> {{ request.name }} </span>
       </span>
       <ButtonSecondary
-        v-if="!saveRequest"
+        v-if="!saveRequest && !doc"
         v-tippy="{ theme: 'tooltip' }"
         icon="replay"
         :title="$t('restore')"
diff --git a/lang/en-US.json b/lang/en-US.json
index fcd274438..57f56811b 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -203,8 +203,8 @@
   "variable_count": "Variable {count}",
   "value_count": "Value {count}",
   "send_request_first": "Send a request first",
-  "generate_docs": "Generate Documentation",
-  "generate_docs_message": "Import any Hoppscotch Collection to Generate Documentation on-the-go.",
+  "generate_docs": "Generate documentation",
+  "generate_docs_message": "Import any Hoppscotch collection to generate API documentation on-the-go.",
   "generate_docs_first": "Generate documentation first",
   "docs_generated": "Documentation generated",
   "import_collections": "Import collections",
diff --git a/pages/documentation.vue b/pages/documentation.vue
index 0da0ffcb6..206a2b884 100644
--- a/pages/documentation.vue
+++ b/pages/documentation.vue
@@ -1,125 +1,179 @@
 <template>
-  <div>
-    <Splitpanes :dbl-click-splitter="false" vertical>
-      <Pane class="hide-scrollbar !overflow-auto">
-        <Splitpanes :dbl-click-splitter="false" horizontal>
-          <Pane class="hide-scrollbar !overflow-auto">
-            <AppSection label="import">
-              <div class="flex flex-col">
-                <label>{{ $t("collection") }}</label>
-                <p>
-                  {{ $t("generate_docs_message") }}
-                </p>
-                <div class="flex flex-1">
-                  <label for="collectionUpload">
-                    <ButtonSecondary
-                      v-tippy="{ theme: 'tooltip' }"
-                      title="JSON"
-                      icon="folder"
-                      :label="$t('import_collections')"
-                      @click.native="$refs.collectionUpload.click()"
-                    />
-                  </label>
-                  <input
-                    ref="collectionUpload"
-                    class="input"
-                    name="collectionUpload"
-                    type="file"
-                    @change="uploadCollection"
-                  />
-                  <div>
-                    <ButtonSecondary
-                      v-tippy="{ theme: 'tooltip' }"
-                      :title="$t('clear')"
-                      icon="clear_all"
-                      @click.native="collectionJSON = '[]'"
-                    />
-                  </div>
-                </div>
-                <SmartAceEditor
-                  v-model="collectionJSON"
-                  :lang="'json'"
-                  :lint="false"
-                  :options="{
-                    maxLines: 16,
-                    minLines: 8,
-                    fontSize: '12px',
-                    autoScrollEditorIntoView: true,
-                    showPrintMargin: false,
-                    useWorker: false,
-                  }"
-                />
+  <Splitpanes :dbl-click-splitter="false" vertical>
+    <Pane class="hide-scrollbar !overflow-auto">
+      <Splitpanes :dbl-click-splitter="false" horizontal>
+        <Pane class="hide-scrollbar !overflow-auto">
+          <AppSection label="import">
+            <div class="flex p-4 items-start justify-between">
+              <label class="font-semibold">
+                {{ $t("generate_docs_message") }}
+              </label>
+              <span
+                class="
+                  bg-accentLight
+                  rounded
+                  font-semibold
+                  text-primary
+                  py-1
+                  px-2
+                  inline-flex
+                "
+              >
+                BETA
+              </span>
+            </div>
+            <div
+              class="
+                bg-primary
+                border-b border-dividerLight
+                flex
+                top-0
+                z-10
+                items-start
+                justify-between
+                sticky
+              "
+            >
+              <label for="collectionUpload" class="font-semibold">
                 <ButtonSecondary
-                  icon="topic"
-                  :label="$t('generate_docs')"
-                  @click.native="getDoc"
+                  v-tippy="{ theme: 'tooltip' }"
+                  title="JSON"
+                  icon="folder"
+                  :label="$t('import_collections')"
+                  @click.native="$refs.collectionUpload.click()"
                 />
-              </div>
-            </AppSection>
-          </Pane>
-          <Pane class="hide-scrollbar !overflow-auto">
-            <AppSection label="documentation">
-              <div class="flex flex-col">
-                <label>{{ $t("documentation") }}</label>
-                <p v-if="items.length === 0">
+              </label>
+              <input
+                ref="collectionUpload"
+                class="input"
+                name="collectionUpload"
+                type="file"
+                @change="uploadCollection"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('clear')"
+                icon="clear_all"
+                @click.native="collectionJSON = '[]'"
+              />
+            </div>
+            <SmartAceEditor
+              v-model="collectionJSON"
+              :lang="'json'"
+              :lint="false"
+              :options="{
+                maxLines: Infinity,
+                minLines: 16,
+                fontSize: '12px',
+                autoScrollEditorIntoView: true,
+                showPrintMargin: false,
+                useWorker: false,
+              }"
+            />
+            <div
+              class="
+                bg-primary
+                flex
+                p-4
+                bottom-0
+                z-10
+                justify-between
+                items-start
+                sticky
+              "
+            >
+              <ButtonPrimary
+                :label="$t('generate_docs')"
+                @click.native="getDoc"
+              />
+            </div>
+          </AppSection>
+        </Pane>
+        <Pane class="hide-scrollbar !overflow-auto">
+          <AppSection label="documentation">
+            <div class="flex flex-col">
+              <div
+                v-if="items.length === 0"
+                class="
+                  flex flex-col
+                  text-secondaryLight
+                  p-4
+                  items-center
+                  justify-center
+                "
+              >
+                <i class="opacity-75 pb-2 material-icons">topic</i>
+                <span class="text-center">
                   {{ $t("generate_docs_first") }}
-                </p>
-                <div v-else class="flex flex-1">
-                  <div
-                    v-tippy="{ theme: 'tooltip' }"
-                    :title="
+                </span>
+              </div>
+              <div
+                v-else
+                class="
+                  bg-primary
+                  border-b border-dividerLight
+                  flex flex-1
+                  p-4
+                  top-0
+                  z-10
+                  sticky
+                "
+              >
+                <div
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="
+                    !currentUser
+                      ? `${$t('login_with_github_to')} ${$t(
+                          'create_secret_gist'
+                        ).toLowerCase()}`
+                      : currentUser.provider !== 'github.com'
+                      ? `${$t('login_with_github_to')} ${$t(
+                          'create_secret_gist'
+                        ).toLowerCase()}`
+                      : 'Beta'
+                  "
+                >
+                  <ButtonPrimary
+                    :disabled="
                       !currentUser
-                        ? $t('login_with_github_to') + $t('create_secret_gist')
+                        ? true
                         : currentUser.provider !== 'github.com'
-                        ? $t('login_with_github_to') + $t('create_secret_gist')
-                        : null
+                        ? true
+                        : false
                     "
-                  >
-                    <ButtonSecondary
-                      :disabled="
-                        !currentUser
-                          ? true
-                          : currentUser.provider !== 'github.com'
-                          ? true
-                          : false
-                      "
-                      icon="assignment"
-                      label="$t('create_secret_gist')"
-                      @click.native="createDocsGist"
-                    />
-                  </div>
-                </div>
-                <div>
-                  <span
-                    v-for="(collection, index) in items"
-                    :key="`collection-${index}`"
-                  >
-                    <DocsCollection :collection="collection" />
-                  </span>
+                    :label="$t('create_secret_gist')"
+                    @click.native="createDocsGist"
+                  />
                 </div>
               </div>
-            </AppSection>
-          </Pane>
-        </Splitpanes>
-      </Pane>
-      <Pane
-        v-if="RIGHT_SIDEBAR"
-        max-size="35"
-        size="25"
-        min-size="20"
-        class="hide-scrollbar !overflow-auto"
-      >
-        <aside>
-          <Collections
-            :selected="selected"
-            :doc="true"
-            @use-collection="useSelectedCollection($event)"
-            @remove-collection="removeSelectedCollection($event)"
-          />
-        </aside>
-      </Pane>
-    </Splitpanes>
-  </div>
+              <div
+                v-for="(collection, index) in items"
+                :key="`collection-${index}`"
+              >
+                <DocsCollection :collection="collection" />
+              </div>
+            </div>
+          </AppSection>
+        </Pane>
+      </Splitpanes>
+    </Pane>
+    <Pane
+      v-if="RIGHT_SIDEBAR"
+      max-size="35"
+      size="25"
+      min-size="20"
+      class="hide-scrollbar !overflow-auto"
+    >
+      <aside>
+        <Collections
+          :selected="selected"
+          :doc="true"
+          @use-collection="useSelectedCollection($event)"
+          @remove-collection="removeSelectedCollection($event)"
+        />
+      </aside>
+    </Pane>
+  </Splitpanes>
 </template>
 
 <script>