Add Workspace Rooms Create Button Integration under workspaceRoomsPage beta

src/CONST/index.ts

@@ -9866,6 +9866,9 @@ const CONST = {
             FEATURE_LIST: {
                 CTA_BUTTON: 'WorkspaceFeatureList-CtaButton',
             },
+            ROOMS: {
+                CREATE_ROOM_BUTTON: 'WorkspaceRooms-CreateRoomButton',
+            },
         },
         ACCOUNT_SWITCHER: {
             SHOW_ACCOUNTS: 'AccountSwitcher-ShowAccounts',

src/ONYXKEYS.ts

@@ -743,6 +743,9 @@ const ONYXKEYS = {
     /** The transaction IDs to be highlighted when opening the Expenses search route page */
     TRANSACTION_IDS_HIGHLIGHT_ON_SEARCH_ROUTE: 'transactionIdsHighlightOnSearchRoute',
 
+    /** The report ID to be highlighted when returning to the workspace rooms page */
+    ROOM_ID_HIGHLIGHT_ON_ROOMS_PAGE: 'roomIDHighlightOnRoomsPage',
+
     /** The preferred policy ID to be used when creating a group */
     DOMAIN_GROUP_CREATE_PREFERRED_POLICY_ID: 'domainGroupCreatePreferredPolicyID',
 
@@ -1652,6 +1655,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.HAS_DENIED_CONTACT_IMPORT_PROMPT]: boolean | undefined;
     [ONYXKEYS.PERSONAL_POLICY_ID]: string;
     [ONYXKEYS.TRANSACTION_IDS_HIGHLIGHT_ON_SEARCH_ROUTE]: Record<string, Record<string, boolean>>;
+    [ONYXKEYS.ROOM_ID_HIGHLIGHT_ON_ROOMS_PAGE]: string | null;
     [ONYXKEYS.DOMAIN_GROUP_CREATE_PREFERRED_POLICY_ID]: string | undefined;
 };
 

src/ROUTES.ts

@@ -2388,6 +2388,10 @@ const ROUTES = {
             return `workspaces/${policyID}/rooms` as const;
         },
     },
+    WORKSPACE_ROOM_CREATE: {
+        route: 'workspaces/:policyID/rooms/new',
+        getRoute: (policyID: string) => `workspaces/${policyID}/rooms/new` as const,
+    },
     WORKSPACE_MEMBERS_IMPORT: {
         route: 'workspaces/:policyID/members/import',
         getRoute: (policyID: string) => `workspaces/${policyID}/members/import` as const,

src/SCREENS.ts

@@ -763,6 +763,7 @@ const SCREENS = {
         INVOICES_COMPANY_WEBSITE: 'Workspace_Invoices_Company_Website',
         MEMBERS: 'Workspace_Members',
         ROOMS: 'Workspace_Rooms',
+        ROOM_CREATE: 'Workspace_Room_Create',
         MEMBERS_IMPORT: 'Members_Import',
         MEMBERS_IMPORTED: 'Members_Imported',
         MEMBERS_IMPORTED_CONFIRMATION: 'Members_Imported_Confirmation',

src/components/Tables/WorkspaceRoomsTable/WorkspaceRoomsTableRow.tsx

@@ -46,9 +46,12 @@ type WorkspaceRoomsTableRowProps = {
 
     /** Whether to use narrow table row layout */
     shouldUseNarrowTableLayout: boolean;
+
+    /** Whether or not the row should animate in highlighted */
+    shouldAnimateInHighlight?: boolean;
 };
 
-function WorkspaceRoomsTableRow({item, rowIndex, shouldUseNarrowTableLayout}: WorkspaceRoomsTableRowProps) {
+function WorkspaceRoomsTableRow({item, rowIndex, shouldUseNarrowTableLayout, shouldAnimateInHighlight}: WorkspaceRoomsTableRowProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -64,6 +67,7 @@ function WorkspaceRoomsTableRow({item, rowIndex, shouldUseNarrowTableLayout}: Wo
             accessibilityLabel={item.name}
             skeletonReasonAttributes={{context: 'WorkspaceRoomsTableRow'}}
             onPress={item.action}
+            shouldAnimateInHighlight={shouldAnimateInHighlight}
         >
             {({hovered}) => (
                 <>

src/components/Tables/WorkspaceRoomsTable/index.tsx

@@ -1,6 +1,6 @@
 import type {ListRenderItemInfo} from '@shopify/flash-list';
-import React from 'react';
-import type {CompareItemsCallback, IsItemInSearchCallback, TableColumn} from '@components/Table';
+import React, {useEffect, useRef} from 'react';
+import type {CompareItemsCallback, IsItemInSearchCallback, TableColumn, TableHandle} from '@components/Table';
 import Table from '@components/Table';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -14,13 +14,28 @@ type WorkspaceRoomsTableColumnKey = 'name' | 'createdBy' | 'members' | 'actions'
 type WorkspaceRoomsTableProps = {
     /** Pre-built row data for each room */
     rooms: WorkspaceRoomRowData[];
+
+    /** The reportID of the room that should play the highlight animation (e.g. when it was just created) */
+    highlightedReportID?: string;
 };
 
-function WorkspaceRoomsTable({rooms}: WorkspaceRoomsTableProps) {
+function WorkspaceRoomsTable({rooms, highlightedReportID}: WorkspaceRoomsTableProps) {
     const styles = useThemeStyles();
     const {translate, localeCompare} = useLocalize();
     const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
     const shouldUseNarrowTableLayout = shouldUseNarrowLayout || isMediumScreenWidth;
+    const tableRef = useRef<TableHandle<WorkspaceRoomRowData, WorkspaceRoomsTableColumnKey>>(null);
+
+    useEffect(() => {
+        if (!highlightedReportID) {
+            return;
+        }
+        const highlightedRoom = rooms.find((room) => room.reportID === highlightedReportID);
+        if (!highlightedRoom) {
+            return;
+        }
+        tableRef.current?.scrollToItem({item: highlightedRoom, animated: false});
+    }, [highlightedReportID, rooms]);
 
     const columns: Array<TableColumn<WorkspaceRoomsTableColumnKey>> = [
         {key: 'name', label: translate('common.name'), sortable: true},
@@ -50,11 +65,13 @@ function WorkspaceRoomsTable({rooms}: WorkspaceRoomsTableProps) {
             item={item}
             rowIndex={index}
             shouldUseNarrowTableLayout={shouldUseNarrowTableLayout}
+            shouldAnimateInHighlight={!!highlightedReportID && item.reportID === highlightedReportID}
         />
     );
 
     return (
         <Table
+            ref={tableRef}
             data={rooms}
             columns={columns}
             renderItem={renderItem}

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

@@ -626,6 +626,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.DOWNGRADE]: () => require<ReactComponentModule>('../../../../pages/workspace/downgrade/WorkspaceDowngradePage').default,
     [SCREENS.WORKSPACE.PAY_AND_DOWNGRADE]: () => require<ReactComponentModule>('../../../../pages/workspace/downgrade/PayAndDowngradePage').default,
     [SCREENS.WORKSPACE.MEMBER_DETAILS]: () => require<ReactComponentModule>('../../../../pages/workspace/members/WorkspaceMemberDetailsPage').default,
+    [SCREENS.WORKSPACE.ROOM_CREATE]: () => require<ReactComponentModule>('../../../../pages/workspace/rooms/WorkspaceRoomCreatePage').default,
     [SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE]: () => require<ReactComponentModule>('../../../../pages/workspace/members/WorkspaceMemberDetailsRolePage').default,
     [SCREENS.WORKSPACE.MEMBER_CUSTOM_FIELD]: () => require<ReactComponentModule>('../../../../pages/workspace/members/WorkspaceMemberCustomFieldPage').default,
     [SCREENS.WORKSPACE.OWNER_CHANGE_CHECK]: () => require<ReactComponentModule>('@pages/workspace/members/WorkspaceOwnerChangeWrapperPage').default,

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

@@ -26,7 +26,7 @@ const WORKSPACE_TO_RHP: Partial<Record<keyof WorkspaceSplitNavigatorParamList, s
         SCREENS.WORKSPACE.MEMBERS_IMPORTED_CONFIRMATION,
         SCREENS.WORKSPACE.DYNAMIC_IMPORTED_MEMBERS_ROLE,
     ],
-    [SCREENS.WORKSPACE.ROOMS]: [],
+    [SCREENS.WORKSPACE.ROOMS]: [SCREENS.WORKSPACE.ROOM_CREATE],
     [SCREENS.WORKSPACE.WORKFLOWS]: [
         SCREENS.WORKSPACE.WORKFLOWS_APPROVALS_NEW,
         SCREENS.WORKSPACE.WORKFLOWS_APPROVALS_EDIT,

src/libs/Navigation/linkingConfig/config.ts

@@ -1042,6 +1042,9 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                         [SCREENS.WORKSPACE.MEMBER_DETAILS]: {
                             path: ROUTES.WORKSPACE_MEMBER_DETAILS.route,
                         },
+                        [SCREENS.WORKSPACE.ROOM_CREATE]: {
+                            path: ROUTES.WORKSPACE_ROOM_CREATE.route,
+                        },
                         [SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE]: {
                             path: ROUTES.WORKSPACE_MEMBER_DETAILS_ROLE.route,
                         },

src/libs/Navigation/types.ts

@@ -669,6 +669,9 @@ type SettingsNavigatorParamList = {
         policyID: string;
         accountID: string;
     };
+    [SCREENS.WORKSPACE.ROOM_CREATE]: {
+        policyID: string;
+    };
     [SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE]: {
         policyID: string;
         accountID: string;

src/libs/actions/Policy/Room.ts

@@ -1,12 +1,21 @@
+import Onyx from 'react-native-onyx';
 import {read} from '@libs/API';
 import type {OpenPolicyRoomsPageParams} from '@libs/API/parameters';
 import {READ_COMMANDS} from '@libs/API/types';
+import ONYXKEYS from '@src/ONYXKEYS';
 
 function openPolicyRoomsPage(policyID: string) {
     const params: OpenPolicyRoomsPageParams = {policyID};
 
     read(READ_COMMANDS.OPEN_POLICY_ROOMS_PAGE, params);
 }
 
-// eslint-disable-next-line import/prefer-default-export
-export {openPolicyRoomsPage};
+function setRoomIDToHighlightOnRoomsPage(reportID: string) {
+    Onyx.set(ONYXKEYS.ROOM_ID_HIGHLIGHT_ON_ROOMS_PAGE, reportID);
+}
+
+function clearRoomIDToHighlightOnRoomsPage() {
+    Onyx.set(ONYXKEYS.ROOM_ID_HIGHLIGHT_ON_ROOMS_PAGE, null);
+}
+
+export {openPolicyRoomsPage, setRoomIDToHighlightOnRoomsPage, clearRoomIDToHighlightOnRoomsPage};

src/libs/actions/Report/index.ts

@@ -4329,7 +4329,6 @@ function addPolicyReport(policyReport: OptimisticChatReport) {
     };
 
     API.write(WRITE_COMMANDS.ADD_WORKSPACE_ROOM, parameters, {optimisticData, successData, failureData});
-    Navigation.dismissModalWithReport({reportID: policyReport.reportID});
 }
 
 /** Deletes a report, along with its reportActions, any linked reports, and any linked IOU report. */