wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-09 12:30:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

[CORL-476] Add badges to user from SSO token (#2470)

Browse Source 
* fix: bug in lookup not checking object properly before accessing

* fix: Recursive types not handling optional arrays

* add user badges component

* create user badges from sso token

* update badges type

* revert src/core/client/embed/index.html

* remove duplicated line

* add user badges component

* create user badges from sso token

* revert src/core/client/embed/index.html

* remove duplicated line

* fix types

* fix tests and snaps

* add user badges to user drawer

* update snaps

* update readme

* [CORL-476] add user role from SSO token (#2475)

* add role from token

* use joi to validate role values

Co-Authored-By: Wyatt Johnson <wyattjoh@gmail.com>

* simplify sso.role validation

* add test for invalid role in sso token
This commit is contained in:
Tessa Thornton
2019-08-20 13:15:59 -04:00
committed by GitHub
co-authored by Wyatt Johnson
parent add5224338
commit 7809cd3d68
17 changed files with 358 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/admin/components/UserHistoryDrawer/UserBadgesContainer.tsx
+37
View File
@@ -0,0 +1,37 @@
import React, { FunctionComponent } from "react";
import { graphql } from "react-relay";
import { UserBadgesContainer_user as UserData } from "coral-admin/__generated__/UserBadgesContainer_user.graphql";
import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
import CLASSES from "coral-stream/classes";
import { Tag } from "coral-ui/components";
interface Props {
user: UserData;
}
const UserBadgesContainer: FunctionComponent<Props> = ({ user }) => {
if (!user.badges) {
return null;
}
return (
<>
{user.badges.map(badge => (
<Tag key={badge} color="dark" className={CLASSES.comment.userBadge}>
{badge}
</Tag>
))}
</>
);
};
const enhanced = withFragmentContainer<Props>({
user: graphql`
fragment UserBadgesContainer_user on User {
badges
}
`,
})(UserBadgesContainer);
export default enhanced;
src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx
+6 -1
View File
@@ -11,6 +11,7 @@ import { Button, Flex, Icon, Typography } from "coral-ui/components";
import RecentHistoryContainer from "./RecentHistoryContainer";
import Tabs from "./Tabs";
import UserBadgesContainer from "./UserBadgesContainer";
import UserStatusDetailsContainer from "./UserStatusDetailsContainer";
import styles from "./UserHistoryDrawerContainer.css";
@@ -38,8 +39,11 @@ const UserHistoryDrawerContainer: FunctionComponent<Props> = ({
<Button className={styles.close} onClick={onClose}>
<Icon size="md">close</Icon>
</Button>
<Flex className={styles.username}>
<Flex className={styles.username} itemGutter>
<span>{user.username}</span>
<div>
<UserBadgesContainer user={user} />
</div>
</Flex>
<div className={styles.userStatus}>
<Flex alignItems="center" itemGutter="half">
@@ -130,6 +134,7 @@ const UserHistoryDrawerContainer: FunctionComponent<Props> = ({
const enhanced = withFragmentContainer<Props>({
user: graphql`
fragment UserHistoryDrawerContainer_user on User {
...UserBadgesContainer_user
...UserStatusChangeContainer_user
...UserStatusDetailsContainer_user
...RecentHistoryContainer_user
src/core/client/stream/classes.ts
+5
View File
@@ -95,6 +95,11 @@ const CLASSES = {
*/
userTag: "coral coral-comment-userTag",
/**
* userBadge can be used to target a badge associated with a User.
*/
userBadge: "coral coral-comment-userBadge",
/**
* commentTag can be used to target a tag associated with a Comment.
*/
src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx
+39
View File
@@ -0,0 +1,39 @@
import React, { FunctionComponent } from "react";
import { graphql } from "react-relay";
import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
import { AuthorBadgesContainer_comment as CommentData } from "coral-stream/__generated__/AuthorBadgesContainer_comment.graphql";
import CLASSES from "coral-stream/classes";
import { Tag } from "coral-ui/components";
interface Props {
comment: CommentData;
}
const AuthorBadgesContainer: FunctionComponent<Props> = ({ comment }) => {
if (!comment.author || !comment.author.badges) {
return null;
}
return (
<>
{comment.author.badges.map(badge => (
<Tag key={badge} color="dark" className={CLASSES.comment.userBadge}>
{badge}
</Tag>
))}
</>
);
};
const enhanced = withFragmentContainer<Props>({
comment: graphql`
fragment AuthorBadgesContainer_comment on Comment {
author {
badges
}
}
`,
})(AuthorBadgesContainer);
export default enhanced;
src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx
+1
View File
@@ -27,6 +27,7 @@ function createDefaultProps(add: DeepPartial<Props> = {}): Props {
author: {
id: "author-id",
username: "Marvin",
badges: [],
},
parent: null,
body: "Woof",
src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
+4
View File
@@ -21,6 +21,7 @@ import {
import { Button, Flex, HorizontalGutter, Tag } from "coral-ui/components";
import { isPublished } from "../helpers";
import UserBadgesContainer from "./AuthorBadgesContainer";
import ButtonsBar from "./ButtonsBar";
import EditCommentFormContainer from "./EditCommentForm";
import IndentedComment from "./IndentedComment";
@@ -242,6 +243,7 @@ export class CommentContainer extends Component<Props, State> {
user={comment.author}
/>
<UserTagsContainer comment={comment} />
<UserBadgesContainer comment={comment} />
</>
)
}
@@ -342,6 +344,7 @@ const enhanced = withSetCommentIDMutation(
ignoredUsers {
id
}
badges
role
...UsernameWithPopoverContainer_viewer
...ReactionButtonContainer_viewer
@@ -389,6 +392,7 @@ const enhanced = withSetCommentIDMutation(
...ReportButtonContainer_comment
...CaretContainer_comment
...RejectedTombstoneContainer_comment
...AuthorBadgesContainer_comment
...UserTagsContainer_comment
}
`,
src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/CreateCommentReplyMutation.ts
+1
View File
@@ -179,6 +179,7 @@ function commit(
id: viewer.id,
username: viewer.username,
createdAt: viewer.createdAt,
badges: viewer.badges,
ignoreable: false,
},
body: input.body,
src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
+193
View File
@@ -20,6 +20,7 @@ exports[`hide reply button 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -62,6 +63,7 @@ exports[`hide reply button 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -101,6 +103,7 @@ exports[`hide reply button 1`] = `
<Relay(UsernameWithPopoverContainer)
user={
Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
}
@@ -111,6 +114,30 @@ exports[`hide reply button 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": null,
"pending": false,
"status": "NONE",
"tags": Array [],
}
}
/>
<Relay(AuthorBadgesContainer)
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -156,6 +183,7 @@ exports[`renders body only 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": null,
},
@@ -204,6 +232,7 @@ exports[`renders body only 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": null,
},
@@ -243,6 +272,7 @@ exports[`renders body only 1`] = `
<Relay(UsernameWithPopoverContainer)
user={
Object {
"badges": Array [],
"id": "author-id",
"username": null,
}
@@ -253,6 +283,30 @@ exports[`renders body only 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": null,
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": null,
"pending": false,
"status": "NONE",
"tags": Array [],
}
}
/>
<Relay(AuthorBadgesContainer)
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": null,
},
@@ -298,6 +352,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -346,6 +401,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -385,6 +441,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
<Relay(UsernameWithPopoverContainer)
user={
Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
}
@@ -395,6 +452,30 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": null,
"pending": false,
"status": "NONE",
"tags": Array [],
}
}
/>
<Relay(AuthorBadgesContainer)
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -440,6 +521,7 @@ exports[`renders disabled reply when story is closed 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -488,6 +570,7 @@ exports[`renders disabled reply when story is closed 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -527,6 +610,7 @@ exports[`renders disabled reply when story is closed 1`] = `
<Relay(UsernameWithPopoverContainer)
user={
Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
}
@@ -537,6 +621,30 @@ exports[`renders disabled reply when story is closed 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": null,
"pending": false,
"status": "NONE",
"tags": Array [],
}
}
/>
<Relay(AuthorBadgesContainer)
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -582,6 +690,7 @@ exports[`renders in reply to 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -634,6 +743,7 @@ exports[`renders in reply to 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -677,6 +787,7 @@ exports[`renders in reply to 1`] = `
<Relay(UsernameWithPopoverContainer)
user={
Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
}
@@ -687,6 +798,34 @@ exports[`renders in reply to 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": Object {
"author": Object {
"username": "ParentAuthor",
},
},
"pending": false,
"status": "NONE",
"tags": Array [],
}
}
/>
<Relay(AuthorBadgesContainer)
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -736,6 +875,7 @@ exports[`renders username and body 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -784,6 +924,7 @@ exports[`renders username and body 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -823,6 +964,7 @@ exports[`renders username and body 1`] = `
<Relay(UsernameWithPopoverContainer)
user={
Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
}
@@ -833,6 +975,30 @@ exports[`renders username and body 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": null,
"pending": false,
"status": "NONE",
"tags": Array [],
}
}
/>
<Relay(AuthorBadgesContainer)
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -878,6 +1044,7 @@ exports[`shows conversation link 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -926,6 +1093,7 @@ exports[`shows conversation link 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
@@ -970,6 +1138,7 @@ exports[`shows conversation link 1`] = `
<Relay(UsernameWithPopoverContainer)
user={
Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
}
@@ -980,6 +1149,30 @@ exports[`shows conversation link 1`] = `
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": null,
"pending": false,
"status": "NONE",
"tags": Array [],
}
}
/>
<Relay(AuthorBadgesContainer)
comment={
Object {
"author": Object {
"badges": Array [],
"id": "author-id",
"username": "Marvin",
},
src/core/client/stream/tabs/Comments/Stream/PostCommentForm/CreateCommentMutation.ts
+2
View File
@@ -78,6 +78,7 @@ graphql`
fragment CreateCommentMutation_viewer on User {
role
createdAt
badges
}
`;
// tslint:disable-next-line:no-unused-expression
@@ -149,6 +150,7 @@ function commit(
id: viewer.id,
username: viewer.username,
createdAt: viewer.createdAt,
badges: viewer.badges,
ignoreable: false,
},
revision: {
src/core/client/ui/components/Tag/Tag.css
+5 -1
View File
@@ -2,7 +2,7 @@
composes: tagText from "coral-ui/shared/typography.css";
color: var(--palette-text-light);
line-height: 1;
padding: 2px 4px;
padding: var(--spacing-1);
white-space: nowrap;
border-radius: 1px;
display: inline-block;
@@ -20,6 +20,10 @@
background-color: var(--palette-error-dark);
}
.colorDarkest {
background-color: var(--palette-primary-darkest);
}
.variantPill {
border-radius: 20px;
padding: 2px 6px;
src/core/client/ui/components/Tag/Tag.tsx
+2 -1
View File
@@ -12,7 +12,7 @@ interface Props {
*/
classes: typeof styles;
children: React.ReactNode;
color?: "grey" | "primary" | "error";
color?: "grey" | "primary" | "error" | "dark";
variant?: "regular" | "pill";
}
@@ -25,6 +25,7 @@ const Tag: FunctionComponent<Props> = props => {
[classes.colorPrimary]: color === "primary",
[classes.colorError]: color === "error",
[classes.colorGrey]: color === "grey",
[classes.colorDarkest]: color === "dark",
});
return (