chore(codeowners): change ownership of storybook (#12949)

## Description

Add myself as owner of storybook structural files, the stories still
belongs to each pod.

.claude/skills/signoz-page-story/SKILL.md

@@ -26,6 +26,135 @@ process on top of it.
 5. **Verify in the browser**: [references/verify.md](references/verify.md). Never
    report the story as done without it.
 
+## Where it lands in the sidebar
+
+The sidebar mirrors the app's own side nav (`container/SideNav/menuItems.tsx`), so
+a page sits where someone would click it in the product. Four things decide that,
+and all four are part of writing the story, not a follow-up.
+
+**Title.** `Pages/<Area>/<Page>`, where `<Area>` is the nav section and `<Page>`
+is the label the nav gives it.
+
+- The leaf is the product's label, never the component's name: `MetricsExplorer`
+  is `Metrics/Explorer`, `MeterExplorer` is `Metering/Cost Meter`,
+  `AIAssistantPage` is `Noz`.
+- Never repeat the area in the leaf: `Alerts/Rules`, not `Alerts/AlertRules`.
+- A leaf never shares its name with a sibling folder. The folder wins and the
+  page becomes `List`, or `Overview` for a tab strip: `Services/List` beside
+  `Services/Detail`.
+- Title Case with spaces. No camelCase, no kebab.
+- Four levels is the floor to stay under: `Pages/Alerts/Channels/New` is as deep
+  as it goes.
+- Pages nobody navigates to on purpose go under `Pages/System` (`Status`,
+  `Unauthorized`, `Workspace Locked`), and the pre-session pages under
+  `Pages/Auth`.
+- A page whose permission stories earn their own folder becomes one:
+  `Pages/Settings/Billing/Overview` beside `Pages/Settings/Billing/Authz`. See
+  **Permission stories** below.
+
+**Order.** The `storySort.order` literal in `.storybook/preview.tsx` carries the
+order for every level. A new page in an existing area is appended to that area's
+array, in the order the product lists it; a new area goes where the side nav
+puts it. Storybook parses the order out of the file statically, so it has to
+stay an inline literal. Missing entries fall to the end of their level rather
+than disappearing, so a forgotten edit is a page at the bottom of its area, not
+a broken sidebar.
+
+**Tags.** Declared on the meta, right under `title`, and what the sidebar's tag
+filter answers questions with. Only these:
+
+| Tag | When |
+| --- | --- |
+| `authz` | The page gates UI on permission checks through `lib/authz` (`AuthZButton`, `AuthZGuard`, `useAuthZ`). Both the page's file and its `Authz` file carry it. |
+| `role-gated` | The page still branches on the legacy role (`user.role`, `hasEditPermission`) and has no authz check. |
+| `beta` | `isBeta` on its nav entry. Drop the tag when the product drops the badge. |
+| `legacy` | Superseded by another page but still routed. The doc comment names the page to start from instead. |
+| `play` | The story file has a `play` function, so at least one state is reached by an interaction. |
+
+`autodocs` comes from `preview.tsx` and is never written on a meta.
+
+**Doc comment on the meta.** What the page is, in the page's own terms, then a
+blank line, then the route:
+
+```tsx
+const pageStory = storyMocks(logsExplorerMocks, {
+	route: explorerRoute('explorer'),
+	layout: 'app',
+});
+
+/**
+ * The logs explorer: the query builder, the list, the frequency chart and the log
+ * detail drawer, with quick filters and saved views beside them.
+ *
+ * Route: `/logs/logs-explorer`.
+ */
+const meta = {
+	title: 'Pages/Logs/Explorer',
+	tags: ['play'],
+	component: LogsModulePage,
+	...pageStory,
+	parameters: { ...pageStory.parameters },
+} satisfies Meta<LogsExplorerArgs>;
+```
+
+The `pageStory` const and the trailing `parameters` line are what make the doc
+comment safe. The comment compiles to a `parameters` property that the csf plugin
+appends after the spread, so a meta that spreads `storyMocks(...)` and stops
+there loses `parameters.signoz` and renders the page against the global handlers
+alone: every one of the page's endpoints misses. Restating `parameters` as a
+literal gives the plugin something to merge into. `resolveStory` logs the
+combination that says it happened, so the console names it rather than leaving it
+to be found by reading the page.
+
+It is the description on the page's Docs page, which is the only place a reader
+who is not in the code finds out what the page is for. Two or three sentences:
+what it shows, what drives it, and the gating worth knowing about (`Gated on
+authz permissions`, `follows the legacy editor role`). A control-driven route
+says so instead of a path: ``Route: `/metrics-explorer/*`, the tab control picks
+which``.
+
+## Permission stories
+
+A page that gates UI on `lib/authz` keeps its permission states in a folder of
+their own, so the page's own file stays about the page and the sidebar answers
+"what does this permission do" in one place.
+
+**Layout.** A second story file at `stories/authz/<Page>.authz.stories.tsx`,
+titled `Pages/<Area>/<Page>/Authz`, which turns the page into a folder: its own
+file is retitled `Pages/<Area>/<Page>/Overview`, and `.storybook/preview.tsx`
+gains the sub-order (`'Billing', ['Overview', 'Authz']`). Both files carry the
+`authz` tag and share the page's one mocks module, which the authz file imports
+as `../<Page>.stories.mocks`. It declares no controls and no mock data of its
+own: a permission story that needs a new response is a control the page's mocks
+were missing.
+
+**One story per permission the page reads**, named for what is gone: `NoRead`,
+`NoList`, `NoUpdate`, `NoCreate`, `NoDelete`. Then the combinations the page
+itself distinguishes, and only those: `NoManage` where two permissions gate one
+button, `ReadOnly` where everything but reading is denied, `NoSubscriptionAccess`
+where none of the resource's permissions are held, and `CheckFailed` for
+`authzState: 'error'`, which is the page's fail-open path rather than a denial.
+
+**Revoke, never allow-list.** Each story is a full grant minus what its name
+says: `args: { revoked: ['read:subscription'] }`. The `Revoked` control subtracts
+from the preset, so the story stays "an admin missing one permission" as the
+catalogue grows, and the diff against the page's `Default` is the one permission.
+Rebuilding the allow-list by hand drifts the moment a resource is added.
+
+**Never a role preset in this folder.** `access: 'viewer'` moves the legacy role,
+the side nav and every other resource's permissions at the same time, so the
+story no longer shows what its name claims. A persona is a story on the page's
+own file, and only when the product has that persona.
+
+**Pair the revocation with the state that renders the gated control.** A button
+that only exists on a trial needs the plan too:
+`args: { plan: 'on-trial', revoked: ['create:subscription'] }`. A permission
+whose denial changes nothing on screen gets no story: say so in the PR.
+
+Verify these by their disabled states, not their text. The page reads the same
+either way, so a story that is wrong looks right: read `disabled` off the buttons
+the permission gates, and check the denial callout is there or gone.
+
 ## Rules
 
 - **Default is the loaded page.** `export const Default: Story = {}` with no args,
@@ -50,7 +179,29 @@ process on top of it.
 - **File layout**: every story file for a page lives under
   `src/pages/<Page>/stories/`: `<Page>.stories.tsx`, `<Page>.stories.mocks.tsx`,
   payload builders in `stories/__story_mockdata__/<page>.ts`. Nothing
-  page-specific in `src/storybook/controls/`.
+  page-specific in `src/storybook/controls/`. A page that is a tab strip over
+  several routes gets one story file per tab, in its own folder under the module
+  page (`LogsModulePage/Pipelines/stories/Pipelines.stories.tsx`), each with its
+  own mocks and `__story_mockdata__/`; the builders more than one tab needs stay
+  in the module page's own `stories/__story_mockdata__/`
+  (`AlertList/stories/__story_mockdata__/alerts.ts`), which a tab reaches as
+  `../../stories/__story_mockdata__/alerts`. Every one of them renders the module page, so the tab
+  strip is there, and the `route` its mocks return decides which tab is open.
+  A page's permission stories go one level further down, in
+  `stories/authz/<Page>.authz.stories.tsx`, on the page's own mocks: see
+  **Permission stories**.
+- **A state only a click reaches is a story with a `play` function**, not a
+  control: a drawer, a modal, an edit mode the page holds in component state.
+  Drive it with `userEvent` and the queries from `storybook/test`, take the first
+  of a repeated row action, and wait on the state's own text. The page fetches
+  before it renders a row, so the finder needs a timeout past the 1s default. A
+  state the app drops again on its own, such as one keyed on an array identity
+  that a refetch replaces, does not get a story: it would not survive being
+  looked at. A *sequence* of such states, a wizard's steps or a
+  questionnaire's pages, is still a control: declare the steps in the mocks
+  module and walk them from a `play` on the meta that destructures `mount`, which
+  is what makes Storybook replay it on an arg change. See
+  [references/controls.md](references/controls.md).
 - **The mocks are AI-owned and say so.** `<Page>.stories.mocks.tsx` and every file
   under a `__story_mockdata__/` open with this banner, above the imports:
 
@@ -74,6 +225,13 @@ process on top of it.
   writing a response shape inline, check if a builder exists; if not and the
   shape will repeat, add it there. Page-specific builders stay in the page's
   `__story_mockdata__/`.
+- **The story's own doc comment is per state.** Every `export const` gets one:
+  what that state shows, not how it is built. It renders in the States list on
+  the page's Docs page, so `Undocumented.` there is a story nobody described.
+- **Story names come from a fixed vocabulary** where one fits: `Default`,
+  `Viewer`, `Empty`, `Loading`, `Error`. Page-specific states get page-specific
+  names (`NoIngestion`, `Unlicensed`), never a second spelling of one of those
+  (`ViewerAccess`, `NonAdmin`).
 - **No comment is the default.** Write one only for what the code cannot show:
   a shape the backend dictates, an app bug the mock reproduces, an ordering or
   cap the page depends on, a workaround and the reason for it. Never restate a
@@ -85,6 +243,16 @@ process on top of it.
 ## Done means
 
 - [ ] `Default` shows the page with data, checked in dark and light
+- [ ] title follows the sidebar rules, tags declared, and the page's entry added
+      to the `storySort.order` literal in `.storybook/preview.tsx`
+- [ ] the meta carries its doc comment with the `Route:` line, the meta restates
+      `parameters: { ...pageStory.parameters }` after the spread, and every story
+      export carries its own doc comment
+- [ ] the page's Docs page renders: description, controls table, and one row per
+      state with no `Undocumented.`
+- [ ] a page tagged `authz` has its `Authz` folder: one story per permission it
+      reads, each reached by `revoked`, none of them a role preset, and each one
+      checked by the `disabled` state of what the permission gates
 - [ ] the mocks module and every `__story_mockdata__` file carry the AI-owned banner
 - [ ] every control flipped once, its effect seen on screen
 - [ ] console clean: no `[storybook] no msw handler`, no 501, no msw unhandled

.claude/skills/signoz-page-story/references/controls.md

@@ -128,20 +128,83 @@ export const servicesMocks = defineStoryMocks({
 // src/pages/Services/stories/Services.stories.tsx
 type ServicesArgs = PageStoryArgs<typeof servicesMocks>;
 
+const pageStory = storyMocks(servicesMocks, {
+	route: ROUTES.APPLICATION,
+	layout: 'app',
+});
+
+/**
+ * Every instrumented service with its p99, error rate and throughput.
+ *
+ * Route: `/services`.
+ */
 const meta = {
-	title: 'Pages/Services',
+	title: 'Pages/Services/List',
 	component: Services,
-	...storyMocks(servicesMocks, { route: ROUTES.APPLICATION, layout: 'app' }),
+	...pageStory,
+	parameters: { ...pageStory.parameters },
 } satisfies Meta<ServicesArgs>;
 ```
 
 `PageStoryArgs` folds in the global controls, so a story's `args` can set
 `access`, `dataState` or `banner` next to the page's own knobs and stay typed.
 
+## A step the page keeps in component state
+
+A wizard's step, a questionnaire's page, a picker's next question: the page holds
+it in `useState` and nothing in the URL says which one is open. It is still a
+control. Declare the steps in the mocks module and drive them from a `play` on
+the **meta**, so every story of the page inherits the walk and only sets `args`:
+
+```tsx
+// <Page>.stories.mocks.tsx
+export const SETUP_STEPS = ['pick-source', 'pick-framework', 'configure'] as const;
+export type SetupStep = (typeof SETUP_STEPS)[number];
+
+controls: {
+	step: choiceControl<SetupStep>('Setup step', { group: SETUP, options: SETUP_STEPS, value: 'pick-source' }),
+},
+```
+
+```tsx
+// <Page>.stories.tsx
+const meta = {
+	play: async ({ mount, args, canvasElement }): Promise<void> => {
+		await mount();
+		await advanceToSetupStep(canvasElement, args.step);
+	},
+	...storyMocks(pageMocks),
+} satisfies Meta<PageArgs>;
+
+export const Configure: Story = { args: { step: 'configure' } };
+```
+
+**Destructuring `mount` is what makes it a control.** Storybook re-runs a play
+function on an arg change only for a story whose play asks to be remounted
+(`usesMount`); otherwise it re-renders the tree the previous walk left behind and
+the panel looks broken. With `mount` destructured, the story renders when `play`
+calls it, and every arg change replays the walk from a fresh mount.
+
+The walk itself:
+
+- one `answer` function per step, in an array indexed the same as the step list,
+  so reaching step *n* is `answers.slice(0, STEPS.indexOf(step))`;
+- answer each step with the least its Next button accepts, and prefer a "do this
+  later" over filling a slider;
+- run them sequentially (`reduce` over a promise), since each answer is what
+  renders the step the next one reads;
+- bail out when the page did not start where the walk expects, such as a source
+  deep-linked past the questions. Check for the first step's own text rather than
+  reading another control's value.
+
+An endpoint that only settles the transition between two steps (the profile a
+questionnaire saves before its last page) takes a plain resolver, or the Data
+control on `loading` strands the walk halfway.
+
 ## Not a control
 
 - Anything the global controls already cover: banner, side nav, data state,
-  access preset, permissions, check state.
+  access preset, granted permissions, revoked permissions, check state.
 - A knob whose effect nobody can see on the page. Delete it or find the widget it
   was supposed to drive.
 - A raw payload as an object control. Controls carry intent (`5 dashboards`,
@@ -155,9 +218,12 @@ const meta = {
 Default to a control. Write a story when the state is worth a link:
 
 - the fresh workspace, because that is what a new user sees
-- the restricted user, when permissions visibly change the page
 - a page-defining mode (a tab, a category) that has its own layout
 
+A permission that visibly changes the page is a story too, but it goes in the
+page's `Authz` folder, one per permission, turned with the `Revoked` control.
+See **Permission stories** in SKILL.md.
+
 Combinations of controls do not need stories, which is what the panel is for.
 
 Each story gets one prose doc comment: what it shows, in the page's own terms.

.claude/skills/signoz-page-story/references/verify.md

@@ -12,11 +12,12 @@ cd frontend && pnpm storybook --ci --quiet   # :6006, background it
 A newly added `.stories.tsx` takes a few seconds to appear in `index.json` on an
 already-running server; an empty first poll is not a broken `stories` glob.
 
-Story ids come from the meta title: `Pages/Services` → `pages-services`, plus the
-story export in kebab-case. Render one story on its own:
+Story ids come from the meta title: `Pages/Services/List` →
+`pages-services-list`, plus the story export in kebab-case. Render one story on
+its own:
 
 ```
-http://localhost:6006/iframe.html?id=pages-services--default&viewMode=story
+http://localhost:6006/iframe.html?id=pages-services-list--default&viewMode=story
 ```
 
 ## Flip controls from the URL

.github/CODEOWNERS

@@ -280,3 +280,9 @@ go.mod @therealpandey
 /frontend/src/components/MessagingQueues/ @SigNoz/events-frontend
 /frontend/src/components/MessagingQueueHealthCheck/ @SigNoz/events-frontend
 /frontend/src/hooks/messagingQueue/ @SigNoz/events-frontend
+
+## Storybook
+/frontend/.storybook/ @H4ad
+/frontend/src/storybook/ @H4ad
+/.claude/skills/signoz-page-story/ @H4ad
+/.claude/skills/storybook-visual-diff/ @H4ad

cmd/authz.go

@@ -93,18 +93,17 @@ func runGenerateAuthz(_ context.Context) error {
 	registry := coretypes.NewRegistry()
 
 	allowedResources := map[string]bool{
-		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():                  true,
-		coretypes.NewResourceRef(coretypes.ResourceRole).String():                            true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():        true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceDashboard).String():           true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceLicense).String():             true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceSubscription).String():        true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():           true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():         true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():        true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMeterMetrics).String():   true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceQuickFilter).String():         true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceNotificationChannel).String(): true,
+		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():                true,
+		coretypes.NewResourceRef(coretypes.ResourceRole).String():                          true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():      true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceDashboard).String():         true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceLicense).String():           true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceSubscription).String():      true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():         true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMeterMetrics).String(): true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceQuickFilter).String():       true,
 	}
 
 	allowedTypes := map[string]bool{}

frontend/.oxlintrc.json

@@ -295,6 +295,8 @@
     // Prevents bracket access on CSS modules (styles['kebab-case']) which fails with camelCaseOnly config
     "signoz/no-dashboard-fetch-outside-root": "error",
     // Forces useDashboardFetchRequired() outside the root V2 pages (allowlisted in overrides below)
+    "signoz/no-msw-in-story-file": "error",
+    // Bans msw imports in *.stories.tsx; handlers/mock data belong in the sibling .stories.mocks.tsx
     "no-restricted-globals": [
       "error",
       {

frontend/.storybook/main.ts

@@ -27,12 +27,22 @@ const mockAliases = [
 		find: /^(?:src\/)?api\/common\/logEvent$/,
 		replacement: `${srcPath}/storybook/mocks/logEvent.mock.ts`,
 	},
+	{
+		// jest: not replaced, the suite mounts a mock store per test.
+		find: /^(?:src\/)?store$/,
+		replacement: `${srcPath}/storybook/mocks/store.mock.ts`,
+	},
 	{
 		// jest: __mocks__/env.ts, which leaves `baseURL` empty because jsdom already
 		// resolves a relative `/api/...` against `http://localhost`.
 		find: /^(?:src\/)?constants\/env$/,
 		replacement: `${srcPath}/storybook/mocks/env.mock.ts`,
 	},
+	{
+		// jest: not replaced, a test opens the one tooltip it is about.
+		find: /^@signozhq\/ui\/tooltip$/,
+		replacement: `${srcPath}/storybook/mocks/tooltip.mock.tsx`,
+	},
 ];
 
 /**
@@ -55,12 +65,12 @@ const isExcluded = (plugin: PluginOption): boolean =>
 
 const config: StorybookConfig = {
 	framework: '@storybook/react-vite',
-	stories: ['../src/**/*.stories.@(ts|tsx)'],
+	stories: ['../src/storybook/docs/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
 	// `../public` carries the fonts, icons and i18n bundles the app expects at
 	// the root; `./public` carries the msw worker, which must not ship in a
 	// production build.
 	staticDirs: ['../public', './public'],
-	addons: ['@storybook/addon-a11y'],
+	addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],
 	core: { disableTelemetry: true },
 	viteFinal: async (viteConfig) => {
 		const plugins = (viteConfig.plugins ?? [])
@@ -77,6 +87,14 @@ const config: StorybookConfig = {
 
 		return {
 			...viteConfig,
+			build: {
+				...viteConfig.build,
+				// `vite.config.ts` sets this for the app; Storybook's builder replaces
+				// `build` wholesale, which leaves rolldown-vite on its default
+				// lightningcss. That one rejects `:global()` in a plain stylesheet, which
+				// the app has, and the static build dies in CSS minification.
+				cssMinify: 'esbuild',
+			},
 			plugins,
 			resolve: {
 				...viteConfig.resolve,

frontend/.storybook/preview-head.html

@@ -6,6 +6,17 @@
 -->
 <link rel="stylesheet" href="storybook-fonts.css" />
 
+<!--
+	Third-party frames are the one thing msw cannot answer: a cross-origin iframe
+	navigates outside the service worker's scope, so the YouTube embeds and the
+	docs pane in onboarding reach the real network. Same intent as the boot data
+	below, enforced by the browser instead.
+-->
+<meta
+	http-equiv="Content-Security-Policy"
+	content="frame-src 'self' blob: data:"
+/>
+
 <link rel="stylesheet" href="css/uPlot.min.css" />
 
 <script>
@@ -24,3 +35,38 @@
 		},
 	};
 </script>
+
+<script>
+	// The wall clock every story reads. Chart windows, `4 mins ago` labels and
+	// trial countdowns all derive from `now`, and Chromatic does not freeze the
+	// clock, so a live one redraws every chart axis between two builds of the
+	// same code. `performance.now` and the timers keep running, so anything
+	// waiting on a timeout still resolves. `?storyClock=live`, or an ISO
+	// instant, overrides it.
+	//
+	// `new Date()` is the frozen instant, which is what the app renders from.
+	// `Date.now()` runs on from it instead, because it is also what code measures
+	// elapsed time with: `lodash.debounce` compares two `Date.now()` readings to
+	// decide its trailing call is due, so a frozen one re-arms its timer forever
+	// and every debounced input in the app (the onboarding catalogue search, the
+	// pipelines search, the log filter) silently stops filtering.
+	(() => {
+		const asked = new URLSearchParams(window.location.search).get('storyClock');
+		if (asked === 'live') return;
+
+		const frozen = Date.parse(asked || '2026-06-15T12:00:00.000Z');
+		if (Number.isNaN(frozen)) return;
+
+		const RealDate = Date;
+		const started = performance.now();
+		class FrozenDate extends RealDate {
+			constructor(...args) {
+				super(...(args.length ? args : [frozen]));
+			}
+			static now() {
+				return frozen + (performance.now() - started);
+			}
+		}
+		Object.defineProperty(window, 'Date', { value: FrozenDate, writable: true });
+	})();
+</script>

frontend/.storybook/preview.tsx

@@ -3,6 +3,8 @@ import type { SetupWorker } from 'msw';
 import { setupWorker } from 'msw';
 
 import { settleForCapture } from '../src/storybook/visual/settleForCapture';
+import PageDocs from '../src/storybook/docs/PageDocs';
+import ThemedDocsContainer from '../src/storybook/docs/ThemedDocsContainer';
 import { withProviders } from '../src/storybook/decorators/withProviders';
 import { globalMocks } from '../src/storybook/globals';
 import { resetStoryHistory } from '../src/storybook/navigation/containment';
@@ -13,7 +15,12 @@ import {
 } from '../src/storybook/runtime/resolveStory';
 import { allModes } from './modes';
 
-import '../src/ReactI18';
+import i18n from '../src/ReactI18';
+
+// `src/index.tsx` does this at boot: without it `@monaco-editor/react` falls back
+// to its loader default and pulls Monaco from cdn.jsdelivr.net, which msw does
+// not report because the requests look like static assets.
+import '../src/lib/monaco/setup';
 
 import '../src/styles.scss';
 
@@ -63,10 +70,127 @@ const { worker, ready } = (holder.__signozStorybookWorker ??=
 		};
 	})());
 
+/**
+ * `t()` answers with the key until the namespace's JSON has landed, and a `play`
+ * that clicks as soon as the story renders is quick enough to catch it: the
+ * channel form's "Channel name is mandatory" arrives as `channel_name_required`.
+ * Every namespace under `public/locales/en` is loaded once, ahead of the first
+ * story.
+ */
+const translationsReady = i18n.loadNamespaces(
+	Object.keys(import.meta.glob('../public/locales/en/*.json')).map((path) =>
+		path.slice(path.lastIndexOf('/') + 1, -'.json'.length),
+	),
+);
+
 const preview: Preview = {
 	parameters: {
 		layout: 'fullscreen',
 		controls: { expanded: true },
+		// The sidebar order, mirroring the app's own side nav
+		// (`container/SideNav/menuItems.tsx`), so a page sits where someone would
+		// click it in the product. Storybook's default is the order the story files
+		// happen to be globbed in, which puts `src/modules` first. Anything missing
+		// from a level lands after the entries listed for it, in file order, so a new
+		// story shows up at the end of its area rather than disappearing. Stories
+		// inside a file are never listed, so they keep the order they are declared
+		// in, `Default` first. Storybook parses this out of the file, so it has to
+		// stay an inline literal.
+		options: {
+			storySort: {
+				order: [
+					'Docs',
+					'Pages',
+					[
+						'Home',
+						'Alerts',
+						[
+							'Rules',
+							'Triggered',
+							'Overview',
+							'History',
+							'Create',
+							'Edit',
+							'Planned Downtime',
+							'Routing Policies',
+							'Channels',
+							['List', 'New', 'Edit'],
+						],
+						'Dashboards',
+						['List', 'Detail', 'Panel Editor', 'Public'],
+						'Services',
+						['List', 'Detail', 'Top Level Operations', 'Service Map'],
+						'Logs',
+						['Explorer', 'Live Tail', 'Saved Views', 'Pipelines', 'Settings'],
+						'Traces',
+						['Explorer', 'Trace Details', 'Funnel Details'],
+						'Metrics',
+						['Explorer'],
+						'Infrastructure',
+						[
+							'Overview',
+							'Kubernetes',
+							[
+								'Clusters',
+								'Nodes',
+								'Namespaces',
+								'Pods',
+								'Deployments',
+								'DaemonSets',
+								'StatefulSets',
+								'Jobs',
+								'Volumes',
+							],
+						],
+						'Integrations',
+						['List', 'Details', 'Cloud Account'],
+						'Exceptions',
+						['List', 'Detail'],
+						'External APIs',
+						'AI Observability',
+						['Overview', 'Explorer', 'Model Pricing', 'Attribute Mapping'],
+						'Noz',
+						'Metering',
+						['Cost Meter', 'Usage Explorer'],
+						'Messaging Queues',
+						['Overview', 'Kafka', 'Kafka Detail', 'Celery'],
+						'Onboarding',
+						['Questionnaire', 'Add Data Source'],
+						'Settings',
+						[
+							'Workspace',
+							'Account',
+							'Billing',
+							['Overview', 'Authz'],
+							'MCP Server',
+							'Roles',
+							'Role Details',
+							'Role Editor',
+							'Members',
+							'Service Accounts',
+							'Ingestion',
+							'Single Sign-on',
+							'Keyboard Shortcuts',
+						],
+						'Auth',
+						['Login', 'Sign Up', 'Forgot Password', 'Reset Password'],
+						'System',
+						[
+							'Status',
+							'Support',
+							'License',
+							'Not Found',
+							'Unauthorized',
+							'Error Fallback',
+							'Workspace Locked',
+							'Workspace Suspended',
+							'Workspace Access Restricted',
+						],
+					],
+				],
+			},
+		},
+		docs: { page: PageDocs, container: ThemedDocsContainer },
 		// One cloud snapshot per theme, for every story. A mode carries Storybook
 		// globals, so `theme` here is the same toolbar global the app reads out of
 		// localStorage. Widths are Chromatic's only real dimension, as they are
@@ -74,6 +198,9 @@ const preview: Preview = {
 		// one it is given.
 		chromatic: { modes: allModes },
 	},
+	// Every page story gets a docs page: the descriptions on the meta and on each
+	// story are the page's documentation, and without this they render nowhere.
+	tags: ['autodocs'],
 	globalTypes: {
 		theme: {
 			description: 'SigNoz color scheme',
@@ -119,12 +246,21 @@ const preview: Preview = {
 			world.apply();
 			world.install(worker);
 
-			await ready;
+			await Promise.all([ready, translationsReady]);
 		},
 	],
 	beforeEach: () => {
 		clearBlockedNavigations();
 		resetStoryHistory();
+
+		// The runner clears its console/network buffer before it navigates, so
+		// anything the outgoing story still has in flight would be reported
+		// against this one. Stamping the moment this story starts gives the runner
+		// a line to discard those by. `Date.now()` is faked for the stories, so
+		// this reads the one clock the runner's own timestamps share.
+		document.body.dataset.signozStoryStartedAt = String(
+			performance.timeOrigin + performance.now(),
+		);
 	},
 	// After `play`, which is the moment both capture stacks shoot at.
 	afterEach: settleForCapture,

frontend/.storybook/public/mockServiceWorker.js

@@ -88,10 +88,16 @@ self.addEventListener('fetch', function (event) {
   const { request } = event
   const accept = request.headers.get('accept') || ''
 
-  // Bypass server-sent events.
-  if (accept.includes('text/event-stream')) {
-    return
-  }
+  // msw bypasses server-sent events here, because it answers a request in one
+  // piece and has no stream to hand back. A story is not a live connection
+  // either: it wants the backlog a page renders, and one response carries that
+  // fine. Left bypassed, `/api/v3/logs/livetail` reaches the real network and
+  // the live tail story is a spinner over ERR_CONNECTION_REFUSED. Restore the
+  // bypass and re-check `Pages/Logs/Live Tail` if msw regenerates this file.
+  //
+  // if (accept.includes('text/event-stream')) {
+  //   return
+  // }
 
   // Bypass navigation requests.
   if (request.mode === 'navigate') {

frontend/.storybook/test-runner.ts

@@ -25,7 +25,23 @@ const IGNORED_MESSAGES = [
 	/violates the following Content Security Policy directive/,
 ];
 
-const messagesByPage = new WeakMap<Page, string[]>();
+interface CapturedMessage {
+	at: number;
+	text: string;
+}
+
+const messagesByPage = new WeakMap<Page, CapturedMessage[]>();
+
+/**
+ * When the story under test started rendering, stamped by the preview's
+ * `beforeEach`. Messages captured before it belong to the previous story: the
+ * runner clears this buffer ahead of the navigation, so whatever that story
+ * still had in flight lands here.
+ */
+const storyStartedAt = (page: Page): Promise<number> =>
+	page
+		.evaluate(() => Number(document.body.dataset.signozStoryStartedAt ?? 0))
+		.catch(() => 0);
 
 /**
  * Only `console.error` fails a story. `console.warn` is dev-time advice from
@@ -43,14 +59,14 @@ const config: TestRunnerConfig = {
 			return;
 		}
 
-		const messages: string[] = [];
+		const messages: CapturedMessage[] = [];
 		messagesByPage.set(page, messages);
 		page.on('console', (message) => {
 			if (
 				message.type() === 'error' &&
 				!IGNORED_MESSAGES.some((pattern) => pattern.test(message.text()))
 			) {
-				messages.push(`[error] ${message.text()}`);
+				messages.push({ at: Date.now(), text: `[error] ${message.text()}` });
 			}
 		});
 		// The console message alone ("Failed to load resource") doesn't name the
@@ -58,12 +74,23 @@ const config: TestRunnerConfig = {
 		// actionable instead of just a status code.
 		page.on('response', (response) => {
 			if (response.status() >= 400) {
-				messages.push(`[response] ${response.status()} ${response.url()}`);
+				messages.push({
+					at: Date.now(),
+					text: `[response] ${response.status()} ${response.url()}`,
+				});
 			}
 		});
 	},
 	async postVisit(page, context): Promise<void> {
-		const messages = messagesByPage.get(page) ?? [];
+		const captured = messagesByPage.get(page) ?? [];
+		if (captured.length === 0) {
+			return;
+		}
+
+		const startedAt = await storyStartedAt(page);
+		const messages = captured
+			.filter((message) => message.at >= startedAt)
+			.map((message) => message.text);
 		if (messages.length === 0) {
 			return;
 		}

frontend/package.json

@@ -163,6 +163,7 @@
     "@jest/globals": "30.4.1",
     "@jest/types": "30.2.0",
     "@storybook/addon-a11y": "10.5.9",
+    "@storybook/addon-docs": "10.5.9",
     "@storybook/react-vite": "10.5.9",
     "@storybook/test-runner": "0.24.5",
     "@testing-library/dom": "8.20.0",

frontend/plugins/rules/no-msw-in-story-file.mjs

@@ -0,0 +1,41 @@
+/**
+ * Rule: no-msw-in-story-file
+ *
+ * A `.stories.tsx` file is the human-facing surface: it must not carry msw
+ * handlers or response payloads. Those belong in the sibling
+ * `<Page>.stories.mocks.tsx` module (and its `__story_mockdata__` builders).
+ *
+ * This rule flags any import from `msw` inside a `*.stories.tsx` file. It
+ * does not match `*.stories.mocks.tsx`, which is where msw imports belong.
+ */
+
+export default {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				'Disallow importing from msw inside a .stories.tsx file; move handlers/mock data to the sibling .stories.mocks.tsx module',
+			category: 'Storybook',
+		},
+		schema: [],
+		messages: {
+			noMsw:
+				'Do not import from msw in a .stories.tsx file. Move the handler and its mock data to the sibling <Page>.stories.mocks.tsx module (and __story_mockdata__ for builders).',
+		},
+	},
+
+	create(context) {
+		const filename = context.filename || '';
+		if (!filename.endsWith('.stories.tsx')) {
+			return {};
+		}
+
+		return {
+			ImportDeclaration(node) {
+				if (node.source.value === 'msw') {
+					context.report({ node, messageId: 'noMsw' });
+				}
+			},
+		};
+	},
+};

frontend/plugins/signoz.mjs

@@ -15,6 +15,7 @@ import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';
 import noDashboardFetchOutsideRoot from './rules/no-dashboard-fetch-outside-root.mjs';
 import noConditionalTextNodesWithSiblings from './rules/no-conditional-text-nodes-with-siblings.mjs';
 import noReturnTextNodes from './rules/no-return-text-nodes.mjs';
+import noMswInStoryFile from './rules/no-msw-in-story-file.mjs';
 
 export default {
 	meta: {
@@ -31,5 +32,6 @@ export default {
 		'no-dashboard-fetch-outside-root': noDashboardFetchOutsideRoot,
 		'no-conditional-text-nodes-with-siblings': noConditionalTextNodesWithSiblings,
 		'no-return-text-nodes': noReturnTextNodes,
+		'no-msw-in-story-file': noMswInStoryFile,
 	},
 };

frontend/pnpm-lock.yaml

@@ -363,6 +363,9 @@ importers:
       '@storybook/addon-a11y':
         specifier: 10.5.9
         version: 10.5.9(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))
+      '@storybook/addon-docs':
+        specifier: 10.5.9
+        version: 10.5.9(@types/react-dom@18.0.10)(@types/react@18.0.26)(esbuild@0.28.1)(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.9.1))(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))
       '@storybook/react-vite':
         specifier: 10.5.9
         version: 10.5.9(@types/react-dom@18.0.10)(@types/react@18.0.26)(esbuild@0.28.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.9.1))(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))(typescript@5.9.3)
