Refactor 2: [Phase 2] Refactor Screens to use FormFieldGroup (Shared Components)

[priyashuu]

What kind of change does this PR introduce?
This PR refactors multiple Admin shared components to use the centralized FormFieldGroup and typed field components instead of raw Form.Group / Form.Control patterns.

Issue Number:
#6310

Fixes #6310

Snapshots/Videos:

If relevant, did you update the documentation?

Summary

Does this PR introduce a breaking change?

Checklist

CodeRabbit AI Review

• I have reviewed and addressed all critical issues flagged by CodeRabbit AI
• I have implemented or provided justification for each non-critical suggestion
• I have documented my reasoning in the PR comments where CodeRabbit AI suggestions were not implemented

Test Coverage

• I have written tests for all new changes/features
• I have verified that test coverage meets or exceeds 95%
• I have run the test suite locally and all tests pass

Other information

Have you read the contributing guide?

Yes

Summary by CodeRabbit

Release Notes

• Chores

  • Added comprehensive Docker containerization for development and production deployments
  • Introduced GitHub Actions CI/CD workflows for automated testing, code quality checks, and deployment
  • Configured code coverage tracking and quality gates
  • Enhanced development tooling with lint-staged and Husky git hooks
  • Added ESLint, Prettier, and TypeScript compilation validations

• Tests

  • Added extensive Cypress end-to-end test suite covering admin and user portal functionality

• Documentation

  • Established documentation website with Docusaurus setup and deployment pipeline

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[keploy]

No significant changes currently retry

[github-actions]

Our Pull Request Approval Process

This PR will be reviewed according to our:

1. Palisadoes Contributing Guidelines

2. AI Usage Policy

Your PR may be automatically closed if:

1. Our PR template isn't filled in correctly

2. You haven't correctly linked your PR to an issue

Thanks for contributing!

[coderabbitai]

Caution

Review failed

Failed to post review comments

Walkthrough

This comprehensive infrastructure enhancement PR introduces a complete CI/CD pipeline framework, E2E testing infrastructure, pre-commit validation hooks, Docker deployment configurations, and code quality enforcement standards. It establishes automated checks for test coverage, TypeScript compilation, CSS policies, i18n compliance, accessibility requirements, component architecture, and translations, along with deployment automation for documentation and Docker-based environments.

Changes

