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

[Nefaris]

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 that enables updated visuals (headers, counts, charts) and passes the flag to related UI elements.
  • Insights action now supports a localized label and a redesigned button variant when the flag is enabled.

• Tests

  • Added Storybook visual 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]

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]

Walkthrough

Adds an optional isRedesignEnabled?: boolean prop across content-insights components, toggling redesigned rendering (class modifiers, Text/BlueprintButton usage, conditional classNames) and adds Storybook visual tests for 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	Introduces isRedesignEnabled?: boolean on Props and forwards it Sidebar → ContentInsightsSummary → OpenContentInsightsButton. OpenContentInsightsButton uses useIntl and conditionally renders a BlueprintButton when redesigned, otherwise renders 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 and conditional rendering paths: redesigned UI uses Text, classNames, updated DOM and props; flag is forwarded to nested components and affects class additions (e.g., chart class modifier).
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 --redesigned selectors and margin/color tweaks to apply redesigned spacing and exclude redesigned elements from legacy rules.
Messages src/features/content-insights/messages.ts	Minor copy 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	Adds Storybook visual stories exercising default/redesign/loading/error/trend states for ContentInsightsSummary; one test updated to use waitFor for an 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(apply redesigned classes/Text)
    else isRedesignEnabled == false
        Note right of ButtonCmp: render legacy Button\nand legacy span/Text paths
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested labels

ready-to-merge

Suggested reviewers

• tjuanitas
• loonskai

Poem

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

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

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.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding an isRedesignEnabled flag that enables Blueprint button rendering in the content-insights components.

_{✏️ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[loonskai]

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]

Instead of a prop isRedesignEnabled, can we change it to split or feature flag here which is better and easier to control and toggle?

[tjiang-box]

here is one of the example for reference -

box-ui-elements/src/elements/content-explorer/ContentExplorer.tsx

Line 1889 in 129d733

const isMetadataViewV2Feature = isFeatureEnabled(features, 'contentExplorer.metadataViewV2');

[Nefaris]

I'm not sure this approach would work well here, since the redesign should be controlled from the end-user app and enabled only within a specific scope, not globally. It is controlled by feature flag in eua.

left some new comments