@@ -2184,6 +2187,12 @@ packages:
   '@marijn/find-cluster-break@1.0.2':
     resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
 
+  '@mdx-js/react@3.1.1':
+    resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
+    peerDependencies:
+      '@types/react': '>=16'
+      react: '>=16'
+
   '@monaco-editor/loader@1.7.0':
     resolution: {integrity: sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==}
 
@@ -3766,6 +3775,15 @@ packages:
     peerDependencies:
       storybook: ^10.5.9
 
+  '@storybook/addon-docs@10.5.9':
+    resolution: {integrity: sha512-8sFsMkZYrrdqCLdV+hnwTwDF7RaBsBPRwl4wfc8ve9Q/7Yhi5REe/Xjvd8x1yn6fBPPw9tnID9dx6Agdnr81fw==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.5.9
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@storybook/builder-vite@10.5.9':
     resolution: {integrity: sha512-Zg4JbGQiHFPGlFJ9HM+XPgzKmU/RFPCymhohVRJhBBYfmgaQgz0flWWzscseCDpl638MNd8/r/H+nwuoBgSYDg==}
     peerDependencies:
@@ -4189,6 +4207,9 @@ packages:
   '@types/mdast@4.0.3':
     resolution: {integrity: sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==}
 
+  '@types/mdx@2.0.14':
+    resolution: {integrity: sha512-T48PeuJtvLosNTPVhfnIp3i/n3a4g4Bad7YCq5k64D4u7NwDrAotikQ+5+sjtUvBmxCMlbo3dVL+C2dP0rWHzg==}
+
   '@types/ms@0.7.31':
     resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
 
@@ -12199,6 +12220,12 @@ snapshots:
 
   '@marijn/find-cluster-break@1.0.2': {}
 
+  '@mdx-js/react@3.1.1(@types/react@18.0.26)(react@18.2.0)':
+    dependencies:
+      '@types/mdx': 2.0.14
+      '@types/react': 18.0.26
+      react: 18.2.0
+
   '@monaco-editor/loader@1.7.0':
     dependencies:
       state-local: 1.0.7
@@ -13619,6 +13646,25 @@ snapshots:
       axe-core: 4.13.0
       storybook: 10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0)
 
+  '@storybook/addon-docs@10.5.9(@types/react-dom@18.0.10)(@types/react@18.0.26)(esbuild@0.28.1)(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.9.1))(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))':
+    dependencies:
+      '@mdx-js/react': 3.1.1(@types/react@18.0.26)(react@18.2.0)
+      '@storybook/csf-plugin': 10.5.9(esbuild@0.28.1)(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.9.1))(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))
+      '@storybook/icons': 2.1.0(react@18.2.0)
+      '@storybook/react-dom-shim': 10.5.9(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      storybook: 10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0)
+      ts-dedent: 2.3.0
+    optionalDependencies:
+      '@types/react': 18.0.26
+    transitivePeerDependencies:
+      - '@types/react-dom'
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+
   '@storybook/builder-vite@10.5.9(esbuild@0.28.1)(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.9.1))(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))':
     dependencies:
       '@storybook/csf-plugin': 10.5.9(esbuild@0.28.1)(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.9.1))(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))
@@ -14064,6 +14110,8 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.2
 
+  '@types/mdx@2.0.14': {}
+
   '@types/ms@0.7.31': {}
 
   '@types/node@16.18.25': {}

frontend/public/locales/en/channels.json

@@ -151,34 +151,5 @@
   "slack_channel_help": "Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace)",
   "api_key_required": "API Key is mandatory",
 	"to_required": "To field is mandatory",
-	"channel_name_required": "Channel name is mandatory",
-  "field_slack_title_link": "Title link",
-  "field_slack_color": "Color",
-  "help_slack_color": "good, warning, danger, or a hex value like #439FE0. Templates are allowed.",
-  "placeholder_slack_color": "{{ if eq .Status \"firing\" }}danger{{ else }}good{{ end }}",
-  "field_slack_pretext": "Pretext",
-  "help_slack_pretext": "Shown above the attachment block",
-  "field_slack_fallback": "Fallback text",
-  "help_slack_fallback": "Plain text shown where the attachment cannot render, such as push notifications",
-  "field_slack_footer": "Footer",
-  "field_slack_fields": "Fields",
-  "help_slack_fields": "Extra entries rendered as a table inside the attachment",
-  "placeholder_slack_field_title": "Title",
-  "placeholder_slack_field_value": "Value",
-  "field_slack_field_short": "Short",
-  "add_slack_field": "Add field",
-  "remove_slack_field": "Remove field",
-  "field_slack_actions": "Actions",
-  "help_slack_actions": "Buttons rendered under the attachment. A button with a URL links out.",
-  "placeholder_slack_action_text": "Button text",
-  "placeholder_slack_action_url": "https://runbook.example.com",
-  "placeholder_slack_action_type": "button",
-  "placeholder_slack_action_name": "Name (Slack app callbacks)",
-  "placeholder_slack_action_value": "Value (Slack app callbacks)",
-  "placeholder_slack_action_style": "Style: default, primary or danger",
-  "placeholder_slack_action_confirm": "Confirmation prompt (optional)",
-  "add_slack_action": "Add action",
-  "remove_slack_action": "Remove action",
-  "field_webhook_bearer_token": "Bearer token (optional)",
-  "help_webhook_bearer_token": "Sent as an Authorization: Bearer header. Leave the username and password empty when using it."
-}
+	"channel_name_required": "Channel name is mandatory"
+}

frontend/scripts/test-storybook.sh

@@ -28,4 +28,4 @@ until curl -sf http://127.0.0.1:6006/index.json >/dev/null 2>&1; do
 	sleep 1
 done
 
-pnpm exec test-storybook --ci --maxWorkers=2 "$@"
+pnpm exec test-storybook --ci --maxWorkers=2 --testTimeout 30000 "$@"

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -1462,9 +1462,10 @@ describe('PrivateRoute', () => {
 			await assertRedirectsTo(ROUTES.UN_AUTHORIZED);
 		});
 
