feat: fullscreen status messages #2948

musale · 2024-01-15T06:40:44Z

Closes #2666

PR Type

Feature

Description of the changes

Added full screen status message for:

no messages
no chat ID
a wrong chat ID
generic errors i.e. failed graph calls

PR checklist

Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
Stories have been added and existing stories have been tested
Added appropriate documentation. Docs PR:

License header has been added to all new source files (yarn setLicense)
Contains NO breaking changes

Other information

How to test

no messages: delete a chat with another person and load the chat on mgt chat
no chat ID: locally test with the added mocke chat that has no ID
wrong chat ID: locally test with the added mocked chat that has a wrong chat ID
generic errors: locally test with the updates to graph calls that fail

github-actions · 2024-01-15T15:19:13Z

🚀 New react-contoso sample application deployed here

Setting the client calls an external function graph that throws a TypeError. The error is thrown when accessing the forComponent method. The assumption is that the Provider hasn't set up by the time the StatefulGraphChatClient is instatiated, This change leverages the Provider onStateChange events and updates the notificationClient appropriately after the constructor initialization.

…l client

github-actions · 2024-01-16T10:45:25Z

🚀 New react-contoso sample application deployed here

github-actions · 2024-01-16T11:32:56Z

🚀 New react-contoso sample application deployed here

github-actions · 2024-01-16T15:39:15Z

🚀 New react-contoso sample application deployed here

packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts

packages/mgt-chat/src/utils/graph.ts

Co-authored-by: Gavin Barron <gavinbarron@microsoft.com>

github-actions · 2024-01-22T12:39:08Z

🚀 New react-contoso sample application deployed here

sebastienlevert · 2024-01-22T17:15:07Z

No chat ID provided: Works great!
Invalid chat ID provided: Works great!
No messages conversation: I have the conversation "loaded" but not status messages.
Graph error (I turned network off in Edge): Works great!

Signed-off-by: Martin Musale <martinmusale@microsoft.com>

github-actions · 2024-01-23T08:40:10Z

🚀 New react-contoso sample application deployed here

Signed-off-by: Martin Musale <martinmusale@microsoft.com>

musale · 2024-01-23T09:17:00Z

@sebastienlevert I have fixed the no messages state.

github-actions · 2024-01-23T09:27:47Z

🚀 New react-contoso sample application deployed here

sebastienlevert

Works great for the scenarios! Very happy!

gavinbarron · 2024-01-23T17:54:53Z

There's something weird going on with the styling of the React Contoso app.
On first load of the chat page I get a flash of a broken styling state that goes away, but returns when I select another chat:

sebastienlevert · 2024-01-23T17:57:49Z

There's something weird going on with the styling of the React Contoso app. On first load of the chat page I get a flash of a broken styling state that goes away, but returns when I select another chat:

I see the same. I thought it was just me. So something gets injected and breaks the rest. We need to be careful to not bring this issue. Dismissing my review until this is fixed.

Major UI issues

musale · 2024-01-25T14:47:25Z

There's something weird going on with the styling of the React Contoso app. On first load of the chat page I get a flash of a broken styling state that goes away, but returns when I select another chat:

So, I dug around this a little. What I found out was using @azure/communication-react v1.9.0-beta.1 and above brings this issue. I have raised an issue on their end Azure/communication-ui-library#4058 as I'm not sure what might have changed from v1.8.0 to 1.9.0-beta.1. I have pinned our dependency on 1.8.0 for now. CC @sebastienlevert

Update

~~A new issue arises, mentioned users support is not available in v1.8.0. I think I need to investigate a little more on this.~~

Now using v1.8.0-beta.1 to fix Mention missing as it is in beta.

github-actions · 2024-01-25T15:19:23Z

