Skip to content

Fleet UI: Add combined include/exclude label targeting for configuration profiles - #46444

Merged
andymFleet merged 28 commits into
mainfrom
45179-cpie-frontend-include-exclude-targeting
Jun 4, 2026
Merged

Fleet UI: Add combined include/exclude label targeting for configuration profiles#46444
andymFleet merged 28 commits into
mainfrom
45179-cpie-frontend-include-exclude-targeting

Conversation

@andymFleet

@andymFleet andymFleet commented May 29, 2026

Copy link
Copy Markdown
Contributor

Related issue: Resolves #45179

Checklist for submitter

If some of the following don't apply, delete the relevant line.

  • Changes file added for user-visible changes in changes/, orbit/changes/ or ee/fleetd-chrome/changes.
    See Changes files for more information.

  • Input data is properly validated, SELECT * is avoided, SQL injection is prevented (using placeholders for values in statements), JS inline code is prevented especially for url redirects, and untrusted data interpolated into shell scripts/commands is validated against shell metacharacters.

Testing

  • Added/updated automated tests

  • QA'd all new/changed functionality manually

Summary by CodeRabbit

  • New Features

    • Configuration profiles now support selecting both include and exclude labels when uploading MDM profiles
    • Profile labels modal displays include and exclude label sections separately
  • Bug Fixes

    • Delete label confirmation now clarifies that labels used by configuration profiles cannot be deleted until the profile is removed
  • Style

    • Added visual check indicators for configured platforms in tabs
    • Improved responsive design for profile management and side navigation layouts
  • Tests

    • Added test coverage for profile labels modal and label deletion helpers

Review Change Stack

@andymFleet
andymFleet requested a review from a team as a code owner May 29, 2026 12:36
Copilot AI review requested due to automatic review settings May 29, 2026 12:36

@claude claude Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

Tip: disable this comment in your organization's Code Review settings.

@codecov

codecov Bot commented May 29, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 81.08108% with 7 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.97%. Comparing base (d7d9a96) to head (e1c4769).
⚠️ Report is 44 commits behind head on main.

Files with missing lines Patch % Lines
frontend/services/entities/mdm.ts 0.00% 6 Missing ⚠️
frontend/components/TabText/TabText.tsx 50.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main   #46444      +/-   ##
==========================================
+ Coverage   66.91%   66.97%   +0.05%     
==========================================
  Files        2832     2814      -18     
  Lines      224970   221218    -3752     
  Branches    11663    11651      -12     
