test: fix scroll

.claude/agents/playwright-test-generator.md

@@ -0,0 +1,148 @@
+---
+name: playwright-test-generator
+description: Use this agent to convert a SigNoz E2E test plan into Playwright spec files under `tests/e2e/tests/<feature>/`. Examples — <example>Context: A test plan exists and needs to be turned into runnable specs. user: 'Generate the dashboards list specs from the plan in tests/e2e/specs/dashboards-list-test-plan.md' assistant: 'Using the generator agent to drive each scenario in a real browser and write the corresponding Playwright tests.'</example>
+tools: Glob, Grep, Read, Bash, mcp__playwright-test__browser_click, mcp__playwright-test__browser_drag, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_file_upload, mcp__playwright-test__browser_handle_dialog, mcp__playwright-test__browser_hover, mcp__playwright-test__browser_navigate, mcp__playwright-test__browser_press_key, mcp__playwright-test__browser_select_option, mcp__playwright-test__browser_snapshot, mcp__playwright-test__browser_type, mcp__playwright-test__browser_verify_element_visible, mcp__playwright-test__browser_verify_list_visible, mcp__playwright-test__browser_verify_text_visible, mcp__playwright-test__browser_verify_value, mcp__playwright-test__browser_wait_for, mcp__playwright-test__generator_read_log, mcp__playwright-test__generator_setup_page, mcp__playwright-test__generator_write_test
+model: sonnet
+color: blue
+---
+
+You are the Playwright Test Generator for the SigNoz frontend. You take a plan written by `playwright-test-planner` and produce runnable Playwright specs that match the conventions documented in [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md). **Read that doc first.** Adhere to it.
+
+# Repo conventions you must follow
+
+- **Spec location:** `tests/e2e/tests/<feature>/<spec-name>.spec.ts`. One file per resource; cross-resource concerns get their own file.
+- **Auth fixture:** import `test` and `expect` from `'../../fixtures/auth'`, not `@playwright/test`. Specs receive an admin-authenticated page via the `authedPage` fixture (the only user the bootstrap seeds).
+  ```ts
+  import { test, expect } from '../../fixtures/auth';
+
+  test('TC-01 alerts page — tabs render', async ({ authedPage: page }) => {
+    await page.goto('/alerts');
+    await expect(page.getByRole('tab', { name: /alert rules/i })).toBeVisible();
+  });
+  ```
+- **Test titles:** `TC-NN <short description>` — matches the planner's IDs.
+- **Self-contained state:** every test seeds what it needs and cleans up in `try / finally`. The bootstrap creates a fresh stack with **zero** dashboards / alerts / etc. — never assume pre-existing data.
+- **Seed via API when the UI flow is multi-step or brittle.** The frontend stores its JWT in `localStorage` under `AUTH_TOKEN`; `page.request.*` inherits the auth fixture's storage state, so:
+  ```ts
+  const token = await page.evaluate(
+    () => (globalThis as any).localStorage.getItem('AUTH_TOKEN') || '',
+  );
+  await page.request.post('/api/v1/dashboards', {
+    data: { title: 'my-name', uploadedGrafana: false },
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  ```
+  This is faster, more reliable, and within the e2e.md "drop to `page.request.*` when the UI can't reach what you need" rule.
+- **Resource names:** short, descriptive, no timestamps — `dashboards-list-sort-click`, not `Test Dashboard ${Date.now()}`. Each test owns its names; uniqueness comes from cleanup, not disambiguation.
+- **Serial mode** when tests in a file mutate the same list page:
+  ```ts
+  test.describe.configure({ mode: 'serial' });
+  ```
+- **Locator priority** (matches Playwright best practice):
+  1. `data-testid` (preferred — these are stable, app-author-provided handles)
+  2. `getByRole('button', { name: 'Submit' })`
+  3. `getByLabel('Email')`, `getByPlaceholder(...)`, `getByText(...)`
+  4. CSS / `locator('.ant-…')` — last resort
+- **Never commit `test.only`.** CI runs with `forbidOnly: true`.
+- **No `page.waitForTimeout(ms)`** — always prefer `await expect(locator).toBe…()`.
+
+# Your workflow
+
+For each scenario in the plan:
+
+1. **Read the plan.** Use `Read` to load `tests/e2e/specs/<feature>-test-plan.md` (or the path the user gave). Lock onto the TC-NN you're generating.
+2. **Set up the page.** Call `generator_setup_page` once per scenario before any browser tool. The setup logs in as the admin user (the bootstrap-seeded `admin@integration.test`).
+3. **Drive the scenario manually.** For each step in the plan:
+   - Use the description as the intent (it becomes the comment above the generated step).
+   - Use the appropriate `mcp__playwright-test__*` browser tool to execute it (click / type / verify / wait).
+   - For verifications, use the dedicated `browser_verify_*` tools — they capture the assertion as Playwright code in the log.
+4. **Read the log.** Call `generator_read_log` immediately after the last step. Don't intersperse other tool calls.
+5. **Write the spec.** Call `generator_write_test` with:
+   - **File path:** `tests/e2e/tests/<feature>/<scenario-slug>.spec.ts` — fs-friendly slug from the scenario title.
+   - **Single test per file** if the planner specified one-test-per-file; otherwise group related tests into one file with a shared `test.describe('<Feature>', () => { … })`.
+   - **`describe` block** matches the top-level plan section.
+   - **Title** matches `TC-NN <description>` exactly.
+   - **Step comments** before each action — one per step text from the plan, no duplicates.
+   - **Imports** from `../../fixtures/auth`. **Do not** import from `@playwright/test` directly.
+   - **Try / finally** cleanup using the API (delete the resources you seeded).
+
+# Example output
+
+For a plan section:
+
+```markdown
+### 1. Page Load
+
+#### TC-01 page chrome and core controls render
+**Steps:**
+1. Navigate to `/dashboard`
+2. Verify the page title is "SigNoz | All Dashboards"
+3. Verify the heading "Dashboards" is visible
+**Cleanup:** delete the seeded dashboard via API.
+```
+
+You produce:
+
+```ts
+// tests/e2e/tests/dashboards/dashboards-list.spec.ts
+import type { Page } from '@playwright/test';
+
+import { expect, test } from '../../fixtures/auth';
+
+test.describe.configure({ mode: 'serial' });
+
+async function authToken(page: Page): Promise<string> {
+  if (!page.url().startsWith('http')) {
+    await page.goto('/dashboard');
+  }
+  return page.evaluate(
+    () => (globalThis as any).localStorage.getItem('AUTH_TOKEN') || '',
+  );
+}
+
+async function createDashboard(page: Page, title: string): Promise<string> {
+  const token = await authToken(page);
+  const res = await page.request.post('/api/v1/dashboards', {
+    data: { title, uploadedGrafana: false },
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  if (!res.ok()) throw new Error(`createDashboard ${res.status()}`);
+  return ((await res.json()) as { data: { id: string } }).data.id;
+}
+
+async function deleteDashboard(page: Page, id: string): Promise<void> {
+  const token = await authToken(page);
+  await page.request.delete(`/api/v1/dashboards/${id}`, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+}
+
+test.describe('Dashboards List Page', () => {
+  test('TC-01 page chrome and core controls render', async ({
+    authedPage: page,
+  }) => {
+    const id = await createDashboard(page, 'dashboards-list-chrome');
+    try {
+      // 1. Navigate to /dashboard
+      await page.goto('/dashboard');
+
+      // 2. Verify the page title
+      await expect(page).toHaveTitle('SigNoz | All Dashboards');
+
+      // 3. Verify the heading is visible
+      await expect(
+        page.getByRole('heading', { name: 'Dashboards', level: 1 }),
+      ).toBeVisible();
+    } finally {
+      await deleteDashboard(page, id);
+    }
+  });
+});
+```
+
+# Quality bar
+
+- Every test runs end-to-end against a fresh stack. If you can't run it green from a fresh `test_setup`, it's not done.
+- Use `data-testid` whenever the source exposes one; grep `frontend/src/<feature-dir>/` for `data-testid=` to find them.
+- If a step depends on UI behaviour you can't verify (e.g. clipboard, downloads), use the matching Playwright primitive (`page.waitForEvent('download')`, `context.grantPermissions`).
+- If the page renders differently when the workspace is empty vs non-empty, **always** seed before driving the test — otherwise locators based on the non-empty layout will time out.

.claude/agents/playwright-test-healer.md

@@ -0,0 +1,54 @@
+---
+name: playwright-test-healer
+description: Use this agent to debug and fix failing SigNoz E2E Playwright tests. Examples — <example>Context: A spec is red. user: 'tests/e2e/tests/dashboards/dashboards-list.spec.ts is failing, fix it' assistant: 'Using the healer agent to debug each failing scenario and adjust the spec.'</example> <example>Context: After a frontend change a previously-green spec broke. user: 'TC-09 in alerts started failing' assistant: 'Launching the healer to investigate.'</example>
+tools: Glob, Grep, Read, Write, Edit, Bash, mcp__playwright-test__browser_console_messages, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_generate_locator, mcp__playwright-test__browser_network_requests, mcp__playwright-test__browser_snapshot, mcp__playwright-test__test_debug, mcp__playwright-test__test_list, mcp__playwright-test__test_run
+model: sonnet
+color: red
+---
+
+You are the Playwright Test Healer for the SigNoz E2E suite. You debug and fix red specs with a methodical approach. Read [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) before you start — it documents the harness and the conventions you must preserve.
+
+# Preconditions
+
+The E2E backend stack must be up. If `tests/e2e/.env.local` does not exist, ask the user to bring up the stack via:
+```
+cd tests
+uv run pytest --basetemp=./tmp/ -vv --reuse --with-web e2e/bootstrap/setup.py::test_setup
+```
+Don't try to start the stack yourself — it can take ~4 minutes on a cold build and the user controls when to pay that cost.
+
+# Workflow
+
+1. **Inventory.** `mcp__playwright-test__test_list` (or `npx playwright test <file> --list` from `tests/e2e/`) to see all tests in the spec.
+2. **Initial run.** `mcp__playwright-test__test_run` (or `npx playwright test <file> --project=chromium`) to identify failing tests. Don't run all browsers — chromium first.
+3. **Per failing test, debug.** Use `mcp__playwright-test__test_debug` to attach. When the test pauses on the error:
+   - `browser_snapshot` to read the current accessibility tree.
+   - `browser_console_messages` for client-side errors.
+   - `browser_network_requests` for API failures (the SigNoz API requires `Authorization: Bearer <localStorage.AUTH_TOKEN>`; 401s usually mean the test bypassed the fixture).
+   - `browser_generate_locator` to suggest a stable locator if the failing one drifted.
+4. **Root-cause.** Distinguish between:
+   - **Selector drift** — the app changed `data-testid` or text. Fix the locator. Prefer `data-testid` (grep `frontend/src/<feature-dir>/` for the new one).
+   - **Timing** — the test races a load. Replace `waitForTimeout` with `await expect(locator).toBe…()` or `page.waitForResponse(...)` on the triggering action.
+   - **State leak** — a previous test left data behind, or this test assumes data the bootstrap doesn't seed. Ensure the test seeds via API and cleans up in `try / finally`. The bootstrap creates a fresh stack with **zero** dashboards / alerts.
+   - **Genuine app bug** — the app is broken, not the test. Mark the test with `test.fixme(...)` and add a one-line `// known: <description>` comment. Don't silently change the assertion to make it pass.
+5. **Fix.** Edit the spec. Preserve TC-NN titles, the `authedPage` fixture, `try / finally` cleanup, and serial mode if present.
+6. **Re-run only the fixed test** before moving to the next failure (`-g 'TC-09'` or full path). Don't re-run the whole file each iteration.
+7. **Iterate** until the file is green. If a test stays red after high-confidence fixes, mark it `test.fixme(...)` with a comment and move on rather than spinning indefinitely.
+
+# Repo-specific signals
+
+- **The list pages render zero-state when the workspace is empty.** Many locators (search input, sort button, "All Dashboards" header) are absent in zero-state. If a test fails with a 30s timeout on these locators, the workspace was likely empty — seed via API first.
+- **The "Enter dashboard name…" inline field is a `RequestDashboardBtn` (template-request feedback form), not a create flow.** Tests that try to use it to create a named dashboard will silently no-op. The only UI create path is the "New dashboard" dropdown → "Create dashboard" → default name "Sample Title".
+- **Auth.** `tests/e2e/fixtures/auth.ts` logs in once per worker and caches `storageState` (cookies + localStorage with `AUTH_TOKEN`). For API-driven seeding/cleanup, read the token from localStorage and pass `Authorization: Bearer <token>`. Never re-implement login.
+- **Ant Design popovers** (sort menu, action menu) are click-toggle. The trigger element is often an inline `<svg>` with a `data-testid` — clicking it opens the popover; clicking it again closes. After selecting an option, the popover auto-closes. If a test interacts with the popover twice, wait for the menu items to be visible explicitly between toggles.
+- **Artifacts.** Every failed test writes to `tests/e2e/artifacts/results/<test-slug>/` — the `error-context.md` accessibility snapshot is the fastest way to see what the page actually looked like when it failed.
+- **Type-check.** After edits, run `npx tsc --noEmit -p tests/e2e/tsconfig.json` if it succeeds, or rely on `npx playwright test --list` to validate the spec parses.
+
+# Hard rules
+
+- **Never wait for `networkidle`.** It's flaky and discouraged.
+- **Never use `page.waitForTimeout(ms)`.** Always express the wait as `await expect(locator).toBeVisible()` or similar.
+- **Never weaken an assertion just to make a test pass.** If the underlying behavior is broken, mark `test.fixme(...)` with a comment.
+- **Don't ask the user questions** — make the most reasonable repair you can with the information at hand.
+- **Don't rewrite passing tests** while fixing a failing one. Surgical edits only.
+- **Never commit `test.only`** — CI fails on `forbidOnly: true`.

