Skip to content

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
    • Help
    • Submit feedback
    • Contribute to GitLab
  • Sign in
U
upgrade-data-crawler-fe
  • Project
    • Project
    • Details
    • Activity
    • Releases
    • Cycle Analytics
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Charts
  • Issues 0
    • Issues 0
    • List
    • Board
    • Labels
    • Milestones
  • Merge Requests 0
    • Merge Requests 0
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
    • Charts
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Charts
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • ThinhNC
  • upgrade-data-crawler-fe
  • Merge Requests
  • !15

Merged
Opened Sep 08, 2026 by ThinhNC@ThinhNC
  • Report abuse
Report abuse

feat(system-config): add system configs and feature flags management UI

Pull Request: Dynamic System Configuration & Multi-Tier Feature Flags

Summary

Implements a centralized System Configuration & Feature Flags Management system across both Backend and Frontend. This eliminates hardcoded business constants, allows runtime feature toggling, enables zero-downtime Firecrawl API key rotation, and dynamically feeds business quotas/rate-limits directly into active middleware and background workers.


Frontend Changes (data-crawler-fe)

1. Data Layer & Hooks

  • Defined types in src/types/system-config.ts and singleton client in src/services/system-config.service.ts.
  • Added TanStack Query hooks in src/hooks/use-system-config.ts:
    • usePublicConfigs() with helper isFeatureEnabled(key).
    • Admin management hooks: useSystemConfigsList, useCreateSystemConfig, useUpdateSystemConfig, useToggleFeatureFlag, useDeleteSystemConfig.

2. Organic Biophilic UI Components (src/components/system-config/)

  • KPI Metrics: Total Configs, Active Feature Flags, Public Configs count.
  • Unified Table Card: Compliant with workspace table standards, sortable columns, custom category badges, and inline boolean switches.
  • Card Grid View: Responsive cards for mobile/touch-friendly view.
  • Smart Modal: Dynamic input switching based on value type (Boolean switch, Number input, String input, JSON code editor).
  • Safe Deletion Dialog: Prevents accidental deletion of vital keys.

3. Navigation, Guards & UX

  • Added page routes:
    • /settings/developer/system-configs (Developer Shell tab).
    • /system-configs (Standalone page with SEO metadata).
  • Registered routes in ADMIN_ROUTES within Next.js middleware.ts.
  • Added dynamic notice & disabled state to src/app/(auth)/register/page.tsx when registration is disabled.
  • Full bilingual coverage (English & Vietnamese) in translations.ts.

Check out, review, and merge locally

Step 1. Fetch and check out the branch for this merge request

git fetch origin
git checkout -b feat/system-config-management-ui origin/feat/system-config-management-ui

Step 2. Review the changes locally

Step 3. Merge the branch and fix any conflicts that come up

git fetch origin
git checkout origin/develop
git merge --no-ff feat/system-config-management-ui

Step 4. Push the result of the merge to GitLab

git push origin develop

Note that pushing to GitLab requires write access to this repository.

Tip: You can also checkout merge requests locally by following these guidelines.

  • Discussion 0
  • Commits 1
  • Changes 14
Assignee
No assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
0
Labels
None
Assign labels
  • View project labels
Reference: ThinhNC/upgrade-data-crawler-fe!15

Revert this merge request

This will create a new commit in order to revert the existing changes.

Switch branch
Cancel
A new branch will be created in your fork and a new merge request will be started.

Cherry-pick this merge request

Switch branch
Cancel
A new branch will be created in your fork and a new merge request will be started.