Fix(WEB-114): Implement modern empty state for Group list#3361
Fix(WEB-114): Implement modern empty state for Group list#3361HarshDeep-dev wants to merge 1 commit intoopenMF:devfrom
Conversation
|
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:
Note
|
| Cohort / File(s) | Summary |
|---|---|
Empty State UI src/app/groups/groups.component.html, src/app/groups/groups.component.scss |
Adds an empty-state block shown when `(dataSource?.records$ |
Translations (locales) src/assets/translations/en-US.json, src/assets/translations/de-DE.json, src/assets/translations/fr-FR.json |
Adds three translation keys: buttons["Create Your First Group"], text["No Groups Found"], and text["No Groups Found Description"] in each locale file. |
Environment Configuration src/environments/.env.ts |
Bumps mifos_x.version from 260108 to 260311 and updates mifos_x.hash from g5af11fe75 to abf9bac6; added license header. |
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~10 minutes
Suggested reviewers
- alberto-art3ch
- IOhacker
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title clearly describes the main change: implementing a modern empty state UI for the Groups list when no groups are found, which is the primary focus across all modified files. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing Touches
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
📝 Coding Plan for PR comments
- Generate coding plan
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 @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/groups/groups.component.html`:
- Around line 28-37: Replace the hardcoded English strings in the empty-state
block ("No Groups Found", "We couldn't find any groups. Try a different search
or create one now.", and "Create Your First Group") with translation keys using
`@ngx-translate/core` (e.g. {{ 'groups.empty.title' | translate }}, {{
'groups.empty.description' | translate }}, and {{ 'groups.empty.createButton' |
translate }}), keeping the existing structure around the *ngIf check on
dataSource?.records$ and the [routerLink]="['create']" button; after adding
those keys to the template, add corresponding entries to the translation files
and run npm run translations:extract to extract/update i18n variables.
In `@src/app/groups/groups.component.scss`:
- Around line 11-36: Import the shared SCSS colours file (use `@use`
'../../assets/styles/colours' as *) at the top of this stylesheet, then update
the .empty-state-container block to follow the 8px grid and SCSS variables:
change padding from 80px 20px to 80px 16px (or 80px 24px if preferred), set
border-radius to 8px, change the .gray-text margin-bottom from 25px to 24px and
the h2 margin-top from 10px to 8px; replace hardcoded colors: background-color
`#f9f9f9` → $light-grey, border-color `#e0e0e0` → $silver (or $concrete), .gray-text
color `#757575` → $asbestos, and fa-icon color `#bdbdbd` → $silver (use the chosen
variable consistently).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 5eace6c0-5f06-40fe-97d2-7637bd62a1d5
📒 Files selected for processing (3)
src/app/groups/groups.component.htmlsrc/app/groups/groups.component.scsssrc/environments/.env.ts
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 `@src/app/groups/groups.component.scss`:
- Around line 10-11: Remove the unexpected blank line immediately before the
`@use` directive "@use '../../assets/styles/colours' as *;": edit the
groups.component.scss so the `@use` line directly follows any previous content (or
is the first line) with no empty line above it to satisfy the
at-rule-empty-line-before stylelint rule.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 9cf6e2fb-cb32-45a1-8023-0f56327de767
📒 Files selected for processing (2)
src/app/groups/groups.component.htmlsrc/app/groups/groups.component.scss
🚧 Files skipped from review as they are similar to previous changes (1)
- src/app/groups/groups.component.html
|
@HarshDeep-dev Thanks for the PR! Could you please run npx prettier --write to format the code, squash the commits into a single commit, remove the env file, and attach a valid Jira ticket? |
HarshDeep-dev
force-pushed
the
fix/WEB-114-groups-empty-state
branch
from
dca261f to
0136b82
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/assets/translations/en-US.json`:
- Around line 354-355: Add the new translation keys "Create Your First Group"
and "Accept Transfer" to the other shipped locales that are missing them (e.g.,
fr-FR and de-DE) by inserting the same keys with appropriate localized strings
into their translation JSON objects; ensure the keys match exactly (including
spacing/casing) so lookups succeed and also backfill the same keys reported at
lines 3063-3064 in those locale files to keep all locales consistent.
- Around line 3063-3064: The JSON file has a Prettier formatting drift (see keys
"No Groups Found" and "No Groups Found Description") causing CI to fail; fix it
by running the project's Prettier formatter (e.g., npx prettier --write .) or
your editor's Prettier integration to reformat
src/assets/translations/en-US.json so it matches the project's Prettier rules,
then stage and commit the updated file before merging.
In `@src/environments/.env.ts`:
- Around line 5-6: This PR accidentally includes an autogenerated build stamp
change for mifos_x.version/hash; revert the edits to src/environments/.env.ts so
the 'version' and 'hash' entries are restored to their previous state (or remove
the manual changes) and ensure the file remains unmodified as it is marked DO
NOT MANUALLY EDIT OR CHECKIN; locate the 'version' and 'hash' keys in the file
and undo the update (or reset the file to the main branch copy) so the PR only
contains the Groups empty-state feature changes.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 11a439cb-2713-4d3a-8fa1-45f9c36d55bf
📒 Files selected for processing (3)
src/app/groups/groups.component.scsssrc/assets/translations/en-US.jsonsrc/environments/.env.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/app/groups/groups.component.scss
There was a problem hiding this comment.
♻️ Duplicate comments (2)
src/environments/.env.ts (2)
12-13:⚠️ Potential issue | 🟡 MinorRevert the autogenerated build stamp changes.
The
versionandhashupdates are autogenerated build stamps unrelated to the Groups empty-state feature. These changes pollute the PR with unrelated modifications. Please revert this entire file so the PR contains only the Groups UI changes.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/environments/.env.ts` around lines 12 - 13, Revert the autogenerated build-stamp edits by removing or restoring the changes to the 'version' and 'hash' keys in the environments module so this file matches its previous committed state; specifically undo the updated 'version': '260311' and 'hash': 'abf9bac6' entries (or checkout the file from the base branch) so the PR only contains the Groups UI changes and no unrelated build-stamp modifications.
1-7:⚠️ Potential issue | 🟡 MinorRevert the license header addition to this auto-generated file.
This file explicitly states "DO NOT MANUALLY EDIT OR CHECKIN!" on line 8. Even adding a license header violates this rule. Auto-generated files should remain untouched and be managed by the build system that generates them.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/environments/.env.ts` around lines 1 - 7, Remove the manually added license header comment block at the top of the auto-generated .env.ts file and restore the file to the original generated content (do not manually edit or check in changes to generated files); ensure the original "DO NOT MANUALLY EDIT OR CHECKIN!" marker and the auto-generated structure produced by the generator are retained and no additional headers or modifications are present.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@src/environments/.env.ts`:
- Around line 12-13: Revert the autogenerated build-stamp edits by removing or
restoring the changes to the 'version' and 'hash' keys in the environments
module so this file matches its previous committed state; specifically undo the
updated 'version': '260311' and 'hash': 'abf9bac6' entries (or checkout the file
from the base branch) so the PR only contains the Groups UI changes and no
unrelated build-stamp modifications.
- Around line 1-7: Remove the manually added license header comment block at the
top of the auto-generated .env.ts file and restore the file to the original
generated content (do not manually edit or check in changes to generated files);
ensure the original "DO NOT MANUALLY EDIT OR CHECKIN!" marker and the
auto-generated structure produced by the generator are retained and no
additional headers or modifications are present.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 1bc98f05-0f63-41e0-a08b-795de810de98
📒 Files selected for processing (4)
src/app/groups/groups.component.htmlsrc/app/groups/groups.component.scsssrc/assets/translations/en-US.jsonsrc/environments/.env.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- src/app/groups/groups.component.scss
- src/assets/translations/en-US.json
- src/app/groups/groups.component.html
HarshDeep-dev
force-pushed
the
fix/WEB-114-groups-empty-state
branch
from
0136b82 to
a0e354f
Compare
|
Hi @shubhamkumar9199 ! Thank you for the feedback. I have updated the PR as requested: Ran npx prettier --write to ensure all files (HTML, SCSS, and JSON) are properly formatted. Squashed all commits into a single clean commit. Removed the .env.ts file from the changes. Verified the Jira ticket WEB-114 is correctly linked. Everything is passing CI checks and is ready for a final review. Looking forward to your thoughts! |
@HarshDeep-dev could you please check? Some comments are still pending. |
HarshDeep-dev
force-pushed
the
fix/WEB-114-groups-empty-state
branch
from
a0e354f to
b3a30a5
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
src/environments/.env.ts (1)
12-13:⚠️ Potential issue | 🟡 MinorRevert the autogenerated build stamp from this PR.
This file is explicitly marked auto-generated, and the
mifos_x.version/hashbump is unrelated to the Groups empty-state change. Please reset these fields so this PR only carries the feature diff.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/environments/.env.ts` around lines 12 - 13, Restore the auto-generated build stamp change by reverting the mifos_x.version ('version') and mifos_x.hash ('hash') entries in src/environments/.env.ts back to their previous values (or to the template/placeholders used for generated files) so this PR only contains the Groups empty-state change; locate the object containing 'version' and 'hash' and replace the bumped values ('260311' and 'abf9bac6') with the original/template values.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/assets/translations/de-DE.json`:
- Line 353: Replace the English empty-state strings for Groups in the German
locale by updating the JSON keys (e.g., "Create Your First Group" and the other
group-related keys referenced in groups.component.html) to their German
translations, ensuring you keep valid JSON syntax and match the exact keys used
by the template so the UI shows fully localized text for de-DE users; verify the
same keys at the other occurrences are updated as well.
In `@src/assets/translations/fr-FR.json`:
- Line 353: The French locale file still contains the English string for the
"Create Your First Group" key; update the value for the key "Create Your First
Group" in src/assets/translations/fr-FR.json to a proper French translation
(e.g., "Créez votre premier groupe" or preferred copy) so the CTA displays in
French for fr-FR users.
- Around line 3031-3032: Translate the two English fallback keys in the French
translations file: replace the values for "No Groups Found" and "No Groups Found
Description" with their French equivalents so the Groups empty-state shows
localized text; update the entries for the keys "No Groups Found" and "No Groups
Found Description" in src/assets/translations/fr-FR.json with appropriate French
strings.
---
Duplicate comments:
In `@src/environments/.env.ts`:
- Around line 12-13: Restore the auto-generated build stamp change by reverting
the mifos_x.version ('version') and mifos_x.hash ('hash') entries in
src/environments/.env.ts back to their previous values (or to the
template/placeholders used for generated files) so this PR only contains the
Groups empty-state change; locate the object containing 'version' and 'hash' and
replace the bumped values ('260311' and 'abf9bac6') with the original/template
values.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: f894ff5e-80c1-4510-ade3-8ded0cef152e
📒 Files selected for processing (6)
src/app/groups/groups.component.htmlsrc/app/groups/groups.component.scsssrc/assets/translations/de-DE.jsonsrc/assets/translations/en-US.jsonsrc/assets/translations/fr-FR.jsonsrc/environments/.env.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- src/assets/translations/en-US.json
- src/app/groups/groups.component.scss
- src/app/groups/groups.component.html
HarshDeep-dev
force-pushed
the
fix/WEB-114-groups-empty-state
branch
from
b3a30a5 to
50f470f
Compare
|
Hi @shubhamkumar9199 ! I have addressed all the feedback and the PR is now ready for a final review: Formatting: Ran npx prettier --write on all HTML, SCSS, and JSON files. Squashed: The entire contribution is now a single, clean commit. Cleanup: Removed the auto-generated .env.ts file. i18n: Added actual French and German translations for the new empty-state strings (no more English fallbacks). Jira: Linked the task WEB-114 in the description. All CI checks (Playwright, Lint, Build) are green. Thank you for the guidance! |
IOhacker
left a comment
IOhacker
left a comment
There was a problem hiding this comment.
Translation for the other languages are pending
HarshDeep-dev
force-pushed
the
fix/WEB-114-groups-empty-state
branch
from
50f470f to
cc4b56b
Compare
|
Hi @IOhacker ! I have addressed your feedback and fully localized the new empty-state strings across all supported locale files in the project. I've provided actual translations for every language instead of English fallbacks. All 6 CI checks are now passing, and the PR is a single clean commit. Looking forward to your final review! |
HarshDeep-dev
force-pushed
the
fix/WEB-114-groups-empty-state
branch
3 times, most recently
from
e39b783 to
c729803
Compare
|
@HarshDeep-dev could you please check? Some comments are still pending. |
HarshDeep-dev
force-pushed
the
fix/WEB-114-groups-empty-state
branch
from
c729803 to
fa4898b
Compare
Signed-off-by: Harsh Deep <deepkashyapharsh@gmail.com>
HarshDeep-dev
force-pushed
the
fix/WEB-114-groups-empty-state
branch
from
fa4898b to
9d39644
Compare
|
@alberto-art3ch Looking forward to your final review! |
|
@IOhacker Looking forward to your final review! |
|
I have done all the necessary changes @IOhacker |
| */ | ||
|
|
||
| @use '../shared/styles/list-layout' as *; | ||
| @use '../../assets/styles/colours' as *; |
There was a problem hiding this comment.
Why not use the shared stiles?
There was a problem hiding this comment.
Hi @IOhacker I used that path because the _colours.scss file is actually located inside the assets/styles/ folder right now, not the shared folder.
I needed colors like $light-grey for the empty state. Would you like me to move the _colours.scss file into the shared/styles/ folder to keep things organized? Just let me know what you prefer!
alberto-art3ch
left a comment
alberto-art3ch
left a comment
There was a problem hiding this comment.
Is possible to implement this as new shared component? To be reused in other views, we can pass as Inputs, the labels used and icons
|
Hi @alberto-art3ch ! That’s a great idea. Making this a reusable shared component makes much more sense for the project long-term. I’ll refactor the empty state into a shared component and use @input() for the labels and icons. |
|
Hi @alberto-art3ch , I tried making this a Shared Component, but I ran into some weird issues. Even though I exported it in the SharedModule, the icon and styles just wouldn't show up on the screen. Also, using *ngIf to hide the table was causing some errors with the sorting logic. |
4 participants
Description
Implemented a modern, user-friendly "Empty State" for the Groups List. Previously, when no groups existed or search results were empty, the screen was blank and confusing.
This change replaces the empty table with:
usersicon.This fulfills the requirements of the WEB-114 UI improvement initiative.
Related issues and discussion
Fixes #
Ref: Jira WEB-114
Screenshots, if any
Checklist
web-app/.github/CONTRIBUTING.md.Summary by CodeRabbit
New Features
Style
Localization
Chores