refactors to generalize icon warnings to make usage flexible #2837

danoswaltCL · 2026-01-12T18:34:36Z

this fixes the issue in #2832, it will now show up on the root page; it required a bit more of a fixup due as it was a little inflexible and confusingly worded in some places (showWarning looks like a general thing, but it only shows one specific warning, etc).

Will make implementing for experiments straightforward, and adding future errors types should be really simple, just add a selector helper function to check in the getWarningKeysForFlag function , and a message key in en.json.

// Helper function returns array of translation keys (extensible for future warning types)
const getWarningKeysForFlag = (flag: FeatureFlag): string[] => {
  const warnings: string[] = [];

  // Check each warning type (in future more types can be added here)
  if (hasNoEnabledInclusionsWarning(flag)) {
    warnings.push('feature-flags.warning.no-enabled-inclusions.text');
  }

  return warnings;
};

const hasNoEnabledInclusionsWarning = (flag: FeatureFlag): boolean => {
  return (
    flag?.status === FEATURE_FLAG_STATUS.ENABLED &&
    flag?.filterMode !== FILTER_MODE.INCLUDE_ALL &&
    !flag?.featureFlagSegmentInclusion?.some((inclusion) => inclusion.enabled)
  );
};

Copilot

Pull request overview

This PR refactors the warning icon system for feature flags to make it more flexible and extensible. It fixes issue #2832 by enabling warnings to display on the root page and provides a framework for easily adding new warning types in the future.

Changes:

Replaced boolean showWarning property with an array-based warningMessageKeys system that accepts translation keys
Moved translation handling from templates into the CommonWarningIconComponent which now formats multiple warnings as a bulleted list
Refactored selectors to return arrays of translation keys instead of boolean flags, making the system extensible for future warning types

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`frontend/projects/upgrade/src/assets/i18n/en.json`	Renamed translation key from `feature-flags.global-status-warning-tooltip.text` to `feature-flags.warning.no-enabled-inclusions.text` for better organization
`frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-warning-icon/common-warning-icon.component.ts`	Added translation handling, formatting logic for multiple warnings, and lifecycle hooks to handle translation key arrays
`frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-warning-icon/common-warning-icon.component.html`	Updated to bind to internally formatted warning message instead of accepting external string
`frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-status-indicator-chip/common-status-indicator-chip.component.ts`	Changed input from `warningMessage` string to `warningMessageKeys` array and updated documentation
`frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-status-indicator-chip/common-status-indicator-chip.component.html`	Updated to pass warning message keys array and check array length instead of string truthiness
`frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-title-header/common-section-card-title-header.component.ts`	Changed input property to accept translation key arrays and updated documentation examples
`frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-title-header/common-section-card-title-header.component.html`	Removed translation pipe usage and updated to pass translation key arrays directly
`frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.ts`	Renamed observable from `warningStatusForAllFlags$` to `warningKeysForAllFlags$`
`frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.html`	Updated to use warning keys array with fallback to empty array
`frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts`	Renamed observable from `shouldShowWarningForSelectedFlag$` to `warningKeysForSelectedFlag$`
`frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html`	Simplified template to directly bind warning keys observable without conditional translation
`frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts`	Refactored to use extensible helper functions that return arrays of translation keys instead of boolean values
`frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts`	Updated property names to reflect new warning keys approach

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

frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts

Copilot · 2026-01-12T18:39:31Z

frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts

+export const selectWarningKeysForSelectedFlag = createSelector(selectSelectedFeatureFlag, (flag: FeatureFlag) =>
+  getWarningKeysForFlag(flag)
 );


The selector doesn't handle the case where 'flag' is null or undefined. If selectSelectedFeatureFlag returns undefined, getWarningKeysForFlag will be called with undefined, and hasNoEnabledInclusionsWarning will fail on the optional chaining checks. While optional chaining prevents errors, it would be more robust to add an early return check at the beginning of getWarningKeysForFlag to handle null/undefined flags explicitly.

Copilot · 2026-01-12T18:39:31Z

frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts

+const getWarningKeysForFlag = (flag: FeatureFlag): string[] => {
+  const warnings: string[] = [];

-// Selector for the selected feature flag
-export const selectShouldShowWarningForSelectedFlag = createSelector(selectSelectedFeatureFlag, (flag: FeatureFlag) =>
-  shouldShowWarningForFlag(flag)
+  // Check each warning type (in future more types can be added here)
+  if (hasNoEnabledInclusionsWarning(flag)) {
+    warnings.push('feature-flags.warning.no-enabled-inclusions.text');
+  }
+
+  return warnings;
+};


The getWarningKeysForFlag helper function should have a null/undefined guard at the beginning to handle cases where flag is not provided. Add an early return: 'if (!flag) return [];' at the start of the function to make the code more robust and explicit about handling missing flags.

danoswaltCL · 2026-01-13T18:00:36Z

hold up on this one until #2840 is merged, as it may have some useful tooltip functions i can borrow.

…fix/doswalt/2832-refactor-warning-icon-message-usage

danoswaltCL · 2026-01-16T17:47:55Z

ok, i'm reopening for review @zackcl @bcb37

…or-warning-icon-message-usage

zackcl · 2026-01-16T18:41:58Z

...red-standalone-component-lib/components/common-warning-icon/common-warning-icon.component.ts

+    }
+    const translatedMessages = this.warningMessageKeys.map((key) => this.translateService.instant(key));
+    this.formattedWarningMessage = '• ' + translatedMessages.join('\n• ');
+  }


Minor UX suggestion: When there’s only one warning, showing it as plain text (no bullet) feels cleaner. I think bullets make more sense once there are multiple warnings.

...flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html

...ard/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.html

refactors to generalize icon warnings to make usage flexible

a16cf5d

danoswaltCL requested review from bcb37, Copilot and zackcl and removed request for Copilot January 12, 2026 18:34

Copilot started reviewing on behalf of danoswaltCL January 12, 2026 18:35 View session

Copilot AI reviewed Jan 12, 2026

View reviewed changes

danoswaltCL closed this Jan 13, 2026

danoswaltCL reopened this Jan 13, 2026

danoswaltCL marked this pull request as draft January 13, 2026 18:00

Merge remote-tracking branch 'origin/experiment-design-refresh' into …

3197474

…fix/doswalt/2832-refactor-warning-icon-message-usage

danoswaltCL marked this pull request as ready for review January 16, 2026 17:48

Merge branch 'experiment-design-refresh' into fix/doswalt/2832-refact…

5b658af

…or-warning-icon-message-usage

zackcl reviewed Jan 16, 2026

View reviewed changes

...flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html Show resolved Hide resolved

zackcl reviewed Jan 16, 2026

View reviewed changes

...ard/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.html Show resolved Hide resolved

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactors to generalize icon warnings to make usage flexible #2837

refactors to generalize icon warnings to make usage flexible #2837

Uh oh!

danoswaltCL commented Jan 12, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Jan 12, 2026

Uh oh!

Copilot AI Jan 12, 2026

Uh oh!

danoswaltCL commented Jan 13, 2026

Uh oh!

danoswaltCL commented Jan 16, 2026

Uh oh!

zackcl Jan 16, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

refactors to generalize icon warnings to make usage flexible #2837

Are you sure you want to change the base?

refactors to generalize icon warnings to make usage flexible #2837

Uh oh!

Conversation

danoswaltCL commented Jan 12, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

danoswaltCL commented Jan 13, 2026

Uh oh!

danoswaltCL commented Jan 16, 2026

Uh oh!

zackcl Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants