feat: [DHIS2-15170] Adjust context selector for "new" button

cypress/e2e/NewPage.feature

@@ -19,8 +19,7 @@ Feature: User creates a new entries from the registration page
     Given you are in the main page with no selections made
     And you select org unit
     And you select the Contraceptives Voucher Program
-    Then you see a dropdown button
-    When you click the the first option option
+    When you click the Create new button
     Then you are navigated to the Contraceptives Voucher Program registration page with program selected
     And there should be informative message explaining you need to complete your selections
 
@@ -57,8 +56,7 @@ Feature: User creates a new entries from the registration page
     Given you are in the main page with no selections made
     And you select org unit
     And you select Child Programme
-    Then you see a dropdown button
-    When you click the "New..." option
+    When you click the first option in split button dropdown
     Then you are navigated to the registration page without program selected
     And you see the dropdown menu for selecting tracked entity type
     And you have no program selection
@@ -67,8 +65,7 @@ Feature: User creates a new entries from the registration page
     Given you are in the main page with no selections made
     And you select org unit
     And you select Child Programme
-    Then you see a dropdown button
-    When you click the the first option option
+    When you click the Create new button
     Then you are navigated to the Child Programme registration page with program selected
     And you see a registration form for the Child Programme
     And you have Child Programme selected
@@ -77,8 +74,7 @@ Feature: User creates a new entries from the registration page
     Given you are in the main page with no selections made
     And you select org unit
     And you select the Contraceptives Voucher Program
-    Then you see a dropdown button
-    When you click the the first option option
+    When you click the Create new button
     Then you are navigated to the Contraceptives Voucher Program registration page with program selected
     And there should be informative message explaining you need to complete your selections
     When you select the first category
@@ -90,8 +86,7 @@ Feature: User creates a new entries from the registration page
     And you select the Antenatal care visit program
     Then you see a list of events
     When you select one of the events
-    Then you see a dropdown button
-    When you click the the first option option
+    When you click the Create new button
     Then you are navigated to the Antenatal care visit registration page
     Then program and organisation unit is still selected in top bar
 

cypress/e2e/NewPage/index.js

@@ -203,21 +203,13 @@ When('you select the Inpatient morbidity and mortality program', () => {
         .click();
 });
 
