feat: enhance mapping dialog UI with team filtering and improved styling by pdt-rmunoz · Pull Request #139 · PagerDuty/backstage-plugins

pdt-rmunoz · 2026-02-25T00:46:16Z

Description

This commit adds comprehensive improvements to the mapping dialog:

Backend changes:

Add getAllTeams endpoint to fetch all PagerDuty teams
Add getFilteredServices endpoint with team_id and query filters
Add PagerDutyTeam type to common types

Frontend changes:

Add team filtering dropdown to filter services by PagerDuty team
Add service search with debounced input
Replace read-only text displays with TextField components for visual consistency
Add border container styling to RadioGroup matching TextField appearance
Add enhanced radio button styling with interactive states

Issue number:
https://pagerduty.atlassian.net/browse/DEVECO-527

Affected plugin

backstage-plugin
backstage-plugin-backend
backstage-plugin-scaffolder-actions
backstage-plugin-entity-processor

Type of change

New feature (non-breaking change which adds functionality)
Fix (non-breaking change which fixes an issue)
Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

I have performed a self-review of this change
Changes have been tested
Changes have been tested in dark theme
Changes are documented
Changes generate no new warnings
PR title follows conventional commit semantics

If this is a breaking change 👇

I have documented the migration process
I have implemented necessary warnings (if it can live side by side)

Acknowledgement

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

Disclaimer: We value your time and bandwidth. As such, any pull requests created on non-triaged issues might not be successful.

This commit adds comprehensive improvements to the mapping dialog: Backend changes: - Add getAllTeams endpoint to fetch all PagerDuty teams - Add getFilteredServices endpoint with team_id and query filters - Add PagerDutyTeam type to common types Frontend changes: - Add team filtering dropdown to filter services by PagerDuty team - Add service search with debounced input (500ms) - Replace read-only text displays with TextField components for visual consistency - Add border container styling to RadioGroup matching TextField appearance - Add enhanced radio button styling with interactive states Radio button improvements: - Individual padding on each option (12px all sides) - Bottom border dividers between options - Hover effect with gray background - Selected state with blue background, bold text, and 3px left accent bar 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

sandornagy517

great job! just left some small comments

sandornagy517 · 2026-02-25T13:45:08Z

plugins/backstage-plugin-backend/src/apis/pagerduty.ts

+    Object.keys(EndpointConfig).map(async account => {
+      try {
+        // reset offset value
+        offset = 0;


these comments are a bit redundant, could you please remove them?

sandornagy517 · 2026-02-25T13:45:22Z

plugins/backstage-plugin-backend/src/apis/pagerduty.ts

+      let params = `time_zone=UTC&limit=${limit}`;
+
+      // Add team_ids filter if provided
+      if (teamIds && teamIds.length > 0) {


same for the comments here

sandornagy517 · 2026-02-25T13:46:01Z

plugins/backstage-plugin/src/components/PagerDutyPage/MappingsDialog.tsx

+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState<string>('');

+  // Debounce search query (wait 500ms after user stops typing)


same for the comments

sandornagy517 · 2026-02-25T13:47:47Z

plugins/backstage-plugin/src/components/PagerDutyPage/MappingsDialog.tsx

-        <Flex>
-          <Text variant="body-medium" weight="regular">
-            Name:
+        <style>


we should use makeStyles and useStyles for these

Added import { makeStyles } from '@material-ui/core'
Created useStyles hook with nested selectors

sandornagy517 · 2026-02-25T13:48:11Z

plugins/backstage-plugin/src/components/PagerDutyPage/MappingsDialog.tsx

+          <>
+            <Box
+              className="radio-list-container"
+              style={{


same for styles like above

same as above

- Remove redundant comments from pagerduty.ts functions (getAllTeams, getFilteredServices) - Remove redundant comments from MappingsDialog.tsx - Refactor inline <style> tag to use makeStyles from @material-ui/core - Refactor inline Box styles to use makeStyles pattern - Follow established codebase pattern for styling (StatusCell, AutoMappingsButton) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

jhfgloria · 2026-02-25T17:41:35Z

Is it me, or the first option is smaller than the others, @pdt-rmunoz?

jhfgloria

Left some questions and comments. Overall really nice PR.

jhfgloria · 2026-02-25T17:50:01Z

plugins/backstage-plugin-backend/src/service/router.ts

+  // GET /filtered-services?team_id=:teamId&query=:query&limit=:limit
+  router.get('/filtered-services', async (request, response) => {
+    try {
+      const teamId = request.query.team_id as string | undefined;
+      const query = request.query.query as string | undefined;
+      const limit = request.query.limit
+        ? parseInt(request.query.limit as string, 10)
+        : 100;
+
+      const teamIdsArray: string[] | undefined = teamId ? [teamId] : undefined;
+
+      const services = await getFilteredServices(teamIdsArray, query, limit);
+
+      response.json(services);
+    } catch (error) {
+      if (error instanceof HttpError) {
+        response.status(error.status).json({
+          errors: [`${error.message}`],
+        });
+      }
+    }
+  });


I don't think we should have an extra method here. I think this method is just a specialisation of the next method /services. You should merge them together, and have a different execution path for either a team_id search, or a integration_key search. Otherwise we will end up with a multitude of controller methods for every different query string someone decides to introduce.

jhfgloria · 2026-02-25T17:51:19Z

plugins/backstage-plugin-backend/src/apis/pagerduty.ts

+          const res = await getTeams(offset, limit, account);
+
+          res[1].forEach(team => {
+            team.account = account;


We need to be careful about this one. Is this setting it as default? I think I mentioned this to @sandornagy517 before, that we should avoid using the default value, which I believe is the case here.

I've already added this account selector, maybe we should merge that PR first and then adjust this one?

jhfgloria · 2026-02-25T17:56:37Z

plugins/backstage-plugin/src/components/PagerDutyPage/MappingsDialog.tsx

+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchQuery(searchQuery);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [searchQuery]);


I think @sandornagy517 created a new useDebounce hook that abstracts this login.

Suggested change

useEffect(() => {

const timer = setTimeout(() => {

setDebouncedSearchQuery(searchQuery);

}, 500);

return () => clearTimeout(timer);

}, [searchQuery]);

const debouncedSearchQuery = useDebounced(searchQuery);

jhfgloria · 2026-02-25T18:00:32Z

plugins/backstage-plugin/src/components/PagerDutyPage/MappingsDialog.tsx

+      createMapping({
+        serviceId: currentServiceId,
+        integrationKey: currentIntegrationKey,
+        entityRef: '',
+        account: account,
+      });


I'm wondering if we shouldn't remove the mapping entirely... 🤔

jhfgloria · 2026-02-25T18:02:30Z

plugins/backstage-plugin/src/components/PagerDutyPage/MappingsDialog.tsx

+            value={selectedTeamIds[0] || ''}
+            onChange={value => {
+              const teamId = String(value || '');
+              setSelectedTeamIds(teamId ? [teamId] : []);


Why do we store the team ids as an array. Seems like I can only select one at a time...

pdt-rmunoz requested a review from a team as a code owner February 25, 2026 00:46

sandornagy517 requested changes Feb 25, 2026

View reviewed changes

jhfgloria reviewed Feb 25, 2026

View reviewed changes

Conversation

pdt-rmunoz commented Feb 25, 2026

Description

Affected plugin

Type of change

Checklist

Acknowledgement

Uh oh!

sandornagy517 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jhfgloria commented Feb 25, 2026

Uh oh!

jhfgloria left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants