feat: improve documentation UI and add published docs indicators (hoppscotch#5620)

Co-authored-by: mirarifhasan <[email protected]>

Author: nivedin

packages/hoppscotch-backend/src/auth/auth.module.ts

@@ -34,6 +34,10 @@ import { InfraConfigModule } from 'src/infra-config/infra-config.module';
 })
 export class AuthModule {
   static async register() {
+    if (process.env.GENERATE_GQL_SCHEMA === 'true') {
+      return { module: AuthModule };
+    }
+
     const isInfraConfigPopulated = await isInfraConfigTablePopulated();
     if (!isInfraConfigPopulated) {
       return { module: AuthModule };

packages/hoppscotch-backend/src/published-docs/published-docs.resolver.ts

@@ -119,8 +119,9 @@ export class PublishedDocsResolver {
       name: 'collectionID',
       type: () => ID,
       description: 'Id of the collection to add to',
+      nullable: true,
     })
-    collectionID: string,
+    collectionID: string | undefined,
     @Args() args: OffsetPaginationArgs,
   ) {
     const docs = await this.publishedDocsService.getAllTeamPublishedDocs(

packages/hoppscotch-backend/src/published-docs/published-docs.service.spec.ts

@@ -23,7 +23,6 @@ import {
 import { TeamAccessRole } from 'src/team/team.model';
 import { TreeLevel } from './published-docs.dto';
 import { ConfigService } from '@nestjs/config';
-import { right } from 'fp-ts/lib/EitherT';
 
 const mockPrisma = mockDeep<PrismaService>();
 const mockUserCollectionService = mockDeep<UserCollectionService>();

packages/hoppscotch-backend/src/published-docs/published-docs.service.ts

@@ -23,7 +23,6 @@ import { OffsetPaginationArgs } from 'src/types/input-types.args';
 import { stringToJson } from 'src/utils';
 import { UserCollectionService } from 'src/user-collection/user-collection.service';
 import { TeamCollectionService } from 'src/team-collection/team-collection.service';
-import { CollectionFolder } from 'src/types/CollectionFolder';
 import { GetPublishedDocsQueryDto, TreeLevel } from './published-docs.dto';
 import { ConfigService } from '@nestjs/config';
 
@@ -275,7 +274,7 @@ export class PublishedDocsService {
    */
   async getAllTeamPublishedDocs(
     teamID: string,
-    collectionID: string,
+    collectionID: string | undefined,
     args: OffsetPaginationArgs,
   ) {
     const docs = await this.prisma.publishedDocs.findMany({

packages/hoppscotch-backend/src/user-collection/user-collection.resolver.ts

@@ -18,7 +18,6 @@ import {
   UserCollection,
   UserCollectionDuplicatedData,
   UserCollectionExportJSONData,
-  UserCollectionImportResult,
   UserCollectionRemovedData,
   UserCollectionReorderData,
 } from './user-collections.model';

packages/hoppscotch-common/locales/en.json

@@ -41,6 +41,7 @@
     "more": "More",
     "new": "New",
     "no": "No",
+    "open": "Open",
     "open_workspace": "Open workspace",
     "paste": "Paste",
     "prettify": "Prettify",
@@ -69,6 +70,7 @@
     "turn_off": "Turn off",
     "turn_on": "Turn on",
     "undo": "Undo",
+    "unpublish": "Unpublish",
     "yes": "Yes",
     "verify": "Verify",
     "enable": "Enable",
@@ -504,13 +506,15 @@
       "auto_sync_description": "Automatically update published docs when collection changes",
       "button": "Publish",
       "copy_url": "Copy URL",
-      "delete_published_doc": "Are you sure you want to delete the published documentation?",
+      "delete": "Delete Documentation",
+      "unpublish_doc": "Are you sure you want to unpublish the documentation?",
       "delete_success": "Published documentation deleted successfully",
       "doc_title": "Title",
       "doc_version": "Version",
       "edit_published_doc": "Edit Published Doc",
       "last_updated": "Last Updated",
       "metadata": "Metadata (JSON)",
+      "open_published_doc": "Open Published Documentation in new tab",
       "publish_error": "Failed to publish documentation",
       "publish_success": "Documentation published successfully!",
       "published": "Published",
@@ -520,6 +524,7 @@
       "update_error": "Failed to update documentation",
       "update_published_docs": "Update Published Docs",
       "update_success": "Documentation updated successfully!",
+      "unpublish": "Unpublish",
       "update_title": "Update Published Documentation",
       "url_copied": "URL copied to clipboard!",
       "view_published": "View Published Docs",

packages/hoppscotch-common/src/components/collections/Collection.vue

@@ -76,8 +76,18 @@
                 }"
               />
             </span>
+            <!-- Published Doc Status Indicator -->
+            <span
+              v-if="publishedDocStatus"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('documentation.publish.published')"
+              class="ml-2 flex items-center"
+            >
+              <component :is="IconGlobe" class="svg-icons text-green-500" />
+            </span>
           </span>
         </div>
+
         <div
           v-if="isCollectionLoading && !isOpen"
           class="flex items-center px-2"
@@ -179,6 +189,19 @@
                       }
                     "
                   />
+                  <HoppSmartItem
+                    v-if="isDocumentationVisible"
+                    ref="documentationAction"
+                    :icon="IconBook"
+                    :label="t('documentation.title')"
+                    :shortcut="['I']"
+                    @click="
+                      () => {
+                        handleDocumentationAction()
+                        hide()
+                      }
+                    "
+                  />
                   <HoppSmartItem
                     v-if="
                       !hasNoTeamAccess &&
@@ -250,19 +273,7 @@
                       }
                     "
                   />
-                  <HoppSmartItem
-                    v-if="isDocumentationVisible"
-                    ref="documentationAction"
-                    :icon="IconBook"
-                    :label="t('documentation.title')"
-                    :shortcut="['I']"
-                    @click="
-                      () => {
-                        handleDocumentationAction()
-                        hide()
-                      }
-                    "
-                  />
+
                   <HoppSmartItem
                     ref="propertiesAction"
                     :icon="IconSettings2"
@@ -346,6 +357,8 @@ import { useMockServerStatus } from "~/composables/mockServer"
 import { useMockServerVisibility } from "~/composables/mockServerVisibility"
 import { platform } from "~/platform"
 import { invokeAction } from "~/helpers/actions"
+import { DocumentationService } from "~/services/documentation.service"
+import IconGlobe from "~icons/lucide/globe"
 
 type CollectionType = "my-collections" | "team-collections"
 type FolderType = "collection" | "folder"
@@ -500,6 +513,19 @@ const mockServerStatus = computed(() => {
   return getMockServerStatus(collectionId || "")
 })
 
+// Published Doc Status
+const documentationService = useService(DocumentationService)
+
+const publishedDocStatus = computed(() => {
+  const collectionId =
+    props.collectionsType === "my-collections"
+      ? ((props.data as HoppCollection).id ??
+        (props.data as HoppCollection)._ref_id)
+      : (props.data as TeamCollection).id
+
+  return documentationService.getPublishedDocStatus(collectionId || "")
+})
+
 // Determine if this is a root collection (not a child folder)
 const isRootCollection = computed(() => {
   return props.folderType === "collection"

packages/hoppscotch-common/src/components/collections/MyCollections.vue

@@ -875,18 +875,13 @@ const updateCollectionOrder = (
 }
 
 const debouncedSorting = useDebounceFn(() => {
-  sortCollection()
-}, 250)
-
-const sortCollection = () => {
   currentSortOrder.value = currentSortOrder.value === "asc" ? "desc" : "asc"
-
   emit("sort-collections", {
     collectionID: null,
     sortOrder: currentSortOrder.value,
     collectionRefID: "personal",
   })
-}
+}, 250)
 
 type MyCollectionNode = Collection | Folder | Requests
 

packages/hoppscotch-common/src/components/collections/documentation/MarkdownEditor.vue

@@ -1,11 +1,15 @@
 <template>
-  <div class="rounded-sm relative h-full" @click.stop>
+  <div
+    v-if="!(readOnly && isEmpty)"
+    class="rounded-sm relative h-full"
+    @click.stop
+  >
     <!-- Edit mode textarea -->
     <template v-if="editMode && !readOnly">
       <textarea
         ref="textareaRef"
         v-model="internalContent"
-        class="text-wrap w-full p-4 rounded-sm text-sm font-mono text-secondaryLight outline-none resize-none focus:border focus:border-accent focus:bg-primaryLight transition"
+        class="text-wrap w-full p-4 rounded-sm text-sm font-mono text-secondary outline-none resize-none focus:border focus:border-accent focus:bg-primaryLight transition placeholder:text-secondaryLight"
         :style="{ height: textareaHeight + 'px' }"
         spellcheck="false"
         :placeholder="placeholder"
@@ -74,6 +78,11 @@ const textareaHeight = ref<number>(200)
 // Internal content that syncs with modelValue
 const internalContent = ref<string>(props.modelValue)
 
+// Check if the content is empty
+const isEmpty = computed(
+  () => !internalContent.value || internalContent.value.trim() === ""
+)
+
 // Watch for external changes to modelValue
 watch(
   () => props.modelValue,
@@ -88,7 +97,7 @@ watch(
 // Render markdown content with DOMPurify sanitization
 const renderedMarkdown = computed(() => {
   try {
-    if (!internalContent.value || internalContent.value.trim() === "") {
+    if (isEmpty.value) {
       return DOMPurify.sanitize(
         `<p class='text-secondaryLight italic'>${props.placeholder || t("documentation.add_description_placeholder")}</p>`
       )
@@ -201,7 +210,7 @@ onMounted(() => {
 /* List styles */
 .markdown-content :deep(ul),
 .markdown-content :deep(ol) {
-  @apply pl-6 my-3 text-sm text-secondaryLight space-y-1;
+  @apply pl-6 my-3 text-sm text-secondary space-y-1;
 }
 
 .markdown-content :deep(li > ul),
@@ -252,7 +261,7 @@ onMounted(() => {
 }
 
 .markdown-content :deep(td) {
-  @apply border border-divider px-3 py-1 text-secondaryLight;
+  @apply border border-divider px-3 py-1 text-secondary;
   @apply bg-primaryDark;
 }
 

packages/hoppscotch-common/src/components/collections/documentation/PublishDocModal.vue

@@ -70,21 +70,56 @@
               input-styles="floating-input"
               class="flex-1 opacity-80 cursor-not-allowed"
             />
-            <HoppButtonSecondary :icon="copyIcon" outline @click="copyUrl" />
+            <HoppButtonSecondary
+              v-if="publishedUrl"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('documentation.publish.copy_url')"
+              :icon="copyIcon"
+              outline
+              @click="copyUrl"
+            />
+            <HoppButtonPrimary
+              v-if="(mode === 'view' || mode === 'update') && publishedUrl"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('documentation.publish.open_published_doc')"
+              :label="t('action.open')"
+              :icon="IconExternalLink"
+              @click="viewPublished"
+            />
           </div>
         </div>
+      </div>
+    </template>
 
-        <div class="flex space-x-2">
+    <template #footer>
+      <div class="flex justify-between items-center flex-1">
+        <div class="flex items-center w-full space-x-2">
           <HoppButtonPrimary
-            v-if="mode === 'view' || mode === 'update'"
-            :label="t('documentation.publish.view_published')"
-            :icon="IconExternalLink"
-            @click="viewPublished"
+            v-if="mode === 'create' && !publishedUrl"
+            :label="t('documentation.publish.button')"
+            :disabled="!canPublish || loading"
+            :loading="loading"
+            @click="handlePublish"
+          />
+          <HoppButtonPrimary
+            v-else-if="mode === 'update'"
+            :label="t('documentation.publish.update_button')"
+            :disabled="!canPublish || loading || !hasChanges"
+            :loading="loading"
+            @click="handleUpdate"
           />
+          <HoppButtonSecondary
+            :label="t('action.cancel')"
+            outline
+            filled
+            @click="hideModal"
+          />
+        </div>
+        <div class="flex">
           <HoppButtonSecondary
             v-if="mode === 'update'"
             :icon="IconTrash2"
-            label="Delete Documentation"
+            :label="t('documentation.publish.unpublish')"
             class="!text-red-500"
             :loading="loading"
             :disabled="loading"
@@ -95,37 +130,12 @@
         </div>
       </div>
     </template>
-
-    <template #footer>
-      <div class="flex justify-between items-center w-full">
-        <HoppButtonSecondary
-          :label="t('action.cancel')"
-          outline
-          filled
-          @click="hideModal"
-        />
-        <HoppButtonPrimary
-          v-if="mode === 'create' && !publishedUrl"
-          :label="t('documentation.publish.button')"
-          :disabled="!canPublish || loading"
-          :loading="loading"
-          @click="handlePublish"
-        />
-        <HoppButtonPrimary
-          v-else-if="mode === 'update'"
-          :label="t('documentation.publish.update_button')"
-          :disabled="!canPublish || loading || !hasChanges"
-          :loading="loading"
-          @click="handleUpdate"
-        />
-      </div>
-    </template>
   </HoppSmartModal>
 
   <HoppSmartConfirmModal
     :show="showDeleteConfirmModal"
-    :title="t('documentation.publish.delete_published_doc')"
-    :confirm="t('action.delete')"
+    :title="t('documentation.publish.unpublish_doc')"
+    :confirm="t('action.unpublish')"
     :loading-state="loading"
     @hide-modal="showDeleteConfirmModal = false"
     @resolve="confirmDelete"