Merge branch 'sp-listitem-comments' of https://github.com/SherpasGroup/sp-dev-fx-controls-react into dev

Author: joelfmrodrigues

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

@@ -257,14 +257,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

@@ -66,11 +66,13 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
   };
   const documentCardStyles: Partial<IDocumentCardStyles> = {
     root: {
+      maxWidth: "initial",
       marginBottom: 7,
-      width: 322,
+      width: "100%",
       backgroundColor: theme.neutralLighterAlt,
-      userSelect: 'text',
-      ':hover': {
+      userSelect: "text",
+      boxSizing: "border-box",
+      ":hover": {
         borderColor: theme.themePrimary,
         borderWidth: 1,
       } as IStyle,
@@ -79,12 +81,14 @@ 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,
-      ':hover': {
+      userSelect: "text",
+      border: "solid 3px "+theme.themePrimary,
+      boxSizing: "border-box",
+      ":hover": {
         borderColor: theme.themePrimary,
         borderWidth: 1,
       } as IStyle,
@@ -95,7 +99,8 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
     root: {
       marginBottom: 5,
       backgroundColor: theme.neutralLighterAlt,
-      ':hover': {
+      boxSizing: "border-box",
+      ":hover": {
         borderColor: theme.themePrimary,
         borderWidth: 1,
       } as IStyle,
@@ -106,7 +111,8 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
     root: {
       marginTop: 2,
       backgroundColor: theme?.white,
-      boxShadow: '0 5px 15px rgba(50, 50, 90, .1)',
+      boxShadow: "0 5px 15px rgba(50, 50, 90, .1)",
+      boxSizing: "border-box",
 
       ':hover': {
         borderColor: theme.themePrimary,
@@ -133,6 +139,7 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
       display: 'block',
     } as IStyle,
     titlesContainer: {
+      width: "100%",
       height: tilesHeight,
       marginBottom: 10,
       display: 'flex',

src/loc/bg-bg.ts

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

src/loc/ca-es.ts

@@ -392,6 +392,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

@@ -392,6 +392,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

@@ -392,6 +392,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

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