Cohort / File(s)	Summary
Configuration & Code Quality Standards .coderabbit.yaml, .eslintrc.json, .flake8, .pydocstyle, .prettierrc, .prettierignore, .graphqlrc.yml, commitlint.config.js, config/babel.config.cjs, .lintstagedrc.json	Establishes comprehensive linting, formatting, and code review automation rules. Removes ESLint config in favor of linting integration; adds Prettier endOfLine option; introduces strict validation for test coverage, TypeScript, React patterns, a11y, i18n, and component architecture via CodeRabbit framework.
GitHub Workflows - CI/CD Pipeline .github/workflows/pull-request.yml, .github/workflows/push.yml, .github/workflows/codeql-codescan.yml, .github/workflows/auto-assign.yml, .github/workflows/auto-label.json5, .github/workflows/issue-assigned.yml, .github/workflows/issue-unassigned.yml, .github/workflows/issue.yml, .github/workflows/pull-request-review.yml, .github/workflows/pull-request-target.yml, .github/workflows/push-deploy-website.yml, .github/workflows/stale.yml	Implements multi-faceted automated workflows: complex PR validation with coverage merging, test sharding, Docker health checks, security scanning, and documentation deployment; push-based merge conflict detection and coverage tracking; CodeQL analysis; issue/PR automation with reusable workflows; and automated stale content management. Replaces removed ci.yml, codeql-analysis.yml, linter.yml, npm-publish.yml workflows.
Workflow Scripts - Validation & Analysis .github/workflows/scripts/check-tsdoc.js, .github/workflows/scripts/check-minio-compliance.cjs, .github/workflows/scripts/css_check.py, .github/workflows/scripts/check_docstrings.py, .github/workflows/scripts/compare_translations.py, .github/workflows/scripts/countline.py, .github/workflows/scripts/translation_check.py, .github/workflows/scripts/app_health_check.sh, .github/workflows/scripts/venv.sh, .github/workflows/requirements.txt	Introduces comprehensive validation suite: TSDoc enforcement, MinIO legacy code detection, embedded CSS policy enforcement, Google-style Python docstring validation, translation file comparison, source code line-count analysis, i18n tag validation, container health checking, and Python virtual environment setup. High-density logic for pattern detection and violation reporting.
Workflow Configuration & Documentation .github/workflows/README.md, .github/workflows/config/check-pr-issue-skip-usernames.txt, .github/workflows/config/countline_excluded_file_list.txt	Documents workflow file organization, naming conventions, and Python script standards; provides skip lists for PR-issue checks and exclusion patterns for line-count metrics.
GitHub Issue & PR Templates .github/ISSUE_TEMPLATE/bug-report.md, .github/ISSUE_TEMPLATE/feature-request.md, .github/pull_request_template.md, CODEOWNERS	Updates issue templates with standardized naming and labels; expands PR template with CodeRabbit review, test coverage, breaking change, and documentation checklist sections; establishes code ownership for .github/ directory.
Husky Pre-Commit Hooks .husky/commit-msg, .husky/post-merge, .husky/pre-commit	Implements multi-stage commit validation: enforces conventional commit messages, triggers dependency installation on package.json changes, and runs comprehensive pre-commit checks (ESLint, Prettier, MinIO compliance, i18n, CSS, docstrings, translations, TSDoc, accessibility, Python linting via venv).
Cypress E2E Test Infrastructure cypress.config.ts, cypress/README.md, cypress/support/commands.ts, cypress/support/e2e.ts, cypress/fixtures/users.json, cypress/fixtures/advertisementData.json	Establishes end-to-end testing framework with detailed browser configuration (viewports, timeouts, coverage), custom Cypress commands for API-based login with session caching and toast assertions, and fixture data for user and advertisement test scenarios.
Cypress Page Objects - Admin Portal cypress/pageObjects/AdminPortal/AdminDashboard.ts, cypress/pageObjects/AdminPortal/AdminEventPage.ts, cypress/pageObjects/AdminPortal/AdvertisementPage.ts, cypress/pageObjects/AdminPortal/ActionItemPage.ts, cypress/pageObjects/AdminPortal/LeftDrawer.ts, cypress/pageObjects/AdminPortal/PeoplePage.ts, cypress/pageObjects/AdminPortal/PostPage.ts	Defines reusable page object abstractions for admin portal features: organization/dashboard navigation, event CRUD operations, advertisement management, action item workflows, responsive layout validation, member management, and post creation/editing. Provides fluent chainable APIs.
Cypress Page Objects - Auth & User Portal cypress/pageObjects/auth/LoginPage.ts, cypress/pageObjects/UserPortal/UserDashboard.ts	Implements login page interactions with optional reCAPTCHA handling and user dashboard navigation. Includes toast validation helpers.
Cypress E2E Test Specs - Admin cypress/e2e/admin_spec/event.cy.ts, cypress/e2e/admin_spec/actionItem.cy.ts, cypress/e2e/admin_spec/advertisement.cy.ts, cypress/e2e/admin_spec/leftDrawer.cy.ts, cypress/e2e/admin_spec/people.cy.ts, cypress/e2e/admin_spec/posts.cy.ts	Comprehensive test suites for admin portal workflows: event creation/update/deletion, action item management with volunteer assignment, advertisement campaigns, responsive drawer styling, people/member search and addition, and post management.
Cypress E2E Test Specs - Login & Dashboard cypress/e2e/login_spec/adminLogin.cy.ts, cypress/e2e/login_spec/userLogin.cy.ts, cypress/e2e/dashboard_spec/adminDashboard.cy.ts, cypress/e2e/dashboard_spec/userDashboard.cy.ts	End-to-end tests for authentication flows (superAdmin/admin/user login success/failure) and dashboard navigation for both admin and user roles. Includes error toast and localStorage validation.
Cypress Script Tests .github/workflows/scripts/test/README.md, .github/workflows/scripts/test/test_css_check.py, .github/workflows/scripts/test/test_translation_check.py	Unit test coverage for CSS policy enforcement and translation validation scripts, covering violation detection, file processing, directory scanning, output formatting, and CLI argument handling.
Docker Configuration docker/Dockerfile.dev, docker/Dockerfile.deploy, docker/Dockerfile.prod, docker/docker-compose.dev.yaml, docker/docker-compose.deploy.yaml, docker/docker-compose.prod.yaml, config/docker/setup/nginx.conf, config/docker/setup/apache.conf	Multi-stage Docker builds for development, deployment, and production environments with pnpm-based dependency management. Production uses nginx with GraphQL/WebSocket proxying and gzip compression; includes docker-compose orchestration with healthchecks, volume mounts, and environment configuration for each environment.
Vite & Build Configuration config/vite.config.ts, config/vite.config.spec.ts	Comprehensive Vite configuration with environment-driven port/API validation, proxy configuration for GraphQL, tree-shaking rules, vendor code chunking (React, MUI, Apollo, i18n), esbuild optimizations, and Istanbul coverage instrumentation. Test specs validate port parsing, API target extraction, and WebSocket path derivation.
Environment & Git Configuration .env.example, .gitignore, .dockerignore, docs/.gitignore, docs/CNAME, docs/README.md	Provides sample environment variables (PORT, Talawa API URL, reCAPTCHA configuration, logging toggles); expands .gitignore with Python ecosystem patterns and environment file variants; adds Docker build context exclusions; establishes documentation site configuration for docs-admin.talawa.io.
Removed Docker & Build Files Docker_Container/dockerfile, Docker_Container/docker-compose.yml, Docker_Container/README.md, Docker_Container/.dockerignore	Removes deprecated Docker setup from Docker_Container directory in favor of centralized config/docker setup.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~65 minutes

