[UXD][AAP-25027] AWX - updates to Inventories section breadcrumbs & headers

cypress/e2e/awx/infrastructure/hosts/hosts.cy.ts

@@ -36,7 +36,7 @@ describe('Host Tests', () => {
     const hostName = 'E2E Inventory host ' + randomString(4);
     cy.navigateTo('awx', 'hosts');
     cy.clickButton(/^Create host$/);
-    cy.verifyPageTitle('Create Host');
+    cy.verifyPageTitle('Create host');
     cy.getByDataCy('name').type(hostName);
     cy.getByDataCy('description').type('This is the description');
     cy.singleSelectByDataCy('inventory', inventory.name);
@@ -48,7 +48,7 @@ describe('Host Tests', () => {
     cy.navigateTo('awx', 'hosts');
     cy.filterTableByMultiSelect('name', [hostName]);
     cy.getByDataCy('edit-host').click();
-    cy.verifyPageTitle('Edit host');
+    cy.verifyPageTitle(`Edit ${hostName}`);
     cy.getByDataCy('description').clear().type('This is the description edited');
     cy.getByDataCy('Submit').click();
     cy.hasDetail(/^Description$/, 'This is the description edited');
@@ -82,7 +82,7 @@ describe('Host Tests', () => {
     const hostName = 'E2E Inventory host ' + randomString(4);
     cy.navigateTo('awx', 'hosts');
     cy.clickButton(/^Create host$/);
-    cy.verifyPageTitle('Create Host');
+    cy.verifyPageTitle('Create host');
     cy.getByDataCy('name').type(hostName);
     cy.getByDataCy('description').type('This is the description');
     cy.singleSelectByDataCy('inventory', inventory.name);

cypress/e2e/awx/inventories-constructed/inventoriesConstructed.cy.ts

@@ -135,7 +135,7 @@ describe('Constructed Inventories CRUD Tests', () => {
     cy.verifyPageTitle(newInventory.name);
     cy.getByDataCy('organization').contains(organization.name);
     cy.getByDataCy('edit-inventory').click();
-    cy.verifyPageTitle('Edit Constructed Inventory');
+    cy.verifyPageTitle(`Edit ${newInventory.name}`);
     cy.getByDataCy('toggle-json').click();
     cy.getByDataCy('source-vars').type(
       `{"plugin": "constructed","strict": true,"groups": {"is_shutdown": "state | default('running') == 'shutdown'","product_dev": "account_alias == 'product_dev'"}}`,

cypress/e2e/awx/inventories-source/inventorySource.cy.ts

@@ -65,7 +65,7 @@ describe('Inventory Sources', () => {
           credential = cred;
           goToSourceList(inventory.name);
           cy.clickButton(/^Create source/);
-          cy.verifyPageTitle('Add new source');
+          cy.verifyPageTitle('Create source');
           cy.getByDataCy('name').type('project source');
           cy.selectDropdownOptionByResourceName('source_control_type', 'Sourced from a Project');
           cy.selectDropdownOptionByResourceName('project', project.name);
@@ -125,7 +125,7 @@ describe('Inventory Sources', () => {
       goToSourceList(inventory.name);
       // Create inventory source
       cy.getByDataCy('create-source').click();
-      cy.verifyPageTitle('Add new source');
+      cy.verifyPageTitle('Create source');
       cy.getByDataCy('name').type('amazon ec2 source');
       cy.selectDropdownOptionByResourceName('source_control_type', 'Amazon EC2');
       cy.getByDataCy('host-filter').type('/^test$/');
@@ -136,7 +136,7 @@ describe('Inventory Sources', () => {
       cy.getByDataCy('Submit').click();
       cy.verifyPageTitle('amazon ec2 source');
       cy.clickButton('Edit inventory source');
-      cy.verifyPageTitle('Edit source');
+      cy.verifyPageTitle(`Edit amazon ec2 source`);
       cy.getByDataCy('name').clear().type('updated amazon ec2 source');
       cy.getByDataCy('overwrite_vars').check();
       cy.getByDataCy('Submit').click();
@@ -146,7 +146,7 @@ describe('Inventory Sources', () => {
       // Edit inventory source
       cy.clickButton('Edit inventory source');
       cy.location('pathname').should('match', /\/edit$/);
-      cy.verifyPageTitle('Edit source');
+      cy.verifyPageTitle(`Edit updated amazon ec2 source`);
       cy.getByDataCy('name').clear().type('new project');
       cy.selectDropdownOptionByResourceName('source_control_type', 'Sourced from a Project');
       cy.getByDataCy('overwrite_vars').check();

cypress/e2e/awx/inventories/inventoryGroup.cy.ts

@@ -50,7 +50,7 @@ describe('Inventory Groups', () => {
         cy.verifyPageTitle(inventory.name);
         cy.get(`a[href*="/groups?"]`).click();
         cy.clickButton(/^Create group$/);
-        cy.verifyPageTitle('Create new group');
+        cy.verifyPageTitle('Create group');
         cy.get('[data-cy="name"]').type(newGroupName);
         cy.get('[data-cy="description"]').type('This is a description');
         cy.dataEditorTypeByDataCy('variables', 'test: true');
@@ -99,11 +99,8 @@ describe('Inventory Groups', () => {
         cy.getByDataCy('name-column-cell').should('contain', host.name);
         cy.clickTab(/^Groups$/, true);
         cy.filterTableByMultiSelect('name', [group.name]);
-        cy.clickTableRowAction('name', group.name, 'edit-group', {
-          inKebab: false,
-          disableFilter: true,
-        });
-        cy.verifyPageTitle('Edit group');
+        cy.clickTableRowKebabAction(group.name, 'edit-group', false);
+        cy.verifyPageTitle(`Edit ${group.name}`);
         cy.get('[data-cy="name-form-group"]').type('-changed');
         cy.get('[data-cy="Submit"]').click();
         cy.verifyPageTitle(group.name + '-changed');
@@ -181,7 +178,7 @@ describe('Inventory Groups', () => {
         cy.verifyPageTitle(inventory.name);
         cy.get(`a[href*="/groups?"]`).click();
         cy.clickButton(/^Create group$/);
-        cy.verifyPageTitle('Create new group');
+        cy.verifyPageTitle('Create group');
         cy.get('[data-cy="name"]').type(newGroupName);
         cy.get('[data-cy="description"]').type('This is a description');
         cy.dataEditorTypeByDataCy('variables', 'test: true');
@@ -229,7 +226,7 @@ describe('Inventory Groups', () => {
         cy.verifyPageTitle(group.name);
         cy.intercept('PATCH', awxAPI`/groups/*/`).as('editGroup');
         cy.get('[data-cy="edit-group"]').click();
-        cy.verifyPageTitle('Edit group');
+        cy.verifyPageTitle(`Edit ${group.name}`);
         cy.get('[data-cy="name-form-group"]').type('-changed');
         cy.get('[data-cy="Submit"]').click();
         cy.wait('@editGroup')
@@ -262,7 +259,7 @@ describe('Inventory Groups', () => {
         cy.verifyPageTitle(group.name);
         cy.clickTab(/^Related Groups$/, true);
         cy.clickButton(/^Create group/);
-        cy.verifyPageTitle('Create new group');
+        cy.verifyPageTitle('Create group');
         cy.get('[data-cy="name-form-group"]').type(newRelatedGroup);
         cy.get('[data-cy="Submit"]').click();
         cy.contains(newRelatedGroup);
@@ -315,7 +312,7 @@ describe('Inventory Groups', () => {
           disableFilter: true,
         });
         cy.intercept('PATCH', awxAPI`/groups/*/`).as('editGroup');
-        cy.verifyPageTitle('Edit group');
+        cy.verifyPageTitle(`Edit ${newGroup}`);
         cy.get('[data-cy="name-form-group"]').type('-changed');
         cy.get('[data-cy="Submit"]').click();
         cy.wait('@editGroup')
@@ -361,7 +358,7 @@ describe('Inventory Groups', () => {
         cy.verifyPageTitle(group.name);
         cy.clickTab(/^Related Groups$/, true);
         cy.clickButton(/^Create group/);
-        cy.verifyPageTitle('Create new group');
+        cy.verifyPageTitle('Create group');
         cy.get('[data-cy="name-form-group"]').type(newRelatedGroup);
         cy.get('[data-cy="Submit"]').click();
         cy.contains(newRelatedGroup);
@@ -423,7 +420,7 @@ describe('Inventory Groups', () => {
       cy.clickModalButton(/^Close/);
       cy.intercept('POST', awxAPI`/hosts/`).as('createHost');
       cy.clickButton(/^Create host$/);
-      cy.verifyPageTitle('Create Host');
+      cy.verifyPageTitle('Create host');
       cy.getByDataCy('name').type(newHostName);
       cy.getByDataCy('description').type('This is the description');
       cy.clickButton(/^Create host$/);
@@ -432,7 +429,7 @@ describe('Inventory Groups', () => {
         .then((response) => {
           expect(response?.statusCode).to.eql(201);
         });
-      cy.verifyPageTitle('Host Details');
+      cy.verifyPageTitle(newHostName);
       cy.clickTab(/^Back to Hosts$/, true);
       cy.filterTableBySingleSelect('name', newHostName);
     });
@@ -447,7 +444,7 @@ describe('Inventory Groups', () => {
         disableFilter: true,
       });
       cy.intercept('PATCH', awxAPI`/hosts/*/`).as('editHost');
-      cy.verifyPageTitle('Edit host');
+      cy.verifyPageTitle(`Edit ${thisHost.name}`);
       cy.getByDataCy('name').type('-edited');
       cy.getByDataCy('description').type('This is the description');
       cy.clickButton(/^Save host$/);
@@ -456,7 +453,7 @@ describe('Inventory Groups', () => {
         .then((response) => {
           expect(response?.statusCode).to.eql(200);
         });
-      cy.verifyPageTitle('Host Details');
+      cy.verifyPageTitle(`${thisHost.name}-edited`);
       cy.clickTab(/^Back to Hosts$/, true);
       cy.filterTableBySingleSelect('name', thisHost.name + '-edited');
     });

cypress/e2e/awx/inventory-host/inventoryHostRegular.cy.ts

@@ -61,7 +61,7 @@ describe('Inventory Host Tab Tests for regular inventory', () => {
     const hostName = 'E2E Inventory host ' + randomString(4);
     cy.navigateTo('awx', 'hosts');
     cy.clickButton(/^Create host$/);
-    cy.verifyPageTitle('Create Host');
+    cy.verifyPageTitle('Create host');
     cy.getByDataCy('name').type(hostName);
     cy.getByDataCy('description').type('This is the description');
     cy.singleSelectByDataCy('inventory', inventory.name);

cypress/support/hostsfunctions.ts

@@ -21,12 +21,12 @@ export function createAndCheckHost(host_type: string, inventory: string) {
 
   // create host
   cy.clickButton(/^Create host$/);
-  cy.verifyPageTitle('Create Host');
+  cy.verifyPageTitle('Create host');
   cy.getByDataCy('name').type(hostName);
   cy.getByDataCy('description').type('This is the description');
 
   if (host_type === 'stand_alone_host') {
-    cy.singleSelectByDataCy('inventory', inventory);
+    cy.singleSelectByDataCy('inventory-form-group', inventory);
   }
 
   // after creation - verify data is currect
@@ -55,19 +55,19 @@ export function createHost(host_type: string, inventoryID: number) {
   return hostName;
 }
 
-function editHost(invenotryName: string, host_type: string, hostName: string, view: string) {
+function editHost(inventoryName: string, host_type: string, hostName: string, view: string) {
   // function that editing host data from list or details views
   // this function cover both inventory host and stand alone host
   if (view === 'list') {
-    navigateToBaseView(host_type, invenotryName);
+    navigateToBaseView(host_type, inventoryName);
     cy.filterTableByMultiSelect('name', [hostName]);
   } else {
     // for details view
-    navigateToHost(host_type, hostName, '[data-cy="name-column-cell"] a', invenotryName);
+    navigateToHost(host_type, hostName, '[data-cy="name-column-cell"] a', inventoryName);
   }
 
   cy.getByDataCy('edit-host').click();
-  cy.verifyPageTitle('Edit host');
+  cy.verifyPageTitle(`Edit ${hostName}`);
   cy.getByDataCy('description').clear().type('This is the description edited');
   cy.getByDataCy('Submit').click();
   cy.hasDetail(/^Description$/, 'This is the description edited');
@@ -155,7 +155,7 @@ export function checkHostGroup(host_type: string, organization: Organization) {
     cy.clickLink(/^Groups$/);
     //check edit group
     cy.getByDataCy('edit-group').click();
-    cy.verifyPageTitle('Edit group');
+    cy.verifyPageTitle(`Edit ${group.name}`);
     cy.getByDataCy('name-form-group').type('-changed');
     cy.getByDataCy('Submit').click();
     cy.verifyPageTitle(group.name + '-changed');
@@ -271,7 +271,7 @@ export function createHostAndCancelJob(
     cy.navigateTo('awx', 'inventories');
     cy.filterTableByMultiSelect('name', [inventory.name]);
     cy.get('[data-cy="name-column-cell"]').contains(inventory.name).click();
-    cy.get('.pf-v5-c-tabs__item > a').contains('Job templates').click();
+    cy.get('.pf-v5-c-tabs__item > a').contains('Job Templates').click();
     // run  a template and wait for redirect to Job output
     cy.get('[data-cy="launch-template"]').first().click();
     cy.location('pathname').should('match', /\/output$/);
@@ -317,7 +317,7 @@ export function launchHostJob(
     cy.navigateTo('awx', 'inventories');
     cy.filterTableByMultiSelect('name', [inventory.name]);
     cy.get('[data-cy="name-column-cell"]').contains(inventory.name).click();
-    cy.contains(`[role='tab']`, 'Job templates').click();
+    cy.contains(`[role='tab']`, 'Job Templates').click();
 
     // run  a template and wait for request
     cy.intercept('POST', awxAPI`/job_templates/*/launch`).as('launch');

frontend/awx/resources/inventories/InventoryForm.tsx

@@ -98,10 +98,10 @@ export function CreateInventory(props: { inventoryKind: '' | 'constructed' | 'sm
   const getPageUrl = useGetPageUrl();
   const title =
     inventoryKind === ''
-      ? t('Create Inventory')
+      ? t('Create inventory')
       : inventoryKind === 'smart'
-        ? t('Create Smart Inventory')
-        : t('Create Constructed Inventory');
+        ? t('Create smart inventory')
+        : t('Create constructed inventory');
 
   const defaultValue =
     inventoryKind === 'smart'
@@ -257,13 +257,6 @@ export function EditInventory() {
     );
   }
 
-  const title =
-    inventory.kind === ''
-      ? t('Edit Inventory')
-      : inventory.kind === 'smart'
-        ? t('Edit Smart Inventory')
-        : t('Edit Constructed Inventory');
-
   const defaultValue =
     inventory.kind === 'smart'
       ? { ...inventory, instanceGroups: originalInstanceGroups }
@@ -282,10 +275,18 @@ export function EditInventory() {
   return (
     <PageLayout>
       <PageHeader
-        title={title}
+        title={
+          inventory?.name
+            ? t('Edit {{inventoryName}}', { inventoryName: inventory?.name })
+            : t('Inventory')
+        }
         breadcrumbs={[
           { label: t('Inventories'), to: getPageUrl(AwxRoute.Inventories) },
-          { label: title },
+          {
+            label: inventory?.name
+              ? t('Edit {{inventoryName}}', { inventoryName: inventory?.name })
+              : t('Inventory'),
+          },
         ]}
       />
       <AwxPageForm<InventoryCreate>

frontend/awx/resources/inventories/InventoryPage/InventoryPage.tsx

@@ -139,7 +139,7 @@ export function InventoryPage() {
           !isSmartInventory &&
             !isConstructedInventory && { label: t('Sources'), page: AwxRoute.InventorySources },
           { label: t('Jobs'), page: AwxRoute.InventoryJobs },
-          { label: t('Job templates'), page: AwxRoute.InventoryJobTemplates },
+          { label: t('Job Templates'), page: AwxRoute.InventoryJobTemplates },
         ]}
         params={params}
         componentParams={{ inventory }}

frontend/awx/resources/inventories/inventoryGroup/InventoryGroupForm.cy.tsx

@@ -21,7 +21,7 @@ describe('CreateGroup', () => {
       .its('results')
       .should('be.an', 'array')
       .then(() => {
-        cy.contains('Create new group');
+        cy.contains('Create group');
       });
   });
 

frontend/awx/resources/inventories/inventoryGroup/InventoryGroupForm.tsx

@@ -26,7 +26,7 @@ interface GroupFormPageHeaderProps {
 
 interface BreadCrumbLink {
   label: string;
-  to: string;
+  to?: string;
 }
 
 type BreadCrumbs = Record<string, BreadCrumbLink>;
@@ -66,7 +66,7 @@ function GroupFormPageHeader(props: GroupFormPageHeaderProps) {
       }),
     },
     relatedGroups: {
-      label: t('Related groups'),
+      label: t('Related Groups'),
       to: getPageUrl(AwxRoute.InventoryGroupRelatedGroups, {
         params: {
           ...breadcrumbsParams.id,
@@ -75,6 +75,8 @@ function GroupFormPageHeader(props: GroupFormPageHeaderProps) {
         },
       }),
     },
+    createGroup: { label: t('Create group') },
+    editGroup: { label: t('Edit {{groupName}}', { groupName: props.groupName }) },
   };
 
   return (
@@ -97,12 +99,17 @@ export function CreateGroup() {
   if (error) return <AwxError error={error} handleRefresh={refresh} />;
   if (!inventory) return <LoadingPage breadcrumbs tabs />;
 
-  const breadcrumbs: Array<keyof BreadCrumbs> = ['inventories', 'inventory', 'groups'];
+  const breadcrumbs: Array<keyof BreadCrumbs> = [
+    'inventories',
+    'inventory',
+    'groups',
+    'createGroup',
+  ];
 
   return (
     <PageLayout>
       <GroupFormPageHeader
-        title={t('Create new group')}
+        title={t('Create group')}
         breadcrumbs={breadcrumbs}
         urlParams={params}
         inventoryName={inventory?.name}
@@ -124,12 +131,12 @@ export function EditGroup() {
   if (error) return <AwxError error={error} handleRefresh={refresh} />;
   if (!group) return <LoadingPage breadcrumbs tabs />;
 
-  const breadcrumbs: Array<keyof BreadCrumbs> = ['inventories', 'inventory', 'groups', 'group'];
+  const breadcrumbs: Array<keyof BreadCrumbs> = ['inventories', 'inventory', 'groups', 'editGroup'];
 
   return (
     <PageLayout>
       <GroupFormPageHeader
-        title={t('Edit group')}
+        title={t('Edit {{groupName}}', { groupName: group?.name })}
         breadcrumbs={breadcrumbs}
         urlParams={params}
         inventoryName={group?.summary_fields.inventory.name}
@@ -158,12 +165,13 @@ export function CreateRelatedGroup() {
     'groups',
     'group',
     'relatedGroups',
+    'createGroup',
   ];
 
   return (
     <PageLayout>
       <GroupFormPageHeader
-        title={t('Create new group')}
+        title={t('Create group')}
         breadcrumbs={breadcrumbs}
         urlParams={params}
         inventoryName={inventoryGroup?.summary_fields.inventory.name}