feat(content-insights): add isRedesignEnabled flag for Blueprint button #4420

Nefaris · 2026-01-16T16:06:09Z

Passes the isRedesignEnabled feature flag through the Content Insights component tree so child components can conditionally render Blueprint vs BUIE variants. This keeps the toggle controlled by the end‑user app and enables gradual migration to Blueprint across the Content Insights UI.

Changes

Add isRedesignEnabled prop to SidebarContentInsights and pass it through ContentInsightsSummary → GraphCardPreviewsSummary → MetricSummary → HeaderWithCount / CompactCount / OpenContentInsightsButton
Render Blueprint Button and Text variants when redesign is enabled
Adjust Content Insights spacing for redesigned layout
Add VRT stories for ContentInsightsSummary
Fix flaky Metadata sidebar story (SuggestionForNewlyCreatedTemplateInstance) with waitFor

Usage

<SidebarContentInsights
  contentInsights={contentInsights}
  onContentInsightsClick={handleClick}
  isRedesignEnabled={true}  // enables Blueprint components
/>

Screenshot

Without redesign flag	With redesign flag	With modernized flag

Summary by CodeRabbit

New Features
- Added an optional "redesign" feature flag for Content Insights to enable updated visuals across the insights UI, including redesigned headers, counts, and chart previews.
- Insights action now supports a localized label and a redesigned button variant when the flag is enabled.
Tests
- Added visual Storybook scenarios for default, redesigned, loading, error, and trend states.
- Updated an async UI test to use a polling wait strategy.
Style
- Adjusted spacing and CSS variants to support the redesigned appearance.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

CLAassistant · 2026-01-16T16:06:17Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

Kamil Piekos seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

coderabbitai · 2026-01-16T16:06:24Z

Walkthrough

Adds an optional isRedesignEnabled?: boolean prop propagated across content-insights components to toggle redesigned rendering (new class modifiers, Text/BlueprintButton usage, conditional classNames) and introduces Storybook visual stories covering redesigned and legacy states. (≤50 words)

Changes

Cohort / File(s)	Summary
Sidebar → Summary → Button `src/elements/content-sidebar/SidebarContentInsights.tsx`, `src/features/content-insights/ContentInsightsSummary.tsx`, `src/features/content-insights/OpenContentInsightsButton.tsx`	Adds `isRedesignEnabled?: boolean` to Props and forwards it Sidebar → ContentInsightsSummary → OpenContentInsightsButton. `OpenContentInsightsButton` conditionally renders a `BlueprintButton` (uses `useIntl`) when true, otherwise retains legacy `Button` + `FormattedMessage`.
Metric / Header / Count / Graph components `src/features/content-insights/MetricSummary.tsx`, `src/features/content-insights/HeaderWithCount.tsx`, `src/features/content-insights/CompactCount.tsx`, `src/features/content-insights/GraphCardPreviewsSummary.tsx`	Adds `isRedesignEnabled?: boolean` prop, switches rendering between legacy and redesigned UI (uses `Text`, `classNames`, modified DOM and props), and forwards flag to nested children (Metric → HeaderWithCount / CompactCount; GraphCardPreviewsSummary → MetricSummary).
Styles (redesign variants) `src/features/content-insights/ContentInsightsSummary.scss`, `src/features/content-insights/GraphCardPreviewsSummary.scss`, `src/features/content-insights/HeaderWithCount.scss`, `src/features/content-insights/MetricSummary.scss`	Adds/adjusts CSS selectors and `--redesigned` modifiers to tweak margins and exclude redesigned elements from legacy rules.
Messages `src/features/content-insights/messages.ts`	Minor message text change: `previewGraphType` defaultMessage updated from `'PREVIEWS'` to `'Previews'`.
Stories / Tests `src/features/content-insights/stories/tests/ContentInsightsSummary-visual.stories.tsx`, `src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx`	New Storybook visual tests for ContentInsightsSummary covering default, redesign, loading, error, and trend states; one test updated to use `waitFor` for async assertion.

Sequence Diagram(s)

sequenceDiagram
    participant Sidebar as SidebarContentInsights
    participant Summary as ContentInsightsSummary
    participant Graphs as GraphCardPreviewsSummary
    participant Metric as MetricSummary
    participant Header as HeaderWithCount
    participant Count as CompactCount
    participant ButtonCmp as OpenContentInsightsButton

    Sidebar->>Summary: render(isRedesignEnabled)
    Summary->>Graphs: render(isRedesignEnabled)
    Summary->>Metric: render(isRedesignEnabled)
    Metric->>Header: render(isRedesignEnabled)
    Header->>Count: render(isRedesignEnabled)
    Summary->>ButtonCmp: render(isRedesignEnabled)
    alt isRedesignEnabled == true
        ButtonCmp->>ButtonCmp: useIntl() -> formatMessage()
        Note right of ButtonCmp: render BlueprintButton\n(add redesigned classes/text components)
    else isRedesignEnabled == false
        Note right of ButtonCmp: render legacy Button\nand legacy span/Text paths
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested labels

