TT-6957 Enhance OrgHead component to sanitize organization names in display

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.

Author: Greg Trihus

src/renderer/src/components/App/OrgHead.cy.tsx

@@ -549,4 +549,51 @@ describe('OrgHead', () => {
     // Should NOT display the organization name
     cy.contains(orgName).should('not.exist');
   });
+
+  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');
+      });
+  });
 });

src/renderer/src/components/App/OrgHead.tsx

@@ -85,6 +85,18 @@ export const OrgHead = () => {
     setOpenMember(true);
   };
 
+  const cleanOrgName = (orgRec: OrganizationD | undefined) => {
+    let name = orgRec?.attributes.name;
+    if (!name) return '';
+    if (name.startsWith('>')) {
+      name = name.slice(1);
+    }
+    if (name.endsWith('<')) {
+      name = name.slice(0, -1);
+    }
+    return name;
+  };
+
   return (
     <Stack direction="row">
       <Typography
@@ -100,7 +112,7 @@ export const OrgHead = () => {
       >
         {isSwitchTeamsScreen
           ? API_CONFIG.productName
-          : orgRec?.attributes.name || API_CONFIG.productName}
+          : cleanOrgName(orgRec) || API_CONFIG.productName}
       </Typography>
       {isTeamScreen && (
         <>