feat: add unique OUIA ID to feedback home title#306
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Enterprise Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
Summary by CodeRabbit
WalkthroughAdded OUIA attributes ( Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Review rate limit: 9/10 reviews remaining, refill in 6 minutes. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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/components/HelpPanel/HelpPanelTabs/Feedback/FeedbackPanel.tsx`:
- Around line 133-138: The Content heading currently only sets
data-ouia-component-id; update the Content component in FeedbackPanel (the
element rendering intl.formatMessage(messages.tellAboutExperience)) to include
the OUIA type as well — either add
data-ouia-component-type="feedback-home-title" alongside the existing
data-ouia-component-id or, preferably, use PatternFly's ouiaId and
ouiaComponentType props (ouiaId="feedback-home-title"
ouiaComponentType="feedback-home-title") on that Content element to achieve full
OUIA:Component compliance.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Enterprise
Run ID: 6773639a-7f35-44a9-819a-c193e2d6c7bb
📒 Files selected for processing (1)
src/components/HelpPanel/HelpPanelTabs/Feedback/FeedbackPanel.tsx
| <Content | ||
| component={ContentVariants.h1} | ||
| data-ouia-component-id="feedback-home-title" | ||
| > | ||
| {intl.formatMessage(messages.tellAboutExperience)} | ||
| </Content> |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Does the OUIA (OpenShift UI Automation) framework require both data-ouia-component-id and data-ouia-component-type attributes?
💡 Result:
Yes, the OUIA (Open UI Automation) framework requires both data-ouia-component-id and data-ouia-component-type attributes for components to be OUIA:Component compliant.
Citations:
- 1: https://ouia.readthedocs.io/en/latest/README.html
- 2: https://github.com/RedHatQE/ouia
- 3: https://www.patternfly.org/developer-resources/open-ui-automation
🌐 Web query:
Does PatternFly React Content component support custom data attributes like data-ouia-component-id?
💡 Result:
Yes, the PatternFly React Content component supports custom data attributes like data-ouia-component-id. It explicitly provides ouiaId and ouiaSafe props that control data-ouia-component-id and data-ouia-safe attributes, respectively. PatternFly components generally forward additional props, including custom data-* attributes, to the rendered DOM element. The Content component is listed as OUIA-compliant in the official documentation.
Citations:
- 1: https://www.patternfly.org/components/content
- 2: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/OUIA/OUIA.md
- 3: PF6: Update OUIA ids for PF6 patternfly/patternfly-react#10177
Add data-ouia-component-type attribute to achieve OUIA compliance.
The data-ouia-component-id attribute alone is insufficient. OUIA standards require both data-ouia-component-id and data-ouia-component-type for full OUIA:Component compliance. Add data-ouia-component-type="feedback-home-title" to the Content component, or use PatternFly's dedicated ouiaId prop as the preferred approach:
<Content
component={ContentVariants.h1}
ouiaId="feedback-home-title"
ouiaComponentType="feedback-home-title"
>
{intl.formatMessage(messages.tellAboutExperience)}
</Content>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/HelpPanel/HelpPanelTabs/Feedback/FeedbackPanel.tsx` around
lines 133 - 138, The Content heading currently only sets data-ouia-component-id;
update the Content component in FeedbackPanel (the element rendering
intl.formatMessage(messages.tellAboutExperience)) to include the OUIA type as
well — either add data-ouia-component-type="feedback-home-title" alongside the
existing data-ouia-component-id or, preferably, use PatternFly's ouiaId and
ouiaComponentType props (ouiaId="feedback-home-title"
ouiaComponentType="feedback-home-title") on that Content element to achieve full
OUIA:Component compliance.
Add data-ouia-component-id="feedback-home-title" to the 'Tell us about your experience' heading to enable unique identification in automated tests and avoid strict mode violations from duplicate auto-generated OUIA IDs.
catastrophe-brandon
force-pushed
the
btweed/feedback-ouia-ids
branch
from
87ce532 to
b3ac87f
Compare
2 participants
Summary
Adds unique OUIA component ID to the feedback home page title to enable reliable test automation.
Changes
Added
data-ouia-component-id="feedback-home-title"to the "Tell us about your experience" heading in the feedback home page.Problem Solved
Prevents strict mode violations in Playwright tests caused by duplicate auto-generated OUIA IDs:
OUIA-Generated-Content-14andOUIA-Generated-Content-3(duplicates)feedback-home-title(unique, stable ID)Testing
Enables tests to use:
Instead of:
Related
Required for feedback test migration PR #305