Guest user @-mentions and styling fix for ListItemComments

src/controls/listItemComments/components/AddComment/AddComment.tsx

@@ -11,17 +11,34 @@ import { IconButton } from "@fluentui/react/lib/Button";
 import { Text} from "@fluentui/react/lib/Text";
 import { ECommentAction } from "../../common/ECommentAction";
 import { IAddCommentPayload } from "../../models/IAddCommentPayload";
-import { useMsGraphAPI } from "../..";
+import { AppContext, useMsGraphAPI } from "../..";
+import SPPeopleSearchService from "../../../../services/PeopleSearchService";
+import { MSGraphClientFactory, SPHttpClient } from "@microsoft/sp-http";
+import { PageContext } from "@microsoft/sp-page-context";
+import { PrincipalType } from "../../../peoplepicker";
+import * as strings from "ControlStrings";
 
 export interface IAddCommentProps {}
 
 export const AddComment: React.FunctionComponent<IAddCommentProps> = (props: IAddCommentProps) => {
   const [commentText, setCommentText] = useState<string>("");
+  const [disableCallingGraph, setDisableCallingGraph] = useState<boolean>(false);
   const { getUsers, getSuggestions } = useMsGraphAPI();
   const { reactMentionStyles, mentionsClasses, componentClasses } = useAddCommentStyles();
   const [singleLine, setSingleLine] = useState<boolean>(true);
   const { setlistItemCommentsState } = useContext(ListItemCommentsStateContext);
   const _addCommentText = useRef<IAddCommentPayload>({ mentions: [], text: "" });
+  const { serviceScope } = useContext(AppContext);
+  let _msGraphClientFactory: MSGraphClientFactory = undefined;
+  let _sPHttpClient: SPHttpClient = undefined;
+  let _pageContext: PageContext = undefined;
+  let _peopleSearchService: SPPeopleSearchService = undefined;
+  serviceScope.whenFinished(async () => {
+    _msGraphClientFactory = serviceScope.consume(MSGraphClientFactory.serviceKey);
+    _sPHttpClient = serviceScope.consume(SPHttpClient.serviceKey);
+    _pageContext = serviceScope.consume(PageContext.serviceKey);
+    _peopleSearchService = new SPPeopleSearchService({absoluteUrl: _pageContext.web.absoluteUrl, msGraphClientFactory: _msGraphClientFactory, spHttpClient: _sPHttpClient}, false);
+  });
 
   const sugestionsContainer = useRef<HTMLDivElement>();
   let _reactMentionStyles = reactMentionStyles;
@@ -54,17 +71,47 @@ export const AddComment: React.FunctionComponent<IAddCommentProps> = (props: IAd
   }, []);
 
   const _searchData = (search: string, callback: (users: SuggestionDataItem[]) => void): void => {
+    const _searchPeople = (): void => {
+      _peopleSearchService.searchPeople(search, 5, [PrincipalType.User])
+      .then((res) => res.map((user) => ({ display: user.text, id: user.secondaryText })))
+      .then(callback)
+      .catch(() => { /* no-op; */ });
+    };
+
+    if (disableCallingGraph) {
+      _searchPeople();
+      return;
+    }
+
     // Try to get sugested users when user type '@'
     if (!search) {
       getSuggestions()
         .then((res) => res.users.map((user) => ({ display: user.displayName, id: user.mail })))
         .then(callback)
-        .catch(() => { /* no-op; */ });
+        .catch((error) => {
+          switch (error.statusCode) {
+            case 403:
+            case 404:
+              // If the user is not allowed to call graph API (e.g. guest users), we need to use the People Search API
+              setDisableCallingGraph(true);
+              break;
+            default:
+          }
+        });
     } else {
       getUsers(search)
         .then((res) => res.users.map((user) => ({ display: user.displayName, id: user.mail })))
         .then(callback)
-        .catch(() => { /* no-op; */ });
+        .catch((error) => {
+          switch (error.statusCode) {
+            case 403:
+              // If the user is not allowed to call graph API (e.g. guest users), we need to use the People Search API
+              setDisableCallingGraph(true);
+              _searchPeople();
+              break;
+            default:
+          }
+        });
     }
   };
 