.claude/agents/playwright-test-planner.md

@@ -0,0 +1,94 @@
+---
+name: playwright-test-planner
+description: Use this agent to create a comprehensive E2E test plan for a SigNoz frontend feature. Examples — <example>Context: A new feature has shipped and we need test coverage. user: 'Plan E2E tests for the alerts list page' assistant: 'I'll use the planner agent to read the relevant frontend source, navigate the page in a real browser, and produce a structured test plan.' <commentary>Test planning needs both source code understanding and live browser exploration — perfect for this agent.</commentary></example> <example>Context: User wants edge-case coverage on an existing feature. user: 'What scenarios are we missing for dashboard variables?' assistant: 'Launching the planner agent to map flows and identify gaps.'</example>
+tools: Glob, Grep, Read, Write, Bash, mcp__playwright-test__browser_click, mcp__playwright-test__browser_close, mcp__playwright-test__browser_console_messages, mcp__playwright-test__browser_drag, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_file_upload, mcp__playwright-test__browser_handle_dialog, mcp__playwright-test__browser_hover, mcp__playwright-test__browser_navigate, mcp__playwright-test__browser_navigate_back, mcp__playwright-test__browser_network_requests, mcp__playwright-test__browser_press_key, mcp__playwright-test__browser_select_option, mcp__playwright-test__browser_snapshot, mcp__playwright-test__browser_take_screenshot, mcp__playwright-test__browser_type, mcp__playwright-test__browser_wait_for, mcp__playwright-test__planner_setup_page
+model: sonnet
+color: green
+---
+
+You are an expert E2E test planner for the SigNoz frontend, working inside the SigNoz monorepo. Your test plans drive Playwright specs that run against the local pytest-bootstrapped backend. Read [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) before planning — it documents the harness, the `authedPage` fixture, the TC-NN naming convention, and the self-contained-state principle that every plan you write must respect.
+
+You will:
+
+1. **Inspect the source component**
+   - Read the relevant React source under [frontend/src/](../../frontend/src/) directly with the `Read` / `Grep` / `Glob` tools — this is a monorepo, no need to fetch from GitHub.
+   - For a feature like "dashboards list", start at `frontend/src/pages/<Feature>Page/` and `frontend/src/container/<Feature>/`. Trace the component tree to identify:
+     - Interactive elements and their `data-testid` attributes (preferred locators)
+     - Conditional rendering (empty states, loading, error, role-gated UI)
+     - URL query-param state (search, sort, pagination)
+     - API endpoints the UI calls — these inform what cleanup endpoints exist for `try/finally` teardown
+   - The frontend stores its JWT in `localStorage` under `AUTH_TOKEN` and the API requires `Authorization: Bearer <token>` for protected endpoints. Plans that need API-driven seeding should note this so the generator can use `page.request.*`.
+
+2. **Navigate and explore**
+   - Invoke `planner_setup_page` once before any other browser tool.
+   - Use `browser_snapshot` to read the page's accessibility tree. **Do not take screenshots unless absolutely necessary** — snapshots are cheaper and more legible.
+   - Drive each flow end-to-end: happy path, error states, edge cases, URL deep-linking, browser-back behaviour.
+
+3. **Design comprehensive scenarios**
+   - Happy path
+   - Edge cases and boundary conditions (empty state, single item, > pagination threshold)
+   - Error handling and validation
+   - URL state and deep-linking
+   - Cross-flow regressions (e.g. searching while paginated)
+
+4. **Structure the test plan**
+
+   Each scenario must include:
+   - **TC-NN** title — `TC-NN <short description>` (matches the naming this repo uses for test titles).
+   - Preconditions (what state the test expects — note that the bootstrap creates a fresh stack with **zero dashboards / alerts / etc.**, so plans must seed their own data).
+   - Step-by-step user actions.
+   - Expected outcomes per step.
+   - Cleanup notes (what gets created and how to remove it — usually via API).
+
+5. **Save the plan**
+   - Default location: `tests/e2e/specs/<feature>-test-plan.md` — create the directory if it doesn't exist.
+   - Use clear headings, numbered steps, and a top-level "Application Overview" section.
+   - At the top of the file, list any pre-existing limitations (e.g. "ascending sort not yet implemented") so the generator emits them as `// known behaviour` comments rather than failing assertions.
+
+<example-spec>
+# Dashboards List Page — Test Plan
+
+## Application Overview
+
+The dashboards list page (`/dashboard`) lists all dashboards in the workspace. From here a user can:
+
+- Search by title, description, or tags (real-time, URL-synced via `?search=`)
+- Sort by last-updated (URL-synced via `?columnKey=&order=`)
+- Open per-row actions: View, Open in New Tab, Copy Link, Export JSON, Delete dashboard
+- Create a new dashboard via the "New dashboard" dropdown (Create dashboard / Import JSON / View templates)
+
+**Bootstrap state:** the pytest harness creates a fresh stack with no pre-seeded dashboards. Every test must seed its own data. The "Enter dashboard name…" inline input is a "request a new template" feedback form — **not** a create flow. The only UI create path is the dropdown.
+
+**Known limitations:**
+- Ascending sort is not yet implemented — repeated clicks on the sort button keep `order=descend`.
+- Cancelling the delete confirmation dialog navigates to the dashboard detail page rather than staying on the list.
+
+## Test Scenarios
+
+### 1. Page Load and Layout
+
+#### TC-01 page chrome and core controls render
+**Preconditions:** at least one dashboard exists (seed via API).
+
+**Steps:**
+1. Navigate to `/dashboard`.
+2. Verify URL is `/dashboard` (no query params).
+3. Verify the page heading "Dashboards" (level 1) is visible.
+4. ...
+
+**Expected:**
+- All Dashboards section header rendered.
+- Search input, sort button, and at least one dashboard thumbnail visible.
+
+**Cleanup:** delete the seeded dashboard via `DELETE /api/v1/dashboards/<id>`.
+
+#### TC-02 ...
+</example-spec>
+
+**Quality bar:**
+- Steps must be specific enough that any tester (or the generator agent) can follow without ambiguity.
+- Include negative scenarios — empty state, no-match search, validation errors.
+- Each scenario must own its preconditions and cleanup. **No global test fixtures** — that's incompatible with the parallel-by-default Playwright config.
+- Prefer stable `data-testid` attributes when noting locators; fall back to ARIA roles or accessible names; treat CSS selectors as last resort.
+
+**Output format:** a single Markdown file under `tests/e2e/specs/<feature>-test-plan.md` ready to hand to the generator agent.

.dockerignore

@@ -7,4 +7,9 @@ deploy
 sample-apps
 
 # frontend
-node_modules
+**/node_modules
+frontend/build
+
+# local env files (tracked example.env templates are unaffected)
+**/.env
+**/.env.*

.github/CODEOWNERS

@@ -107,7 +107,6 @@ go.mod @therealpandey
 /pkg/modules/organization/ @therealpandey
 /pkg/modules/authdomain/ @therealpandey
 /pkg/modules/role/ @therealpandey
-/pkg/types/coretypes/ @therealpandey @vikrantgupta25
 
 # IdentN Owners
 

.github/workflows/goci.yaml

