FWF-6252[feature] - UI for usage quota alert

[Ajay-aot]

User description

📝 Pull Request Summary

Description:
UI for usage quota alert

Related Jira Ticket:
https://aottech.atlassian.net/browse/FWF-6252

Type of Change:

• ✨ Feature
• 🐞 Bug Fix
• ♻️ Refactor
• 🧹 Code Cleanup
• 🧪 Test Addition / Update
• 📦 Dependency Update
• 📘 Documentation Update
• 🚀 Deployment / Config / Security Updates

---

🧩 Microfrontends Affected

Please select all microfrontends or modules that are part of this change:

• forms-flow-admin
• forms-flow-components
• forms-flow-integration
• forms-flow-nav
• forms-flow-review
• forms-flow-service
• forms-flow-submissions
• forms-flow-theme
• scripts
• Others (please specify below)

Details (if Others selected):

---

🧠 Summary of Changes

---

🧪 Testing Details

Testing Performed:

Screenshots (if applicable):

---

✅ Checklist

• Code builds successfully without lint or type errors
• Unit tests added or updated
• Integration or end-to-end tests validated
• UI verified
• Documentation updated (README / Confluence / UI Docs)
• No sensitive information (keys, passwords, secrets) committed
• I have updated the CHANGELOG with relevant details
• I have given a clear and meaningful PR title and description
• I have verified cross-repo dependencies (if any)
• I have confirmed backward compatibility with previous releases
• Verified changes across all selected microfrontends

---

👥 Reviewer Notes

---

PR Type

Enhancement

---

Description

• Add AlertCircleIcon reusable warning SVG component

• Style textarea quota circle overlay

• Add limit alert and reached states

• Center guide panel content vertically

---

Diagram Walkthrough

flowchart LR
  icon["`AlertCircleIcon` component"]
  styles["AI form builder styles"]
  quota["Textarea quota circle"]
  alerts["Limit alert messaging"]
  styles -- "adds" --> quota
  styles -- "styles" --> alerts
  icon -- "supports" --> alerts

Loading

File Walkthrough

Relevant files

Enhancement

index.tsx Add reusable alert circle SVG icon                                              forms-flow-components/src/components/SvgIcons/index.tsx Add new exported AlertCircleIcon SVG component Render circular alert icon with warning mark Support configurable color, className, and props +28/-0    _aiFormBuilder.scss Style quota indicator and limit alerts                                      forms-flow-theme/scss/v8-scss/_aiFormBuilder.scss Add $font-weight-medium theme variable usage Center __guide-panel content with flex layout Add __textarea-wrap and textarea right padding Style quota circle, alert text, timer, and limit-reached messages +82/-2

