feat: hide QA-only templates from /templates when customizableMedia flag is off#8797
Open
jaco-brink wants to merge 13 commits intomainfrom
Open
feat: hide QA-only templates from /templates when customizableMedia flag is off#8797jaco-brink wants to merge 13 commits intomainfrom
jaco-brink wants to merge 13 commits intomainfrom
Conversation
…lag is off Adds a client-side slug filter to TemplateSections that hides journeys whose slug is in QA_ONLY_TEMPLATE_SLUGS when the customizableMedia LaunchDarkly flag evaluates to false. Also fixes /templates getStaticProps to pass flags through to the FlagsProvider so flag evaluation works. Made-with: Cursor
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughReplaces static props with server-side auth on the admin templates page to return feature flags and optional redirects; adds a customizableMedia feature flag to TemplateSections to hide/show QA-only template slugs and adds tests for both flag states. Changes
Sequence Diagram(s)sequenceDiagram
participant Browser as Browser
participant NextSSR as Next.js SSR (getServerSideProps)
participant InitAuth as initAndAuthApp
participant Page as Templates Page
participant TemplateComp as TemplateSections
Browser->>NextSSR: Request /templates
NextSSR->>InitAuth: initAndAuthApp({ locale, resolvedUrl, user? })
InitAuth-->>NextSSR: { initialApolloState, flags, redirect? }
alt redirect present
NextSSR-->>Browser: 3xx redirect
else no redirect
NextSSR-->>Page: props { initialApolloState, flags, ... }
Page->>TemplateComp: render with flags
TemplateComp->>TemplateComp: read flags.customizableMedia
alt customizableMedia = false
TemplateComp->>TemplateComp: filter out QA-only templates
else customizableMedia = true
TemplateComp->>TemplateComp: include QA-only templates
end
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Contributor
|
View your CI Pipeline Execution ↗ for commit 8015c8a
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
libs/journeys/ui/src/components/TemplateSections/TemplateSections.spec.tsx (1)
407-423: Consider adding a test case for whencustomizableMediaisundefined.The PR objectives state QA templates should be hidden when the flag is "off or undefined." The current tests cover
falseandtrue, but theundefinedcase (no FlagsProvider or flag not set) is also a valid scenario worth testing to ensure the default behavior is correct.💡 Suggested test case for undefined flag
it('hides QA-only slug template when customizableMedia is undefined', async () => { const { queryByRole } = render( <FlagsProvider flags={{}}> <MockedProvider mocks={[getJourneysWithQaOnlyMock]}> <TemplateSections languageIds={['529']} /> </MockedProvider> </FlagsProvider> ) await waitFor(() => expect( queryByRole('heading', { name: 'Featured & New' }) ).toBeInTheDocument() ) expect( queryByRole('heading', { name: 'QA Customizable Media Test' }) ).not.toBeInTheDocument() })🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/journeys/ui/src/components/TemplateSections/TemplateSections.spec.tsx` around lines 407 - 423, Add a test to assert the QA-only slug is hidden when the customizableMedia flag is undefined by rendering TemplateSections inside a FlagsProvider without the customizableMedia key (empty flags object) and using the same MockedProvider/getJourneysWithQaOnlyMock setup; in the new test (similar to the existing 'hides QA-only slug template when customizableMedia is false'), call render with <FlagsProvider flags={{}}>, wait for the "Featured & New" heading, and assert that the "QA Customizable Media Test" heading is not in the document so TemplateSections' behavior for undefined customizableMedia is covered.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@libs/journeys/ui/src/components/TemplateSections/TemplateSections.spec.tsx`:
- Around line 407-423: Add a test to assert the QA-only slug is hidden when the
customizableMedia flag is undefined by rendering TemplateSections inside a
FlagsProvider without the customizableMedia key (empty flags object) and using
the same MockedProvider/getJourneysWithQaOnlyMock setup; in the new test
(similar to the existing 'hides QA-only slug template when customizableMedia is
false'), call render with <FlagsProvider flags={{}}>, wait for the "Featured &
New" heading, and assert that the "QA Customizable Media Test" heading is not in
the document so TemplateSections' behavior for undefined customizableMedia is
covered.
ℹ️ Review info
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
apps/journeys-admin/pages/templates/index.tsxlibs/journeys/ui/src/components/TemplateSections/TemplateSections.spec.tsxlibs/journeys/ui/src/components/TemplateSections/TemplateSections.tsx
Contributor
|
The latest updates on your projects.
|
Contributor
|
The latest updates on your projects.
|
Contributor
|
The latest updates on your projects.
|
Contributor
|
The latest updates on your projects.
|
Contributor
|
The latest updates on your projects.
|
This comment has been minimized.
This comment has been minimized.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/journeys-admin/pages/templates/index.tsx (1)
20-43:⚠️ Potential issue | 🟠 MajorDo not log user identifiers and full flag payloads in the browser.
Line 43 exposes
user.idand all feature flags in client logs. This is sensitive telemetry and should be removed from production code.Suggested fix
-import { useFlags } from '@core/shared/ui/FlagsProvider' @@ - const flags = useFlags() - console.log('[/templates] userId:', user?.id ?? 'anonymous', '| flags:', JSON.stringify(flags))🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/journeys-admin/pages/templates/index.tsx` around lines 20 - 43, The console.log in TemplateIndexPage leaks sensitive info (user?.id and flags) to the browser; remove the client-side log or replace it with a sanitized/server-side telemetry call. Locate the console.log call inside the TemplateIndexPage function where useUser() and useFlags() are used and either delete the line or change it to only emit non-identifying state (e.g. presence booleans) or send details to a secure server-side logger instead of logging user.id or the full flags object in the browser.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@libs/journeys/ui/src/components/TemplateSections/TemplateSections.tsx`:
- Line 38: Remove the noisy debug console.log in the TemplateSections component:
delete the line that prints "[TemplateSections] customizableMedia flag:" and the
customizableMedia variable (the console.log call located in TemplateSections.tsx
inside the TemplateSections component) so feature-flag state is not emitted on
every render; if you need runtime visibility keep a non-production guard (e.g.,
use a debug logger or check NODE_ENV) instead of unconditional console.log.
---
Outside diff comments:
In `@apps/journeys-admin/pages/templates/index.tsx`:
- Around line 20-43: The console.log in TemplateIndexPage leaks sensitive info
(user?.id and flags) to the browser; remove the client-side log or replace it
with a sanitized/server-side telemetry call. Locate the console.log call inside
the TemplateIndexPage function where useUser() and useFlags() are used and
either delete the line or change it to only emit non-identifying state (e.g.
presence booleans) or send details to a secure server-side logger instead of
logging user.id or the full flags object in the browser.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 365f976a-3fe0-4e42-8035-a426b882559a
📒 Files selected for processing (2)
apps/journeys-admin/pages/templates/index.tsxlibs/journeys/ui/src/components/TemplateSections/TemplateSections.tsx
libs/journeys/ui/src/components/TemplateSections/TemplateSections.tsx
Outdated
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/journeys-admin/pages/templates/index.tsx`:
- Around line 43-48: Remove the debug console.log call that prints user?.id and
flags in the templates page (the console.log statement referencing '[/templates]
userId:' and JSON.stringify(flags)); if the flags variable is only used for that
log and not used elsewhere in the component or exported (search for its
identifier 'flags'), delete the flags declaration/usage as well to avoid leaving
unused variables and potential leaking of user info.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 77cad60c-1778-4373-afd7-22dbf345e1a9
📒 Files selected for processing (1)
apps/journeys-admin/pages/templates/index.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
QA_ONLY_TEMPLATE_SLUGSconstant inTemplateSectionsto track slugs of QA-only test templates/templateswhen thecustomizableMediaLaunchDarkly flag isfalse/undefined/templatesgetStaticPropsto passflagsthrough toFlagsProvider(was missing, causing all flags to evaluate asundefined)Test plan
qa-customizable-media-testdoes not appear on/templateswhencustomizableMediaflag is offcustomizableMediaflag is onTemplateSectionstests passSummary by CodeRabbit
New Features
Tests