TT-6957 Enhance OrgHead component to sanitize organization names in display #161
Conversation
…isplay This update introduces a new function to clean organization names by removing unwanted characters, specifically ensuring names do not start with `>` or end with `<`. The changes include: - Added `cleanOrgName` function to process organization names before display. - Updated the OrgHead component to utilize the new function for rendering organization names. - Expanded Cypress tests to verify that organization names are displayed correctly without unwanted characters. These improvements enhance the user experience by ensuring that organization names are presented in a clean and consistent format.
There was a problem hiding this comment.
Pull request overview
This PR adds sanitization for organization names displayed in the OrgHead component to remove unwanted leading '>' and trailing '<' characters. The changes address a specific display issue where organization names may contain these characters at the boundaries.
Key Changes:
- Introduced
cleanOrgNamefunction that strips a single leading '>' and/or trailing '<' from organization names - Updated the Typography component to use the sanitized name instead of the raw value
- Added comprehensive Cypress tests verifying the sanitization behavior for three scenarios: prefix only, suffix only, and both
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/renderer/src/components/App/OrgHead.tsx | Added cleanOrgName function to sanitize organization names and integrated it into the main display logic |
| src/renderer/src/components/App/OrgHead.cy.tsx | Added test cases to verify organization names with leading '>' or trailing '<' characters are properly sanitized |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const displayedText = $el.text(); | ||
| expect(displayedText.endsWith('<')).to.be.false; | ||
| expect(displayedText).to.equal('Test Organization'); | ||
| }); |
There was a problem hiding this comment.
Missing blank line before the third test case (testing name with both prefix and suffix). Adding a blank line here would improve readability and maintain consistency with the structure of the previous two test cases within this test.
| }); | |
| }); |
| it('should not display organization name that starts with > or ends with <', () => { | ||
| const orgId = 'test-org-id'; | ||
| // Test with name that starts with > | ||
| const orgNameWithPrefix = '>Test Organization'; | ||
| const orgDataWithPrefix = createMockOrganization(orgId, orgNameWithPrefix); | ||
|
|
||
| mountOrgHead(createInitialState(), ['/team'], orgId, orgDataWithPrefix); | ||
|
|
||
| // The displayed name should not start with > | ||
| cy.get('h6, [variant="h6"]') | ||
| .should('be.visible') | ||
| .then(($el) => { | ||
| const displayedText = $el.text(); | ||
| expect(displayedText.startsWith('>')).to.be.false; | ||
| expect(displayedText).to.equal('Test Organization'); | ||
| }); | ||
|
|
||
| // Test with name that ends with < | ||
| const orgNameWithSuffix = 'Test Organization<'; | ||
| const orgDataWithSuffix = createMockOrganization(orgId, orgNameWithSuffix); | ||
|
|
||
| mountOrgHead(createInitialState(), ['/team'], orgId, orgDataWithSuffix); | ||
|
|
||
| // The displayed name should not end with < | ||
| cy.get('h6, [variant="h6"]') | ||
| .should('be.visible') | ||
| .then(($el) => { | ||
| const displayedText = $el.text(); | ||
| expect(displayedText.endsWith('<')).to.be.false; | ||
| expect(displayedText).to.equal('Test Organization'); | ||
| }); | ||
| const orgNameWithBoth = '>Test Organization<'; | ||
| const orgDataWithBoth = createMockOrganization(orgId, orgNameWithBoth); | ||
|
|
||
| mountOrgHead(createInitialState(), ['/team'], orgId, orgDataWithBoth); | ||
|
|
||
| // The displayed name should not start with > or end with < | ||
| cy.get('h6, [variant="h6"]') | ||
| .should('be.visible') | ||
| .then(($el) => { | ||
| const displayedText = $el.text(); | ||
| expect(displayedText.startsWith('>')).to.be.false; | ||
| expect(displayedText.endsWith('<')).to.be.false; | ||
| expect(displayedText).to.equal('Test Organization'); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
The test cases don't cover several edge cases for the cleanOrgName function: (1) names with multiple leading '>' characters (e.g., '>>Test'), (2) names with multiple trailing '<' characters (e.g., 'Test<<'), (3) names where '>' or '<' appear in the middle (e.g., 'Test>Organization'), (4) names that are just '>' or '<' alone, (5) names with mixed characters like '>><Test<'. Adding these test cases would ensure the sanitization function behaves as expected in all scenarios.
| if (name.startsWith('>')) { | ||
| name = name.slice(1); | ||
| } | ||
| if (name.endsWith('<')) { | ||
| name = name.slice(0, -1); | ||
| } | ||
| return name; |
There was a problem hiding this comment.
The cleanOrgName function only removes a single leading '>' or trailing '<' character. Consider what should happen if an organization name legitimately contains multiple consecutive '>' or '<' characters, or if these characters appear in the middle of the name. The current implementation would only remove one character from each end. If the goal is to remove all leading '>' and trailing '<' characters, consider using a loop or regular expressions. If only one character should be removed, document this behavior clearly in a comment.
| if (name.startsWith('>')) { | |
| name = name.slice(1); | |
| } | |
| if (name.endsWith('<')) { | |
| name = name.slice(0, -1); | |
| } | |
| return name; | |
| // Remove all leading '>' and all trailing '<' characters, but leave any in the middle | |
| return name.replace(/^>+/, '').replace(/<+$/, ''); |
Co-authored-by: Copilot <[email protected]>
This update introduces a new function to clean organization names by removing unwanted characters, specifically ensuring names do not start with
>or end with<. The changes include:cleanOrgNamefunction to process organization names before display.These improvements enhance the user experience by ensuring that organization names are presented in a clean and consistent format.