@@ -78,8 +125,8 @@ export const AddComment: React.FunctionComponent<IAddCommentProps> = (props: IAd
       <>
         <Stack tokens={{ padding: 5 }} styles={{ root: { width: 260 } }}>
           <Stack horizontal horizontalAlign="start" tokens={{ childrenGap: 10 }}>
-            <img src={`${PHOTO_URL}${_user.mail}`} width={30} height={30} style={{ borderRadius: "50%" }} />
-            <Stack>
+            <img src={`${PHOTO_URL}${_user.mail}`} width={30} height={30} style={{ borderRadius: "50%" }} alt={_user.displayName} />
+            <Stack styles={{ root: { overflow: "hidden" } }}>
               <Text styles={{ root: { fontWeight: 700 } }} variant="smallPlus" nowrap>
                 {_user.displayName}
               </Text>
@@ -106,7 +153,7 @@ export const AddComment: React.FunctionComponent<IAddCommentProps> = (props: IAd
         <MentionsInput
           value={commentText}
           onChange={_onChange}
-          placeholder="@mention or comment"
+          placeholder={strings.ListItemCommentsPlaceholder}
           style={_reactMentionStyles}
           suggestionsPortalHost={sugestionsContainer.current}
         >

src/controls/listItemComments/components/AddComment/useAddCommentStyles.ts

@@ -23,12 +23,14 @@ export const useAddCommentStyles = () => { // eslint-disable-line @typescript-es
       borderWidth: 1,
       borderStyle: "solid",
       borderColor: "silver",
-      width: 322,
+      width: "100%",
+      boxSizing: "border-box",
       ":focus": {
         borderColor: theme.themePrimary,
       },
       ":hover": {
         borderColor: theme.themePrimary,
+        boxSizing: "border-box",
       },
     },
   };
@@ -38,10 +40,12 @@ export const useAddCommentStyles = () => { // eslint-disable-line @typescript-es
       marginTop: 2,
       backgroundColor: theme?.white,
       boxShadow: "0 5px 15px rgba(50, 50, 90, .1)",
+      boxSizing: "border-box",
       ":hover": {
         borderColor: theme.themePrimary,
         backgroundColor: theme.neutralLighterAlt,
         borderWidth: 1,
+        boxSizing: "border-box",
       } as IStyle,
     } as IStyle,
   };
@@ -53,14 +57,21 @@ export const useAddCommentStyles = () => { // eslint-disable-line @typescript-es
       display: "block",
       borderColor: "silver",
       overflow: "hidden",
-      width: 320,
-      ":focus": {
+      width: "100%",
+      boxSizing: "border-box",
+      paddingTop: 1,
+      paddingLeft: 1,
+    ":focus": {
         borderWidth: 2,
         borderColor: theme.themePrimary,
+        paddingTop: 0,
+        paddingLeft: 0,
       },
       ":hover": {
         borderWidth: 2,
         borderColor: theme.themePrimary,
+        paddingTop: 0,
+        paddingLeft: 0,
       },
     } as IStyle,
   });

src/controls/listItemComments/components/Comments/CommentsList.tsx