==========================================
- Hits       150531   148151    -2380     
+ Misses      60783    59776    -1007     
+ Partials    13656    13291     -365     
Flag Coverage Δ
frontend 56.85% <81.08%> (+0.17%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the frontend MDM configuration profile targeting UX to support selecting include + exclude labels together (per #45179), along with related UI refinements and copy changes around label deletion and profile label display.

Changes:

  • Reworked the “Add profile” modal targeting UI to support separate Include/Exclude label selection (with search, tabs, and selected “badge” affordances).
  • Updated MDM profile upload request-building to send include-all/include-any/exclude-any label arrays.
  • Updated profile label display/modals and delete-label copy/error messaging; added unit tests for new helper logic and messaging.

Reviewed changes

Copilot reviewed 17 out of 18 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
frontend/styles/var/mixins.scss Makes a sticky layout section responsive via clamp() sizing.
frontend/services/entities/mdm.ts Changes profile upload FormData building to append include/exclude label fields.
frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/PlatformTabs.tsx Replaces “dot” configured indicator with a check icon in tab labels.
frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/_styles.scss Styles the new tab check icon.
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileUploader/components/AddProfileModal/helpers.tsx Updates targeting helper to generate include + exclude label keys.
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileUploader/components/AddProfileModal/helpers.tests.ts Adds unit tests for new targeting helper behavior.
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx Replaces TargetLabelSelector with a custom include/exclude targeting UI (tabs + search + badges).
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileUploader/components/AddProfileModal/_styles.scss Styles the new targeting UI (tabs, panels, selected badges).
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileListItem/ProfileListItem.tsx Updates label aggregation for displaying a single label count when include/exclude labels exist.
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileListItem/_styles.scss Adds truncation/overflow behavior and responsive tweaks for the profiles list item layout.
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileLabelsModal/ProfileLabelsModal.tsx Updates label modal to show include and exclude sections separately with new badge layout.
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileLabelsModal/ProfileLabelsModal.tests.tsx Adds tests for the updated profile labels modal behavior.
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileLabelsModal/_styles.scss Styles new badge-based, scrollable labels layout and section titles.
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/_styles.scss Adjusts action button spacing in the configuration profiles card.
frontend/pages/labels/helpers.ts Adds a new error-message branch for “configuration profile” label-delete failures.
frontend/pages/labels/helpers.tests.ts Adds unit tests for updated delete-label error message behavior.
frontend/pages/hosts/ManageHostsPage/components/DeleteLabelModal/DeleteLabelModal.tsx Updates premium delete-label modal copy re: configuration profile targeting.
changes/45179-cpie-frontend-include-exclude-targeting Adds changelog entry for the user-visible frontend updates.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread frontend/services/entities/mdm.ts
Comment thread frontend/pages/labels/helpers.ts
@andymFleet
andymFleet marked this pull request as draft May 29, 2026 12:45
@coderabbitai

coderabbitai Bot commented May 29, 2026

Copy link
Copy Markdown
Contributor

Walkthrough

This PR implements frontend changes enabling MDM configuration profiles to target both include and exclude labels simultaneously. The core changes include a redesigned label selection interface in the Add Profile modal with tabbed include/exclude selection, updated profile display to show include and exclude labels in separate sections, modified label deletion messaging to clarify the profile constraint, and supporting platform configuration status indicators. The implementation updates server integration to independently append all three label array types to the upload payload.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description check ✅ Passed The description covers checked items from the template but omits several sections like database migrations, new Fleet configuration settings, and fleetd/orbit/Fleet Desktop compatibility—though these may not apply.
Linked Issues check ✅ Passed The code changes comprehensively implement the linked issue #45179 objectives: frontend modal now supports combined include/exclude label targeting [AddProfileModal.tsx, helpers.tsx], label display shows both sections separately [ProfileLabelsModal.tsx, ProfileLabelsModal.tests.tsx], delete-label dialog updated with new copy [DeleteLabelModal.tsx], and configuration profiles table updated with responsive design [ProfileListItem.tsx/_styles.scss, ConfigurationProfiles/_styles.scss].
Out of Scope Changes check ✅ Passed The changes include frontend updates to configuration profiles, label modals, OS updates tabs, and styling—all directly related to issue #45179 and Figma design implementation. PlatformTabs.tsx changes (check icon for configured OS) align with 'update configuration profiles table per figma'.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check ✅ Passed The PR title accurately and specifically describes the main feature: adding combined include/exclude label targeting for configuration profiles in the Fleet UI.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch 45179-cpie-frontend-include-exclude-targeting

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileLabelsModal/ProfileLabelsModal.tsx (1)

63-64: ⚡ Quick win

Prefer nullish coalescing operator for consistency and safety.

Line 63 uses the OR operator (||), but ProfileListItem.tsx (lines 128-132) uses the nullish coalescing operator (??) for similar label array handling. The OR operator will select an empty array [] over a populated array, whereas ?? only falls through for null/undefined. For consistency and to avoid edge-case bugs if the backend ever returns empty arrays:

♻️ Use nullish coalescing for safer fallback
-  const includeLabels = labels_include_all || labels_include_any;
+  const includeLabels = labels_include_all ?? labels_include_any;
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileLabelsModal/ProfileLabelsModal.tsx`
around lines 63 - 64, Replace the use of the logical OR for computing
includeLabels with nullish coalescing to match the pattern in
ProfileListItem.tsx: change the expression that defines includeLabels (currently
using labels_include_all || labels_include_any) to use labels_include_all ??
labels_include_any so only null/undefined fall through; leave excludeLabels
(labels_exclude_any) unchanged.
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileListItem/ProfileListItem.tsx (1)

173-173: ⚡ Quick win

Remove redundant undefined check.

The condition labels !== undefined is now always true since labels is initialized as an array on lines 128-132 and can never be undefined. Simplify to just check the length:

♻️ Simplify condition
-          {isPremium && labels !== undefined && labels.length && (
+          {isPremium && labels.length > 0 && (
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileListItem/ProfileListItem.tsx`
at line 173, In ProfileListItem, the JSX condition currently checks `isPremium
&& labels !== undefined && labels.length` but `labels` is always initialized as
an array in the ProfileListItem component, so remove the redundant `labels !==
undefined` check and simplify the conditional to only test `isPremium` and
whether `labels.length` (e.g., `isPremium && labels.length > 0`) to render the
labels.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In
`@frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileLabelsModal/ProfileLabelsModal.tsx`:
- Around line 63-64: Replace the use of the logical OR for computing
includeLabels with nullish coalescing to match the pattern in
ProfileListItem.tsx: change the expression that defines includeLabels (currently
using labels_include_all || labels_include_any) to use labels_include_all ??
labels_include_any so only null/undefined fall through; leave excludeLabels
(labels_exclude_any) unchanged.

In
`@frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileListItem/ProfileListItem.tsx`:
- Line 173: In ProfileListItem, the JSX condition currently checks `isPremium &&
labels !== undefined && labels.length` but `labels` is always initialized as an
array in the ProfileListItem component, so remove the redundant `labels !==
undefined` check and simplify the conditional to only test `isPremium` and
whether `labels.length` (e.g., `isPremium && labels.length > 0`) to render the
labels.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: c12716d7-43a3-4b73-a26f-e7109db8eaaf

📥 Commits

Reviewing files that changed from the base of the PR and between 4462067 and 7e28f18.

📒 Files selected for processing (18)
  • changes/45179-cpie-frontend-include-exclude-targeting
  • frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/_styles.scss
  • frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileLabelsModal/ProfileLabelsModal.tests.tsx
  • frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileLabelsModal/ProfileLabelsModal.tsx
  • frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileLabelsModal/_styles.scss
  • frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileListItem/ProfileListItem.tsx
  • frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileListItem/_styles.scss
  • frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx
  • frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileUploader/components/AddProfileModal/_styles.scss
  • frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileUploader/components/AddProfileModal/helpers.tests.ts
  • frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/ProfileUploader/components/AddProfileModal/helpers.tsx
  • frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/PlatformTabs.tsx
  • frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/_styles.scss
  • frontend/pages/hosts/ManageHostsPage/components/DeleteLabelModal/DeleteLabelModal.tsx
  • frontend/pages/labels/helpers.tests.ts
  • frontend/pages/labels/helpers.ts
  • frontend/services/entities/mdm.ts
  • frontend/styles/var/mixins.scss

@andymFleet andymFleet changed the title 45179 cpie frontend include exclude targeting Fleet UI: Add combined include/exclude label targeting for configuration profiles May 29, 2026
@andymFleet
andymFleet marked this pull request as ready for review May 29, 2026 15:39

@MagnusHJensen MagnusHJensen left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, just a few small things

Comment thread changes/45179-cpie-frontend-include-exclude-targeting Outdated

@MagnusHJensen MagnusHJensen left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a couple small changes left, then we are good to go

@andymFleet
andymFleet force-pushed the 45179-cpie-frontend-include-exclude-targeting branch from 6532271 to e1c4769 Compare June 4, 2026 14:11

@MagnusHJensen MagnusHJensen left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TY!

@andymFleet
andymFleet merged commit de1e14b into main Jun 4, 2026
24 checks passed
@andymFleet
andymFleet deleted the 45179-cpie-frontend-include-exclude-targeting branch June 4, 2026 14:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CPIE: Frontend changes to allow combined include + exclude targeting

3 participants