feat: add user group db schema support

package.json

@@ -1,6 +1,6 @@
 {
     "name": "querybook",
-    "version": "3.17.1",
+    "version": "3.18.0",
     "description": "A Big Data Webapp",
     "private": true,
     "scripts": {

querybook/migrations/versions/1b8aba201c94_add_user_group_support.py

@@ -0,0 +1,38 @@
+"""add user group support
+
+Revision ID: 1b8aba201c94
+Revises: 27ed76f75106
+Create Date: 2023-02-03 00:31:09.209132
+
+"""
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy.dialects import mysql
+
+# revision identifiers, used by Alembic.
+revision = "1b8aba201c94"
+down_revision = "27ed76f75106"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table(
+        "user_group_member",
+        sa.Column("id", sa.Integer(), nullable=False),
+        sa.Column("gid", sa.Integer(), nullable=False),
+        sa.Column("uid", sa.Integer(), nullable=False),
+        sa.ForeignKeyConstraint(["gid"], ["user.id"], ondelete="CASCADE"),
+        sa.ForeignKeyConstraint(["uid"], ["user.id"], ondelete="CASCADE"),
+        sa.PrimaryKeyConstraint("id"),
+    )
+    op.add_column("user", sa.Column("is_group", sa.Boolean(), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column("user", "is_group")
+    op.drop_table("user_group_member")
+    # ### end Alembic commands ###

querybook/server/datasources/user.py

@@ -40,6 +40,16 @@ def get_user_info(uid):
     return user
 
 
+@register("/user/<int:uid>/group_members/", methods=["GET"])
+def get_user_group_members(uid):
+    group = logic.get_user_by_id(uid)
+
+    if group is None:
+        abort(RESOURCE_NOT_FOUND_STATUS_CODE)
+
+    return [g.to_dict() for g in group.group_members]
+
+
 @register("/user/name/<username>/", methods=["GET"])
 def get_user_info_by_username(username):
     user = logic.get_user_by_name(username)

querybook/server/logic/user.py

@@ -52,6 +52,11 @@ def get_user_by_name(username, case_sensitive=True, session=None):
     return None
 
 
+@with_session
+def get_user_group_members(id, session=None):
+    return User.get(id=id, session=session).group_members
+
+
 @with_session
 def create_user(
     username,

querybook/server/models/user.py

@@ -31,11 +31,19 @@ class User(CRUDMixin, Base):
     email = sql.Column(sql.String(length=name_length))
     profile_img = sql.Column(sql.String(length=url_length))
     deleted = sql.Column(sql.Boolean, default=False)
+    is_group = sql.Column(sql.Boolean, default=False)
 
     properties = sql.Column(sql.JSON, default={})
 
     settings = relationship("UserSetting", cascade="all, delete", passive_deletes=True)
     roles = relationship("UserRole", cascade="all, delete", passive_deletes=True)
+    group_members = relationship(
+        "User",
+        secondary="user_group_member",
+        primaryjoin="User.id == UserGroupMember.gid",
+        secondaryjoin="User.id == UserGroupMember.uid",
+        backref="user_groups",
+    )
 
     @hybrid_property
     def password(self):
@@ -66,8 +74,12 @@ def to_dict(self, with_roles=False):
             "profile_img": self.profile_img,
             "email": self.email,
             "deleted": self.deleted,
+            "is_group": self.is_group,
         }
 
+        if self.is_group:
+            user_dict["properties"] = self.properties
+
         if with_roles:
             user_dict["roles"] = [role.role.value for role in self.roles]
 
@@ -107,3 +119,11 @@ def to_dict(self):
             "role": self.role.value,
             "created_at": self.created_at,
         }
+
+
+class UserGroupMember(Base):
+    __tablename__ = "user_group_member"
+
+    id = sql.Column(sql.Integer, primary_key=True)
+    gid = sql.Column(sql.Integer, sql.ForeignKey("user.id", ondelete="CASCADE"))
+    uid = sql.Column(sql.Integer, sql.ForeignKey("user.id", ondelete="CASCADE"))

querybook/webapp/components/DataTableView/DataTableHeader.tsx

@@ -115,7 +115,13 @@ export const DataTableHeader: React.FunctionComponent<IDataTableHeader> = ({
     );
 
     const ownershipDOM = (tableOwnerships || []).map((ownership) => (
-        <UserBadge key={ownership.uid} uid={ownership.uid} mini cardStyle />
+        <UserBadge
+            key={ownership.uid}
+            uid={ownership.uid}
+            mini
+            cardStyle
+            groupPopover
+        />
     ));
 
     // Ownership cannot be removed if owner in db

querybook/webapp/components/UserBadge/UserBadge.tsx

@@ -1,8 +1,11 @@
 import clsx from 'clsx';
 import React, { useMemo } from 'react';
 
+import { UserGroupCard } from 'components/UserGroupCard/UserGroupCard';
 import { DELETED_USER_MSG } from 'const/user';
 import { useUser } from 'hooks/redux/useUser';
+import { Popover } from 'ui/Popover/Popover';
+import { PopoverHoverWrapper } from 'ui/Popover/PopoverHoverWrapper';
 import { AccentText } from 'ui/StyledText/StyledText';
 
 import { ICommonUserLoaderProps } from './types';
@@ -15,6 +18,7 @@ type IProps = {
     isOnline?: boolean;
     mini?: boolean;
     cardStyle?: boolean;
+    groupPopover?: boolean;
 } & ICommonUserLoaderProps;
 
 export const UserBadge: React.FunctionComponent<IProps> = ({
@@ -23,6 +27,7 @@ export const UserBadge: React.FunctionComponent<IProps> = ({
     isOnline,
     mini,
     cardStyle,
+    groupPopover,
 }) => {
     const { loading, userInfo } = useUser({ uid, name });
 
@@ -46,24 +51,20 @@ export const UserBadge: React.FunctionComponent<IProps> = ({
 
     const deletedText = userInfo?.deleted ? DELETED_USER_MSG : '';
 
-    if (mini) {
-        return (
-            <span
-                className={clsx({
-                    UserBadge: true,
-                    mini: true,
-                    'card-style': cardStyle,
-                })}
-            >
-                <figure>{avatarDOM}</figure>
-                <AccentText className="username" weight="bold">
-                    {userInfo?.fullname ?? userName} {deletedText}
-                </AccentText>
-            </span>
-        );
-    }
-
-    return (
+    const badgeDOM = mini ? (
+        <span
+            className={clsx({
+                UserBadge: true,
+                mini: true,
+                'card-style': cardStyle,
+            })}
+        >
+            <figure>{avatarDOM}</figure>
+            <AccentText className="username" weight="bold">
+                {userInfo?.fullname ?? userName} {deletedText}
+            </AccentText>
+        </span>
+    ) : (
         <div
             className={clsx({
                 UserBadge: true,
@@ -89,4 +90,26 @@ export const UserBadge: React.FunctionComponent<IProps> = ({
             </div>
         </div>
     );
+
+    return groupPopover && userInfo?.is_group ? (
+        <PopoverHoverWrapper>
+            {(showPopover, anchorElement) => (
+                <>
+                    {badgeDOM}
+
+                    {showPopover && (
+                        <Popover
+                            onHide={() => null}
+                            anchor={anchorElement}
+                            layout={['right', 'top']}
+                        >
+                            <UserGroupCard userGroup={userInfo} />
+                        </Popover>
+                    )}
+                </>
+            )}
+        </PopoverHoverWrapper>
+    ) : (
+        badgeDOM
+    );
 };

querybook/webapp/components/UserGroupCard/UserGroupCard.scss

@@ -0,0 +1,9 @@
+.UserGroupCard {
+    max-width: 400px;
+
+    .members-container {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+}

querybook/webapp/components/UserGroupCard/UserGroupCard.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+
+import { UserBadge } from 'components/UserBadge/UserBadge';
+import { IUserInfo } from 'const/user';
+import { UserResource } from 'resource/user';
+import { AccentText } from 'ui/StyledText/StyledText';
+
+import './UserGroupCard.scss';
+
+interface IProps {
+    userGroup: IUserInfo;
+}
+
+export const UserGroupCard = ({ userGroup }: IProps) => {
+    const [members, setMembers] = useState([]);
+
+    useEffect(() => {
+        UserResource.getUserGroupMembers(userGroup.id).then(({ data }) => {
+            setMembers(data);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <div className="UserGroupCard">
+            <div>
+                <AccentText color="dark" weight="bold">
+                    {userGroup.fullname}
+                </AccentText>
+                <AccentText color="light">{userGroup.username}</AccentText>
+            </div>
+            <div className="mt8">
+                <AccentText color="dark" weight="bold">
+                    Email
+                </AccentText>
+                <AccentText color="light">{userGroup.email}</AccentText>
+            </div>
+            <div className="mt8">
+                <AccentText color="dark" weight="bold">
+                    Description
+                </AccentText>
+                <AccentText color="light">
+                    {userGroup.properties?.description}
+                </AccentText>
+            </div>
+            <div className="mt8">
+                <AccentText color="dark" weight="bold">
+                    Group members
+                </AccentText>
+                <div className="members-container">
+                    {members.map((m) => (
+                        <div key={m.id} className="ml8">
+                            <UserBadge uid={m.id} mini />
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};

querybook/webapp/const/user.ts

@@ -9,8 +9,13 @@ export interface IUserInfo {
     fullname: string;
     profile_img: string;
     deleted: boolean;
+    email: string;
+    is_group: boolean;
 
     roles?: number[];
+    properties?: {
+        description?: string;
+    };
 }
 
 export interface IMyUserInfo {

querybook/webapp/resource/user.ts

@@ -35,6 +35,8 @@ export const UserResource = {
             [visibleEnvironments: IEnvironment[], userEnvironmentIds: number[]]
         >('/user/environment/'),
     getNotifiers: () => ds.fetch<INotifier[]>('/user/notifiers/'),
+    getUserGroupMembers: (id: number) =>
+        ds.fetch<IUserInfo[]>(`/user/${id}/group_members/`),
 };
 
 export const UserSettingResource = {