@@ -102,20 +102,3 @@ jobs:
         run: |
           go run cmd/enterprise/*.go generate openapi
           git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in openapi spec. Run go run cmd/enterprise/*.go generate openapi locally and commit."; exit 1)
-  authz:
-    if: |
-      github.event_name == 'merge_group' ||
-      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
-    runs-on: ubuntu-latest
-    steps:
-      - name: self-checkout
-        uses: actions/checkout@v4
-      - name: go-install
-        uses: actions/setup-go@v5
-        with:
-          go-version: "1.24"
-      - name: generate-authz
-        run: |
-          go run cmd/enterprise/*.go generate authz
-          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in authz permissions. Run go run cmd/enterprise/*.go generate authz locally and commit."; exit 1)

.github/workflows/jsci.yaml

@@ -63,6 +63,46 @@ jobs:
         uses: actions/checkout@v4
       - name: run
         run: bash frontend/scripts/validate-md-languages.sh
+  authz:
+    if: |
+      github.event_name == 'merge_group' ||
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: self-checkout
+        uses: actions/checkout@v5
+      - name: node-install
+        uses: actions/setup-node@v5
+        with:
+          node-version: "22"
+      - name: deps-install
+        working-directory: ./frontend
+        run: |
+          yarn install
+      - name: uv-install
+        uses: astral-sh/setup-uv@v5
+      - name: uv-deps
+        working-directory: ./tests/integration
+        run: |
+          uv sync
+      - name: setup-test
+        run: |
+          make py-test-setup
+      - name: generate
+        working-directory: ./frontend
+        run: |
+          yarn generate:permissions-type
+      - name: teardown-test
+        if: always()
+        run: |
+          make py-test-teardown
+      - name: validate
+        run: |
+          if ! git diff --exit-code frontend/src/hooks/useAuthZ/permissions.type.ts; then
+            echo "::error::frontend/src/hooks/useAuthZ/permissions.type.ts is out of date. Please run the generator locally and commit the changes: npm run generate:permissions-type (from the frontend directory)"
+            exit 1
+          fi
   openapi:
     if: |
       github.event_name == 'merge_group' ||

cmd/authz.go

@@ -1,117 +0,0 @@
-package cmd
-
-import (
-	"bytes"
-	"context"
-	"os"
-	"sort"
-	"text/template"
-
-	"github.com/SigNoz/signoz/pkg/types/coretypes"
-	"github.com/spf13/cobra"
-)
-
-const permissionsTypePath = "frontend/src/hooks/useAuthZ/permissions.type.ts"
-
-var permissionsTypeTemplate = template.Must(template.New("permissions").Parse(
-	`// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY cmd/enterprise/*.go generate authz
-export default {
-	status: 'success',
-	data: {
-		resources: [
-{{- range .Resources }}
-			{
-				kind: '{{ .Kind }}',
-				type: '{{ .Type }}',
-			},
-{{- end }}
-		],
-		relations: {
-{{- range .Relations }}
-			{{ .Verb }}: [{{ range $i, $t := .Types }}{{ if $i }}, {{ end }}'{{ $t }}'{{ end }}],
-{{- end }}
-		},
-	},
-} as const;
-`))
-
-type permissionsTypeRelation struct {
-	Verb  string
-	Types []string
-}
-
-type permissionsTypeResource struct {
-	Kind string
-	Type string
-}
-
-type permissionsTypeData struct {
-	Resources []permissionsTypeResource
-	Relations []permissionsTypeRelation
-}
-
-func registerGenerateAuthz(parentCmd *cobra.Command) {
-	authzCmd := &cobra.Command{
-		Use:   "authz",
-		Short: "Generate authz permissions for the frontend",
-		RunE: func(currCmd *cobra.Command, args []string) error {
-			return runGenerateAuthz(currCmd.Context())
-		},
-	}
-
-	parentCmd.AddCommand(authzCmd)
-}
-
-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.ResourceMetaResourcesRole).String(): true,
-	}
-
-	allowedTypes := map[string]bool{}
-
-	refs := registry.ResourceRefs()
-	resources := make([]permissionsTypeResource, 0, len(refs))
-	for _, ref := range refs {
-		if !allowedResources[ref.String()] {
-			continue
-		}
-		allowedTypes[ref.Type.StringValue()] = true
-		resources = append(resources, permissionsTypeResource{
-			Kind: ref.Kind.String(),
-			Type: ref.Type.StringValue(),
-		})
-	}
-
-	typesByVerb := registry.TypesByVerb()
-	verbs := make([]coretypes.Verb, 0, len(typesByVerb))
-	for verb := range typesByVerb {
-		verbs = append(verbs, verb)
-	}
-	sort.Slice(verbs, func(i, j int) bool { return verbs[i].StringValue() < verbs[j].StringValue() })
-
-	relations := make([]permissionsTypeRelation, 0, len(verbs))
-	for _, verb := range verbs {
-		types := make([]string, 0, len(typesByVerb[verb]))
-		for _, t := range typesByVerb[verb] {
-			if !allowedTypes[t.StringValue()] {
-				continue
-			}
-			types = append(types, t.StringValue())
-		}
-		relations = append(relations, permissionsTypeRelation{
-			Verb:  verb.StringValue(),
-			Types: types,
-		})
-	}
-
-	var buf bytes.Buffer
-	if err := permissionsTypeTemplate.Execute(&buf, permissionsTypeData{Resources: resources, Relations: relations}); err != nil {
-		return err
-	}
-
-	return os.WriteFile(permissionsTypePath, buf.Bytes(), 0o600)
-}

cmd/community/server.go

@@ -92,13 +92,13 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(ctx context.Context, providerSettings factory.ProviderSettings, store authtypes.AuthNStore, licensing licensing.Licensing) (map[authtypes.AuthNProvider]authn.AuthN, error) {
 			return signoz.NewAuthNs(ctx, providerSettings, store, licensing)
 		},
-		func(ctx context.Context, sqlstore sqlstore.SQLStore, config authz.Config, _ licensing.Licensing, _ []authz.OnBeforeRoleDelete) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
-			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore, config)
+		func(ctx context.Context, sqlstore sqlstore.SQLStore, _ licensing.Licensing, _ []authz.OnBeforeRoleDelete, _ dashboard.Module) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
+			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore)
 			if err != nil {
 				return nil, err
 			}
 
-			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, authtypes.NewRegistry()), nil
+			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore), nil
 		},
 		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing) dashboard.Module {
 			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser)

cmd/enterprise/server.go

@@ -137,12 +137,12 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return authNs, nil
 		},
-		func(ctx context.Context, sqlstore sqlstore.SQLStore, config authz.Config, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
-			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore, config)
+		func(ctx context.Context, sqlstore sqlstore.SQLStore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, dashboardModule dashboard.Module) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
+			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore)
 			if err != nil {
 				return nil, err
 			}
-			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, onBeforeRoleDelete, authtypes.NewRegistry()), nil
+			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, onBeforeRoleDelete, dashboardModule), nil
 		},
 		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
 			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing)

cmd/generate.go

@@ -16,7 +16,6 @@ func RegisterGenerate(parentCmd *cobra.Command, logger *slog.Logger) {
 	}
 
 	registerGenerateOpenAPI(generateCmd)
-	registerGenerateAuthz(generateCmd)
 
 	parentCmd.AddCommand(generateCmd)
 }

conf/example.yaml

@@ -428,4 +428,4 @@ authz:
   provider: openfga
   openfga:
     # maximum tuples allowed per openfga write operation.
-    max_tuples_per_write: 300
+    max_tuples_per_write: 100

docs/api/openapi.yml

@@ -321,6 +321,35 @@ components:
       required:
       - id
       type: object
+    AuthtypesGettableObjects:
+      properties:
+        resource:
+          $ref: '#/components/schemas/AuthtypesResource'
+        selectors:
+          items:
+            type: string
+          type: array
+      required:
+      - resource
+      - selectors
+      type: object
+    AuthtypesGettableResources:
+      properties:
+        relations:
+          additionalProperties:
+            items:
+              type: string
+            type: array
+          nullable: true
+          type: object
+        resources:
+          items:
+            $ref: '#/components/schemas/AuthtypesResource'
+          type: array
+      required:
+      - resources
+      - relations
+      type: object
     AuthtypesGettableToken:
       properties:
         accessToken:
@@ -337,9 +366,9 @@ components:
         authorized:
           type: boolean
         object:
-          $ref: '#/components/schemas/CoretypesObject'
+          $ref: '#/components/schemas/AuthtypesObject'
         relation:
-          $ref: '#/components/schemas/AuthtypesRelation'
+          type: string
       required:
       - relation
       - object
@@ -387,6 +416,16 @@ components:
         issuerAlias:
           type: string
       type: object
+    AuthtypesObject:
+      properties:
+        resource:
+          $ref: '#/components/schemas/AuthtypesResource'
+        selector:
+          type: string
+      required:
+      - resource
+      - selector
+      type: object
     AuthtypesOrgSessionContext:
       properties:
         authNSupport:
@@ -403,6 +442,22 @@ components:
         provider:
           $ref: '#/components/schemas/AuthtypesAuthNProvider'
       type: object
+    AuthtypesPatchableObjects:
+      properties:
+        additions:
+          items:
+            $ref: '#/components/schemas/AuthtypesGettableObjects'
+          nullable: true
+          type: array
+        deletions:
+          items:
+            $ref: '#/components/schemas/AuthtypesGettableObjects'
+          nullable: true
+          type: array
+      required:
+      - additions
+      - deletions
+      type: object
     AuthtypesPatchableRole:
       properties:
         description:
@@ -440,15 +495,16 @@ components:
         refreshToken:
           type: string
       type: object
-    AuthtypesRelation:
-      enum:
-      - create
-      - read
-      - update
-      - delete
-      - list
-      - assignee
-      type: string
+    AuthtypesResource:
+      properties:
+        name:
+          type: string
+        type:
+          type: string
+      required:
+      - name
+      - type
+      type: object
     AuthtypesRole:
       properties:
         createdAt:
@@ -512,9 +568,9 @@ components:
     AuthtypesTransaction:
       properties:
         object:
-          $ref: '#/components/schemas/CoretypesObject'
+          $ref: '#/components/schemas/AuthtypesObject'
         relation:
-          $ref: '#/components/schemas/AuthtypesRelation'
+          type: string
       required:
       - relation
       - object
@@ -2149,64 +2205,6 @@ components:
         to_user:
           type: string
       type: object
-    CoretypesObject:
-      properties:
-        resource:
-          $ref: '#/components/schemas/CoretypesResourceRef'
-        selector:
-          type: string
-      required:
-      - resource
-      - selector
-      type: object
-    CoretypesObjectGroup:
-      properties:
-        resource:
-          $ref: '#/components/schemas/CoretypesResourceRef'
-        selectors:
-          items:
-            type: string
-          type: array
-      required:
-      - resource
-      - selectors
-      type: object
-    CoretypesPatchableObjects:
-      properties:
-        additions:
-          items:
-            $ref: '#/components/schemas/CoretypesObjectGroup'
-          nullable: true
-          type: array
-        deletions:
-          items:
-            $ref: '#/components/schemas/CoretypesObjectGroup'
-          nullable: true
-          type: array
-      required:
-      - additions
-      - deletions
-      type: object
-    CoretypesResourceRef:
-      properties:
-        kind:
-          type: string
-        type:
-          $ref: '#/components/schemas/CoretypesType'
-      required:
-      - type
-      - kind
-      type: object
-    CoretypesType:
-      enum:
-      - user
-      - serviceaccount
-      - anonymous
-      - role
-      - organization
-      - metaresource
-      - metaresources
-      type: string
     DashboardtypesDashboard:
       properties:
         createdAt:
@@ -5323,9 +5321,6 @@ components:
         sub_tree_node_count:
           minimum: 0
           type: integer
-        time_unix:
-          minimum: 0
-          type: integer
         trace_id:
           type: string
         trace_state:
@@ -5706,6 +5701,35 @@ paths:
       summary: Check permissions
       tags:
       - authz
+  /api/v1/authz/resources:
+    get:
+      deprecated: false
+      description: Gets all the available resources
+      operationId: AuthzResources
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/AuthtypesGettableResources'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      summary: Get resources
+      tags:
+      - authz
   /api/v1/channels:
     get:
       deprecated: false
@@ -8929,7 +8953,7 @@ paths:
                 properties:
                   data:
                     items:
-                      $ref: '#/components/schemas/CoretypesObjectGroup'
+                      $ref: '#/components/schemas/AuthtypesGettableObjects'
                     type: array
                   status:
                     type: string
@@ -9002,7 +9026,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/CoretypesPatchableObjects'
+              $ref: '#/components/schemas/AuthtypesPatchableObjects'
       responses:
         "204":
           content:

docs/contributing/tests/e2e.md

@@ -97,7 +97,21 @@ Each spec follows these principles:
 1. **Directory per feature**: `tests/e2e/tests/<feature>/*.spec.ts`. Cross-resource junction concerns (e.g. cascade-delete) go in their own file, not packed into one giant spec.
 2. **Test titles use `TC-NN`**: `test('TC-01 alerts page — tabs render', ...)`. Preserves ordering at a glance and maps to external coverage tracking.
 3. **UI-first**: drive flows through the UI. Playwright traces capture every BE request/response the UI triggers, so asserting on UI outcomes implicitly validates BE contracts. Reach for direct `page.request.*` only when the test's *purpose* is asserting a response contract (use `page.waitForResponse` on a UI click) or when a specific UI step is structurally flaky (e.g. Ant DatePicker calendar-cell indices) — and even then try UI first.
-4. **Self-contained state**: each spec creates what it needs and cleans up in `try/finally`. No global pre-seeding fixtures.
+4. **Self-contained state**: each spec seeds its own data and cleans up at suite teardown. The pytest harness creates a fresh stack with **zero** dashboards / alerts / etc. — never assume pre-existing data. Two patterns work:
+    - **Per-test seed + cleanup in `try / finally`** — small specs where each test owns its data.
+    - **Suite-level seed + `afterAll` teardown** — preferred for larger specs. Each `createDashboard(...)` call adds the resulting ID to a module-level `Set<string>`, and one `test.afterAll(...)` deletes everything in the set. See `tests/e2e/tests/dashboards/dashboards-list.spec.ts` for the full pattern. `test.beforeAll` / `test.afterAll` cannot use `authedPage` directly (it's test-scoped); use `newAuthedContext(browser)` from `fixtures/auth.ts` instead — it reuses the per-worker storage cache so no extra login happens.
+5. **Seed via API when the UI flow is multi-step or brittle.** The frontend stores its JWT in `localStorage` under `AUTH_TOKEN`; `page.request.*` inherits the auth fixture's storage state. A typical pattern:
+    ```ts
+    const token = await page.evaluate(
+      () => (globalThis as any).localStorage.getItem('AUTH_TOKEN') || '',
+    );
+    await page.request.post('/api/v1/dashboards', {
+      data: { title: 'my-name', uploadedGrafana: false },
+      headers: { Authorization: `Bearer ${token}` },
+    });
+    ```
+    This is faster and more reliable than a multi-step UI seed. Reach for the UI flow only when the test's *purpose* is asserting that flow.
+6. **Reusable fixture data lives in `tests/e2e/fixtures/`.** For example, `apm-metrics.json` is a real dashboard payload that specs import and `POST` to `/api/v1/dashboards` to seed a richly-tagged dashboard for search/list tests.
 
 ## How to write an E2E test?
 
@@ -155,13 +169,23 @@ test('TC-02 alerts list — create, toggle, delete', async ({ authedPage: page }
 
 ### Locator priority
 
-1. `getByRole('button', { name: 'Submit' })`
-2. `getByLabel('Email')`
-3. `getByPlaceholder('...')`
-4. `getByText('...')`
-5. `getByTestId('...')`
+1. `getByTestId('...')` — preferred when the source exposes one. Stable, app-author-provided handle that survives copy-edits.
+2. `getByRole('button', { name: 'Submit' })`
+3. `getByLabel('Email')`
+4. `getByPlaceholder('...')`
+5. `getByText('...')`
 6. `locator('.ant-select')` — last resort (Ant Design dropdowns often have no semantic alternative)
 
+## Agents
+
+Three Claude agents in `.claude/agents/` accelerate writing and maintaining E2E specs:
+
+- **`playwright-test-planner`** — explores a feature in a real browser plus the local frontend source and writes a test plan to `tests/e2e/specs/<feature>-test-plan.md`.
+- **`playwright-test-generator`** — converts a test plan into Playwright spec files under `tests/e2e/tests/<feature>/`. Drives each scenario through MCP browser tools and emits TC-NN-titled tests using the `authedPage` fixture and the API-seed pattern.
+- **`playwright-test-healer`** — runs failing specs, debugs them with snapshots / console / network introspection, and edits the spec to fix selector drift, timing, or state-leak issues.
+
+The agents rely on the Playwright-test MCP server (`mcp__playwright-test__*` tools). Configure it in your Claude MCP settings; the permission allowlist lives in [.claude/settings.local.json](../../../.claude/settings.local.json).
+
 ## How to run E2E tests?
 
 ### Running All Tests

ee/authz/openfgaauthz/provider.go

@@ -2,6 +2,7 @@ package openfgaauthz
 
 import (
 	"context"
+	"slices"
 
 	"github.com/SigNoz/signoz/ee/authz/openfgaserver"
 	"github.com/SigNoz/signoz/pkg/authz"
@@ -12,7 +13,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	openfgav1 "github.com/openfga/api/proto/openfga/v1"
 	openfgapkgtransformer "github.com/openfga/language/pkg/go/transformer"
@@ -25,19 +25,19 @@ type provider struct {
 	openfgaServer      *openfgaserver.Server
 	licensing          licensing.Licensing
 	store              authtypes.RoleStore
-	registry           *authtypes.Registry
+	registry           []authz.RegisterTypeable
 	settings           factory.ScopedProviderSettings
 	onBeforeRoleDelete []authz.OnBeforeRoleDelete
 }
 
-func NewProviderFactory(sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry *authtypes.Registry) factory.ProviderFactory[authz.AuthZ, authz.Config] {
+func NewProviderFactory(sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry ...authz.RegisterTypeable) factory.ProviderFactory[authz.AuthZ, authz.Config] {
 	return factory.NewProviderFactory(factory.MustNewName("openfga"), func(ctx context.Context, ps factory.ProviderSettings, config authz.Config) (authz.AuthZ, error) {
 		return newOpenfgaProvider(ctx, ps, config, sqlstore, openfgaSchema, openfgaDataStore, licensing, onBeforeRoleDelete, registry)
 	})
 }
 
-func newOpenfgaProvider(ctx context.Context, settings factory.ProviderSettings, config authz.Config, sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry *authtypes.Registry) (authz.AuthZ, error) {
-	pkgOpenfgaAuthzProvider := pkgopenfgaauthz.NewProviderFactory(sqlstore, openfgaSchema, openfgaDataStore, registry)
+func newOpenfgaProvider(ctx context.Context, settings factory.ProviderSettings, config authz.Config, sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry []authz.RegisterTypeable) (authz.AuthZ, error) {
+	pkgOpenfgaAuthzProvider := pkgopenfgaauthz.NewProviderFactory(sqlstore, openfgaSchema, openfgaDataStore)
 	pkgAuthzService, err := pkgOpenfgaAuthzProvider.New(ctx, settings, config)
 	if err != nil {
 		return nil, err
@@ -74,11 +74,11 @@ func (provider *provider) Stop(ctx context.Context) error {
 	return provider.openfgaServer.Stop(ctx)
 }
 
-func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, roleSelectors []coretypes.Selector) error {
+func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, roleSelectors []authtypes.Selector) error {
 	return provider.openfgaServer.CheckWithTupleCreation(ctx, claims, orgID, relation, typeable, selectors, roleSelectors)
 }
 
-func (provider *provider) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, roleSelectors []coretypes.Selector) error {
+func (provider *provider) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, roleSelectors []authtypes.Selector) error {
 	return provider.openfgaServer.CheckWithTupleCreationWithoutClaims(ctx, orgID, relation, typeable, selectors, roleSelectors)
 }
 
@@ -108,7 +108,7 @@ func (provider *provider) CheckTransactions(ctx context.Context, subject string,
 	return results, nil
 }
 
-func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
+func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType authtypes.Type) ([]*authtypes.Object, error) {
 	return provider.openfgaServer.ListObjects(ctx, subject, relation, objectType)
 }
 
@@ -159,10 +159,16 @@ func (provider *provider) CreateManagedRoles(ctx context.Context, orgID valuer.U
 func (provider *provider) CreateManagedUserRoleTransactions(ctx context.Context, orgID valuer.UUID, userID valuer.UUID) error {
 	tuples := make([]*openfgav1.TupleKey, 0)
 
-	grantTuples := provider.getManagedRoleGrantTuples(orgID, userID)
+	grantTuples, err := provider.getManagedRoleGrantTuples(orgID, userID)
+	if err != nil {
+		return err
+	}
 	tuples = append(tuples, grantTuples...)
 
-	managedRoleTuples := provider.getManagedRoleTransactionTuples(orgID)
+	managedRoleTuples, err := provider.getManagedRoleTransactionTuples(orgID)
+	if err != nil {
+		return err
+	}
 	tuples = append(tuples, managedRoleTuples...)
 
 	return provider.Write(ctx, tuples, nil)
@@ -202,7 +208,21 @@ func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, ro
 	return role, nil
 }
 
-func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id valuer.UUID, relation authtypes.Relation) ([]*coretypes.Object, error) {
+func (provider *provider) GetResources(_ context.Context) []*authtypes.Resource {
+	resources := make([]*authtypes.Resource, 0)
+	for _, register := range provider.registry {
+		for _, typeable := range register.MustGetTypeables() {
+			resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})
+		}
+	}
+	for _, typeable := range provider.MustGetTypeables() {
+		resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})
+	}
+
+	return resources
+}
+
+func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id valuer.UUID, relation authtypes.Relation) ([]*authtypes.Object, error) {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
@@ -213,16 +233,16 @@ func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id
 		return nil, err
 	}
 
-	objects := make([]*coretypes.Object, 0)
-	for _, objectType := range provider.registry.Types() {
-		if coretypes.ErrIfVerbNotValidForType(relation.Verb, objectType) != nil {
+	objects := make([]*authtypes.Object, 0)
+	for _, objectType := range provider.getUniqueTypes() {
+		if !slices.Contains(authtypes.TypeableRelations[objectType], relation) {
 			continue
 		}
 
 		resourceObjects, err := provider.
 			ListObjects(
 				ctx,
-				authtypes.MustNewSubject(coretypes.NewResourceRole(), storableRole.Name, orgID, &coretypes.VerbAssignee),
+				authtypes.MustNewSubject(authtypes.TypeableRole, storableRole.Name, orgID, &authtypes.RelationAssignee),
 				relation,
 				objectType,
 			)
@@ -245,7 +265,7 @@ func (provider *provider) Patch(ctx context.Context, orgID valuer.UUID, role *au
 	return provider.store.Update(ctx, orgID, role)
 }
 
-func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*coretypes.Object) error {
+func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*authtypes.Object) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
@@ -298,63 +318,84 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 	return provider.store.Delete(ctx, orgID, id)
 }
 
-func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID valuer.UUID) []*openfgav1.TupleKey {
+func (provider *provider) MustGetTypeables() []authtypes.Typeable {
+	return []authtypes.Typeable{authtypes.TypeableRole, authtypes.TypeableResourcesRoles}
+}
+
+func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID valuer.UUID) ([]*openfgav1.TupleKey, error) {
 	tuples := []*openfgav1.TupleKey{}
 
 	// Grant the admin role to the user
-	adminSubject := authtypes.MustNewSubject(coretypes.NewResourceUser(), userID.String(), orgID, nil)
-	adminTuple := authtypes.NewTuples(
-		coretypes.NewResourceRole(),
+	adminSubject := authtypes.MustNewSubject(authtypes.TypeableUser, userID.String(), orgID, nil)
+	adminTuple, err := authtypes.TypeableRole.Tuples(
 		adminSubject,
-		authtypes.Relation{Verb: coretypes.VerbAssignee},
-		[]coretypes.Selector{coretypes.TypeRole.MustSelector(authtypes.SigNozAdminRoleName)},
+		authtypes.RelationAssignee,
+		[]authtypes.Selector{
+			authtypes.MustNewSelector(authtypes.TypeRole, authtypes.SigNozAdminRoleName),
+		},
 		orgID,
 	)
+	if err != nil {
+		return nil, err
+	}
 	tuples = append(tuples, adminTuple...)
 
 	// Grant the admin role to the anonymous user
-	anonymousSubject := authtypes.MustNewSubject(coretypes.NewResourceAnonymous(), coretypes.AnonymousUser.String(), orgID, nil)
-	anonymousTuple := authtypes.NewTuples(
-		coretypes.NewResourceRole(),
+	anonymousSubject := authtypes.MustNewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
+	anonymousTuple, err := authtypes.TypeableRole.Tuples(
 		anonymousSubject,
-		authtypes.Relation{Verb: coretypes.VerbAssignee},
-		[]coretypes.Selector{coretypes.TypeRole.MustSelector(authtypes.SigNozAnonymousRoleName)},
+		authtypes.RelationAssignee,
+		[]authtypes.Selector{
+			authtypes.MustNewSelector(authtypes.TypeRole, authtypes.SigNozAnonymousRoleName),
+		},
 		orgID,
 	)
+	if err != nil {
+		return nil, err
+	}
 	tuples = append(tuples, anonymousTuple...)
 
-	return tuples
+	return tuples, nil
 }
 
-func (provider *provider) getManagedRoleTransactionTuples(orgID valuer.UUID) []*openfgav1.TupleKey {
+func (provider *provider) getManagedRoleTransactionTuples(orgID valuer.UUID) ([]*openfgav1.TupleKey, error) {
+	transactionsByRole := make(map[string][]*authtypes.Transaction)
+	for _, register := range provider.registry {
+		for roleName, txns := range register.MustGetManagedRoleTransactions() {
+			transactionsByRole[roleName] = append(transactionsByRole[roleName], txns...)
+		}
+	}
+
 	tuples := make([]*openfgav1.TupleKey, 0)
-	for roleName, transactions := range provider.registry.ManagedRoleTransactions() {
+	for roleName, transactions := range transactionsByRole {
 		for _, txn := range transactions {
-			resource := coretypes.MustNewResourceFromTypeAndKind(txn.Object.Resource.Type, txn.Object.Resource.Kind)
-			txnTuples := authtypes.NewTuples(
-				resource,
+			typeable := authtypes.MustNewTypeableFromType(txn.Object.Resource.Type, txn.Object.Resource.Name)
+			txnTuples, err := typeable.Tuples(
 				authtypes.MustNewSubject(
-					coretypes.NewResourceRole(),
+					authtypes.TypeableRole,
 					roleName,
 					orgID,
-					&coretypes.VerbAssignee,
+					&authtypes.RelationAssignee,
 				),
 				txn.Relation,
-				[]coretypes.Selector{txn.Object.Selector},
+				[]authtypes.Selector{txn.Object.Selector},
 				orgID,
 			)
+			if err != nil {
+				return nil, err
+			}
 			tuples = append(tuples, txnTuples...)
 		}
 	}
 
-	return tuples
+	return tuples, nil
 }
 
 func (provider *provider) deleteTuples(ctx context.Context, roleName string, orgID valuer.UUID) error {
-	subject := authtypes.MustNewSubject(coretypes.NewResourceRole(), roleName, orgID, &coretypes.VerbAssignee)
+	subject := authtypes.MustNewSubject(authtypes.TypeableRole, roleName, orgID, &authtypes.RelationAssignee)
 
 	tuples := make([]*openfgav1.TupleKey, 0)
-	for _, objectType := range provider.registry.Types() {
+	for _, objectType := range provider.getUniqueTypes() {
 		typeTuples, err := provider.ReadTuples(ctx, &openfgav1.ReadRequestTupleKey{
 			User:   subject,
 			Object: objectType.StringValue() + ":",
@@ -383,3 +424,28 @@ func (provider *provider) deleteTuples(ctx context.Context, roleName string, org
 
 	return nil
 }
+
+func (provider *provider) getUniqueTypes() []authtypes.Type {
+	seen := make(map[string]struct{})
+	uniqueTypes := make([]authtypes.Type, 0)
+	for _, register := range provider.registry {
+		for _, typeable := range register.MustGetTypeables() {
+			typeKey := typeable.Type().StringValue()
+			if _, ok := seen[typeKey]; ok {
+				continue
+			}
+			seen[typeKey] = struct{}{}
+			uniqueTypes = append(uniqueTypes, typeable.Type())
+		}
+	}
+	for _, typeable := range provider.MustGetTypeables() {
+		typeKey := typeable.Type().StringValue()
+		if _, ok := seen[typeKey]; ok {
+			continue
+		}
+		seen[typeKey] = struct{}{}
+		uniqueTypes = append(uniqueTypes, typeable.Type())
+	}
+
+	return uniqueTypes
+}

ee/authz/openfgaschema/base.fga

@@ -1,6 +1,6 @@
 module base
 
-type organization 
+type organisation 
   relations
     define read: [user, serviceaccount, role#assignee]
     define update: [user, serviceaccount, role#assignee]
@@ -10,14 +10,12 @@ type user
     define read: [user, serviceaccount, role#assignee]
     define update: [user, serviceaccount, role#assignee]
     define delete: [user, serviceaccount, role#assignee]
-    define attach: [user, serviceaccount, role#assignee]
 
-type serviceaccount
+type serviceaccount 
   relations
     define read: [user, serviceaccount, role#assignee]
     define update: [user, serviceaccount, role#assignee]
-    define delete: [user, serviceaccount, role#assignee]
-    define attach: [user, serviceaccount, role#assignee]
+    define delete: [user, serviceaccount, role#assignee]  
 
 type anonymous
 
@@ -28,7 +26,6 @@ type role
     define read: [user, serviceaccount, role#assignee]
     define update: [user, serviceaccount, role#assignee]
     define delete: [user, serviceaccount, role#assignee]
-    define attach: [user, serviceaccount, role#assignee]
 
 type metaresources
   relations

ee/authz/openfgaserver/server.go

@@ -7,7 +7,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	openfgav1 "github.com/openfga/api/proto/openfga/v1"
 )
@@ -34,18 +33,18 @@ func (server *Server) Stop(ctx context.Context) error {
 	return server.pkgAuthzService.Stop(ctx)
 }
 
-func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, _ []coretypes.Selector) error {
+func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
 	subject := ""
 	switch claims.Principal {
 	case authtypes.PrincipalUser:
-		user, err := authtypes.NewSubject(coretypes.NewResourceUser(), claims.UserID, orgID, nil)
+		user, err := authtypes.NewSubject(authtypes.TypeableUser, claims.UserID, orgID, nil)
 		if err != nil {
 			return err
 		}
 
 		subject = user
 	case authtypes.PrincipalServiceAccount:
-		serviceAccount, err := authtypes.NewSubject(coretypes.NewResourceServiceAccount(), claims.ServiceAccountID, orgID, nil)
+		serviceAccount, err := authtypes.NewSubject(authtypes.TypeableServiceAccount, claims.ServiceAccountID, orgID, nil)
 		if err != nil {
 			return err
 		}
@@ -53,7 +52,10 @@ func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtyp
 		subject = serviceAccount
 	}
 
-	tupleSlice := authtypes.NewTuples(typeable, subject, relation, selectors, orgID)
+	tupleSlice, err := typeable.Tuples(subject, relation, selectors, orgID)
+	if err != nil {
+		return err
+	}
 
 	tuples := make(map[string]*openfgav1.TupleKey, len(tupleSlice))
 	for idx, tuple := range tupleSlice {
@@ -74,13 +76,16 @@ func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtyp
 	return errors.Newf(errors.TypeForbidden, authtypes.ErrCodeAuthZForbidden, "subjects are not authorized for requested access")
 }
 
-func (server *Server) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, _ []coretypes.Selector) error {
-	subject, err := authtypes.NewSubject(coretypes.NewResourceAnonymous(), coretypes.AnonymousUser.String(), orgID, nil)
+func (server *Server) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
+	subject, err := authtypes.NewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
 	if err != nil {
 		return err
 	}
 
-	tupleSlice := authtypes.NewTuples(typeable, subject, relation, selectors, orgID)
+	tupleSlice, err := typeable.Tuples(subject, relation, selectors, orgID)
+	if err != nil {
+		return err
+	}
 
 	tuples := make(map[string]*openfgav1.TupleKey, len(tupleSlice))
 	for idx, tuple := range tupleSlice {
@@ -105,7 +110,7 @@ func (server *Server) BatchCheck(ctx context.Context, tupleReq map[string]*openf
 	return server.pkgAuthzService.BatchCheck(ctx, tupleReq)
 }
 
-func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
+func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType authtypes.Type) ([]*authtypes.Object, error) {
 	return server.pkgAuthzService.ListObjects(ctx, subject, relation, objectType)
 }
 

ee/authz/openfgaserver/sqlstore.go

@@ -2,7 +2,6 @@ package openfgaserver
 
 import (
 	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
-	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/openfga/openfga/pkg/storage"
@@ -11,11 +10,11 @@ import (
 	"github.com/openfga/openfga/pkg/storage/sqlite"
 )
 
-func NewSQLStore(store sqlstore.SQLStore, config authz.Config) (storage.OpenFGADatastore, error) {
+func NewSQLStore(store sqlstore.SQLStore) (storage.OpenFGADatastore, error) {
 	switch store.BunDB().Dialect().Name().String() {
 	case "sqlite":
 		return sqlite.NewWithDB(store.SQLDB(), &sqlcommon.Config{
-			MaxTuplesPerWriteField: config.OpenFGA.MaxTuplesPerWrite,
+			MaxTuplesPerWriteField: 100,
 			MaxTypesPerModelField:  100,
 		})
 	case "pg":
@@ -25,7 +24,7 @@ func NewSQLStore(store sqlstore.SQLStore, config authz.Config) (storage.OpenFGAD
 		}
 
 		return postgres.NewWithDB(pgStore.Pool(), nil, &sqlcommon.Config{
-			MaxTuplesPerWriteField: config.OpenFGA.MaxTuplesPerWrite,
+			MaxTuplesPerWriteField: 100,
 			MaxTypesPerModelField:  100,
 		})
 	}

ee/modules/dashboard/impldashboard/module.go

@@ -14,7 +14,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
@@ -88,7 +88,7 @@ func (module *module) GetDashboardByPublicID(ctx context.Context, id valuer.UUID
 	return dashboardtypes.NewDashboardFromStorableDashboard(storableDashboard), nil
 }
 
-func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id valuer.UUID, orgs []*types.Organization) ([]coretypes.Selector, valuer.UUID, error) {
+func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id valuer.UUID, orgs []*types.Organization) ([]authtypes.Selector, valuer.UUID, error) {
 	orgIDs := make([]string, len(orgs))
 	for idx, org := range orgs {
 		orgIDs[idx] = org.ID.StringValue()
@@ -99,9 +99,9 @@ func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id
 		return nil, valuer.UUID{}, err
 	}
 
-	return []coretypes.Selector{
-		coretypes.TypeMetaResource.MustSelector(id.StringValue()),
-		coretypes.TypeMetaResource.MustSelector(coretypes.WildCardSelectorString),
+	return []authtypes.Selector{
+		authtypes.MustNewSelector(authtypes.TypeMetaResource, id.StringValue()),
+		authtypes.MustNewSelector(authtypes.TypeMetaResource, authtypes.WildCardSelectorString),
 	}, storableDashboard.OrgID, nil
 }
 
@@ -217,6 +217,28 @@ func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valu
 	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, isAdmin, lock)
 }
 
+func (module *module) MustGetTypeables() []authtypes.Typeable {
+	return module.pkgDashboardModule.MustGetTypeables()
+}
+
+func (module *module) MustGetManagedRoleTransactions() map[string][]*authtypes.Transaction {
+	return map[string][]*authtypes.Transaction{
+		authtypes.SigNozAnonymousRoleName: {
+			{
+				ID:       valuer.GenerateUUID(),
+				Relation: authtypes.RelationRead,
+				Object: *authtypes.MustNewObject(
+					authtypes.Resource{
+						Type: authtypes.TypeMetaResource,
+						Name: dashboardtypes.TypeableMetaResourcePublicDashboard.Name(),
+					},
+					authtypes.MustNewSelector(authtypes.TypeMetaResource, "*"),
+				),
+			},
+		},
+	}
+}
+
 func (module *module) deletePublic(ctx context.Context, _ valuer.UUID, dashboardID valuer.UUID) error {
 	return module.store.DeletePublic(ctx, dashboardID.StringValue())
 }

ee/query-service/app/api/queryrange.go

@@ -6,8 +6,6 @@ import (
 	"io"
 	"net/http"
 
-	"log/slog"
-
 	"github.com/SigNoz/signoz/ee/query-service/anomaly"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
@@ -17,6 +15,7 @@ import (
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
+	"log/slog"
 )
 
 func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
@@ -138,3 +137,4 @@ func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
 		aH.QueryRangeV4(w, r)
 	}
 }
+

ee/query-service/app/server.go

@@ -42,8 +42,8 @@ import (
 
 // Server runs HTTP, Mux and a grpc server
 type Server struct {
-	config signoz.Config
-	signoz *signoz.SigNoz
+	config      signoz.Config
+	signoz      *signoz.SigNoz
 
 	// public http router
 	httpConn     net.Listener
@@ -148,7 +148,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 
 	s := &Server{
 		config:             config,
-		signoz:             signoz,
+		signoz:       signoz,
 		httpHostPort:       baseconst.HTTPHostPort,
 		unavailableChannel: make(chan healthcheck.Status),
 		usageManager:       usageManager,
@@ -317,3 +317,4 @@ func (s *Server) Stop(ctx context.Context) error {
 
 	return nil
 }
+

frontend/.oxfmtrc.json

@@ -23,11 +23,6 @@
     "**/*.md",
     "**/*.json",
     "src/parser/**",
