fix: update contoso app to use migration shims components (#3015)

Use the latest acs react beta package
Fix adding people to conversation overlay
Use @fluentui/react-migration-v0-v9 List and ListItem
Add migrations shims and @fluentui/react-icons-northstar

packages/mgt-chat/package.json

@@ -50,12 +50,13 @@
     "@azure/communication-chat": "1.4.0",
     "@azure/communication-common": "2.3.0",
     "@azure/communication-identity": "1.3.0",
-    "@azure/communication-react": "1.8.0-beta.1",
+    "@azure/communication-react": "1.13.0-beta.1",
     "@azure/msal-browser": "2.33.0",
     "@fluentui/react": "~8.106.1",
     "@fluentui/react-components": "^9.19.1",
     "@fluentui/react-icons": "^2.0.210",
-    "@fluentui/react-northstar": "^0.66.4",
+    "@fluentui/react-icons-northstar": "^0.66.5",
+    "@fluentui/react-migration-v0-v9": "^9.1.15",
     "@microsoft/mgt-components": "*",
     "@microsoft/mgt-element": "*",
     "@microsoft/mgt-msal2-provider": "*",

packages/mgt-chat/src/components/ChatHeader/ChatHeader.tsx

@@ -11,7 +11,7 @@ const useHeaderStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     rowGap: 0,
-    zIndex: 2
+    zIndex: 4
   },
   secondRow: {
     display: 'flex',

packages/mgt-chat/src/components/ChatHeader/EllipsisMenu.tsx

@@ -15,7 +15,7 @@ import {
   makeStyles
 } from '@fluentui/react-components';
 import { MoreHorizontal24Filled, MoreHorizontal24Regular, bundleIcon } from '@fluentui/react-icons';
-import { createSvgIcon } from '@fluentui/react-northstar';
+import { createSvgIcon } from '@fluentui/react-icons-northstar';
 import React from 'react';
 
 const TeamsIcon = createSvgIcon({

packages/mgt-chat/src/components/ManageChatMembers/ListChatMembers.tsx

@@ -11,7 +11,7 @@ import {
   DialogSurface,
   DialogTitle
 } from '@fluentui/react-components';
-import { List, ListItem } from '@fluentui/react-northstar';
+import { List, ListItem } from '@fluentui/react-migration-v0-v9';
 import { Person } from '@microsoft/mgt-react';
 import { AadUserConversationMember } from '@microsoft/microsoft-graph-types';
 import { Dismiss20Filled, bundleIcon, iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
@@ -117,33 +117,25 @@ const ListChatMembers = ({ members, currentUserId, removeChatMember, closeParent
         </DialogSurface>
       </Dialog>
       <List navigable className={styles.memberList}>
-        {members.map((member, index) => {
+        {members.map(member => {
           const isCurrentUser = currentUserId === member.userId;
           return member?.userId ? (
             <ListItem
               key={member.userId}
               className={styles.listItem}
-              index={index}
-              content={
-                <div className={mergeClasses(styles.personRow, styles.fullWidth)}>
-                  <Person
-                    className={styles.fullWidth}
-                    tabIndex={-1}
-                    userId={member.userId}
-                    view="oneline"
-                    showPresence
-                  />
-                  <span className={styles.iconPlaceholder}>{!isCurrentUser && <RemovePerson />}</span>
-                </div>
-              }
               onClick={() => {
                 if (isCurrentUser) {
                   closeDialog();
                 } else {
                   openRemoveDialog(member);
                 }
               }}
-            />
+            >
+              <div className={mergeClasses(styles.personRow, styles.fullWidth)}>
+                <Person className={styles.fullWidth} tabIndex={-1} userId={member.userId} view="oneline" showPresence />
+                <span className={styles.iconPlaceholder}>{!isCurrentUser && <RemovePerson />}</span>
+              </div>
+            </ListItem>
           ) : null;
         })}
       </List>

samples/react-contoso/package.json

@@ -9,7 +9,7 @@
     "@fluentui/react": "^8.0.0",
     "@fluentui/react-components": "^9.19.1",
     "@fluentui/react-hooks": "^8.2.0",
-    "@fluentui/react-northstar": "^0.66.4",
+    "@fluentui/react-migration-v0-v9": "^9.1.15",
     "@fluentui/react-theme-provider": "^0.18.5",
     "@microsoft/mgt-element": "*",
     "@microsoft/mgt-msal2-provider": "*",

samples/react-contoso/src/pages/Chats/ChatListTemplate.tsx

@@ -3,7 +3,7 @@ import { MgtTemplateProps, Providers } from '@microsoft/mgt-react';
 import { Chat } from '@microsoft/microsoft-graph-types';
 import { ChatItem } from './ChatItem';
 import { Chat as GraphChat } from '@microsoft/microsoft-graph-types';
-import { List, ListItem } from '@fluentui/react-northstar';
+import { List, ListItem } from '@fluentui/react-migration-v0-v9';
 import { makeStyles, shorthands } from '@fluentui/react-components';
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 
@@ -45,7 +45,7 @@ const ChatListTemplate = (props: MgtTemplateProps & ChatInteractionProps) => {
 
   const onChatSelected = (e: GraphChat) => {
     setSelectedChat(e);
-  }
+  };
 
   // Set the selected chat to the first chat in the list
   // Fires only the first time the component is rendered
@@ -76,20 +76,10 @@ const ChatListTemplate = (props: MgtTemplateProps & ChatInteractionProps) => {
   return (
     <List navigable className={styles.list}>
       {chats.map((c, index) => (
-        <ListItem
-          key={c.id}
-          index={index}
-          className={styles.listItem}
-          content={
-            <div className={(!selectedChat && index === 0) || isChatActive(c) ? styles.selected : ''}>
-              <ChatItem
-                key={c.id}
-                chat={c}
-                userId={userId}
-              />
-            </div>
-          }
-          onClick={() => onChatSelected(c)}>
+        <ListItem key={c.id} className={styles.listItem} onClick={() => onChatSelected(c)}>
+          <div className={(!selectedChat && index === 0) || isChatActive(c) ? styles.selected : ''}>
+            <ChatItem key={c.id} chat={c} userId={userId} />
+          </div>
         </ListItem>
       ))}
     </List>