Skip to content

Commit cf1c117

Browse files
joaojmendesjoaojmendes
authored
Merge pull request #1990 from SherpasGroup/sp-listitem-comments
Guest user @-mentions and styling fix for ListItemComments
2 parents 7454dc6 + 96a9b14 commit cf1c117

36 files changed

+117
-20
lines changed

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

Lines changed: 53 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,34 @@ import { IconButton } from "@fluentui/react/lib/Button";
1111
import { Text} from "@fluentui/react/lib/Text";
1212
import { ECommentAction } from "../../common/ECommentAction";
1313
import { IAddCommentPayload } from "../../models/IAddCommentPayload";
14-
import { useMsGraphAPI } from "../..";
14+
import { AppContext, useMsGraphAPI } from "../..";
15+
import SPPeopleSearchService from "../../../../services/PeopleSearchService";
16+
import { MSGraphClientFactory, SPHttpClient } from "@microsoft/sp-http";
17+
import { PageContext } from "@microsoft/sp-page-context";
18+
import { PrincipalType } from "../../../peoplepicker";
19+
import * as strings from "ControlStrings";
1520

1621
export interface IAddCommentProps {}
1722

1823
export const AddComment: React.FunctionComponent<IAddCommentProps> = (props: IAddCommentProps) => {
1924
const [commentText, setCommentText] = useState<string>("");
25+
const [disableCallingGraph, setDisableCallingGraph] = useState<boolean>(false);
2026
const { getUsers, getSuggestions } = useMsGraphAPI();
2127
const { reactMentionStyles, mentionsClasses, componentClasses } = useAddCommentStyles();
2228
const [singleLine, setSingleLine] = useState<boolean>(true);
2329
const { setlistItemCommentsState } = useContext(ListItemCommentsStateContext);
2430
const _addCommentText = useRef<IAddCommentPayload>({ mentions: [], text: "" });
31+
const { serviceScope } = useContext(AppContext);
32+
let _msGraphClientFactory: MSGraphClientFactory = undefined;
33+
let _sPHttpClient: SPHttpClient = undefined;
34+
let _pageContext: PageContext = undefined;
35+
let _peopleSearchService: SPPeopleSearchService = undefined;
36+
serviceScope.whenFinished(async () => {
37+
_msGraphClientFactory = serviceScope.consume(MSGraphClientFactory.serviceKey);
38+
_sPHttpClient = serviceScope.consume(SPHttpClient.serviceKey);
39+
_pageContext = serviceScope.consume(PageContext.serviceKey);
40+
_peopleSearchService = new SPPeopleSearchService({absoluteUrl: _pageContext.web.absoluteUrl, msGraphClientFactory: _msGraphClientFactory, spHttpClient: _sPHttpClient}, false);
41+
});
2542

2643
const sugestionsContainer = useRef<HTMLDivElement>();
2744
let _reactMentionStyles = reactMentionStyles;
@@ -54,17 +71,47 @@ export const AddComment: React.FunctionComponent<IAddCommentProps> = (props: IAd
5471
}, []);
5572

5673
const _searchData = (search: string, callback: (users: SuggestionDataItem[]) => void): void => {
74+
const _searchPeople = (): void => {
75+
_peopleSearchService.searchPeople(search, 5, [PrincipalType.User])
76+
.then((res) => res.map((user) => ({ display: user.text, id: user.secondaryText })))
77+
.then(callback)
78+
.catch(() => { /* no-op; */ });
79+
};
80+
81+
if (disableCallingGraph) {
82+
_searchPeople();
83+
return;
84+
}
85+
5786
// Try to get sugested users when user type '@'
5887
if (!search) {
5988
getSuggestions()
6089
.then((res) => res.users.map((user) => ({ display: user.displayName, id: user.mail })))
6190
.then(callback)
62-
.catch(() => { /* no-op; */ });
91+
.catch((error) => {
92+
switch (error.statusCode) {
93+
case 403:
94+
case 404:
95+
// If the user is not allowed to call graph API (e.g. guest users), we need to use the People Search API
96+
setDisableCallingGraph(true);
97+
break;
98+
default:
99+
}
100+
});
63101
} else {
64102
getUsers(search)
65103
.then((res) => res.users.map((user) => ({ display: user.displayName, id: user.mail })))
66104
.then(callback)
67-
.catch(() => { /* no-op; */ });
105+
.catch((error) => {
106+
switch (error.statusCode) {
107+
case 403:
108+
// If the user is not allowed to call graph API (e.g. guest users), we need to use the People Search API
109+
setDisableCallingGraph(true);
110+
_searchPeople();
111+
break;
112+
default:
113+
}
114+
});
68115
}
69116
};
70117