Possibly related PRs

• #3988 — Adds Cypress E2E test infrastructure, page objects, fixtures, and support commands alongside commitlint/Husky commit-msg configuration files
• #4762 — Introduces .coderabbit.yaml configuration for automated code review framework and validation standards

Suggested reviewers

• palisadoes
• noman2002
• Kevoniat

---

Caution

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

• Ignore

❌ Failed checks (1 error, 2 warnings, 4 inconclusive)

Check name	Status	Explanation	Resolution
Component Architecture Compliance	❌ Error	Component architecture compliance check reveals multiple violations: ProfileForm.tsx (820 lines) not refactored with zero FormTextField usages; inline interfaces remain in DatePicker.tsx and TimePicker.tsx; inconsistent architectural implementation across components.	Complete refactoring by adding FormTextField usages to ProfileForm.tsx, extracting inline interfaces from DatePicker and TimePicker into separate files, ensuring consistent FormFieldGroup wrappers, and verifying accessibility attributes via wrappers.
Description check	⚠️ Warning	The PR description is largely incomplete despite the template; critical sections are missing or empty, including motivation, breaking change details, and proper summary.	Complete the description by filling in the Summary section with clear motivation, explicitly state if breaking changes exist, and provide more detail beyond the one-line refactor statement.
Out of Scope Changes check	⚠️ Warning	The raw_summary shows 375+ lines of configuration, workflow, Docker setup, and test infrastructure changes, which are significantly out of scope for a component refactor targeting #6310.	Remove all unrelated changes (config files, workflows, Docker setup, and test infrastructure). Keep only the component refactoring changes directly addressing the FormFieldGroup migration in shared components.
Title check	❓ Inconclusive	The PR title 'Refactor' is vague and generic, providing no meaningful information about the specific changes made.	Use a more descriptive title such as 'Refactor: Replace Form.Group/Form.Control with FormFieldGroup in shared components' to clearly convey the primary change.
Linked Issues check	❓ Inconclusive	The PR references issue #6310 with a clear objective to refactor components to use FormFieldGroup, but without the actual code changes visible in the summary, compliance cannot be fully verified.	Verify that all files mentioned in #6310 (TimePicker, DatePicker, EventForm, DateRangePicker, Recurrence sections, ProfileForm) have been refactored to use FormFieldGroup and typed field components per the acceptance criteria.
Test Coverage Gate	❓ Inconclusive	PR contains only configuration, infrastructure, and test setup files with zero source code modifications in src/ directory, making test coverage requirement inapplicable.	Clarify if PR is infrastructure-only or if FormFieldGroup refactoring source changes should be included. If refactoring intended, add component modifications with test coverage and re-run coverage verification.
Typescript Compilation	❓ Inconclusive	PR summary lacks actual TypeScript source code changes; configuration files appear syntactically valid but without full compilation test execution, TypeScript error status cannot be confirmed.	Execute pnpm run typecheck locally, provide actual src/ directory modifications implementing FormFieldGroup refactoring, and verify full compilation without errors or warnings.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring coverage is 98.45% which is sufficient. The required threshold is 80.00%.

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

[palisadoes]

Please title of the PR to be more search friendly

Please also:

1. Fix any failing tests
2. Ensure test code coverage for your patch meets our minimum >=95% requirements
3. Fix any CI/CD failures. Click on the Details link for the tests to get an explanation of the cause(s)
   1. The sensitive files check does not prevent the entire test suite from running.
4. Ensure code rabbit approves your changes
5. Remedy any conflicting files