Package	Line Rate	Branch Rate	Health
mgt-chat.src.statefulClient	100%	100%	✔
mgt-chat.src.utils	100%	86%	✔
mgt-components.dist.es6.components.mgt-agenda.src.components.mgt-agenda	12%	100%	❌
mgt-components.dist.es6.components.mgt-contact.src.components.mgt-contact	62%	100%	➖
mgt-components.dist.es6.components.mgt-file-list.mgt-file-upload.src.components.mgt-file-list.mgt-file-upload	43%	100%	❌
mgt-components.dist.es6.components.mgt-file-list.src.components.mgt-file-list	51%	100%	➖
mgt-components.dist.es6.components.mgt-file.src.components.mgt-file	46%	100%	❌
mgt-components.dist.es6.components.mgt-get.src.components.mgt-get	20%	100%	❌
mgt-components.dist.es6.components.mgt-login.src.components.mgt-login	63%	100%	➖
mgt-components.dist.es6.components.mgt-messages.src.components.mgt-messages	65%	100%	➖
mgt-components.dist.es6.components.mgt-organization.src.components.mgt-organization	46%	100%	❌
mgt-components.dist.es6.components.mgt-people-picker.src.components.mgt-people-picker	49%	100%	❌
mgt-components.dist.es6.components.mgt-people.src.components.mgt-people	59%	100%	➖
mgt-components.dist.es6.components.mgt-person-card.src.components.mgt-person-card	53%	33%	➖
mgt-components.dist.es6.components.mgt-person.src.components.mgt-person	48%	100%	❌
mgt-components.dist.es6.components.mgt-picker.src.components.mgt-picker	75%	100%	✔
mgt-components.dist.es6.components.mgt-profile.src.components.mgt-profile	39%	100%	❌
mgt-components.dist.es6.components.mgt-tasks-base.src.components.mgt-tasks-base	76%	100%	✔
mgt-components.dist.es6.components.mgt-tasks.src.components.mgt-tasks	54%	100%	➖
mgt-components.dist.es6.components.mgt-taxonomy-picker.src.components.mgt-taxonomy-picker	62%	100%	➖
mgt-components.dist.es6.components.mgt-teams-channel-picker.src.components.mgt-teams-channel-picker	55%	100%	➖
mgt-components.dist.es6.components.mgt-theme-toggle.src.components.mgt-theme-toggle	74%	100%	➖
mgt-components.dist.es6.components.mgt-todo.src.components.mgt-todo	80%	100%	✔
mgt-components.dist.es6.components.preview.mgt-search-box.src.components.preview.mgt-search-box	74%	100%	➖
mgt-components.dist.es6.components.preview.mgt-search-results.src.components.preview.mgt-search-results	51%	100%	➖
mgt-components.dist.es6.components.preview.src.components.preview	100%	100%	✔
mgt-components.dist.es6.components.src.components	82%	100%	✔
mgt-components.dist.es6.components.sub-components.mgt-arrow-options.src.components.sub-components.mgt-arrow-options	70%	100%	➖
mgt-components.dist.es6.components.sub-components.mgt-dot-options.src.components.sub-components.mgt-dot-options	28%	100%	❌
mgt-components.dist.es6.components.sub-components.mgt-flyout.src.components.sub-components.mgt-flyout	40%	100%	❌
mgt-components.dist.es6.components.sub-components.mgt-spinner.src.components.sub-components.mgt-spinner	92%	100%	✔
mgt-components.dist.es6.graph.src.graph	36%	100%	❌
mgt-components.dist.es6.src	100%	100%	✔
mgt-components.dist.es6.styles.src.styles	73%	100%	➖
mgt-components.dist.es6.utils.src.utils	46%	100%	❌
mgt-components.src.components	81%	100%	✔
mgt-components.src.components.mgt-contact	68%	83%	➖
mgt-components.src.components.mgt-file	51%	100%	➖
mgt-components.src.components.mgt-file-list	56%	100%	➖
mgt-components.src.components.mgt-file-list.mgt-file-upload	49%	88%	❌
mgt-components.src.components.mgt-messages	66%	100%	➖
mgt-components.src.components.mgt-organization	47%	100%	❌
mgt-components.src.components.mgt-person	84%	69%	✔
mgt-components.src.components.mgt-person-card	66%	47%	➖
mgt-components.src.components.mgt-profile	40%	100%	❌
mgt-components.src.components.mgt-theme-toggle	100%	100%	✔
mgt-components.src.components.sub-components.mgt-flyout	72%	53%	➖
mgt-components.src.components.sub-components.mgt-spinner	100%	100%	✔
mgt-components.src.graph	40%	76%	❌
mgt-components.src.styles	92%	80%	✔
mgt-components.src.utils	82%	47%	✔
mgt-element.dist.es6.components.src.components	74%	83%	➖
mgt-element.dist.es6.mock.src.mock	90%	71%	✔
mgt-element.dist.es6.providers.src.providers	86%	77%	✔
mgt-element.dist.es6.src	91%	80%	✔
mgt-element.dist.es6.utils.src.utils	66%	70%	➖
mgt-element.src	88%	100%	✔
mgt-element.src.components	84%	100%	✔
mgt-element.src.mock	81%	56%	✔
mgt-element.src.providers	80%	85%	✔
mgt-element.src.utils	71%	90%	➖
Summary	57% (25863 / 45135)	68% (516 / 755)	➖

github-actions · 2024-01-25T15:26:24Z

🚀 New react-contoso sample application deployed here

gavinbarron

It looks good to me.

Just a couple of small UX things that feel a bit off

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

Co-authored-by: Gavin Barron <gavinbarron@microsoft.com>

github-actions · 2024-01-30T09:09:23Z

🚀 New react-contoso sample application deployed here

github-actions · 2024-01-30T10:05:17Z

🚀 New react-contoso sample application deployed here

gavinbarron

Nice work!

WIP: Change the response to empty

7ddc304

musale added this to the Chat - GA milestone Jan 15, 2024

musale added 3 commits January 15, 2024 10:58

Merge branch 'next/mgt-chat' into feat/full-screen-status

fd40dca

Render error when there are no messages for a chat

26ba274

Fix displaying an error when you have no messages

b501572

sebastienlevert added the Build: React Contoso label Jan 15, 2024

WIP: set a state for no chat ID

46a7f56

musale added 6 commits January 16, 2024 11:57

