feat: Account Operator Pages (#3368)

* Account Operator:  add name and change header of the account operator page
   -> also add 'account name' to the account list page
* chore: updating tests to check for new account name information

Author: jrenee42

cypress/e2e/cloud/operator.test.ts

@@ -131,7 +131,7 @@ describe('Operator Page', () => {
       expect(loc.pathname).to.eq('/operator/accounts/1')
     })
 
-    cy.getByTestID('account-view--header').contains('Account 1')
+    cy.getByTestID('account-view--header').contains('operator1 (1)')
     // should not be able to delete undeletable accounts
     cy.getByTestID('account-delete--button').should('be.disabled')
 

cypress/e2e/cloud/operatorRO.test.ts

@@ -53,6 +53,19 @@ describe('Operator Page', () => {
       expect(loc.pathname).to.eq('/operator/accounts')
     })
 
+    // testing that the "account name" column has been added, and that the first value is 'operator1'
+    cy.getByTestID('table')
+      .find('tr')
+      .first()
+      .find('th')
+      .first()
+      .should('contain.text', 'Account Name')
+
+    // make sure there is a name column with data:
+    cy.getByTestID('name')
+      .first()
+      .should('contain.text', 'operator1')
+
     cy.getByTestID('account-id')
       .first()
       .within(() => {
@@ -66,6 +79,7 @@ describe('Operator Page', () => {
     // make sure the buttons don't exist on the page
     cy.getByTestID('account-delete--button').should('not.exist')
     cy.getByTestID('remove-user--button').should('not.exist')
+    cy.getByTestID('page-title').should('contain.text', 'operator1 (1)')
 
     // go back to account listing
     cy.getByTestID('account-view--back-button').click()

src/operator/account/AccountView.tsx

@@ -15,11 +15,20 @@ import PageSpinner from 'src/perf/components/PageSpinner'
 const AccountView: FC = () => {
   const {account, accountStatus} = useContext(AccountContext)
 
+  let accountTitle = 'loading....'
+  if (account) {
+    if (account?.name) {
+      accountTitle = `${account.name} (${account.id})`
+    } else {
+      accountTitle = `Account ${account.id}`
+    }
+  }
+
   return (
     <PageSpinner loading={accountStatus}>
       <AppWrapper>
-        <Page titleTag={`Account ${account?.id}`} testID="account-view--header">
-          <AppPageHeader title={`Account ${account?.id}`} />
+        <Page titleTag={accountTitle} testID="account-view--header">
+          <AppPageHeader title={accountTitle} />
           <Page.Contents scrollable={true}>
             <DeleteAccountOverlay />
             <AccountViewHeader />

src/operator/constants.tsx

@@ -3,6 +3,7 @@ import {CellInfo, ResourceInfo} from 'src/types'
 import {Link} from 'react-router-dom'
 
 export const accountHeaderInfo = [
+  'Account Name',
   'Company Name',
   'Acct ID',
   'Owner Email',
@@ -13,6 +14,11 @@ export const accountHeaderInfo = [
 ]
 
 export const accountColumnInfo: CellInfo[] = [
+  {
+    path: 'name',
+    name: 'name',
+    defaultValue: '',
+  },
   {
     path: 'billingContact.companyName',
     name: 'company-name',