ready-to-merge

Suggested reviewers

loonskai
tjuanitas

Poem

🐰 I hop a flag from pane to view,
I whisper "redesign" and colors skew,
A button dons Blueprint, text grows bold,
Stories dance in variants told,
Hooray — the insights wear something new!

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	⚠️ Warning	The pull request description deviates significantly from the repository's required template, which focuses on merge readiness instructions and reviewer guidance.	Follow the template structure: include the merge readiness checklist, approval status, and instructions for managing reviewers and the merge queue rather than feature implementation details.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding an isRedesignEnabled flag to enable Blueprint button support, which is the primary feature propagated through multiple components in this changeset.

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

✨ Finishing touches

📝 Generate docstrings

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.}

loonskai · 2026-01-19T11:56:26Z

Can we add some VRT tests here?

coderabbitai

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/features/content-insights/OpenContentInsightsButton.tsx (1)

14-35: Correct the BlueprintButton size prop value.

The implementation correctly follows React hooks rules by calling useIntl unconditionally at the component top. The early return pattern provides clean separation between the two rendering paths while maintaining consistent className for styling and test selectors.

However, the size="small" prop is incorrect. According to the @box/blueprint-web Button API, valid size values are 'sm', 'default', or 'lg'. Change size="small" to size="sm" on line 20. The variant="secondary" prop is correct.

tjiang-box · 2026-01-20T05:03:49Z

src/features/content-insights/CompactCount.tsx

+        return (
+            <Text
+                as="span"
+                variant="bodyDefaultSemibold"


nit: could we update the props to follow alphabetical order

tjiang-box · 2026-01-20T05:08:03Z

src/features/content-insights/ContentInsightsSummary.tsx

+    graphData,
+    isLoading,
+    previousPeriodCount,
+    onClick,


nit: alphabetical order

tjiang-box · 2026-01-20T05:10:46Z

src/features/content-insights/HeaderWithCount.tsx

+        <div className={classNames('HeaderWithCount', { 'HeaderWithCount--redesigned': isRedesignEnabled })}>
+            {isRedesignEnabled ? (
+                <>
+                    <Text as="span" variant="bodyDefaultSemibold" color="textOnLightSecondary">


nit: alphabetical order

tjiang-box · 2026-01-20T05:12:07Z

src/features/content-insights/MetricSummary.tsx

+                    <Text
+                        className="MetricSummary-periodCount MetricSummary-periodCount--redesigned"
+                        variant="titleXLarge"
+                        as="span"


nit: alphabetical order

feat(content-insights): add isRedesignEnabled flag for Blueprint button

cc7de27

Nefaris requested review from a team as code owners January 16, 2026 16:06

fix(content-insights): adjust Blueprint button size and variant

59a7001

coderabbitai bot reviewed Jan 19, 2026

View reviewed changes

Kamil Piekos added 4 commits January 19, 2026 14:10

test(content-insights): add VRT stories for ContentInsightsSummary

96e22ec

feat(content-insights): add Blueprint redesign support with feature flag

c23772f

feat(content-insights): adjust spacing for redesigned version

ea3b800

test(metadata-sidebar): add waitFor for flaky test

919020e

tjiang-box reviewed Jan 20, 2026

View reviewed changes

tjiang-box approved these changes Jan 20, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(content-insights): add isRedesignEnabled flag for Blueprint button #4420

feat(content-insights): add isRedesignEnabled flag for Blueprint button #4420

Uh oh!

Nefaris commented Jan 16, 2026 •

edited

Loading

Uh oh!

CLAassistant commented Jan 16, 2026

Uh oh!

coderabbitai bot commented Jan 16, 2026 •

edited

Loading

Uh oh!

loonskai commented Jan 19, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

tjiang-box Jan 20, 2026

Uh oh!

tjiang-box Jan 20, 2026

Uh oh!

tjiang-box Jan 20, 2026

Uh oh!

tjiang-box Jan 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat(content-insights): add isRedesignEnabled flag for Blueprint button #4420

Are you sure you want to change the base?

feat(content-insights): add isRedesignEnabled flag for Blueprint button #4420

Uh oh!

Conversation

Nefaris commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Usage

Screenshot

Summary by CodeRabbit

Uh oh!

CLAassistant commented Jan 16, 2026

Uh oh!

coderabbitai bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Suggested labels

Suggested reviewers

Poem

Uh oh!

loonskai commented Jan 19, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

tjiang-box Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

tjiang-box Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

tjiang-box Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

tjiang-box Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Nefaris commented Jan 16, 2026 •

edited

Loading

coderabbitai bot commented Jan 16, 2026 •

edited

Loading