-		it('lets a VIEWER reach /alerts/channels/new, which authz then gates', () => {
-			// CHANNELS_NEW runs on fine-grained authz, so the router no longer decides
-			// on the role: the page's own guard denies when `create` is not granted.
+		it('should redirect VIEWER from /alerts/channels/new (ADMIN only)', async () => {
+			// After moving channels under /alerts, CHANNELS_NEW ('/alerts/channels/new')
+			// is an exact, ADMIN-only route with no overlapping non-exact ALL_CHANNELS
+			// route to match last, so a VIEWER is now correctly redirected.
 			renderPrivateRoute({
 				initialRoute: ROUTES.CHANNELS_NEW,
 				appContext: {
@@ -1473,7 +1474,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertStaysOnRoute(ROUTES.CHANNELS_NEW);
+			await assertRedirectsTo(ROUTES.UN_AUTHORIZED);
 		});
 
 		it('should allow EDITOR to access /get-started-with-signoz-cloud route', () => {
@@ -1557,11 +1558,6 @@ describe('PrivateRoute', () => {
 			keyof typeof routeWithInitialAuthZSupport,
 			AuthzRouteCase
 		> = {
-			CHANNELS_NEW: { path: ROUTES.CHANNELS_NEW, deniedRoles: DENIED_ROLES },
-			CHANNELS_EDIT: {
-				path: ROUTES.CHANNELS_EDIT.replace(':channelId', 'channel-id-1'),
-				deniedRoles: DENIED_ROLES,
-			},
 			ALL_DASHBOARD: { path: ROUTES.ALL_DASHBOARD, deniedRoles: DENIED_ROLES },
 			DASHBOARD: {
 				path: ROUTES.DASHBOARD.replace(':dashboardId', 'dashboard-id-1'),

frontend/src/api/channels/createEmail.ts

@@ -0,0 +1,40 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createEmail';
+
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const create = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/channels', {
+			name: props.name,
+			email_configs: [
+				{
+					send_resolved: props.send_resolved,
+					to: props.to,
+					html: props.html,
+					headers: props.headers,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default create;

frontend/src/api/channels/createMsTeams.ts

@@ -0,0 +1,40 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createMsTeams';
+
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const create = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/channels', {
+			name: props.name,
+			msteamsv2_configs: [
+				{
+					send_resolved: props.send_resolved,
+					webhook_url: props.webhook_url,
+					title: props.title,
+					text: props.text,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default create;

frontend/src/api/channels/createOpsgenie.ts

@@ -0,0 +1,43 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createOpsgenie';
+
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const create = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/channels', {
+			name: props.name,
+			opsgenie_configs: [
+				{
+					api_key: props.api_key,
+					description: props.description,
+					priority: props.priority,
+					message: props.message,
+					details: {
+						...props.detailsArray,
+					},
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default create;

frontend/src/api/channels/createPager.ts

@@ -0,0 +1,48 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createPager';
+
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const create = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/channels', {
+			name: props.name,
+			pagerduty_configs: [
+				{
+					send_resolved: props.send_resolved,
+					routing_key: props.routing_key,
+					client: props.client,
+					client_url: props.client_url,
+					description: props.description,
+					severity: props.severity,
+					class: props.class,
+					component: props.component,
+					group: props.group,
+					details: {
+						...props.detailsArray,
+					},
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default create;

frontend/src/api/channels/createSlack.ts

@@ -0,0 +1,41 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createSlack';
+
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const create = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/channels', {
+			name: props.name,
+			slack_configs: [
+				{
+					send_resolved: props.send_resolved,
+					api_url: props.api_url,
+					channel: props.channel,
+					title: props.title,
+					text: props.text,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default create;

frontend/src/api/channels/createWebhook.ts

@@ -0,0 +1,59 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createWebhook';
+
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const create = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		let httpConfig = {};
+		const username = props.username ? props.username.trim() : '';
+		const password = props.password ? props.password.trim() : '';
+
+		if (username !== '' && password !== '') {
+			httpConfig = {
+				basic_auth: {
+					username,
+					password,
+				},
+			};
+		} else if (username === '' && password !== '') {
+			httpConfig = {
+				authorization: {
+					type: 'Bearer',
+					credentials: password,
+				},
+			};
+		}
+
+		const response = await axios.post<PayloadProps>('/channels', {
+			name: props.name,
+			webhook_configs: [
+				{
+					send_resolved: props.send_resolved,
+					url: props.api_url,
+					http_config: httpConfig,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default create;

frontend/src/api/channels/delete.ts

@@ -0,0 +1,30 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/delete';
+
+/**
+ * @deprecated Use the generated `useDeleteChannelByID` hook (or `deleteChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const deleteChannel = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.delete<PayloadProps>(`/channels/${props.id}`);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default deleteChannel;

frontend/src/api/channels/editEmail.ts

@@ -0,0 +1,40 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/editEmail';
+
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const editEmail = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
+			name: props.name,
+			email_configs: [
+				{
+					send_resolved: props.send_resolved,
+					to: props.to,
+					html: props.html,
+					headers: props.headers,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default editEmail;

frontend/src/api/channels/editMsTeams.ts

@@ -0,0 +1,40 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/editMsTeams';
+
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const editMsTeams = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
+			name: props.name,
+			msteamsv2_configs: [
+				{
+					send_resolved: props.send_resolved,
+					webhook_url: props.webhook_url,
+					title: props.title,
+					text: props.text,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default editMsTeams;

frontend/src/api/channels/editOpsgenie.ts

@@ -0,0 +1,44 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorResponse, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/editOpsgenie';
+
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const editOpsgenie = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
+			name: props.name,
+			opsgenie_configs: [
+				{
+					send_resolved: props.send_resolved,
+					api_key: props.api_key,
+					description: props.description,
+					priority: props.priority,
+					message: props.message,
+					details: {
+						...props.detailsArray,
+					},
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default editOpsgenie;

frontend/src/api/channels/editPager.ts

@@ -0,0 +1,48 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/editPager';
+
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const editPager = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
+			name: props.name,
+			pagerduty_configs: [
+				{
+					send_resolved: props.send_resolved,
+					routing_key: props.routing_key,
+					client: props.client,
+					client_url: props.client_url,
+					description: props.description,
+					severity: props.severity,
+					class: props.class,
+					component: props.component,
+					group: props.group,
+					details: {
+						...props.detailsArray,
+					},
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default editPager;

frontend/src/api/channels/editSlack.ts

@@ -0,0 +1,41 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/editSlack';
+
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const editSlack = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
+			name: props.name,
+			slack_configs: [
+				{
+					send_resolved: props.send_resolved,
+					api_url: props.api_url,
+					channel: props.channel,
+					title: props.title,
+					text: props.text,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default editSlack;

frontend/src/api/channels/editWebhook.ts

@@ -0,0 +1,59 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/editWebhook';
+
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const editWebhook = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		let httpConfig = {};
+		const username = props.username ? props.username.trim() : '';
+		const password = props.password ? props.password.trim() : '';
+
+		if (username !== '' && password !== '') {
+			httpConfig = {
+				basic_auth: {
+					username,
+					password,
+				},
+			};
+		} else if (username === '' && password !== '') {
+			httpConfig = {
+				authorization: {
+					type: 'Bearer',
+					credentials: password,
+				},
+			};
+		}
+
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
+			name: props.name,
+			webhook_configs: [
+				{
+					send_resolved: props.send_resolved,
+					url: props.api_url,
+					http_config: httpConfig,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default editWebhook;

frontend/src/api/channels/get.ts

@@ -0,0 +1,29 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/get';
+import { Channels } from 'types/api/channels/getAll';
+
+/**
+ * @deprecated Use the generated `useGetChannelByID` hook (or `getChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const get = async (props: Props): Promise<SuccessResponseV2<Channels>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/channels/${props.id}`);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default get;

frontend/src/api/channels/getAll.ts

@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { Channels, PayloadProps } from 'types/api/channels/getAll';
+
+/**
+ * @deprecated Use the generated `useListChannels` hook (or `listChannels` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const getAll = async (): Promise<SuccessResponseV2<Channels[]>> => {
+	try {
+		const response = await axios.get<PayloadProps>('/channels');
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default getAll;

frontend/src/api/channels/testEmail.ts

@@ -0,0 +1,33 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createEmail';
+
+const testEmail = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/testChannel', {
+			name: props.name,
+			email_configs: [
+				{
+					send_resolved: true,
+					to: props.to,
+					html: props.html,
+					headers: props.headers,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default testEmail;

frontend/src/api/channels/testMsTeams.ts

@@ -0,0 +1,33 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createMsTeams';
+
+const testMsTeams = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/testChannel', {
+			name: props.name,
+			msteamsv2_configs: [
+				{
+					send_resolved: true,
+					webhook_url: props.webhook_url,
+					title: props.title,
+					text: props.text,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default testMsTeams;

frontend/src/api/channels/testOpsgenie.ts

@@ -0,0 +1,36 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createOpsgenie';
+
+const testOpsgenie = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/testChannel', {
+			name: props.name,
+			opsgenie_configs: [
+				{
+					api_key: props.api_key,
+					description: props.description,
+					priority: props.priority,
+					message: props.message,
+					details: {
+						...props.detailsArray,
+					},
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default testOpsgenie;

frontend/src/api/channels/testPager.ts

@@ -0,0 +1,41 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createPager';
+
+const testPager = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/testChannel', {
+			name: props.name,
+			pagerduty_configs: [
+				{
+					send_resolved: true,
+					routing_key: props.routing_key,
+					client: props.client,
+					client_url: props.client_url,
+					description: props.description,
+					severity: props.severity,
+					class: props.class,
+					component: props.component,
+					group: props.group,
+					details: {
+						...props.detailsArray,
+					},
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default testPager;

frontend/src/api/channels/testSlack.ts

@@ -0,0 +1,34 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createSlack';
+
+const testSlack = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/testChannel', {
+			name: props.name,
+			slack_configs: [
+				{
+					send_resolved: true,
+					api_url: props.api_url,
+					channel: props.channel,
+					title: props.title,
+					text: props.text,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default testSlack;

frontend/src/api/channels/testWebhook.ts

@@ -0,0 +1,52 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createWebhook';
+
+const testWebhook = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		let httpConfig = {};
+		const username = props.username ? props.username.trim() : '';
+		const password = props.password ? props.password.trim() : '';
+
+		if (username !== '' && password !== '') {
+			httpConfig = {
+				basic_auth: {
+					username,
+					password,
+				},
+			};
+		} else if (username === '' && password !== '') {
+			httpConfig = {
+				authorization: {
+					type: 'Bearer',
+					credentials: password,
+				},
+			};
+		}
+
+		const response = await axios.post<PayloadProps>('/testChannel', {
+			name: props.name,
+			webhook_configs: [
+				{
+					send_resolved: true,
+					url: props.api_url,
+					http_config: httpConfig,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default testWebhook;

frontend/src/components/CustomTimePicker/stories/CustomTimePicker.stories.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import dayjs from 'dayjs';
+import { screen, userEvent } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+
+import CustomTimePicker from '../CustomTimePicker';
+
+const minTime = dayjs('2025-01-15T11:00:00Z').valueOf() * 1_000_000;
+const maxTime = dayjs('2025-01-15T12:00:00Z').valueOf() * 1_000_000;
+
+function TimePickerFixture(): JSX.Element {
+	const [open, setOpen] = useState(false);
+	const [selectedTime, setSelectedTime] = useState('1h');
+
+	return (
+		<CustomTimePicker
+			isModalTimeSelection
+			items={[
+				{ label: 'Last 15 minutes', value: '15m' },
+				{ label: 'Last 1 hour', value: '1h' },
+				{ label: 'Last 6 hours', value: '6h' },
+				{ label: 'Custom', value: 'custom' },
+			]}
+			maxTime={maxTime}
+			minTime={minTime}
+			newPopover
+			open={open}
+			onCustomDateHandler={(): void => undefined}
+			onError={(): void => undefined}
+			onSelect={(value): void => setSelectedTime(value)}
+			onValidCustomDateChange={(): void => undefined}
+			selectedTime={selectedTime}
+			selectedValue="15 Jan 2025 11:00:00 - 15 Jan 2025 12:00:00"
+			setOpen={setOpen}
+		/>
+	);
+}
+
+const meta = {
+	title: 'Components/Custom Time Picker',
+	component: TimePickerFixture,
+	tags: ['play'],
+	decorators: [withCanvas({ maxWidth: 400 })],
+} satisfies Meta<typeof TimePickerFixture>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Interaction: the time-range menu is open with its relative-range choices. */
+export const TimeRangeMenuOpen: Story = {
+	play: async (): Promise<void> => {
+		await userEvent.click(await screen.findByRole('textbox'));
+		await screen.findByText('RELATIVE TIMES');
+	},
+};
+
+/** Interaction: the timezone menu is reached through the real time-range footer. */
+export const TimezoneMenuOpen: Story = {
+	play: async (): Promise<void> => {
+		await userEvent.click(await screen.findByRole('textbox'));
+		await userEvent.click(
+			await screen.findByRole('button', { name: 'Change Timezone' }),
+		);
+		await screen.findByPlaceholderText('Search timezones...');
+	},
+};

frontend/src/components/FieldsSelector/stories/FieldsSelector.stories.mocks.tsx

@@ -0,0 +1,28 @@
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { rest } from 'msw';
+
+import { fieldKeysResponse } from '@/storybook/msw/__story_mockdata__/fields';
+
+export const fieldSuggestionsHandlers = [
+	rest.get('http://localhost/api/v1/fields/keys', (_req, res, ctx) =>
+		res(
+			ctx.status(200),
+			ctx.json(
+				fieldKeysResponse(['service.name', 'body'], {
+					signal: TelemetrytypesSignalDTO.logs,
+				}),
+			),
+		),
+	),
+];
+
+export const noFieldSuggestionsHandlers = [
+	rest.get('http://localhost/api/v1/fields/keys', (_req, res, ctx) =>
+		res(ctx.status(200), ctx.json(fieldKeysResponse([]))),
+	),
+];

frontend/src/components/FieldsSelector/stories/FieldsSelector.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { screen, userEvent } from 'storybook/test';
+import { DataSource } from 'types/common/queryBuilder';
+
+import FieldsSelector from '../FieldsSelector';
+import {
+	fieldSuggestionsHandlers,
+	noFieldSuggestionsHandlers,
+} from './FieldsSelector.stories.mocks';
+
+const meta = {
+	title: 'Components/Fields Selector',
+	component: FieldsSelector,
+	tags: ['play'],
+	args: {
+		allowCustomFields: true,
+		defaultPosition: { x: 40, y: 40 },
+		fields: [
+			{
+				fieldContext: 'log',
+				fieldDataType: 'string',
+				name: 'timestamp',
+				signal: 'logs',
+			},
+		],
+		height: 560,
+		isOpen: true,
+		onClose: (): void => undefined,
+		onFieldsChange: (): void => undefined,
+		signal: DataSource.LOGS,
+		title: 'Edit log columns',
+		width: 420,
+	},
+	parameters: {
+		msw: {
+			handlers: fieldSuggestionsHandlers,
+		},
+	},
+} satisfies Meta<typeof FieldsSelector>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Open: the draggable field editor shows its selected and available columns. */
+export const Open: Story = {};
+
+/** Mutation: adding a suggested field exposes the real unsaved-change footer. */
+export const UnsavedChanges: Story = {
+	play: async (): Promise<void> => {
+		// One Add per suggested field, so the first row's is the one clicked.
+		const [addField] = await screen.findAllByRole('button', { name: 'Add' });
+
+		await userEvent.click(addField);
+		await screen.findByRole('button', { name: 'Save changes' });
+	},
+};
+
+/** Empty: the suggestion request succeeds with no columns to add. */
+export const NoResults: Story = {
+	parameters: {
+		msw: {
+			handlers: noFieldSuggestionsHandlers,
+		},
+	},
+};
+
+/** Limit: available columns cannot be added once the configured maximum is reached. */
+export const MaximumFields: Story = {
+	args: {
+		fields: [
+			{
+				fieldContext: 'log',
+				fieldDataType: 'string',
+				name: 'timestamp',
+				signal: 'logs',
+			},
+			{
+				fieldContext: 'log',
+				fieldDataType: 'string',
+				name: 'severity_text',
+				signal: 'logs',
+			},
+		],
+		maxFields: 2,
+	},
+};
+
+/** Required: mandatory fields remain present without removal controls. */
+export const RequiredFields: Story = {
+	args: {
+		fields: [
+			{
+				fieldContext: 'resource',
+				fieldDataType: 'string',
+				name: 'service.name',
+				signal: 'logs',
+			},
+		],
+		requiredFields: ['resource:service.name:string'],
+	},
+};

frontend/src/components/NewSelect/__test__/CustomSelect.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import CustomSelect from '../CustomSelect';
 
@@ -203,4 +204,21 @@ describe('CustomSelect Component', () => {
 		// Check onChange was called
 		expect(handleChange).toHaveBeenCalled();
 	});
+	it('tells the consumer its search was cleared when the dropdown closes', async () => {
+		// The component clears its own search text on close. A consumer running a
+		// server-side search needs to hear that, or its results outlive the dropdown.
+		const onSearch = jest.fn();
+		const user = userEvent.setup();
+		render(<CustomSelect options={mockOptions} onSearch={onSearch} />);
+
+		const selectElement = screen.getByRole('combobox');
+		await user.click(selectElement);
+		await user.type(selectElement, 'opt');
+
+		expect(onSearch).toHaveBeenLastCalledWith('opt');
+
+		await user.keyboard('{Escape}');
+
+		expect(onSearch).toHaveBeenLastCalledWith('');
+	});
 });

frontend/src/components/NewSelect/stories/NewSelect.stories.tsx

@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { screen, userEvent } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+import type { GlobalMockArgs } from '@/storybook/globals';
+
+import { CustomMultiSelect, CustomSelect } from '../index';
+
+const options = [
+	{ label: 'Checkout', value: 'checkout' },
+	{ label: 'Frontend', value: 'frontend' },
+	{ label: 'Payments', value: 'payments' },
+	{ label: 'Search', value: 'search' },
+];
+
+const longOptions = Array.from({ length: 24 }, (_, index) => ({
+	label: `Service ${String(index + 1).padStart(2, '0')}`,
+	value: `service-${index + 1}`,
+}));
+
+const meta = {
+	title: 'Components/New Select',
+	component: CustomSelect,
+	tags: ['play'],
+	decorators: [withCanvas({ maxWidth: 360 })],
+	args: {
+		'aria-label': 'Service',
+		options,
+		placeholder: 'Select a service',
+	},
+} satisfies Meta<typeof CustomSelect>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+type TooltipsStory = StoryObj<GlobalMockArgs>;
+
+/** Interaction: the body-portal menu is open for stacking and clipping review. */
+export const PortalOpen: Story = {
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Service' }),
+		);
+		await screen.findByRole('listbox');
+	},
+};
+
+/** Density: a long result list keeps the menu scrollable. */
+export const LongResults: Story = {
+	args: { options: longOptions },
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Service' }),
+		);
+		await screen.findByText('Service 24');
+	},
+};
+
+/** Empty: the select reports its supported no-data state. */
+export const NoResults: Story = {
+	args: { noDataMessage: 'No services found', options: [] },
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Service' }),
+		);
+		await screen.findByText('No services found');
+	},
+};
+
+/** Loading: the open menu keeps its in-progress refresh feedback visible. */
+export const Loading: Story = {
+	args: {
+		loading: true,
+		options: [],
+	},
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Service' }),
+		);
+		await screen.findByText('Refreshing values...');
+	},
+};
+
+/** Error: a retryable failed request remains visible in the open menu. */
+export const Error: Story = {
+	args: {
+		errorMessage: 'Could not load services',
+		onRetry: (): void => undefined,
+		options: [],
+	},
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Service' }),
+		);
+		await screen.findByText('Could not load services');
+	},
+};
+
+/** Selection: selected and unavailable options are distinguishable before choosing. */
+export const SelectedDisabled: Story = {
+	args: {
+		options: [
+			{ label: 'Checkout', value: 'checkout' },
+			{ disabled: true, label: 'Legacy billing', value: 'legacy-billing' },
+			{ label: 'Payments', value: 'payments' },
+		],
+		value: 'checkout',
+	},
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Service' }),
+		);
+		await screen.findByRole('option', { name: 'Legacy billing' });
+	},
+};
+
+/** Overflow: a multi-select preserves its selected values when its trigger is constrained. */
+export const MultiValueOverflow: Story = {
+	render: (): JSX.Element => (
+		<div style={{ maxWidth: 280 }}>
+			<CustomMultiSelect
+				aria-label="Services"
+				maxTagCount={2}
+				options={longOptions}
+				value={['service-1', 'service-2', 'service-3', 'service-4']}
+			/>
+		</div>
+	),
+};
+
+const LONG_LABEL_OPTION = {
+	label:
+		'checkout-service.production-eu-central-1.svc.cluster.local:8080/v1/orders/{orderId}/payment-authorisation',
+	value: 'checkout-payment-authorisation',
+};
+
+/**
+ * Every tooltip the select renders, held open: the selected chip revealing the
+ * option label it was cut from. Nothing bounds that label, so the chip is given
+ * one long enough to need the reveal.
+ */
+export const Tooltips: TooltipsStory = {
+	args: { tooltipsOpen: true },
+	render: (): JSX.Element => (
+		<div style={{ maxWidth: 280 }}>
+			<CustomMultiSelect
+				aria-label="Services"
+				maxTagCount={1}
+				maxTagTextLength={14}
+				options={[LONG_LABEL_OPTION, ...options]}
+				value={[LONG_LABEL_OPTION.value]}
+			/>
+		</div>
+	),
+};

frontend/src/components/NewSelect/styles.scss

@@ -258,6 +258,10 @@ $custom-border-color: #2c3044;
 		overflow: hidden;
 
 		.group-label {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+
 			font-weight: 500;
 			padding: 4px 12px;
 			font-size: 13px;
@@ -442,7 +446,7 @@ $custom-border-color: #2c3044;
 		.group-label {
 			display: flex;
 			align-items: center;
-			justify-content: space-between;
+			gap: 4px;
 
 			font-weight: 500;
 			padding: 4px 12px;

frontend/src/components/NotFound/stories/NotFound.stories.mocks.tsx

@@ -0,0 +1,15 @@
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+
+import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
+
+/**
+ * The catch-all has no route of its own: it answers for whatever pathname the
+ * `Switch` ran out of routes for, and it calls nothing.
+ */
+export const notFoundMocks = defineStoryMocks({
+	controls: {},
+	config: () => ({ route: '/no-such-page' }),
+});

frontend/src/components/NotFound/stories/NotFound.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { storyMocks } from '@/storybook/controls/defineStoryMocks';
+import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
+
+import NotFound from '../index';
+import { notFoundMocks } from './NotFound.stories.mocks';
+
+type NotFoundArgs = PageStoryArgs<typeof notFoundMocks>;
+
+/**
+ * The catch-all route mounts it with no props, and its `defaultProps` is what
+ * keeps the component itself from typing as one that takes the story's args.
+ */
+function CatchAllPage(): JSX.Element {
+	return <NotFound />;
+}
+
+const pageStory = storyMocks(notFoundMocks, { layout: 'app' });
+
+/**
+ * The shell around a pathname no route matched: the side nav stays, the content
+ * area carries the 404.
+ *
+ * Route: any unmatched path.
+ */
+const meta = {
+	title: 'Pages/System/Not Found',
+	component: CatchAllPage,
+	...pageStory,
+	parameters: { ...pageStory.parameters },
+} satisfies Meta<NotFoundArgs>;
+
+export default meta;
+
+type Story = StoryObj<NotFoundArgs>;
+
+/**
+ * What the app shows for a pathname no route matched, inside the shell: the
+ * side nav is still there, and the way back is the home button.
+ */
+export const Default: Story = {};

frontend/src/components/QuickFilters/stories/QuickFilters.stories.mocks.tsx

@@ -0,0 +1,126 @@
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+
+import {
+	QuickfiltertypesSourceDTO,
+	TelemetrytypesFieldContextDTO,
+	TelemetrytypesFieldDataTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { rest, type RequestHandler } from 'msw';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+import { attributeValuesResponse } from '@/storybook/msw/__story_mockdata__/attributes';
+import { fieldKeysResponse } from '@/storybook/msw/__story_mockdata__/fields';
+import { quickFiltersResponse } from '@/storybook/msw/__story_mockdata__/quickFilters';
+
+import { FiltersType } from '../types';
+
+const customFilters = [
+	{
+		name: 'service.name',
+		fieldDataType: TelemetrytypesFieldDataTypeDTO.string,
+		fieldContext: TelemetrytypesFieldContextDTO.resource,
+	},
+	{
+		name: 'deployment.environment',
+		fieldDataType: TelemetrytypesFieldDataTypeDTO.string,
+		fieldContext: TelemetrytypesFieldContextDTO.resource,
+	},
+];
+
+export const queryBuilder = {
+	currentQuery: {
+		builder: {
+			queryData: [
+				{
+					filter: { expression: '' },
+					filters: { items: [], op: 'AND' },
+					queryName: 'Logs query',
+				},
+			],
+		},
+	},
+	lastUsedQuery: 0,
+	panelType: 'graph',
+	redirectWithQueryBuilderData: (): void => undefined,
+	setLastUsedQuery: (): void => undefined,
+};
+
+export const checkboxConfig = [
+	{
+		attributeKey: {
+			dataType: DataTypes.String,
+			key: 'service.name',
+			type: 'resource',
+		},
+		defaultOpen: true,
+		title: 'Service name',
+		type: FiltersType.CHECKBOX,
+	},
+];
+
+export const attributeValuesHandler = (
+	values: readonly string[],
+): RequestHandler =>
+	rest.get(
+		'http://localhost/api/v3/autocomplete/attribute_values',
+		(_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(attributeValuesResponse(values))),
+	);
+
+export const handlers = [
+	rest.get('http://localhost/api/v2/quick_filters/logs', (_req, res, ctx) =>
+		res(
+			ctx.status(200),
+			ctx.json(
+				quickFiltersResponse(QuickfiltertypesSourceDTO.logs, customFilters),
+			),
+		),
+	),
+	rest.get('http://localhost/api/v1/fields/keys', (_req, res, ctx) =>
+		res(ctx.status(200), ctx.json(fieldKeysResponse(['k8s.namespace.name']))),
+	),
+	attributeValuesHandler(['checkout', 'frontend', 'payments']),
+];
+
+export const loadingFiltersHandlers = [
+	rest.get('http://localhost/api/v2/quick_filters/logs', (_req, res, ctx) =>
+		res(ctx.delay('infinite')),
+	),
+];
+
+export const LONG_FILTER_VALUES = [
+	'checkout-service.production-eu-central-1.svc.cluster.local',
+	'payments-authorisation-worker.production-us-east-2.svc.cluster.local',
+	'catalog-availability-projector.staging-ap-south-1.svc.cluster.local',
+];
+
+export const selectedServiceQueryBuilder = {
+	...queryBuilder,
+	currentQuery: {
+		builder: {
+			queryData: [
+				{
+					filter: { expression: '' },
+					filters: {
+						items: [
+							{
+								key: {
+									dataType: DataTypes.String,
+									key: 'service.name',
+									type: 'resource',
+								},
+								op: 'in',
+								value: ['checkout', 'payments'],
+							},
+						],
+						op: 'AND',
+					},
+					queryName: 'Logs query',
+				},
+			],
+		},
+	},
+};

frontend/src/components/QuickFilters/stories/QuickFilters.stories.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ComponentProps, ComponentType } from 'react';
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+import type { GlobalMockArgs } from '@/storybook/globals';
+
+import QuickFilters from '../QuickFilters';
+import {
+	attributeValuesHandler,
+	checkboxConfig,
+	handlers,
+	LONG_FILTER_VALUES,
+	loadingFiltersHandlers,
+	queryBuilder,
+	selectedServiceQueryBuilder,
+} from './QuickFilters.stories.mocks';
+import { QuickFiltersSource, SignalType } from '../types';
+
+const meta = {
+	title: 'Components/Quick Filters',
+	// `QuickFilters.defaultProps` declares `onFilterChange: null` against a prop
+	// typed as an optional function, so the component does not satisfy
+	// `ComponentType` as written. The defaults are load-bearing for the jest
+	// suite, hence the cast rather than a change to them.
+	component: QuickFilters as unknown as ComponentType<
+		ComponentProps<typeof QuickFilters>
+	>,
+	tags: ['play'],
+	// The rail the explorers give it (`Explorer.styles.scss`, `.filter`).
+	decorators: [withCanvas({ width: 260 })],
+	args: {
+		config: checkboxConfig,
+		handleFilterVisibilityChange: (): void => undefined,
+		signal: SignalType.LOGS,
+		source: QuickFiltersSource.LOGS_EXPLORER,
+	},
+	parameters: {
+		msw: { handlers },
+		signoz: { queryBuilder },
+	},
+} satisfies Meta<typeof QuickFilters>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+type TooltipsStory = StoryObj<
+	ComponentProps<typeof QuickFilters> & GlobalMockArgs
+>;
+
+/**
+ * The settings control renders disabled while its permission check is in
+ * flight and is swapped for the enabled one once the check answers, so it is
+ * looked up again on every attempt; a click on the disabled one is dropped in
+ * silence.
+ */
+const settingsControl = (canvasElement: HTMLElement): Promise<HTMLElement> =>
+	waitFor(() => {
+		const control = within(canvasElement).getByTestId('settings-icon-container');
+
+		expect(control).toBeEnabled();
+
+		return control;
+	});
+
+/** Interaction: the settings panel is opened through the admin settings control. */
+export const SettingsOpen: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(await settingsControl(canvasElement));
+		await screen.findByText('Edit quick filters');
+	},
+};
+
+/** Mutation: changing the settings list reveals the fixed save and discard footer. */
+export const SettingsDirtyFooter: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(await settingsControl(canvasElement));
+		await userEvent.click(await screen.findByRole('button', { name: 'Add' }));
+		await screen.findByRole('button', { name: 'Save changes' });
+	},
+};
+
+/** Loading: dynamic filters are intentionally left pending to display the panel skeleton. */
+export const LoadingFilters: Story = {
+	parameters: {
+		msw: {
+			handlers: loadingFiltersHandlers,
+		},
+	},
+};
+
+/** Empty: a loaded quick-filter configuration with no filters has no result rows. */
+export const NoResults: Story = {
+	args: { config: [], signal: undefined },
+};
+
+/** Selection: an expanded checkbox shows the actual selected service values. */
+export const SelectedExpandedCheckbox: Story = {
+	args: { signal: undefined },
+	parameters: {
+		signoz: {
+			queryBuilder: selectedServiceQueryBuilder,
+		},
+	},
+};
+
+/**
+ * Every tooltip the panel renders, held open: the reveal on each truncated
+ * filter value. Nothing bounds those values, so the panel is answered with
+ * service names long enough to be cut. The Service name filter carries them, so
+ * the signal that would add the workspace's own dynamic filters is left off.
+ */
+export const Tooltips: TooltipsStory = {
+	args: { signal: undefined, tooltipsOpen: true },
+	parameters: {
+		msw: { handlers: [attributeValuesHandler(LONG_FILTER_VALUES), ...handlers] },
+	},
+};

frontend/src/components/SignozModal/stories/SignozModal.stories.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@signozhq/ui/button';
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+
+import { CustomSelect } from '../../NewSelect';
+import SignozModal from '../SignozModal';
+
+function ModalFixture(): JSX.Element {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<>
+			<Button data-testid="open-signoz-modal" onClick={(): void => setOpen(true)}>
+				Open modal
+			</Button>
+			<SignozModal
+				footer={null}
+				open={open}
+				onCancel={(): void => setOpen(false)}
+				title="Create saved view"
+			>
+				<CustomSelect
+					aria-label="View scope"
+					options={[
+						{ label: 'This workspace', value: 'workspace' },
+						{ label: 'My views', value: 'personal' },
+					]}
+					placeholder="Select a scope"
+				/>
+			</SignozModal>
+		</>
+	);
+}
+
+const meta = {
+	title: 'Components/Signoz Modal',
+	component: ModalFixture,
+	tags: ['play'],
+	decorators: [withCanvas({ maxWidth: 400 })],
+} satisfies Meta<typeof ModalFixture>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Interaction: the modal and its nested body-portal select are both genuinely open. */
+export const OpenWithNestedSelect: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		const trigger = within(canvasElement).getByTestId('open-signoz-modal');
+
+		await userEvent.click(trigger);
+		await screen.findByRole('dialog', { name: 'Create saved view' });
+		await userEvent.keyboard('{Escape}');
+		await waitFor(() => expect(trigger).toHaveFocus());
+		await userEvent.click(trigger);
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'View scope' }),
+		);
+		await screen.findByRole('listbox');
+	},
+};

frontend/src/components/TableV3/TableV3.tsx

@@ -71,7 +71,7 @@ interface ITableConfig {
 		instance: Virtualizer<HTMLDivElement, Element>,
 	) => void;
 }
-interface ITableV3Props<T> {
+export interface ITableV3Props<T> {
 	columns: ColumnDef<T, any>[];
 	data: T[];
 	config: ITableConfig;
@@ -201,5 +201,5 @@ export function TableV3<T>(props: ITableV3Props<T>): JSX.Element {
 
 TableV3.defaultProps = {
 	customClassName: '',
-	virtualiserRef: null,
+	virtualiserRef: undefined,
 };

frontend/src/components/TableV3/stories/TableV3.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ColumnDef } from '@tanstack/react-table';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+
+import type { ITableV3Props } from '../TableV3';
+import { TableV3 } from '../TableV3';
+
+type TraceRow = {
+	id: string;
+	traceId: string;
+	service: string;
+	duration: string;
+	status: string;
+};
+
+const columns: ColumnDef<TraceRow>[] = [
+	{ accessorKey: 'traceId', header: 'Trace ID', size: 280 },
+	{ accessorKey: 'service', header: 'Service', size: 220 },
+	{ accessorKey: 'duration', header: 'Duration', size: 140 },
+	{ accessorKey: 'status', header: 'Status', size: 160 },
+];
+
+const rows: TraceRow[] = Array.from({ length: 40 }, (_, index) => ({
+	id: `trace-${index + 1}`,
+	traceId: `c0ffee${String(index + 1).padStart(10, '0')}7f4a9d1c`,
+	service: index % 2 === 0 ? 'checkout-service' : 'catalog-service',
+	duration: `${80 + index * 6} ms`,
+	status: index % 5 === 0 ? 'Error' : 'OK',
+}));
+
+const meta = {
+	title: 'Components/Table V3',
+	component: TableV3,
+	decorators: [withCanvas({ height: 360, maxWidth: 640, overflow: 'auto' })],
+	args: {
+		columns,
+		config: { defaultColumnMinSize: 120, defaultColumnMaxSize: 400 },
+		data: rows,
+		setColumnWidths: (): void => undefined,
+	},
+} satisfies Meta<ITableV3Props<TraceRow>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Density and overflow: the virtualized table's wide, resizable column layout. */
+export const WideVirtualizedDataset: Story = {};
+
+/** Data: the table's native no-row layout, with headers retained for structural review. */
+export const EmptyDataset: Story = {
+	args: { data: [] },
+};

frontend/src/components/TanStackTableView/stories/TanStackTableView.stories.tsx

@@ -0,0 +1,239 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Color } from '@signozhq/design-tokens';
+import { Ellipsis } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { GroupedStatusCounts } from 'container/InfraMonitoringK8sV2/components/GroupedStatusCounts';
+import type { StatusCountItem } from 'container/InfraMonitoringK8sV2/components/GroupedStatusCounts';
+import { ValidateColumnValueWrapper } from 'container/InfraMonitoringK8sV2/components/ValidateColumnValueWrapper';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import { expect, screen, userEvent, within } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+import type { GlobalMockArgs } from '@/storybook/globals';
+
+import TanStackTable from '../index';
+import type { TableColumnDef, TanStackTableProps } from '../types';
+
+type ServiceRow = {
+	id: string;
+	service: string;
+	endpoint: string;
+	latency: string;
+	owner: string;
+};
+
+const rows: ServiceRow[] = [
+	{
+		id: 'checkout',
+		service: 'checkout-service',
+		endpoint: 'POST /api/v1/checkout',
+		latency: '184 ms',
+		owner: 'Payments platform',
+	},
+	{
+		id: 'catalog',
+		service: 'catalog-service',
+		endpoint: 'GET /api/v2/products/{productId}/availability',
+		latency: '96 ms',
+		owner: 'Storefront experience',
+	},
+	{
+		id: 'identity',
+		service: 'identity-service',
+		endpoint: 'POST /api/v1/session/refresh',
+		latency: '242 ms',
+		owner: 'Identity and access management',
+	},
+];
+
+const columns: TableColumnDef<ServiceRow>[] = [
+	{
+		id: 'service',
+		header: 'Service',
+		accessorKey: 'service',
+		pin: 'left',
+		width: { fixed: 180 },
+		enableSort: true,
+		cell: ({ value }): JSX.Element => (
+			<TanStackTable.Text>{String(value)}</TanStackTable.Text>
+		),
+	},
+	{
+		id: 'endpoint',
+		header: 'Endpoint',
+		accessorKey: 'endpoint',
+		width: { fixed: 320 },
+		cell: ({ value }): JSX.Element => (
+			<TanStackTable.Text title={String(value)}>
+				{String(value)}
+			</TanStackTable.Text>
+		),
+	},
+	{
+		id: 'latency',
+		header: 'P95 latency',
+		accessorKey: 'latency',
+		width: { fixed: 140 },
+		enableSort: true,
+		cell: ({ value }): JSX.Element => (
+			<TanStackTable.Text>{String(value)}</TanStackTable.Text>
+		),
+	},
+	{
+		id: 'owner',
+		header: 'Owner',
+		accessorKey: 'owner',
+		width: { fixed: 240 },
+		cell: ({ value }): JSX.Element => (
+			<TanStackTable.Text>{String(value)}</TanStackTable.Text>
+		),
+	},
+];
+
+const rowActions = (): JSX.Element => (
+	<DropdownMenuSimple
+		align="end"
+		menu={{
+			items: [
+				{ key: 'open', label: 'Open service details' },
+				{ key: 'copy', label: 'Copy service link' },
+			],
+		}}
+	>
+		<Button
+			aria-label="Service actions"
+			color="secondary"
+			size="icon"
+			variant="outlined"
+		>
+			<Ellipsis size={16} />
+		</Button>
+	</DropdownMenuSimple>
+);
+
+const meta = {
+	title: 'Components/TanStack Table View',
+	component: TanStackTable,
+	tags: ['play'],
+	decorators: [withCanvas({ height: 360, maxWidth: 640 })],
+	args: {
+		columns,
+		data: rows,
+		disableVirtualScroll: true,
+		getRowKey: (row): string => row.id,
+	},
+} satisfies Meta<TanStackTableProps<ServiceRow>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+type TooltipsStory = StoryObj<GlobalMockArgs>;
+
+/** Data and overflow: pinned columns, clipped long cells, and a horizontal scroll surface. */
+export const HorizontalOverflow: Story = {
+	args: { testId: 'tanstack-table' },
+};
+
+/** Data: a page-sized result with the shared pagination controls and total count. */
+export const Pagination: Story = {
+	args: {
+		pagination: { total: 42, defaultLimit: 10, showTotalCount: true },
+	},
+};
+
+/** Data: the supported empty result keeps the table structure without a fabricated empty state. */
+export const Empty: Story = {
+	args: { data: [], testId: 'tanstack-empty-table' },
+};
+
+/** Data: the table's real skeleton rows shown while the first page is loading. */
+export const Loading: Story = {
+	args: { data: [], isLoading: true, skeletonRowCount: 5 },
+};
+
+/** Interaction: opens a row action menu rendered through the shared portal. */
+export const RowActionsMenu: Story = {
+	args: { renderRowActions: rowActions, testId: 'tanstack-actions-table' },
+	play: async ({ canvasElement }): Promise<void> => {
+		const firstRow = within(canvasElement).getByTestId('tanstack-actions-table');
+
+		await userEvent.hover(firstRow.querySelector('tbody tr') as HTMLElement);
+		await userEvent.click(
+			await within(firstRow).findByLabelText('Service actions'),
+		);
+		await expect(
+			await screen.findByRole('menuitem', { name: 'Open service details' }),
+		).toBeVisible();
+	},
+};
+
+const RESTART_COUNTS: StatusCountItem[] = [
+	{
+		label: 'Restarts in the last 24 hours',
+		value: 37,
+		color: Color.BG_CHERRY_500,
+		breakdown: [
+			{ label: 'CrashLoopBackOff', value: 14 },
+			{ label: 'OOMKilled', value: 11 },
+			{ label: 'Liveness probe failed', value: 6 },
+			{ label: 'Readiness probe failed', value: 4 },
+			{ label: 'Image pull backoff', value: 2 },
+		],
+	},
+];
+
+const tooltipColumns: TableColumnDef<ServiceRow>[] = [
+	columns[0],
+	{
+		id: 'cpuRequest',
+		header: 'CPU request',
+		width: { fixed: 140 },
+		cell: ({ rowId }): JSX.Element => (
+			<ValidateColumnValueWrapper
+				attribute="CPU request"
+				entity={InfraMonitoringEntity.PODS}
+				rowId={rowId}
+				value={-1}
+			>
+				<TanStackTable.Text>0.5</TanStackTable.Text>
+			</ValidateColumnValueWrapper>
+		),
+	},
+	{
+		id: 'restarts',
+		header: 'Restarts',
+		width: { fixed: 140 },
+		cell: ({ rowId }): JSX.Element => (
+			<GroupedStatusCounts items={RESTART_COUNTS} rowId={rowId} />
+		),
+	},
+];
+
+/**
+ * Both tooltips a hovered row carries, held open: the plain sentence explaining
+ * a missing value, and the status breakdown, which is elements rather than text
+ * and grows a row per reason. Neither is rendered until the row is hovered, so
+ * the play hovers the first one and the control holds what it uncovered.
+ */
+export const Tooltips: TooltipsStory = {
+	args: { tooltipsOpen: true },
+	render: (): JSX.Element => (
+		<TanStackTable
+			columns={tooltipColumns}
+			data={rows}
+			disableVirtualScroll
+			getRowKey={(row): string => row.id}
+			testId="tanstack-tooltips-table"
+		/>
+	),
+	play: async ({ canvasElement }): Promise<void> => {
+		const table = within(canvasElement).getByTestId('tanstack-tooltips-table');
+
+		await userEvent.hover(table.querySelector('tbody tr') as HTMLElement);
+		// Both tooltips are rendered by the hovered row, so this is what says the
+		// control has something to hold open.
+		await screen.findByText('Restarts in the last 24 hours');
+	},
+};

frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx

@@ -450,6 +450,12 @@ export default function ChatInput({
 			return;
 		}
 		el.style.height = 'auto';
+		// A hidden composer (a closed drawer, a story swapping in) measures 0.
+		// Leaving the height on `auto` keeps the `rows` fallback until there is
+		// something real to measure, instead of pinning the field shut.
+		if (el.scrollHeight === 0) {
+			return;
+		}
 		el.style.height = `${Math.min(el.scrollHeight, TEXTAREA_MAX_HEIGHT_PX)}px`;
 	}, [text]);
 

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -0,0 +1,77 @@
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { generatePath } from 'react-router-dom';
+import { Button } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
+import { ResizeTable } from 'components/ResizeTable';
+import ROUTES from 'constants/routes';
+import useComponentPermission from 'hooks/useComponentPermission';
+import { useNotifications } from 'hooks/useNotifications';
+import history from 'lib/history';
+import { useAppContext } from 'providers/App/App';
+import { Channels } from 'types/api/channels/getAll';
+
+import Delete from './Delete';
+
+function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
+	const { t } = useTranslation(['channels']);
+	const { notifications } = useNotifications();
+	const { user } = useAppContext();
+	const [action] = useComponentPermission(['new_alert_action'], user.role);
+
+	const onClickEditHandler = useCallback((id: string) => {
+		history.push(
+			generatePath(ROUTES.CHANNELS_EDIT, {
+				channelId: id,
+			}),
+		);
+	}, []);
+
+	const columns: ColumnsType<Channels> = [
+		{
+			title: t('column_channel_name'),
+			dataIndex: 'name',
+			key: 'name',
+			width: 100,
+		},
+		{
+			title: t('column_channel_type'),
+			dataIndex: 'type',
+			key: 'type',
+			width: 80,
+		},
+	];
+
+	if (action) {
+		columns.push({
+			title: t('column_channel_action'),
+			dataIndex: 'id',
+			key: 'action',
+			align: 'center',
+			width: 80,
+			render: (id: string): JSX.Element => (
+				<>
+					<Button onClick={(): void => onClickEditHandler(id)} type="link">
+						{t('column_channel_edit')}
+					</Button>
+					<Delete id={id} notifications={notifications} />
+				</>
+			),
+		});
+	}
+
+	return (
+		<ResizeTable
+			columns={columns}
+			dataSource={allChannels}
+			rowKey="id"
+			bordered
+		/>
+	);
+}
+
+interface AlertChannelsProps {
+	allChannels: Channels[];
+}
+
+export default AlertChannels;

frontend/src/container/AllAlertChannels/AllAlertChannels.styles.scss

@@ -0,0 +1,4 @@
+.alert-channels-container {
+	width: 100%;
+	padding: 0 var(--spacing-8);
+}

frontend/src/container/AllAlertChannels/Delete.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQueryClient } from 'react-query';
+import { Button } from 'antd';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import deleteChannel from 'api/channels/delete';
+import APIError from 'types/api/error';
+
+function Delete({ notifications, id }: DeleteProps): JSX.Element {
+	const { t } = useTranslation(['channels']);
+	const [loading, setLoading] = useState(false);
+	const queryClient = useQueryClient();
+
+	const onClickHandler = async (): Promise<void> => {
+		try {
+			setLoading(true);
+			await deleteChannel({
+				id,
+			});
+
+			notifications.success({
+				message: 'Success',
+				description: t('channel_delete_success'),
+			});
+			// Invalidate and refetch
+			queryClient.invalidateQueries(['getChannels']);
+			setLoading(false);
+		} catch (error) {
+			notifications.error({
+				message: (error as APIError).getErrorCode(),
+				description: (error as APIError).getErrorMessage(),
+			});
+			setLoading(false);
+		}
+	};
+
+	return (
+		<Button
+			loading={loading}
+			disabled={loading}
+			type="link"
+			onClick={onClickHandler}
+		>
+			Delete
+		</Button>
+	);
+}
+
+interface DeleteProps {
+	notifications: NotificationInstance;
+	id: string;
+}
+
+export default Delete;

frontend/src/container/AllAlertChannels/__tests__/AlertChannels.test.tsx

@@ -0,0 +1,84 @@
+import ROUTES from 'constants/routes';
+import AlertChannels from 'container/AllAlertChannels';
+import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';
+
+const successNotification = jest.fn();
+jest.mock('hooks/useNotifications', () => ({
+	__esModule: true,
+	useNotifications: jest.fn(() => ({
+		notifications: {
+			success: successNotification,
+			error: jest.fn(),
+		},
+	})),
+}));
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.ALL_CHANNELS}`,
+	}),
+}));
+
+describe('Alert Channels Settings List page', () => {
+	beforeEach(async () => {
+		jest.useFakeTimers();
+		jest.setSystemTime(new Date('2023-10-20'));
+		render(<AlertChannels />);
+		await waitFor(() =>
+			expect(screen.getByText('sending_channels_note')).toBeInTheDocument(),
+		);
+	});
+	afterEach(() => {
+		jest.restoreAllMocks();
+		jest.useRealTimers();
+	});
+	describe('Should display the Alert Channels page properly', () => {
+		it('Should check if "The alerts will be sent to all the configured channels." is visible', () => {
+			expect(screen.getByText('sending_channels_note')).toBeInTheDocument();
+		});
+		it('Should check if "New Alert Channel" Button is visble', () => {
+			expect(screen.getByText('button_new_channel')).toBeInTheDocument();
+		});
+		it('Should check if the help icon is visible and displays "tooltip_notification_channels', async () => {
+			const helpIcon = screen.getByRole('img', { name: /help/i });
+
+			fireEvent.mouseOver(helpIcon);
+
+			await waitFor(() => {
+				const tooltip = screen.getByText('tooltip_notification_channels');
+				expect(tooltip).toBeInTheDocument();
+			});
+		});
+	});
+	describe('Should check if the channels table is properly displayed', () => {
+		it('Should check if the table columns are properly displayed', () => {
+			expect(screen.getByText('column_channel_name')).toBeInTheDocument();
+			expect(screen.getByText('column_channel_type')).toBeInTheDocument();
+			expect(screen.getByText('column_channel_action')).toBeInTheDocument();
+		});
+
+		it('Should check if the data in the table is displayed properly', () => {
+			expect(screen.getByText('Dummy-Channel')).toBeInTheDocument();
+			expect(screen.getAllByText('slack')[0]).toBeInTheDocument();
+			expect(screen.getAllByText('column_channel_edit')[0]).toBeInTheDocument();
+			expect(screen.getAllByText('Delete')[0]).toBeInTheDocument();
+		});
+
+		it('Should check if clicking on Delete displays Success Toast "Channel Deleted Successfully"', async () => {
+			const deleteButton = screen.getAllByRole('button', { name: 'Delete' })[0];
+			expect(deleteButton).toBeInTheDocument();
+
+			act(() => {
+				fireEvent.click(deleteButton);
+			});
+
+			await waitFor(() => {
+				expect(successNotification).toHaveBeenCalledWith({
+					message: 'Success',
+					description: 'channel_delete_success',
+				});
+			});
+		});
+	});
+});

frontend/src/container/AllAlertChannels/__tests__/AlertChannelsNormalUser.test.tsx

@@ -0,0 +1,78 @@
+import ROUTES from 'constants/routes';
+import AlertChannels from 'container/AllAlertChannels';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
+
+const successNotification = jest.fn();
+jest.mock('hooks/useNotifications', () => ({
+	__esModule: true,
+	useNotifications: jest.fn(() => ({
+		notifications: {
+			success: successNotification,
+			error: jest.fn(),
+		},
+	})),
+}));
+
+jest.mock('hooks/useComponentPermission', () => ({
+	__esModule: true,
+	default: jest.fn().mockImplementation(() => [false]),
+}));
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.ALL_CHANNELS}`,
+	}),
+}));
+
+describe('Alert Channels Settings List page (Normal User)', () => {
+	beforeEach(async () => {
+		jest.useFakeTimers();
+		render(<AlertChannels />);
+		await waitFor(() =>
+			expect(screen.getByText('sending_channels_note')).toBeInTheDocument(),
+		);
+	});
+	afterEach(() => {
+		jest.restoreAllMocks();
+		jest.useRealTimers();
+	});
+	describe('Should display the Alert Channels page properly', () => {
+		it('Should check if "The alerts will be sent to all the configured channels." is visible', async () => {
+			await waitFor(() =>
+				expect(screen.getByText('sending_channels_note')).toBeInTheDocument(),
+			);
+		});
+
+		it('Should check if "New Alert Channel" Button is visble and disabled', async () => {
+			const newAlertButton = screen.getByRole('button', {
+				name: /button_new_channel/i,
+			});
+			await waitFor(() => expect(newAlertButton).toBeInTheDocument());
+			expect(newAlertButton).toBeDisabled();
+		});
+		it('Should check if the help icon is visible and displays "tooltip_notification_channels', async () => {
+			const helpIcon = screen.getByRole('img', { name: /help/i });
+			fireEvent.mouseOver(helpIcon);
+
+			await waitFor(() => {
+				const tooltip = screen.getByText('tooltip_notification_channels');
+				expect(tooltip).toBeInTheDocument();
+			});
+		});
+	});
+	describe('Should check if the channels table is properly displayed', () => {
+		it('Should check if the table columns are properly displayed', async () => {
+			expect(screen.getByText('column_channel_name')).toBeInTheDocument();
+			expect(screen.getByText('column_channel_type')).toBeInTheDocument();
+			expect(screen.queryByText('column_channel_action')).not.toBeInTheDocument();
+		});
+
+		it('Should check if the data in the table is displayed properly', async () => {
+			expect(screen.getByText('Dummy-Channel')).toBeInTheDocument();
+			expect(screen.getAllByText('slack')[0]).toBeInTheDocument();
+			expect(screen.queryByText('column_channel_edit')).not.toBeInTheDocument();
+			expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+		});
+	});
+});

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannel.test.tsx

@@ -0,0 +1,914 @@
+import CreateAlertChannels from 'container/CreateAlertChannels';
+import { ChannelType } from 'container/CreateAlertChannels/config';
+import {
+	GoogleChatInitialConfig,
+	IncidentIOInitialConfig,
+	JiraInitialConfig,
+	JsmOpsInitialConfig,
+} from 'container/CreateAlertChannels/defaults';
+import {
+	googleChatDescriptionDefaultValue,
+	googleChatTitleDefaultValue,
+	opsGenieDescriptionDefaultValue,
+	opsGenieMessageDefaultValue,
+	opsGeniePriorityDefaultValue,
+	pagerDutyAdditionalDetailsDefaultValue,
+	pagerDutyDescriptionDefaultValue,
+	pagerDutySeverityTextDefaultValue,
+	slackDescriptionDefaultValue,
+	slackTitleDefaultValue,
+} from 'mocks-server/__mockdata__/alerts';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+} from 'tests/test-utils';
+
+import { testLabelInputAndHelpValue } from './testUtils';
+
+const successNotification = jest.fn();
+const errorNotification = jest.fn();
+jest.mock('hooks/useNotifications', () => ({
+	__esModule: true,
+	useNotifications: jest.fn(() => ({
+		notifications: {
+			success: successNotification,
+			error: errorNotification,
+		},
+	})),
+}));
+const showErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
+	__esModule: true,
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
+		showErrorModal,
+	})),
+}));
+
+jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({
+	MarkdownRenderer: jest.fn(() => <div>Mocked MarkdownRenderer</div>),
+}));
+
+describe('Create Alert Channel', () => {
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+	describe('Should check if the new alert channel is properly displayed with the cascading fields of slack channel', () => {
+		beforeEach(() => {
+			render(<CreateAlertChannels preType={ChannelType.Slack} />);
+		});
+		afterEach(() => {
+			jest.clearAllMocks();
+		});
+		it('Should check if the title is "New Notification Channels"', () => {
+			expect(screen.getByText('page_title_create')).toBeInTheDocument();
+		});
+		it('Should check if the name label and textbox are displayed properly', () => {
+			testLabelInputAndHelpValue({
+				labelText: 'field_channel_name',
+				testId: 'channel-name-textbox',
+			});
+		});
+		it('Should check if Send resolved alerts label and checkbox are displayed properly', () => {
+			testLabelInputAndHelpValue({
+				labelText: 'field_send_resolved',
+				testId: 'field-send-resolved-checkbox',
+			});
+		});
+		it('Should check if channel type label and dropdown are displayed properly', () => {
+			testLabelInputAndHelpValue({
+				labelText: 'field_channel_type',
+				testId: 'channel-type-select',
+			});
+		});
+		// Default Channel type (Slack) fields
+		it('Should check if the selected item in the type dropdown has text "Slack"', () => {
+			expect(screen.getByText('Slack')).toBeInTheDocument();
+		});
+		it('Should check if Webhook URL label and input are displayed properly', () => {
+			testLabelInputAndHelpValue({
+				labelText: 'field_webhook_url',
+				testId: 'webhook-url-textbox',
+			});
+		});
+		it('Should check if Recepient label, input, and help text are displayed properly', () => {
+			testLabelInputAndHelpValue({
+				labelText: 'field_slack_recipient',
+				testId: 'slack-channel-textbox',
+				helpText: 'slack_channel_help',
+			});
+		});
+
+		it('Should check if Title label and text area are displayed properly', () => {
+			testLabelInputAndHelpValue({
+				labelText: 'field_slack_title',
+				testId: 'title-textarea',
+			});
+		});
+		it('Should check if Title contains template', () => {
+			const titleTextArea = screen.getByTestId('title-textarea');
+
+			expect(titleTextArea).toHaveTextContent(slackTitleDefaultValue);
+		});
+		it('Should check if Description label and text area are displayed properly', () => {
+			testLabelInputAndHelpValue({
+				labelText: 'field_slack_description',
+				testId: 'description-textarea',
+			});
+		});
+		it('Should check if Description contains template', () => {
+			const descriptionTextArea = screen.getByTestId('description-textarea');
+
+			expect(descriptionTextArea).toHaveTextContent(slackDescriptionDefaultValue);
+		});
+		it('Should check if the form buttons are displayed properly (Save, Test, Back)', () => {
+			expect(screen.getByText('button_save_channel')).toBeInTheDocument();
+			expect(screen.getByText('button_test_channel')).toBeInTheDocument();
+			expect(screen.getByText('button_return')).toBeInTheDocument();
+		});
+		it('Should check if saving the form without filling the name displays error notification', async () => {
+			const saveButton = screen.getByRole('button', {
+				name: 'button_save_channel',
+			});
+
+			fireEvent.click(saveButton);
+
+			await waitFor(() =>
+				expect(errorNotification).toHaveBeenCalledWith({
+					message: 'Error',
+					description: 'channel_name_required',
+				}),
+			);
+		});
+		it('Should check if clicking on Test button shows "An alert has been sent to this channel" success message if testing passes', async () => {
+			server.use(
+				rest.post('http://localhost/api/v1/testChannel', (req, res, ctx) =>
+					res(
+						ctx.status(200),
+						ctx.json({
+							status: 'success',
+							data: 'test alert sent',
+						}),
+					),
+				),
+			);
+			const testButton = screen.getByRole('button', {
+				name: 'button_test_channel',
+			});
+
+			fireEvent.click(testButton);
+
+			await waitFor(() =>
+				expect(successNotification).toHaveBeenCalledWith({
+					message: 'Success',
+					description: 'channel_test_done',
+				}),
+			);
+		});
+		it('Should check if clicking on Test button shows "Something went wrong" error message if testing fails', async () => {
+			const testButton = screen.getByRole('button', {
+				name: 'button_test_channel',
+			});
+
+			act(() => {
+				fireEvent.click(testButton);
+			});
+
+			await waitFor(() => expect(showErrorModal).toHaveBeenCalled());
+		});
+	});
+	describe('New Alert Channel Cascading Fields Based on Channel Type', () => {
+		describe('Webhook', () => {
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.Webhook} />);
+			});
+
+			it('Should check if the selected item in the type dropdown has text "Webhook"', () => {
+				expect(screen.getByText('Webhook')).toBeInTheDocument();
+			});
+			it('Should check if Webhook URL label and input are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_webhook_url',
+					testId: 'webhook-url-textbox',
+				});
+			});
+			it('Should check if Webhook User Name label, input, and help text are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_webhook_username',
+					testId: 'webhook-username-textbox',
+					helpText: 'help_webhook_username',
+				});
+			});
+			it('Should check if Password label and textbox, and help text are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'Password (optional)',
+					testId: 'webhook-password-textbox',
+					helpText: 'help_webhook_password',
+				});
+			});
+		});
+		describe('PagerDuty', () => {
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.Pagerduty} />);
+			});
+
+			it('Should check if the selected item in the type dropdown has text "Pagerduty"', () => {
+				expect(screen.getByText('Pagerduty')).toBeInTheDocument();
+			});
+			it('Should check if Routing key label, required, and textbox are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_routing_key',
+					testId: 'pager-routing-key-textbox',
+				});
+			});
+			it('Should check if Description label, required, info (Shows up as description in pagerduty), and text area are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_description',
+					testId: 'pager-description-textarea',
+					helpText: 'help_pager_description',
+				});
+			});
+			it('Should check if the description contains default template', () => {
+				const descriptionTextArea = screen.getByTestId(
+					'pager-description-textarea',
+				);
+
+				expect(descriptionTextArea).toHaveTextContent(
+					pagerDutyDescriptionDefaultValue,
+				);
+			});
+			it('Should check if Severity label, info (help_pager_severity), and textbox are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_severity',
+					testId: 'pager-severity-textbox',
+					helpText: 'help_pager_severity',
+				});
+			});
+			it('Should check if Severity contains the default template', () => {
+				const severityTextbox = screen.getByTestId('pager-severity-textbox');
+
+				expect(severityTextbox).toHaveValue(pagerDutySeverityTextDefaultValue);
+			});
+			it('Should check if Additional Information label, text area, and help text (help_pager_details) are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_details',
+					testId: 'pager-additional-details-textarea',
+					helpText: 'help_pager_details',
+				});
+			});
+			it('Should check if Additional Information contains the default template', () => {
+				const detailsTextArea = screen.getByTestId(
+					'pager-additional-details-textarea',
+				);
+
+				expect(detailsTextArea).toHaveValue(pagerDutyAdditionalDetailsDefaultValue);
+			});
+			it('Should check if Group label, text area, and info (help_pager_group) are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_group',
+					testId: 'pager-group-textarea',
+					helpText: 'help_pager_group',
+				});
+			});
+			it('Should check if Class label, text area, and info (help_pager_class) are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_class',
+					testId: 'pager-class-textarea',
+					helpText: 'help_pager_class',
+				});
+			});
+			it('Should check if Client label, text area, and info (Shows up as event source in Pagerduty) are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_client',
+					testId: 'pager-client-textarea',
+					helpText: 'help_pager_client',
+				});
+			});
+			it('Should check if Client input contains the default value "SigNoz Alert Manager"', () => {
+				const clientTextArea = screen.getByTestId('pager-client-textarea');
+
+				expect(clientTextArea).toHaveValue('SigNoz Alert Manager');
+			});
+			it('Should check if Client URL label, text area, and info (Shows up as event source link in Pagerduty) are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_client_url',
+					testId: 'pager-client-url-textarea',
+					helpText: 'help_pager_client_url',
+				});
+			});
+			it('Should check if Client URL contains the default value "https://enter-signoz-host-n-port-here/alerts"', () => {
+				const clientUrlTextArea = screen.getByTestId('pager-client-url-textarea');
+
+				expect(clientUrlTextArea).toHaveValue(
+					'https://enter-signoz-host-n-port-here/alerts',
+				);
+			});
+		});
+		describe('Opsgenie', () => {
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.Opsgenie} />);
+			});
+
+			it('Should check if the selected item in the type dropdown has text "Opsgenie"', () => {
+				expect(screen.getByText('Opsgenie')).toBeInTheDocument();
+			});
+
+			it('Should check if API key label, required, and textbox are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_opsgenie_api_key',
+					testId: 'opsgenie-api-key-textbox',
+					required: true,
+				});
+			});
+
+			it('Should check if Message label, required, info (Shows up as message in opsgenie), and text area are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_opsgenie_message',
+					testId: 'opsgenie-message-textarea',
+					helpText: 'help_opsgenie_message',
+					required: true,
+				});
+			});
+
+			it('Should check if Message contains the default template', () => {
+				const messageTextArea = screen.getByTestId('opsgenie-message-textarea');
+
+				expect(messageTextArea).toHaveValue(opsGenieMessageDefaultValue);
+			});
+
+			it('Should check if Description label, required, info (Shows up as description in opsgenie), and text area are displayed properly `{{ if gt (len .Alerts.Firing) 0 -}}', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_opsgenie_description',
+					testId: 'opsgenie-description-textarea',
+					helpText: 'help_opsgenie_description',
+					required: true,
+				});
+			});
+
+			it('Should check if Description label, required, info (Shows up as description in opsgenie), and text area are displayed properly `{{ if gt (len .Alerts.Firing) 0 -}}', () => {
+				const descriptionTextArea = screen.getByTestId(
+					'opsgenie-description-textarea',
+				);
+
+				expect(descriptionTextArea).toHaveTextContent(
+					opsGenieDescriptionDefaultValue,
+				);
+			});
+
+			it('Should check if Priority label, required, info (help_opsgenie_priority), and text area are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_opsgenie_priority',
+					testId: 'opsgenie-priority-textarea',
+					helpText: 'help_opsgenie_priority',
+					required: true,
+				});
+			});
+
+			it('Should check if Message contains the default template', () => {
+				const priorityTextArea = screen.getByTestId('opsgenie-priority-textarea');
+
+				expect(priorityTextArea).toHaveValue(opsGeniePriorityDefaultValue);
+			});
+		});
+		describe('Email', () => {
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.Email} />);
+			});
+
+			it('Should check if the selected item in the type dropdown has text "Email"', () => {
+				expect(screen.getByText('Email')).toBeInTheDocument();
+			});
+			it('Should check if API key label, required, info(help_email_to), and textbox are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_email_to',
+					testId: 'email-to-textbox',
+					helpText: 'help_email_to',
+					required: true,
+				});
+			});
+		});
+		describe('Microsoft Teams', () => {
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.MsTeams} />);
+			});
+
+			it('Should check if the selected item in the type dropdown has text "msteams"', () => {
+				expect(screen.getByText('Microsoft Teams')).toBeInTheDocument();
+			});
+
+			it('Should check if Webhook URL label and input are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_webhook_url',
+					testId: 'webhook-url-textbox',
+				});
+			});
+
+			it('Should check if Title label and text area are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_slack_title',
+					testId: 'title-textarea',
+				});
+			});
+
+			it('Should check if Title contains template', () => {
+				const titleTextArea = screen.getByTestId('title-textarea');
+
+				expect(titleTextArea).toHaveTextContent(slackTitleDefaultValue);
+			});
+			it('Should check if Description label and text area are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_slack_description',
+					testId: 'description-textarea',
+				});
+			});
+
+			it('Should check if Description contains template', () => {
+				const descriptionTextArea = screen.getByTestId('description-textarea');
+
+				expect(descriptionTextArea).toHaveTextContent(slackDescriptionDefaultValue);
+			});
+		});
+		describe('Google Chat', () => {
+			const validWebhookUrl =
+				'https://chat.googleapis.com/v1/spaces/AAAA/messages?key=dummy_key&token=dummy_token';
+
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.GoogleChat} />);
+			});
+
+			// paste instead of type: a per-keystroke re-render of the whole form
+			// pushes these tests past the 5s jest timeout on slower CI runners
+			async function fillField(
+				user: ReturnType<typeof userEvent.setup>,
+				testId: string,
+				value: string,
+			): Promise<void> {
+				await user.click(screen.getByTestId(testId));
+				await user.paste(value);
+			}
+
+			it('Should check if the selected item in the type dropdown has text "Google Chat"', () => {
+				expect(screen.getByText('Google Chat')).toBeInTheDocument();
+			});
+
+			it('Should check if Webhook URL label and input are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_webhook_url',
+					testId: 'webhook-url-textbox',
+				});
+			});
+
+			it('Should check if Title contains the google chat template', () => {
+				expect(screen.getByTestId('title-textarea')).toHaveTextContent(
+					googleChatTitleDefaultValue,
+				);
+			});
+
+			it('Should check if Description contains the google chat template', () => {
+				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
+					googleChatDescriptionDefaultValue,
+				);
+			});
+
+			it('Should check if saving with a webhook url outside chat.googleapis.com displays error notification', async () => {
+				const user = userEvent.setup();
+
+				await fillField(user, 'channel-name-textbox', 'gchat-channel');
+				await fillField(user, 'webhook-url-textbox', 'https://example.com/webhook');
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(errorNotification).toHaveBeenCalledWith({
+						message: 'Error',
+						description: 'google_chat_webhook_url_invalid',
+					}),
+				);
+			});
+
+			it('Should check if saving sends a googlechat_configs payload', async () => {
+				let requestBody: unknown;
+				server.use(
+					rest.post('http://localhost/api/v1/channels', async (req, res, ctx) => {
+						requestBody = await req.json();
+						return res(
+							ctx.status(201),
+							ctx.json({ status: 'success', data: 'channel created' }),
+						);
+					}),
+				);
+
+				const user = userEvent.setup();
+
+				await fillField(user, 'channel-name-textbox', 'gchat-channel');
+				await fillField(user, 'webhook-url-textbox', validWebhookUrl);
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(successNotification).toHaveBeenCalledWith({
+						message: 'Success',
+						description: 'channel_creation_done',
+					}),
+				);
+
+				expect(requestBody).toStrictEqual({
+					name: 'gchat-channel',
+					googlechat_configs: [
+						{
+							webhook_url: validWebhookUrl,
+							title: GoogleChatInitialConfig.title,
+							text: GoogleChatInitialConfig.text,
+							send_resolved: true,
+						},
+					],
+				});
+			});
+		});
+		describe('Jira', () => {
+			const validSite = 'https://acme.atlassian.net';
+
+			const fillRequired = async (
+				user: ReturnType<typeof userEvent.setup>,
+				site: string,
+			): Promise<void> => {
+				await user.type(screen.getByTestId('channel-name-textbox'), 'jira-channel');
+				await user.type(screen.getByTestId('jira-site-textbox'), site);
+				await user.type(screen.getByTestId('jira-email-textbox'), 'me@acme.com');
+				await user.type(screen.getByTestId('jira-api-token-textbox'), 'tok123');
+				await user.type(screen.getByTestId('jira-project-textbox'), 'KAN');
+			};
+
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.Jira} />);
+			});
+
+			it('Should check if the selected item in the type dropdown has text "Jira"', () => {
+				expect(screen.getByText('Jira')).toBeInTheDocument();
+			});
+
+			it('Should check if the Site URL field is displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_jira_site',
+					testId: 'jira-site-textbox',
+				});
+			});
+
+			it('Should prefill the issue type with Task', () => {
+				expect(screen.getByTestId('jira-issue-type-textbox')).toHaveValue('Task');
+			});
+
+			it('Should show the service-account recommendation tip linking to the docs', () => {
+				expect(screen.getByTestId('jira-service-account-tip')).toBeInTheDocument();
+				expect(
+					screen.getByRole('link', { name: 'jira_service_account_tip_link' }),
+				).toHaveAttribute(
+					'href',
+					'https://signoz.io/docs/alerts-management/notification-channel/jira/#use-a-service-account-recommended',
+				);
+			});
+
+			it('Should display an error when the site is not an atlassian.net URL', async () => {
+				const user = userEvent.setup({ delay: null });
+				await fillRequired(user, 'https://example.com');
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(errorNotification).toHaveBeenCalledWith({
+						message: 'Error',
+						description: 'jira_site_invalid',
+					}),
+				);
+			}, 15000);
+
+			it('Should send a jira_configs payload with basic auth', async () => {
+				let requestBody: unknown;
+				server.use(
+					rest.post('http://localhost/api/v1/channels', async (req, res, ctx) => {
+						requestBody = await req.json();
+						return res(
+							ctx.status(201),
+							ctx.json({ status: 'success', data: 'channel created' }),
+						);
+					}),
+				);
+
+				const user = userEvent.setup({ delay: null });
+				await fillRequired(user, validSite);
+				await user.click(screen.getByText('jira_advanced_section'));
+				await user.type(
+					screen.getByTestId('jira-wont-fix-resolution-textbox'),
+					"Won't Do",
+				);
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(successNotification).toHaveBeenCalledWith({
+						message: 'Success',
+						description: 'channel_creation_done',
+					}),
+				);
+
+				expect(requestBody).toStrictEqual({
+					name: 'jira-channel',
+					jira_configs: [
+						{
+							site: validSite,
+							project: 'KAN',
+							issue_type: 'Task',
+							summary: JiraInitialConfig.summary,
+							description: JiraInitialConfig.description,
+							send_resolved: true,
+							wont_fix_resolution: "Won't Do",
+							http_config: {
+								basic_auth: { username: 'me@acme.com', password: 'tok123' },
+							},
+						},
+					],
+				});
+			}, 15000);
+
+			it('Should block save when the reopen window is below the 1m minimum', async () => {
+				const user = userEvent.setup({ delay: null });
+				await fillRequired(user, validSite);
+
+				await user.click(screen.getByText('jira_advanced_section'));
+				await user.type(screen.getByTestId('jira-reopen-duration-textbox'), '30s');
+
+				// the rule surfaces an inline message, not just a red border
+				await expect(
+					screen.findByText('jira_reopen_duration_invalid'),
+				).resolves.toBeInTheDocument();
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(errorNotification).toHaveBeenCalledWith({
+						message: 'Error',
+						description: 'jira_reopen_duration_invalid',
+					}),
+				);
+			}, 15000);
+		});
+		describe('JSM Ops', () => {
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.JsmOps} />);
+			});
+
+			it('Should show "Jira Service Management Ops" as the selected type', () => {
+				expect(screen.getByText('Jira Service Management Ops')).toBeInTheDocument();
+			});
+
+			it('Should display the API key field properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_jsmops_api_key',
+					testId: 'jsmops-api-key-textbox',
+				});
+			});
+
+			it('Should show the tip linking to the JSM Ops docs', () => {
+				expect(screen.getByTestId('jsmops-tip')).toBeInTheDocument();
+				expect(
+					screen.getByRole('link', { name: 'jsmops_tip_link' }),
+				).toHaveAttribute(
+					'href',
+					'https://signoz.io/docs/alerts-management/notification-channel/jsm-ops/',
+				);
+			});
+
+			it('Should block save when the API key is missing', async () => {
+				const user = userEvent.setup();
+				await user.type(
+					screen.getByTestId('channel-name-textbox'),
+					'jsmops-channel',
+				);
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(errorNotification).toHaveBeenCalledWith({
+						message: 'Error',
+						description: 'api_key_required',
+					}),
+				);
+			});
+
+			it('Should send a jsmops_configs payload with prefilled defaults', async () => {
+				let requestBody: unknown;
+				server.use(
+					rest.post('http://localhost/api/v1/channels', async (req, res, ctx) => {
+						requestBody = await req.json();
+						return res(
+							ctx.status(201),
+							ctx.json({ status: 'success', data: 'channel created' }),
+						);
+					}),
+				);
+
+				const user = userEvent.setup();
+				await user.type(
+					screen.getByTestId('channel-name-textbox'),
+					'jsmops-channel',
+				);
+				await user.type(screen.getByTestId('jsmops-api-key-textbox'), 'key-abc');
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(successNotification).toHaveBeenCalledWith({
+						message: 'Success',
+						description: 'channel_creation_done',
+					}),
+				);
+
+				expect(requestBody).toStrictEqual({
+					name: 'jsmops-channel',
+					jsmops_configs: [
+						{
+							api_key: 'key-abc',
+							send_resolved: true,
+							message: JsmOpsInitialConfig.message,
+							description: JsmOpsInitialConfig.description,
+							priority: JsmOpsInitialConfig.priority,
+							tags: JsmOpsInitialConfig.tags?.join(','),
+						},
+					],
+				});
+			});
+		});
+		describe('incident.io', () => {
+			const incidentIOURL =
+				'https://api.incident.io/v2/alert_events/http/01M0D1JNVBGBGVTWX053EM12XV';
+
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.IncidentIO} />);
+			});
+
+			it('Should display the URL and token fields with the docs tip', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_incidentio_url',
+					testId: 'incidentio-url-textbox',
+				});
+				testLabelInputAndHelpValue({
+					labelText: 'field_incidentio_token',
+					testId: 'incidentio-token-textbox',
+				});
+				expect(screen.getByTestId('incidentio-tip')).toBeInTheDocument();
+				expect(
+					screen.getByRole('link', { name: 'incidentio_tip_link' }),
+				).toHaveAttribute(
+					'href',
+					'https://signoz.io/docs/alerts-management/notification-channel/incidentio/',
+				);
+			});
+
+			it('Should block save when the URL or token is missing', async () => {
+				const user = userEvent.setup();
+				await user.type(
+					screen.getByTestId('channel-name-textbox'),
+					'incidentio-channel',
+				);
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(errorNotification).toHaveBeenCalledWith({
+						message: 'Error',
+						description: 'incidentio_required_fields',
+					}),
+				);
+			});
+
+			it('Should display an error when the URL is not an alert events URL', async () => {
+				const user = userEvent.setup();
+				await user.type(
+					screen.getByTestId('channel-name-textbox'),
+					'incidentio-channel',
+				);
+				await user.type(
+					screen.getByTestId('incidentio-url-textbox'),
+					'https://api.incident.io/v2/incidents',
+				);
+				await user.type(screen.getByTestId('incidentio-token-textbox'), 'tok-abc');
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(errorNotification).toHaveBeenCalledWith({
+						message: 'Error',
+						description: 'incidentio_url_invalid',
+					}),
+				);
+			}, 15000);
+
+			it('Should send an incidentio_configs payload with prefilled defaults', async () => {
+				let requestBody: unknown;
+				server.use(
+					rest.post('http://localhost/api/v1/channels', async (req, res, ctx) => {
+						requestBody = await req.json();
+						return res(
+							ctx.status(201),
+							ctx.json({ status: 'success', data: 'channel created' }),
+						);
+					}),
+				);
+
+				const user = userEvent.setup();
+				await user.type(
+					screen.getByTestId('channel-name-textbox'),
+					'incidentio-channel',
+				);
+				await user.type(
+					screen.getByTestId('incidentio-url-textbox'),
+					incidentIOURL,
+				);
+				await user.type(screen.getByTestId('incidentio-token-textbox'), 'tok-abc');
+
+				await user.click(screen.getByTestId('incidentio-metadata-add'));
+				await user.type(screen.getByTestId('incidentio-metadata-key-0'), 'team');
+				await user.type(screen.getByTestId('incidentio-metadata-value-0'), 'core');
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(successNotification).toHaveBeenCalledWith({
+						message: 'Success',
+						description: 'channel_creation_done',
+					}),
+				);
+
+				expect(requestBody).toStrictEqual({
+					name: 'incidentio-channel',
+					incidentio_configs: [
+						{
+							url: incidentIOURL,
+							token: 'tok-abc',
+							send_resolved: true,
+							title: IncidentIOInitialConfig.title,
+							description: IncidentIOInitialConfig.description,
+							metadata: { team: 'core' },
+						},
+					],
+				});
+			}, 15000);
+		});
+		describe('Changing the channel type', () => {
+			async function selectType(
+				user: ReturnType<typeof userEvent.setup>,
+				optionText: string,
+			): Promise<void> {
+				// the type dropdown opens on the inner search input of the antd select
+				await user.click(screen.getByRole('combobox'));
+				await user.click(await screen.findByTitle(optionText));
+			}
+
+			it('Should check if switching to Google Chat and back swaps the prefilled templates', async () => {
+				const user = userEvent.setup();
+				render(<CreateAlertChannels preType={ChannelType.Slack} />);
+
+				await selectType(user, 'Google Chat');
+
+				await waitFor(() =>
+					expect(screen.getByTestId('title-textarea')).toHaveTextContent(
+						googleChatTitleDefaultValue,
+					),
+				);
+				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
+					googleChatDescriptionDefaultValue,
+				);
+
+				await selectType(user, 'Slack');
+
+				await waitFor(() =>
+					expect(screen.getByTestId('title-textarea')).toHaveTextContent(
+						slackTitleDefaultValue,
+					),
+				);
+				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
+					slackDescriptionDefaultValue,
+				);
+			});
+
+			it('Should check if switching to Pagerduty prefills the pagerduty description and not the opsgenie one', async () => {
+				const user = userEvent.setup();
+				render(<CreateAlertChannels preType={ChannelType.Opsgenie} />);
+
+				await selectType(user, 'Pagerduty');
+
+				await waitFor(() =>
+					expect(screen.getByTestId('pager-description-textarea')).toHaveTextContent(
+						pagerDutyDescriptionDefaultValue,
+					),
+				);
+			});
+		});
+	});
+});

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannelNormalUser.test.tsx

@@ -0,0 +1,336 @@
+import CreateAlertChannels from 'container/CreateAlertChannels';
+import { ChannelType } from 'container/CreateAlertChannels/config';
+import {
+	opsGenieDescriptionDefaultValue,
+	opsGenieMessageDefaultValue,
+	opsGeniePriorityDefaultValue,
+	pagerDutyAdditionalDetailsDefaultValue,
+	pagerDutyDescriptionDefaultValue,
+	pagerDutySeverityTextDefaultValue,
+	slackDescriptionDefaultValue,
+	slackTitleDefaultValue,
+} from 'mocks-server/__mockdata__/alerts';
+import { render, screen } from 'tests/test-utils';
+
+import { testLabelInputAndHelpValue } from './testUtils';
+
+jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({
+	MarkdownRenderer: jest.fn(() => <div>Mocked MarkdownRenderer</div>),
+}));
+
+describe('Create Alert Channel (Normal User)', () => {
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+	describe('Should check if the new alert channel is properly displayed with the cascading fields of slack channel', () => {
+		beforeEach(() => {
+			render(<CreateAlertChannels preType={ChannelType.Slack} />);
+		});
+		it('Should check if the title is "New Notification Channels"', () => {
+			expect(screen.getByText('page_title_create')).toBeInTheDocument();
+		});
+		it('Should check if the name label and textbox are displayed properly', () => {
+			testLabelInputAndHelpValue({
+				labelText: 'field_channel_name',
+				testId: 'channel-name-textbox',
+			});
+		});
+		it('Should check if Send resolved alerts label and checkbox are displayed properly', () => {
+			testLabelInputAndHelpValue({
+				labelText: 'field_send_resolved',
+				testId: 'field-send-resolved-checkbox',
+			});
+		});
+		it('Should check if channel type label and dropdown are displayed properly', () => {
+			testLabelInputAndHelpValue({
+				labelText: 'field_channel_type',
+				testId: 'channel-type-select',
+			});
+		});
+		// Default Channel type (Slack) fields
+		it('Should check if the selected item in the type dropdown has text "Slack"', () => {
+			expect(screen.getByText('Slack')).toBeInTheDocument();
+		});
+		it('Should check if Webhook URL label and input are displayed properly', () => {
+			testLabelInputAndHelpValue({
+				labelText: 'field_webhook_url',
+				testId: 'webhook-url-textbox',
+			});
+		});
+		it('Should check if Recepient label, input, and help text are displayed properly', () => {
+			testLabelInputAndHelpValue({
+				labelText: 'field_slack_recipient',
+				testId: 'slack-channel-textbox',
+				helpText: 'slack_channel_help',
+			});
+		});
+
+		it('Should check if Title label and text area are displayed properly', () => {
+			testLabelInputAndHelpValue({
+				labelText: 'field_slack_title',
+				testId: 'title-textarea',
+			});
+		});
+		it('Should check if Title contains template', () => {
+			const titleTextArea = screen.getByTestId('title-textarea');
+
+			expect(titleTextArea).toHaveTextContent(slackTitleDefaultValue);
+		});
+		it('Should check if Description label and text area are displayed properly', () => {
+			testLabelInputAndHelpValue({
+				labelText: 'field_slack_description',
+				testId: 'description-textarea',
+			});
+		});
+		it('Should check if Description contains template', () => {
+			const descriptionTextArea = screen.getByTestId('description-textarea');
+
+			expect(descriptionTextArea).toHaveTextContent(slackDescriptionDefaultValue);
+		});
+		it('Should check if the form buttons are displayed properly (Save, Test, Back)', () => {
+			expect(screen.getByText('button_save_channel')).toBeInTheDocument();
+			expect(screen.getByText('button_test_channel')).toBeInTheDocument();
+			expect(screen.getByText('button_return')).toBeInTheDocument();
+		});
+	});
+	describe('New Alert Channel Cascading Fields Based on Channel Type', () => {
+		describe('Webhook', () => {
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.Webhook} />);
+			});
+
+			it('Should check if the selected item in the type dropdown has text "Webhook"', () => {
+				expect(screen.getByText('Webhook')).toBeInTheDocument();
+			});
+			it('Should check if Webhook URL label and input are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_webhook_url',
+					testId: 'webhook-url-textbox',
+				});
+			});
+			it('Should check if Webhook User Name label, input, and help text are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_webhook_username',
+					testId: 'webhook-username-textbox',
+					helpText: 'help_webhook_username',
+				});
+			});
+			it('Should check if Password label and textbox, and help text are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'Password (optional)',
+					testId: 'webhook-password-textbox',
+					helpText: 'help_webhook_password',
+				});
+			});
+		});
+		describe('PagerDuty', () => {
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.Pagerduty} />);
+			});
+
+			it('Should check if the selected item in the type dropdown has text "Pagerduty"', () => {
+				expect(screen.getByText('Pagerduty')).toBeInTheDocument();
+			});
+			it('Should check if Routing key label, required, and textbox are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_routing_key',
+					testId: 'pager-routing-key-textbox',
+				});
+			});
+			it('Should check if Description label, required, info (Shows up as description in pagerduty), and text area are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_description',
+					testId: 'pager-description-textarea',
+					helpText: 'help_pager_description',
+				});
+			});
+			it('Should check if the description contains default template', () => {
+				const descriptionTextArea = screen.getByTestId(
+					'pager-description-textarea',
+				);
+
+				expect(descriptionTextArea).toHaveTextContent(
+					pagerDutyDescriptionDefaultValue,
+				);
+			});
+			it('Should check if Severity label, info (help_pager_severity), and textbox are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_severity',
+					testId: 'pager-severity-textbox',
+					helpText: 'help_pager_severity',
+				});
+			});
+			it('Should check if Severity contains the default template', () => {
+				const severityTextbox = screen.getByTestId('pager-severity-textbox');
+
+				expect(severityTextbox).toHaveValue(pagerDutySeverityTextDefaultValue);
+			});
+			it('Should check if Additional Information label, text area, and help text (help_pager_details) are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_details',
+					testId: 'pager-additional-details-textarea',
+					helpText: 'help_pager_details',
+				});
+			});
+			it('Should check if Additional Information contains the default template', () => {
+				const detailsTextArea = screen.getByTestId(
+					'pager-additional-details-textarea',
+				);
+
+				expect(detailsTextArea).toHaveValue(pagerDutyAdditionalDetailsDefaultValue);
+			});
+			it('Should check if Group label, text area, and info (help_pager_group) are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_group',
+					testId: 'pager-group-textarea',
+					helpText: 'help_pager_group',
+				});
+			});
+			it('Should check if Class label, text area, and info (help_pager_class) are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_class',
+					testId: 'pager-class-textarea',
+					helpText: 'help_pager_class',
+				});
+			});
+			it('Should check if Client label, text area, and info (Shows up as event source in Pagerduty) are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_client',
+					testId: 'pager-client-textarea',
+					helpText: 'help_pager_client',
+				});
+			});
+			it('Should check if Client input contains the default value "SigNoz Alert Manager"', () => {
+				const clientTextArea = screen.getByTestId('pager-client-textarea');
+
+				expect(clientTextArea).toHaveValue('SigNoz Alert Manager');
+			});
+			it('Should check if Client URL label, text area, and info (Shows up as event source link in Pagerduty) are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_pager_client_url',
+					testId: 'pager-client-url-textarea',
+					helpText: 'help_pager_client_url',
+				});
+			});
+			it('Should check if Client URL contains the default value "https://enter-signoz-host-n-port-here/alerts"', () => {
+				const clientUrlTextArea = screen.getByTestId('pager-client-url-textarea');
+
+				expect(clientUrlTextArea).toHaveValue(
+					'https://enter-signoz-host-n-port-here/alerts',
+				);
+			});
+		});
+		describe('Opsgenie', () => {
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.Opsgenie} />);
+			});
+
+			it('Should check if the selected item in the type dropdown has text "Opsgenie"', () => {
+				expect(screen.getByText('Opsgenie')).toBeInTheDocument();
+			});
+
+			it('Should check if API key label, required, and textbox are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_opsgenie_api_key',
+					testId: 'opsgenie-api-key-textbox',
+					required: true,
+				});
+			});
+
+			it('Should check if Message label, required, info (Shows up as message in opsgenie), and text area are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_opsgenie_message',
+					testId: 'opsgenie-message-textarea',
+					helpText: 'help_opsgenie_message',
+					required: true,
+				});
+			});
+
+			it('Should check if Message contains the default template', () => {
+				const messageTextArea = screen.getByTestId('opsgenie-message-textarea');
+
+				expect(messageTextArea).toHaveValue(opsGenieMessageDefaultValue);
+			});
+
+			it('Should check if Description label, required, info (Shows up as description in opsgenie), and text area are displayed properly `{{ if gt (len .Alerts.Firing) 0 -}}', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_opsgenie_description',
+					testId: 'opsgenie-description-textarea',
+					helpText: 'help_opsgenie_description',
+					required: true,
+				});
+			});
+
+			it('Should check if Description label, required, info (Shows up as description in opsgenie), and text area are displayed properly `{{ if gt (len .Alerts.Firing) 0 -}}', () => {
+				const descriptionTextArea = screen.getByTestId(
+					'opsgenie-description-textarea',
+				);
+
+				expect(descriptionTextArea).toHaveTextContent(
+					opsGenieDescriptionDefaultValue,
+				);
+			});
+
+			it('Should check if Priority label, required, info (help_opsgenie_priority), and text area are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_opsgenie_priority',
+					testId: 'opsgenie-priority-textarea',
+					helpText: 'help_opsgenie_priority',
+					required: true,
+				});
+			});
+
+			it('Should check if Message contains the default template', () => {
+				const priorityTextArea = screen.getByTestId('opsgenie-priority-textarea');
+
+				expect(priorityTextArea).toHaveValue(opsGeniePriorityDefaultValue);
+			});
+		});
+		describe('Email', () => {
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.Email} />);
+			});
+
+			it('Should check if the selected item in the type dropdown has text "Email"', () => {
+				expect(screen.getByText('Email')).toBeInTheDocument();
+			});
+			it('Should check if API key label, required, info(help_email_to), and textbox are displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_email_to',
+					testId: 'email-to-textbox',
+					helpText: 'help_email_to',
+					required: true,
+				});
+			});
+		});
+		describe('Microsoft Teams', () => {
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.MsTeams} />);
+			});
+
+			it('Should check if the selected item in the type dropdown has text "Microsoft Teams"', () => {
+				expect(screen.getByText('Microsoft Teams')).toBeInTheDocument();
+			});
+
+			it('Should check if the form buttons are displayed properly (Save, Test, Back)', () => {
+				expect(
+					screen.getByRole('button', { name: 'button_save_channel' }),
+				).toBeInTheDocument();
+				expect(
+					screen.getByRole('button', { name: 'button_test_channel' }),
+				).toBeInTheDocument();
+				expect(
+					screen.getByRole('button', { name: 'button_return' }),
+				).toBeInTheDocument();
+			});
+			it.skip('Should check if save and test buttons are disabled', () => {
+				expect(
+					screen.getByRole('button', { name: 'button_save_channel' }),
+				).toBeDisabled();
+				expect(
+					screen.getByRole('button', { name: 'button_test_channel' }),
+				).toBeDisabled();
+			});
+		});
+	});
+});