@@ -78,8 +125,8 @@ export const AddComment: React.FunctionComponent<IAddCommentProps> = (props: IAd
78125
<>
79126
<Stack tokens={{ padding: 5 }} styles={{ root: { width: 260 } }}>
80127
<Stack horizontal horizontalAlign="start" tokens={{ childrenGap: 10 }}>
81-
<img src={`${PHOTO_URL}${_user.mail}`} width={30} height={30} style={{ borderRadius: "50%" }} />
82-
<Stack>
128+
<img src={`${PHOTO_URL}${_user.mail}`} width={30} height={30} style={{ borderRadius: "50%" }} alt={_user.displayName} />
129+
<Stack styles={{ root: { overflow: "hidden" } }}>
83130
<Text styles={{ root: { fontWeight: 700 } }} variant="smallPlus" nowrap>
84131
{_user.displayName}
85132
</Text>
@@ -106,7 +153,7 @@ export const AddComment: React.FunctionComponent<IAddCommentProps> = (props: IAd
106153
<MentionsInput
107154
value={commentText}
108155
onChange={_onChange}
109-
placeholder="@mention or comment"
156+
placeholder={strings.ListItemCommentsPlaceholder}
110157
style={_reactMentionStyles}
111158
suggestionsPortalHost={sugestionsContainer.current}
112159
>

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,14 @@ export const useAddCommentStyles = () => { // eslint-disable-line @typescript-es
2323
borderWidth: 1,
2424
borderStyle: "solid",
2525
borderColor: "silver",
26-
width: 322,
26+
width: "100%",
27+
boxSizing: "border-box",
2728
":focus": {
2829
borderColor: theme.themePrimary,
2930
},
3031
":hover": {
3132
borderColor: theme.themePrimary,
33+
boxSizing: "border-box",
3234
},
3335
},
3436
};
@@ -38,10 +40,12 @@ export const useAddCommentStyles = () => { // eslint-disable-line @typescript-es
3840
marginTop: 2,
3941
backgroundColor: theme?.white,
4042
boxShadow: "0 5px 15px rgba(50, 50, 90, .1)",
43+
boxSizing: "border-box",
4144
":hover": {
4245
borderColor: theme.themePrimary,
4346
backgroundColor: theme.neutralLighterAlt,
4447
borderWidth: 1,
48+
boxSizing: "border-box",
4549
} as IStyle,
4650
} as IStyle,
4751
};
@@ -53,14 +57,21 @@ export const useAddCommentStyles = () => { // eslint-disable-line @typescript-es
5357
display: "block",
5458
borderColor: "silver",
5559
overflow: "hidden",
56-
width: 320,
57-
":focus": {
60+
width: "100%",
61+
boxSizing: "border-box",
62+
paddingTop: 1,
63+
paddingLeft: 1,
64+
":focus": {
5865
borderWidth: 2,
5966
borderColor: theme.themePrimary,
67+
paddingTop: 0,
68+
paddingLeft: 0,
6069
},
6170
":hover": {
6271
borderWidth: 2,
6372
borderColor: theme.themePrimary,
73+
paddingTop: 0,
74+
paddingLeft: 0,
6475
},
6576
} as IStyle,
6677
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -257,14 +257,14 @@ export const CommentsList: React.FunctionComponent = () => {
257257

258258
return (
259259
<>
260-
<Stack tokens={{ childrenGap: 10, maxWidth: 335 }}>
260+
<Stack tokens={{ childrenGap: 10 }}>
261261
<RenderError errorInfo={errorInfo} />
262262
<AddComment />
263263
<Text variant="small" block style={{ fontWeight: 600 }}>
264264
{strings.ListItemCommentsLabel}
265265
</Text>
266266
<div className={configurationListClasses.titlesContainer} onScroll={handleScroll} ref={scrollPanelRef}>
267-
<Stack>
267+
<Stack styles={{ root: { width: '100%' }}}>
268268
<RenderComments />
269269
</Stack>
270270
</div>

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,13 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
6666
};
6767
const documentCardStyles: Partial<IDocumentCardStyles> = {
6868
root: {
69+
maxWidth: "initial",
6970
marginBottom: 7,
70-
width: 322,
71+
width: "100%",
7172
backgroundColor: theme.neutralLighterAlt,
72-
userSelect: 'text',
73-
':hover': {
73+
userSelect: "text",
74+
boxSizing: "border-box",
75+
":hover": {
7476
borderColor: theme.themePrimary,
7577
borderWidth: 1,
7678
} as IStyle,
@@ -79,12 +81,14 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
7981

8082
const documentCardHighlightedStyles: Partial<IDocumentCardStyles> = {
8183
root: {
84+
maxWidth: "initial",
8285
marginBottom: 7,
83-
width: 322,
86+
width: "100%",
8487
backgroundColor: theme.themeLighter,
85-
userSelect: 'text',
86-
border: 'solid 3px ' + theme.themePrimary,
87-
':hover': {
88+
userSelect: "text",
89+
border: "solid 3px "+theme.themePrimary,
90+
boxSizing: "border-box",
91+
":hover": {
8892
borderColor: theme.themePrimary,
8993
borderWidth: 1,
9094
} as IStyle,
@@ -95,7 +99,8 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
9599
root: {
96100
marginBottom: 5,
97101
backgroundColor: theme.neutralLighterAlt,
98-
':hover': {
102+
boxSizing: "border-box",
103+
":hover": {
99104
borderColor: theme.themePrimary,
100105
borderWidth: 1,
101106
} as IStyle,
@@ -106,7 +111,8 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
106111
root: {
107112
marginTop: 2,
108113
backgroundColor: theme?.white,
109-
boxShadow: '0 5px 15px rgba(50, 50, 90, .1)',
114+
boxShadow: "0 5px 15px rgba(50, 50, 90, .1)",
115+
boxSizing: "border-box",
110116

111117
':hover': {
112118
borderColor: theme.themePrimary,
@@ -133,6 +139,7 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
133139
display: 'block',
134140
} as IStyle,
135141
titlesContainer: {
142+
width: "100%",
136143
height: tilesHeight,
137144
marginBottom: 10,
138145
display: 'flex',

‎src/loc/bg-bg.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -379,6 +379,7 @@ define([], () => {
379379
"ListItemCommentsDialogDeleteTitle": "Потвърдете Изтриване на коментар",
380380
"ListItemCommentsLabel": "Коментари",
381381
"ListItemCommentsNoCommentsLabel": "No comments",
382+
"ListItemCommentsPlaceholder": "@споменаване или коментар",
382383
"OrgAssetsLinkLabel": "Вашата организация",
383384
"MyTeamsMessageDontHaveTeams": "You don't have any teams",
384385
"ModernTaxonomyPickerDefaultPlaceHolder": "Въведете термин, който искате да маркирате",

‎src/loc/ca-es.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -379,6 +379,7 @@ define([], () => {
379379
"ListItemCommentsDialogDeleteTitle": "Confirmació de la supressió del comentari",
380380
"ListItemCommentsLabel": "Comentaris",
381381
"ListItemCommentsNoCommentsLabel": "No comments",
382+
"ListItemCommentsPlaceholder": "@menció o comentari",
382383
"OrgAssetsLinkLabel": "La vostra organització",
383384
"MyTeamsMessageDontHaveTeams": "You don't have any teams",
384385
"ModernTaxonomyPickerDefaultPlaceHolder": "Introduïu un terme que vulgueu etiquetar",

‎src/loc/cs-cz.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -425,6 +425,7 @@ define([], () => {
425425
ListItemCommentsDialogDeleteTitle: "Potvrzení odstranění komentáře",
426426
ListItemCommentsLabel: "Komentáře",
427427
ListItemCommentsNoCommentsLabel: "Žádné komentáře",
428+
ListItemCommentsPlaceholder: "@zmínit nebo komentovat",
428429
OrgAssetsLinkLabel: "Vaše organizace",
429430

430431
ModernTaxonomyPickerDefaultPlaceHolder: "Zadejte termín k označení",

‎src/loc/da-dk.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -379,6 +379,7 @@ define([], () => {
379379
"ListItemCommentsDialogDeleteTitle": "Bekræft kommentar til sletning",
380380
"ListItemCommentsLabel": "Kommentarer",
381381
"ListItemCommentsNoCommentsLabel": "No comments",
382+
"ListItemCommentsPlaceholder": "@nævn eller kommenter",
382383
"OrgAssetsLinkLabel": "Din organisation",
383384
"MyTeamsMessageDontHaveTeams": "You don't have any teams",
384385
"ModernTaxonomyPickerDefaultPlaceHolder": "Indtast et udtryk, du vil tagge",

‎src/loc/de-de.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -379,6 +379,7 @@ define([], () => {
379379
"ListItemCommentsDialogDeleteTitle": "Kommentar löschen bestätigen",
380380
"ListItemCommentsLabel": "Kommentare",
381381
"ListItemCommentsNoCommentsLabel": "No comments",
382+
"ListItemCommentsPlaceholder": "@erwähnen oder kommentieren",
382383
"OrgAssetsLinkLabel": "Ihre Organisation",
383384
"MyTeamsMessageDontHaveTeams": "You don't have any teams",
384385
"ModernTaxonomyPickerDefaultPlaceHolder": "Geben Sie einen Begriff ein, den Sie markieren möchten",

‎src/loc/el-gr.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -379,6 +379,7 @@ define([], () => {
379379
"ListItemCommentsDialogDeleteTitle": "Επιβεβαίωση διαγραφής σχολίου",
380380
"ListItemCommentsLabel": "Σχόλια",
381381
"ListItemCommentsNoCommentsLabel": "No comments",
382+
"ListItemCommentsPlaceholder": "@αναφορά ή σχόλιο",
382383
"OrgAssetsLinkLabel": "Ο οργανισμός σας",
383384
"MyTeamsMessageDontHaveTeams": "You don't have any teams",
384385
"ModernTaxonomyPickerDefaultPlaceHolder": "Εισαγάγετε έναν όρο που θέλετε να προσθέσετε ετικέτα",

0 commit comments

Comments
 (0)