@@ -151,14 +151,14 @@ export const CommentsList: React.FunctionComponent = () => {
 
   return (
     <>
-      <Stack tokens={{ childrenGap: 10, maxWidth: 335 }}>
+      <Stack tokens={{ childrenGap: 10 }}>
         <RenderError errorInfo={errorInfo} />
         <AddComment />
         <Text variant="small" block style={{ fontWeight: 600 }}>
           {strings.ListItemCommentsLabel}
         </Text>
         <div className={configurationListClasses.titlesContainer} onScroll={handleScroll} ref={scrollPanelRef}>
-          <Stack>
+          <Stack styles={{ root: { width: '100%' }}}>
             <RenderComments />
           </Stack>
         </div>

src/controls/listItemComments/components/Comments/useListItemCommentsStyles.ts

@@ -49,10 +49,12 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
   };
   const documentCardStyles: Partial<IDocumentCardStyles> = {
     root: {
+      maxWidth: "initial",
       marginBottom: 7,
-      width: 322,
+      width: "100%",
       backgroundColor: theme.neutralLighterAlt,
       userSelect: "text",
+      boxSizing: "border-box",
       ":hover": {
         borderColor: theme.themePrimary,
         borderWidth: 1,
@@ -62,11 +64,13 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
 
   const documentCardHighlightedStyles: Partial<IDocumentCardStyles> = {
     root: {
+      maxWidth: "initial",
       marginBottom: 7,
-      width: 322,
+      width: "100%",
       backgroundColor: theme.themeLighter,
       userSelect: "text",
       border: "solid 3px "+theme.themePrimary,
+      boxSizing: "border-box",
       ":hover": {
         borderColor: theme.themePrimary,
         borderWidth: 1,
@@ -78,6 +82,7 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
     root: {
       marginBottom: 5,
       backgroundColor: theme.neutralLighterAlt,
+      boxSizing: "border-box",
       ":hover": {
         borderColor: theme.themePrimary,
         borderWidth: 1,
@@ -90,6 +95,7 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
       marginTop: 2,
       backgroundColor: theme?.white,
       boxShadow: "0 5px 15px rgba(50, 50, 90, .1)",
+      boxSizing: "border-box",
 
       ":hover": {
         borderColor: theme.themePrimary,
@@ -116,6 +122,7 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
       display: "block",
     } as IStyle,
     titlesContainer: {
+      width: "100%",
       height: tilesHeight,
       marginBottom: 10,
       display: "flex",

src/loc/bg-bg.ts

@@ -379,6 +379,7 @@ define([], () => {
   "ListItemCommentsDialogDeleteTitle": "Потвърдете Изтриване на коментар",
   "ListItemCommentsLabel": "Коментари",
   "ListItemCommentsNoCommentsLabel": "No comments",
+  "ListItemCommentsPlaceholder": "@споменаване или коментар",
   "OrgAssetsLinkLabel": "Вашата организация",
   "MyTeamsMessageDontHaveTeams": "You don't have any teams",
   "ModernTaxonomyPickerDefaultPlaceHolder": "Въведете термин, който искате да маркирате",

src/loc/ca-es.ts

@@ -379,6 +379,7 @@ define([], () => {
   "ListItemCommentsDialogDeleteTitle": "Confirmació de la supressió del comentari",
   "ListItemCommentsLabel": "Comentaris",
   "ListItemCommentsNoCommentsLabel": "No comments",
+  "ListItemCommentsPlaceholder": "@menció o comentari",
   "OrgAssetsLinkLabel": "La vostra organització",
   "MyTeamsMessageDontHaveTeams": "You don't have any teams",
   "ModernTaxonomyPickerDefaultPlaceHolder": "Introduïu un terme que vulgueu etiquetar",

src/loc/cs-cz.ts

@@ -425,6 +425,7 @@ define([], () => {
     ListItemCommentsDialogDeleteTitle: "Potvrzení odstranění komentáře",
     ListItemCommentsLabel: "Komentáře",
     ListItemCommentsNoCommentsLabel: "Žádné komentáře",
+    ListItemCommentsPlaceholder: "@zmínit nebo komentovat",
     OrgAssetsLinkLabel: "Vaše organizace",
 
     ModernTaxonomyPickerDefaultPlaceHolder: "Zadejte termín k označení",

src/loc/da-dk.ts

@@ -379,6 +379,7 @@ define([], () => {
   "ListItemCommentsDialogDeleteTitle": "Bekræft kommentar til sletning",
   "ListItemCommentsLabel": "Kommentarer",
   "ListItemCommentsNoCommentsLabel": "No comments",
+  "ListItemCommentsPlaceholder": "@nævn eller kommenter",
   "OrgAssetsLinkLabel": "Din organisation",
   "MyTeamsMessageDontHaveTeams": "You don't have any teams",
   "ModernTaxonomyPickerDefaultPlaceHolder": "Indtast et udtryk, du vil tagge",

src/loc/de-de.ts

@@ -379,6 +379,7 @@ define([], () => {
   "ListItemCommentsDialogDeleteTitle": "Kommentar löschen bestätigen",
   "ListItemCommentsLabel": "Kommentare",
   "ListItemCommentsNoCommentsLabel": "No comments",
+  "ListItemCommentsPlaceholder": "@erwähnen oder kommentieren",
   "OrgAssetsLinkLabel": "Ihre Organisation",
   "MyTeamsMessageDontHaveTeams": "You don't have any teams",
   "ModernTaxonomyPickerDefaultPlaceHolder": "Geben Sie einen Begriff ein, den Sie markieren möchten",

src/loc/el-gr.ts

@@ -379,6 +379,7 @@ define([], () => {
   "ListItemCommentsDialogDeleteTitle": "Επιβεβαίωση διαγραφής σχολίου",
   "ListItemCommentsLabel": "Σχόλια",
   "ListItemCommentsNoCommentsLabel": "No comments",
+  "ListItemCommentsPlaceholder": "@αναφορά ή σχόλιο",
   "OrgAssetsLinkLabel": "Ο οργανισμός σας",
   "MyTeamsMessageDontHaveTeams": "You don't have any teams",
   "ModernTaxonomyPickerDefaultPlaceHolder": "Εισαγάγετε έναν όρο που θέλετε να προσθέσετε ετικέτα",

src/loc/en-us.ts

@@ -395,6 +395,7 @@ define([], () => {
     ListItemCommentsDialogDeleteTitle: "Confirm Delete Comment",
     ListItemCommentsLabel: "Comments",
     ListItemCommentsNoCommentsLabel: "There are no Comments",
+    ListItemCommentsPlaceholder: "@mention or comment",
     OrgAssetsLinkLabel: "Your organization",
 
     ModernTaxonomyPickerDefaultPlaceHolder: "Type term to tag",

src/loc/es-es.ts

@@ -379,6 +379,7 @@ define([], () => {
   "ListItemCommentsDialogDeleteTitle": "Confirmar comentario de eliminación",
   "ListItemCommentsLabel": "Comentarios",
   "ListItemCommentsNoCommentsLabel": "No hay comentarios",
+  "ListItemCommentsPlaceholder": "@mencionar o comentar",
   "OrgAssetsLinkLabel": "Tu organizacion",
   "MyTeamsMessageDontHaveTeams": "You don't have any teams",
   "ModernTaxonomyPickerDefaultPlaceHolder": "Introduzca un término que desee etiquetar",

src/loc/et-ee.ts

@@ -379,6 +379,7 @@ define([], () => {
   "ListItemCommentsDialogDeleteTitle": "Kommentaari kustutamise kinnitamine",
   "ListItemCommentsLabel": "Kommentaarid",
   "ListItemCommentsNoCommentsLabel": "Kommentaare pole",
+  "ListItemCommentsPlaceholder": "@mainige või kommenteeri",
   "OrgAssetsLinkLabel": "Teie organisatsioon",
   "MyTeamsMessageDontHaveTeams": "You don't have any teams",
   "ModernTaxonomyPickerDefaultPlaceHolder": "Sisestage termin, mille soovite märgistada",

src/loc/eu-es.ts

@@ -258,6 +258,7 @@ define([], () => {
     ListItemCommentsDialogDeleteTitle: "Confirm Delete Comment",
     ListItemCommentsLabel: "Comments",
     ListItemCommentsNoCommentsLabel: "There is no Comments",
+    ListItemCommentsPlaceholder: "@aipatu edo iruzkina",
     ListLayoutAriaLabel: "View options. {0}  {1} .",
     ListLayoutCompact: "Compact view",
     ListLayoutCompactDescription: "View items and details in a compact list",

src/loc/fi-fi.ts

@@ -379,6 +379,7 @@ define([], () => {
   "ListItemCommentsDialogDeleteTitle": "Vahvista poista kommentti",
   "ListItemCommentsLabel": "Kommentit",
   "ListItemCommentsNoCommentsLabel": "Kommentteja ei ole",
+  "ListItemCommentsPlaceholder": "@mainitse tai kommentoi",
   "OrgAssetsLinkLabel": "Oma organisaatio",
   "MyTeamsMessageDontHaveTeams": "Sinulla ei ole yhtään tiimejä",
   "ModernTaxonomyPickerDefaultPlaceHolder": "Kirjoita tagi, jonka haluat merkitä",

src/loc/fr-ca.ts

@@ -379,6 +379,7 @@ define([], () => {
   "ListItemCommentsDialogDeleteTitle": "Confirmer supprimer le commentaire",
   "ListItemCommentsLabel": "Commentaires",
   "ListItemCommentsNoCommentsLabel": "Il n’y a pas de commentaires",
+  "ListItemCommentsPlaceholder": "@mention ou commentaire",
   "OrgAssetsLinkLabel": "Votre organisation",
   "MyTeamsMessageDontHaveTeams": "You don't have any teams",
   "ModernTaxonomyPickerDefaultPlaceHolder": "Entrez un terme que vous souhaitez marquer",

src/loc/fr-fr.ts

@@ -379,6 +379,7 @@ define([], () => {
   "ListItemCommentsDialogDeleteTitle": "Confirmer la suppression du commentaire",
   "ListItemCommentsLabel": "Commentaires",
   "ListItemCommentsNoCommentsLabel": "Il n’y a pas de commentaires",
+  "ListItemCommentsPlaceholder": "@mention ou commentaire",
   "OrgAssetsLinkLabel": "Votre organisation",
   "MyTeamsMessageDontHaveTeams": "You don't have any teams",
   "ModernTaxonomyPickerDefaultPlaceHolder": "Entrez un terme que vous souhaitez marquer",

src/loc/it-it.ts

@@ -377,6 +377,7 @@ define([], () => {
   "ListItemCommentsDialogDeleteTitle": "Conferma eliminazione commento",
   "ListItemCommentsLabel": "Commenti",
   "ListItemCommentsNoCommentsLabel": "Non ci sono commenti",
+  "ListItemCommentsPlaceholder": "@menzione o commento",
   "OrgAssetsLinkLabel": "Tua organizzazione",
   "MyTeamsMessageDontHaveTeams": "Non hai alcun team",
   "ModernTaxonomyPickerDefaultPlaceHolder": "Inserisci un termine che vuoi taggare",

src/loc/ja-jp.ts

@@ -379,6 +379,7 @@ define([], () => {
   "ListItemCommentsDialogDeleteTitle": "コメントの削除の確認",
   "ListItemCommentsLabel": "コメント",
   "ListItemCommentsNoCommentsLabel": "コメントはありません",
+  "ListItemCommentsPlaceholder": "@メンションまたはコメント",
   "OrgAssetsLinkLabel": "あなたの組織",
   "MyTeamsMessageDontHaveTeams": "You don't have any teams",
   "ModernTaxonomyPickerDefaultPlaceHolder": "タグ付けする用語を入力してください",

src/loc/lt-lt.ts

@@ -379,6 +379,7 @@ define([], () => {
   "ListItemCommentsDialogDeleteTitle": "Patvirtinti naikinimo komentarą",
   "ListItemCommentsLabel": "Komentarai",
   "ListItemCommentsNoCommentsLabel": "Komentarų nėra",
+  "ListItemCommentsPlaceholder": "@paminėkite arba komentuokite",
   "OrgAssetsLinkLabel": "Savo organizacijoje",
   "MyTeamsMessageDontHaveTeams": "You don't have any teams",
   "ModernTaxonomyPickerDefaultPlaceHolder": "Įveskite terminą, kurį norite pažymėti",

src/loc/lv-lv.ts

@@ -379,6 +379,7 @@ define([], () => {
   "ListItemCommentsDialogDeleteTitle": "Apstiprināt dzēst komentāru",
   "ListItemCommentsLabel": "Komentāri",
   "ListItemCommentsNoCommentsLabel": "Nav komentāru",
+  "ListItemCommentsPlaceholder": "@pieminēt vai komentēt",
   "OrgAssetsLinkLabel": "Jūsu organizācija",
   "MyTeamsMessageDontHaveTeams": "You don't have any teams",
   "ModernTaxonomyPickerDefaultPlaceHolder": "Ievadiet vārdu, kuru vēlaties atzīmēt",

src/loc/mystrings.d.ts

@@ -46,6 +46,7 @@ declare interface IControlStrings {
   ProgressStepsIndicatorNoSteps: string;
   ListItemCommentsLabel: string;
   ListItemCommentsNoCommentsLabel: string;
+  ListItemCommentsPlaceholder: string;
   ListItemCommentDIalogDeleteSubText: string;
   ListItemCommentsDialogDeleteTitle: string;
 

src/loc/nb-no.ts

@@ -379,6 +379,7 @@ define([], () => {
     "ListItemCommentsDialogDeleteTitle": "Bekreft sletting av kommentar",
     "ListItemCommentsLabel": "Kommentarer",
     "ListItemCommentsNoCommentsLabel": "Det finnes ingen kommentarer",
+    "ListItemCommentsPlaceholder": "@nevn eller kommenter",
     "OrgAssetsLinkLabel": "Egen organisasjon",
     "MyTeamsMessageDontHaveTeams": "Du har ingen team",
     "ModernTaxonomyPickerDefaultPlaceHolder": "Skriv inn termen som skal merkes",

src/loc/nl-nl.ts

@@ -377,6 +377,7 @@ define([], () => {
     "ListItemCommentsDialogDeleteTitle": "Opmerking verwijderen bevestigen",
     "ListItemCommentsLabel": "Opmerkingen",
     "ListItemCommentsNoCommentsLabel": "Er is geen commentaar",
+    "ListItemCommentsPlaceholder": "@vermelden of commentaar",
     "OrgAssetsLinkLabel": "Uw organisatie",
     "MyTeamsMessageDontHaveTeams": "You don't have any teams",
     "ModernTaxonomyPickerDefaultPlaceHolder": "Voer een term in die u wilt taggen",

src/loc/pl-pl.ts

@@ -379,6 +379,7 @@ define([], () => {
   "ListItemCommentsDialogDeleteTitle": "Potwierdź Usuń komentarz",
   "ListItemCommentsLabel": "Komentarze",
   "ListItemCommentsNoCommentsLabel": "Brak komentarzy",
+  "ListItemCommentsPlaceholder": "@wzmianka lub komentarz",
   "OrgAssetsLinkLabel": "Twoja organizacja",
   "MyTeamsMessageDontHaveTeams": "You don't have any teams",
   "ModernTaxonomyPickerDefaultPlaceHolder": "Wprowadź termin, który chcesz oznaczyć",