-When('you see a dropdown button', () => {
+When('you click the Create new button', () => {
     cy.get('[data-test="new-button"]')
-        .contains('New')
-        .should('exist');
-});
-
-When('you click the "New..." option', () => {
-    cy.get('[data-test="new-button"]')
-        .click();
-    cy.get('[data-test="new-menuitem-two"]')
         .click();
 });
 
-When('you click the the first option option', () => {
-    cy.get('[data-test="new-button"]')
+When('you click the first option in split button dropdown', () => {
+    cy.get('[data-test="new-button-toggle"]')
         .click();
     cy.get('[data-test="new-menuitem-one"]')
         .click();

cypress/e2e/ScopeSelector/index.js

@@ -18,7 +18,7 @@ When('you click the "New" button to add a new event', () => {
 });
 
 When('you click the first option from the "New" button to add a new event', () => {
-    cy.get('[data-test="new-button"]')
+    cy.get('[data-test="new-button-toggle"]')
         .click();
     cy.get('[data-test="new-menuitem-one"]')
         .click();

cypress/e2e/TopBarActions.feature

@@ -19,14 +19,13 @@ Feature: User uses the TopBarActions to navigate
 
     Scenario: Enrollment page > You go to the new page without a program selected
         Given you land on a enrollment page domain by having typed /#/enrollment?programId=IpHINAT79UW&orgUnitId=DiszpKrYNg8&teiId=pybd813kIWx&enrollmentId=FS085BEkJo2
-        When the user clicks the element containing the text: New
-        And the user clicks the element containing the text: New...
+        When the user clicks the arrow button to see the dropdown
+        And the user clicks the element containing the text: Create new in another program...
         Then the current url is /#/new?orgUnitId=DiszpKrYNg8
 
     Scenario: Enrollment page > You go to the new page inside the same program
         Given you land on a enrollment page domain by having typed /#/enrollment?programId=IpHINAT79UW&orgUnitId=DiszpKrYNg8&teiId=pybd813kIWx&enrollmentId=FS085BEkJo2
-        When the user clicks the element containing the text: New
-        And the user clicks the element containing the text: New person in Child Programme
+        When the user clicks the element containing the text: Create new
         Then the current url is /#/new?orgUnitId=DiszpKrYNg8&programId=IpHINAT79UW
 
     Scenario: Enrollment Event Edit page > Clear selections
@@ -48,14 +47,14 @@ Feature: User uses the TopBarActions to navigate
 
     Scenario: Enrollment Event Edit page > You go to the new page without a program selected
         Given you land on a enrollment page domain by having typed /#/enrollmentEventEdit?orgUnitId=DwpbWkiqjMy&eventId=KNbStF7YTon
-        When the user clicks the element containing the text: New
-        And the user clicks the element containing the text: New...
+        When the user clicks the arrow button to see the dropdown
+        And the user clicks the element containing the text: Create new in another program...
         Then the current url is /#/new?orgUnitId=DwpbWkiqjMy
 
     Scenario: Enrollment Event Edit page > You go to the new page inside the same program
         Given you land on a enrollment page domain by having typed /#/enrollmentEventEdit?orgUnitId=DwpbWkiqjMy&eventId=KNbStF7YTon
-        When the user clicks the element containing the text: New
-        And the user clicks the element containing the text: New person in WHO RMNCH Tracker
+        When the user clicks the element containing the text: Create new
+        And the user clicks the element containing the text: Create new person
         Then the current url is /#/new?orgUnitId=DwpbWkiqjMy&programId=WSGAb5XwJ3Y
 
     Scenario: Enrollment Event edit page > When the user performs any actions in edit mood a popup warning message will appear.
@@ -88,15 +87,14 @@ Feature: User uses the TopBarActions to navigate
     Scenario: Enrollment Event New page > You go to the new page without a program selected
         Given you land on a enrollment page domain by having typed #/enrollmentEventNew?programId=WSGAb5XwJ3Y&orgUnitId=DwpbWkiqjMy&teiId=yFcOhsM1Yoa&enrollmentId=ek4WWAgXX5i&stageId=edqlbukwRfQ
         And the user see the following text: Clear selections
-        When the user clicks the element containing the text: New
-        And the user clicks the element containing the text: New...
+        When the user clicks the arrow button to see the dropdown
+        And the user clicks the element containing the text: Create new in another program...        
         Then the current url is /#/new?orgUnitId=DwpbWkiqjMy
 
     Scenario: Enrollment Event New page > You go to the new page inside the same program
         Given you land on a enrollment page domain by having typed #/enrollmentEventNew?programId=WSGAb5XwJ3Y&orgUnitId=DwpbWkiqjMy&teiId=yFcOhsM1Yoa&enrollmentId=ek4WWAgXX5i&stageId=edqlbukwRfQ
         And the user see the following text: Clear selections
-        When the user clicks the element containing the text: New
-        And the user clicks the element containing the text: New person in WHO RMNCH Tracker
+        When the user clicks the element containing the text: Create new person
         Then the current url is /#/new?orgUnitId=DwpbWkiqjMy&programId=WSGAb5XwJ3Y
 
     Scenario: Enrollment Event New page > When the user performs any actions after it interacts with the form a popup warning message will appear.

cypress/e2e/TopBarActions/index.js

@@ -10,6 +10,11 @@ When(/^the user clicks on the edit button/, () =>
     cy.get('[data-test="widget-enrollment-event"]').find('[data-test="dhis2-uicore-button"]').eq(1).click(),
 );
 
+When('the user clicks the arrow button to see the dropdown', () => {
+    cy.get('[data-test="new-button-toggle"]')
+        .click();
+});
+
 Then('the user sees the warning popup', () => {
     cy.contains('Discard unsaved changes?');
     cy.contains('This event has unsaved changes. Leaving this page without saving will lose these changes. Are you sure you want to discard unsaved changes?');

i18n/en.pot

@@ -1071,8 +1071,14 @@ msgstr ""
 msgid "Create saved list"
 msgstr "Create saved list"
 
-msgid "New {{trackedEntityName}} in {{programName}}"
-msgstr "New {{trackedEntityName}} in {{programName}}"
+msgid "Create new in another program"
+msgstr "Create new in another program"
+
+msgid "Create new {{trackedEntityName}}"
+msgstr "Create new {{trackedEntityName}}"
+
+msgid "Create new event"
+msgstr "Create new event"
 
 msgid "Search for a {{trackedEntityName}} in {{programName}}"
 msgstr "Search for a {{trackedEntityName}} in {{programName}}"

src/core_modules/capture-core/components/TopBarActions/TopBarActions.component.js

@@ -2,7 +2,7 @@
 import React, { type ComponentType, useState, useEffect } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import i18n from '@dhis2/d2-i18n';
-import { Button, spacers, DropdownButton, FlyoutMenu, MenuItem } from '@dhis2/ui';
+import { Button, spacers, DropdownButton, FlyoutMenu, MenuItem, SplitButton } from '@dhis2/ui';
 import { scopeTypes } from '../../metaData';
 import { useScopeInfo } from '../../hooks/useScopeInfo';
 import type { PlainProps } from './TopBarActions.types';
@@ -27,10 +27,9 @@ const ActionButtonsPlain = ({
     openConfirmDialog,
 }: PlainProps & CssClasses) => {
     const { trackedEntityName, scopeType, programName } = useScopeInfo(selectedProgramId);
-    const [openNew, setOpenNew] = useState(false);
     const [openSearch, setOpenSearch] = useState(false);
+
     useEffect(() => {
-        setOpenNew(false);
         setOpenSearch(false);
     }, [openConfirmDialog]);
 
@@ -44,37 +43,33 @@ const ActionButtonsPlain = ({
                     className={classes.marginRight}
                     onClick={onNewClickWithoutProgramId}
                 >
-                    {i18n.t('New')}
+                    {i18n.t('Create new')}
                 </Button>
             ) : (
-                <DropdownButton
+                <SplitButton
                     small
                     secondary
                     dataTest="new-button"
                     className={classes.marginRight}
-                    open={openNew}
-                    onClick={() => setOpenNew(prev => !prev)}
+                    onClick={() => { onNewClick(); }}
                     component={
                         <FlyoutMenu dense maxWidth="250px">
                             <MenuItem
                                 dataTest="new-menuitem-one"
-                                label={i18n.t('New {{trackedEntityName}} in {{programName}}', {
-                                    trackedEntityName,
-                                    programName,
-                                    interpolation: { escapeValue: false },
-                                })}
-                                onClick={() => { setOpenNew(prev => !prev); onNewClick(); }}
-                            />
-                            <MenuItem
-                                dataTest="new-menuitem-two"
-                                label={`${i18n.t('New')}...`}
-                                onClick={() => { setOpenNew(prev => !prev); onNewClickWithoutProgramId(); }}
+                                label={`${i18n.t('Create new in another program')}...`}
+                                onClick={() => { onNewClickWithoutProgramId(); }}
                             />
                         </FlyoutMenu>
                     }
                 >
-                    {i18n.t('New')}
-                </DropdownButton>
+                    {scopeType === scopeTypes.TRACKER_PROGRAM && (
+                        i18n.t('Create new {{trackedEntityName}}',
+                            { trackedEntityName, interpolation: { escapeValue: false } })
+                    )}
+                    {scopeType === scopeTypes.EVENT_PROGRAM && (
+                        i18n.t('Create new event')
+                    )}
+                </SplitButton>
             )}
 
             {scopeType !== scopeTypes.TRACKER_PROGRAM ? (
@@ -104,12 +99,12 @@ const ActionButtonsPlain = ({
                                     programName,
                                     interpolation: { escapeValue: false },
                                 })}
-                                onClick={() => { setOpenSearch(prev => !prev); onFindClick(); }}
+                                onClick={() => { onFindClick(); setOpenSearch(prev => !prev); }}
                             />
                             <MenuItem
                                 dataTest="find-menuitem-two"
                                 label={`${i18n.t('Search')}...`}
-                                onClick={() => { setOpenSearch(prev => !prev); onFindClickWithoutProgramId(); }}
+                                onClick={() => { onFindClickWithoutProgramId(); setOpenSearch(prev => !prev); }}
                             />
                         </FlyoutMenu>
                     }