Padding

* Basic Comment API

* Roflcopter

frontend/src/metabase-types/api/comment.ts

@@ -0,0 +1,51 @@
+import type { User } from "./user";
+
+export type CommentModel = "dashboard" | "card" | "comment";
+
+type CommentId = number;
+
+export interface Comment {
+  id: CommentId;
+  created_at: string;
+  updated_at: string;
+  model: CommentModel;
+  model_id: number;
+  text: string;
+  resolved: boolean;
+  resolved_at: boolean;
+  reactions: Reaction[];
+  author: User;
+  replies: Comment[];
+}
+
+export interface Reaction {
+  id: number;
+  content: "string"; // but only emojis
+  author: User;
+}
+
+export type QueryCommentParams =
+  | {
+      model: CommentModel;
+      model_id: number;
+    }
+  | {
+      model: never;
+      model_id: never;
+    };
+
+export interface CreateCommentRequest {
+  model: CommentModel;
+  model_id: number;
+  text: string;
+}
+
+export interface ReactToCommentRequest {
+  id: CommentId;
+  content: string;
+}
+
+export interface ResolveCommentRequest {
+  id: CommentId;
+  resolved: true;
+}

frontend/src/metabase-types/api/index.ts

@@ -7,6 +7,7 @@ export * from "./bookmark";
 export * from "./card";
 export * from "./click-behavior";
 export * from "./collection";
+export * from "./comment";
 export * from "./dashboard";
 export * from "./database";
 export * from "./dataset";

frontend/src/metabase-types/api/user.ts

