refactor: update template list filters to conditionally render namespace or category picker

[stefinie123]

Purpose

Make scaffolder namespace filter look consistent with categories filter

Common Create Page

Component Create Page

PlatformOverview Page

Goals

Describe the solutions that this feature/fix will introduce to resolve the problems described above

Approach

Describe how you are implementing the solutions. Include an animated GIF or screenshot if the change affects the UI (email documentation@wso2.com to review all UI text). Include a link to a Markdown file or Google doc if the feature write-up is too long to paste here.

User stories

Summary of user stories addressed by this change>

Release note

Brief description of the new feature or bug fix as it will appear in the release notes

Documentation

Link(s) to product documentation that addresses the changes of this PR. If no doc impact, enter “N/A” plus brief explanation of why there’s no doc impact

Training

Link to the PR for changes to the training content in https://github.com/wso2/WSO2-Training, if applicable

Certification

Type “Sent” when you have provided new/updated certification questions, plus four answers for each question (correct answer highlighted in bold), based on this change. Certification questions/answers should be sent to certification@wso2.com and NOT pasted in this PR. If there is no impact on certification exams, type “N/A” and explain why.

Marketing

Link to drafts of marketing content that will describe and promote this feature, including product page changes, technical articles, blog posts, videos, etc., if applicable

Automation tests

• Unit tests

  Code coverage information

• Integration tests

  Details about the test cases and coverage

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines? yes/no
• Ran FindSecurityBugs plugin and verified report? yes/no
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? yes/no

Samples

Provide high-level details about the samples related to this feature

Related PRs

List any other related PRs

Migrations (if applicable)

Describe migration steps and platforms on which migration has been tested

Test environment

List all JDK versions, operating systems, databases, and browser/versions on which this feature/fix was tested

Learning

Describe the research phase and any blog posts, patterns, libraries, or add-ons you used to solve the problem.

Summary by CodeRabbit

• New Features

  • Scaffolder filter interface now conditionally displays the namespace picker in the main filter row when viewing components, providing context-aware filtering.

• Style

  • Filter layout styling updated to maintain consistent spacing during view transitions.
  • Namespace filter labels enhanced with improved visual hierarchy and typography.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR refines the template picker UI by introducing conditional label rendering in the shared filter component, applying it in the namespace picker with styled explicit labels, switching between picker types in the page based on view mode, and stabilizing the layout during transitions.

Changes

Template Picker UI Refinement

Layer / File(s)	Summary
NamespaceScopeFilter label control prop plugins/openchoreo-react/src/components/NamespaceScopeFilter/NamespaceScopeFilter.tsx	NamespaceScopeFilterProps gains an optional hideLabelInTrigger prop (defaults to false). The component destructures this prop and conditionally formats the button label: when true, the trigger shows only the value; when false, it shows ${label}: ${value}.
ScaffolderNamespacePicker label styling and layout packages/app/src/components/scaffolder/ScaffolderNamespacePicker.tsx	MUI imports extend to include Box and Typography. A new label style class defines bold, small-font, theme-colored labels. The filter is wrapped in a Box, paired with an explicit Typography label, and rendered with hideLabelInTrigger and custom trigger styling.
CustomTemplateListPage conditional picker rendering packages/app/src/components/scaffolder/CustomTemplateListPage.tsx	The filter UI now conditionally renders ScaffolderNamespacePicker for components view and ScaffolderCategoryPicker otherwise. This applies to both the main filter row and the filters Drawer, replacing the prior unconditional category picker plus separate namespace filter.
Layout stabilization and style cleanup packages/app/src/components/scaffolder/styles.ts	categoryFilter adds minHeight: 68px to reserve space and prevent row collapse during picker loading or view transitions. The obsolete namespaceFilter style block is removed.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• openchoreo/backstage-plugins#545: Both PRs refactor ScaffolderNamespacePicker and CustomTemplateListPage to integrate the shared NamespaceScopeFilter, with this PR further extending the filter by adding the hideLabelInTrigger prop and refining label presentation.

Suggested reviewers

• sameerajayasoma
• kaviththiranga

Poem

🐰 Pickers swap with graceful views,
Labels hidden when the switch is true,
Layout holds its steady ground,
While namespace and category swirl around!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is incomplete with only the Purpose section filled and multiple required sections left as empty template placeholders.	Complete all required sections: Goals, Approach, User stories, Release note, Documentation, Training, Certification, Marketing, Automation tests, Security checks, Samples, Related PRs, Migrations, Test environment, and Learning with substantive content or appropriate N/A explanations.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title accurately reflects the main changes: conditionally rendering namespace or category pickers in the template list filters based on the view mode.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[codecov]

Codecov Report

❌ Patch coverage is 9.09091% with 10 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...c/components/scaffolder/CustomTemplateListPage.tsx	0.00%	6 Missing ⚠️
...ents/NamespaceScopeFilter/NamespaceScopeFilter.tsx	0.00%	4 Missing ⚠️

📢 Thoughts on this report? Let us know!

[LakshanSS]

LGTM