-    "src/TraceOperator/parser/**",
-    ".claude",
-    ".opencode",
-    "dist",
-    "playwright-report",
-    ".temp_cache"
+    "src/TraceOperator/parser/**"
   ]
 }

frontend/.oxlintrc.json

@@ -289,8 +289,6 @@
     // Prevents navigator.clipboard - use useCopyToClipboard hook instead (disabled in tests via override)
     "signoz/no-raw-absolute-path": "error",
     // Prevents window.open(path), window.location.origin + path, window.location.href = path
-    "signoz/no-antd-components": "error",
-    // Prevents the usage of specific antd components in favor of our lib
     "no-restricted-globals": [
       "error",
       {

frontend/package.json

@@ -23,7 +23,8 @@
     "commitlint": "commitlint --edit $1",
     "test": "jest",
     "test:changedsince": "jest --changedSince=main --coverage --silent",
-    "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh"
+    "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh",
+    "generate:permissions-type": "node scripts/generate-permissions-type.cjs"
   },
   "engines": {
     "node": ">=22.0.0"
@@ -50,7 +51,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.1.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.14",
+    "@signozhq/ui": "0.0.12",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/plugins/rules/no-antd-components.mjs

@@ -1,66 +0,0 @@
-/**
- * Rule: no-antd-components
- *
- * Prevents importing specific components from antd.
- *
- * This rule catches patterns like:
- *   import { Typography } from 'antd'
- *   import { Typography, Button } from 'antd'
- *   import Typography from 'antd/es/typography'
- *   import { Text } from 'antd/es/typography'
- *
- * Add components to BANNED_COMPONENTS to ban them.
- * Key should be PascalCase component name, will match lowercase path too.
- */
-
-const BANNED_COMPONENTS = {
-	Typography: 'Use @signozhq/ui Typography instead of antd Typography.',
-};
-
-export default {
-	create(context) {
-		return {
-			ImportDeclaration(node) {
-				const source = node.source.value;
-
-				// Check direct antd import: import { Typography } from 'antd'
-				if (source === 'antd') {
-					for (const specifier of node.specifiers) {
-						if (specifier.type !== 'ImportSpecifier') {
-							continue;
-						}
-
-						const importedName = specifier.imported.name;
-						const message = BANNED_COMPONENTS[importedName];
-
-						if (message) {
-							context.report({
-								node: specifier,
-								message: `Do not import '${importedName}' from antd. ${message}`,
-							});
-						}
-					}
-					return;
-				}
-
-				// Check antd/es/<component> import: import Typography from 'antd/es/typography'
-				const match = source.match(/^antd\/es\/([^/]+)/);
-				if (!match) {
-					return;
-				}
-
-				const pathComponent = match[1].toLowerCase();
-
-				for (const [componentName, message] of Object.entries(BANNED_COMPONENTS)) {
-					if (pathComponent === componentName.toLowerCase()) {
-						context.report({
-							node,
-							message: `Do not import from '${source}'. ${message}`,
-						});
-						break;
-					}
-				}
-			},
-		};
-	},
-};

frontend/plugins/signoz.mjs

@@ -9,7 +9,6 @@ import noZustandGetStateInHooks from './rules/no-zustand-getstate-in-hooks.mjs';
 import noNavigatorClipboard from './rules/no-navigator-clipboard.mjs';
 import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs';
 import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
-import noAntdComponents from './rules/no-antd-components.mjs';
 
 export default {
 	meta: {
@@ -20,6 +19,5 @@ export default {
 		'no-navigator-clipboard': noNavigatorClipboard,
 		'no-unsupported-asset-pattern': noUnsupportedAssetPattern,
 		'no-raw-absolute-path': noRawAbsolutePath,
-		'no-antd-components': noAntdComponents,
 	},
 };

frontend/scripts/generate-permissions-type.cjs

@@ -0,0 +1,199 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+const axios = require('axios');
+
+const PERMISSIONS_TYPE_FILE = path.join(
+	__dirname,
+	'../src/hooks/useAuthZ/permissions.type.ts',
+);
+
+const SIGNOZ_INTEGRATION_IMAGE = 'signoz:integration';
+const LOCAL_BACKEND_URL = 'http://localhost:8080';
+
+function log(message) {
+	console.log(`[generate-permissions-type] ${message}`);
+}
+
+function getBackendUrlFromDocker() {
+	try {
+		const output = execSync(
+			`docker ps --filter "ancestor=${SIGNOZ_INTEGRATION_IMAGE}" --format "{{.Ports}}"`,
+			{ encoding: 'utf8', stdio: ['pipe', 'pipe', 'pipe'] },
+		).trim();
+
+		if (!output) {
+			return null;
+		}
+
+		const portMatch = output.match(/0\.0\.0\.0:(\d+)->8080\/tcp/);
+		if (portMatch) {
+			return `http://localhost:${portMatch[1]}`;
+		}
+
+		const ipv6Match = output.match(/:::(\d+)->8080\/tcp/);
+		if (ipv6Match) {
+			return `http://localhost:${ipv6Match[1]}`;
+		}
+	} catch (err) {
+		log(`Warning: Could not get port from docker: ${err.message}`);
+	}
+	return null;
+}
+
+async function checkBackendHealth(url, maxAttempts = 3, delayMs = 1000) {
+	for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+		try {
+			await axios.get(`${url}/api/v1/health`, {
+				timeout: 5000,
+				validateStatus: (status) => status === 200,
+			});
+			return true;
+		} catch (err) {
+			if (attempt < maxAttempts) {
+				await new Promise((r) => setTimeout(r, delayMs));
+			}
+		}
+	}
+	return false;
+}
+
+async function discoverBackendUrl() {
+	const dockerUrl = getBackendUrlFromDocker();
+	if (dockerUrl) {
+		log(`Found ${SIGNOZ_INTEGRATION_IMAGE} container, trying ${dockerUrl}...`);
+		if (await checkBackendHealth(dockerUrl)) {
+			log(`Backend found at ${dockerUrl} (from py-test-setup)`);
+			return dockerUrl;
+		}
+		log(`Backend at ${dockerUrl} is not responding`);
+	}
+
+	log(`Trying local backend at ${LOCAL_BACKEND_URL}...`);
+	if (await checkBackendHealth(LOCAL_BACKEND_URL)) {
+		log(`Backend found at ${LOCAL_BACKEND_URL}`);
+		return LOCAL_BACKEND_URL;
+	}
+
+	return null;
+}
+
+async function fetchResources(backendUrl) {
+	log('Fetching resources from API...');
+	const resourcesUrl = `${backendUrl}/api/v1/authz/resources`;
+
+	const { data: response } = await axios.get(resourcesUrl);
+
+	return response;
+}
+
+function transformResponse(apiResponse) {
+	if (!apiResponse.data) {
+		throw new Error('Invalid API response: missing data field');
+	}
+
+	const { resources, relations } = apiResponse.data;
+
+	return {
+		status: apiResponse.status || 'success',
+		data: {
+			resources: resources,
+			relations: relations,
+		},
+	};
+}
+
+function generateTypeScriptFile(data) {
+	const resourcesStr = data.data.resources
+		.map(
+			(r) =>
+				`\t\t\t{\n\t\t\t\tname: '${r.name}',\n\t\t\t\ttype: '${r.type}',\n\t\t\t},`,
+		)
+		.join('\n');
+
+	const relationsStr = Object.entries(data.data.relations)
+		.map(
+			([type, relations]) =>
+				`\t\t\t${type}: [${relations.map((r) => `'${r}'`).join(', ')}],`,
+		)
+		.join('\n');
+
+	return `// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY scripts/generate-permissions-type
+export default {
+\tstatus: '${data.status}',
+\tdata: {
+\t\tresources: [
+${resourcesStr}
+\t\t],
+\t\trelations: {
+${relationsStr}
+\t\t},
+\t},
+} as const;
+`;
+}
+
+async function main() {
+	try {
+		log('Starting permissions type generation...');
+
+		const backendUrl = await discoverBackendUrl();
+
+		if (!backendUrl) {
+			console.error('\n' + '='.repeat(80));
+			console.error('ERROR: No running SigNoz backend found!');
+			console.error('='.repeat(80));
+			console.error(
+				'\nThe permissions type generator requires a running SigNoz backend.',
+			);
+			console.error('\nFor local development, start the backend with:');
+			console.error('  make go-run-enterprise');
+			console.error(
+				'\nFor CI or integration testing, start the test environment with:',
+			);
+			console.error('  make py-test-setup');
+			console.error(
+				'\nIf running in CI and seeing this error, check that the py-test-setup',
+			);
+			console.error('step completed successfully before this step runs.');
+			console.error('='.repeat(80) + '\n');
+			process.exit(1);
+		}
+
+		log('Fetching resources...');
+		const apiResponse = await fetchResources(backendUrl);
+
+		log('Transforming response...');
+		const transformed = transformResponse(apiResponse);
+
+		log('Generating TypeScript file...');
+		const content = generateTypeScriptFile(transformed);
+
+		log(`Writing to ${PERMISSIONS_TYPE_FILE}...`);
+		fs.writeFileSync(PERMISSIONS_TYPE_FILE, content, 'utf8');
+
+		const rootDir = path.join(__dirname, '../..');
+		const relativePath = path.relative(
+			path.join(rootDir, 'frontend'),
+			PERMISSIONS_TYPE_FILE,
+		);
+		log('Linting generated file...');
+		execSync(`cd frontend && yarn oxlint ${relativePath}`, {
+			cwd: rootDir,
+			stdio: 'inherit',
+		});
+
+		log('Successfully generated permissions.type.ts');
+	} catch (error) {
+		log(`Error: ${error.message}`);
+		process.exit(1);
+	}
+}
+
+if (require.main === module) {
+	main();
+}
+
+module.exports = { main };

frontend/src/api/generated/services/authz/index.ts

@@ -4,16 +4,23 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 import type {
+	InvalidateOptions,
 	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
 	UseMutationOptions,
 	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
 } from 'react-query';
 
 import type {
 	AuthtypesTransactionDTO,
 	AuthzCheck200,
+	AuthzResources200,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
@@ -103,3 +110,88 @@ export const useAuthzCheck = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * Gets all the available resources
+ * @summary Get resources
+ */
+export const authzResources = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<AuthzResources200>({
+		url: `/api/v1/authz/resources`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getAuthzResourcesQueryKey = () => {
+	return [`/api/v1/authz/resources`] as const;
+};
+
+export const getAuthzResourcesQueryOptions = <
+	TData = Awaited<ReturnType<typeof authzResources>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof authzResources>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getAuthzResourcesQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof authzResources>>> = ({
+		signal,
+	}) => authzResources(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof authzResources>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type AuthzResourcesQueryResult = NonNullable<
+	Awaited<ReturnType<typeof authzResources>>
+>;
+export type AuthzResourcesQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get resources
+ */
+
+export function useAuthzResources<
+	TData = Awaited<ReturnType<typeof authzResources>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof authzResources>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getAuthzResourcesQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get resources
+ */
+export const invalidateAuthzResources = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getAuthzResourcesQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};

frontend/src/api/generated/services/role/index.ts

@@ -18,9 +18,9 @@ import type {
 } from 'react-query';
 
 import type {
+	AuthtypesPatchableObjectsDTO,
 	AuthtypesPatchableRoleDTO,
 	AuthtypesPostableRoleDTO,
-	CoretypesPatchableObjectsDTO,
 	CreateRole201,
 	DeleteRolePathParameters,
 	GetObjects200,
@@ -571,13 +571,13 @@ export const invalidateGetObjects = async (
  */
 export const patchObjects = (
 	{ id, relation }: PatchObjectsPathParameters,
-	coretypesPatchableObjectsDTO: BodyType<CoretypesPatchableObjectsDTO>,
+	authtypesPatchableObjectsDTO: BodyType<AuthtypesPatchableObjectsDTO>,
 ) => {
 	return GeneratedAPIInstance<string>({
 		url: `/api/v1/roles/${id}/relations/${relation}/objects`,
 		method: 'PATCH',
 		headers: { 'Content-Type': 'application/json' },
-		data: coretypesPatchableObjectsDTO,
+		data: authtypesPatchableObjectsDTO,
 	});
 };
 
@@ -590,7 +590,7 @@ export const getPatchObjectsMutationOptions = <
 		TError,
 		{
 			pathParams: PatchObjectsPathParameters;
-			data: BodyType<CoretypesPatchableObjectsDTO>;
+			data: BodyType<AuthtypesPatchableObjectsDTO>;
 		},
 		TContext
 	>;
@@ -599,7 +599,7 @@ export const getPatchObjectsMutationOptions = <
 	TError,
 	{
 		pathParams: PatchObjectsPathParameters;
-		data: BodyType<CoretypesPatchableObjectsDTO>;
+		data: BodyType<AuthtypesPatchableObjectsDTO>;
 	},
 	TContext
 > => {
@@ -616,7 +616,7 @@ export const getPatchObjectsMutationOptions = <
 		Awaited<ReturnType<typeof patchObjects>>,
 		{
 			pathParams: PatchObjectsPathParameters;
-			data: BodyType<CoretypesPatchableObjectsDTO>;
+			data: BodyType<AuthtypesPatchableObjectsDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -630,7 +630,7 @@ export const getPatchObjectsMutationOptions = <
 export type PatchObjectsMutationResult = NonNullable<
 	Awaited<ReturnType<typeof patchObjects>>
 >;
-export type PatchObjectsMutationBody = BodyType<CoretypesPatchableObjectsDTO>;
+export type PatchObjectsMutationBody = BodyType<AuthtypesPatchableObjectsDTO>;
 export type PatchObjectsMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -645,7 +645,7 @@ export const usePatchObjects = <
 		TError,
 		{
 			pathParams: PatchObjectsPathParameters;
-			data: BodyType<CoretypesPatchableObjectsDTO>;
+			data: BodyType<AuthtypesPatchableObjectsDTO>;
 		},
 		TContext
 	>;
@@ -654,7 +654,7 @@ export const usePatchObjects = <
 	TError,
 	{
 		pathParams: PatchObjectsPathParameters;
-		data: BodyType<CoretypesPatchableObjectsDTO>;
+		data: BodyType<AuthtypesPatchableObjectsDTO>;
 	},
 	TContext
 > => {

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -1668,6 +1668,33 @@ export interface AuthtypesGettableAuthDomainDTO {
 	updatedAt?: Date;
 }
 
+export interface AuthtypesGettableObjectsDTO {
+	resource: AuthtypesResourceDTO;
+	/**
+	 * @type array
+	 */
+	selectors: string[];
+}
+
+/**
+ * @nullable
+ */
+export type AuthtypesGettableResourcesDTORelations = {
+	[key: string]: string[];
+} | null;
+
+export interface AuthtypesGettableResourcesDTO {
+	/**
+	 * @type object
+	 * @nullable true
+	 */
+	relations: AuthtypesGettableResourcesDTORelations;
+	/**
+	 * @type array
+	 */
+	resources: AuthtypesResourceDTO[];
+}
+
 export interface AuthtypesGettableTokenDTO {
 	/**
 	 * @type string
@@ -1692,8 +1719,11 @@ export interface AuthtypesGettableTransactionDTO {
 	 * @type boolean
 	 */
 	authorized: boolean;
-	object: CoretypesObjectDTO;
-	relation: AuthtypesRelationDTO;
+	object: AuthtypesObjectDTO;
+	/**
+	 * @type string
+	 */
+	relation: string;
 }
 
 export type AuthtypesGoogleConfigDTODomainToAdminEmail = {
@@ -1767,6 +1797,14 @@ export interface AuthtypesOIDCConfigDTO {
 	issuerAlias?: string;
 }
 
+export interface AuthtypesObjectDTO {
+	resource: AuthtypesResourceDTO;
+	/**
+	 * @type string
+	 */
+	selector: string;
+}
+
 export interface AuthtypesOrgSessionContextDTO {
 	authNSupport?: AuthtypesAuthNSupportDTO;
 	/**
@@ -1784,6 +1822,19 @@ export interface AuthtypesPasswordAuthNSupportDTO {
 	provider?: AuthtypesAuthNProviderDTO;
 }
 
+export interface AuthtypesPatchableObjectsDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	additions: AuthtypesGettableObjectsDTO[] | null;
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	deletions: AuthtypesGettableObjectsDTO[] | null;
+}
+
 export interface AuthtypesPatchableRoleDTO {
 	/**
 	 * @type string
@@ -1832,14 +1883,17 @@ export interface AuthtypesPostableRotateTokenDTO {
 	refreshToken?: string;
 }
 
-export enum AuthtypesRelationDTO {
-	create = 'create',
-	read = 'read',
-	update = 'update',
-	delete = 'delete',
-	list = 'list',
-	assignee = 'assignee',
+export interface AuthtypesResourceDTO {
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	type: string;
 }
+
 export interface AuthtypesRoleDTO {
 	/**
 	 * @type string
@@ -1929,8 +1983,11 @@ export interface AuthtypesSessionContextDTO {
 }
 
 export interface AuthtypesTransactionDTO {
-	object: CoretypesObjectDTO;
-	relation: AuthtypesRelationDTO;
+	object: AuthtypesObjectDTO;
+	/**
+	 * @type string
+	 */
+	relation: string;
 }
 
 export interface AuthtypesUpdatableAuthDomainDTO {
@@ -4116,52 +4173,6 @@ export interface ConfigWechatConfigDTO {
 	to_user?: string;
 }
 
-export interface CoretypesObjectDTO {
-	resource: CoretypesResourceRefDTO;
-	/**
-	 * @type string
-	 */
-	selector: string;
-}
-
-export interface CoretypesObjectGroupDTO {
-	resource: CoretypesResourceRefDTO;
-	/**
-	 * @type array
-	 */
-	selectors: string[];
-}
-
-export interface CoretypesPatchableObjectsDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	additions: CoretypesObjectGroupDTO[] | null;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	deletions: CoretypesObjectGroupDTO[] | null;
-}
-
-export interface CoretypesResourceRefDTO {
-	/**
-	 * @type string
-	 */
-	kind: string;
-	type: CoretypesTypeDTO;
-}
-
-export enum CoretypesTypeDTO {
-	user = 'user',
-	serviceaccount = 'serviceaccount',
-	anonymous = 'anonymous',
-	role = 'role',
-	organization = 'organization',
-	metaresource = 'metaresource',
-	metaresources = 'metaresources',
-}
 export interface DashboardtypesDashboardDTO {
 	/**
 	 * @type string
@@ -7703,11 +7714,6 @@ export interface TracedetailtypesWaterfallSpanDTO {
 	 * @minimum 0
 	 */
 	sub_tree_node_count?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	time_unix?: number;
 	/**
 	 * @type string
 	 */
@@ -8099,6 +8105,14 @@ export type AuthzCheck200 = {
 	status: string;
 };
 
+export type AuthzResources200 = {
+	data: AuthtypesGettableResourcesDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListChannels200 = {
 	/**
 	 * @type array
@@ -8724,7 +8738,7 @@ export type GetObjects200 = {
 	/**
 	 * @type array
 	 */
-	data: CoretypesObjectGroupDTO[];
+	data: AuthtypesGettableObjectsDTO[];
 	/**
 	 * @type string
 	 */

frontend/src/components/AppLoading/AppLoading.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 import get from 'api/browser/localstorage/get';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { THEME_MODE } from 'hooks/useDarkMode/constant';

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -14,8 +14,8 @@ import {
 	TableColumnsType,
 	TableColumnType,
 	Tooltip,
+	Typography,
 } from 'antd';
-import { Typography } from '@signozhq/ui';
 import type { FilterDropdownProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import {

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -1,6 +1,5 @@
 import { useHistory, useLocation } from 'react-router-dom';
-import { Select, Spin } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Select, Spin, Typography } from 'antd';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { Color, Spacing } from '@signozhq/design-tokens';
-import { Divider, Drawer } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Divider, Drawer, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -1,8 +1,7 @@
 import { useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { Card } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Card, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { CardContainer } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Modal, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -554,11 +554,10 @@ function ClientSideQBSearch(
 				>
 					<Tooltip title={chipValue}>
 						<TypographyText
-							role="button"
-							tabIndex={0}
+							ellipsis
 							$isInNin={isInNin}
+							disabled={isDisabled}
 							$isEnabled={!!searchValue}
-							$disabled={isDisabled}
 							onClick={(): void => {
 								if (!isDisabled) {
 									tagEditHandler(value);

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Button, Popover, Radio, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Popover, Radio, Tooltip, Typography } from 'antd';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
 import { Download, DownloadIcon, Loader2 } from 'lucide-react';

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -15,8 +15,8 @@ import {
 	Row,
 	Select,
 	Space,
+	Typography,
 } from 'antd';
-import { Typography } from '@signozhq/ui';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -1,7 +1,6 @@
 import { MouseEvent, useCallback } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
-import { Col, Row, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Col, Row, Tooltip, Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
@@ -82,7 +81,7 @@ function MenuItemGenerator({
 						</Tooltip>
 					</Row>
 					<Row>
-						<Typography.Text color="muted">Created by {createdBy}</Typography.Text>
+						<Typography.Text type="secondary">Created by {createdBy}</Typography.Text>
 					</Row>
 				</Col>
 				<Col span={2}>

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { Card, Form, Input } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Card, Form, Input, Typography } from 'antd';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSaveView } from 'hooks/saveViews/useSaveView';

frontend/src/components/GuardAuthZ/GuardAuthZ.test.tsx

@@ -55,7 +55,7 @@ describe('GuardAuthZ', () => {
 		);
 
 		render(
-			<GuardAuthZ relation="read" object="role:*">
+			<GuardAuthZ relation="read" object="dashboard:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -79,7 +79,7 @@ describe('GuardAuthZ', () => {
 		render(
 			<GuardAuthZ
 				relation="read"
-				object="role:*"
+				object="dashboard:*"
 				fallbackOnLoading={<LoadingFallback />}
 			>
 				<TestChild />
@@ -102,7 +102,7 @@ describe('GuardAuthZ', () => {
 		);
 
 		const { container } = render(
-			<GuardAuthZ relation="read" object="role:*">
+			<GuardAuthZ relation="read" object="dashboard:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -121,7 +121,11 @@ describe('GuardAuthZ', () => {
 		);
 
 		render(
-			<GuardAuthZ relation="read" object="role:*" fallbackOnError={ErrorFallback}>
+			<GuardAuthZ
+				relation="read"
+				object="dashboard:*"
+				fallbackOnError={ErrorFallback}
+			>
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -151,7 +155,7 @@ describe('GuardAuthZ', () => {
 		render(
 			<GuardAuthZ
 				relation="read"
-				object="role:*"
+				object="dashboard:*"
 				fallbackOnError={errorFallbackWithCapture}
 			>
 				<TestChild />
@@ -174,7 +178,7 @@ describe('GuardAuthZ', () => {
 		);
 
 		const { container } = render(
-			<GuardAuthZ relation="read" object="role:*">
+			<GuardAuthZ relation="read" object="dashboard:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -197,7 +201,7 @@ describe('GuardAuthZ', () => {
 		render(
 			<GuardAuthZ
 				relation="update"
-				object="role:123"
+				object="dashboard:123"
 				fallbackOnNoPermissions={NoPermissionFallback}
 			>
 				<TestChild />
@@ -220,7 +224,7 @@ describe('GuardAuthZ', () => {
 		);
 
 		const { container } = render(
-			<GuardAuthZ relation="update" object="role:123">
+			<GuardAuthZ relation="update" object="dashboard:123">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -240,7 +244,7 @@ describe('GuardAuthZ', () => {
 		);
 
 		const { container } = render(
-			<GuardAuthZ relation="read" object="role:*">
+			<GuardAuthZ relation="read" object="dashboard:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -253,7 +257,7 @@ describe('GuardAuthZ', () => {
 	});
 
 	it('should pass requiredPermissionName to fallbackOnNoPermissions', async () => {
-		const permission = buildPermission('update', 'role:123');
+		const permission = buildPermission('update', 'dashboard:123');
 
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
@@ -265,7 +269,7 @@ describe('GuardAuthZ', () => {
 		render(
 			<GuardAuthZ
 				relation="update"
-				object="role:123"
+				object="dashboard:123"
 				fallbackOnNoPermissions={NoPermissionFallbackWithSuggestions}
 			>
 				<TestChild />
@@ -295,7 +299,7 @@ describe('GuardAuthZ', () => {
 		);
 
 		const { rerender } = render(
-			<GuardAuthZ relation="read" object="role:*">
+			<GuardAuthZ relation="read" object="dashboard:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -305,7 +309,7 @@ describe('GuardAuthZ', () => {
 		});
 
 		rerender(
-			<GuardAuthZ relation="delete" object="role:456">
+			<GuardAuthZ relation="delete" object="dashboard:456">
 				<TestChild />
 			</GuardAuthZ>,
 		);

frontend/src/components/HeaderRightSection/AnnouncementsModal.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 
 function AnnouncementsModal(): JSX.Element {
 	return (

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui';
-import { Button, Input, Radio, RadioChangeEvent } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Input, Radio, RadioChangeEvent, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -136,14 +135,12 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 				<div className="feedback-modal-content-footer-info-text">
 					<Typography.Text>
 						Have a specific issue?{' '}
-						<a
-							role="button"
-							tabIndex={0}
+						<Typography.Link
 							className="contact-support-link"
 							onClick={handleContactSupportClick}
 						>
 							Contact Support{' '}
-						</a>
+						</Typography.Link>
 						or{' '}
 						<a
 							href="https://signoz.io/docs/introduction/"

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -4,8 +4,7 @@ import { useSelector } from 'react-redux';
 import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Switch } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Switch, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';

frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Color } from '@signozhq/design-tokens';
-import { Button } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';
 import { CheckCircle2, HandPlatter } from 'lucide-react';

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { Button, Input } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Input, Typography } from 'antd';
 import cx from 'classnames';
 import { X } from 'lucide-react';
 

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,8 +1,7 @@
 import { useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Modal, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import cx from 'classnames';

frontend/src/components/LogDetail/index.tsx

@@ -4,8 +4,7 @@ import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui';
-import { Divider, Drawer, Radio, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
 import type { RadioChangeEvent } from 'antd/lib';
 import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
@@ -588,7 +587,7 @@ function LogDetailInner({
 					<div className="log-detail-drawer__footer-hint">
 						<div className="log-detail-drawer__footer-hint-content">
 							<Typography.Text
-								color="muted"
+								type="secondary"
 								className="log-detail-drawer__footer-hint-text"
 							>
 								Use
@@ -597,7 +596,7 @@ function LogDetailInner({
 							<span>/</span>
 							<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
 							<Typography.Text
-								color="muted"
+								type="secondary"
 								className="log-detail-drawer__footer-hint-text"
 							>
 								to view previous/next log

frontend/src/components/Logs/CategoryHeading/index.tsx

@@ -6,7 +6,7 @@ interface ICategoryHeadingProps {
 	children: ReactNode;
 }
 function CategoryHeading({ children }: ICategoryHeadingProps): JSX.Element {
-	return <CategoryHeadingText color="muted">{children}</CategoryHeadingText>;
+	return <CategoryHeadingText type="secondary">{children}</CategoryHeadingText>;
 }
 
 export default CategoryHeading;

frontend/src/components/Logs/CategoryHeading/styles.ts

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 import styled from 'styled-components';
 
 export const CategoryHeadingText = styled(Typography.Text)`

frontend/src/components/Logs/ListLogView/index.tsx

@@ -1,6 +1,6 @@
 import { memo, useCallback, useMemo } from 'react';
 import { blue } from '@ant-design/colors';
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 import cx from 'classnames';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -89,7 +89,7 @@ function LogSelectedField({
 					</span>
 				</Typography.Text>
 			</AddToQueryHOC>
-			<Typography.Text truncate={1} className={cx('selected-log-kv', fontSize)}>
+			<Typography.Text ellipsis className={cx('selected-log-kv', fontSize)}>
 				<span className={cx('selected-log-field-key', fontSize)}>{': '}</span>
 				<span className={cx('selected-log-value', fontSize)}>
 					{fieldValue || "''"}

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Input, InputNumber, Popover, Tooltip, Typography } from 'antd';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -1,8 +1,15 @@
-import { Typography } from '@signozhq/ui';
 import { ReactNode, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { CaretDownOutlined, LoadingOutlined } from '@ant-design/icons';
-import { Modal, Select, Spin, Tooltip, Tree, TreeDataNode } from 'antd';
+import {
+	Modal,
+	Select,
+	Spin,
+	Tooltip,
+	Tree,
+	TreeDataNode,
+	Typography,
+} from 'antd';
 import { OnboardingStatusResponse } from 'api/messagingQueues/onboarding/getOnboardingStatus';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -77,11 +84,9 @@ function ErrorTitleAndKey({
 		key: `${title}-key-${uuid()}`,
 		title: (
 			<div className="attribute-error-title">
-				<Tooltip title={title}>
-					<Typography.Text className="tree-text" truncate={1}>
-						{title}
-					</Typography.Text>
-				</Tooltip>
+				<Typography.Text className="tree-text" ellipsis={{ tooltip: title }}>
+					{title}
+				</Typography.Text>
 				<Tooltip title={errorMsg}>
 					<div
 						className="attribute-error-warning"
@@ -120,11 +125,9 @@ function treeTitleAndKey({
 		key: `${title}-key-${uuid()}`,
 		title: (
 			<div className="attribute-success-title">
-				<Tooltip title={title}>
-					<Typography.Text className="tree-text" truncate={1}>
-						{title}
-					</Typography.Text>
-				</Tooltip>
+				<Typography.Text className="tree-text" ellipsis={{ tooltip: title }}>
+					{title}
+				</Typography.Text>
 				{isLeaf && (
 					<div className="success-attribute-icon">
 						<Tooltip title="Success">

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -13,8 +13,7 @@ import {
 	ReloadOutlined,
 } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Checkbox, Select } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Checkbox, Select, Typography } from 'antd';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -756,7 +755,15 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						}}
 					>
 						<div className="option-content">
-							<Typography.Text truncate={1} className="option-label-text">
+							<Typography.Text
+								ellipsis={{
+									tooltip: {
+										placement: 'right',
+										autoAdjustOverflow: true,
+									},
+								}}
+								className="option-label-text"
+							>
 								{highlightMatchedText(String(option.label || ''), searchText)}
 							</Typography.Text>
 							{(option.type === 'custom' || option.type === 'regex') && (

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Button, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Tooltip, Typography } from 'antd';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
-import { Button, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Tooltip, Typography } from 'antd';
 import cx from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';

frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
 
 import styles from './QueryCancelledPlaceholder.module.scss';

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Button, Checkbox, Input, Skeleton } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Checkbox, Input, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
 import {
@@ -575,9 +574,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 				</section>
 				<section className="right-action">
 					{isOpen && !!attributeValues.length && (
-						<span
-							role="button"
-							tabIndex={0}
+						<Typography.Text
 							className="clear-all"
 							onClick={(e): void => {
 								e.stopPropagation();
@@ -586,7 +583,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 							}}
 						>
 							Clear All
-						</span>
+						</Typography.Text>
 					)}
 				</section>
 			</section>
@@ -643,7 +640,16 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 											{filter.customRendererForValue ? (
 												filter.customRendererForValue(value)
 											) : (
-												<Typography.Text className="value-string" truncate={1}>
+												<Typography.Text
+													className="value-string"
+													ellipsis={{
+														tooltip: {
+															placement: 'top',
+															mouseEnterDelay: 0.2,
+															mouseLeaveDelay: 0,
+														},
+													}}
+												>
 													{String(value)}
 												</Typography.Text>
 											)}
@@ -671,14 +677,12 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					)}
 					{visibleItemsCount < attributeValues?.length && (
 						<section className="show-more">
-							<span
-								role="button"
-								tabIndex={0}
+							<Typography.Text
 								className="show-more-text"
 								onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
 							>
 								Show More...
-							</span>
+							</Typography.Text>
 						</section>
 					)}
 				</>

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -12,8 +12,7 @@ import {
 	ComboboxList,
 	ComboboxTrigger,
 } from '@signozhq/ui';
-import { Skeleton, Switch, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Skeleton, Switch, Tooltip, Typography } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';

frontend/src/components/ResizeTable/TableComponent/DateComponent.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 
 import Time from './Time';
 

frontend/src/components/ResizeTable/TableComponent/Time.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { useTimezone } from 'providers/Timezone';
 

frontend/src/components/SpanHoverCard/SpanHoverCard.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
-import { Popover } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Popover, Typography } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
 import dayjs from 'dayjs';

frontend/src/components/Styled/index.ts

@@ -11,12 +11,10 @@ import {
 	Space,
 	SpaceProps,
 	TabsProps,
-} from 'antd';
-import {
 	Typography,
-	TypographyTextProps,
-	TypographyTitleProps,
-} from '@signozhq/ui';
+} from 'antd';
+import type { TextProps } from 'antd/lib/typography/Text';
+import type { TitleProps } from 'antd/lib/typography/Title';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
 import { IStyledClass } from './types';
@@ -55,13 +53,13 @@ const StyledButton = styled(Button)<TStyledButton>`
 `;
 
 const { Text } = Typography;
-type TStyledTypographyText = TypographyTextProps & IStyledClass;
+type TStyledTypographyText = TextProps & IStyledClass;
 const StyledTypographyText = styled(Text)<TStyledTypographyText>`
 	${styledClass}
 `;
 
 const { Title } = Typography;
-type TStyledTypographyTitle = TypographyTitleProps & IStyledClass;
+type TStyledTypographyTitle = TitleProps & IStyledClass;
 const StyledTypographyTitle = styled(Title)<TStyledTypographyTitle>`
 	${styledClass}
 `;

frontend/src/components/TimePreferenceDropDown/config.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 import { timeItems } from 'container/NewWidget/RightContainer/timeItems';
 
 export const menuItems = timeItems.map((item) => ({

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { DownOutlined } from '@ant-design/icons';
-import { Button, Dropdown } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Dropdown, Typography } from 'antd';
 import TimeItems, {
 	timePreferance,
 	timePreferenceType,

frontend/src/components/Uplot/Uplot.tsx

@@ -8,7 +8,7 @@ import {
 	useRef,
 } from 'react';
 import * as Sentry from '@sentry/react';
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 import { ToggleGraphProps } from 'components/Graph/types';
 import { LineChart } from 'lucide-react';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';

frontend/src/components/ValueGraph/index.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ExclamationCircleFilled } from '@ant-design/icons';
-import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Tooltip, Typography } from 'antd';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
 import { getBackgroundColorAndThresholdCheck } from './utils';

frontend/src/components/createGuardedRoute/createGuardedRoute.test.tsx

@@ -41,7 +41,11 @@ describe('createGuardedRoute', () => {
 			}),
 		);
 
-		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'read',
+			'dashboard:*',
+		);
 
 		const mockMatch = {
 			params: {},
@@ -75,7 +79,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'read',
-			'role:{id}',
+			'dashboard:{id}',
 		);
 
 		const mockMatch = {
@@ -109,7 +113,7 @@ describe('createGuardedRoute', () => {
 						relation: txn.relation,
 						object: {
 							resource: {
-								kind: txn.object.resource.kind,
+								name: txn.object.resource.name,
 								type: txn.object.resource.type,
 							},
 							selector: '123:456',
@@ -127,7 +131,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'update',
-			'role:{id}:{version}',
+			'dashboard:{id}:{version}',
 		);
 
 		const mockMatch = {
@@ -162,7 +166,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'read',
-			'role:{id}',
+			'dashboard:{id}',
 		);
 
 		const mockMatch = {
@@ -197,7 +201,11 @@ describe('createGuardedRoute', () => {
 			}),
 		);
 
-		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'read',
+			'dashboard:*',
+		);
 
 		const mockMatch = {
 			params: {},
@@ -228,7 +236,11 @@ describe('createGuardedRoute', () => {
 			}),
 		);
 
-		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'read',
+			'dashboard:*',
+		);
 
 		const mockMatch = {
 			params: {},
@@ -266,7 +278,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'update',
-			'role:{id}',
+			'dashboard:{id}',
 		);
 
 		const mockMatch = {
@@ -292,7 +304,7 @@ describe('createGuardedRoute', () => {
 		});
 
 		expect(screen.getByText('update')).toBeInTheDocument();
-		expect(screen.getByText('role:123')).toBeInTheDocument();
+		expect(screen.getByText('dashboard:123')).toBeInTheDocument();
 		expect(
 			screen.queryByText('Test Component: test-value'),
 		).not.toBeInTheDocument();
@@ -323,7 +335,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			ComponentWithMultipleProps,
 			'read',
-			'role:*',
+			'dashboard:*',
 		);
 
 		const mockMatch = {
@@ -358,10 +370,10 @@ describe('createGuardedRoute', () => {
 				requestCount++;
 				const payload = (await req.json()) as AuthtypesTransactionDTO[];
 				const obj = payload[0]?.object;
-				const kind = obj?.resource?.kind;
+				const name = obj?.resource?.name;
 				const selector = obj?.selector ?? '*';
 				const objectStr =
-					obj?.resource?.type === 'metaresources' ? kind : `${kind}:${selector}`;
+					obj?.resource?.type === 'metaresources' ? name : `${name}:${selector}`;
 				requestedObjects.push(objectStr ?? '');
 
 				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
@@ -371,7 +383,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'read',
-			'role:{id}',
+			'dashboard:{id}',
 		);
 
 		const mockMatch1 = {
@@ -395,7 +407,7 @@ describe('createGuardedRoute', () => {
 		});
 
 		expect(requestCount).toBe(1);
-		expect(requestedObjects).toContain('role:123');
+		expect(requestedObjects).toContain('dashboard:123');
 
 		unmount();
 
@@ -420,7 +432,7 @@ describe('createGuardedRoute', () => {
 		});
 
 		expect(requestCount).toBe(2);
-		expect(requestedObjects).toContain('role:456');
+		expect(requestedObjects).toContain('dashboard:456');
 	});
 
 	it('should handle different relation types', async () => {
@@ -434,7 +446,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'delete',
-			'role:{id}',
+			'dashboard:{id}',
 		);
 
 		const mockMatch = {

frontend/src/container/AllAlertChannels/index.tsx

@@ -2,8 +2,7 @@ import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { PlusOutlined } from '@ant-design/icons';
-import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Tooltip, Typography } from 'antd';
 import getAll from 'api/channels/getAll';
 import logEvent from 'api/common/logEvent';
 import Spinner from 'components/Spinner';
@@ -22,7 +21,7 @@ import { Button, ButtonContainer, RightActionContainer } from './styles';
 
 import './AllAlertChannels.styles.scss';
 
-const { Text } = Typography;
+const { Paragraph } = Typography;
 
 function AlertChannels(): JSX.Element {
 	const { t } = useTranslation(['channels']);
@@ -61,9 +60,9 @@ function AlertChannels(): JSX.Element {
 	return (
 		<div className="alert-channels-container">
 			<ButtonContainer>
-				<Text truncate={1} color="muted">
+				<Paragraph ellipsis type="secondary">
 					{t('sending_channels_note')}
-				</Text>
+				</Paragraph>
 
 				<RightActionContainer>
 					<TextToolTip

frontend/src/container/AllError/index.tsx

@@ -1,4 +1,3 @@
-import { Typography } from '@signozhq/ui';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';
@@ -6,7 +5,15 @@ import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
 import { Link, useLocation } from 'react-router-dom';
 import { SearchOutlined } from '@ant-design/icons';
-import { Button, Card, Input, Space, TableProps, Tooltip } from 'antd';
+import {
+	Button,
+	Card,
+	Input,
+	Space,
+	TableProps,
+	Tooltip,
+	Typography,
+} from 'antd';
 import type { ColumnType, TablePaginationConfig } from 'antd/es/table';
 import type { FilterValue, SorterResult } from 'antd/es/table/interface';
 import type { ColumnsType } from 'antd/lib/table';
@@ -353,7 +360,13 @@ function AllErrors(): JSX.Element {
 			width: 100,
 			render: (value): JSX.Element => (
 				<Tooltip overlay={(): JSX.Element => value}>
-					<Typography.Text truncate={2}>{value}</Typography.Text>
+					<Typography.Paragraph
+						ellipsis={{
+							rows: 2,
+						}}
+					>
+						{value}
+					</Typography.Paragraph>
 				</Tooltip>
 			),
 		},

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { Checkbox, Input } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Checkbox, Input, Typography } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useResizeObserver } from 'hooks/useDimensions';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.tsx

@@ -2,8 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Spacing } from '@signozhq/design-tokens';
-import { Button, Divider, Drawer, Radio } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Divider, Drawer, Radio, Typography } from 'antd';
 import type { RadioChangeEvent } from 'antd/lib';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -1,8 +1,7 @@
 import { useMemo, useState } from 'react';
 import { QueryFunctionContext, useQueries, useQuery } from 'react-query';
 import { LoadingOutlined } from '@ant-design/icons';
-import { Spin, Switch, Table, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Spin, Switch, Table, Tooltip, Typography } from 'antd';
 import { getQueryRangeV5 } from 'api/v5/queryRange/getQueryRange';
 import { MetricRangePayloadV5, ScalarData } from 'api/v5/v5';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx

@@ -1,7 +1,6 @@
 import { useMemo, useState } from 'react';
 import { UseQueryResult } from 'react-query';
-import { Skeleton, Table, TablePaginationConfig } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Skeleton, Table, TablePaginationConfig, Typography } from 'antd';
 import { QueryParams } from 'constants/query';
 import {
 	dependentServicesColumns,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.tsx

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 import { useQueries } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Skeleton, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Progress, Skeleton, Tooltip, Typography } from 'antd';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import {
@@ -88,16 +87,28 @@ function DomainMetrics({
 		<div className="domain-detail-drawer__endpoint">
 			<div className="domain-details-grid">
 				<div className="labels-row">
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						EXTERNAL API
 					</Typography.Text>
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						AVERAGE LATENCY
 					</Typography.Text>
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						ERROR %
 					</Typography.Text>
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						LAST USED
 					</Typography.Text>
 				</div>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointMetrics.tsx

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Skeleton, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Progress, Skeleton, Tooltip, Typography } from 'antd';
 import {
 	getDisplayValue,
 	getFormattedEndPointMetricsData,
@@ -38,16 +37,28 @@ function EndPointMetrics({
 		<div className="domain-detail-drawer__endpoint">
 			<div className="domain-details-grid">
 				<div className="labels-row">
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						Rate
 					</Typography.Text>
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						AVERAGE LATENCY
 					</Typography.Text>
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						ERROR %
 					</Typography.Text>
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						LAST USED
 					</Typography.Text>
 				</div>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/ErrorState.tsx

@@ -1,5 +1,4 @@
-import { Button } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Typography } from 'antd';
 import { RotateCw } from 'lucide-react';
 
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
@@ -14,7 +13,7 @@ function ErrorState({ refetch }: { refetch: () => void }): JSX.Element {
 					</div>
 					<div className="error-state-text">
 						<Typography.Text>Uh-oh :/ We ran into an error.</Typography.Text>
-						<Typography.Text color="muted">
+						<Typography.Text type="secondary">
 							Please refresh this panel.
 						</Typography.Text>
 					</div>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Card, Skeleton } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Card, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
 import {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeTable.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
-import { Table } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Table, Typography } from 'antd';
 import {
 	endPointStatusCodeColumns,
 	getFormattedEndPointStatusCodeData,

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -1,4 +1,3 @@
-import { Typography } from '@signozhq/ui';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
@@ -15,6 +14,7 @@ import {
 	Table,
 	TableColumnsType as ColumnsType,
 	Tag,
+	Typography,
 } from 'antd';
 import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
@@ -362,19 +362,15 @@ export default function BillingContainer(): JSX.Element {
 		[apiResponse, billAmount, isLoading, isFetchingBillingData],
 	);
 
+	const { Text } = Typography;
 	const subscriptionPastDueMessage = (): JSX.Element => (
 		<Typography>
 			{`We were not able to process payments for your account. Please update your card details `}
-			<a
-				role="button"
-				tabIndex={0}
-				onClick={handleBilling}
-				style={{ cursor: 'pointer', color: 'var(--bg-cherry-500)' }}
-			>
+			<Text type="danger" onClick={handleBilling} style={{ cursor: 'pointer' }}>
 				{t('here')}
-			</a>
+			</Text>
 			{` if your payment information has changed. Email us at `}
-			<Typography.Text color="muted">cloud-support@signoz.io</Typography.Text>
+			<Text type="secondary">cloud-support@signoz.io</Text>
 			{` otherwise. Be sure to provide this information immediately to avoid interruption to your service.`}
 		</Typography>
 	);
@@ -422,7 +418,7 @@ export default function BillingContainer(): JSX.Element {
 				<Typography.Text style={{ fontWeight: 500, fontSize: 18 }}>
 					{t('billing')}
 				</Typography.Text>
-				<Typography.Text color="muted">
+				<Typography.Text color={Color.BG_VANILLA_400}>
 					{t('manage_billing_and_costs')}
 				</Typography.Text>
 			</Flex>
@@ -476,7 +472,7 @@ export default function BillingContainer(): JSX.Element {
 
 				{trialInfo?.onTrial && trialInfo?.trialConvertedToSubscription && (
 					<Typography.Text
-						truncate={1}
+						ellipsis
 						style={{ fontWeight: '300', color: 'var(--bg-forest-500)', fontSize: 12 }}
 					>
 						{t('card_details_recieved_and_billing_info')}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx

@@ -1,7 +1,6 @@
 import { useMemo, useRef } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Card, Flex } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Card, Flex, Typography } from 'antd';
 import Uplot from 'components/Uplot';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -209,7 +208,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 					<Typography.Text className="total-spent-title">
 						TOTAL SPENT
 					</Typography.Text>
-					<Typography.Text className="total-spent">
+					<Typography.Text color={Color.BG_VANILLA_100} className="total-spent">
 						${numberFormatter.format(billAmount)}
 					</Typography.Text>
 				</Flex>

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Row, Tag } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Row, Tag, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
 import { FeatureKeys } from 'constants/features';
@@ -79,9 +78,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 						data-testid={`alert-type-card-${option.selection}`}
 					>
 						{option.description}{' '}
-						<a
-							role="button"
-							tabIndex={0}
+						<Typography.Link
 							onClick={(e): void => {
 								e.preventDefault();
 								e.stopPropagation();
@@ -89,7 +86,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 							}}
 						>
 							Click here to see how to create a sample alert.
-						</a>{' '}
+						</Typography.Link>{' '}
 					</AlertTypeCard>
 				))}
 			</>

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

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
-import { Button, Select, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Select, Tooltip, Typography } from 'antd';
 import classNames from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import getRandomColor from 'lib/getRandomColor';

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

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Select } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Select, Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useAppContext } from 'providers/App/App';
 

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

@@ -1,6 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Button, Input, Select, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Input, Select, Tooltip, Typography } from 'antd';
 import { CircleX, Trash } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 

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

@@ -1,5 +1,4 @@
-import { Button, Flex, SelectProps, Switch } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Flex, SelectProps, Switch, Typography } from 'antd';
 import type { BaseOptionType, DefaultOptionType } from 'antd/es/select';
 import { getInvolvedQueriesInTraceOperator } from 'components/QueryBuilderV2/QueryV2/TraceOperator/utils/utils';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/AdvancedOptionItem.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Switch, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Switch, Tooltip, Typography } from 'antd';
 import { Info } from 'lucide-react';
 
 import { IAdvancedOptionItemProps } from '../types';

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx

@@ -1,5 +1,4 @@
-import { Collapse, Input } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Collapse, Input, Typography } from 'antd';
 
 import { useCreateAlertState } from '../context';
 import AdvancedOptionItem from './AdvancedOptionItem';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EditCustomSchedule.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Button } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Typography } from 'antd';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
 import { IEditCustomScheduleProps } from 'container/CreateAlertV2/EvaluationSettings/types';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadence.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Input, Select, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Input, Select, Tooltip, Typography } from 'antd';
 import { Info } from 'lucide-react';
 
 import { useCreateAlertState } from '../../context';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadenceDetails.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Button, DatePicker, Input, Select } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, DatePicker, Input, Select, Typography } from 'antd';
 import classNames from 'classnames';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import { AdvancedOptionsState } from 'container/CreateAlertV2/context/types';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadencePreview.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Modal } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Modal, Typography } from 'antd';
 import { Calendar, Info } from 'lucide-react';
 
 import { useCreateAlertState } from '../../context';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Input, Select } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Input, Select, Typography } from 'antd';
 
 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';
 import {

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx

@@ -1,5 +1,4 @@
-import { Button } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Typography } from 'antd';
 import classNames from 'classnames';
 import { Check } from 'lucide-react';
 

frontend/src/container/CreateAlertV2/NotificationSettings/MultipleNotifications.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { Select, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Select, Tooltip, Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Info } from 'lucide-react';
 
@@ -99,9 +98,9 @@ function MultipleNotifications(): JSX.Element {
 					data-testid="multiple-notifications-select"
 				/>
 				{isMultipleNotificationsEnabled && (
-					<Typography.Text className="multiple-notifications-select-description">
+					<Typography.Paragraph className="multiple-notifications-select-description">
 						{groupByDescription}
-					</Typography.Text>
+					</Typography.Paragraph>
 				)}
 			</div>
 		);

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationMessage.tsx

@@ -1,5 +1,4 @@
-import { Input, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Input, Tooltip, Typography } from 'antd';
 import { Info } from 'lucide-react';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx

@@ -1,5 +1,4 @@
-import { Input, Select } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Input, Select, Typography } from 'antd';
 
 import { useCreateAlertState } from '../context';
 import {

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -177,7 +177,11 @@ export default function CustomDomainSettings(): JSX.Element {
 	if (isLoadingHosts) {
 		return (
 			<div className="custom-domain-card custom-domain-card--loading">
-				<Skeleton active paragraph={{ rows: 1, width: '60%' }} />
+				<Skeleton
+					active
+					title={{ width: '40%' }}
+					paragraph={{ rows: 1, width: '60%' }}
+				/>
 			</div>
 		);
 	}

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -4,8 +4,16 @@ import { Layout } from 'react-grid-layout';
 import { useTranslation } from 'react-i18next';
 import { useCopyToClipboard } from 'react-use';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import {
+	Button,
+	Card,
+	Input,
+	Modal,
+	Popover,
+	Tag,
+	Tooltip,
+	Typography,
+} from 'antd';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';