Skip to content

feat: render cta for unsupported content#2663

Merged
gavinbarron merged 48 commits into
next/mgt-chatfrom
unsupported-content
Oct 12, 2023
Merged

feat: render cta for unsupported content#2663
gavinbarron merged 48 commits into
next/mgt-chatfrom
unsupported-content

Conversation

@musale

@musale musale commented Aug 15, 2023

Copy link
Copy Markdown
Contributor

Closes #2190

PR Type

  • Feature

Description of the changes

Renders a CTA component showing the content is unsupported and you need to use the main window to view it.

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

musale added 5 commits August 15, 2023 10:44
Signed-off-by: Musale Martin <martinmusale@microsoft.com>
Signed-off-by: Musale Martin <martinmusale@microsoft.com>
Signed-off-by: Musale Martin <martinmusale@microsoft.com>
Signed-off-by: Musale Martin <martinmusale@microsoft.com>
Signed-off-by: Musale Martin <martinmusale@microsoft.com>
@musale musale added this to the Chat - Public Preview milestone Aug 15, 2023
@musale musale requested a review from a team as a code owner August 15, 2023 10:32
@microsoft-github-policy-service

Copy link
Copy Markdown
Contributor

Thank you for creating a Pull Request @musale.

This is a checklist for the PR reviewer(s) to complete before approving and merging this PR:

  • I have verified a documentation PR has been linked and is approved (or not applicable)
  • I have ran this PR locally and have tested the fix/feature
  • I have verified that stories have been added to storybook (or not applicable)
  • I have tested existing stories in storybook to verify no regression has occured
  • I have tested the solution in at least two browsers (Edge + 1 non-Chromium based browser)

@musale musale linked an issue Aug 15, 2023 that may be closed by this pull request
Signed-off-by: Musale Martin <martinmusale@microsoft.com>
Comment thread packages/mgt-chat/src/components/Chat/Chat.tsx Outdated
Comment thread packages/mgt-chat/src/components/Chat/Chat.tsx Outdated
Comment thread packages/mgt-chat/src/components/UnsupportedContent/UnsupportedContent.tsx Outdated
Comment thread packages/mgt-chat/src/components/UnsupportedContent/UnsupportedContent.tsx Outdated
Comment thread packages/mgt-chat/src/components/UnsupportedContent/UnsupportedContent.tsx Outdated
Comment thread packages/mgt-chat/src/components/ManageChatMembers/ListChatMembers.tsx Outdated
@microsoft-github-policy-service microsoft-github-policy-service Bot added the Needs: Author Feedback Issue needs response from issue author label Aug 16, 2023
musale added 2 commits August 22, 2023 13:46
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@microsoft-github-policy-service microsoft-github-policy-service Bot removed the Needs: Author Feedback Issue needs response from issue author label Aug 22, 2023
musale added 8 commits August 22, 2023 14:34
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
gavinbarron
gavinbarron previously approved these changes Sep 6, 2023
Comment thread packages/mgt-chat/src/components/Chat/Chat.tsx Outdated
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@sebastienlevert

Copy link
Copy Markdown
Contributor

A couple of comments. Might be related to design / specs that were a bit unclear. Let me know if we prefer managing them as part of this PR or as part of a set of bugs:

"body": {
                "contentType": "html",
                "content": "<hr><p>gdffdgdfg</p><p>dfg</p><h1>dfgdfgdfg</h1><p>dfgd</p><p style=\"margin-left:40px\">fgdfgdfgdfg</p><p>dfgdfg</p><p>&nbsp;</p><p>&nbsp;</p><table itemprop=\"copy-paste-table\"><tbody><tr><td><p>&nbsp;</p></td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table><p>&nbsp;</p><p>&nbsp;</p>"
            }

@musale

musale commented Sep 26, 2023

Copy link
Copy Markdown
Contributor Author

@sebastienlevert I have updated the first 2 issues. As for the rendering as plain text one, that is as a result of the MessageThreads component not currently supporting a way for customizing the ouput when you have unsupported content. It is a dirty hack that uses renderToString from react to generate a html string of the UnsupportedContent component. Then the html string is what is rendered as a chat message. An ideal solution would be something like what is implemented for onRenderAvatar where we could substitute what is originally used for unsupported content with our UnsupportedContent

Comment thread packages/mgt-chat/src/components/ManageChatMembers/ListChatMembers.tsx Outdated
Comment thread packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts Outdated
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@sebastienlevert

Copy link
Copy Markdown
Contributor

@musale Not sure I'm following on the third bullet. I would think that formatted HTML should be treated as valid and supported content. So we shouldn't render at all the UnsupportedContent component, right? Are we too greedy in the validation of what's supported or not?

@musale musale requested a review from gavinbarron October 6, 2023 14:52
Comment thread packages/mgt-chat/src/statefulClient/Caching/MessageCache.ts Outdated
Comment thread packages/mgt-chat/src/statefulClient/GraphNotificationClient.ts Outdated
Comment thread packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts Outdated
Comment thread packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts Outdated
Comment thread packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts Outdated
Comment thread packages/mgt-components/src/components/mgt-contact/mgt-contact.ts Outdated
Comment thread packages/mgt-components/src/components/mgt-contact/mgt-contact.ts Outdated
Comment thread packages/mgt-components/src/components/mgt-picker/mgt-picker.ts Outdated
Comment thread packages/mgt-components/src/components/preview/mgt-search-box/mgt-search-box.ts Outdated
@github-actions

github-actions Bot commented Oct 9, 2023

Copy link
Copy Markdown

🚀 New react-contoso sample application deployed here

@sebastienlevert

Copy link
Copy Markdown
Contributor

The auto-deployment of React Contoso on any PR is ABSOLUTELY FANTASTIC! Thanks for making this a thing @gavinbarron!

@sebastienlevert

sebastienlevert commented Oct 10, 2023

Copy link
Copy Markdown
Contributor

Couple of things I saw, but might be related to the order of things.

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

musale commented Oct 11, 2023

Copy link
Copy Markdown
Contributor Author

@sebastienlevert for point 1, they will be rendered as mgt person when that PR is merged. For point 2, I narrowed it down to:

  • inserting a link.
  • inserting a table.

I have fixed the issue and should be good to go.

@github-actions

Copy link
Copy Markdown

🚀 New react-contoso sample application deployed here

@gavinbarron

Copy link
Copy Markdown
Member

@musale I see that you have resolved the comments about all of the extra eslint suppressions but I'm not seeing that they have been removed. Is there a commit missing from this change?

@github-actions

Copy link
Copy Markdown

🚀 New react-contoso sample application deployed here

@musale

musale commented Oct 12, 2023

Copy link
Copy Markdown
Contributor Author

@musale I see that you have resolved the comments about all of the extra eslint suppressions but I'm not seeing that they have been removed. Is there a commit missing from this change?

Yes. Here it is 7da8a5f

@github-actions

Copy link
Copy Markdown

🚀 New react-contoso sample application deployed here

Comment thread packages/mgt-components/src/components/mgt-picker/mgt-picker.ts Outdated
@gavinbarron gavinbarron enabled auto-merge (squash) October 12, 2023 17:08
@github-actions

Copy link
Copy Markdown

🚀 New react-contoso sample application deployed here

@gavinbarron gavinbarron merged commit 3c00710 into next/mgt-chat Oct 12, 2023
@gavinbarron gavinbarron deleted the unsupported-content branch October 12, 2023 17:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

[mgt-chat] Rendering unsupported content

3 participants