frontend/src/container/AllAlertChannels/__tests__/EditAlertChannel.test.tsx

@@ -0,0 +1,120 @@
+import EditAlertChannels from 'container/EditAlertChannels';
+import {
+	editAlertChannelInitialValue,
+	editSlackDescriptionDefaultValue,
+	slackTitleDefaultValue,
+} from 'mocks-server/__mockdata__/alerts';
+import { render, screen } from 'tests/test-utils';
+
+import { testLabelInputAndHelpValue } from './testUtils';
+
+const successNotification = jest.fn();
+const errorNotification = jest.fn();
+jest.mock('hooks/useNotifications', () => ({
+	__esModule: true,
+	useNotifications: jest.fn(() => ({
+		notifications: {
+			success: successNotification,
+			error: errorNotification,
+		},
+	})),
+}));
+
+jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({
+	MarkdownRenderer: jest.fn(() => <div>Mocked MarkdownRenderer</div>),
+}));
+
+describe('Should check if the edit alert channel is properly displayed', () => {
+	beforeEach(() => {
+		render(
+			<EditAlertChannels
+				channelId="3"
+				initialValue={editAlertChannelInitialValue}
+			/>,
+		);
+	});
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+	it('Should check if the title is "Edit Notification Channels"', () => {
+		expect(screen.getByText('page_title_edit')).toBeInTheDocument();
+	});
+
+	it('Should check if the name label and textbox are displayed properly', () => {
+		testLabelInputAndHelpValue({
+			labelText: 'field_channel_name',
+			testId: 'channel-name-textbox',
+			value: 'Dummy-Channel',
+		});
+	});
+	it('Should check if Send resolved alerts label and checkbox are displayed properly and the checkbox is checked', () => {
+		testLabelInputAndHelpValue({
+			labelText: 'field_send_resolved',
+			testId: 'field-send-resolved-checkbox',
+		});
+		expect(screen.getByTestId('field-send-resolved-checkbox')).toBeChecked();
+	});
+
+	it('Should check if channel type label and dropdown are displayed properly', () => {
+		testLabelInputAndHelpValue({
+			labelText: 'field_channel_type',
+			testId: 'channel-type-select',
+		});
+	});
+
+	it('Should check if the selected item in the type dropdown has text "Slack"', () => {
+		expect(screen.getByText('Slack')).toBeInTheDocument();
+	});
+
+	it('Should check if Webhook URL label and input are displayed properly', () => {
+		testLabelInputAndHelpValue({
+			labelText: 'field_webhook_url',
+			testId: 'webhook-url-textbox',
+			value:
+				'https://discord.com/api/webhooks/dummy_webhook_id/dummy_webhook_token/slack',
+		});
+	});
+
+	it('Should check if Recepient label, input, and help text are displayed properly', () => {
+		testLabelInputAndHelpValue({
+			labelText: 'field_slack_recipient',
+			testId: 'slack-channel-textbox',
+			helpText: 'slack_channel_help',
+			value: '#dummy_channel',
+		});
+	});
+
+	it('Should check if Title label and text area are displayed properly', () => {
+		testLabelInputAndHelpValue({
+			labelText: 'field_slack_title',
+			testId: 'title-textarea',
+		});
+	});
+
+	it('Should check if Title contains template', () => {
+		const titleTextArea = screen.getByTestId('title-textarea');
+
+		expect(titleTextArea).toHaveTextContent(slackTitleDefaultValue);
+	});
+
+	it('Should check if Description label and text area are displayed properly', () => {
+		testLabelInputAndHelpValue({
+			labelText: 'field_slack_description',
+			testId: 'description-textarea',
+		});
+	});
+
+	it('Should check if Description contains template', () => {
+		const descriptionTextArea = screen.getByTestId('description-textarea');
+
+		expect(descriptionTextArea).toHaveTextContent(
+			editSlackDescriptionDefaultValue,
+		);
+	});
+
+	it('Should check if the form buttons are displayed properly (Save, Test, Back)', () => {
+		expect(screen.getByText('button_save_channel')).toBeInTheDocument();
+		expect(screen.getByText('button_test_channel')).toBeInTheDocument();
+		expect(screen.getByText('button_return')).toBeInTheDocument();
+	});
+});

frontend/src/container/AllAlertChannels/__tests__/EditAlertChannelSave.test.tsx

@@ -0,0 +1,186 @@
+import EditAlertChannels from 'container/EditAlertChannels';
+import { editAlertChannelInitialValue } from 'mocks-server/__mockdata__/alerts';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+jest.mock('hooks/useNotifications', () => ({
+	__esModule: true,
+	useNotifications: jest.fn(() => ({
+		notifications: { success: jest.fn(), error: jest.fn() },
+	})),
+}));
+
+jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({
+	MarkdownRenderer: jest.fn(() => <div>Mocked MarkdownRenderer</div>),
+}));
+
+interface EditRequest {
+	id: string;
+	body: { name: string; slack_configs: { send_resolved: boolean }[] };
+}
+
+// Captures the PUT /channels/:id request the edit form fires, so assertions can
+// run against the real HTTP payload instead of a hand-mocked api client.
+function mockEditChannel(): { calls: EditRequest[] } {
+	const result: { calls: EditRequest[] } = { calls: [] };
+	server.use(
+		rest.put('http://localhost/api/v1/channels/:id', async (req, res, ctx) => {
+			result.calls.push({
+				id: req.params.id as string,
+				body: await req.json(),
+			});
+			return res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: 'channel updated' }),
+			);
+		}),
+	);
+	return result;
+}
+
+describe('EditAlertChannels save', () => {
+	afterEach(() => jest.clearAllMocks());
+
+	it('sends the channelId in the edit request (regression: empty id)', async () => {
+		const edit = mockEditChannel();
+		render(
+			<EditAlertChannels
+				channelId="3"
+				initialValue={editAlertChannelInitialValue}
+			/>,
+		);
+
+		const user = userEvent.setup();
+		await user.click(screen.getByTestId('save-channel-button'));
+
+		await waitFor(() => expect(edit.calls).toHaveLength(1));
+		expect(edit.calls[0].id).toBe('3');
+	});
+
+	it('blocks jira save when the reopen window is below the 1m minimum', async () => {
+		const edit = mockEditChannel();
+		const jiraInitialValue = {
+			type: 'jira',
+			name: 'jira-channel',
+			site: 'https://acme.atlassian.net',
+			username: 'user@acme.io',
+			password: 'token',
+			project: 'OPS',
+			issue_type: 'Task',
+			send_resolved: true,
+			reopen_duration: '30s',
+		};
+
+		const { unmount } = render(
+			<EditAlertChannels channelId="3" initialValue={jiraInitialValue} />,
+		);
+		const user = userEvent.setup();
+		await user.click(screen.getByTestId('save-channel-button'));
+		expect(edit.calls).toHaveLength(0);
+		unmount();
+
+		render(
+			<EditAlertChannels
+				channelId="3"
+				initialValue={{ ...jiraInitialValue, reopen_duration: '72h' }}
+			/>,
+		);
+		await user.click(screen.getByTestId('save-channel-button'));
+		await waitFor(() => expect(edit.calls).toHaveLength(1));
+	});
+
+	it('preserves the jira wont-fix resolution on save', async () => {
+		const edit = mockEditChannel();
+		render(
+			<EditAlertChannels
+				channelId="3"
+				initialValue={{
+					type: 'jira',
+					name: 'jira-channel',
+					site: 'https://acme.atlassian.net',
+					username: 'user@acme.io',
+					password: 'token',
+					project: 'OPS',
+					issue_type: 'Task',
+					send_resolved: true,
+					wont_fix_resolution: "Won't Do",
+				}}
+			/>,
+		);
+		const user = userEvent.setup();
+		await user.click(screen.getByTestId('save-channel-button'));
+
+		await waitFor(() => expect(edit.calls).toHaveLength(1));
+		expect(edit.calls[0].body).toStrictEqual({
+			name: 'jira-channel',
+			jira_configs: [
+				{
+					site: 'https://acme.atlassian.net',
+					project: 'OPS',
+					issue_type: 'Task',
+					send_resolved: true,
+					wont_fix_resolution: "Won't Do",
+					http_config: {
+						basic_auth: { username: 'user@acme.io', password: 'token' },
+					},
+				},
+			],
+		});
+	});
+
+	it('sends an incidentio_configs payload when editing an incident.io channel', async () => {
+		const edit = mockEditChannel();
+		render(
+			<EditAlertChannels
+				channelId="4"
+				initialValue={{
+					type: 'incidentio',
+					name: 'incidentio-channel',
+					url: 'https://api.incident.io/v2/alert_events/http/01M0D1JNVBGBGVTWX053EM12XV',
+					token: 'tok-abc',
+					send_resolved: true,
+					metadata: { env: 'prod' },
+				}}
+			/>,
+		);
+
+		const user = userEvent.setup();
+		await user.click(screen.getByTestId('save-channel-button'));
+
+		await waitFor(() => expect(edit.calls).toHaveLength(1));
+		expect(edit.calls[0].id).toBe('4');
+		expect(edit.calls[0].body).toStrictEqual({
+			name: 'incidentio-channel',
+			incidentio_configs: [
+				{
+					url: 'https://api.incident.io/v2/alert_events/http/01M0D1JNVBGBGVTWX053EM12XV',
+					token: 'tok-abc',
+					send_resolved: true,
+					metadata: { env: 'prod' },
+				},
+			],
+		});
+	});
+
+	it('persists send_resolved toggle in the edit request', async () => {
+		const edit = mockEditChannel();
+		render(
+			<EditAlertChannels
+				channelId="3"
+				initialValue={editAlertChannelInitialValue}
+			/>,
+		);
+
+		const user = userEvent.setup();
+		const sendResolved = screen.getByTestId('field-send-resolved-checkbox');
+		expect(sendResolved).toBeChecked();
+
+		await user.click(sendResolved);
+		await user.click(screen.getByTestId('save-channel-button'));
+
+		await waitFor(() => expect(edit.calls).toHaveLength(1));
+		expect(edit.calls[0].id).toBe('3');
+		expect(edit.calls[0].body.slack_configs[0].send_resolved).toBe(false);
+	});
+});

frontend/src/container/AllAlertChannels/__tests__/testUtils.ts

@@ -0,0 +1,31 @@
+import { screen } from 'tests/test-utils';
+
+export const testLabelInputAndHelpValue = ({
+	labelText,
+	testId,
+	helpText,
+	required = false,
+	value,
+}: {
+	labelText: string;
+	testId: string;
+	helpText?: string;
+	required?: boolean;
+	value?: string;
+}): void => {
+	const label = screen.getByText(labelText);
+	expect(label).toBeInTheDocument();
+
+	const input = screen.getByTestId(testId);
+	expect(input).toBeInTheDocument();
+
+	if (helpText !== undefined) {
+		expect(screen.getByText(helpText)).toBeInTheDocument();
+	}
+	if (required) {
+		expect(input).toBeRequired();
+	}
+	if (value) {
+		expect(input).toHaveValue(value);
+	}
+};

frontend/src/container/AllAlertChannels/index.tsx