Disable the SendBox if there is no chatId

7154060

Add wrong and no ID chats to chat list

9aacb01

Update emitting error in the Graph client and handling in the statefu…

9fd8915

…l client

Update acs packages

88eabb0

Re-organize chat component components

45444fa

musale force-pushed the feat/full-screen-status branch from 0ed99f2 to 45444fa Compare January 16, 2024 11:20

Fix width of chat messages and placeholder text

a2b0366

gavinbarron reviewed Jan 18, 2024

View reviewed changes

packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts Outdated Show resolved Hide resolved

packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts Outdated Show resolved Hide resolved

packages/mgt-chat/src/utils/graph.ts Outdated Show resolved Hide resolved

Console log error if message property is falsy

1b093ee

Co-authored-by: Gavin Barron <gavinbarron@microsoft.com>

musale added 2 commits January 23, 2024 11:27

Merge branch 'next/mgt-chat' into feat/full-screen-status

3e7b0ad

Refactor status into an exportable type

e938d20

Signed-off-by: Martin Musale <martinmusale@microsoft.com>

musale added 2 commits January 23, 2024 11:55

Remove comment as it has a fix to delay setting the graph

403f5ab

Signed-off-by: Martin Musale <martinmusale@microsoft.com>

Fix for setting the state when there are no messages

3508b47

Signed-off-by: Martin Musale <martinmusale@microsoft.com>

musale marked this pull request as ready for review January 23, 2024 09:16

musale requested a review from a team as a code owner January 23, 2024 09:16

sebastienlevert previously approved these changes Jan 23, 2024

View reviewed changes

sebastienlevert requested a review from gavinbarron January 23, 2024 14:18

musale linked an issue Jan 25, 2024 that may be closed by this pull request

[FEATURE] mgt-chat should have full screen status messages for different states #2666

Closed

3 tasks

Downgrade @azure/communication-react

0aadc28

Use v1.8.0-beta.1 to fix missing beta imports

78c6700

musale requested a review from sebastienlevert January 25, 2024 15:14

gavinbarron reviewed Jan 25, 2024

View reviewed changes

packages/mgt-chat/src/components/Chat/Chat.tsx Outdated Show resolved Hide resolved

packages/mgt-chat/src/components/Chat/Chat.tsx Outdated Show resolved Hide resolved

packages/mgt-chat/src/components/Chat/Chat.tsx Outdated Show resolved Hide resolved

Change the casing for id in error message

3d850d7

Co-authored-by: Gavin Barron <gavinbarron@microsoft.com>

Change subheading to FC and reword no messages message

479fa7c

gavinbarron approved these changes Jan 30, 2024

View reviewed changes

gavinbarron merged commit 511f6ea into next/mgt-chat Jan 30, 2024
8 checks passed

gavinbarron deleted the feat/full-screen-status branch January 30, 2024 17:28

musale mentioned this pull request Feb 2, 2024

BUG: CSS is missing fluent UI tokens in Contoso chat view #3014

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: fullscreen status messages #2948

feat: fullscreen status messages #2948

musale commented Jan 15, 2024 •

edited

Loading

github-actions bot commented Jan 15, 2024

github-actions bot commented Jan 16, 2024

github-actions bot commented Jan 16, 2024

github-actions bot commented Jan 16, 2024

github-actions bot commented Jan 22, 2024

sebastienlevert commented Jan 22, 2024

github-actions bot commented Jan 23, 2024

musale commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

sebastienlevert left a comment

gavinbarron commented Jan 23, 2024

sebastienlevert commented Jan 23, 2024

musale commented Jan 25, 2024 •

edited

Loading

github-actions bot commented Jan 25, 2024

github-actions bot commented Jan 25, 2024

gavinbarron left a comment

github-actions bot commented Jan 30, 2024

github-actions bot commented Jan 30, 2024

gavinbarron left a comment

feat: fullscreen status messages #2948

feat: fullscreen status messages #2948

Conversation

musale commented Jan 15, 2024 • edited Loading

PR Type

Description of the changes

PR checklist

Other information

How to test

github-actions bot commented Jan 15, 2024

github-actions bot commented Jan 16, 2024

github-actions bot commented Jan 16, 2024

github-actions bot commented Jan 16, 2024

github-actions bot commented Jan 22, 2024

sebastienlevert commented Jan 22, 2024

github-actions bot commented Jan 23, 2024

musale commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

sebastienlevert left a comment

Choose a reason for hiding this comment

gavinbarron commented Jan 23, 2024

sebastienlevert commented Jan 23, 2024

musale commented Jan 25, 2024 • edited Loading

github-actions bot commented Jan 25, 2024

github-actions bot commented Jan 25, 2024

gavinbarron left a comment

Choose a reason for hiding this comment

github-actions bot commented Jan 30, 2024

github-actions bot commented Jan 30, 2024

gavinbarron left a comment

Choose a reason for hiding this comment

musale commented Jan 15, 2024 •

edited

Loading

musale commented Jan 25, 2024 •

edited

Loading