feat: new banner service and added ability to bind additional services from other platforms (#3474)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

packages/hoppscotch-common/src/services/__tests__/banner.service.spec.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest"
+import { BannerContent, BannerService } from "../banner.service"
+import { TestContainer } from "dioc/testing"
+
+describe("BannerService", () => {
+  const container = new TestContainer()
+  const service = container.bind(BannerService)
+
+  it("initally there are no banners defined", () => {
+    expect(service.content.value).toEqual(null)
+  })
+
+  it("should be able to set and retrieve banner content", () => {
+    const sampleBanner: BannerContent = {
+      type: "info",
+      text: "Info Banner",
+    }
+
+    const banner = service.content
+    banner.value = sampleBanner
+    const retrievedBanner = service.content.value
+
+    expect(retrievedBanner).toEqual(sampleBanner)
+  })
+
+  it("should be able to update the banner content", () => {
+    const updatedBanner: BannerContent = {
+      type: "warning",
+      text: "Updated Banner Content",
+      alternateText: "Updated Banner",
+    }
+
+    service.content.value = updatedBanner
+    const retrievedBanner = service.content.value
+
+    expect(retrievedBanner).toEqual(updatedBanner)
+  })
+})

packages/hoppscotch-common/src/services/banner.service.ts

@@ -0,0 +1,28 @@
+import { Service } from "dioc"
+import { ref } from "vue"
+
+/**
+ * The different types of banners that can be used.
+ */
+export type BannerType = "info" | "warning" | "error"
+
+export type BannerContent = {
+  type: BannerType
+  text: string
+  // Can be used to display an alternate text when display size is small
+  alternateText?: string
+}
+
+/**
+ * This service is used to display a banner on the app.
+ * It can used to display information, warnings or errors.
+ */
+export class BannerService extends Service {
+  public static readonly ID = "BANNER_SERVICE"
+
+  /**
+   * This is a reactive variable that can be used to set the contents of the banner
+   * and use it to render the banner on components.
+   */
+  public content = ref<BannerContent | null>(null)
+}