@@ -0,0 +1,95 @@
+import { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from 'react-query';
+import { Plus } from '@signozhq/icons';
+import { Tooltip, Flex } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import getAll from 'api/channels/getAll';
+import logEvent from 'api/common/logEvent';
+import Spinner from 'components/Spinner';
+import TextToolTip from 'components/TextToolTip';
+import ROUTES from 'constants/routes';
+import useComponentPermission from 'hooks/useComponentPermission';
+import history from 'lib/history';
+import { isUndefined } from 'lodash-es';
+import { useAppContext } from 'providers/App/App';
+import { SuccessResponseV2 } from 'types/api';
+import { Channels } from 'types/api/channels/getAll';
+import APIError from 'types/api/error';
+
+import AlertChannelsComponent from './AlertChannels';
+import { Button, ButtonContainer, RightActionContainer } from './styles';
+
+import './AllAlertChannels.styles.scss';
+
+const { Text } = Typography;
+
+function AlertChannels(): JSX.Element {
+	const { t } = useTranslation(['channels']);
+	const { user } = useAppContext();
+	const [addNewChannelPermission] = useComponentPermission(
+		['add_new_channel'],
+		user.role,
+	);
+	const onToggleHandler = useCallback(() => {
+		history.push(ROUTES.CHANNELS_NEW);
+	}, []);
+
+	const { isLoading, data, error } = useQuery<
+		SuccessResponseV2<Channels[]>,
+		APIError
+	>(['getChannels'], {
+		queryFn: () => getAll(),
+	});
+
+	useEffect(() => {
+		if (!isUndefined(data?.data)) {
+			logEvent('Alert Channel: Channel list page visited', {
+				number: data?.data?.length,
+			});
+		}
+	}, [data?.data]);
+
+	if (error) {
+		return <Typography>{error.getErrorMessage()}</Typography>;
+	}
+
+	if (isLoading || isUndefined(data?.data)) {
+		return <Spinner tip={t('loading_channels_message')} height="90vh" />;
+	}
+
+	return (
+		<div className="alert-channels-container">
+			<ButtonContainer>
+				<Text truncate={1} color="muted">
+					{t('sending_channels_note')}
+				</Text>
+
+				<RightActionContainer>
+					<TextToolTip
+						text={t('tooltip_notification_channels')}
+						url="https://signoz.io/docs/setup-alerts-notification/"
+					/>
+
+					<Tooltip
+						title={
+							!addNewChannelPermission
+								? 'Ask an admin to create alert channel'
+								: undefined
+						}
+					>
+						<Button onClick={onToggleHandler} disabled={!addNewChannelPermission}>
+							<Flex align="center" justify="center" gap={4}>
+								<Plus size="md" /> {t('button_new_channel')}
+							</Flex>
+						</Button>
+					</Tooltip>
+				</RightActionContainer>
+			</ButtonContainer>
+
+			<AlertChannelsComponent allChannels={data?.data || []} />
+		</div>
+	);
+}
+
+export default AlertChannels;

frontend/src/container/AllAlertChannels/styles.ts

@@ -0,0 +1,26 @@
+import { Button as ButtonComponent } from 'antd';
+import styled from 'styled-components';
+
+export const RightActionContainer = styled.div`
+	&&& {
+		display: flex;
+		align-items: center;
+	}
+`;
+
+export const ButtonContainer = styled.div`
+	&&& {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 1rem;
+		margin-bottom: 1rem;
+		padding-right: 1rem;
+	}
+`;
+
+export const Button = styled(ButtonComponent)`
+	&&& {
+		margin-left: 1rem;
+	}
+`;

frontend/src/container/CreateAlertChannels/CreateAlertChannels.styles.scss

@@ -0,0 +1,13 @@
+.create-alert-channels-container {
+	width: 100%;
+	border: 1px solid var(--l1-border);
+	background: var(--l2-background);
+	border-radius: 3px;
+
+	padding: 16px;
+
+	.form-alert-channels-title {
+		margin-top: 0px;
+		margin-bottom: 16px;
+	}
+}

frontend/src/container/CreateAlertChannels/channelConfig.test.ts

@@ -1,115 +0,0 @@
-import { AlertmanagertypesGettableNotificationChannelDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { toChannelConfig, toPostableChannel } from './channelConfig';
-import { toChannelFormState } from './channelFormValues';
-import { ChannelFormValues, ChannelType } from './config';
-
-const slackValues: ChannelFormValues = {
-	name: 'prod alerts',
-	api_url: 'https://hooks.slack.com/services/T/B/X',
-	channel: '#alerts',
-	title: 'title template',
-	title_link: 'https://signoz.io',
-	text: 'body template',
-	pretext: 'pretext',
-	fallback: 'fallback',
-	footer: 'footer',
-	color: 'danger',
-	fields: [{ title: 'env', value: 'prod', short: true }],
-	actions: [{ type: 'button', text: 'Runbook', url: 'https://runbook' }],
-	send_resolved: true,
-};
-
-describe('toChannelConfig', () => {
-	it('maps the slack form onto the v2 spec, new fields included', () => {
-		expect(toChannelConfig(ChannelType.Slack, slackValues)).toStrictEqual({
-			kind: 'slack',
-			spec: {
-				apiUrl: 'https://hooks.slack.com/services/T/B/X',
-				channel: '#alerts',
-				title: 'title template',
-				titleLink: 'https://signoz.io',
-				text: 'body template',
-				pretext: 'pretext',
-				fallback: 'fallback',
-				footer: 'footer',
-				color: 'danger',
-				fields: [{ title: 'env', value: 'prod', short: true }],
-				actions: [{ type: 'button', text: 'Runbook', url: 'https://runbook' }],
-				sendResolved: true,
-			},
-		});
-	});
-
-	it('drops untouched fields so the api applies its own defaults', () => {
-		expect(
-			toChannelConfig(ChannelType.Webhook, {
-				api_url: 'https://example.com/hook',
-			}),
-		).toStrictEqual({
-			kind: 'webhook',
-			spec: { url: 'https://example.com/hook', sendResolved: false },
-		});
-	});
-
-	it('renames the fields v2 models differently', () => {
-		expect(
-			toChannelConfig(ChannelType.Jira, {
-				site: 'https://acme.atlassian.net',
-				project: 'OPS',
-				issue_type: 'Task',
-				username: 'someone@acme.io',
-				password: 'token',
-			}),
-		).toMatchObject({
-			kind: 'jira',
-			spec: { email: 'someone@acme.io', apiToken: 'token', issueType: 'Task' },
-		});
-
-		expect(
-			toChannelConfig(ChannelType.JsmOps, {
-				api_key: 'key',
-				tags: ['prod', 'db'],
-			}),
-		).toMatchObject({ kind: 'jsmops', spec: { tags: 'prod,db' } });
-	});
-
-	it('parses the raw json the pagerduty form holds for details', () => {
-		expect(
-			toChannelConfig(ChannelType.Pagerduty, {
-				routing_key: 'key',
-				details: '{"firing":"{{ .Alerts.Firing | toJson }}"}',
-			}),
-		).toMatchObject({
-			spec: { details: { firing: '{{ .Alerts.Firing | toJson }}' } },
-		});
-	});
-});
-
-describe('toPostableChannel', () => {
-	it('lets the api generate the immutable name from the display name', () => {
-		expect(toPostableChannel(ChannelType.Slack, slackValues)).toMatchObject({
-			generateName: true,
-			displayName: 'prod alerts',
-		});
-	});
-});
-
-describe('toChannelFormState', () => {
-	it('round-trips a channel back into the form it was built from', () => {
-		const channel = {
-			id: '1',
-			name: 'prod-alerts',
-			displayName: 'prod alerts',
-			createdAt: '2026-09-01T00:00:00Z',
-			updatedAt: '2026-09-01T00:00:00Z',
-			config: toChannelConfig(ChannelType.Slack, slackValues),
-		} as AlertmanagertypesGettableNotificationChannelDTO;
-
-		const { type, values } = toChannelFormState(channel);
-
-		expect(type).toBe(ChannelType.Slack);
-		expect(toChannelConfig(type, values)).toStrictEqual(channel.config);
-		expect(values.name).toBe('prod alerts');
-	});
-});

frontend/src/container/CreateAlertChannels/channelConfig.ts

@@ -1,237 +0,0 @@
-import {
-	AlertmanagertypesChannelConfigDTO,
-	AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTOKind as EmailKind,
-	AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfigDTOKind as GoogleChatKind,
-	AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTOKind as IncidentIOKind,
-	AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTOKind as JiraKind,
-	AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTOKind as JsmOpsKind,
-	AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfigDTOKind as MsTeamsKind,
-	AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTOKind as OpsgenieKind,
-	AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTOKind as PagerdutyKind,
-	AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTOKind as SlackKind,
-	AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfigDTOKind as WebhookKind,
-	AlertmanagertypesPostableNotificationChannelDTO,
-	AlertmanagertypesTestableNotificationChannelDTO,
-	AlertmanagertypesUpdatableNotificationChannelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { ChannelFormValues, ChannelType } from './config';
-
-/**
- * The v2 API rejects a key it does not model and applies its own defaults for an
- * absent one, so an untouched field must be dropped rather than sent empty.
- */
-function omitEmpty<T extends Record<string, unknown>>(spec: T): T {
-	return Object.fromEntries(
-		Object.entries(spec).filter(([, value]) => {
-			if (value === undefined || value === null || value === '') {
-				return false;
-			}
-			if (Array.isArray(value)) {
-				return value.length > 0;
-			}
-			if (typeof value === 'object') {
-				return Object.keys(value).length > 0;
-			}
-			return true;
-		}),
-	) as T;
-}
-
-/** The pagerduty and opsgenie forms hold `details` as raw JSON text. */
-function parseDetails(details?: string): Record<string, string> {
-	if (!details) {
-		return {};
-	}
-	try {
-		return JSON.parse(details);
-	} catch {
-		return {};
-	}
-}
-
-function dropBlankKeys(
-	pairs?: Record<string, string>,
-): Record<string, string> | undefined {
-	if (!pairs) {
-		return undefined;
-	}
-	return Object.fromEntries(
-		Object.entries(pairs).filter(([key]) => key.trim() !== ''),
-	);
-}
-
-export function toChannelConfig(
-	type: ChannelType,
-	values: ChannelFormValues,
-): AlertmanagertypesChannelConfigDTO {
-	const sendResolved = values.send_resolved ?? false;
-
-	switch (type) {
-		case ChannelType.Slack:
-			return {
-				kind: SlackKind.slack,
-				spec: omitEmpty({
-					apiUrl: values.api_url ?? '',
-					channel: values.channel,
-					title: values.title,
-					titleLink: values.title_link,
-					text: values.text,
-					pretext: values.pretext,
-					fallback: values.fallback,
-					footer: values.footer,
-					color: values.color,
-					fields: values.fields,
-					actions: values.actions,
-					sendResolved,
-				}),
-			};
-		case ChannelType.Webhook:
-			return {
-				kind: WebhookKind.webhook,
-				spec: omitEmpty({
-					url: values.api_url ?? '',
-					username: values.username,
-					password: values.password,
-					bearerToken: values.bearer_token,
-					sendResolved,
-				}),
-			};
-		case ChannelType.Email:
-			return {
-				kind: EmailKind.email,
-				spec: omitEmpty({
-					to: values.to ?? '',
-					html: values.html,
-					headers: dropBlankKeys(values.headers),
-					sendResolved,
-				}),
-			};
-		case ChannelType.Pagerduty:
-			return {
-				kind: PagerdutyKind.pagerduty,
-				spec: omitEmpty({
-					routingKey: values.routing_key ?? '',
-					client: values.client,
-					clientUrl: values.client_url,
-					description: values.description,
-					severity: values.severity,
-					component: values.component,
-					group: values.group,
-					class: values.class,
-					url: values.pagerduty_url,
-					details: parseDetails(values.details),
-					sendResolved,
-				}),
-			};
-		case ChannelType.Opsgenie:
-			return {
-				kind: OpsgenieKind.opsgenie,
-				spec: omitEmpty({
-					apiKey: values.api_key ?? '',
-					apiUrl: values.opsgenie_api_url,
-					message: values.message,
-					description: values.description,
-					source: values.source,
-					priority: values.priority,
-					details: parseDetails(values.details),
-					sendResolved,
-				}),
-			};
-		case ChannelType.MsTeams:
-			return {
-				kind: MsTeamsKind.msteams,
-				spec: omitEmpty({
-					webhookUrl: values.webhook_url ?? '',
-					title: values.title,
-					text: values.text,
-					sendResolved,
-				}),
-			};
-		case ChannelType.GoogleChat:
-			return {
-				kind: GoogleChatKind.googlechat,
-				spec: omitEmpty({
-					webhookUrl: values.webhook_url ?? '',
-					title: values.title,
-					text: values.text,
-					sendResolved,
-				}),
-			};
-		case ChannelType.Jira:
-			return {
-				kind: JiraKind.jira,
-				spec: omitEmpty({
-					site: values.site ?? '',
-					project: values.project ?? '',
-					issueType: values.issue_type ?? '',
-					// basic auth: the atlassian account email and its api token
-					email: values.username ?? '',
-					apiToken: values.password ?? '',
-					summary: values.summary,
-					description: values.description,
-					priority: values.priority,
-					labels: values.labels,
-					resolveTransition: values.resolve_transition,
-					reopenTransition: values.reopen_transition,
-					wontFixResolution: values.wont_fix_resolution,
-					reopenDuration: values.reopen_duration,
-					customFields: dropBlankKeys(values.custom_fields),
-					sendResolved,
-				}),
-			};
-		case ChannelType.JsmOps:
-			return {
-				kind: JsmOpsKind.jsmops,
-				spec: omitEmpty({
-					apiKey: values.api_key ?? '',
-					message: values.message,
-					description: values.description,
-					priority: values.priority,
-					// the backend takes a comma-separated string and splits it back
-					tags: values.tags?.join(','),
-					sendResolved,
-				}),
-			};
-		case ChannelType.IncidentIO:
-			return {
-				kind: IncidentIOKind.incidentio,
-				spec: omitEmpty({
-					url: values.url ?? '',
-					token: values.token ?? '',
-					title: values.title,
-					description: values.description,
-					metadata: dropBlankKeys(values.metadata),
-					sendResolved,
-				}),
-			};
-		default:
-			throw new Error(`unsupported channel type: ${String(type)}`);
-	}
-}
-
-export function toPostableChannel(
-	type: ChannelType,
-	values: ChannelFormValues,
-): AlertmanagertypesPostableNotificationChannelDTO {
-	return {
-		// the api derives the immutable dns1123 name from the display name
-		generateName: true,
-		displayName: values.name ?? '',
-		config: toChannelConfig(type, values),
-	};
-}
-
-export function toUpdatableChannel(
-	type: ChannelType,
-	values: ChannelFormValues,
-): AlertmanagertypesUpdatableNotificationChannelDTO {
-	return { config: toChannelConfig(type, values) };
-}
-
-export function toTestableChannel(
-	type: ChannelType,
-	values: ChannelFormValues,
-): AlertmanagertypesTestableNotificationChannelDTO {
-	return { config: toChannelConfig(type, values) };
-}

frontend/src/container/CreateAlertChannels/channelFormValues.ts

@@ -1,155 +0,0 @@
-import {
-	AlertmanagertypesChannelConfigDTO,
-	AlertmanagertypesGettableNotificationChannelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { ChannelFormValues, ChannelType } from './config';
-
-/** jira custom field values are free-form json server-side, the form edits text. */
-function toStringMap(
-	pairs?: Record<string, unknown>,
-): Record<string, string> | undefined {
-	if (!pairs) {
-		return undefined;
-	}
-	return Object.fromEntries(
-		Object.entries(pairs).map(([key, value]) => [
-			key,
-			typeof value === 'string' ? value : JSON.stringify(value),
-		]),
-	);
-}
-
-function stringifyDetails(details?: Record<string, string>): string {
-	return details && Object.keys(details).length > 0
-		? JSON.stringify(details)
-		: '';
-}
-
-function toValues(
-	config: AlertmanagertypesChannelConfigDTO,
-): ChannelFormValues {
-	switch (config.kind) {
-		case 'slack':
-			return {
-				api_url: config.spec.apiUrl,
-				channel: config.spec.channel,
-				title: config.spec.title,
-				title_link: config.spec.titleLink,
-				text: config.spec.text,
-				pretext: config.spec.pretext,
-				fallback: config.spec.fallback,
-				footer: config.spec.footer,
-				color: config.spec.color,
-				fields: config.spec.fields,
-				actions: config.spec.actions,
-				send_resolved: config.spec.sendResolved ?? false,
-			};
-		case 'webhook':
-			return {
-				api_url: config.spec.url,
-				username: config.spec.username,
-				password: config.spec.password,
-				bearer_token: config.spec.bearerToken,
-				send_resolved: config.spec.sendResolved ?? false,
-			};
-		case 'email':
-			return {
-				to: config.spec.to,
-				html: config.spec.html,
-				headers: config.spec.headers,
-				send_resolved: config.spec.sendResolved ?? false,
-			};
-		case 'pagerduty':
-			return {
-				routing_key: config.spec.routingKey,
-				client: config.spec.client,
-				client_url: config.spec.clientUrl,
-				description: config.spec.description,
-				severity: config.spec.severity,
-				component: config.spec.component,
-				group: config.spec.group,
-				class: config.spec.class,
-				pagerduty_url: config.spec.url,
-				details: stringifyDetails(config.spec.details),
-				detailsArray: config.spec.details,
-				send_resolved: config.spec.sendResolved ?? false,
-			};
-		case 'opsgenie':
-			return {
-				api_key: config.spec.apiKey,
-				opsgenie_api_url: config.spec.apiUrl,
-				message: config.spec.message,
-				description: config.spec.description,
-				source: config.spec.source,
-				priority: config.spec.priority,
-				details: stringifyDetails(config.spec.details),
-				detailsArray: config.spec.details,
-				send_resolved: config.spec.sendResolved ?? false,
-			};
-		case 'msteams':
-		case 'googlechat':
-			return {
-				webhook_url: config.spec.webhookUrl,
-				title: config.spec.title,
-				text: config.spec.text,
-				send_resolved: config.spec.sendResolved ?? false,
-			};
-		case 'jira':
-			return {
-				site: config.spec.site,
-				project: config.spec.project,
-				issue_type: config.spec.issueType,
-				username: config.spec.email,
-				password: config.spec.apiToken,
-				summary: config.spec.summary,
-				description: config.spec.description,
-				priority: config.spec.priority,
-				labels: config.spec.labels,
-				resolve_transition: config.spec.resolveTransition,
-				reopen_transition: config.spec.reopenTransition,
-				wont_fix_resolution: config.spec.wontFixResolution,
-				reopen_duration: config.spec.reopenDuration,
-				custom_fields: toStringMap(config.spec.customFields),
-				send_resolved: config.spec.sendResolved ?? false,
-			};
-		case 'jsmops':
-			return {
-				api_key: config.spec.apiKey,
-				message: config.spec.message,
-				description: config.spec.description,
-				priority: config.spec.priority,
-				tags: config.spec.tags ? config.spec.tags.split(',') : undefined,
-				send_resolved: config.spec.sendResolved ?? false,
-			};
-		case 'incidentio':
-			return {
-				url: config.spec.url,
-				token: config.spec.token,
-				title: config.spec.title,
-				description: config.spec.description,
-				metadata: config.spec.metadata,
-				send_resolved: config.spec.sendResolved ?? false,
-			};
-		default:
-			return {};
-	}
-}
-
-export interface ChannelFormState {
-	type: ChannelType;
-	values: ChannelFormValues;
-}
-
-export function toChannelFormState(
-	channel: AlertmanagertypesGettableNotificationChannelDTO,
-): ChannelFormState {
-	return {
-		type: channel.config.kind as string as ChannelType,
-		values: {
-			...toValues(channel.config),
-			// the api keeps name immutable and exposes the editable label separately
-			name: channel.displayName,
-		},
-	};
-}

frontend/src/container/CreateAlertChannels/config.ts

@@ -1,8 +1,3 @@
-import {
-	AlertmanagertypesChannelSlackActionDTO,
-	AlertmanagertypesChannelSlackFieldDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
 export interface Channel {
 	send_resolved?: boolean;
 	name: string;
@@ -13,26 +8,14 @@ export interface SlackChannel extends Channel {
 	api_url?: string;
 	channel?: string;
 	title?: string;
-	// link the attachment title points at
-	title_link?: string;
 	text?: string;
-	// text shown above the attachment block
-	pretext?: string;
-	// plain-text shown where the attachment cannot render, e.g. notifications
-	fallback?: string;
-	footer?: string;
-	// attachment bar colour: good, warning, danger or a #rrggbb value
-	color?: string;
-	fields?: AlertmanagertypesChannelSlackFieldDTO[];
-	actions?: AlertmanagertypesChannelSlackActionDTO[];
 }
 
 export interface WebhookChannel extends Channel {
 	api_url?: string;
-	// basic auth, optional — a channel may send with bearer auth or none at all
+	// basic auth
 	username?: string;
 	password?: string;
-	bearer_token?: string;
 }
 
 // PagerChannel configures alert manager to send
@@ -56,8 +39,6 @@ export interface PagerChannel extends Channel {
 
 	details?: string;
 	detailsArray?: Record<string, string>;
-	// pagerduty events api endpoint, defaulted server-side when empty
-	pagerduty_url?: string;
 }
 
 // OpsgenieChannel configures alert manager to send
@@ -81,9 +62,6 @@ export interface OpsgenieChannel extends Channel {
 
 	// Priority level of alert. Possible values are P1, P2, P3, P4, and P5.
 	priority?: string;
-
-	// opsgenie api endpoint, defaulted server-side when empty
-	opsgenie_api_url?: string;
 }
 
 export interface EmailChannel extends Channel {
@@ -183,8 +161,6 @@ export interface JiraChannel extends Channel {
 	wont_fix_resolution?: string;
 	// duration string, e.g. 72h or 3d
 	reopen_duration?: string;
-	// jira custom field ids mapped to their templated values
-	custom_fields?: Record<string, string>;
 }
 
 // IncidentIOChannel configures the incident.io alert channel, backed by an
@@ -216,20 +192,3 @@ export interface JsmOpsChannel extends Channel {
 	// tags, joined to a comma-separated string for the backend
 	tags?: string[];
 }
-
-/**
- * The create and edit forms hold every kind's fields in one object, so a type
- * switch keeps whatever the shared fields (title, text, description) already had.
- */
-export type ChannelFormValues = Partial<
-	SlackChannel &
-		WebhookChannel &
-		PagerChannel &
-		MsTeamsChannel &
-		OpsgenieChannel &
-		EmailChannel &
-		GoogleChatChannel &
-		JiraChannel &
-		JsmOpsChannel &
-		IncidentIOChannel
->;

frontend/src/container/CreateAlertChannels/index.tsx

@@ -0,0 +1,818 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Form } from 'antd';
+import createEmail from 'api/channels/createEmail';
+import createMsTeamsApi from 'api/channels/createMsTeams';
+import createOpsgenie from 'api/channels/createOpsgenie';
+import createPagerApi from 'api/channels/createPager';
+import createSlackApi from 'api/channels/createSlack';
+import createWebhookApi from 'api/channels/createWebhook';
+import testEmail from 'api/channels/testEmail';
+import testMsTeamsApi from 'api/channels/testMsTeams';
+import testOpsGenie from 'api/channels/testOpsgenie';
+import testPagerApi from 'api/channels/testPager';
+import testSlackApi from 'api/channels/testSlack';
+import testWebhookApi from 'api/channels/testWebhook';
+import logEvent from 'api/common/logEvent';
+import {
+	useCreateChannel,
+	useTestChannel,
+} from 'api/generated/services/channels';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { ErrorType } from 'api/generatedAPIInstance';
+import ROUTES from 'constants/routes';
+import FormAlertChannels from 'container/FormAlertChannels';
+import { useNotifications } from 'hooks/useNotifications';
+import history from 'lib/history';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+import { toAPIError } from 'utils/errorUtils';
+
+import {
+	ChannelType,
+	EmailChannel,
+	GoogleChatChannel,
+	IncidentIOChannel,
+	JiraChannel,
+	JsmOpsChannel,
+	MsTeamsChannel,
+	OpsgenieChannel,
+	PagerChannel,
+	SlackChannel,
+	ValidatePagerChannel,
+	WebhookChannel,
+} from './config';
+import { ChannelInitialConfig } from './defaults';
+import {
+	isChannelType,
+	isValidGoogleChatWebhookURL,
+	isValidIncidentIOURL,
+	isValidJiraReopenDuration,
+	isValidJiraSiteURL,
+	prepareGoogleChatRequest,
+	prepareIncidentIORequest,
+	prepareJiraRequest,
+	prepareJsmOpsRequest,
+} from './utils';
+
+import './CreateAlertChannels.styles.scss';
+
+function CreateAlertChannels({
+	preType = ChannelType.Slack,
+}: CreateAlertChannelsProps): JSX.Element {
+	// init namespace for translations
+	const { t } = useTranslation('channels');
+	const { showErrorModal } = useErrorModal();
+
+	const [formInstance] = Form.useForm();
+
+	useEffect(() => {
+		logEvent('Alert Channel: Create channel page visited', {});
+	}, []);
+
+	const [selectedConfig, setSelectedConfig] = useState<
+		Partial<
+			SlackChannel &
+				WebhookChannel &
+				PagerChannel &
+				MsTeamsChannel &
+				OpsgenieChannel &
+				EmailChannel &
+				GoogleChatChannel &
+				JiraChannel &
+				JsmOpsChannel &
+				IncidentIOChannel
+		>
+	>(() => ({
+		send_resolved: true,
+		...ChannelInitialConfig[preType],
+	}));
+	const [savingState, setSavingState] = useState<boolean>(false);
+	const [testingState, setTestingState] = useState<boolean>(false);
+	const { notifications } = useNotifications();
+
+	const { mutateAsync: createChannel } = useCreateChannel();
+	const { mutateAsync: testChannel } = useTestChannel();
+
+	const [type, setType] = useState<ChannelType>(preType);
+	const onTypeChangeHandler = useCallback(
+		(value: string) => {
+			const nextType = value as ChannelType;
+			if (nextType === type) {
+				return;
+			}
+
+			setType(nextType);
+
+			// the fields the types share (title, text, description) keep the value of
+			// the type that was selected before, so the new type's defaults have to be
+			// written to both the config and the form
+			const defaults = ChannelInitialConfig[nextType];
+			setSelectedConfig((selectedConfig) => ({ ...selectedConfig, ...defaults }));
+			formInstance.setFieldsValue(defaults);
+		},
+		[type, formInstance],
+	);
+
+	const prepareSlackRequest = useCallback(
+		() => ({
+			api_url: selectedConfig?.api_url || '',
+			channel: selectedConfig?.channel || '',
+			name: selectedConfig?.name || '',
+			send_resolved: selectedConfig?.send_resolved || false,
+			text: selectedConfig?.text || '',
+			title: selectedConfig?.title || '',
+		}),
+		[selectedConfig],
+	);
+
+	const onSlackHandler = useCallback(async () => {
+		if (!selectedConfig.api_url) {
+			notifications.error({
+				message: 'Error',
+				description: t('webhook_url_required'),
+			});
+			return;
+		}
+
+		setSavingState(true);
+
+		try {
+			await createSlackApi(prepareSlackRequest());
+			notifications.success({
+				message: 'Success',
+				description: t('channel_creation_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_creation_done') };
+		} catch (error) {
+			showErrorModal(error as APIError);
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} finally {
+			setSavingState(false);
+		}
+	}, [selectedConfig, notifications, t, prepareSlackRequest, showErrorModal]);
+
+	const prepareWebhookRequest = useCallback(() => {
+		// initial api request without auth params
+		let request: WebhookChannel = {
+			api_url: selectedConfig?.api_url || '',
+			name: selectedConfig?.name || '',
+			send_resolved: selectedConfig?.send_resolved || false,
+		};
+
+		if (selectedConfig?.username !== '' || selectedConfig?.password !== '') {
+			if (selectedConfig?.username !== '') {
+				// if username is not null then password must be passed
+				if (selectedConfig?.password !== '') {
+					request = {
+						...request,
+						username: selectedConfig.username,
+						password: selectedConfig.password,
+					};
+				} else {
+					notifications.error({
+						message: 'Error',
+						description: t('username_no_password'),
+					});
+				}
+			} else if (selectedConfig?.password !== '') {
+				// only password entered, set bearer token
+				request = {
+					...request,
+					username: '',
+					password: selectedConfig.password,
+				};
+			}
+		}
+		return request;
+	}, [notifications, t, selectedConfig]);
+
+	const onWebhookHandler = useCallback(async () => {
+		if (!selectedConfig.api_url) {
+			notifications.error({
+				message: 'Error',
+				description: t('webhook_url_required'),
+			});
+			return;
+		}
+
+		setSavingState(true);
+		try {
+			const request = prepareWebhookRequest();
+			await createWebhookApi(request);
+			notifications.success({
+				message: 'Success',
+				description: t('channel_creation_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_creation_done') };
+		} catch (error) {
+			showErrorModal(error as APIError);
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		selectedConfig.api_url,
+		notifications,
+		t,
+		prepareWebhookRequest,
+		showErrorModal,
+	]);
+
+	const preparePagerRequest = useCallback(() => {
+		const validationError = ValidatePagerChannel(selectedConfig as PagerChannel);
+		if (validationError !== '') {
+			notifications.error({
+				message: 'Error',
+				description: validationError,
+			});
+			return null;
+		}
+
+		return {
+			name: selectedConfig?.name || '',
+			send_resolved: selectedConfig?.send_resolved || false,
+			routing_key: selectedConfig?.routing_key || '',
+			client: selectedConfig?.client || '',
+			client_url: selectedConfig?.client_url || '',
+			description: selectedConfig?.description || '',
+			severity: selectedConfig?.severity || '',
+			component: selectedConfig?.component || '',
+			group: selectedConfig?.group || '',
+			class: selectedConfig?.class || '',
+			details: selectedConfig.details || '',
+			detailsArray: JSON.parse(selectedConfig.details || '{}'),
+		};
+	}, [selectedConfig, notifications]);
+
+	const onPagerHandler = useCallback(async () => {
+		setSavingState(true);
+		const request = preparePagerRequest();
+
+		try {
+			if (request) {
+				await createPagerApi(request);
+				notifications.success({
+					message: 'Success',
+					description: t('channel_creation_done'),
+				});
+				history.replace(ROUTES.ALL_CHANNELS);
+				return { status: 'success', statusMessage: t('channel_creation_done') };
+			}
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} catch (error) {
+			showErrorModal(error as APIError);
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} finally {
+			setSavingState(false);
+		}
+	}, [preparePagerRequest, t, notifications, showErrorModal]);
+
+	const prepareOpsgenieRequest = useCallback(
+		() => ({
+			api_key: selectedConfig?.api_key || '',
+			name: selectedConfig?.name || '',
+			send_resolved: selectedConfig?.send_resolved || false,
+			description: selectedConfig?.description || '',
+			message: selectedConfig?.message || '',
+			priority: selectedConfig?.priority || '',
+		}),
+		[selectedConfig],
+	);
+
+	const onOpsgenieHandler = useCallback(async () => {
+		if (!selectedConfig.api_key) {
+			notifications.error({
+				message: 'Error',
+				description: t('api_key_required'),
+			});
+			return;
+		}
+
+		setSavingState(true);
+		try {
+			await createOpsgenie(prepareOpsgenieRequest());
+			notifications.success({
+				message: 'Success',
+				description: t('channel_creation_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_creation_done') };
+		} catch (error) {
+			showErrorModal(error as APIError);
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		selectedConfig.api_key,
+		notifications,
+		t,
+		prepareOpsgenieRequest,
+		showErrorModal,
+	]);
+
+	const prepareEmailRequest = useCallback(
+		() => ({
+			name: selectedConfig?.name || '',
+			send_resolved: selectedConfig?.send_resolved || false,
+			to: selectedConfig?.to || '',
+			html: selectedConfig?.html || '',
+			headers: selectedConfig?.headers || {},
+		}),
+		[selectedConfig],
+	);
+
+	const onEmailHandler = useCallback(async () => {
+		if (!selectedConfig.to) {
+			notifications.error({
+				message: 'Error',
+				description: t('to_required'),
+			});
+			return;
+		}
+
+		setSavingState(true);
+		try {
+			const request = prepareEmailRequest();
+			await createEmail(request);
+			notifications.success({
+				message: 'Success',
+				description: t('channel_creation_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_creation_done') };
+		} catch (error) {
+			showErrorModal(error as APIError);
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} finally {
+			setSavingState(false);
+		}
+	}, [prepareEmailRequest, notifications, t, showErrorModal, selectedConfig.to]);
+
+	const prepareMsTeamsRequest = useCallback(
+		() => ({
+			webhook_url: selectedConfig?.webhook_url || '',
+			name: selectedConfig?.name || '',
+			send_resolved: selectedConfig?.send_resolved || false,
+			text: selectedConfig?.text || '',
+			title: selectedConfig?.title || '',
+		}),
+		[selectedConfig],
+	);
+
+	const onMsTeamsHandler = useCallback(async () => {
+		if (!selectedConfig.webhook_url) {
+			notifications.error({
+				message: 'Error',
+				description: t('webhook_url_required'),
+			});
+			return;
+		}
+
+		setSavingState(true);
+
+		try {
+			await createMsTeamsApi(prepareMsTeamsRequest());
+			notifications.success({
+				message: 'Success',
+				description: t('channel_creation_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_creation_done') };
+		} catch (error) {
+			showErrorModal(error as APIError);
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		selectedConfig.webhook_url,
+		notifications,
+		t,
+		prepareMsTeamsRequest,
+		showErrorModal,
+	]);
+
+	const validateGoogleChatConfig = useCallback((): boolean => {
+		if (!selectedConfig.webhook_url) {
+			notifications.error({
+				message: 'Error',
+				description: t('webhook_url_required'),
+			});
+			return false;
+		}
+
+		if (!isValidGoogleChatWebhookURL(selectedConfig.webhook_url)) {
+			notifications.error({
+				message: 'Error',
+				description: t('google_chat_webhook_url_invalid'),
+			});
+			return false;
+		}
+
+		return true;
+	}, [selectedConfig.webhook_url, notifications, t]);
+
+	const onGoogleChatHandler = useCallback(async () => {
+		if (!validateGoogleChatConfig()) {
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		}
+
+		setSavingState(true);
+
+		try {
+			await createChannel({ data: prepareGoogleChatRequest(selectedConfig) });
+			notifications.success({
+				message: 'Success',
+				description: t('channel_creation_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_creation_done') };
+		} catch (error) {
+			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		validateGoogleChatConfig,
+		createChannel,
+		selectedConfig,
+		notifications,
+		t,
+		showErrorModal,
+	]);
+
+	const validateJiraConfig = useCallback((): boolean => {
+		if (
+			!selectedConfig.site ||
+			!selectedConfig.username ||
+			!selectedConfig.password ||
+			!selectedConfig.project ||
+			!selectedConfig.issue_type
+		) {
+			notifications.error({
+				message: 'Error',
+				description: t('jira_required_fields'),
+			});
+			return false;
+		}
+
+		if (!isValidJiraSiteURL(selectedConfig.site)) {
+			notifications.error({
+				message: 'Error',
+				description: t('jira_site_invalid'),
+			});
+			return false;
+		}
+
+		if (
+			selectedConfig.reopen_duration &&
+			!isValidJiraReopenDuration(selectedConfig.reopen_duration)
+		) {
+			notifications.error({
+				message: 'Error',
+				description: t('jira_reopen_duration_invalid'),
+			});
+			return false;
+		}
+
+		return true;
+	}, [selectedConfig, notifications, t]);
+
+	const onJiraHandler = useCallback(async () => {
+		if (!validateJiraConfig()) {
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		}
+
+		setSavingState(true);
+
+		try {
+			await createChannel({ data: prepareJiraRequest(selectedConfig) });
+			notifications.success({
+				message: 'Success',
+				description: t('channel_creation_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_creation_done') };
+		} catch (error) {
+			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		validateJiraConfig,
+		createChannel,
+		selectedConfig,
+		notifications,
+		t,
+		showErrorModal,
+	]);
+
+	const validateJsmOpsConfig = useCallback((): boolean => {
+		if (!selectedConfig.api_key) {
+			notifications.error({
+				message: 'Error',
+				description: t('api_key_required'),
+			});
+			return false;
+		}
+		return true;
+	}, [selectedConfig.api_key, notifications, t]);
+
+	const onJsmOpsHandler = useCallback(async () => {
+		if (!validateJsmOpsConfig()) {
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		}
+
+		setSavingState(true);
+
+		try {
+			await createChannel({ data: prepareJsmOpsRequest(selectedConfig) });
+			notifications.success({
+				message: 'Success',
+				description: t('channel_creation_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_creation_done') };
+		} catch (error) {
+			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		validateJsmOpsConfig,
+		createChannel,
+		selectedConfig,
+		notifications,
+		t,
+		showErrorModal,
+	]);
+
+	const validateIncidentIOConfig = useCallback((): boolean => {
+		if (!selectedConfig.url || !selectedConfig.token) {
+			notifications.error({
+				message: 'Error',
+				description: t('incidentio_required_fields'),
+			});
+			return false;
+		}
+
+		if (!isValidIncidentIOURL(selectedConfig.url)) {
+			notifications.error({
+				message: 'Error',
+				description: t('incidentio_url_invalid'),
+			});
+			return false;
+		}
+
+		return true;
+	}, [selectedConfig.url, selectedConfig.token, notifications, t]);
+
+	const onIncidentIOHandler = useCallback(async () => {
+		if (!validateIncidentIOConfig()) {
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		}
+
+		setSavingState(true);
+
+		try {
+			await createChannel({ data: prepareIncidentIORequest(selectedConfig) });
+			notifications.success({
+				message: 'Success',
+				description: t('channel_creation_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_creation_done') };
+		} catch (error) {
+			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		validateIncidentIOConfig,
+		createChannel,
+		selectedConfig,
+		notifications,
+		t,
+		showErrorModal,
+	]);
+
+	const onSaveHandler = useCallback(
+		async (value: ChannelType) => {
+			if (!selectedConfig.name) {
+				notifications.error({
+					message: 'Error',
+					description: t('channel_name_required'),
+				});
+				return;
+			}
+
+			const functionMapper = {
+				[ChannelType.Slack]: onSlackHandler,
+				[ChannelType.Webhook]: onWebhookHandler,
+				[ChannelType.Pagerduty]: onPagerHandler,
+				[ChannelType.Opsgenie]: onOpsgenieHandler,
+				[ChannelType.MsTeams]: onMsTeamsHandler,
+				[ChannelType.Email]: onEmailHandler,
+				[ChannelType.GoogleChat]: onGoogleChatHandler,
+				[ChannelType.Jira]: onJiraHandler,
+				[ChannelType.JsmOps]: onJsmOpsHandler,
+				[ChannelType.IncidentIO]: onIncidentIOHandler,
+			};
+
+			if (isChannelType(value)) {
+				const functionToCall = functionMapper[value as keyof typeof functionMapper];
+
+				if (functionToCall) {
+					const result = await functionToCall();
+					logEvent('Alert Channel: Save channel', {
+						type: value,
+						sendResolvedAlert: selectedConfig?.send_resolved,
+						name: selectedConfig?.name,
+						new: 'true',
+						status: result?.status,
+						statusMessage: result?.statusMessage,
+					});
+				} else {
+					notifications.error({
+						message: 'Error',
+						description: t('selected_channel_invalid'),
+					});
+				}
+			}
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[
+			onSlackHandler,
+			onWebhookHandler,
+			onPagerHandler,
+			onOpsgenieHandler,
+			onMsTeamsHandler,
+			onEmailHandler,
+			onGoogleChatHandler,
+			onJiraHandler,
+			onJsmOpsHandler,
+			onIncidentIOHandler,
+			notifications,
+			t,
+		],
+	);
+
+	const performChannelTest = useCallback(
+		async (channelType: ChannelType) => {
+			setTestingState(true);
+			try {
+				let request;
+				switch (channelType) {
+					case ChannelType.Webhook:
+						request = prepareWebhookRequest();
+						await testWebhookApi(request);
+						break;
+					case ChannelType.Slack:
+						request = prepareSlackRequest();
+						await testSlackApi(request);
+						break;
+					case ChannelType.Pagerduty:
+						request = preparePagerRequest();
+						if (request) {
+							await testPagerApi(request);
+						}
+						break;
+					case ChannelType.MsTeams:
+						request = prepareMsTeamsRequest();
+						await testMsTeamsApi(request);
+						break;
+					case ChannelType.Opsgenie:
+						request = prepareOpsgenieRequest();
+						await testOpsGenie(request);
+						break;
+					case ChannelType.Email:
+						request = prepareEmailRequest();
+						await testEmail(request);
+						break;
+					case ChannelType.GoogleChat:
+						if (!validateGoogleChatConfig()) {
+							setTestingState(false);
+							return;
+						}
+						await testChannel({ data: prepareGoogleChatRequest(selectedConfig) });
+						break;
+					case ChannelType.Jira:
+						if (!validateJiraConfig()) {
+							setTestingState(false);
+							return;
+						}
+						await testChannel({ data: prepareJiraRequest(selectedConfig) });
+						break;
+					case ChannelType.JsmOps:
+						if (!validateJsmOpsConfig()) {
+							setTestingState(false);
+							return;
+						}
+						await testChannel({ data: prepareJsmOpsRequest(selectedConfig) });
+						break;
+					case ChannelType.IncidentIO:
+						if (!validateIncidentIOConfig()) {
+							setTestingState(false);
+							return;
+						}
+						await testChannel({ data: prepareIncidentIORequest(selectedConfig) });
+						break;
+					default:
+						notifications.error({
+							message: 'Error',
+							description: t('test_unsupported'),
+						});
+						setTestingState(false);
+						return;
+				}
+
+				notifications.success({
+					message: 'Success',
+					description: t('channel_test_done'),
+				});
+				logEvent('Alert Channel: Test notification', {
+					type: channelType,
+					sendResolvedAlert: selectedConfig?.send_resolved,
+					name: selectedConfig?.name,
+					new: 'true',
+					status: 'Test success',
+				});
+			} catch (error) {
+				showErrorModal(
+					error instanceof APIError
+						? error
+						: toAPIError(error as ErrorType<RenderErrorResponseDTO>),
+				);
+
+				logEvent('Alert Channel: Test notification', {
+					type: channelType,
+					sendResolvedAlert: selectedConfig?.send_resolved,
+					name: selectedConfig?.name,
+					new: 'true',
+					status: 'Test failed',
+				});
+			}
+
+			setTestingState(false);
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[
+			prepareWebhookRequest,
+			t,
+			preparePagerRequest,
+			prepareOpsgenieRequest,
+			prepareSlackRequest,
+			prepareMsTeamsRequest,
+			prepareEmailRequest,
+			validateGoogleChatConfig,
+			validateJiraConfig,
+			validateJsmOpsConfig,
+			validateIncidentIOConfig,
+			testChannel,
+			notifications,
+		],
+	);
+
+	const onTestHandler = useCallback(
+		async (value: ChannelType) => {
+			performChannelTest(value);
+		},
+		[performChannelTest],
+	);
+
+	return (
+		<div className="create-alert-channels-container">
+			<FormAlertChannels
+				{...{
+					formInstance,
+					onTypeChangeHandler,
+					setSelectedConfig,
+					type,
+					onTestHandler,
+					onSaveHandler,
+					savingState,
+					testingState,
+					title: t('page_title_create'),
+					initialValue: {
+						type,
+						...selectedConfig,
+					},
+				}}
+			/>
+		</div>
+	);
+}
+
+interface CreateAlertChannelsProps {
+	preType: ChannelType;
+}
+
+export default CreateAlertChannels;

frontend/src/container/CreateAlertChannels/utils.ts

@@ -1,4 +1,19 @@
-import { ChannelType } from './config';
+import {
+	AlertmanagertypesIncidentIOReceiverConfigDTO,
+	AlertmanagertypesJiraReceiverConfigDTO,
+	AlertmanagertypesJSMOpsReceiverConfigDTO,
+	AlertmanagertypesPostableChannelDTO,
+	ConfigSecretURLDTO,
+	ModelDurationDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import {
+	ChannelType,
+	GoogleChatChannel,
+	IncidentIOChannel,
+	JiraChannel,
+	JsmOpsChannel,
+} from './config';
 
 export const isChannelType = (type: string): type is ChannelType =>
 	Object.values(ChannelType).includes(type as ChannelType);
@@ -17,6 +32,22 @@ export const isValidGoogleChatWebhookURL = (url: string): boolean => {
 	}
 };
 
+// create, update and test all send the same body shape
+export const prepareGoogleChatRequest = (
+	config: Partial<GoogleChatChannel>,
+): AlertmanagertypesPostableChannelDTO => ({
+	name: config.name || '',
+	googlechat_configs: [
+		{
+			// the generated type models go's config.SecretURL as an object, the api takes a string
+			webhook_url: (config.webhook_url || '') as unknown as ConfigSecretURLDTO,
+			title: config.title || '',
+			text: config.text || '',
+			send_resolved: config.send_resolved || false,
+		},
+	],
+});
+
 const JIRA_CLOUD_HOST_SUFFIX = '.atlassian.net';
 
 // the backend enforces the same rule, this is only for a nicer error experience
@@ -62,6 +93,87 @@ export const isValidJiraReopenDuration = (value: string): boolean => {
 	return totalMs >= JIRA_MIN_REOPEN_MS;
 };
 
+// create, update and test all send the same body shape. Optional fields are
+// omitted when empty so the backend applies its defaults.
+export const prepareJiraRequest = (
+	config: Partial<JiraChannel>,
+): AlertmanagertypesPostableChannelDTO => {
+	const jira: AlertmanagertypesJiraReceiverConfigDTO = {
+		site: config.site || '',
+		project: config.project || '',
+		issue_type: config.issue_type || '',
+		send_resolved: config.send_resolved || false,
+		http_config: {
+			basic_auth: {
+				username: config.username || '',
+				password: config.password || '',
+			},
+		},
+	};
+
+	if (config.summary) {
+		jira.summary = config.summary;
+	}
+	if (config.description) {
+		jira.description = config.description;
+	}
+	if (config.priority) {
+		jira.priority = config.priority;
+	}
+	if (config.labels?.length) {
+		jira.labels = config.labels;
+	}
+	if (config.resolve_transition) {
+		jira.resolve_transition = config.resolve_transition;
+	}
+	if (config.reopen_transition) {
+		jira.reopen_transition = config.reopen_transition;
+	}
+	if (config.wont_fix_resolution) {
+		jira.wont_fix_resolution = config.wont_fix_resolution;
+	}
+	if (config.reopen_duration) {
+		// the generated type models go's model.Duration as a number, the api takes a
+		// duration string like "72h"
+		jira.reopen_duration = config.reopen_duration as unknown as ModelDurationDTO;
+	}
+
+	return {
+		name: config.name || '',
+		jira_configs: [jira],
+	};
+};
+
+// create, update and test all send the same body shape. Optional fields are
+// omitted when empty so the backend applies its defaults.
+export const prepareJsmOpsRequest = (
+	config: Partial<JsmOpsChannel>,
+): AlertmanagertypesPostableChannelDTO => {
+	const jsmops: AlertmanagertypesJSMOpsReceiverConfigDTO = {
+		api_key: config.api_key || '',
+		send_resolved: config.send_resolved || false,
+	};
+
+	if (config.message) {
+		jsmops.message = config.message;
+	}
+	if (config.description) {
+		jsmops.description = config.description;
+	}
+	if (config.priority) {
+		jsmops.priority = config.priority;
+	}
+	if (config.tags?.length) {
+		// the backend takes a comma-separated string and splits it back
+		jsmops.tags = config.tags.join(',');
+	}
+
+	return {
+		name: config.name || '',
+		jsmops_configs: [jsmops],
+	};
+};
+
 const INCIDENTIO_EVENTS_PATH_PREFIX = '/v2/alert_events/http/';
 
 // the backend enforces the same rule, this is only for a nicer error experience
@@ -78,3 +190,33 @@ export const isValidIncidentIOURL = (url: string): boolean => {
 		return false;
 	}
 };
+
+// create, update and test all send the same body shape. Optional fields are
+// omitted when empty so the backend applies its defaults.
+export const prepareIncidentIORequest = (
+	config: Partial<IncidentIOChannel>,
+): AlertmanagertypesPostableChannelDTO => {
+	const incidentio: AlertmanagertypesIncidentIOReceiverConfigDTO = {
+		url: config.url || '',
+		token: config.token || '',
+		send_resolved: config.send_resolved || false,
+	};
+
+	if (config.title) {
+		incidentio.title = config.title;
+	}
+	if (config.description) {
+		incidentio.description = config.description;
+	}
+	const metadata = Object.fromEntries(
+		Object.entries(config.metadata || {}).filter(([key]) => key.trim() !== ''),
+	);
+	if (Object.keys(metadata).length > 0) {
+		incidentio.metadata = metadata;
+	}
+
+	return {
+		name: config.name || '',
+		incidentio_configs: [incidentio],
+	};
+};

frontend/src/container/CreateAlertChannels/validation.ts

@@ -1,111 +0,0 @@
-import { TFunction } from 'i18next';
-
-import {
-	ChannelFormValues,
-	ChannelType,
-	PagerChannel,
-	ValidatePagerChannel,
-} from './config';
-import {
-	isValidGoogleChatWebhookURL,
-	isValidIncidentIOURL,
-	isValidJiraReopenDuration,
-	isValidJiraSiteURL,
-} from './utils';
-
-type Validator = (values: ChannelFormValues, t: TFunction) => string | null;
-
-const requireWebhookUrl: Validator = (values, t) =>
-	values.webhook_url ? null : t('webhook_url_required');
-
-const requireApiKey: Validator = (values, t) =>
-	values.api_key ? null : t('api_key_required');
-
-const validateSlack: Validator = (values, t) =>
-	values.api_url ? null : t('webhook_url_required');
-
-const validateWebhook: Validator = (values, t) => {
-	if (!values.api_url) {
-		return t('webhook_url_required');
-	}
-	// the api allows bearer-only and no-auth webhooks, but a username without its
-	// password is still an incomplete basic auth pair
-	return values.username && !values.password ? t('username_no_password') : null;
-};
-
-const validatePagerduty: Validator = (values) => {
-	const error = ValidatePagerChannel(values as PagerChannel);
-	return error === '' ? null : error;
-};
-
-const validateEmail: Validator = (values, t) =>
-	values.to ? null : t('to_required');
-
-const validateGoogleChat: Validator = (values, t) => {
-	if (!values.webhook_url) {
-		return t('webhook_url_required');
-	}
-	return isValidGoogleChatWebhookURL(values.webhook_url)
-		? null
-		: t('google_chat_webhook_url_invalid');
-};
-
-const validateJira: Validator = (values, t) => {
-	if (
-		!values.site ||
-		!values.username ||
-		!values.password ||
-		!values.project ||
-		!values.issue_type
-	) {
-		return t('jira_required_fields');
-	}
-	if (!isValidJiraSiteURL(values.site)) {
-		return t('jira_site_invalid');
-	}
-	if (
-		values.reopen_duration &&
-		!isValidJiraReopenDuration(values.reopen_duration)
-	) {
-		return t('jira_reopen_duration_invalid');
-	}
-	return null;
-};
-
-const validateIncidentIO: Validator = (values, t) => {
-	if (!values.url || !values.token) {
-		return t('incidentio_required_fields');
-	}
-	return isValidIncidentIOURL(values.url) ? null : t('incidentio_url_invalid');
-};
-
-const VALIDATORS: Record<ChannelType, Validator> = {
-	[ChannelType.Slack]: validateSlack,
-	[ChannelType.Webhook]: validateWebhook,
-	[ChannelType.Pagerduty]: validatePagerduty,
-	[ChannelType.Opsgenie]: requireApiKey,
-	[ChannelType.JsmOps]: requireApiKey,
-	[ChannelType.Email]: validateEmail,
-	[ChannelType.MsTeams]: requireWebhookUrl,
-	[ChannelType.GoogleChat]: validateGoogleChat,
-	[ChannelType.Jira]: validateJira,
-	[ChannelType.IncidentIO]: validateIncidentIO,
-};
-
-/**
- * Client-side validation for the fields the API rejects outright, so a save
- * round trip is not spent on an obviously incomplete form. Returns the message
- * to show, or null when the form can be submitted.
- */
-export function validateChannel(
-	type: ChannelType,
-	values: ChannelFormValues,
-	t: TFunction,
-): string | null {
-	if (!values.name) {
-		return t('channel_name_required');
-	}
-
-	const validate = VALIDATORS[type];
-	return validate ? validate(values, t) : t('selected_channel_invalid');
-}

frontend/src/container/CreateAlertV2/AlertCondition/AlertCondition.tsx

@@ -1,8 +1,12 @@
+import { useQuery } from 'react-query';
 import { Button, Tooltip } from 'antd';
+import getAllChannels from 'api/channels/getAll';
 import classNames from 'classnames';
 import { ChartLine } from '@signozhq/icons';
-import { useChannelOptions } from 'hooks/notificationChannels/useChannelOptions';
+import { SuccessResponseV2 } from 'types/api';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
+import { Channels } from 'types/api/channels/getAll';
+import APIError from 'types/api/error';
 
 import { useCreateAlertState } from '../context';
 import AdvancedOptions from '../EvaluationSettings/AdvancedOptions';
@@ -21,8 +25,10 @@ function AlertCondition(): JSX.Element {
 		isLoading: isLoadingChannels,
 		isError: isErrorChannels,
 		refetch: refreshChannels,
-	} = useChannelOptions();
-	const channels = data || [];
+	} = useQuery<SuccessResponseV2<Channels[]>, APIError>(['getChannels'], {
+		queryFn: () => getAllChannels(),
+	});
+	const channels = data?.data || [];
 
 	const showMultipleTabs =
 		alertType === AlertTypes.ANOMALY_BASED_ALERT ||

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/AlertThreshold.test.tsx

@@ -2,12 +2,12 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { MemoryRouter } from 'react-router-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
-import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
+import { Channels } from 'types/api/channels/getAll';
 
 import { CreateAlertProvider } from '../../context';
 import AlertThreshold from '../AlertThreshold';
 
-const mockChannels: ChannelOption[] = [];
+const mockChannels: Channels[] = [];
 const mockRefreshChannels = jest.fn();
 const mockIsLoadingChannels = false;
 const mockIsErrorChannels = false;
@@ -85,17 +85,16 @@ jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 }));
 
 // Mock getAllChannels API
-jest.mock('hooks/notificationChannels/useChannelOptions', () => ({
+jest.mock('api/channels/getAll', () => ({
 	__esModule: true,
-	useChannelOptions: jest.fn(() => ({
-		data: [
-			{ id: '1', name: 'Email Channel' },
-			{ id: '2', name: 'Slack Channel' },
-		] as ChannelOption[],
-		isLoading: false,
-		isError: false,
-		refetch: jest.fn(),
-	})),
+	default: jest.fn(() =>
+		Promise.resolve({
+			data: [
+				{ id: '1', name: 'Email Channel' },
+				{ id: '2', name: 'Slack Channel' },
+			] as Channels[],
+		}),
+	),
 }));
 
 // Mock alert format categories

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/ThresholdItem.test.tsx

@@ -3,7 +3,7 @@ import type { DefaultOptionType } from 'antd/es/select';
 import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
 import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
 import * as appHooks from 'providers/App/App';
-import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
+import { Channels } from 'types/api/channels/getAll';
 
 import * as context from '../../context';
 import ThresholdItem from '../ThresholdItem';
@@ -57,7 +57,7 @@ const mockThreshold = {
 	color: '#ff0000',
 };
 
-const mockChannels: ChannelOption[] = [
+const mockChannels: Channels[] = [
 	{
 		id: TEST_CONSTANTS.CHANNEL_1,
 		name: TEST_CONSTANTS.EMAIL_CHANNEL_NAME,

frontend/src/container/CreateAlertV2/AlertCondition/types.ts

@@ -1,5 +1,5 @@
 import type { DefaultOptionType } from 'antd/es/select';
-import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
+import { Channels } from 'types/api/channels/getAll';
 
 import {
 	NotificationSettingsAction,
@@ -21,7 +21,7 @@ export interface ThresholdItemProps {
 	updateThreshold: UpdateThreshold;
 	removeThreshold: (thresholdId: string) => void;
 	showRemoveButton: boolean;
-	channels: ChannelOption[];
+	channels: Channels[];
 	isLoadingChannels: boolean;
 	units: DefaultOptionType[];
 	isErrorChannels: boolean;
@@ -29,7 +29,7 @@ export interface ThresholdItemProps {
 }
 
 export interface AnomalyAndThresholdProps {
-	channels: ChannelOption[];
+	channels: Channels[];
 	isLoadingChannels: boolean;
 	isErrorChannels: boolean;
 	refreshChannels: () => void;

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -207,7 +207,12 @@ export default function CustomDomainSettings(): JSX.Element {
 					>
 						<DropdownMenu>
 							<DropdownMenuTrigger asChild>
-								<Button variant="link" color="none" disabled={isFetchingHosts}>
+								<Button
+									variant="link"
+									color="none"
+									data-testid="custom-domain-menu-trigger"
+									disabled={isFetchingHosts}
+								>
 									<Link2 size={12} />
 									<span>{stripProtocol(activeHost?.url ?? '')}</span>
 									<ChevronDown size={12} />

frontend/src/container/Download/Download.tsx

@@ -71,6 +71,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 		<DropdownMenuSimple menu={menu}>
 			<Button
 				className="download-button"
+				data-testid="download-menu-trigger"
 				loading={isLoading || isDownloading}
 				size="small"
 				type="link"

frontend/src/container/EditAlertChannels/index.tsx

@@ -0,0 +1,863 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Form } from 'antd';
+import editEmail from 'api/channels/editEmail';
+import editMsTeamsApi from 'api/channels/editMsTeams';
+import editOpsgenie from 'api/channels/editOpsgenie';
+import editPagerApi from 'api/channels/editPager';
+import editSlackApi from 'api/channels/editSlack';
+import editWebhookApi from 'api/channels/editWebhook';
+import testEmail from 'api/channels/testEmail';
+import testMsTeamsApi from 'api/channels/testMsTeams';
+import testOpsgenie from 'api/channels/testOpsgenie';
+import testPagerApi from 'api/channels/testPager';
+import testSlackApi from 'api/channels/testSlack';
+import testWebhookApi from 'api/channels/testWebhook';
+import logEvent from 'api/common/logEvent';
+import {
+	useTestChannel,
+	useUpdateChannelByID,
+} from 'api/generated/services/channels';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { ErrorType } from 'api/generatedAPIInstance';
+import ROUTES from 'constants/routes';
+import {
+	ChannelType,
+	EmailChannel,
+	GoogleChatChannel,
+	IncidentIOChannel,
+	JiraChannel,
+	JsmOpsChannel,
+	MsTeamsChannel,
+	OpsgenieChannel,
+	PagerChannel,
+	SlackChannel,
+	ValidatePagerChannel,
+	WebhookChannel,
+} from 'container/CreateAlertChannels/config';
+import {
+	isValidGoogleChatWebhookURL,
+	isValidIncidentIOURL,
+	isValidJiraReopenDuration,
+	isValidJiraSiteURL,
+	prepareGoogleChatRequest,
+	prepareIncidentIORequest,
+	prepareJiraRequest,
+	prepareJsmOpsRequest,
+} from 'container/CreateAlertChannels/utils';
+import FormAlertChannels from 'container/FormAlertChannels';
+import { useNotifications } from 'hooks/useNotifications';
+import history from 'lib/history';
+import APIError from 'types/api/error';
+import { toAPIError } from 'utils/errorUtils';
+
+function EditAlertChannels({
+	initialValue,
+	channelId: id,
+}: EditAlertChannelsProps): JSX.Element {
+	// init namespace for translations
+	const { t } = useTranslation('channels');
+
+	const [formInstance] = Form.useForm();
+	const [selectedConfig, setSelectedConfig] = useState<
+		Partial<
+			SlackChannel &
+				WebhookChannel &
+				PagerChannel &
+				MsTeamsChannel &
+				OpsgenieChannel &
+				EmailChannel &
+				GoogleChatChannel &
+				JiraChannel &
+				JsmOpsChannel &
+				IncidentIOChannel
+		>
+	>({
+		...initialValue,
+	});
+	const [savingState, setSavingState] = useState<boolean>(false);
+	const [testingState, setTestingState] = useState<boolean>(false);
+	const { notifications } = useNotifications();
+
+	const { mutateAsync: updateChannel } = useUpdateChannelByID();
+	const { mutateAsync: testChannel } = useTestChannel();
+
+	const notifyError = useCallback(
+		(error: unknown): APIError => {
+			const apiError =
+				error instanceof APIError
+					? error
+					: toAPIError(error as ErrorType<RenderErrorResponseDTO>);
+
+			notifications.error({
+				message: apiError.getErrorCode(),
+				description: apiError.getErrorMessage(),
+			});
+
+			return apiError;
+		},
+		[notifications],
+	);
+
+	const [type, setType] = useState<ChannelType>(
+		initialValue?.type ? (initialValue.type as ChannelType) : ChannelType.Slack,
+	);
+
+	const onTypeChangeHandler = useCallback((value: string) => {
+		setType(value as ChannelType);
+	}, []);
+
+	useEffect(() => {
+		formInstance.setFieldsValue({
+			...initialValue,
+		});
+	}, [formInstance, initialValue]);
+
+	const prepareSlackRequest = useCallback(
+		() => ({
+			api_url: selectedConfig?.api_url || '',
+			channel: selectedConfig?.channel || '',
+			name: selectedConfig?.name || '',
+			send_resolved: selectedConfig?.send_resolved || false,
+			text: selectedConfig?.text || '',
+			title: selectedConfig?.title || '',
+			id,
+		}),
+		[id, selectedConfig],
+	);
+
+	const onSlackEditHandler = useCallback(async () => {
+		setSavingState(true);
+
+		if (selectedConfig?.api_url === '') {
+			notifications.error({
+				message: 'Error',
+				description: t('webhook_url_required'),
+			});
+			setSavingState(false);
+			return { status: 'failed', statusMessage: t('webhook_url_required') };
+		}
+
+		try {
+			await editSlackApi(prepareSlackRequest());
+			notifications.success({
+				message: 'Success',
+				description: t('channel_edit_done'),
+			});
+
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_edit_done') };
+		} catch (error) {
+			notifications.error({
+				message: (error as APIError).getErrorCode(),
+				description: (error as APIError).getErrorMessage(),
+			});
+			return {
+				status: 'failed',
+				statusMessage:
+					(error as APIError).getErrorMessage() || t('channel_edit_failed'),
+			};
+		} finally {
+			setSavingState(false);
+		}
+	}, [prepareSlackRequest, t, notifications, selectedConfig]);
+
+	const prepareWebhookRequest = useCallback(() => {
+		const { name, username, password } = selectedConfig;
+		return {
+			api_url: selectedConfig?.api_url || '',
+			name: name || '',
+			send_resolved: selectedConfig?.send_resolved || false,
+			username,
+			password,
+			id,
+		};
+	}, [id, selectedConfig]);
+
+	const onWebhookEditHandler = useCallback(async () => {
+		setSavingState(true);
+		const { username, password } = selectedConfig;
+
+		const showError = (msg: string): void => {
+			notifications.error({
+				message: 'Error',
+				description: msg,
+			});
+		};
+
+		if (selectedConfig?.api_url === '') {
+			showError(t('webhook_url_required'));
+			setSavingState(false);
+			return { status: 'failed', statusMessage: t('webhook_url_required') };
+		}
+
+		if (username && (!password || password === '')) {
+			showError(t('username_no_password'));
+			setSavingState(false);
+			return { status: 'failed', statusMessage: t('username_no_password') };
+		}
+
+		try {
+			await editWebhookApi(prepareWebhookRequest());
+			notifications.success({
+				message: 'Success',
+				description: t('channel_edit_done'),
+			});
+
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_edit_done') };
+		} catch (error) {
+			notifications.error({
+				message: (error as APIError).getErrorCode(),
+				description: (error as APIError).getErrorMessage(),
+			});
+			return {
+				status: 'failed',
+				statusMessage:
+					(error as APIError).getErrorMessage() || t('channel_edit_failed'),
+			};
+		} finally {
+			setSavingState(false);
+		}
+	}, [prepareWebhookRequest, t, notifications, selectedConfig]);
+
+	const prepareEmailRequest = useCallback(
+		() => ({
+			name: selectedConfig?.name || '',
+			send_resolved: selectedConfig?.send_resolved || false,
+			to: selectedConfig.to || '',
+			html: selectedConfig.html || '',
+			headers: selectedConfig.headers || {},
+			id,
+		}),
+		[id, selectedConfig],
+	);
+
+	const onEmailEditHandler = useCallback(async () => {
+		setSavingState(true);
+		const request = prepareEmailRequest();
+
+		try {
+			await editEmail(request);
+			notifications.success({
+				message: 'Success',
+				description: t('channel_edit_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_edit_done') };
+		} catch (error) {
+			notifications.error({
+				message: (error as APIError).getErrorCode(),
+				description: (error as APIError).getErrorMessage(),
+			});
+			return {
+				status: 'failed',
+				statusMessage:
+					(error as APIError).getErrorMessage() || t('channel_edit_failed'),
+			};
+		} finally {
+			setSavingState(false);
+		}
+	}, [prepareEmailRequest, t, notifications]);
+
+	const preparePagerRequest = useCallback(
+		() => ({
+			name: selectedConfig.name || '',
+			send_resolved: selectedConfig?.send_resolved || false,
+			routing_key: selectedConfig.routing_key,
+			client: selectedConfig.client,
+			client_url: selectedConfig.client_url,
+			description: selectedConfig.description,
+			severity: selectedConfig.severity,
+			component: selectedConfig.component,
+			class: selectedConfig.class,
+			group: selectedConfig.group,
+			details: selectedConfig.details,
+			detailsArray: JSON.parse(selectedConfig.details || '{}'),
+			id,
+		}),
+		[id, selectedConfig],
+	);
+
+	const onPagerEditHandler = useCallback(async () => {
+		setSavingState(true);
+		const validationError = ValidatePagerChannel(selectedConfig as PagerChannel);
+
+		if (validationError !== '') {
+			notifications.error({
+				message: 'Error',
+				description: validationError,
+			});
+			setSavingState(false);
+			return { status: 'failed', statusMessage: validationError };
+		}
+
+		try {
+			await editPagerApi(preparePagerRequest());
+			notifications.success({
+				message: 'Success',
+				description: t('channel_edit_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_edit_done') };
+		} catch (error) {
+			notifications.error({
+				message: (error as APIError).getErrorCode(),
+				description: (error as APIError).getErrorMessage(),
+			});
+			return {
+				status: 'failed',
+				statusMessage:
+					(error as APIError).getErrorMessage() || t('channel_edit_failed'),
+			};
+		} finally {
+			setSavingState(false);
+		}
+	}, [preparePagerRequest, notifications, selectedConfig, t]);
+
+	const prepareOpsgenieRequest = useCallback(
+		() => ({
+			name: selectedConfig.name || '',
+			send_resolved: selectedConfig?.send_resolved || false,
+			api_key: selectedConfig.api_key || '',
+			message: selectedConfig.message || '',
+			description: selectedConfig.description || '',
+			priority: selectedConfig.priority || '',
+			id,
+		}),
+		[id, selectedConfig],
+	);
+
+	const onOpsgenieEditHandler = useCallback(async () => {
+		setSavingState(true);
+
+		if (selectedConfig?.api_key === '') {
+			notifications.error({
+				message: 'Error',
+				description: t('api_key_required'),
+			});
+			setSavingState(false);
+			return { status: 'failed', statusMessage: t('api_key_required') };
+		}
+		try {
+			await editOpsgenie(prepareOpsgenieRequest());
+			notifications.success({
+				message: 'Success',
+				description: t('channel_edit_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_edit_done') };
+		} catch (error) {
+			notifications.error({
+				message: (error as APIError).getErrorCode(),
+				description: (error as APIError).getErrorMessage(),
+			});
+			return {
+				status: 'failed',
+				statusMessage:
+					(error as APIError).getErrorMessage() || t('channel_edit_failed'),
+			};
+		} finally {
+			setSavingState(false);
+		}
+	}, [prepareOpsgenieRequest, t, notifications, selectedConfig]);
+
+	const prepareMsTeamsRequest = useCallback(
+		() => ({
+			webhook_url: selectedConfig?.webhook_url || '',
+			name: selectedConfig?.name || '',
+			send_resolved: selectedConfig?.send_resolved || false,
+			text: selectedConfig?.text || '',
+			title: selectedConfig?.title || '',
+			id,
+		}),
+		[id, selectedConfig],
+	);
+
+	const onMsTeamsEditHandler = useCallback(async () => {
+		setSavingState(true);
+
+		if (selectedConfig?.webhook_url === '') {
+			notifications.error({
+				message: 'Error',
+				description: t('webhook_url_required'),
+			});
+			setSavingState(false);
+			return { status: 'failed', statusMessage: t('webhook_url_required') };
+		}
+
+		try {
+			await editMsTeamsApi(prepareMsTeamsRequest());
+			notifications.success({
+				message: 'Success',
+				description: t('channel_edit_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_edit_done') };
+		} catch (error) {
+			notifications.error({
+				message: (error as APIError).getErrorCode(),
+				description: (error as APIError).getErrorMessage(),
+			});
+			return {
+				status: 'failed',
+				statusMessage:
+					(error as APIError).getErrorMessage() || t('channel_edit_failed'),
+			};
+		} finally {
+			setSavingState(false);
+		}
+	}, [prepareMsTeamsRequest, t, notifications, selectedConfig]);
+
+	const validateGoogleChatConfig = useCallback((): string => {
+		if (!selectedConfig?.webhook_url) {
+			return t('webhook_url_required');
+		}
+
+		if (!isValidGoogleChatWebhookURL(selectedConfig.webhook_url)) {
+			return t('google_chat_webhook_url_invalid');
+		}
+
+		return '';
+	}, [selectedConfig, t]);
+
+	const onGoogleChatEditHandler = useCallback(async () => {
+		const validationError = validateGoogleChatConfig();
+
+		if (validationError !== '') {
+			notifications.error({
+				message: 'Error',
+				description: validationError,
+			});
+			return { status: 'failed', statusMessage: validationError };
+		}
+
+		setSavingState(true);
+
+		try {
+			await updateChannel({
+				pathParams: { id },
+				data: prepareGoogleChatRequest(selectedConfig),
+			});
+			notifications.success({
+				message: 'Success',
+				description: t('channel_edit_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_edit_done') };
+		} catch (error) {
+			const apiError = notifyError(error);
+			return {
+				status: 'failed',
+				statusMessage: apiError.getErrorMessage() || t('channel_edit_failed'),
+			};
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		validateGoogleChatConfig,
+		updateChannel,
+		id,
+		selectedConfig,
+		notifications,
+		notifyError,
+		t,
+	]);
+
+	const validateJiraConfig = useCallback((): string => {
+		if (
+			!selectedConfig.site ||
+			!selectedConfig.username ||
+			!selectedConfig.password ||
+			!selectedConfig.project ||
+			!selectedConfig.issue_type
+		) {
+			return t('jira_required_fields');
+		}
+
+		if (!isValidJiraSiteURL(selectedConfig.site)) {
+			return t('jira_site_invalid');
+		}
+
+		if (
+			selectedConfig.reopen_duration &&
+			!isValidJiraReopenDuration(selectedConfig.reopen_duration)
+		) {
+			return t('jira_reopen_duration_invalid');
+		}
+
+		return '';
+	}, [selectedConfig, t]);
+
+	const onJiraEditHandler = useCallback(async () => {
+		const validationError = validateJiraConfig();
+
+		if (validationError !== '') {
+			notifications.error({
+				message: 'Error',
+				description: validationError,
+			});
+			return { status: 'failed', statusMessage: validationError };
+		}
+
+		setSavingState(true);
+
+		try {
+			await updateChannel({
+				pathParams: { id },
+				data: prepareJiraRequest(selectedConfig),
+			});
+			notifications.success({
+				message: 'Success',
+				description: t('channel_edit_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_edit_done') };
+		} catch (error) {
+			const apiError = notifyError(error);
+			return {
+				status: 'failed',
+				statusMessage: apiError.getErrorMessage() || t('channel_edit_failed'),
+			};
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		validateJiraConfig,
+		updateChannel,
+		id,
+		selectedConfig,
+		notifications,
+		notifyError,
+		t,
+	]);
+
+	const validateJsmOpsConfig = useCallback((): string => {
+		if (!selectedConfig.api_key) {
+			return t('api_key_required');
+		}
+		return '';
+	}, [selectedConfig, t]);
+
+	const onJsmOpsEditHandler = useCallback(async () => {
+		const validationError = validateJsmOpsConfig();
+
+		if (validationError !== '') {
+			notifications.error({
+				message: 'Error',
+				description: validationError,
+			});
+			return { status: 'failed', statusMessage: validationError };
+		}
+
+		setSavingState(true);
+
+		try {
+			await updateChannel({
+				pathParams: { id },
+				data: prepareJsmOpsRequest(selectedConfig),
+			});
+			notifications.success({
+				message: 'Success',
+				description: t('channel_edit_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_edit_done') };
+		} catch (error) {
+			const apiError = notifyError(error);
+			return {
+				status: 'failed',
+				statusMessage: apiError.getErrorMessage() || t('channel_edit_failed'),
+			};
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		validateJsmOpsConfig,
+		updateChannel,
+		id,
+		selectedConfig,
+		notifications,
+		notifyError,
+		t,
+	]);
+
+	const validateIncidentIOConfig = useCallback((): string => {
+		if (!selectedConfig.url || !selectedConfig.token) {
+			return t('incidentio_required_fields');
+		}
+
+		if (!isValidIncidentIOURL(selectedConfig.url)) {
+			return t('incidentio_url_invalid');
+		}
+
+		return '';
+	}, [selectedConfig, t]);
+
+	const onIncidentIOEditHandler = useCallback(async () => {
+		const validationError = validateIncidentIOConfig();
+
+		if (validationError !== '') {
+			notifications.error({
+				message: 'Error',
+				description: validationError,
+			});
+			return { status: 'failed', statusMessage: validationError };
+		}
+
+		setSavingState(true);
+
+		try {
+			await updateChannel({
+				pathParams: { id },
+				data: prepareIncidentIORequest(selectedConfig),
+			});
+			notifications.success({
+				message: 'Success',
+				description: t('channel_edit_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_edit_done') };
+		} catch (error) {
+			const apiError = notifyError(error);
+			return {
+				status: 'failed',
+				statusMessage: apiError.getErrorMessage() || t('channel_edit_failed'),
+			};
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		validateIncidentIOConfig,
+		updateChannel,
+		id,
+		selectedConfig,
+		notifications,
+		notifyError,
+		t,
+	]);
+
+	const onSaveHandler = useCallback(
+		async (value: ChannelType) => {
+			let result;
+			if (value === ChannelType.Slack) {
+				result = await onSlackEditHandler();
+			} else if (value === ChannelType.Webhook) {
+				result = await onWebhookEditHandler();
+			} else if (value === ChannelType.Pagerduty) {
+				result = await onPagerEditHandler();
+			} else if (value === ChannelType.MsTeams) {
+				result = await onMsTeamsEditHandler();
+			} else if (value === ChannelType.Opsgenie) {
+				result = await onOpsgenieEditHandler();
+			} else if (value === ChannelType.Email) {
+				result = await onEmailEditHandler();
+			} else if (value === ChannelType.GoogleChat) {
+				result = await onGoogleChatEditHandler();
+			} else if (value === ChannelType.Jira) {
+				result = await onJiraEditHandler();
+			} else if (value === ChannelType.JsmOps) {
+				result = await onJsmOpsEditHandler();
+			} else if (value === ChannelType.IncidentIO) {
+				result = await onIncidentIOEditHandler();
+			}
+			logEvent('Alert Channel: Save channel', {
+				type: value,
+				sendResolvedAlert: selectedConfig?.send_resolved,
+				name: selectedConfig?.name,
+				new: 'false',
+				status: result?.status,
+				statusMessage: result?.statusMessage,
+			});
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[
+			onSlackEditHandler,
+			onWebhookEditHandler,
+			onPagerEditHandler,
+			onMsTeamsEditHandler,
+			onOpsgenieEditHandler,
+			onEmailEditHandler,
+			onGoogleChatEditHandler,
+			onJiraEditHandler,
+			onJsmOpsEditHandler,
+			onIncidentIOEditHandler,
+		],
+	);
+
+	const performChannelTest = useCallback(
+		// eslint-disable-next-line sonarjs/cognitive-complexity
+		async (channelType: ChannelType) => {
+			setTestingState(true);
+			try {
+				let request;
+				switch (channelType) {
+					case ChannelType.Webhook:
+						request = prepareWebhookRequest();
+						await testWebhookApi(request);
+						break;
+					case ChannelType.Slack:
+						request = prepareSlackRequest();
+						await testSlackApi(request);
+						break;
+					case ChannelType.Pagerduty:
+						request = preparePagerRequest();
+						if (request) {
+							await testPagerApi(request);
+						}
+						break;
+					case ChannelType.MsTeams:
+						request = prepareMsTeamsRequest();
+						if (request) {
+							await testMsTeamsApi(request);
+						}
+						break;
+					case ChannelType.Opsgenie:
+						request = prepareOpsgenieRequest();
+						if (request) {
+							await testOpsgenie(request);
+						}
+						break;
+					case ChannelType.Email:
+						request = prepareEmailRequest();
+						if (request) {
+							await testEmail(request);
+						}
+						break;
+					case ChannelType.GoogleChat: {
+						const validationError = validateGoogleChatConfig();
+						if (validationError !== '') {
+							notifications.error({
+								message: 'Error',
+								description: validationError,
+							});
+							setTestingState(false);
+							return;
+						}
+						await testChannel({ data: prepareGoogleChatRequest(selectedConfig) });
+						break;
+					}
+					case ChannelType.Jira: {
+						const validationError = validateJiraConfig();
+						if (validationError !== '') {
+							notifications.error({
+								message: 'Error',
+								description: validationError,
+							});
+							setTestingState(false);
+							return;
+						}
+						await testChannel({ data: prepareJiraRequest(selectedConfig) });
+						break;
+					}
+					case ChannelType.JsmOps: {
+						const validationError = validateJsmOpsConfig();
+						if (validationError !== '') {
+							notifications.error({
+								message: 'Error',
+								description: validationError,
+							});
+							setTestingState(false);
+							return;
+						}
+						await testChannel({ data: prepareJsmOpsRequest(selectedConfig) });
+						break;
+					}
+					case ChannelType.IncidentIO: {
+						const validationError = validateIncidentIOConfig();
+						if (validationError !== '') {
+							notifications.error({
+								message: 'Error',
+								description: validationError,
+							});
+							setTestingState(false);
+							return;
+						}
+						await testChannel({ data: prepareIncidentIORequest(selectedConfig) });
+						break;
+					}
+					default:
+						notifications.error({
+							message: 'Error',
+							description: t('test_unsupported'),
+						});
+						setTestingState(false);
+						return;
+				}
+
+				notifications.success({
+					message: 'Success',
+					description: t('channel_test_done'),
+				});
+				logEvent('Alert Channel: Test notification', {
+					type: channelType,
+					sendResolvedAlert: selectedConfig?.send_resolved,
+					name: selectedConfig?.name,
+					new: 'false',
+					status: 'Test success',
+				});
+			} catch (error) {
+				notifyError(error);
+				logEvent('Alert Channel: Test notification', {
+					type: channelType,
+					sendResolvedAlert: selectedConfig?.send_resolved,
+					name: selectedConfig?.name,
+					new: 'false',
+					status: 'Test failed',
+				});
+			}
+			setTestingState(false);
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[
+			t,
+			notifyError,
+			validateGoogleChatConfig,
+			validateJiraConfig,
+			validateJsmOpsConfig,
+			validateIncidentIOConfig,
+			testChannel,
+			prepareWebhookRequest,
+			preparePagerRequest,
+			prepareSlackRequest,
+			prepareMsTeamsRequest,
+			prepareOpsgenieRequest,
+			prepareEmailRequest,
+			notifications,
+		],
+	);
+
+	const onTestHandler = useCallback(
+		async (value: ChannelType) => {
+			performChannelTest(value);
+		},
+		[performChannelTest],
+	);
+
+	return (
+		<FormAlertChannels
+			{...{
+				formInstance,
+				onTypeChangeHandler,
+				setSelectedConfig,
+				type,
+				onTestHandler,
+				onSaveHandler,
+				testingState,
+				savingState,
+				title: t('page_title_edit'),
+				initialValue,
+				editing: true,
+			}}
+		/>
+	);
+}
+
+interface EditAlertChannelsProps {
+	initialValue: {
+		[x: string]: unknown;
+	};
+	channelId: string;
+}
+
+export default EditAlertChannels;

frontend/src/container/FormAlertChannels/Settings/Slack.tsx

@@ -3,22 +3,11 @@ import { useTranslation } from 'react-i18next';
 import { Form, Input } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
-import {
-	AlertmanagertypesChannelSlackActionDTO,
-	AlertmanagertypesChannelSlackFieldDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
 import { SlackChannel } from '../../CreateAlertChannels/config';
-import SlackActions from './SlackActions';
-import SlackFields from './SlackFields';
 
 const { TextArea } = Input;
 
-function Slack({
-	setSelectedConfig,
-	initialFields,
-	initialActions,
-}: SlackProps): JSX.Element {
+function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
 	const { t } = useTranslation('channels');
 
 	return (
@@ -78,18 +67,6 @@ function Slack({
 				/>
 			</Form.Item>
 
-			<Form.Item name="title_link" label={t('field_slack_title_link')}>
-				<Input
-					onChange={(event): void =>
-						setSelectedConfig((value) => ({
-							...value,
-							title_link: event.target.value,
-						}))
-					}
-					data-testid="title-link-textbox"
-				/>
-			</Form.Item>
-
 			<Form.Item name="text" label={t('field_slack_description')}>
 				<TextArea
 					onChange={(event): void =>
@@ -102,85 +79,12 @@ function Slack({
 					data-testid="description-textarea"
 				/>
 			</Form.Item>
-
-			<Form.Item
-				name="color"
-				label={t('field_slack_color')}
-				help={t('help_slack_color')}
-			>
-				<Input
-					onChange={(event): void =>
-						setSelectedConfig((value) => ({
-							...value,
-							color: event.target.value,
-						}))
-					}
-					placeholder={t('placeholder_slack_color')}
-					data-testid="slack-color-textbox"
-				/>
-			</Form.Item>
-
-			<Form.Item
-				name="pretext"
-				label={t('field_slack_pretext')}
-				help={t('help_slack_pretext')}
-			>
-				<Input
-					onChange={(event): void =>
-						setSelectedConfig((value) => ({
-							...value,
-							pretext: event.target.value,
-						}))
-					}
-					data-testid="slack-pretext-textbox"
-				/>
-			</Form.Item>
-
-			<Form.Item
-				name="fallback"
-				label={t('field_slack_fallback')}
-				help={t('help_slack_fallback')}
-			>
-				<Input
-					onChange={(event): void =>
-						setSelectedConfig((value) => ({
-							...value,
-							fallback: event.target.value,
-						}))
-					}
-					data-testid="slack-fallback-textbox"
-				/>
-			</Form.Item>
-
-			<Form.Item name="footer" label={t('field_slack_footer')}>
-				<Input
-					onChange={(event): void =>
-						setSelectedConfig((value) => ({
-							...value,
-							footer: event.target.value,
-						}))
-					}
-					data-testid="slack-footer-textbox"
-				/>
-			</Form.Item>
-
-			<SlackFields
-				setSelectedConfig={setSelectedConfig}
-				initialFields={initialFields}
-			/>
-
-			<SlackActions
-				setSelectedConfig={setSelectedConfig}
-				initialActions={initialActions}
-			/>
 		</>
 	);
 }
 
 interface SlackProps {
 	setSelectedConfig: Dispatch<SetStateAction<Partial<SlackChannel>>>;
-	initialFields?: AlertmanagertypesChannelSlackFieldDTO[];
-	initialActions?: AlertmanagertypesChannelSlackActionDTO[];
 }
 
 export default Slack;

frontend/src/container/FormAlertChannels/Settings/SlackActions.tsx

@@ -1,123 +0,0 @@
-import { Dispatch, SetStateAction, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Minus, Plus } from '@signozhq/icons';
-import { Button, Form, Input } from 'antd';
-import { AlertmanagertypesChannelSlackActionDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { SlackChannel } from '../../CreateAlertChannels/config';
-
-interface SlackActionsProps {
-	setSelectedConfig: Dispatch<SetStateAction<Partial<SlackChannel>>>;
-	initialActions?: AlertmanagertypesChannelSlackActionDTO[];
-}
-
-const emptyAction: AlertmanagertypesChannelSlackActionDTO = {
-	type: 'button',
-	text: '',
-	url: '',
-};
-
-// Buttons Slack renders under the attachment. `type` and `text` are required by
-// the API; a `button` carrying a url is the link-out case, the rest drive a
-// Slack app's own callbacks.
-function SlackActions({
-	setSelectedConfig,
-	initialActions,
-}: SlackActionsProps): JSX.Element {
-	const { t } = useTranslation('channels');
-	const [rows, setRows] = useState<AlertmanagertypesChannelSlackActionDTO[]>(
-		() => initialActions ?? [],
-	);
-
-	const sync = (next: AlertmanagertypesChannelSlackActionDTO[]): void => {
-		setRows(next);
-		setSelectedConfig((value) => ({
-			...value,
-			actions: next.filter((row) => row.text.trim() !== ''),
-		}));
-	};
-
-	const updateRow = (
-		index: number,
-		patch: Partial<AlertmanagertypesChannelSlackActionDTO>,
-	): void =>
-		sync(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)));
-
-	return (
-		<Form.Item label={t('field_slack_actions')} help={t('help_slack_actions')}>
-			{rows.map((row, index) => (
-				// the rows have no stable id, and reordering is not offered
-				// eslint-disable-next-line react/no-array-index-key
-				<div key={index} className="slack-actions-row">
-					<Input
-						value={row.text}
-						placeholder={t('placeholder_slack_action_text')}
-						onChange={(event): void => updateRow(index, { text: event.target.value })}
-						data-testid={`slack-action-text-${index}`}
-					/>
-					<Input
-						value={row.url}
-						placeholder={t('placeholder_slack_action_url')}
-						onChange={(event): void => updateRow(index, { url: event.target.value })}
-						data-testid={`slack-action-url-${index}`}
-					/>
-					<Input
-						value={row.type}
-						placeholder={t('placeholder_slack_action_type')}
-						onChange={(event): void => updateRow(index, { type: event.target.value })}
-						data-testid={`slack-action-type-${index}`}
-					/>
-					<Input
-						value={row.name ?? ''}
-						placeholder={t('placeholder_slack_action_name')}
-						onChange={(event): void => updateRow(index, { name: event.target.value })}
-						data-testid={`slack-action-name-${index}`}
-					/>
-					<Input
-						value={row.value ?? ''}
-						placeholder={t('placeholder_slack_action_value')}
-						onChange={(event): void =>
-							updateRow(index, { value: event.target.value })
-						}
-						data-testid={`slack-action-value-${index}`}
-					/>
-					<Input
-						value={row.style ?? ''}
-						placeholder={t('placeholder_slack_action_style')}
-						onChange={(event): void =>
-							updateRow(index, { style: event.target.value })
-						}
-						data-testid={`slack-action-style-${index}`}
-					/>
-					<Input
-						value={row.confirm?.text ?? ''}
-						placeholder={t('placeholder_slack_action_confirm')}
-						onChange={(event): void =>
-							updateRow(index, {
-								confirm: event.target.value ? { text: event.target.value } : undefined,
-							})
-						}
-						data-testid={`slack-action-confirm-${index}`}
-					/>
-					<Button
-						type="text"
-						icon={<Minus size={14} />}
-						aria-label={t('remove_slack_action')}
-						onClick={(): void => sync(rows.filter((_, i) => i !== index))}
-						data-testid={`slack-action-remove-${index}`}
-					/>
-				</div>
-			))}
-			<Button
-				type="dashed"
-				icon={<Plus size={14} />}
-				onClick={(): void => sync([...rows, { ...emptyAction }])}
-				data-testid="slack-action-add"
-			>
-				{t('add_slack_action')}
-			</Button>
-		</Form.Item>
-	);
-}
-
-export default SlackActions;

frontend/src/container/FormAlertChannels/Settings/SlackFields.tsx

@@ -1,95 +0,0 @@
-import { Dispatch, SetStateAction, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Minus, Plus } from '@signozhq/icons';
-import { Button, Checkbox, Form, Input } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { AlertmanagertypesChannelSlackFieldDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { SlackChannel } from '../../CreateAlertChannels/config';
-
-interface SlackFieldsProps {
-	setSelectedConfig: Dispatch<SetStateAction<Partial<SlackChannel>>>;
-	initialFields?: AlertmanagertypesChannelSlackFieldDTO[];
-}
-
-// Slack renders these as the attachment's table of short or full-width entries.
-function SlackFields({
-	setSelectedConfig,
-	initialFields,
-}: SlackFieldsProps): JSX.Element {
-	const { t } = useTranslation('channels');
-	const [rows, setRows] = useState<AlertmanagertypesChannelSlackFieldDTO[]>(
-		() => initialFields ?? [],
-	);
-
-	const sync = (next: AlertmanagertypesChannelSlackFieldDTO[]): void => {
-		setRows(next);
-		setSelectedConfig((value) => ({
-			...value,
-			fields: next.filter((row) => row.title.trim() !== ''),
-		}));
-	};
-
-	const updateRow = (
-		index: number,
-		patch: Partial<AlertmanagertypesChannelSlackFieldDTO>,
-	): void =>
-		sync(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)));
-
-	return (
-		<Form.Item label={t('field_slack_fields')} help={t('help_slack_fields')}>
-			{rows.map((row, index) => (
-				// the rows have no stable id, and reordering is not offered
-				// eslint-disable-next-line react/no-array-index-key
-				<div key={index} className="slack-fields-row">
-					<Input
-						value={row.title}
-						placeholder={t('placeholder_slack_field_title')}
-						onChange={(event): void =>
-							updateRow(index, { title: event.target.value })
-						}
-						data-testid={`slack-field-title-${index}`}
-					/>
-					<Input
-						value={row.value}
-						placeholder={t('placeholder_slack_field_value')}
-						onChange={(event): void =>
-							updateRow(index, { value: event.target.value })
-						}
-						data-testid={`slack-field-value-${index}`}
-					/>
-					<Checkbox
-						checked={!!row.short}
-						onChange={(event): void =>
-							updateRow(index, { short: event.target.checked })
-						}
-						data-testid={`slack-field-short-${index}`}
-					>
-						<Typography.Text size="sm">
-							{t('field_slack_field_short')}
-						</Typography.Text>
-					</Checkbox>
-					<Button
-						type="text"
-						icon={<Minus size={14} />}
-						aria-label={t('remove_slack_field')}
-						onClick={(): void => sync(rows.filter((_, i) => i !== index))}
-						data-testid={`slack-field-remove-${index}`}
-					/>
-				</div>
-			))}
-			<Button
-				type="dashed"
-				icon={<Plus size={14} />}
-				onClick={(): void =>
-					sync([...rows, { title: '', value: '', short: false }])
-				}
-				data-testid="slack-field-add"
-			>
-				{t('add_slack_field')}
-			</Button>
-		</Form.Item>
-	);
-}
-
-export default SlackFields;

frontend/src/container/FormAlertChannels/Settings/Webhook.tsx

@@ -66,22 +66,6 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
 					data-testid="webhook-password-textbox"
 				/>
 			</Form.Item>
-			<Form.Item
-				name="bearer_token"
-				label={t('field_webhook_bearer_token')}
-				help={t('help_webhook_bearer_token')}
-			>
-				<Input
-					type="password"
-					onChange={(event): void => {
-						setSelectedConfig((value) => ({
-							...value,
-							bearer_token: event.target.value,
-						}));
-					}}
-					data-testid="webhook-bearer-token-textbox"
-				/>
-			</Form.Item>
 		</>
 	);
 }

frontend/src/container/FormAlertChannels/index.tsx

@@ -50,13 +50,7 @@ function FormAlertChannels({
 	const renderSettings = (): ReactElement | null => {
 		switch (type) {
 			case ChannelType.Slack:
-				return (
-					<SlackSettings
-						setSelectedConfig={setSelectedConfig}
-						initialFields={initialValue?.fields as SlackChannel['fields']}
-						initialActions={initialValue?.actions as SlackChannel['actions']}
-					/>
-				);
+				return <SlackSettings setSelectedConfig={setSelectedConfig} />;
 			case ChannelType.Webhook:
 				return <WebhookSettings setSelectedConfig={setSelectedConfig} />;
 			case ChannelType.Pagerduty:

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -1,15 +1,19 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useQuery } from 'react-query';
 import { Plus } from '@signozhq/icons';
 import { Button, Flex, Form, Select, Tooltip } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
+import getAll from 'api/channels/getAll';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
 import ROUTES from 'constants/routes';
-import { useChannelOptions } from 'hooks/notificationChannels/useChannelOptions';
-import { useNotificationChannelCollectionPermissions } from 'hooks/notificationChannels/useNotificationChannelCollectionPermissions';
+import useComponentPermission from 'hooks/useComponentPermission';
+import { useAppContext } from 'providers/App/App';
+import { SuccessResponseV2 } from 'types/api';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { AlertDef, Labels } from 'types/api/alerts/def';
+import { Channels } from 'types/api/channels/getAll';
 import APIError from 'types/api/error';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 import { openInNewTab } from 'utils/navigation';
@@ -43,10 +47,18 @@ function BasicInfo({
 }: BasicInfoProps): JSX.Element {
 	const { t } = useTranslation('alerts');
 
-	const { isLoading, data, error, isError, refetch } = useChannelOptions();
+	const { isLoading, data, error, isError, refetch } = useQuery<
+		SuccessResponseV2<Channels[]>,
+		APIError
+	>(['getChannels'], {
+		queryFn: () => getAll(),
+	});
 
-	const { canCreate: addNewChannelPermission } =
-		useNotificationChannelCollectionPermissions();
+	const { user } = useAppContext();
+	const [addNewChannelPermission] = useComponentPermission(
+		['add_new_channel'],
+		user.role,
+	);
 
 	const [shouldBroadCastToAllChannels, setShouldBroadCastToAllChannels] =
 		useState(false);
@@ -69,7 +81,7 @@ function BasicInfo({
 		});
 	};
 
-	const noChannels = data?.length === 0;
+	const noChannels = data?.data?.length === 0;
 	const handleCreateNewChannels = useCallback(() => {
 		logEvent('Alert: Create notification channel button clicked', {
 			dataSource: ALERTS_DATA_SOURCE_MAP[alertDef?.alertType as AlertTypes],
@@ -84,7 +96,7 @@ function BasicInfo({
 		if (!isLoading && isNewRule && !hasLoggedEvent.current) {
 			logEvent('Alert: New alert creation page visited', {
 				dataSource: ALERTS_DATA_SOURCE_MAP[alertDef?.alertType as AlertTypes],
-				numberOfChannels: data?.length,
+				numberOfChannels: data?.data?.length,
 			});
 			hasLoggedEvent.current = true;
 		}
@@ -220,7 +232,7 @@ function BasicInfo({
 								disabled={shouldBroadCastToAllChannels}
 								currentValue={alertDef.preferredChannels}
 								handleCreateNewChannels={handleCreateNewChannels}
-								channels={data || []}
+								channels={data?.data || []}
 								isLoading={isLoading}
 								hasError={isError}
 								error={error as APIError}

frontend/src/container/FormAlertRules/ChannelSelect/index.tsx

@@ -2,9 +2,10 @@ import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Plus } from '@signozhq/icons';
 import { Select, Spin } from 'antd';
-import { useNotificationChannelCollectionPermissions } from 'hooks/notificationChannels/useNotificationChannelCollectionPermissions';
+import useComponentPermission from 'hooks/useComponentPermission';
 import { useNotifications } from 'hooks/useNotifications';
-import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
+import { useAppContext } from 'providers/App/App';
+import { Channels } from 'types/api/channels/getAll';
 import APIError from 'types/api/error';
 
 import { StyledCreateChannelOption, StyledSelect } from './styles';
@@ -15,7 +16,7 @@ export interface ChannelSelectProps {
 	onSelectChannels: (s: string[]) => void;
 	onDropdownOpen: () => void;
 	isLoading: boolean;
-	channels: ChannelOption[];
+	channels: Channels[];
 	hasError: boolean;
 	error: APIError;
 	handleCreateNewChannels: () => void;
@@ -52,8 +53,11 @@ function ChannelSelect({
 		});
 	}
 
-	const { canCreate: addNewChannelPermission } =
-		useNotificationChannelCollectionPermissions();
+	const { user } = useAppContext();
+	const [addNewChannelPermission] = useComponentPermission(
+		['add_new_channel'],
+		user.role,
+	);
 
 	const renderOptions = (): ReactNode[] => {
 		const children: ReactNode[] = [];

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostActionsMenu.tsx

@@ -50,6 +50,7 @@ function ModelCostActionsMenu({
 				color="secondary"
 				size="icon"
 				className={styles.actionButton}
+				aria-label="Model cost actions"
 				testId={`model-cost-actions-${rule.id}`}
 			>
 				<Ellipsis size={16} />

frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx

@@ -136,6 +136,7 @@ function DashboardsAndAlertsPopover({
 				>
 					<div
 						className="dashboards-and-alerts-popover dashboards-popover"
+						data-testid="metric-dashboards-popover"
 						style={{ backgroundColor: `${Color.BG_SIENNA_500}33` }}
 					>
 						<Grid2X2 size={12} color={Color.BG_SIENNA_500} />
@@ -154,6 +155,7 @@ function DashboardsAndAlertsPopover({
 				>
 					<div
 						className="dashboards-and-alerts-popover alerts-popover"
+						data-testid="metric-alerts-popover"
 						style={{ backgroundColor: `${Color.BG_SAKURA_500}33` }}
 					>
 						<Bell size={12} color={Color.BG_SAKURA_500} />

frontend/src/container/RolesSettings/permissions.config.ts

@@ -1,6 +1,5 @@
 import {
 	Bot,
-	Cable,
 	ChartLine,
 	DraftingCompass,
 	FileKey,
@@ -96,14 +95,6 @@ export const RESOURCE_PANELS: Record<AuthZResource, ResourcePanelConfig> = {
 			'Type quick filter ID, separate multiple with comma or space',
 		docsAnchor: 'quick-filter',
 	},
-	'notification-channel': {
-		label: 'Notification Channels',
-		description: 'Channels alerts are delivered to, such as Slack or PagerDuty.',
-		icon: Cable,
-		selectorPlaceholder:
-			'Type notification channel ID, separate multiple with comma or space',
-		docsAnchor: 'notification-channel',
-	},
 	logs: {
 		label: 'Logs',
 		description: 'Log data collected across the workspace.',

frontend/src/container/RoutingPolicies/__tests__/testUtils.ts

@@ -1,6 +1,6 @@
 import { ApiRoutingPolicy } from 'api/routingPolicies/getRoutingPolicies';
 import { IAppContext, IUser } from 'providers/App/types';
-import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
+import { Channels } from 'types/api/channels/getAll';
 
 import { RoutingPolicy, UseRoutingPoliciesReturn } from '../types';
 
@@ -28,13 +28,21 @@ export const MOCK_ROUTING_POLICY_2: RoutingPolicy = {
 	updatedBy: 'user2@signoz.io',
 };
 
-export const MOCK_CHANNEL_1: ChannelOption = {
+export const MOCK_CHANNEL_1: Channels = {
 	name: 'Channel 1',
+	created_at: '2021-01-01',
+	data: 'data 1',
 	id: '1',
+	type: 'type 1',
+	updated_at: '2021-01-01',
 };
-export const MOCK_CHANNEL_2: ChannelOption = {
+export const MOCK_CHANNEL_2: Channels = {
 	name: 'Channel 2',
+	created_at: '2021-01-02',
+	data: 'data 2',
 	id: '2',
+	type: 'type 2',
+	updated_at: '2021-01-02',
 };
 
 export function getUseRoutingPoliciesMockData(

frontend/src/container/RoutingPolicies/__tests__/useRoutingPolicies.test.tsx

@@ -77,14 +77,12 @@ jest.mock('hooks/routingPolicies/useDeleteRoutingPolicy', () => ({
 		isLoading: false,
 	}),
 }));
-jest.mock('hooks/notificationChannels/useChannelOptions', () => ({
+jest.mock('api/channels/getAll', () => ({
 	__esModule: true,
-	useChannelOptions: (): any => ({
-		data: [MOCK_CHANNEL_1, MOCK_CHANNEL_2],
-		isLoading: false,
-		isError: false,
-		refetch: jest.fn(),
-	}),
+	default: (): any =>
+		Promise.resolve({
+			data: [MOCK_CHANNEL_1, MOCK_CHANNEL_2],
+		}),
 }));
 
 const ROUTING_POLICY_1_NAME = 'Routing Policy 1';

frontend/src/container/RoutingPolicies/types.ts

@@ -1,4 +1,4 @@
-import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
+import { Channels } from 'types/api/channels/getAll';
 
 export interface RoutingPolicy {
 	id: string;
@@ -62,7 +62,7 @@ export interface RoutingPolicyDetailsProps {
 	routingPolicy: RoutingPolicy | null;
 	closeModal: () => void;
 	mode: PolicyDetailsModalMode;
-	channels: ChannelOption[];
+	channels: Channels[];
 	isErrorChannels: boolean;
 	isLoadingChannels: boolean;
 	handlePolicyDetailsModalAction: HandlePolicyDetailsModalAction;
@@ -86,7 +86,7 @@ export interface UseRoutingPoliciesReturn {
 	isErrorRoutingPolicies: boolean;
 	refetchRoutingPolicies: () => void;
 	// Channels
-	channels: ChannelOption[];
+	channels: Channels[];
 	isLoadingChannels: boolean;
 	isErrorChannels: boolean;
 	refreshChannels: () => void;

frontend/src/container/RoutingPolicies/useRoutingPolicies.ts

@@ -2,16 +2,17 @@ import { useMemo, useState } from 'react';
 import { useQuery, useQueryClient } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
+import getAllChannels from 'api/channels/getAll';
 import { GetRoutingPoliciesResponse } from 'api/routingPolicies/getRoutingPolicies';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useCreateRoutingPolicy } from 'hooks/routingPolicies/useCreateRoutingPolicy';
 import { useDeleteRoutingPolicy } from 'hooks/routingPolicies/useDeleteRoutingPolicy';
-import { useChannelOptions } from 'hooks/notificationChannels/useChannelOptions';
 import { useGetRoutingPolicies } from 'hooks/routingPolicies/useGetRoutingPolicies';
 import { useUpdateRoutingPolicy } from 'hooks/routingPolicies/useUpdateRoutingPolicy';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { SuccessResponseV2 } from 'types/api';
+import { Channels } from 'types/api/channels/getAll';
 import APIError from 'types/api/error';
 
 import {
@@ -86,8 +87,10 @@ function useRoutingPolicies(): UseRoutingPoliciesReturn {
 		isLoading: isLoadingChannels,
 		isError: isErrorChannels,
 		refetch: refetchChannels,
-	} = useChannelOptions();
-	const channels = data || [];
+	} = useQuery<SuccessResponseV2<Channels[]>, APIError>(['getChannels'], {
+		queryFn: () => getAllChannels(),
+	});
+	const channels = data?.data || [];
 
 	const refreshChannels = (): void => {
 		refetchChannels();

frontend/src/hooks/notificationChannels/useChannelOptions.ts

@@ -1,56 +0,0 @@
-import { useQuery, UseQueryResult } from 'react-query';
-import { listNotificationChannels } from 'api/generated/services/channels';
-import {
-	AlertmanagertypesChannelListOrderDTO,
-	AlertmanagertypesChannelListSortDTO,
-	AlertmanagertypesListedNotificationChannelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-/** The list API's own ceiling; a bigger limit is clamped to it server-side. */
-const MAX_PAGE_SIZE = 200;
-
-export const CHANNEL_OPTIONS_QUERY_KEY = ['notificationChannelOptions'];
-
-export interface ChannelOption {
-	id: string;
-	/** The display name, which is what rules and routing policies reference. */
-	name: string;
-}
-
-/**
- * Every channel, for the pickers that let a rule or a policy name one. The list
- * API pages at 200, so this walks the pages rather than silently truncating.
- */
-async function fetchAllChannels(): Promise<ChannelOption[]> {
-	const channels: AlertmanagertypesListedNotificationChannelDTO[] = [];
-	let total = 0;
-
-	do {
-		// eslint-disable-next-line no-await-in-loop
-		const page = await listNotificationChannels({
-			limit: MAX_PAGE_SIZE,
-			offset: channels.length,
-			sort: AlertmanagertypesChannelListSortDTO.name,
-			order: AlertmanagertypesChannelListOrderDTO.asc,
-		});
-
-		total = page.data.total;
-		channels.push(...page.data.channels);
-
-		if (page.data.channels.length === 0) {
-			break;
-		}
-	} while (channels.length < total);
-
-	return channels.map((channel) => ({
-		id: channel.id,
-		name: channel.displayName,
-	}));
-}
-
-export function useChannelOptions(): UseQueryResult<ChannelOption[], Error> {
-	return useQuery<ChannelOption[], Error>(
-		CHANNEL_OPTIONS_QUERY_KEY,
-		fetchAllChannels,
-	);
-}

frontend/src/hooks/notificationChannels/useNotificationChannelCollectionPermissions.ts

@@ -1,39 +0,0 @@
-import {
-	NotificationChannelCreatePermission,
-	NotificationChannelListPermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/notification-channel.permissions';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-
-export interface NotificationChannelCollectionPermissions {
-	canList: boolean;
-	canCreate: boolean;
-	/** A test send is gated on `create` against the wildcard. */
-	canTest: boolean;
-	isLoading: boolean;
-	/**
-	 * The check itself failed. Callers should fall open (behave as before authz
-	 * and let the API decide) rather than treat an outage as a denial.
-	 */
-	hasError: boolean;
-}
-
-// Module-level so the useQueries identity stays stable across renders.
-const CHECKS = [
-	NotificationChannelListPermission,
-	NotificationChannelCreatePermission,
-];
-
-/** Collection-level notification channel permissions (wildcard selector). */
-export function useNotificationChannelCollectionPermissions(): NotificationChannelCollectionPermissions {
-	const { isGranted, isLoading, error } = useAuthZ(CHECKS);
-
-	const canCreate = isGranted(NotificationChannelCreatePermission);
-
-	return {
-		canList: isGranted(NotificationChannelListPermission),
-		canCreate,
-		canTest: canCreate,
-		isLoading,
-		hasError: !!error,
-	};
-}

frontend/src/hooks/notificationChannels/useNotificationChannelPermissions.ts

@@ -1,69 +0,0 @@
-import { useMemo } from 'react';
-import {
-	buildNotificationChannelDeletePermission,
-	buildNotificationChannelReadPermission,
-	buildNotificationChannelUpdatePermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/notification-channel.permissions';
-import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-
-export interface NotificationChannelPermissions {
-	canRead: boolean;
-	canUpdate: boolean;
-	canDelete: boolean;
-	/** Per the authz guide, an edit affordance needs `read` as well as `update`. */
-	canEdit: boolean;
-	isLoading: boolean;
-	readPermission: BrandedPermission;
-	updatePermission: BrandedPermission;
-	deletePermission: BrandedPermission;
-	/** `[read, update]`, so a denial names both. */
-	editChecks: BrandedPermission[];
-}
-
-/**
- * Resource-level notification channel permissions. Pass `enabled: false` while
- * the id is unknown, so no check fires against an empty selector.
- */
-export function useNotificationChannelPermissions(
-	channelId: string,
-	options?: { enabled?: boolean },
-): NotificationChannelPermissions {
-	const enabled = options?.enabled ?? true;
-
-	const { readPermission, updatePermission, deletePermission } = useMemo(
-		() => ({
-			readPermission: buildNotificationChannelReadPermission(channelId),
-			updatePermission: buildNotificationChannelUpdatePermission(channelId),
-			deletePermission: buildNotificationChannelDeletePermission(channelId),
-		}),
-		[channelId],
-	);
-
-	const checks = useMemo(
-		() => [readPermission, updatePermission, deletePermission],
-		[readPermission, updatePermission, deletePermission],
-	);
-
-	const { isGranted, isLoading } = useAuthZ(checks, { enabled });
-
-	const canRead = isGranted(readPermission);
-	const canUpdate = isGranted(updatePermission);
-
-	const editChecks = useMemo(
-		() => [readPermission, updatePermission],
-		[readPermission, updatePermission],
-	);
-
-	return {
-		canRead,
-		canUpdate,
-		canDelete: isGranted(deletePermission),
-		canEdit: canRead && canUpdate,
-		isLoading,
-		readPermission,
-		updatePermission,
-		deletePermission,
-		editChecks,
-	};
-}

frontend/src/lib/authz/hooks/useAuthZ/permissions.type.ts

@@ -18,11 +18,6 @@ export default {
 				type: 'metaresource',
 				allowedVerbs: ['create', 'delete', 'list', 'read', 'update'],
 			},
-			{
-				kind: 'notification-channel',
-				type: 'metaresource',
-				allowedVerbs: ['create', 'delete', 'list', 'read', 'update'],
-			},
 			{
 				kind: 'quick-filter',
 				type: 'metaresource',

frontend/src/lib/authz/hooks/useAuthZ/permissions/notification-channel.permissions.ts

@@ -1,25 +0,0 @@
-import { buildPermission } from '../utils';
-import type { BrandedPermission } from '../types';
-
-// Collection-level. Wildcard selector required for correct response key matching.
-export const NotificationChannelListPermission = buildPermission(
-	'list',
-	'notification-channel:*',
-);
-// The test endpoint is gated on `create` against the wildcard, since a test send
-// persists nothing and the channel need not exist.
-export const NotificationChannelCreatePermission = buildPermission(
-	'create',
-	'notification-channel:*',
-);
-
-// Resource-level. Requires a specific channel id.
-export const buildNotificationChannelReadPermission = (
-	id: string,
-): BrandedPermission => buildPermission('read', `notification-channel:${id}`);
-export const buildNotificationChannelUpdatePermission = (
-	id: string,
-): BrandedPermission => buildPermission('update', `notification-channel:${id}`);
-export const buildNotificationChannelDeletePermission = (
-	id: string,
-): BrandedPermission => buildPermission('delete', `notification-channel:${id}`);