[PR #3474] [MERGED] feat: new banner service and added ability to bind additional services from other platforms #4399

New issue

Closed

opened 2026-03-17 01:56:17 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:56:17 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3474
Author: @joeljstephen
Created: 10/25/2023
Status: ✅ Merged
Merged: 11/6/2023
Merged by: @AndrewBastin

Base: release/2023.12.0 ← Head: feat/banner-service

📝 Commits (10+)

c1000fc feat: allow service container to bind services from other platforms
c8e46ff feat: introducing banner service to the service architecture
6e142d2 test: added tests for banner service
82a5289 feat: new banner component to render banners
9a6ace9 refactor: replacing announcement with banner component
e6cfc48 refactor: removed announcement component
c0171fa chore: updated type for addedService
d0da35e refactor: removed the enforcement of i18n for the banner properties
0210fcf chore: better naming for computed property
ddb9299 style: removed unnecessary styles from banner component

📊 Changes

8 files changed (+143 additions, -23 deletions)

View changed files

📝 packages/hoppscotch-common/src/components.d.ts (+2 -0)
➖ packages/hoppscotch-common/src/components/app/Announcement.vue (+0 -22)
➕ packages/hoppscotch-common/src/components/app/Banner.vue (+54 -0)
📝 packages/hoppscotch-common/src/components/app/Header.vue (+15 -1)
📝 packages/hoppscotch-common/src/modules/dioc.ts (+4 -0)
📝 packages/hoppscotch-common/src/platform/index.ts (+2 -0)
➕ packages/hoppscotch-common/src/services/__tests__/banner.service.spec.ts (+38 -0)
➕ packages/hoppscotch-common/src/services/banner.service.ts (+28 -0)

📄 Description

Ticket

Closes HFE-254

Description

This PR introduces a new banner service to the service architecture and a new banner component that uses the banner service to render the banner. It also introduces support for additional services that are used in other platforms and can be bounded to the service container.

Banner Information

A banner contains:

Text
Alternate text [optional] ( can be used to display a shorter text when the screen size is small )
Banner type - ( info, warning and error )

Types of Banner

Info Banner - Used to display any important information
Warning Banner - Used to display a warning message
Error Banner - Used to display an error message

Objectives

Introduce a new Banner Service to the service architecture.
A new Banner component which handles the rendering aspect of the banner
Allow service container to bind services from other platforms

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/3474 **Author:** [@joeljstephen](https://github.com/joeljstephen) **Created:** 10/25/2023 **Status:** ✅ Merged **Merged:** 11/6/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `release/2023.12.0` ← **Head:** `feat/banner-service` --- ### 📝 Commits (10+) - [`c1000fc`](https://github.com/hoppscotch/hoppscotch/commit/c1000fcb2518882438cbc7f8534ad72c239b6b94) feat: allow service container to bind services from other platforms - [`c8e46ff`](https://github.com/hoppscotch/hoppscotch/commit/c8e46ff4cea8f1462279dd88df09848679224ec4) feat: introducing banner service to the service architecture - [`6e142d2`](https://github.com/hoppscotch/hoppscotch/commit/6e142d2851caa90136cdabd271e65a8be6b23785) test: added tests for banner service - [`82a5289`](https://github.com/hoppscotch/hoppscotch/commit/82a5289e4976c6bc80d5fec46d049b98aa35d2e3) feat: new banner component to render banners - [`9a6ace9`](https://github.com/hoppscotch/hoppscotch/commit/9a6ace9f6c013a4c6633e95ec3afa3b46f56a12e) refactor: replacing announcement with banner component - [`e6cfc48`](https://github.com/hoppscotch/hoppscotch/commit/e6cfc48f9632aaf6afac7d0800e6aaa3d805b62c) refactor: removed announcement component - [`c0171fa`](https://github.com/hoppscotch/hoppscotch/commit/c0171fa125752e645669da081de4a27ea5d34ce6) chore: updated type for addedService - [`d0da35e`](https://github.com/hoppscotch/hoppscotch/commit/d0da35ea7d68d8fab4661e9e1ba6270cb2581c11) refactor: removed the enforcement of i18n for the banner properties - [`0210fcf`](https://github.com/hoppscotch/hoppscotch/commit/0210fcf019b58a32fcf1171e788cbe89080d7b63) chore: better naming for computed property - [`ddb9299`](https://github.com/hoppscotch/hoppscotch/commit/ddb92991daa21be481c531d2a1f696cc7a9dd69d) style: removed unnecessary styles from banner component ### 📊 Changes **8 files changed** (+143 additions, -23 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components.d.ts` (+2 -0) ➖ `packages/hoppscotch-common/src/components/app/Announcement.vue` (+0 -22) ➕ `packages/hoppscotch-common/src/components/app/Banner.vue` (+54 -0) 📝 `packages/hoppscotch-common/src/components/app/Header.vue` (+15 -1) 📝 `packages/hoppscotch-common/src/modules/dioc.ts` (+4 -0) 📝 `packages/hoppscotch-common/src/platform/index.ts` (+2 -0) ➕ `packages/hoppscotch-common/src/services/__tests__/banner.service.spec.ts` (+38 -0) ➕ `packages/hoppscotch-common/src/services/banner.service.ts` (+28 -0) </details> ### 📄 Description ### Ticket Closes HFE-254 ### Description This PR introduces a new banner service to the service architecture and a new banner component that uses the banner service to render the banner. It also introduces support for additional services that are used in other platforms and can be bounded to the service container. ### Banner Information A banner contains: 1. Text 2. Alternate text [optional] ( can be used to display a shorter text when the screen size is small ) 3. Banner type - ( info, warning and error ) ### Types of Banner 1. Info Banner - Used to display any important information <img width="988" alt="image" src="https://github.com/hoppscotch/hoppscotch/assets/70131076/7e18081a-2417-48ff-af95-8cb513387606"> 2. Warning Banner - Used to display a warning message <img width="995" alt="image" src="https://github.com/hoppscotch/hoppscotch/assets/70131076/44a155e1-85fc-4f56-9c0c-cd9f87a7306f"> 3. Error Banner - Used to display an error message <img width="988" alt="image" src="https://github.com/hoppscotch/hoppscotch/assets/70131076/74982f1e-b82c-4889-9756-2c009cf075ff"> ### Objectives - [x] Introduce a new Banner Service to the service architecture. - [x] A new Banner component which handles the rendering aspect of the banner - [x] Allow service container to bind services from other platforms ### Checks  - [x] My pull request adheres to the code style of this project - [ ] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>