feat: embeds (#3627)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-common/src/helpers/backend/gql/mutations/CreateShortcode.graphql

@@ -1,5 +1,5 @@
-mutation CreateShortcode($request: String!) {
-  createShortcode(request: $request) {
+mutation CreateShortcode($request: String!, $properties: String) {
+  createShortcode(request: $request, properties: $properties) {
     id
     request
     createdOn

packages/hoppscotch-common/src/helpers/backend/gql/mutations/UpdateEmbedProperties.graphql

@@ -0,0 +1,8 @@
+mutation UpdateEmbedProperties($code: ID!, $properties: String!) {
+  updateEmbedProperties(code: $code, properties: $properties) {
+    id
+    request
+    properties
+    createdOn
+  }
+}

packages/hoppscotch-common/src/helpers/backend/gql/queries/ResolveShortcode.graphql

@@ -2,5 +2,6 @@ query ResolveShortcode($code: ID!) {
   shortcode(code: $code) {
     id
     request
+    properties
   }
-}
+}

packages/hoppscotch-common/src/helpers/backend/gql/subscriptions/ShortcodeUpdated.graphql

@@ -0,0 +1,8 @@
+subscription ShortcodeUpdated {
+  myShortcodesUpdated {
+    id
+    request
+    createdOn
+    properties
+  }
+}

packages/hoppscotch-common/src/helpers/backend/mutations/Shortcode.ts

@@ -7,15 +7,22 @@ import {
   DeleteShortcodeDocument,
   DeleteShortcodeMutation,
   DeleteShortcodeMutationVariables,
+  UpdateEmbedPropertiesDocument,
+  UpdateEmbedPropertiesMutation,
+  UpdateEmbedPropertiesMutationVariables,
 } from "../graphql"
 
 type DeleteShortcodeErrors = "shortcode/not_found"
 
-export const createShortcode = (request: HoppRESTRequest) =>
+export const createShortcode = (
+  request: HoppRESTRequest,
+  properties?: string
+) =>
   runMutation<CreateShortcodeMutation, CreateShortcodeMutationVariables, "">(
     CreateShortcodeDocument,
     {
       request: JSON.stringify(request),
+      properties,
     }
   )
 
@@ -27,3 +34,13 @@ export const deleteShortcode = (code: string) =>
   >(DeleteShortcodeDocument, {
     code,
   })
+
+export const updateEmbedProperties = (code: string, properties: string) =>
+  runMutation<
+    UpdateEmbedPropertiesMutation,
+    UpdateEmbedPropertiesMutationVariables,
+    ""
+  >(UpdateEmbedPropertiesDocument, {
+    code,
+    properties,
+  })

packages/hoppscotch-common/src/helpers/shortcode/Shortcode.ts

@@ -4,6 +4,6 @@
 export interface Shortcode {
   id: string
   request: string
-  properties?: string | null | undefined
+  properties?: string | null
   createdOn: Date
 }

packages/hoppscotch-common/src/helpers/shortcode/ShortcodeListAdapter.ts

@@ -11,6 +11,7 @@ import {
   GetUserShortcodesDocument,
   ShortcodeCreatedDocument,
   ShortcodeDeletedDocument,
+  ShortcodeUpdatedDocument,
 } from "../backend/graphql"
 import { BACKEND_PAGE_SIZE } from "../backend/helpers"
 import { Shortcode } from "./Shortcode"
@@ -25,9 +26,11 @@ export default class ShortcodeListAdapter {
 
   private shortcodeCreated: Subscription | null
   private shortcodeRevoked: Subscription | null
+  private shortcodeUpdated: Subscription | null
 
   private shortcodeCreatedSub: WSubscription | null
   private shortcodeRevokedSub: WSubscription | null
+  private shortcodeUpdatedSub: WSubscription | null
 
   constructor(deferInit = false) {
     this.error$ = new BehaviorSubject<GQLError<string> | null>(null)
@@ -39,8 +42,10 @@ export default class ShortcodeListAdapter {
     this.isDispose = true
     this.shortcodeCreated = null
     this.shortcodeRevoked = null
+    this.shortcodeUpdated = null
     this.shortcodeCreatedSub = null
     this.shortcodeRevokedSub = null
+    this.shortcodeUpdatedSub = null
 
     if (!deferInit) this.initialize()
   }
@@ -48,8 +53,10 @@ export default class ShortcodeListAdapter {
   unsubscribeSubscriptions() {
     this.shortcodeCreated?.unsubscribe()
     this.shortcodeRevoked?.unsubscribe()
+    this.shortcodeUpdated?.unsubscribe()
     this.shortcodeCreatedSub?.unsubscribe()
     this.shortcodeRevokedSub?.unsubscribe()
+    this.shortcodeUpdatedSub?.unsubscribe()
   }
 
   initialize() {
@@ -137,6 +144,14 @@ export default class ShortcodeListAdapter {
     this.shortcodes$.next(newShortcode)
   }
 
+  private updateSharedRequest(shortcode: Shortcode) {
+    const newShortcode = this.shortcodes$.value.map((oldShortcode) =>
+      oldShortcode.id === shortcode.id ? shortcode : oldShortcode
+    )
+
+    this.shortcodes$.next(newShortcode)
+  }
+
   private registerSubscriptions() {
     const [shortcodeCreated$, shortcodeCreatedSub] = runAuthOnlyGQLSubscription(
       {
@@ -169,5 +184,21 @@ export default class ShortcodeListAdapter {
 
       this.deleteSharedRequest(result.right.myShortcodesRevoked.id)
     })
+
+    const [shortcodeUpdated$, shortcodeUpdatedSub] = runAuthOnlyGQLSubscription(
+      {
+        query: ShortcodeUpdatedDocument,
+      }
+    )
+
+    this.shortcodeUpdatedSub = shortcodeUpdatedSub
+    this.shortcodeUpdated = shortcodeUpdated$.subscribe((result) => {
+      if (E.isLeft(result)) {
+        console.error(result.left)
+        throw new Error(`Shortcode Update Error ${result.left}`)
+      }
+
+      this.updateSharedRequest(result.right.myShortcodesUpdated)
+    })
   }
 }