@@ -34,6 +34,7 @@ export interface User extends BaseUser {
   custom_homepage: {
     dashboard_id: DashboardId;
   } | null;
+  avatar: string | null;
 }
 
 export interface UserListResult {
@@ -113,4 +114,5 @@ export type UpdateUserRequest = {
   is_superuser?: boolean;
   login_attributes?: Record<UserAttribute, UserAttribute> | null;
   user_group_memberships?: { id: number; is_group_manager: boolean }[];
+  avatar?: string;
 };

frontend/src/metabase/account/app/components/AccountHeader/AccountHeader.module.css

@@ -0,0 +1,19 @@
+.uploadIcon {
+  --icon-size: 25px;
+
+  position: absolute;
+  right: 0;
+  bottom: 15px;
+  background: var(--mb-color-background-brand);
+  color: white;
+  font-weight: 800;
+  font-size: 20px;
+  line-height: 0;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  border: 2px solid white;
+  cursor: pointer;
+}

frontend/src/metabase/account/app/components/AccountHeader/AccountHeader.styled.tsx

@@ -47,6 +47,7 @@ export const HeaderAvatar = styled(UserAvatar)`
   width: 3em;
   height: 3em;
   margin-bottom: ${space(1)};
+  cursor: pointer;
 
   ${breakpointMinSmall} {
     width: 4em;

frontend/src/metabase/account/app/components/AccountHeader/AccountHeader.tsx

@@ -1,12 +1,15 @@
 import type { Path } from "history";
-import { useMemo } from "react";
+import { type ChangeEvent, useMemo, useRef } from "react";
 import { t } from "ttag";
 
+import { useUpdateUserMutation } from "metabase/api";
 import Radio from "metabase/core/components/Radio";
 import { getFullName } from "metabase/lib/user";
 import { PLUGIN_IS_PASSWORD_USER } from "metabase/plugins";
+import { Box } from "metabase/ui";
 import type { User } from "metabase-types/api";
 
+import AccountHeaderStyle from "./AccountHeader.module.css";
 import {
   AccountHeaderRoot,
   HeaderAvatar,
@@ -45,10 +48,45 @@ export const AccountHeader = ({
 
   const userFullName = getFullName(user);
 
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [updateUser] = useUpdateUserMutation();
+  function handleAvatarUpload(fileEvent: ChangeEvent<HTMLInputElement>) {
+    if (fileEvent.target.files && fileEvent.target.files.length > 0) {
+      const file = fileEvent.target.files[0];
+
+      const reader = new FileReader();
+      reader.onload = async readerEvent => {
+        const dataUri = readerEvent.target?.result as string;
+        updateUser({
+          id: user.id,
+          avatar: dataUri,
+        });
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+
   return (
     <AccountHeaderRoot data-testid="account-header">
       <HeaderSection>
-        <HeaderAvatar user={user} />
+        <Box
+          pos="relative"
+          onClick={() => {
+            fileInputRef.current?.click();
+          }}
+        >
+          <HeaderAvatar user={user} />
+          <div className={AccountHeaderStyle.uploadIcon}>+</div>
+        </Box>
+        <input
+          data-testid="file-input"
+          ref={fileInputRef}
+          hidden
+          onChange={handleAvatarUpload}
+          type="file"
+          accept="image/jpeg,image/png,image/svg+xml"
+          multiple={false}
+        />
         {userFullName && <HeaderTitle>{userFullName}</HeaderTitle>}
         <HeaderSubtitle>{user.email}</HeaderSubtitle>
       </HeaderSection>

frontend/src/metabase/api/comment.ts

@@ -0,0 +1,56 @@
+import type {
+  Comment,
+  CreateCommentRequest,
+  ReactToCommentRequest,
+  ResolveCommentRequest,
+} from "metabase-types/api";
+
+import { Api } from "./api";
+import { invalidateTags, listTag, provideCommentListTags } from "./tags";
+
+export const commentApi = Api.injectEndpoints({
+  endpoints: builder => ({
+    listComment: builder.query<Comment[], void>({
+      query: body => ({
+        method: "GET",
+        url: "/api/comment",
+        body,
+      }),
+      providesTags: (comments = []) => provideCommentListTags(comments),
+    }),
+    createComment: builder.mutation<Comment, CreateCommentRequest>({
+      query: body => ({
+        method: "POST",
+        url: "/api/comment",
+        body,
+      }),
+      invalidatesTags: (_comment, error) =>
+        invalidateTags(error, [listTag("comment")]),
+    }),
+    reactToComment: builder.mutation<Comment, ReactToCommentRequest>({
+      query: ({ id, ...body }) => ({
+        method: "POST",
+        url: `/api/comment/${id}/react`,
+        body,
+      }),
+      invalidatesTags: (_comment, error) =>
+        invalidateTags(error, [listTag("comment")]),
+    }),
+    resolveComment: builder.mutation<Comment, ResolveCommentRequest>({
+      query: ({ id, ...body }) => ({
+        method: "PUT",
+        url: `/api/comment/${id}`,
+        body,
+      }),
+      invalidatesTags: (_comment, error) =>
+        invalidateTags(error, [listTag("comment")]),
+    }),
+  }),
+});
+
+export const {
+  useListCommentQuery,
+  useCreateCommentMutation,
+  useReactToCommentMutation,
+  useResolveCommentMutation,
+} = commentApi;

frontend/src/metabase/api/index.ts

@@ -8,6 +8,7 @@ export * from "./bookmark";
 export * from "./card";
 export * from "./cloud-migration";
 export * from "./collection";
+export * from "./comment";
 export * from "./dashboard";
 export * from "./database";
 export * from "./dataset";

frontend/src/metabase/api/tags/constants.ts

@@ -9,6 +9,7 @@ export const TAG_TYPES = [
   "cloud-migration",
   "channel",
   "collection",
+  "comment",
   "dashboard",
   "database",
   "field",

frontend/src/metabase/api/tags/utils.ts

@@ -11,6 +11,7 @@ import type {
   Collection,
   CollectionItem,
   CollectionItemModel,
+  Comment,
   Dashboard,
   DashboardQueryMetadata,
   DashboardSubscription,
@@ -198,6 +199,18 @@ export function provideCollectionTags(
   return [idTag("collection", collection.id)];
 }
 
+export function provideCommentListTags(
+  comments: Comment[],
+): TagDescription<TagType>[] {
+  return [listTag("comment"), ...comments.flatMap(provideCommentTags)];
+}
+
+export function provideCommentTags(
+  comment: Comment,
+): TagDescription<TagType>[] {
+  return [idTag("comment", comment.id)];
+}
+
 export function provideModelIndexTags(
   modelIndex: ModelIndex,
 ): TagDescription<TagType>[] {

frontend/src/metabase/comments/components/CommentFeed/CommentFeed.tsx

@@ -0,0 +1,144 @@
+import { useDisclosure } from "@mantine/hooks";
+import { useRef } from "react";
+import { usePrevious } from "react-use";
+
+import { useCurrentUser } from "embedding-sdk";
+import {
+  useCreateCommentMutation,
+  useListCommentQuery,
+  useResolveCommentMutation,
+} from "metabase/api";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import { Button, Icon, Stack } from "metabase/ui";
+import type {
+  CardId,
+  CommentModel,
+  DashboardId,
+  UserId,
+} from "metabase-types/api";
+
+import type { Comment as CommentType } from "../../types";
+import { CommentInput } from "../CommentInput/CommentInput";
+import { CommentList } from "../comment-section/CommentSection";
+
+export function CommentFeed({
+  model,
+  modelId,
+  userId,
+  autoScroll = false,
+  shadowed = false,
+}: {
+  model?: CommentModel;
+  modelId?: CardId | DashboardId;
+  userId?: UserId;
+  autoScroll?: boolean;
+  shadowed?: boolean;
+}) {
+  const { data: comments, isLoading } = useListCommentQuery(
+    {
+      model,
+      model_id: modelId,
+      user_id: userId,
+    },
+    {
+      pollingInterval: 3000,
+      skipPollingIfUnfocused: true,
+    },
+  );
+
+  const [isResolvedThreadsOpen, { toggle }] = useDisclosure(false);
+
+  const user = useCurrentUser();
+
+  const previousComments = usePrevious(comments);
+
+  const [saveComment] = useCreateCommentMutation();
+  const [handleResolve] = useResolveCommentMutation();
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  if (isLoading) {
+    return <LoadingAndErrorWrapper loading error={null} />;
+  }
+
+  const canComment = Boolean(!!model && !!modelId);
+
+  const scrollToBottom = () => {
+    if (ref.current) {
+      ref.current.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
+  if (autoScroll && comments?.length !== previousComments?.length) {
+    window.requestAnimationFrame(() => {
+      setTimeout(() => scrollToBottom(), 100);
+    });
+  }
+
+  const openThreads = comments?.filter(comment => !comment.resolved) ?? [];
+  const resolvedThreads = comments?.filter(comment => comment.resolved) ?? [];
+
+  return (
+    <Stack spacing="xs">
+      <Stack spacing="md" pr="md">
+        <CommentList
+          comments={openThreads}
+          onResolve={(comment: CommentType) =>
+            handleResolve({
+              id: comment.id,
+              resolved: !comment.resolved,
+            })
+          }
+          onReply={saveComment}
+          shadowed={shadowed}
+        />
+
+        {canComment && (
+          <CommentInput
+            placeholder="Add a comment..."
+            user={user}
+            onSubmit={text =>
+              saveComment({
+                text,
+                model,
+                model_id: modelId,
+              })
+            }
+          />
+        )}
+        <div ref={ref} />
+      </Stack>
+
+      {resolvedThreads.length > 0 && (
+        <Stack mt="-1.5rem">
+          <Button
+            styles={{
+              inner: {
+                justifyContent: "flex-start",
+              },
+            }}
+            style={{ justifyContent: "flex-start" }}
+            color="brand"
+            variant="subtle"
+            leftIcon={
+              <Icon
+                name={isResolvedThreadsOpen ? "chevrondown" : "chevronright"}
+              />
+            }
+            onClick={toggle}
+          >
+            {resolvedThreads.length} resolved{" "}
+            {resolvedThreads.length > 1 ? "threads" : "thread"}
+          </Button>
+          {isResolvedThreadsOpen && (
+            <CommentList
+              onReply={saveComment}
+              shadowed={shadowed}
+              comments={resolvedThreads}
+            />
+          )}
+        </Stack>
+      )}
+    </Stack>
+  );
+}

frontend/src/metabase/comments/components/CommentFeed/index.ts

@@ -0,0 +1 @@
+export * from "./CommentFeed";

frontend/src/metabase/comments/components/CommentInput/CommentInput.module.css

@@ -0,0 +1,76 @@
+.mentions {
+  margin: 1em 0;
+  width: 100%;
+  padding: 10px;
+}
+
+.mentions--singleLine .mentions__control {
+  /* color: salmon;
+  background: salmon; */
+  /* display: inline-block; */
+  /* width: 200px; */
+}
+
+.mentions--singleLine .mentions__highlighter {
+  /* padding: 10px; */
+  /* border: 2px solid red;
+  background: red; */
+}
+
+.mentions--singleLine .mentions__input {
+  background: white !important;
+  padding: 10px;
+  border: 1px solid var(--mb-color-border);
+  border-radius: 4px;
+  padding-right: 40px;
+
+  &:focus-within {
+    border-color: var(--mb-color-brand);
+  }
+}
+
+/* .mentions--multiLine .mentions__control {
+  font-family: monospace;
+  font-size: 14pt;
+}
+.mentions--multiLine .mentions__highlighter {
+  border: 1px solid transparent;
+  padding: 9px;
+  min-height: 63px;
+}
+.mentions--multiLine .mentions__input {
+  border: 1px solid silver;
+  padding: 9px;
+  outline: 0;
+} */
+
+.mentions__suggestions__list {
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  font-size: 10pt;
+  /* z-index: 8888; */
+}
+
+.mentions__suggestions__item {
+  background-color: white;
+  padding: 5px 15px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.mentions__suggestions__item--focused {
+  background-color: var(--mb-color-background-selected);
+  color: var(--mb-color-text-selected);
+}
+
+.mentions__mention {
+  position: relative;
+  z-index: 1;
+  color: blue;
+  text-shadow:
+    1px 1px 1px white,
+    1px -1px 1px white,
+    -1px 1px 1px white,
+    -1px -1px 1px white;
+  text-decoration: underline;
+  pointer-events: none;
+}

frontend/src/metabase/comments/components/CommentInput/CommentInput.tsx

@@ -0,0 +1,78 @@
+import { useCallback, useState } from "react";
+import { Mention, MentionsInput } from "react-mentions";
+
+import { useListUsersQuery } from "metabase/api";
+import Styles from "metabase/css/core/index.css";
+import { Flex, type FlexProps, Icon } from "metabase/ui";
+import type { User } from "metabase-types/api";
+
+import { UserIcon } from "../comment/Comment";
+
+import CommentInputStyle from "./CommentInput.module.css";
+
+export function CommentInput({
+  onSubmit,
+  placeholder,
+  autoFocus,
+  user,
+  ...flexProps
+}: {
+  onSubmit: (text: string) => Promise<void>;
+  user: User;
+  placeholder: string;
+  autoFocus: boolean;
+} & FlexProps) {
+  const [text, setText] = useState("");
+
+  const handleSubmit = useCallback(
+    (text: string) => {
+      onSubmit(text).then(() => setText(""));
+    },
+    [onSubmit],
+  );
+
+  const { data: users } = useListUsersQuery({});
+
+  return (
+    <Flex align="center" gap="sm" {...flexProps}>
+      <UserIcon user={user} />
+      <MentionsInput
+        value={text}
+        onKeyDown={e => {
+          if (e.key === "Enter") {
+            handleSubmit(text);
+          }
+        }}
+        onChange={e => setText(e.target.value)}
+        placeholder={placeholder}
+        autoFocus
+        singleLine
+        className="mentions"
+        classNames={CommentInputStyle}
+      >
+        <Mention
+          markup="@[__display__](__id__)"
+          trigger="@"
+          data={
+            users?.data.map(user => {
+              return { id: user.id, display: user.common_name };
+            }) ?? []
+          }
+        />
+      </MentionsInput>
+      {text && (
+        <Icon
+          style={{
+            position: "absolute",
+            top: 26,
+            right: 12,
+          }}
+          name="enter_or_return"
+          color="var(--mb-color-brand)"
+          className={Styles.cursorPointer}
+          onClick={() => handleSubmit(text)}
+        />
+      )}
+    </Flex>
+  );
+}

frontend/src/metabase/comments/components/CommentInput/index.ts

@@ -0,0 +1 @@
+export * from "./CommentInput";

frontend/src/metabase/comments/components/comment-section/CommentSection.tsx

@@ -0,0 +1,42 @@
+import { getCurrentUser } from "metabase/admin/datamodel/selectors";
+import { useSelector } from "metabase/lib/redux";
+import { Paper } from "metabase/ui";
+
+import type { Comment as CommentType } from "../../types";
+import { CommentInput } from "../CommentInput/CommentInput";
+import { Comment } from "../comment/Comment";
+
+export const CommentList = ({
+  comments,
+  onResolve,
+  shadowed = false,
+  onReply,
+}: {
+  comments: CommentType[];
+  onResolve?: (comment: CommentType) => void;
+  shadowed?: boolean;
+  onReply: (comment: CommentType) => Promise<void>;
+}) => {
+  const currentUser = useSelector(getCurrentUser);
+  return comments.map(comment => (
+    <Paper key={comment.id} p="lg" withBorder shadow={shadowed ? "xl" : "none"}>
+      <Comment
+        comment={comment}
+        onResolve={onResolve ? () => onResolve(comment) : undefined}
+      />
+      {comment.replies?.map(c => <Comment key={c.id} comment={c} />)}
+
+      <CommentInput
+        placeholder="Add a comment ..."
+        user={currentUser}
+        onSubmit={text =>
+          onReply({
+            text,
+            model: "comment",
+            model_id: comment.id,
+          })
+        }
+      />
+    </Paper>
+  ));
+};

frontend/src/metabase/comments/components/comment-section/index.ts

@@ -0,0 +1 @@
+export * from "./CommentSection";

frontend/src/metabase/comments/components/comment/Comment.module.css

@@ -0,0 +1,27 @@
+.CommentGrid {
+  display: grid;
+  grid-template-columns: auto 1fr 1fr 1fr auto;
+  grid-template-rows: auto 1fr auto;
+  grid-column-gap: 0;
+  grid-row-gap: 0;
+}
+
+.UserInfo {
+  grid-area: 1 / 2 / 2 / 5;
+}
+
+.ActionIcons {
+  grid-area: 1 / 6 / 2 / 7;
+}
+
+.Avatar {
+  grid-area: 1 / 1 / 4 / 2;
+}
+
+.CommentText {
+  grid-area: 2 / 2 / 3 / 6;
+}
+
+.Reactions {
+  grid-area: 3 / 2 / 4 / 6;
+}

frontend/src/metabase/comments/components/comment/Comment.tsx

@@ -0,0 +1,105 @@
+import { useListUsersQuery, useReactToCommentMutation } from "metabase/api";
+import { toMentionDisplay } from "metabase/comments/utils";
+import DateTime from "metabase/components/DateTime";
+import Markdown from "metabase/core/components/Markdown";
+import {
+  ActionIcon,
+  Avatar,
+  Box,
+  Divider,
+  Group,
+  Icon,
+  Stack,
+  Text,
+} from "metabase/ui";
+import type { User, UserId } from "metabase-types/api";
+
+import type { Comment as CommentType } from "../../types";
+import { ReactionList } from "../reaction-list";
+
+import CommentS from "./Comment.module.css";
+
+export const Comment = ({
+  comment,
+  onResolve,
+}: {
+  comment: CommentType;
+  onResolve?: () => Promise<void>;
+}) => {
+  const [onReact] = useReactToCommentMutation();
+  const { data: users } = useListUsersQuery({});
+  const usersData = users?.data ?? [];
+  const userMapping = usersData.reduce(
+    (mapping, user) => {
+      mapping[user.id] = user;
+      return mapping;
+    },
+    {} as Record<UserId, User>,
+  );
+
+  return (
+    <Box mb="sm" className={CommentS.CommentGrid}>
+      <Box ml="sm" className={CommentS.UserInfo}>
+        <Group spacing="sm">
+          <Text fw="bold" c="text-dark" size="md">
+            {comment.author.common_name}
+          </Text>
+
+          <Text span size="md" c="text-medium">
+            <DateTime value={comment.created_at} />
+            {/* {comment.created_at ?? "Apr 20 6:90PM"} */}
+          </Text>
+        </Group>
+      </Box>
+      <Box className={CommentS.ActionIcons}>
+        <Group spacing="xs" align="end">
+          {onResolve && (
+            <ActionIcon onClick={onResolve}>
+              <Icon name="check" />
+            </ActionIcon>
+          )}
+          <ActionIcon>
+            <Icon name="ellipsis" />
+          </ActionIcon>
+        </Group>
+      </Box>
+
+      <Box className={CommentS.Avatar}>
+        <Stack h="100%" align="center" spacing="sm">
+          <UserIcon user={comment.author} />
+          <Box style={{ flex: 1 }}>
+            <Divider h="100%" orientation="vertical" />
+          </Box>
+        </Stack>
+      </Box>
+      <Box ml="0.5rem" className={CommentS.CommentText}>
+        <Markdown>{toMentionDisplay(comment.text, userMapping)}</Markdown>
+      </Box>
+      <Box ml="0.35rem" pt="sm" className={CommentS.Reactions}>
+        <ReactionList
+          onAddReaction={(reaction: string) => {
+            onReact({
+              id: comment.id,
+              emoji: reaction,
+            });
+          }}
+          reactions={comment.reactions}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export function UserIcon({ user }: { user: User }) {
+  if (user?.avatar) {
+    return <Avatar src={user.avatar} radius="xl" size="1.5rem" />;
+  }
+  return (
+    <Avatar radius="xl" c="text-light" size="1.5rem" color="brand">
+      <Text c="white" size="0.65rem">
+        {user?.first_name?.at?.(0) ?? "😁"}
+        {user?.last_name?.at?.(0) ?? ""}
+      </Text>
+    </Avatar>
+  );
+}

frontend/src/metabase/comments/components/comment/index.ts

@@ -0,0 +1 @@
+export * from "./Comment";

frontend/src/metabase/comments/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./comment-section/CommentSection";
+export * from "./comment/Comment";
+export * from "./CommentFeed/CommentFeed";
+export * from "./CommentInput/CommentInput";
+export * from "./reaction/Reaction";

frontend/src/metabase/comments/components/reaction-list/ReactionList.tsx

@@ -0,0 +1,38 @@
+import _ from "underscore";
+
+import { getCurrentUser } from "metabase/admin/datamodel/selectors";
+import { useSelector } from "metabase/lib/redux";
+import { Group } from "metabase/ui";
+
+import type { Reaction as ReactionType } from "../../types";
+import { Reaction } from "../reaction";
+import { AddReaction } from "../reaction/AddReaction";
+
+export const ReactionList = ({
+  onAddReaction,
+  reactions,
+}: {
+  onAddReaction: (reaction: string) => void;
+  reactions: ReactionType[];
+}) => {
+  const groupedReactions = Object.entries(_.groupBy(reactions, "emoji"));
+  const user = useSelector(getCurrentUser);
+
+  return (
+    <Group spacing="xs">
+      {groupedReactions.map(([emoji, userList]) => {
+        const isSelected = userList.some(u => u.author.email === user.email);
+        return (
+          <Reaction
+            isSelected={isSelected}
+            key={emoji}
+            userList={userList.map(u => u.author)}
+            emoji={emoji}
+            onAddReaction={isSelected ? () => {} : onAddReaction}
+          />
+        );
+      })}
+      <AddReaction onSelect={onAddReaction} />
+    </Group>
+  );
+};

frontend/src/metabase/comments/components/reaction-list/index.ts

@@ -0,0 +1 @@
+export * from "./ReactionList";

frontend/src/metabase/comments/components/reaction/AddReaction.module.css

@@ -0,0 +1,10 @@
+.EmojiButton {
+  transition: background ease-in-out 250ms;
+  background: transparent;
+  border-radius: 0.25rem;
+}
+
+.EmojiButton:hover {
+  background: var(--mb-color-bg-medium);
+  transition: all ease-in-out;
+}

frontend/src/metabase/comments/components/reaction/AddReaction.tsx

@@ -0,0 +1,145 @@
+import data from "@emoji-mart/data";
+import { useDisclosure } from "@mantine/hooks";
+import { SearchIndex, init } from "emoji-mart";
+import { useState } from "react";
+
+import {
+  Box,
+  type ButtonProps,
+  Center,
+  Icon,
+  Input,
+  Paper,
+  Popover,
+  SimpleGrid,
+  Stack,
+  Text,
+  UnstyledButton,
+} from "metabase/ui";
+
+import AddReactionS from "./AddReaction.module.css";
+import { ReactionBadge } from "./ReactionBadge";
+
+init({ data });
+
+const convertUnicodeToEmoji = unicode => {
+  // Split the string by "-" and convert each part to a code point
+  const codePoints = unicode.split("-").map(code => parseInt(code, 16));
+  // Convert the code points into an emoji using fromCodePoint
+  return String.fromCodePoint(...codePoints);
+};
+
+export const EmojiButton = ({
+  emoji,
+  onClick,
+}: {
+  emoji: string;
+  onClick: ButtonProps["onClick"];
+}) => (
+  <UnstyledButton onClick={onClick} className={AddReactionS.EmojiButton}>
+    <Center p="xs">
+      <Text fz="xl">{emoji}</Text>
+    </Center>
+  </UnstyledButton>
+);
+
+export const ASlightlyCrapEmojiPicker = ({
+  onSelect,
+}: {
+  onSelect: (value: string) => void;
+}) => {
+  const [searchText, setSearchText] = useState<string>();
+  const [searchResults, setSearchResults] = useState<any[]>();
+
+  const onSearchChange = (t: string) => {
+    setSearchText(t);
+    search(t);
+  };
+
+  async function search(value: string) {
+    const emojis = await SearchIndex.search(value);
+    const results = emojis.map(emoji => {
+      return emoji.skins[0].native;
+    });
+
+    setSearchResults(results);
+  }
+
+  return (
+    <Paper w="20rem" h="30rem" p="md" style={{ overflow: "hidden" }}>
+      <Stack h="100%" style={{ overflow: "hidden" }}>
+        <Input
+          value={searchText}
+          onChange={e => onSearchChange(e.target.value)}
+        />
+        <Stack style={{ overflowY: "auto", overflowX: "hidden" }}>
+          {searchText ? (
+            <SimpleGrid spacing="xs" cols={7}>
+              {searchResults
+                ? searchResults.map((res: string) => (
+                    <EmojiButton
+                      onClick={() => onSelect(res)}
+                      key={res}
+                      emoji={res}
+                    />
+                  ))
+                : "No results found"}
+            </SimpleGrid>
+          ) : (
+            data.categories.map(({ id, emojis }) => (
+              <Stack key={id}>
+                <Text fw="bold" tt="capitalize">
+                  {id}
+                </Text>
+                <SimpleGrid spacing="xs" cols={7}>
+                  {emojis.map(e => {
+                    const emojiText = convertUnicodeToEmoji(
+                      data.emojis[e].skins[0].unified,
+                    );
+                    return (
+                      <EmojiButton
+                        onClick={() => onSelect(emojiText)}
+                        emoji={emojiText}
+                        key={e}
+                      />
+                    );
+                  })}
+                </SimpleGrid>
+              </Stack>
+            ))
+          )}
+        </Stack>
+      </Stack>
+    </Paper>
+  );
+};
+
+export const AddReaction = ({
+  onSelect,
+}: {
+  onSelect: (value: string) => void;
+}) => {
+  const [opened, { toggle, close }] = useDisclosure(false);
+
+  const onSelectReaction = (reaction: string) => {
+    close();
+    onSelect(reaction);
+  };
+
+  return (
+    <Popover opened={opened} onClose={close} closeOnClickOutside>
+      <Popover.Target>
+        <Box>
+          <ReactionBadge
+            tooltipLabel="Add reaction…"
+            onClick={toggle}
+            right={<Icon size="0.8rem" name="add" />}
+          />
+        </Box>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <ASlightlyCrapEmojiPicker onSelect={onSelectReaction} />
+      </Popover.Dropdown>
+    </Popover>
+  );
+};

frontend/src/metabase/comments/components/reaction/Reaction.tsx

@@ -0,0 +1,84 @@
+import { getCurrentUser } from "metabase/admin/datamodel/selectors";
+import type { Reaction as ReactionType } from "metabase/comments/types";
+import { useSelector } from "metabase/lib/redux";
+import { Text } from "metabase/ui";
+
+import { ReactionBadge } from "./ReactionBadge";
+
+function formatList(items: string[]) {
+  if (items.length === 0) {
+    return "";
+  }
+  if (items.length === 1) {
+    return items[0];
+  }
+  if (items.length === 2) {
+    return items.join(" and ");
+  }
+
+  // For lists with more than 2 items
+  return `${items.slice(0, -1).join(", ")}, and ${items[items.length - 1]}`;
+}
+
+export const Reaction = ({
+  userList,
+  emoji,
+  onAddReaction,
+  isSelected,
+}: {
+  userList: ReactionType["author"][];
+  emoji: ReactionType["emoji"];
+  onAddReaction: (value: string) => void;
+  isSelected: boolean;
+}) => {
+  const currentUser = useSelector(getCurrentUser);
+
+  const getUserListString = () => {
+    const userStrings = userList
+      .map(user => {
+        if (currentUser.email === user.email) {
+          return null;
+        }
+        return `${user.first_name} ${user.last_name}` || user.email;
+      })
+      .filter(u => !!u);
+
+    if (isSelected) {
+      return ["You", ...userStrings];
+    }
+
+    return userStrings;
+  };
+
+  return (
+    <ReactionBadge
+      isSelected={isSelected}
+      left={
+        <Text span lh={1} c="text-dark" fz="md" mr="xs">
+          {emoji}
+        </Text>
+      }
+      right={
+        <Text
+          span
+          lh={1}
+          ml="2px"
+          c="text-dark"
+          fz="sm"
+          fw={isSelected ? "bold" : "normal"}
+        >
+          {userList.length}
+        </Text>
+      }
+      onClick={() => onAddReaction(emoji)}
+      tooltipLabel={
+        <Text fz="sm" span c="text-white">
+          {formatList(getUserListString())}
+          <Text fz="sm" span c="text-medium">
+            {` reacted with  ${emoji}`}
+          </Text>
+        </Text>
+      }
+    />
+  );
+};

frontend/src/metabase/comments/components/reaction/ReactionBadge.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+
+import { Button, type ButtonProps, Group, Tooltip } from "metabase/ui";
+
+export const ReactionBadge = ({
+  left,
+  right,
+  tooltipLabel,
+  isSelected,
+  ...buttonProps
+}: {
+  left?: ReactNode;
+  right?: ReactNode;
+  tooltipLabel?: ReactNode | string;
+  isSelected: boolean;
+} & Omit<ButtonProps, "left" | "right">) => (
+  <Tooltip disabled={!tooltipLabel} label={tooltipLabel}>
+    <Button
+      bg={isSelected ? "focus" : "bg-medium"}
+      px="12px"
+      py="6px"
+      radius="xl"
+      compact
+      c={isSelected ? "brand" : undefined}
+      fw={isSelected ? "bold" : undefined}
+      {...buttonProps}
+    >
+      <Group spacing={0}>
+        {left} {right}
+      </Group>
+    </Button>
+  </Tooltip>
+);

frontend/src/metabase/comments/components/reaction/index.ts

@@ -0,0 +1 @@
+export * from "./Reaction";

frontend/src/metabase/comments/data/index.ts

@@ -0,0 +1,380 @@
+import type { Comment } from "../types";
+
+export const TEST_DATA: Comment[] = [
+  {
+    model: "dashboard",
+    model_id: 1,
+    text: "Q3 Performance Dashboard",
+    resolved: false,
+    reactions: [
+      {
+        emoji: "👍",
+        author: {
+          id: 2,
+          first_name: "Jane",
+          last_name: "Doe",
+          email: "jane.doe@example.com",
+        },
+        id: 101,
+      },
+      {
+        emoji: "🎉",
+        author: {
+          id: 3,
+          first_name: "Bob",
+          last_name: "Smith",
+          email: "bob.smith@example.com",
+        },
+        id: 102,
+      },
+    ],
+    author: {
+      id: 1,
+      first_name: "John",
+      last_name: "Doe",
+      email: "john.doe@example.com",
+    },
+    replies: [
+      {
+        model: "comment",
+        model_id: 2,
+        text: "Great overview of our Q3 performance!",
+        resolved: true,
+        reactions: [],
+        author: {
+          id: 4,
+          first_name: "Alice",
+          last_name: "Johnson",
+          email: "alice.johnson@example.com",
+        },
+      },
+      {
+        model: "comment",
+        model_id: 3,
+        text: "Can we add a breakdown by region?",
+        resolved: false,
+        reactions: [
+          {
+            emoji: "🤔",
+            author: {
+              id: 5,
+              first_name: "Charlie",
+              last_name: "Brown",
+              email: "charlie.brown@example.com",
+            },
+            id: 103,
+          },
+        ],
+        author: {
+          id: 6,
+          first_name: "Eva",
+          last_name: "Williams",
+          email: "eva.williams@example.com",
+        },
+        replies: [
+          {
+            model: "comment",
+            model_id: 4,
+            text: "Good idea, I'll work on that this week.",
+            resolved: false,
+            reactions: [],
+            author: {
+              id: 1,
+              first_name: "John",
+              last_name: "Doe",
+              email: "john.doe@example.com",
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    model: "card",
+    model_id: 5,
+    text: "Revenue by Product Category",
+    resolved: true,
+    reactions: [],
+    author: {
+      id: 7,
+      first_name: "David",
+      last_name: "Miller",
+      email: "david.miller@example.com",
+    },
+    replies: [
+      {
+        model: "comment",
+        model_id: 6,
+        text: "The numbers for Category A seem off. Can we double-check?",
+        resolved: true,
+        reactions: [
+          {
+            emoji: "👍",
+            author: {
+              id: 8,
+              first_name: "Fiona",
+              last_name: "Garcia",
+              email: "fiona.garcia@example.com",
+            },
+            id: 104,
+          },
+        ],
+        author: {
+          id: 9,
+          first_name: "George",
+          last_name: "Taylor",
+          email: "george.taylor@example.com",
+        },
+        replies: [
+          {
+            model: "comment",
+            model_id: 7,
+            text: "You're right, there was an error. I've updated the chart.",
+            resolved: true,
+            reactions: [
+              {
+                emoji: "🙏",
+                author: {
+                  id: 9,
+                  first_name: "George",
+                  last_name: "Taylor",
+                  email: "george.taylor@example.com",
+                },
+                id: 105,
+              },
+            ],
+            author: {
+              id: 7,
+              first_name: "David",
+              last_name: "Miller",
+              email: "david.miller@example.com",
+            },
+          },
+        ],
+      },
+      {
+        model: "comment",
+        model_id: 8,
+        text: "Great visualization! Very easy to understand.",
+        resolved: true,
+        reactions: [
+          {
+            emoji: "❤️",
+            author: {
+              id: 10,
+              first_name: "Hannah",
+              last_name: "Lee",
+              email: "hannah.lee@example.com",
+            },
+            id: 106,
+          },
+        ],
+        author: {
+          id: 11,
+          first_name: "Ian",
+          last_name: "Clark",
+          email: "ian.clark@example.com",
+        },
+      },
+    ],
+  },
+  {
+    model: "data",
+    model_id: 9,
+    text: "Customer Satisfaction Survey Results",
+    resolved: false,
+    reactions: [
+      {
+        emoji: "📊",
+        author: {
+          id: 12,
+          first_name: "Julia",
+          last_name: "White",
+          email: "julia.white@example.com",
+        },
+        id: 107,
+      },
+    ],
+    author: {
+      id: 13,
+      first_name: "Kevin",
+      last_name: "Brown",
+      email: "kevin.brown@example.com",
+    },
+    replies: [
+      {
+        model: "comment",
+        model_id: 10,
+        text: "Interesting trends in the data. We should focus on improving our customer service based on these results.",
+        resolved: false,
+        reactions: [],
+        author: {
+          id: 14,
+          first_name: "Laura",
+          last_name: "Martinez",
+          email: "laura.martinez@example.com",
+        },
+      },
+      {
+        model: "comment",
+        model_id: 11,
+        text: "Can we break this down by product line?",
+        resolved: false,
+        reactions: [
+          {
+            emoji: "👍",
+            author: {
+              id: 15,
+              first_name: "Mike",
+              last_name: "Johnson",
+              email: "mike.johnson@example.com",
+            },
+            id: 108,
+          },
+        ],
+        author: {
+          id: 16,
+          first_name: "Nina",
+          last_name: "Patel",
+          email: "nina.patel@example.com",
+        },
+      },
+    ],
+  },
+  {
+    model: "comment",
+    model_id: 12,
+    text: "We should schedule a meeting to discuss the Q4 strategy.",
+    resolved: false,
+    reactions: [
+      {
+        emoji: "👍",
+        author: {
+          id: 17,
+          first_name: "Oscar",
+          last_name: "Wilson",
+          email: "oscar.wilson@example.com",
+        },
+        id: 109,
+      },
+      {
+        emoji: "📅",
+        author: {
+          id: 18,
+          first_name: "Patricia",
+          last_name: "Lopez",
+          email: "patricia.lopez@example.com",
+        },
+        id: 110,
+      },
+    ],
+    author: {
+      id: 19,
+      first_name: "Quinn",
+      last_name: "Chen",
+      email: "quinn.chen@example.com",
+    },
+  },
+  {
+    model: "comment",
+    model_id: 13,
+    text: "Has anyone seen the latest competitor analysis report?",
+    resolved: true,
+    reactions: [],
+    author: {
+      id: 20,
+      first_name: "Rachel",
+      last_name: "Kim",
+      email: "rachel.kim@example.com",
+    },
+    replies: [
+      {
+        model: "comment",
+        model_id: 14,
+        text: "Yes, I have it. I'll send it to you right away.",
+        resolved: true,
+        reactions: [
+          {
+            emoji: "🙏",
+            author: {
+              id: 20,
+              first_name: "Rachel",
+              last_name: "Kim",
+              email: "rachel.kim@example.com",
+            },
+            id: 111,
+          },
+        ],
+        author: {
+          id: 21,
+          first_name: "Sam",
+          last_name: "Taylor",
+          email: "sam.taylor@example.com",
+        },
+      },
+    ],
+  },
+  {
+    model: "dashboard",
+    model_id: 15,
+    text: "Marketing Campaign Performance",
+    resolved: false,
+    reactions: [
+      {
+        emoji: "🚀",
+        author: {
+          id: 22,
+          first_name: "Tina",
+          last_name: "Moore",
+          email: "tina.moore@example.com",
+        },
+        id: 112,
+      },
+    ],
+    author: {
+      id: 23,
+      first_name: "Ulysses",
+      last_name: "Grant",
+      email: "ulysses.grant@example.com",
+    },
+    replies: [
+      {
+        model: "comment",
+        model_id: 16,
+        text: "The social media campaign seems to be outperforming our email marketing. Should we reallocate some budget?",
+        resolved: false,
+        reactions: [],
+        author: {
+          id: 24,
+          first_name: "Victoria",
+          last_name: "Adams",
+          email: "victoria.adams@example.com",
+        },
+      },
+      {
+        model: "comment",
+        model_id: 17,
+        text: "Great insights! Let's discuss this in our next marketing meeting.",
+        resolved: true,
+        reactions: [
+          {
+            emoji: "👍",
+            author: {
+              id: 25,
+              first_name: "William",
+              last_name: "Brown",
+              email: "william.brown@example.com",
+            },
+            id: 113,
+          },
+        ],
+        author: {
+          id: 26,
+          first_name: "Xena",
+          last_name: "Wilson",
+          email: "xena.wilson@example.com",
+        },
+      },
+    ],
+  },
+];

frontend/src/metabase/comments/data/use-comments.ts

@@ -0,0 +1,3 @@
+export const useComments = () => {
+    return []
+}

frontend/src/metabase/comments/index.ts

@@ -0,0 +1,7 @@
+export * from "./components/comment-section";
+export * from "./components/comment";
+export * from "./components/CommentFeed";
+export * from "./components/CommentInput";
+export * from "./components/reaction";
+export * from "./data/use-comments";
+export * from "./utils";

frontend/src/metabase/comments/types/index.ts

@@ -0,0 +1,39 @@
+import type { CardId, DashboardId, User } from "metabase-types/api";
+
+type ReactionId = number;
+type CommentId = number;
+
+type ModelRef =
+  | {
+      model: "dashboard";
+      model_id: DashboardId;
+    }
+  | {
+      model: "card";
+      model_id: CardId;
+    }
+  | {
+      model: "comment";
+      model_id: CommentId;
+    }
+  | {
+      model: "data";
+      model_id: number;
+    };
+
+export type Comment = ModelRef & {
+  id: number;
+  text: string;
+  created_at: string;
+  updated_at: string;
+  resolved: boolean;
+  reactions: Reaction[];
+  author: Pick<User, "id" | "first_name" | "last_name" | "email">;
+  replies?: Comment[];
+};
+
+export type Reaction = {
+  emoji: string;
+  author: Pick<User, "id" | "first_name" | "last_name" | "email">;
+  id: ReactionId;
+};

frontend/src/metabase/comments/utils.ts

@@ -0,0 +1,33 @@
+import type { User, UserId } from "metabase-types/api";
+
+interface UserToken {
+  token: string;
+  userId: UserId;
+}
+
+export function toMentionDisplay(
+  comment: string,
+  userMapping: Record<UserId, Pick<User, "common_name">>,
+) {
+  const userTokens = getUserTokens(comment);
+  return userTokens.reduce((translatedComment, userToken) => {
+    const user = userMapping[userToken.userId];
+
+    if (user) {
+      return translatedComment.replace(userToken.token, `@${user.common_name}`);
+    }
+
+    return translatedComment;
+  }, comment);
+}
+
+function getUserTokens(comment: string): UserToken[] {
+  const tokens = comment.match(/@\[.+?\]\(\d+\)/g) ?? [];
+  return tokens.map(token => {
+    const [_, userId] = token.match(/\((\d+)\)/) ?? [];
+    return {
+      token,
+      userId: Number(userId),
+    };
+  });
+}

frontend/src/metabase/comments/utils.unit.spec.ts

@@ -0,0 +1,31 @@
+import { toMentionDisplay } from "./utils";
+
+describe("comments/mention", () => {
+  describe("toMentionDisplay", () => {
+    it("should convert to a display comment with mention", () => {
+      const comment =
+        "Hey @[Oisin](123) and @[Ryan](456) can you check this out?";
+      const expectedComment = "Hey @Oisin and @Ryan can you check this out?";
+      expect(
+        toMentionDisplay(comment, {
+          123: { common_name: "Oisin" },
+          456: { common_name: "Ryan" },
+        }),
+      ).toEqual(expectedComment);
+    });
+
+    it("should not convert a user ID not existing in the mapping", () => {
+      const comment =
+        "Hey @[Oisin](123) and @[Ryan](456) can you check this out?";
+      const expectedComment =
+        "Hey @Oisin and @[Ryan](456) can you check this out?";
+      expect(
+        toMentionDisplay(comment, {
+          123: { common_name: "Oisin" },
+        }),
+      ).toEqual(expectedComment);
+    });
+  });
+
+  describe("toMentionData", () => {});
+});

frontend/src/metabase/components/UserAvatar/UserAvatar.tsx

@@ -16,10 +16,13 @@ interface User {
   last_name: string | null;
   common_name: string;
   email?: string;
+  avatar: string | null;
 }
 
 interface Group {
   first_name: string;
+  // This doesn't really exist, I just don't want TS to complain
+  avatar: null;
 }
 
 // eslint-disable-next-line import/no-default-export -- deprecated usage
@@ -27,6 +30,17 @@ export default function UserAvatar({
   user,
   ...props
 }: UserAvatarProps | GroupProps) {
+  if (user.avatar) {
+    return (
+      <StyledAvatar
+        {...props}
+        style={{
+          backgroundImage: `url(${user.avatar})`,
+          backgroundSize: "cover",
+        }}
+      ></StyledAvatar>
+    );
+  }
   return <StyledAvatar {...props}>{userInitials(user) || "?"}</StyledAvatar>;
 }
 

frontend/src/metabase/dashboard/components/DashboardHeader/DashboardHeaderButtonRow/action-buttons.tsx

@@ -15,6 +15,7 @@ import {
   AddSectionButton,
   CopyAnalyticsDashboardButton,
   DashboardActionMenu,
+  DashboardCommentButton,
   DashboardInfoButton,
   EditDashboardButton,
   FullscreenAnalyticsDashboard,
@@ -46,6 +47,7 @@ export const DASHBOARD_ACTION = {
   DASHBOARD_HEADER_ACTION_DIVIDER: "DASHBOARD_HEADER_ACTION_DIVIDER",
   DASHBOARD_BOOKMARK: "DASHBOARD_BOOKMARK",
   DASHBOARD_INFO: "DASHBOARD_INFO",
+  DASHBOARD_COMMENT: "DASHBOARD_COMMENT",
   DASHBOARD_ACTION_MENU: "DASHBOARD_ACTION_MENU",
   FULLSCREEN_ANALYTICS_DASHBOARD: "FULLSCREEN_ANALYTICS_DASHBOARD",
 } as const;
@@ -151,6 +153,10 @@ export const dashboardActionButtons: Record<
     component: DashboardInfoButton,
     enabled: ({ isEditing }) => !isEditing,
   },
+  [DASHBOARD_ACTION.DASHBOARD_COMMENT]: {
+    component: DashboardCommentButton,
+    enabled: ({ isEditing }) => !isEditing,
+  },
   [DASHBOARD_ACTION.DASHBOARD_ACTION_MENU]: {
     component: withRouter<HeaderButtonProps>(
       ({

frontend/src/metabase/dashboard/components/DashboardHeader/DashboardHeaderButtonRow/constants.ts

@@ -30,6 +30,7 @@ export const DASHBOARD_VIEW_ACTIONS = [
   ...DASHBOARD_DISPLAY_ACTIONS,
   DASHBOARD_ACTION.DASHBOARD_HEADER_ACTION_DIVIDER,
   DASHBOARD_ACTION.DASHBOARD_BOOKMARK,
+  DASHBOARD_ACTION.DASHBOARD_COMMENT,
   DASHBOARD_ACTION.DASHBOARD_INFO,
   DASHBOARD_ACTION.DASHBOARD_ACTION_MENU,
   DASHBOARD_ACTION.FULLSCREEN_ANALYTICS_DASHBOARD,

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/DashboardCommentButton.tsx

@@ -0,0 +1,28 @@
+import { t } from "ttag";
+
+import { ToolbarButton } from "metabase/components/ToolbarButton";
+import { closeSidebar, setSidebar } from "metabase/dashboard/actions";
+import { SIDEBAR_NAME } from "metabase/dashboard/constants";
+import { getIsShowDashboardInfoSidebar } from "metabase/dashboard/selectors";
+import { useDispatch, useSelector } from "metabase/lib/redux";
+
+export const DashboardCommentButton = () => {
+  const dispatch = useDispatch();
+  const isShowingDashboardInfoSidebar = useSelector(
+    getIsShowDashboardInfoSidebar,
+  );
+
+  return (
+    <ToolbarButton
+      aria-label={t`Comments`}
+      tooltipLabel={t`Comments`}
+      icon="comment"
+      isActive={isShowingDashboardInfoSidebar}
+      onClick={() =>
+        isShowingDashboardInfoSidebar
+          ? dispatch(closeSidebar())
+          : dispatch(setSidebar({ name: SIDEBAR_NAME.info }))
+      }
+    />
+  );
+};

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/index.tsx

@@ -8,6 +8,7 @@ export * from "./CancelEditButton";
 export * from "./CopyAnalyticsDashboardButton";
 export * from "./DashboardActionMenu";
 export * from "./DashboardInfoButton";
+export * from "./DashboardCommentButton";
 export * from "./EditDashboardButton";
 export * from "./FullscreenAnalyticsDashboard";
 export * from "./SaveEditButton";

frontend/src/metabase/dashboard/components/DashboardInfoSidebar/DashboardInfoSidebar.tsx

@@ -4,6 +4,7 @@ import { useMount } from "react-use";
 import { t } from "ttag";
 
 import ErrorBoundary from "metabase/ErrorBoundary";
+import { CommentFeed } from "metabase/comments";
 import {
   Sidesheet,
   SidesheetCard,
@@ -47,6 +48,7 @@ interface DashboardInfoSidebarProps {
 enum Tab {
   Overview = "overview",
   History = "history",
+  Comments = "comments",
 }
 
 export function DashboardInfoSidebar({
@@ -120,11 +122,12 @@ export function DashboardInfoSidebar({
           size="md"
         >
           <Tabs
-            defaultValue={Tab.Overview}
+            defaultValue={Tab.Comments}
             className={SidesheetS.FlexScrollContainer}
           >
             <Tabs.List mx="lg">
               <Tabs.Tab value={Tab.Overview}>{t`Overview`}</Tabs.Tab>
+              <Tabs.Tab value={Tab.Comments}>{t`Comments`}</Tabs.Tab>
               <Tabs.Tab value={Tab.History}>{t`History`}</Tabs.Tab>
             </Tabs.List>
             <SidesheetTabPanelContainer>
@@ -140,6 +143,13 @@ export function DashboardInfoSidebar({
                   showCaching={showCaching}
                 />
               </Tabs.Panel>
+              <Tabs.Panel value={Tab.Comments}>
+                <CommentFeed
+                  model="dashboard"
+                  modelId={dashboard.id}
+                  autoScroll
+                />
+              </Tabs.Panel>
               <Tabs.Panel value={Tab.History}>
                 <HistoryTab
                   canWrite={canWrite}

frontend/src/metabase/home/components/HomeContent/HomeContent.tsx

@@ -1,25 +1,25 @@
 import { useMemo } from "react";
 
 import { useListPopularItemsQuery, useListRecentsQuery } from "metabase/api";
-import { useDatabaseListQuery, useSetting } from "metabase/common/hooks";
+import { useDatabaseListQuery } from "metabase/common/hooks";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import { useSelector } from "metabase/lib/redux";
-import { isSyncCompleted } from "metabase/lib/syncing";
+// import { isSyncCompleted } from "metabase/lib/syncing";
 import { getUser } from "metabase/selectors/user";
 import type Database from "metabase-lib/v1/metadata/Database";
 import type { PopularItem, RecentItem, User } from "metabase-types/api";
 
-import { getIsXrayEnabled } from "../../selectors";
+// import { getIsXrayEnabled } from "../../selectors";
 import { isWithinWeeks } from "../../utils";
-import { EmbedHomepage } from "../EmbedHomepage";
-import { HomePopularSection } from "../HomePopularSection";
+// import { EmbedHomepage } from "../EmbedHomepage";
+// import { HomePopularSection } from "../HomePopularSection";
 import { HomeRecentSection, recentsFilter } from "../HomeRecentSection";
-import { HomeXraySection } from "../HomeXraySection";
+// import { HomeXraySection } from "../HomeXraySection";
 
 export const HomeContent = (): JSX.Element | null => {
   const user = useSelector(getUser);
-  const embeddingHomepage = useSetting("embedding-homepage");
-  const isXrayEnabled = useSelector(getIsXrayEnabled);
+  // const embeddingHomepage = useSetting("embedding-homepage");
+  // const isXrayEnabled = useSelector(getIsXrayEnabled);
   const { data: databases, error: databasesError } = useDatabaseListQuery();
   const { data: recentItemsRaw, error: recentItemsError } = useListRecentsQuery(
     undefined,
@@ -42,21 +42,21 @@ export const HomeContent = (): JSX.Element | null => {
     return <LoadingAndErrorWrapper loading />;
   }
 
-  if (embeddingHomepage === "visible" && user.is_superuser) {
-    return <EmbedHomepage />;
-  }
+  // if (embeddingHomepage === "visible" && user.is_superuser) {
+  //   return <EmbedHomepage />;
+  // }
 
-  if (isPopularSection(user, recentItems, popularItems)) {
-    return <HomePopularSection />;
-  }
+  // if (isPopularSection(user, recentItems, popularItems)) {
+  //   return <HomePopularSection />;
+  // }
 
   if (isRecentSection(user, recentItems)) {
     return <HomeRecentSection />;
   }
 
-  if (isXraySection(databases, isXrayEnabled)) {
-    return <HomeXraySection />;
-  }
+  // if (isXraySection(databases, isXrayEnabled)) {
+  //   return <HomeXraySection />;
+  // }
 
   return null;
 };
@@ -76,18 +76,18 @@ const isLoading = (
   }
 };
 
-const isPopularSection = (
-  user: User,
-  recentItems: RecentItem[] = [],
-  popularItems: PopularItem[] = [],
-): boolean => {
-  return (
-    !user.is_installer &&
-    user.has_question_and_dashboard &&
-    popularItems.length > 0 &&
-    (isWithinWeeks(user.first_login, 1) || !recentItems.length)
-  );
-};
+// const isPopularSection = (
+//   user: User,
+//   recentItems: RecentItem[] = [],
+//   popularItems: PopularItem[] = [],
+// ): boolean => {
+//   return (
+//     !user.is_installer &&
+//     user.has_question_and_dashboard &&
+//     popularItems.length > 0 &&
+//     (isWithinWeeks(user.first_login, 1) || !recentItems.length)
+//   );
+// };
 
 const isRecentSection = (
   user: User,
@@ -96,9 +96,9 @@ const isRecentSection = (
   return user.has_question_and_dashboard && recentItems.length > 0;
 };
 
-const isXraySection = (
-  databases: Database[] = [],
-  isXrayEnabled: boolean,
-): boolean => {
-  return databases.some(isSyncCompleted) && isXrayEnabled;
-};
+// const isXraySection = (
+//   databases: Database[] = [],
+//   isXrayEnabled: boolean,
+// ): boolean => {
+//   return databases.some(isSyncCompleted) && isXrayEnabled;
+// };

frontend/src/metabase/home/components/HomeRecentSection/HomeRecentSection.tsx

@@ -1,12 +1,14 @@
 import { t } from "ttag";
 
 import { useListRecentsQuery } from "metabase/api";
+import { CommentFeed } from "metabase/comments";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import { getIcon } from "metabase/lib/icon";
 import { getName } from "metabase/lib/name";
 import { useSelector } from "metabase/lib/redux";
 import * as Urls from "metabase/lib/urls";
 import { getUser } from "metabase/selectors/user";
+import { Flex } from "metabase/ui";
 import type { RecentItem } from "metabase-types/api";
 
 import { isWithinWeeks } from "../../utils";
@@ -27,20 +29,28 @@ export const HomeRecentSection = () => {
   }
 
   return (
-    <div>
-      <HomeCaption>{t`Pick up where you left off`}</HomeCaption>
-      <SectionBody>
-        {recentsFilter(recentItems).map((item, index) => (
-          <HomeModelCard
-            key={index}
-            title={getName(item)}
-            icon={getIcon(item)}
-            url={Urls.modelToUrl(item) ?? ""}
-          />
-        ))}
-        {hasHelpCard && <HomeHelpCard />}
-      </SectionBody>
-    </div>
+    <Flex gap="lg">
+      <div style={{ width: "50%" }}>
+        <HomeCaption>{t`Pick up where you left off`}</HomeCaption>
+        <SectionBody>
+          {recentsFilter(recentItems).map((item, index) => (
+            <HomeModelCard
+              key={index}
+              title={getName(item)}
+              icon={getIcon(item)}
+              url={Urls.modelToUrl(item) ?? ""}
+            />
+          ))}
+          {hasHelpCard && <HomeHelpCard />}
+        </SectionBody>
+      </div>
+      <div style={{ width: "50%" }}>
+        <HomeCaption>{t`What people are discussing`}</HomeCaption>
+        <div style={{ overflow: "auto", maxHeight: "20rem" }}>
+          <CommentFeed shadowed />
+        </div>
+      </div>
+    </Flex>
   );
 };
 

frontend/src/metabase/nav/components/AppBar/AppBar.module.css

@@ -0,0 +1,12 @@
+.AppBarButton {
+  position: relative;
+
+  &:hover {
+    background-color: var(--mb-color-brand);
+    color: white;
+  }
+
+  cursor: pointer;
+  padding: 0.5rem 0.6rem;
+  border-radius: 0.25rem;
+}

frontend/src/metabase/nav/components/AppBar/AppBarLarge.tsx

@@ -1,5 +1,11 @@
+import { useState } from "react";
+import { usePrevious } from "react-use";
 import { t } from "ttag";
 
+// import { useCurrentUser } from "embedding-sdk";
+import { useListCommentQuery } from "metabase/api";
+import { CommentFeed } from "metabase/comments";
+import { Box, Icon, IconBadgeDotThingy, Popover } from "metabase/ui";
 import type { CollectionId } from "metabase-types/api";
 
 import CollectionBreadcrumbs from "../../containers/CollectionBreadcrumbs";
@@ -9,6 +15,7 @@ import { ProfileLink } from "../ProfileLink";
 import { SearchBar } from "../search/SearchBar";
 import { SearchButton } from "../search/SearchButton";
 
+import Styles from "./AppBar.module.css";
 import {
   AppBarInfoContainer,
   AppBarLeftContainer,
@@ -49,6 +56,22 @@ const AppBarLarge = ({
   onLogout,
 }: AppBarLargeProps): JSX.Element => {
   const isNavBarVisible = isNavBarOpen && isNavBarEnabled;
+  const [hasNewNotifications, setHasNewNotifications] = useState(false);
+
+  const { data: comments } = useListCommentQuery(undefined, {
+    pollingInterval: 2000,
+  });
+
+  const previousComments = usePrevious(comments);
+
+  if (
+    !hasNewNotifications &&
+    comments?.length &&
+    previousComments?.length &&
+    comments.length > previousComments.length
+  ) {
+    setHasNewNotifications(true);
+  }
 
   return (
     <AppBarRoot isNavBarOpen={isNavBarVisible}>
@@ -76,6 +99,27 @@ const AppBarLarge = ({
         <AppBarRightContainer>
           {isSearchVisible && (isEmbedded ? <SearchBar /> : <SearchButton />)}
           {isNewButtonVisible && <NewItemButton collectionId={collectionId} />}
+          <Popover
+            width="20rem"
+            position="bottom-end"
+            onOpen={() => setHasNewNotifications(false)}
+          >
+            <Popover.Target>
+              <div className={Styles.AppBarButton}>
+                <Icon name="bell" onClick={onToggleNavbar} />
+                <IconBadgeDotThingy
+                  color="var(--mb-color-danger)"
+                  active={hasNewNotifications}
+                />
+              </div>
+            </Popover.Target>
+            <Popover.Dropdown>
+              <Box w="30rem" p="lg" mah="30rem">
+                <CommentFeed />
+                <div style={{ height: "1.5rem" }} />
+              </Box>
+            </Popover.Dropdown>
+          </Popover>
           {isProfileLinkVisible && (
             <AppBarProfileLinkContainer aria-label={t`Settings menu`}>
               <ProfileLink onLogout={onLogout} />

frontend/src/metabase/query_builder/components/view/View.jsx

@@ -309,7 +309,7 @@ class View extends Component {
 
     const legacyQuery = question.legacyQuery();
 
-    // Normally, when users open native models,
+    // Normally, when users open native models
     // they open an ad-hoc GUI question using the model as a data source
     // (using the `/dataset` endpoint instead of the `/card/:id/query`)
     // However, users without data permission open a real model as they can't use the `/dataset` endpoint

frontend/src/metabase/query_builder/components/view/ViewHeader/components/QuestionActions/QuestionActions.tsx

@@ -275,6 +275,18 @@ export const QuestionActions = ({
           />
         </ViewHeaderIconButtonContainer>
       )}
+      <Tooltip tooltip={t`Comments`}>
+        <ViewHeaderIconButtonContainer>
+          <Button
+            onlyIcon
+            icon="comment"
+            iconSize={HEADER_ICON_SIZE}
+            onClick={onInfoClick}
+            color={infoButtonColor}
+            data-testid="qb-header-comment-button"
+          />
+        </ViewHeaderIconButtonContainer>
+      </Tooltip>
       <Tooltip tooltip={t`More info`}>
         <ViewHeaderIconButtonContainer>
           <Button

frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/QuestionInfoSidebar.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useMount } from "react-use";
 import { t } from "ttag";
 
+import { CommentFeed } from "metabase/comments";
 import {
   Sidesheet,
   SidesheetCard,
@@ -61,11 +62,12 @@ export const QuestionInfoSidebar = ({
       data-testid="question-info-sidebar"
     >
       <Tabs
-        defaultValue="overview"
+        defaultValue="comments"
         className={SidesheetStyles.FlexScrollContainer}
       >
         <Tabs.List mx="lg">
           <Tabs.Tab value="overview">{t`Overview`}</Tabs.Tab>
+          <Tabs.Tab value="comments">{t`Comments`}</Tabs.Tab>
           <Tabs.Tab value="history">{t`History`}</Tabs.Tab>
         </Tabs.List>
         <SidesheetTabPanelContainer>
@@ -101,6 +103,9 @@ export const QuestionInfoSidebar = ({
               <EntityIdCard entityId={question._card.entity_id} />
             </Stack>
           </Tabs.Panel>
+          <Tabs.Panel value="comments">
+            <CommentFeed model="card" modelId={question.id()} autoScroll />
+          </Tabs.Panel>
           <Tabs.Panel value="history">
             <SidesheetCard>
               <QuestionActivityTimeline question={question} />

frontend/src/metabase/ui/components/data-display/index.ts

@@ -1,3 +1,4 @@
 export * from "./Accordion";
 export * from "./Card";
 export * from "./Image";
+export { Badge, type BadgeProps } from "@mantine/core";

frontend/src/metabase/ui/components/icons/Icon/Icon.tsx

@@ -4,6 +4,8 @@ import cx from "classnames";
 import type { MouseEvent, ReactNode, SVGAttributes } from "react";
 import { forwardRef } from "react";
 
+import { Box } from "metabase/ui";
+
 import { Tooltip } from "../../overlays/Tooltip";
 
 import type { IconName } from "./icons";
@@ -47,3 +49,24 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
 export const FixedSizeIcon = styled(Icon)`
   flex-shrink: 0;
 `;
+
+export const IconBadgeDotThingy = ({
+  color,
+  active,
+}: {
+  color: string;
+  active: boolean;
+}) => (
+  <Box
+    style={{
+      position: "absolute",
+      opacity: active ? 1 : 0,
+      top: 4,
+      right: 4,
+      width: 8,
+      height: 8,
+      borderRadius: "50%",
+      backgroundColor: color,
+    }}
+  ></Box>
+);

frontend/src/metabase/ui/components/icons/Icon/icons/comment.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 13 14" fill="currentColor" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4812 13.3455L12.4811 13.3458C12.4692 13.3747 12.4514 13.4021 12.4268 13.4267C12.4056 13.4479 12.3823 13.464 12.3581 13.4757C11.9069 13.1767 11.5609 12.8548 11.1891 12.5091C11.0555 12.3848 10.9185 12.2574 10.7721 12.1268L10.7554 12.1119L10.7373 12.0985L9.83585 11.4294C9.95615 11.3212 10.0553 11.1899 10.1264 11.0425L11.202 11.8408L12 12.433V11.4393V5.225C12.0808 5.24139 12.1644 5.25 12.25 5.25C12.3356 5.25 12.4192 5.24139 12.5 5.225V13.25C12.5 13.2849 12.4931 13.3168 12.4812 13.3455ZM9 10.75H8.92039L8.83546 10.687C8.75635 10.5888 8.76238 10.4447 8.85355 10.3536C8.94605 10.2611 9.09301 10.2562 9.19123 10.339C9.2279 10.3825 9.25 10.4387 9.25 10.5C9.25 10.6381 9.13806 10.75 9 10.75ZM7.812 10.25C7.77439 10.4142 7.77028 10.5845 7.79967 10.75H2.25C1.55964 10.75 1 10.1904 1 9.5L1 2.5C1 1.80964 1.55964 1.25 2.25 1.25L11.25 1.25C11.9404 1.25 12.5 1.80964 12.5 2.5V2.77501C12.4192 2.75861 12.3356 2.75 12.25 2.75C12.1644 2.75 12.0808 2.75861 12 2.77501V2.5C12 2.08579 11.6642 1.75 11.25 1.75L2.25 1.75C1.83572 1.75 1.5 2.08583 1.5 2.5L1.5 9.5C1.5 9.91424 1.83576 10.25 2.25 10.25H7.812ZM12.5 4C12.5 4.13807 12.3881 4.25 12.25 4.25C12.1119 4.25 12 4.13807 12 4C12 3.86193 12.1119 3.75 12.25 3.75C12.3881 3.75 12.5 3.86193 12.5 4Z" />
+</svg>

frontend/src/metabase/ui/components/icons/Icon/icons/index.ts

@@ -91,6 +91,8 @@ import cloud_filled_component from "./cloud_filled.svg?component";
 import cloud_filled_source from "./cloud_filled.svg?source";
 import combine_component from "./combine.svg?component";
 import combine_source from "./combine.svg?source";
+import comment_component from "./comment.svg?component";
+import comment_source from "./comment.svg?source";
 import compare_component from "./compare.svg?component";
 import compare_source from "./compare.svg?source";
 import connections_component from "./connections.svg?component";
@@ -577,6 +579,10 @@ export const Icons = {
     component: combine_component,
     source: combine_source,
   },
+  comment: {
+    component: comment_component,
+    source: comment_source,
+  },
   connections: {
     component: connections_component,
     source: connections_source,

frontend/src/metabase/ui/components/index.ts

@@ -9,3 +9,4 @@ export * from "./overlays";
 export * from "./theme";
 export * from "./typography";
 export * from "./utils";
+export {Avatar} from "@mantine/core"

package.json

@@ -13,6 +13,7 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^8.0.0",
+    "@emoji-mart/data": "^1.2.1",
     "@emotion/cache": "^11.11.0",
     "@emotion/is-prop-valid": "^1.1.1",
     "@emotion/react": "^11.11.0",
@@ -50,6 +51,7 @@
     "detect-package-manager": "^3.0.2",
     "diff": "^3.2.0",
     "echarts": "^5.5.1-rc.1",
+    "emoji-mart": "^5.6.0",
     "fast-text-encoding": "^1.0.6",
     "formik": "^2.4.5",
     "hast-util-from-html": "^2.0.1",
@@ -94,6 +96,7 @@
     "react-innertext": "^1.1.5",
     "react-is": "^18.2.0",
     "react-markdown": "^8.0.4",
+    "react-mentions": "^4.4.10",
     "react-redux": "^9.1.2",
     "react-resizable": "^3.0.5",
     "react-router": "3",
@@ -204,6 +207,7 @@
     "@types/react-dom": "^18.2.17",
     "@types/react-grid-layout": "^1.1.3",
     "@types/react-is": "^18.2.4",
+    "@types/react-mentions": "^4.4.0",
     "@types/react-resizable": "^3.0.4",
     "@types/react-router-redux": "^4.0.53",
     "@types/react-textarea-autosize": "^4.3.6",

resources/migrations/001_update_migrations.yaml

@@ -9288,6 +9288,179 @@ databaseChangeLog:
                   name: type
             indexName: idx_collection_type
 
+  - changeSet:
+      id: v51.2024-09-18T09:29:12
+      author: tsmacdonald
+      comment: Add the metabase_comment table
+      preConditions:
+        - onFail: MARK_RAN
+        - not:
+          - tableExists:
+              tableName: metabase_comment
+      changes:
+        - createTable:
+            tableName: metabase_comment
+            remarks: 'Comments. For Metabase!'
+            columns:
+              - column:
+                  name: id
+                  remarks: PK
+                  type: int
+                  autoIncrement: true
+                  constraints:
+                    primaryKey: true
+                    nullable: false
+              - column:
+                  name: text
+                  type: ${text.type}
+                  remarks: Comment body
+              - column:
+                  name: active
+                  type: ${boolean.type}
+                  defaultValueBoolean: false
+                  remarks: Is the comment resolved
+                  constraints:
+                    nullable: false
+              - column:
+                  name: model_id
+                  type: int
+                  remarks: 'The card/dashboard/etc the comment is attached to'
+                  constraints:
+                    nullable: false
+              - column:
+                  name: model
+                  type: varchar(16)
+                  remarks: 'The type of model that the comment is attached to'
+                  constraints:
+                    nullable: false
+              - column:
+                  name: author_id
+                  type: int
+                  remarks: 'The author ID'
+                  constraints:
+                    nullable: false
+                    referencedTableName: core_user
+                    referencedColumnNames: id
+                    foreignKeyName: fk_metabase_comment_user_id
+              - column:
+                  remarks: The timestamp of when the comment was created
+                  name: created_at
+                  type: ${timestamp_type}
+                  defaultValueComputed: current_timestamp
+                  constraints:
+                    nullable: false
+              - column:
+                  remarks: The timestamp of when the comment was updated
+                  name: updated_at
+                  type: ${timestamp_type}
+                  defaultValueComputed: current_timestamp
+                  constraints:
+                    nullable: false
+
+  - changeSet:
+      id: v51.2024-09-18T11:29:12
+      author: tsmacdonald
+      comment: Rename metabase_comment.active to .resolved because I'm tonto
+      changes:
+        - renameColumn:
+            tableName: metabase_comment
+            columnDataType: ${boolean.type}
+            oldColumnName: active
+            newColumnName: resolved
+
+  - changeSet:
+      id: v51.2024-09-18T12:01:12
+      author: tsmacdonald
+      comment: Add user avatars!
+      preConditions:
+        - not:
+          - columnExists:
+              tableName: core_user
+              columnName: avatar
+      changes:
+        - addColumn:
+            tableName: core_user
+            columns:
+              - column:
+                  name: avatar
+                  type: ${text.type}
+                  remarks: Base64-encoded avatar image
+
+  - changeSet:
+      id: v51.2024-09-18T12:15:12
+      author: tsmacdonald
+      comment: Add the metabase_comment_reaction table
+      preConditions:
+        - onFail: MARK_RAN
+        - not:
+          - tableExists:
+              tableName: metabase_comment_reaction
+      changes:
+        - createTable:
+            tableName: metabase_comment_reaction
+            remarks: 'Emoji. For Metabase!'
+            columns:
+              - column:
+                  name: id
+                  remarks: PK
+                  type: int
+                  autoIncrement: true
+                  constraints:
+                    primaryKey: true
+                    nullable: false
+              - column:
+                  name: emoji
+                  type: varchar(4)
+                  remarks: The actual emoji
+              - column:
+                  name: author_id
+                  type: int
+                  remarks: 'The reactor. Not nuclear.'
+                  constraints:
+                    nullable: false
+                    referencedTableName: core_user
+                    referencedColumnNames: id
+                    foreignKeyName: fk_metabase_comment_reaction_user_id
+              - column:
+                  name: comment_id
+                  type: int
+                  remarks: 'What do you think?'
+                  constraints:
+                    nullable: false
+                    referencedTableName: metabase_comment
+                    referencedColumnNames: id
+                    foreignKeyName: fk_metabase_comment_reaction_comment_id
+              - column:
+                  remarks: The timestamp of when the reaction was reacted
+                  name: created_at
+                  type: ${timestamp_type}
+                  defaultValueComputed: current_timestamp
+                  constraints:
+                    nullable: false
+
+  - changeSet:
+      id: v51.2024-09-18T15:56:12
+      author: tsmacdonald
+      comment: Add metabase_comment.resolved_by_id
+      preConditions:
+        - not:
+          - columnExists:
+              tableName: metabase_comment
+              columnName: resolved_by_id
+      changes:
+        - addColumn:
+            tableName: metabase_comment
+            columns:
+              - column:
+                  name: resolved_by_id
+                  type: int
+                  remarks: 'As it sounds'
+                  constraints:
+                    nullable: true
+                    referencedTableName: core_user
+                    referencedColumnNames: id
+                    foreignKeyName: fk_metabase_comment_resolved_by_id
+
   # >>>>>>>>>> DO NOT ADD NEW MIGRATIONS BELOW THIS LINE! ADD THEM ABOVE <<<<<<<<<<
 
 ########################################################################################################################

src/metabase/api/comment.clj

@@ -0,0 +1,69 @@
+(ns metabase.api.comment
+  "/api/comment endpoints!"
+  (:require
+   [compojure.core :refer [GET POST PUT]]
+   [metabase.api.common :as api]
+   [metabase.models.comment :as comment]
+   [metabase.models.reaction :as reaction]
+   [metabase.util :as u]
+   [metabase.util.malli.schema :as ms]
+   [toucan2.core :as t2]))
+
+(set! *warn-on-reflection* true)
+
+(def ^:private commentable-model-schema "As it says"
+  (into [:enum] comment/commentable-models))
+
+(api/defendpoint GET "/"
+  "Get juicy things"
+  [model model_id user_id]
+  {model    [:maybe commentable-model-schema]
+   model_id [:maybe ms/PositiveInt]
+   user_id  [:maybe ms/PositiveInt]}
+  (cond
+    model (do
+            (api/checkp (integer? model_id) "model_id" "model_id is required when specifying a model")
+            (api/checkp (nil? user_id) "user_id" "When specifying a model, do not provide user_id")
+            (comment/for-model model model_id))
+    user_id (comment/user-notifications api/*current-user-id*)
+    :else (comment/all)))
+
+(api/defendpoint POST "/"
+  "Create a comment"
+  [:as {{:keys [model model_id text]} :body}]
+  {model    commentable-model-schema
+   model_id ms/PositiveInt
+   text     ms/NonBlankString}
+  (comment/create! {:model     model
+                    :model_id  model_id
+                    :text      text
+                    :author_id api/*current-user-id*}))
+
+(api/defendpoint PUT "/:id"
+  "Update a comment (resolve; edit)"
+  [id :as {{:keys [resolved text]} :body}]
+  {id       ms/PositiveInt
+   resolved [:maybe :boolean]
+   text     [:maybe ms/NonBlankString]}
+  (let [comment-updates {:resolved       resolved
+                         :text           text
+                         :resolved_by_id (when resolved api/*current-user-id*)}]
+    (comment/update! id (u/select-non-nil-keys comment-updates [:resolved :text :resolved_by_id]))))
+
+(api/defendpoint POST "/:comment-id/react"
+  "Create a comment"
+  [comment-id :as {{:keys [emoji]} :body}]
+  {comment-id ms/PositiveInt
+   emoji      ms/NonBlankString}
+  (reaction/create! {:comment_id comment-id
+                     :emoji      emoji
+                     :author_id  api/*current-user-id*}))
+
+(api/defendpoint GET "/my-name-is-bruno-and-i-am-drunk-with-power"
+  "Deletes all comments"
+  []
+  {}
+  (t2/delete! :model/Comment)
+  {:status "I am become death, destroyer of worlds"})
+
+(api/define-routes)

src/metabase/api/routes.clj

@@ -13,6 +13,7 @@
    [metabase.api.channel :as api.channel]
    [metabase.api.cloud-migration :as api.cloud-migration]
    [metabase.api.collection :as api.collection]
+   [metabase.api.comment :as api.comment]
    [metabase.api.common :as api :refer [defroutes context]]
    [metabase.api.dashboard :as api.dashboard]
    [metabase.api.database :as api.database]
@@ -110,6 +111,7 @@
   (context "/card"                 [] (+auth api.card/routes))
   (context "/cloud-migration"      [] (+auth api.cloud-migration/routes))
   (context "/collection"           [] (+auth api.collection/routes))
+  (context "/comment"              [] (+auth api.comment/routes))
   (context "/channel"              [] (+auth api.channel/routes))
   (context "/dashboard"            [] (+auth api.dashboard/routes))
   (context "/database"             [] (+auth api.database/routes))

src/metabase/api/user.clj

@@ -411,9 +411,10 @@
   "Update an existing, active `User`.
   Self or superusers can update user info and groups.
   Group Managers can only add/remove users from groups they are manager of."
-  [id :as {{:keys [email first_name last_name user_group_memberships
+  [id :as {{:keys [avatar email first_name last_name user_group_memberships
                    is_superuser is_group_manager login_attributes locale] :as body} :body}]
   {id                     ms/PositiveInt
+   avatar                 [:maybe ms/NonBlankString]
    email                  [:maybe ms/Email]
    first_name             [:maybe ms/NonBlankString]
    last_name              [:maybe ms/NonBlankString]
@@ -450,7 +451,7 @@
                             (u/select-keys-when body
                                                 :present (cond-> #{:first_name :last_name :locale}
                                                            api/*is-superuser?* (conj :login_attributes))
-                                                :non-nil (cond-> #{:email}
+                                                :non-nil (cond-> #{:email :avatar}
                                                            api/*is-superuser?* (conj :is_superuser))))]
           (t2/update! :model/User id changes)
           (events/publish-event! :event/user-update {:object (t2/select-one :model/User :id id)

src/metabase/email/comment_notification.mustache

@@ -0,0 +1,25 @@
+{{> metabase/email/_header }}
+  <div class="card-container" style="color: {{colorTextMedium}};">
+    <p style="font-weight: 500; line-height: 1.375em; color: {{colorTextMedium}};">
+      Hi {{recipientFirstName}},
+    </p>
+
+    <p style="font-weight: 500; line-height: 1.375em; color: {{colorTextMedium}};">
+      {{commentAuthorName}} ({{commentAuthorEmail}}) commented on
+      <a href="{{modelURL}}" style="color:{{applicationColor}}">{{modelTitle}}:</a>
+    </p>
+
+    <p style="font-weight:600;line-height:1.375em;color:{{colorTextMedium}};border-left: 2px solid {{colorTextMedium}};padding: 0.5em 0 0.5em 1em;">
+      {{commentBody}}
+    </p>
+
+    <div>
+      <a
+        href="{{replyLink}}"
+        style="display: inline-block; padding: 0.75rem 1.125em; background-color: {{applicationColor}}; color: #FFF; border-radius: 6px; font-size: 0.875em; font-weight: 700; text-decoration: none;"
+      >
+        Reply
+      </a>
+    </div>
+  </div>
+{{> metabase/email/_footer }}

src/metabase/email/comment_reply.mustache

@@ -0,0 +1,25 @@
+{{> metabase/email/_header }}
+  <div class="card-container" style="color: {{colorTextMedium}};">
+    <p style="font-weight: 500; line-height: 1.375em; color: {{colorTextMedium}};">
+      Hi {{recipientFirstName}},
+    </p>
+
+    <p style="font-weight: 500; line-height: 1.375em; color: {{colorTextMedium}};">
+      {{commentAuthorName}} ({{commentAuthorEmail}}) replied to your comment on
+      <a href="{{modelURL}}" style="color:{{applicationColor}}">{{modelTitle}}:</a>
+    </p>
+
+    <p style="font-weight:600;line-height:1.375em;color:{{colorTextMedium}};border-left: 2px solid {{colorTextMedium}};padding: 0.5em 0 0.5em 1em;">
+      {{commentBody}}
+    </p>
+
+    <div>
+      <a
+        href="{{replyLink}}"
+        style="display: inline-block; padding: 0.75rem 1.125em; background-color: {{applicationColor}}; color: #FFF; border-radius: 6px; font-size: 0.875em; font-weight: 700; text-decoration: none;"
+      >
+        Reply
+      </a>
+    </div>
+  </div>
+{{> metabase/email/_footer }}

src/metabase/email/messages.clj

@@ -127,10 +127,51 @@
                                                   :sentFromSetup sent-from-setup?}))]
     (email/send-message!
      {:subject      (str (trs "You''re invited to join {0}''s {1}" company (app-name-trs)))
-      :recipients   [(:email invited)]
+      :recipients   [(:email invited)];; (t2/select-fn-vec :email ... user-ids
       :message-type :html
       :message      message-body})))
 
+(defn- comment-url-bit
+  [comment]
+  (condp = (:model comment)
+    "card" (format "card/%d" (:model_id comment))
+    "dashboard" (format "dashboard/%d" (:model_id comment))
+    "comment" (recur (t2/select-one :model/Comment :id (:model_id comment)))))
+
+(defn- model-title
+  [comment]
+  (condp = (:model comment)
+    "card" (t2/select-one-fn :name :model/Card :id (:model_id comment))
+    "dashboard" (t2/select-one-fn :name :model/Dashboard :id (:model_id comment))
+    "comment" (recur (t2/select-one :model/Comment :id (:model_id comment)))))
+
+(defn send-comment-notification!
+  "Send an email to `users` letting them know that there's a new comment"
+  [users comment]
+  (let [full-comment    (t2/hydrate comment :author)
+        reply?          (= "comment" (:model comment))
+        author          (:author full-comment)
+        model-url       (str (public-settings/site-url) "/" (comment-url-bit comment))
+        the-model-title (model-title comment)
+        subject         (format "New %s on %s" (if reply? "reply" "comment") the-model-title)]
+    (doseq [user users]
+      (let [message-body (stencil/render-file (str "metabase/email/" (if reply?
+                                                                       "comment_reply"
+                                                                       "comment_notification"))
+                           (merge (common-context)
+                                  {:recipientFirstName (:first_name user)
+                                   :commentAuthorName  (:common_name author)
+                                   :commentAuthorEmail (:email author)
+                                   :modelURL           model-url
+                                   :modelTitle         the-model-title
+                                   :replyLink          model-url
+                                   :commentBody        (:text comment)}))]
+        (email/send-message!
+         {:subject      subject
+          :recipients   [(:email user)]
+          :message-type :html
+          :message      message-body})))))
+
 (defn- all-admin-recipients
   "Return a sequence of email addresses for all Admin users.
 

src/metabase/models/comment.clj

@@ -0,0 +1,98 @@
+(ns metabase.models.comment
+  (:require
+   [metabase.email.messages :as messages]
+   [metabase.models.interface :as mi]
+   [metabase.util :as u]
+   [methodical.core :as methodical]
+   [toucan2.core :as t2]))
+
+(methodical/defmethod t2/table-name :model/Comment [_model] :metabase_comment)
+
+(doto :model/Comment
+  (derive :metabase/model))
+
+(declare send-notifications!)
+
+(t2/define-after-insert :model/Comment
+  [comment]
+  (u/prog1 comment
+    (send-notifications! comment)))
+
+(methodical/defmethod t2/batched-hydrate [:default :reactions]
+  [_model k comments]
+  (mi/instances-with-hydrated-data
+   comments k
+   #(group-by :comment_id
+              (t2/select :model/Reaction :comment_id [:in (map :id comments)]))
+   :id
+   {:default []}))
+
+(methodical/defmethod t2/batched-hydrate [:default :replies]
+  [_model k comments]
+  (mi/instances-with-hydrated-data
+   comments k
+   #(group-by :model_id
+              (t2/select :model/Comment :model "comment" :model_id [:in (map :id comments)]))
+   :id
+   {:default []}))
+
+(def commentable-models "Set of models that allow comments"
+  #{"card"
+    "comment"
+    "dashboard"})
+
+(defn- hydrate-comment
+  [comment-or-comments]
+  (t2/hydrate comment-or-comments :author [:reactions :author] [:replies :author] [:replies :reactions] [:replies [:reactions :author]] :resolved_by))
+
+(defn for-model
+  "All the comments for the given model"
+  [model-type model-id]
+  (hydrate-comment
+   (t2/select :model/Comment :model model-type :model_id model-id {:order-by [[:created_at :asc]]})))
+
+(defn user-notifications
+  "All the comments that a given user should care about"
+  [user-or-id]
+  (let [user-id      (u/the-id user-or-id)
+        model-pairs  (distinct (t2/select-fn-vec (juxt :model_id :model) :model/Comment :author_id user-id))
+        model-clause (into [:or] (map (fn [[m-id m]] [:and
+                                                      [:= :model_id m-id]
+                                                      [:= :model m]]) model-pairs))
+        where-clause [:and
+                      [:not= :author_id user-id]
+                      model-clause]]
+    (hydrate-comment
+     (t2/select :model/Comment {:where where-clause
+                                :order-by [[:created_at :desc]]}))))
+
+(defn- send-notifications!
+  [comment]
+  (let [user-ids (t2/select-fn-set :author_id :model/Comment {:where [:or
+                                                                      [:and
+                                                                       [:= :model_id (:model_id comment)]
+                                                                       [:= :model (:model comment)]]
+                                                                      [:and
+                                                                       [:= :id (:model_id comment)]
+                                                                       [:= :model "comment"]]]})
+        users    (t2/select :model/User :id [:in user-ids])]
+    (messages/send-comment-notification! users comment)))
+
+(defn all
+  "All top-level comments"
+  []
+  (hydrate-comment
+   (t2/select :model/Comment :model [:not= "comment"] {:order-by [[:created_at :desc]]})))
+
+(defn create!
+  "make the thing"
+  [params-map]
+  (hydrate-comment
+   (t2/insert-returning-instance! :model/Comment params-map)))
+
+(defn update!
+  "edit the thing"
+  [comment-id comment-updates]
+  (hydrate-comment
+   (t2/select-one :model/Comment
+                  :id (first (t2/update-returning-pks! :model/Comment comment-id comment-updates)))))

src/metabase/models/reaction.clj

@@ -0,0 +1,22 @@
+(ns metabase.models.reaction
+  (:require
+   [metabase.util :as u]
+   [methodical.core :as methodical]
+   [toucan2.core :as t2]))
+
+(methodical/defmethod t2/table-name :model/Reaction [_model] :metabase_comment_reaction)
+
+(doto :model/Reaction
+  (derive :metabase/model))
+
+(defn for-comment
+  "All the reactions for a given comment"
+  [comment-or-id]
+  (t2/hydrate
+   (t2/select :model/Reaction :comment_id (u/the-id comment-or-id) {:order-by [[:created_at :asc]]})
+   :author))
+
+(defn create!
+  "make the thing"
+  [params-map]
+  (t2/insert-returning-instance! :model/Reaction params-map))

src/metabase/models/user.clj

@@ -43,10 +43,11 @@
   :model/User)
 
 (methodical/defmethod t2/table-name :model/User [_model] :core_user)
-(methodical/defmethod t2/model-for-automagic-hydration [:default :author]     [_original-model _k] :model/User)
-(methodical/defmethod t2/model-for-automagic-hydration [:default :creator]    [_original-model _k] :model/User)
-(methodical/defmethod t2/model-for-automagic-hydration [:default :updated_by] [_original-model _k] :model/User)
-(methodical/defmethod t2/model-for-automagic-hydration [:default :user]       [_original-model _k] :model/User)
+(methodical/defmethod t2/model-for-automagic-hydration [:default :author]      [_original-model _k] :model/User)
+(methodical/defmethod t2/model-for-automagic-hydration [:default :creator]     [_original-model _k] :model/User)
+(methodical/defmethod t2/model-for-automagic-hydration [:default :updated_by]  [_original-model _k] :model/User)
+(methodical/defmethod t2/model-for-automagic-hydration [:default :resolved_by] [_original-model _k] :model/User)
+(methodical/defmethod t2/model-for-automagic-hydration [:default :user]        [_original-model _k] :model/User)
 
 (doto :model/User
   (derive :metabase/model)
@@ -204,7 +205,7 @@
 
 (def ^:private default-user-columns
   "Sequence of columns that are normally returned when fetching a User from the DB."
-  [:id :email :date_joined :first_name :last_name :last_login :is_superuser :is_qbnewb])
+  [:id :avatar :email :date_joined :first_name :last_name :last_login :is_superuser :is_qbnewb])
 
 (def admin-or-self-visible-columns
   "Sequence of columns that we can/should return for admins fetching a list of all Users, or for the current user

test/metabase/api/comment_test.clj

@@ -0,0 +1,96 @@
+(ns metabase.api.comment-test
+  (:require
+   [clojure.test :refer :all]
+   [metabase.api.comment :as api.comment]
+   [metabase.test :as mt]
+   [toucan2.core :as t2]))
+
+(set! *warn-on-reflection* true)
+
+(comment api.comment/keep-me)
+
+(deftest get-all-test
+  (testing "GET /api/comment"
+    (mt/with-temp
+      [:model/Card    {card-id :id} {}
+       :model/Comment {c1-id :id}   {:model "card" :model_id card-id :text "first!"}
+       :model/Comment {c2-id :id}   {:model "card" :model_id card-id :text "first!! Edit: dangit"}
+       :model/Comment {c3-id :id}   {:model "card" :model_id card-id :text "Here is some actual insight..."}]
+      (let [result (mt/user-http-request :rasta :get 200 "comment")]
+        (is (= [c3-id c2-id c1-id] (filter #{c3-id c2-id c1-id} (map :id result))))
+        (is (=? {:model "card" :text "Here is some actual insight..." :model_id card-id :author {:first_name "Rasta"}}
+                (first result)))))))
+
+(deftest get-for-model-test
+  (testing "GET /api/comment/model=x&model_id=42"
+    (mt/with-temp
+      [:model/Card    {card-id :id}  {}
+       :model/Card    {card2-id :id} {}
+       :model/Comment {c1-id :id}    {:model "card" :model_id card-id :text "first!"}
+       :model/Comment {c2-id :id}    {:model "card" :model_id card-id :text "first!! Edit: dangit"}
+       :model/Comment {c3-id :id}    {:model "card" :model_id card-id :text "Here is some actual insight..."}
+       :model/Comment {c4-id :id}    {:model "card" :model_id card2-id :text "Something else"}]
+      (let [result (mt/user-http-request :rasta :get 200 (format "comment?model=card&model_id=%d" card-id))]
+        (is (= [c1-id c2-id c3-id] (filter #{c4-id c3-id c2-id c1-id} (map :id result))))
+        (is (=? {:model "card" :text "first!" :model_id card-id :author {:first_name "Rasta"}}
+                (first result))))))
+  (testing "Comments with replies"
+    (mt/with-temp
+      [:model/Card    {card-id :id}  {}
+       :model/Comment {c1-id :id}    {:model "card"    :model_id card-id  :text "first!"}
+       :model/Comment {c2-id :id}    {:model "comment" :model_id c1-id    :text "A reply"}
+       :model/Comment {c3-id :id}    {:model "card"    :model_id card-id  :text "Here is some actual insight..."}
+       :model/Comment {c4-id :id}    {:model "comment" :model_id c1-id    :text "Another reply"}]
+      (let [result (mt/user-http-request :rasta :get 200 (format "comment?model=card&model_id=%d" card-id))]
+        (is (=?
+             [{:id c1-id
+               :replies [{:id c2-id}
+                         {:id c4-id}]}
+              {:id c3-id
+               :replies []}]
+             result))))))
+
+(deftest comment-creation-test
+  (testing "POST /api/comment"
+    (mt/with-temp [:model/Card {card-id :id} {}]
+      (let [new-comment {:model "card" :model_id card-id :text "Oh-SHEEN"}
+            result      (mt/user-http-request :rasta :post 200 "comment" new-comment)]
+        (t2/delete! :model/Comment :id (:id result))
+        (is (=? (assoc new-comment :author {:first_name "Rasta"})
+                result))))))
+
+(deftest comment-resolution-test
+  (testing "PUT /api/comment resolved"
+    (mt/with-temp
+      [:model/Card    {card-id :id}    {}
+       :model/Comment {comment-id :id} {:model "card" :model_id card-id :text "first!"}]
+      (let [result (mt/user-http-request :rasta :put 200 (format "comment/%d" comment-id) {:resolved true})]
+        (is (=? {:resolved true :text "first!" :author {:first_name "Rasta"} :resolved_by {:first_name "Rasta"}}
+                result))
+        (is (true? (t2/select-one-fn :resolved :model/Comment :id comment-id))))))
+  (testing "PUT /api/comment text"
+    (mt/with-temp
+      [:model/Card    {card-id :id}    {}
+       :model/Comment {comment-id :id} {:model "card" :model_id card-id :text "first!"}]
+      (let [result (mt/user-http-request :rasta :put 200 (format "comment/%d" comment-id) {:text "oops"})]
+        (is (=? {:resolved false :text "oops" :author {:first_name "Rasta"}}
+                result))
+        (is (= "oops" (t2/select-one-fn :text :model/Comment :id comment-id)))))))
+
+(deftest comment-reaction-test
+  (testing "POST /api/comment/:id/react"
+    (mt/with-temp
+      [:model/Card    {card-id :id}    {}
+       :model/Comment {comment-id :id} {:model "card" :model_id card-id :text "first!"}]
+      (try
+        (mt/user-http-request :rasta :post 200
+                              (format "comment/%d/react" comment-id)
+                              {:emoji "🐄"})
+        (let [comment (first (mt/user-http-request :rasta :get 200 (format "comment?model=card&model_id=%d" card-id)))]
+
+          (is (=? {:text "first!"
+                   :author {:first_name "Rasta"}
+                   :reactions [{:emoji "🐄" :author {:first_name "Rasta"}}]}
+                  comment)))
+        (finally
+          (t2/delete! :model/Reaction :comment_id comment-id))))))

test/metabase/test/util.clj

@@ -120,6 +120,11 @@
    :model/Collection
    (fn [_] (default-created-at-timestamped {:name (u.random/random-name)}))
 
+   :model/Comment
+   (fn [_] (default-timestamped
+            {:author_id (rasta-id)
+             :text      (u.random/random-name)}))
+
    :model/Action
    (fn [_] {:creator_id (rasta-id)})
 

yarn.lock

@@ -1229,6 +1229,13 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
+"@babel/runtime@7.4.5":
+  version "7.4.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
+  integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/runtime@7.7.2":
   version "7.7.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.2.tgz#111a78002a5c25fc8e3361bedc9529c696b85a6a"
@@ -1236,7 +1243,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
   integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
@@ -1490,6 +1497,11 @@
   dependencies:
     tslib "^2.0.0"
 
+"@emoji-mart/data@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emoji-mart/data/-/data-1.2.1.tgz#0ad70c662e3bc603e23e7d98413bd1e64c4fcb6c"
+  integrity sha512-no2pQMWiBy6gpBEiqGeU77/bFejDqUTRY7KX+0+iur13op3bqUsXdnwoZs6Xb1zbv0gAj5VvS1PWoUUckSr5Dw==
+
 "@emotion/babel-plugin@^11.11.0":
   version "11.11.0"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
@@ -5711,6 +5723,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-mentions@^4.4.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@types/react-mentions/-/react-mentions-4.4.0.tgz#d5396140390a10ae696222a8a2a4b51cf58fca01"
+  integrity sha512-dKnY1h42GPUO/QAyei6HxEsFUbEcqK/t1k60ZbLJstB9RAs8OCT69mj9AnUbeNdbzYVISE88OC2IYkkthAAn2g==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@^7.1.20":
   version "7.1.24"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.24.tgz#6caaff1603aba17b27d20f8ad073e4c077e975c0"
@@ -10770,6 +10789,11 @@ emittery@^0.13.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
   integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
 
+emoji-mart@^5.6.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.6.0.tgz#71b3ed0091d3e8c68487b240d9d6d9a73c27f023"
+  integrity sha512-eJp3QRe79pjwa+duv+n7+5YsNhRcMl812EcFVwrnRvYKoNPoQb5qxU8DG6Bgwji0akHdp6D4Ln6tYLG58MFSow==
+
 emoji-regex@^10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.3.0.tgz#76998b9268409eb3dae3de989254d456e70cfe23"
@@ -19975,6 +19999,16 @@ react-markdown@^8.0.4:
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
+react-mentions@^4.4.10:
+  version "4.4.10"
+  resolved "https://registry.yarnpkg.com/react-mentions/-/react-mentions-4.4.10.tgz#ae6c1e310a405597e83ce786f12c5bfb93b097ce"
+  integrity sha512-JHiQlgF1oSZR7VYPjq32wy97z1w1oE4x10EuhKjPr4WUKhVzG1uFQhQjKqjQkbVqJrmahf+ldgBTv36NrkpKpA==
+  dependencies:
+    "@babel/runtime" "7.4.5"
+    invariant "^2.2.4"
+    prop-types "^15.5.8"
+    substyle "^9.1.0"
+
 react-merge-refs@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
@@ -22415,6 +22449,14 @@ stylis@^4.3.0:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.2.tgz#8f76b70777dd53eb669c6f58c997bf0a9972e444"
   integrity sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==
 
+substyle@^9.1.0:
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/substyle/-/substyle-9.4.1.tgz#6a4647f363bc14fecc51aac371d4dbeda082aa50"
+  integrity sha512-VOngeq/W1/UkxiGzeqVvDbGDPM8XgUyJVWjrqeh+GgKqspEPiLYndK+XRcsKUHM5Muz/++1ctJ1QCF/OqRiKWA==
+  dependencies:
+    "@babel/runtime" "^7.3.4"
+    invariant "^2.2.4"
+
 supports-color@8.1.1, supports-color@^8.0.0, supports-color@^8.1.1:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"