---

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review ID Collision AlertCircleIcon uses a hard-coded SVG clipPath id. Rendering multiple instances on the same page can cause DOM id collisions and inconsistent clipping behavior, especially in SSR/hydration scenarios. <g clipPath="url(#alertCircleClip)"> <path d="M8 15C6.14348 15 4.36301 14.2625 3.05025 12.9497C1.7375 11.637 1 9.85652 1 8C1 6.14348 1.7375 4.36301 3.05025 3.05025C4.36301 1.7375 6.14348 1 8 1C9.85652 1 11.637 1.7375 12.9497 3.05025C14.2625 4.36301 15 6.14348 15 8C15 9.85652 14.2625 11.637 12.9497 12.9497C11.637 14.2625 9.85652 15 8 15ZM8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16Z" fill={color} /> <path d="M7.00195 11.0001C7.00195 10.8688 7.02782 10.7388 7.07807 10.6174C7.12833 10.4961 7.20199 10.3859 7.29485 10.293C7.38771 10.2002 7.49794 10.1265 7.61927 10.0762C7.7406 10.026 7.87063 10.0001 8.00195 10.0001C8.13328 10.0001 8.26331 10.026 8.38464 10.0762C8.50596 10.1265 8.6162 10.2002 8.70906 10.293C8.80192 10.3859 8.87558 10.4961 8.92583 10.6174C8.97609 10.7388 9.00195 10.8688 9.00195 11.0001C9.00195 11.2653 8.8966 11.5197 8.70906 11.7072C8.52152 11.8948 8.26717 12.0001 8.00195 12.0001C7.73674 12.0001 7.48238 11.8948 7.29485 11.7072C7.10731 11.5197 7.00195 11.2653 7.00195 11.0001ZM7.09995 4.99512C7.08664 4.86896 7.09999 4.74141 7.13915 4.62075C7.17831 4.50008 7.24241 4.389 7.32727 4.2947C7.41214 4.20041 7.51588 4.12501 7.63176 4.0734C7.74765 4.02179 7.87309 3.99512 7.99995 3.99512C8.12681 3.99512 8.25226 4.02179 8.36814 4.0734C8.48403 4.12501 8.58777 4.20041 8.67263 4.2947C8.7575 4.389 8.82159 4.50008 8.86075 4.62075C8.89991 4.74141 8.91327 4.86896 8.89995 4.99512L8.54995 8.50212C8.53819 8.63989 8.47516 8.76823 8.37331 8.86175C8.27146 8.95528 8.13823 9.00717 7.99995 9.00717C7.86168 9.00717 7.72844 8.95528 7.6266 8.86175C7.52475 8.76823 7.46171 8.63989 7.44995 8.50212L7.09995 4.99512Z" fill={color} /> </g> <defs> <clipPath id="alertCircleClip"> <rect width="16" height="16" fill="white" /> Layout Regression The entire guide panel is now a vertically centered flex container. This can unintentionally change the positioning of existing panel states and content, so the non-alert/default views should be checked for visual regressions. &__guide-panel { background: $white-200; /* #fcfcfc */ border-radius: $border-radius; /* 5px */ padding: $spacer-125 $spacer-100 0.875rem; /* 14px */ /* 20px 16px 14px */ min-height: 18.25rem; /* 292px */ // to add some space for the guide panel display: flex; justify-content: center; flex-direction: column; }

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Remove colliding SVG ids The static clipPath id will collide when multiple AlertCircleIcon instances are rendered on the same page, which can cause broken or incorrect SVG clipping. Since this clip just matches the full icon bounds, remove the clipPath entirely and render the paths directly. forms-flow-components/src/components/SvgIcons/index.tsx [526-540] -<g clipPath="url(#alertCircleClip)"> - <path - d="M8 15C6.14348 15 4.36301 14.2625 3.05025 12.9497C1.7375 11.637 1 9.85652 1 8C1 6.14348 1.7375 4.36301 3.05025 3.05025C4.36301 1.7375 6.14348 1 8 1C9.85652 1 11.637 1.7375 12.9497 3.05025C14.2625 4.36301 15 6.14348 15 8C15 9.85652 14.2625 11.637 12.9497 12.9497C11.637 14.2625 9.85652 15 8 15ZM8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16Z" - fill={color} - /> - <path - d="M7.00195 11.0001C7.00195 10.8688 7.02782 10.7388 7.07807 10.6174C7.12833 10.4961 7.20199 10.3859 7.29485 10.293C7.38771 10.2002 7.49794 10.1265 7.61927 10.0762C7.7406 10.026 7.87063 10.0001 8.00195 10.0001C8.13328 10.0001 8.26331 10.026 8.38464 10.0762C8.50596 10.1265 8.6162 10.2002 8.70906 10.293C8.80192 10.3859 8.87558 10.4961 8.92583 10.6174C8.97609 10.7388 9.00195 10.8688 9.00195 11.0001C9.00195 11.2653 8.8966 11.5197 8.70906 11.7072C8.52152 11.8948 8.26717 12.0001 8.00195 12.0001C7.73674 12.0001 7.48238 11.8948 7.29485 11.7072C7.10731 11.5197 7.00195 11.2653 7.00195 11.0001ZM7.09995 4.99512C7.08664 4.86896 7.09999 4.74141 7.13915 4.62075C7.17831 4.50008 7.24241 4.389 7.32727 4.2947C7.41214 4.20041 7.51588 4.12501 7.63176 4.0734C7.74765 4.02179 7.87309 3.99512 7.99995 3.99512C8.12681 3.99512 8.25226 4.02179 8.36814 4.0734C8.48403 4.12501 8.58777 4.20041 8.67263 4.2947C8.7575 4.389 8.82159 4.50008 8.86075 4.62075C8.89991 4.74141 8.91327 4.86896 8.89995 4.99512L8.54995 8.50212C8.53819 8.63989 8.47516 8.76823 8.37331 8.86175C8.27146 8.95528 8.13823 9.00717 7.99995 9.00717C7.86168 9.00717 7.72844 8.95528 7.6266 8.86175C7.52475 8.76823 7.46171 8.63989 7.44995 8.50212L7.09995 4.99512Z" - fill={color} - /> -</g> -<defs> - <clipPath id="alertCircleClip"> - <rect width="16" height="16" fill="white" /> - </clipPath> -</defs> +<path + d="M8 15C6.14348 15 4.36301 14.2625 3.05025 12.9497C1.7375 11.637 1 9.85652 1 8C1 6.14348 1.7375 4.36301 3.05025 3.05025C4.36301 1.7375 6.14348 1 8 1C9.85652 1 11.637 1.7375 12.9497 3.05025C14.2625 4.36301 15 6.14348 15 8C15 9.85652 14.2625 11.637 12.9497 12.9497C11.637 14.2625 9.85652 15 8 15ZM8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16Z" + fill={color} +/> +<path + d="M7.00195 11.0001C7.00195 10.8688 7.02782 10.7388 7.07807 10.6174C7.12833 10.4961 7.20199 10.3859 7.29485 10.293C7.38771 10.2002 7.49794 10.1265 7.61927 10.0762C7.7406 10.026 7.87063 10.0001 8.00195 10.0001C8.13328 10.0001 8.26331 10.026 8.38464 10.0762C8.50596 10.1265 8.6162 10.2002 8.70906 10.293C8.80192 10.3859 8.87558 10.4961 8.92583 10.6174C8.97609 10.7388 9.00195 10.8688 9.00195 11.0001C9.00195 11.2653 8.8966 11.5197 8.70906 11.7072C8.52152 11.8948 8.26717 12.0001 8.00195 12.0001C7.73674 12.0001 7.48238 11.8948 7.29485 11.7072C7.10731 11.5197 7.00195 11.2653 7.00195 11.0001ZM7.09995 4.99512C7.08664 4.86896 7.09999 4.74141 7.13915 4.62075C7.17831 4.50008 7.24241 4.389 7.32727 4.2947C7.41214 4.20041 7.51588 4.12501 7.63176 4.0734C7.74765 4.02179 7.87309 3.99512 7.99995 3.99512C8.12681 3.99512 8.25226 4.02179 8.36814 4.0734C8.48403 4.12501 8.58777 4.20041 8.67263 4.2947C8.7575 4.389 8.82159 4.50008 8.86075 4.62075C8.89991 4.74141 8.91327 4.86896 8.89995 4.99512L8.54995 8.50212C8.53819 8.63989 8.47516 8.76823 8.37331 8.86175C8.27146 8.95528 8.13823 9.00717 7.99995 9.00717C7.86168 9.00717 7.72844 8.95528 7.6266 8.86175C7.52475 8.76823 7.46171 8.63989 7.44995 8.50212L7.09995 4.99512Z" + fill={color} +/> Suggestion importance[1-10]: 7 __ Why: The suggestion is accurate because the hardcoded clipPath id alertCircleClip can collide across multiple inline AlertCircleIcon instances. Since the clip only covers the full 16x16 bounds and adds no real value, removing it is a solid correctness and maintainability improvement.	Medium