Studio UI

[Tulika-eGov]

Summary by CodeRabbit

• New Features

  • Introduced a comprehensive public services module with dynamic multi-step forms, workflow actions, and application viewing for employees.
  • Added advanced search, filtering, and result display for trade license and public grievance services.
  • Implemented new UI components: ActionBar, Modal, PopUp, WorkflowActions, WorkflowPopup, ButtonSelector, BoundaryFilter, MultiChildFormWrapper, and UploadAndDownloadDocumentHandler.
  • Enabled dynamic document upload/download and hierarchical boundary selection in forms.
  • Added new utility functions for transforming application data and generating UI configurations.

• Enhancements

  • Updated routing to support service-specific apply, search, response, and view screens.
  • Improved configuration for trade license and public grievance services, including nested fields and validation.
  • Enhanced UI with new CSS and SCSS styles for product listings and form elements.

• Bug Fixes

  • Improved error handling and validation in forms and workflow actions.

• Chores

  • Upgraded dependencies, including @egovernments/digit-ui-libraries and other packages for improved compatibility and performance.

• Documentation

  • Updated and added configuration files and templates for address, applicant, and document fields.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This update introduces a comprehensive suite of new features and enhancements to the public services module, focusing on modular form generation, workflow actions, dynamic routing, and UI improvements. It adds numerous React components for workflow management, document handling, boundary filtering, and multi-step form flows, alongside new utility functions and configuration files. Several CSS and SCSS files are introduced for styling, and dependencies are updated across multiple package files.

Changes

Files/Paths	Change Summary
frontend/web/package.json, frontend/web/micro-ui-internals/example/package.json, frontend/web/micro-ui-internals/packages/ui-components/package.json	Updated @egovernments/digit-ui-libraries dependency version from 1.8.11 to 1.8.13.
frontend/web/micro-ui-internals/package.json	Added cross-env as devDependency, updated npm-run-all and microbundle-crl to caret versions, reordered dependencies, and updated start script to use cross-env.
frontend/web/micro-ui-internals/example/src/setupProxy.js	Added proxy routes for /boundary-service and /public-service.
frontend/web/public/digitstudio.css, frontend/web/micro-ui-internals/packages/css/src/pages/employee/digitStudio.css, frontend/web/micro-ui-internals/packages/css/src/pages/employee/index.scss	Added new CSS/SCSS files for product listing and UI component styling.
frontend/web/public/index.html	Added link to digitstudio.css and increased indentation.
frontend/web/micro-ui-internals/packages/modules/PublicServices/src/Module.js	Replaced hardcoded module list with dynamic API fetch for modules; updated loading logic.
frontend/web/micro-ui-internals/packages/modules/PublicServices/src/components/ActionBar.js, ActionModal.js, ButtonSelector.js, Modal.js, PopUp.js, WorkflowActions.js, WorkflowPopup.js, Request.js	Introduced new React components for action bars, modals, workflow actions, popups, and API request utility.
frontend/web/micro-ui-internals/packages/modules/PublicServices/src/components/PublicServicesCard.js, Response.js, pages/employee/DigitDemo/digitDemoComponent.js	Updated translation keys, navigation logic, and refactored form submission to multi-step flow with dynamic config.
frontend/web/micro-ui-internals/packages/modules/PublicServices/src/pages/employee/DigitDemo/digitDemoViewComponent.js, modulePageComponent.js, searchTL.js	Added new React components for application view, module listing, and TL search.
frontend/web/micro-ui-internals/packages/modules/PublicServices/src/pages/employee/index.js	Updated and added new dynamic routes for apply, response, search, view, and modules pages.
frontend/web/micro-ui-internals/packages/modules/PublicServices/src/configs/UICustomizations.js, searchGenericConfig.js	Added/updated search configuration and customization functions for validation, preprocessing, and UI rendering.
frontend/web/micro-ui-internals/packages/modules/PublicServices/src/configs/serviceConfiguration.js, serviceConfigurationPGR.js	Updated and restructured service configurations for TL and PGR modules, including field nesting, metadata, and workflow changes.
frontend/web/micro-ui-internals/packages/modules/PublicServices/src/utils/generateFormConfigFromSchemaUtil.js, utils/index.js, utils/templateConfig.js	Refactored form config generator, added utility functions for payload transformation, view config, and template field definitions.
frontend/web/micro-ui-internals/packages/modules/PublicServices/src/components/modalConfig.js	Added modal configuration generator for workflow UI.
frontend/web/micro-ui-internals/packages/ui-components/src/hoc/BoundaryFilter.js, UploadAndDownloadDocumentHandler.js, MultiChildFormWrapper.js	Added new React components for hierarchical boundary selection, document upload/download, and multi-child form management.
frontend/web/micro-ui-internals/packages/ui-components/src/hoc/FieldComposer.js, FieldV1.js, FormComposerV2.js	Integrated new field types and components for document upload/download and boundary filtering; added multi-child form section rendering.
frontend/web/micro-ui-internals/packages/ui-components/src/index.js	Exported BoundaryFilter component.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant App
    participant API
    participant Workflow
    participant UIComponents

    User->>App: Accesses Public Services module
    App->>API: Fetch dynamic modules and service configs
    API-->>App: Returns module/service data
    App->>UIComponents: Renders product cards, forms, and workflow actions
    User->>UIComponents: Interacts with forms (multi-step, uploads, selects)
    UIComponents->>API: Submits form data or triggers workflow actions
    API-->>UIComponents: Returns response (success/error)
    UIComponents->>App: Navigates to response or view screens
    App->>User: Displays results, workflow actions, or errors

Loading

sequenceDiagram
    participant User
    participant DigitDemoComponent
    participant API
    participant WorkflowActions
    participant Modal

    User->>DigitDemoComponent: Starts multi-step application
    DigitDemoComponent->>API: Fetches dynamic form config
    API-->>DigitDemoComponent: Returns config
    DigitDemoComponent->>User: Renders stepper and form
    User->>DigitDemoComponent: Fills steps, submits
    DigitDemoComponent->>API: Submits application payload
    API-->>DigitDemoComponent: Returns application number
    DigitDemoComponent->>WorkflowActions: Shows workflow actions
    User->>WorkflowActions: Initiates workflow action
    WorkflowActions->>Modal: Opens action modal
    User->>Modal: Submits workflow action
    Modal->>API: Updates workflow state
    API-->>Modal: Returns result
    Modal->>User: Shows result/confirmation

Loading

Poem

In fields of forms and workflows bright,
New modules bloom in morning light.
Cards and boundaries, steps anew,
With buttons, modals—rabbits’ view!
Dynamic routes and configs spun,
CSS and logic—oh what fun!
Hop, hop, hooray, the code is done!

((\
( -.-)
o_(")(")

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch STUDIO-UI-4

---

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

[jagankumar-egov]

https://github.com/coderabbitai review

Review the code for best practices and potential issues
Generate a summary of the changes
Create documentation (like a README.md) for the new service