[Domain Control] [Release 4] Add Create Group button to DomainGroupsPage and navigation to RHP modal with DomainGroupCreatePage

src/CONST/index.ts

@@ -9433,6 +9433,11 @@ const CONST = {
         MESSAGES_ROW: {
             DISMISS_BUTTON: 'MessagesRow-DismissButton',
         },
+        DOMAIN: {
+            GROUPS: {
+                CREATE_GROUP_BUTTON: 'DomainGroups-CreateGroupButton',
+            }
+        }
     },
 
     DOMAIN: {

src/ROUTES.ts

@@ -4108,6 +4108,11 @@ const ROUTES = {
         route: 'domain/:domainAccountID/groups/:groupID/name',
         getRoute: (domainAccountID: number, groupID: string) => `domain/${domainAccountID}/groups/${groupID}/name` as const,
     },
+
+    DOMAIN_GROUP_CREATE: {
+        route: 'domain/:domainAccountID/groups/new',
+        getRoute: (domainAccountID: number) => `domain/${domainAccountID}/groups/new` as const,
+    }
 } as const;
 
 /**

src/SCREENS.ts

@@ -995,6 +995,7 @@ const SCREENS = {
         MEMBER_LOCK_ACCOUNT: 'Member_Lock_Account',
         GROUP_DETAILS: 'Domain_Group_Details',
         GROUP_EDIT_NAME: 'Domain_Group_Edit_Name',
+        GROUP_CREATE: 'Domain_Group_Create',
     },
     MULTIFACTOR_AUTHENTICATION: {
         MAGIC_CODE: 'Multifactor_Authentication_Magic_Code',

src/languages/en.ts

@@ -8868,6 +8868,7 @@ const translations = {
             error: {
                 settings: '<rbr>Couldn’t save this change. Please try again or <concierge-link>contact Concierge</concierge-link> for more support.</rbr>',
             },
+            createNewGroupButton: 'New group'
         },
     },
 };

src/languages/es.ts

@@ -9152,6 +9152,7 @@ ${amount} para ${merchant} - ${date}`,
             error: {
                 settings: '<rbr>No se pudo guardar este cambio. Inténtalo de nuevo o <concierge-link>contacta con Concierge</concierge-link> para obtener más ayuda.</rbr>',
             },
+            createNewGroupButton: 'Crear nuevo grupo',
         },
     },
     gps: {

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -931,6 +931,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.DOMAIN.MEMBER_LOCK_ACCOUNT]: () => require<ReactComponentModule>('../../../../pages/domain/Members/DomainReportSuspiciousActivityPage').default,
     [SCREENS.DOMAIN.GROUP_DETAILS]: () => require<ReactComponentModule>('../../../../pages/domain/Groups/DomainGroupDetailsPage').default,
     [SCREENS.DOMAIN.GROUP_EDIT_NAME]: () => require<ReactComponentModule>('../../../../pages/domain/Groups/DomainGroupEditNamePage').default,
+    [SCREENS.DOMAIN.GROUP_CREATE]: () => require<ReactComponentModule>('../../../../pages/domain/Groups/DomainGroupCreatePage').default,
 });
 
 const TwoFactorAuthenticatorStackNavigator = createModalStackNavigator<EnablePaymentsNavigatorParamList>({

src/libs/Navigation/linkingConfig/RELATIONS/DOMAIN_TO_RHP.ts

@@ -16,7 +16,7 @@ const DOMAIN_TO_RHP: Partial<Record<keyof DomainSplitNavigatorParamList, string[
         SCREENS.DOMAIN.MEMBER_RESET_TWO_FACTOR_AUTH,
         SCREENS.DOMAIN.MEMBER_LOCK_ACCOUNT,
     ],
-    [SCREENS.DOMAIN.GROUPS]: [SCREENS.DOMAIN.GROUP_DETAILS, SCREENS.DOMAIN.GROUP_EDIT_NAME],
+    [SCREENS.DOMAIN.GROUPS]: [SCREENS.DOMAIN.GROUP_DETAILS, SCREENS.DOMAIN.GROUP_EDIT_NAME, SCREENS.DOMAIN.GROUP_CREATE],
 };
 
 export default DOMAIN_TO_RHP;

src/libs/Navigation/linkingConfig/config.ts

@@ -1354,6 +1354,9 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                         [SCREENS.DOMAIN.GROUP_EDIT_NAME]: {
                             path: ROUTES.DOMAIN_GROUP_EDIT_NAME.route,
                         },
+                        [SCREENS.DOMAIN.GROUP_CREATE]: {
+                            path: ROUTES.DOMAIN_GROUP_CREATE.route,
+                        },
                     },
                 },
                 [SCREENS.RIGHT_MODAL.TWO_FACTOR_AUTH]: {

src/libs/Navigation/types.ts

@@ -1578,6 +1578,9 @@ type SettingsNavigatorParamList = {
         domainAccountID: number;
         groupID: string;
     };
+    [SCREENS.DOMAIN.GROUP_CREATE]: {
+        domainAccountID: number;
+    }
 } & ReimbursementAccountNavigatorParamList;
 
 type DomainCardNavigatorParamList = {

src/pages/domain/Groups/DomainGroupCreatePage.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import Navigation from '@navigation/Navigation';
+import type {PlatformStackScreenProps} from '@navigation/PlatformStackNavigation/types';
+import type {SettingsNavigatorParamList} from '@navigation/types';
+import DomainNotFoundPageWrapper from '@pages/domain/DomainNotFoundPageWrapper';
+import ROUTES from '@src/ROUTES';
+import type SCREENS from '@src/SCREENS';
+
+type DomainGroupCreatePageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.DOMAIN.GROUP_CREATE>;
+
+function DomainGroupCreatePage({route}: DomainGroupCreatePageProps) {
+    const {domainAccountID} = route.params;
+    const {translate} = useLocalize();
+    return (
+        <DomainNotFoundPageWrapper domainAccountID={domainAccountID}>
+            <ScreenWrapper
+                shouldEnableMaxHeight
+                shouldShowOfflineIndicatorInWideScreen
+                testID=""
+                // testID="DomainGroupCreatePage"
+            >
+                <HeaderWithBackButton
+                    title={translate('domain.groups.createNewGroupButton')}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.DOMAIN_GROUPS.getRoute(domainAccountID))}
+                />
+            </ScreenWrapper>
+        </DomainNotFoundPageWrapper>
+    );
+}
+
+export default DomainGroupCreatePage;

src/pages/domain/Groups/DomainGroupsPage.tsx

@@ -2,6 +2,7 @@ import type {DomainSecurityGroupWithID} from '@selectors/Domain';
 import {domainNameSelector, groupsSelector} from '@selectors/Domain';
 import React from 'react';
 import {View} from 'react-native';
+import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
@@ -10,7 +11,7 @@ import type {ListItem} from '@components/SelectionList/ListItem/types';
 import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader';
 import Text from '@components/Text';
 import useDomainDocumentTitle from '@hooks/useDomainDocumentTitle';
-import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
+import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -19,6 +20,7 @@ import Navigation from '@navigation/Navigation';
 import type {PlatformStackScreenProps} from '@navigation/PlatformStackNavigation/types';
 import type {DomainSplitNavigatorParamList} from '@navigation/types';
 import DomainNotFoundPageWrapper from '@pages/domain/DomainNotFoundPageWrapper';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
@@ -35,7 +37,7 @@ function DomainGroupsPage({route}: DomainGroupsPageProps) {
     const {domainAccountID} = route.params;
     const [domainName] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN}${domainAccountID}`, {selector: domainNameSelector});
     useDomainDocumentTitle(domainName, 'domain.groups.title');
-
+    const icons = useMemoizedLazyExpensifyIcons(['Plus']);
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const illustrations = useMemoizedLazyIllustrations(['Members']);
@@ -71,6 +73,19 @@ function DomainGroupsPage({route}: DomainGroupsPageProps) {
         );
     };
 
+    const createGroupHeaderButton = (
+        <Button
+            accessibilityLabel={translate('domain.groups.createNewGroupButton')}
+            text={translate('domain.groups.createNewGroupButton')}
+            sentryLabel={CONST.SENTRY_LABEL.DOMAIN.GROUPS.CREATE_GROUP_BUTTON}
+            onPress={() => Navigation.navigate(ROUTES.DOMAIN_GROUP_CREATE.getRoute(domainAccountID))}
+            icon={icons.Plus}
+            innerStyles={[shouldUseNarrowLayout && styles.alignItemsCenter]}
+            style={shouldUseNarrowLayout ? [styles.flexGrow1, styles.mb3] : undefined}
+            success
+        />
+    );
+
     return (
         <DomainNotFoundPageWrapper domainAccountID={domainAccountID}>
             <ScreenWrapper
@@ -85,7 +100,11 @@ function DomainGroupsPage({route}: DomainGroupsPageProps) {
                     icon={illustrations.Members}
                     shouldShowBackButton={shouldUseNarrowLayout}
                     shouldUseHeadlineHeader
-                />
+                >
+                    {!shouldUseNarrowLayout && <View style={[styles.flexRow, styles.gap2]}>{createGroupHeaderButton}</View>}
+                </HeaderWithBackButton>
+                {shouldUseNarrowLayout && <View style={[styles.pl5, styles.pr5]}>{createGroupHeaderButton}</View>}
+
                 <SelectionList
                     data={data}
                     ListItem={TableListItem}